@treeseed/core 0.8.8 → 0.8.10

package/dist/pages/[slug].astro

@@ -8,7 +8,7 @@ import { isPublishedRuntimeContentMode, loadPublishedEntry } from '../utils/site
 
 export const prerender = false;
 
-const slug = String(Astro.params.slug ?? '');
+const slug = String(Astro.params.slug ?? Astro.url.pathname.replace(/^\/+|\/+$/g, ''));
 const publishedRuntime = isPublishedRuntimeContentMode();
 const localEntry = publishedRuntime ? null : (await getCollection('pages')).find((candidate) => candidate.data.slug === slug) ?? null;
 const publishedEntry = publishedRuntime ? await loadPublishedEntry(Astro.locals, 'pages', slug) : null;

package/dist/pages/books/[slug].astro

@@ -9,14 +9,14 @@ export const prerender = false;
 
 const slug = String(Astro.params.slug ?? '');
 const publishedRuntime = isPublishedRuntimeContentMode();
-const books = publishedRuntime ? [] : (await getCollection('books')).sort((a, b) => a.data.order - b.data.order);
-const localBook = publishedRuntime ? null : books.find((candidate) => candidate.id === slug) ?? null;
+const books = (await getCollection('books')).sort((a, b) => a.data.order - b.data.order);
+const localBook = books.find((candidate) => candidate.id === slug || candidate.data.slug === slug) ?? null;
 const publishedBook = publishedRuntime ? await loadPublishedEntry(Astro.locals, 'books', slug) : null;
-const book = publishedRuntime ? publishedBook?.entry ?? null : localBook;
+const book = publishedRuntime ? publishedBook?.entry ?? localBook : localBook;
 if (!book) {
 	Astro.response.status = 404;
 }
-const rendered = !publishedRuntime && localBook ? await render(localBook) : null;
+const rendered = localBook ? await render(localBook) : null;
 const Content = rendered?.Content ?? null;
 ---
 
@@ -25,7 +25,7 @@ const Content = rendered?.Content ?? null;
 		<RouteNotFound title="Book not found" description="The requested book could not be found in this Treeseed." currentPath="/books/" />
 	) : (
 		<BookLayout entry={book.data} currentPath="/books/">
-			{publishedRuntime ? <PublishedContentBody html={publishedBook?.html ?? ''} /> : <Content />}
+			{publishedBook?.html ? <PublishedContentBody html={publishedBook.html} /> : Content ? <Content /> : null}
 		</BookLayout>
 	)
 }

package/dist/pages/contact.astro

@@ -12,12 +12,12 @@ const code = Astro.url.searchParams.get('formCode');
 	currentPath="/contact/"
 >
 	<div class="space-y-6">
-		<section class="max-w-3xl space-y-4 border-b border-[color:var(--site-border)] pb-6">
-			<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[color:var(--site-accent-strong)]">Contact</p>
-			<h1 class="max-w-3xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">
+		<section class="max-w-3xl space-y-4 border-b border-[color:var(--ts-color-border)] pb-6">
+			<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[color:var(--ts-color-accent-strong)]">Contact</p>
+			<h1 class="max-w-3xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">
 				Get in touch...
 			</h1>
-			<p class="max-w-2xl text-lg leading-9 text-[color:var(--site-text-muted)]">
+			<p class="max-w-2xl text-lg leading-9 text-[color:var(--ts-color-text-muted)]">
 				We welcome questions, feedback, collaboration, and issue reports. Messages are routed by topic so they land in the right inbox.
 			</p>
 		</section>

package/dist/pages/docs-runtime/[...slug].astro

@@ -46,32 +46,32 @@ const download = activeBook
 			currentPath={currentPath}
 		>
 			<div class="grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
-				<aside class="space-y-6 border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
+				<aside class="space-y-6 border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
 					<div class="space-y-3">
-						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">
 							{activeBook?.sectionLabel ?? 'Knowledge'}
 						</p>
-						<a href="/knowledge/" class="block text-sm font-medium text-[color:var(--site-text-muted)] hover:text-[color:var(--site-text)]">Knowledge home</a>
+						<a href={runtime?.TREESEED_LINKS.home ?? '/books/'} class="block text-sm font-medium text-[color:var(--ts-color-text-muted)] hover:text-[color:var(--ts-color-text)]">Books home</a>
 						{activeBook?.landingPath && (
-							<a href={activeBook.landingPath} class="block text-sm font-medium text-[color:var(--site-text-muted)] hover:text-[color:var(--site-text)]">Open book landing page</a>
+							<a href={activeBook.landingPath} class="block text-sm font-medium text-[color:var(--ts-color-text-muted)] hover:text-[color:var(--ts-color-text)]">Open book landing page</a>
 						)}
 						{download && (
 							<a
 								href={download.href}
-								class="inline-flex border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]"
+								class="inline-flex border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]"
 							>
 								{download.title}
 							</a>
 						)}
 					</div>
-					<ul class="space-y-2 text-sm text-[color:var(--site-text-muted)]">
+					<ul class="space-y-2 text-sm text-[color:var(--ts-color-text-muted)]">
 						{sidebarEntries.map((entry) => (
 							<li>
 								<a
 									href={entry.path}
 									class:list={[
-										'hover:text-[color:var(--site-text)]',
-										entry.path === currentPath && 'font-semibold text-[color:var(--site-text)]',
+										'hover:text-[color:var(--ts-color-text)]',
+										entry.path === currentPath && 'font-semibold text-[color:var(--ts-color-text)]',
 									]}
 								>
 									{entry.title ?? entry.slug}
@@ -81,15 +81,15 @@ const download = activeBook
 					</ul>
 				</aside>
 				<article class="space-y-6">
-					<header class="space-y-4 border-b border-[color:var(--site-border)] pb-6">
-						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">
+					<header class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-6">
+						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">
 							{activeBook?.sectionLabel ?? 'Knowledge'}
 						</p>
-						<h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">
+						<h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">
 							{document.entry.data.title ?? document.entry.slug}
 						</h1>
 						{document.entry.data.summary && (
-							<p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{document.entry.data.summary}</p>
+							<p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{document.entry.data.summary}</p>
 						)}
 					</header>
 					<div class="prose-karyon max-w-none">

package/dist/pages/docs-runtime/index.astro

@@ -36,13 +36,13 @@ const ungroupedEntries = (docsTree ?? []).filter((entry) =>
 			currentPath="/knowledge/"
 		>
 			<div class="grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
-				<aside class="space-y-6 border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
+				<aside class="space-y-6 border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
 					<div class="space-y-3">
-						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Knowledge hub</p>
+						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Knowledge hub</p>
 						{runtime?.TREESEED_LIBRARY_DOWNLOAD && (
 							<a
 								href={runtime.TREESEED_LIBRARY_DOWNLOAD.downloadHref}
-								class="inline-flex border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]"
+								class="inline-flex border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]"
 							>
 								{runtime.TREESEED_LIBRARY_DOWNLOAD.downloadTitle}
 							</a>
@@ -50,33 +50,33 @@ const ungroupedEntries = (docsTree ?? []).filter((entry) =>
 					</div>
 					{bookGroups.map((group) => (
 						<div class="space-y-3">
-							<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">{group.book.sectionLabel}</p>
-							<ul class="space-y-2 text-sm text-[color:var(--site-text-muted)]">
+							<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">{group.book.sectionLabel}</p>
+							<ul class="space-y-2 text-sm text-[color:var(--ts-color-text-muted)]">
 								{group.entries.map((entry) => (
-									<li><a href={entry.path} class="hover:text-[color:var(--site-text)]">{entry.title ?? entry.slug}</a></li>
+									<li><a href={entry.path} class="hover:text-[color:var(--ts-color-text)]">{entry.title ?? entry.slug}</a></li>
 								))}
 							</ul>
 						</div>
 					))}
 					{ungroupedEntries.length > 0 && (
 						<div class="space-y-3">
-							<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">More knowledge</p>
-							<ul class="space-y-2 text-sm text-[color:var(--site-text-muted)]">
+							<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">More knowledge</p>
+							<ul class="space-y-2 text-sm text-[color:var(--ts-color-text-muted)]">
 								{ungroupedEntries.map((entry) => (
-									<li><a href={entry.path} class="hover:text-[color:var(--site-text)]">{entry.title ?? entry.slug}</a></li>
+									<li><a href={entry.path} class="hover:text-[color:var(--ts-color-text)]">{entry.title ?? entry.slug}</a></li>
 								))}
 							</ul>
 						</div>
 					)}
 				</aside>
 				<article class="space-y-6">
-					<header class="space-y-4 border-b border-[color:var(--site-border)] pb-6">
-						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Published docs</p>
-						<h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">
+					<header class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-6">
+						<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Published docs</p>
+						<h1 class="font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">
 							{document.entry.data.title ?? 'Knowledge'}
 						</h1>
 						{document.entry.data.summary && (
-							<p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{document.entry.data.summary}</p>
+							<p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{document.entry.data.summary}</p>
 						)}
 					</header>
 					<div class="prose-karyon max-w-none">

package/dist/pages/index.astro

@@ -155,12 +155,12 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 				<StageBanner />
 			</div>
 			<div slot="title">
-				<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-7xl">
+				<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-7xl">
 					A small TreeSeed site that doubles as documentation and a real test ground.
 				</h1>
 			</div>
 			<div slot="body">
-				<p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">
+				<p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">
 					TreeSeed works best when contributors can understand the package, inspect the
 					tenant surface, and verify real workflows without reconstructing everything from
 					source code alone. This fixture keeps those paths visible by combining pages,
@@ -168,12 +168,12 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 				</p>
 			</div>
 			<div slot="actions">
-				<a href="/status/" class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">See what exists today</a>
-				<a href="/vision/" class="border border-[color:var(--site-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">Read the vision</a>
+				<a href="/status/" class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">See what exists today</a>
+				<a href="/vision/" class="border border-[color:var(--ts-color-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">Read the vision</a>
 			</div>
 			<div slot="aside" class="space-y-4">
-				<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Right now</p>
-				<ul class="space-y-4 text-base leading-8 text-[color:var(--site-text-muted)]">
+				<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Right now</p>
+				<ul class="space-y-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
 					<li>A full TreeSeed content surface with pages, notes, questions, objectives, proposals, decisions, people, agents, books, and docs.</li>
 					<li>Package defaults exercised through a realistic tenant instead of isolated unit tests alone.</li>
 					<li>Forms, book exports, and navigation paths that participate in release verification.</li>
@@ -189,7 +189,7 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 					title="A working site for documentation, management, and verification"
 					description="TreeSeed is easiest to understand when the package runtime and the tenant experience are visible together. The fixture exists to make that relationship concrete."
 				/>
-				<div class="space-y-4 text-lg leading-9 text-[color:var(--site-text-muted)]">
+				<div class="space-y-4 text-lg leading-9 text-[color:var(--ts-color-text-muted)]">
 					<p>
 						The site is intentionally generic. It is not here to tell one project’s story.
 						It is here to show how TreeSeed can organize content, contributor roles, inquiry,
@@ -209,25 +209,25 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 			/>
 		</section>
 
-		<section class="space-y-6 border-t border-[color:var(--site-border)] pt-10">
+		<section class="space-y-6 border-t border-[color:var(--ts-color-border)] pt-10">
 			<SectionIntro
 				eyebrow="What Makes It Useful"
 				title="The site keeps docs, inquiry, and operations in the same surface"
 				description="The fixture is designed to show how TreeSeed can turn scattered workflow concepts into one inspectable tenant."
 			/>
 			<div class="grid gap-6 md:grid-cols-2">
-				<div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
-					<h2 class="font-serif text-2xl text-[color:var(--site-text)]">Content commitments</h2>
-					<ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--site-text-muted)]">
+				<div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
+					<h2 class="font-serif text-2xl text-[color:var(--ts-color-text)]">Content commitments</h2>
+					<ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
 						<li>Questions, objectives, proposals, and decisions stay visible instead of disappearing into process notes.</li>
 						<li>Books and docs remain queryable content, not only navigation configuration.</li>
 						<li>People and agents are explicit contributors rather than invisible supporting actors.</li>
 						<li>Notes can still capture evidence and rationale without replacing proposal and decision records.</li>
 					</ul>
 				</div>
-				<div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
-					<h2 class="font-serif text-2xl text-[color:var(--site-text)]">Execution posture</h2>
-					<ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--site-text-muted)]">
+				<div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
+					<h2 class="font-serif text-2xl text-[color:var(--ts-color-text)]">Execution posture</h2>
+					<ul class="mt-4 space-y-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
 						<li>The fixture participates directly in `check`, `build`, and smoke verification.</li>
 						<li>Shared defaults should read clearly in a generic tenant, not only in package code.</li>
 						<li>Generated book exports and forms flows are part of the package contract.</li>
@@ -237,14 +237,14 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 			</div>
 		</section>
 
-		<section class="space-y-6 border-t border-[color:var(--site-border)] pt-10">
+		<section class="space-y-6 border-t border-[color:var(--ts-color-border)] pt-10">
 			<SectionIntro
 				eyebrow="What Exists Today"
 				title="A realistic tenant that stays intentionally generic"
 				description="The fixture is broad enough to exercise the package meaningfully, but it stays small enough to remain maintainable and easy to read."
 			/>
 			<div class="grid gap-6 lg:grid-cols-[1fr_1fr]">
-				<div class="space-y-4 text-base leading-8 text-[color:var(--site-text-muted)]">
+				<div class="space-y-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
 					<p>
 						The current fixture demonstrates the full TreeSeed surface: pages, notes, questions,
 						objectives, proposals, decisions, people, agents, books, docs, and forms. That gives package changes a
@@ -256,14 +256,14 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 						possible downstream use case.
 					</p>
 				</div>
-				<div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
-					<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">Best current shorthand</p>
-					<p class="mt-4 font-serif text-3xl text-[color:var(--site-text)]">
+				<div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
+					<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">Best current shorthand</p>
+					<p class="mt-4 font-serif text-3xl text-[color:var(--ts-color-text)]">
 						Documentation-first example, real enough to break usefully.
 					</p>
-					<p class="mt-4 text-base leading-8 text-[color:var(--site-text-muted)]">
+					<p class="mt-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
 						If you want the evidence behind that judgment, the{' '}
-						<a href="/status/" class="text-[color:var(--site-text)] underline decoration-[color:var(--site-accent)] underline-offset-4">
+						<a href="/status/" class="text-[color:var(--ts-color-text)] underline decoration-[color:var(--ts-color-accent)] underline-offset-4">
 							Project Status
 						</a>{' '}
 						page is the right next step.
@@ -272,14 +272,14 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 			</div>
 		</section>
 
-		<section class="grid gap-10 border-t border-[color:var(--site-border)] pt-10 lg:grid-cols-[1.2fr_0.8fr]">
+		<section class="grid gap-10 border-t border-[color:var(--ts-color-border)] pt-10 lg:grid-cols-[1.2fr_0.8fr]">
 			<div class="space-y-6">
 				<SectionIntro
 					eyebrow="How To Read The Site"
 					title="Follow the path that matches the question you have"
 					description="Each public page has a single job: explain the platform, ground it in implementation reality, define active work, or make collaboration legible."
 				/>
-				<div class="border-b border-[color:var(--site-border)]">
+				<div class="border-b border-[color:var(--ts-color-border)]">
 					<PathCard href="/vision/" title="Vision" meta="Why this fixture exists" description="Start with the reason TreeSeed keeps a generic working site in the repo." />
 					<PathCard href="/status/" title="Status" meta="What the fixture proves today" description="See which package surfaces the fixture is expected to exercise and why that matters." />
 					<PathCard href="/research-direction/" title="Research Direction" meta="What questions organize the work" description="Follow the implementation-facing questions that keep the fixture useful." />
@@ -287,9 +287,9 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 					<PathCard href="/contribute/" title="Contribute" meta="How to help usefully" description="Find the most useful contribution lanes for a documentation-first TreeSeed site." />
 				</div>
 			</div>
-			<div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
-				<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Useful feedback</p>
-				<p class="mt-4 text-base leading-8 text-[color:var(--site-text-muted)]">
+			<div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
+				<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Useful feedback</p>
+				<p class="mt-4 text-base leading-8 text-[color:var(--ts-color-text-muted)]">
 					The most helpful feedback is concrete: which defaults still feel confusing, which
 					workflows are hard to infer, and which parts of the fixture are too thin or too heavy
 					to serve as a reliable test ground.
@@ -298,7 +298,7 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 		</section>
 
 		{notesRendered && (
-		<section class="space-y-6 border-t border-[color:var(--site-border)] pt-10">
+		<section class="space-y-6 border-t border-[color:var(--ts-color-border)] pt-10">
 			<SectionIntro
 				eyebrow="Notes"
 				title="Working notes instead of polished announcements"
@@ -309,7 +309,7 @@ const ctaSecondaryLabel = booksRendered ? 'Explore books' : notesRendered ? 'Rea
 		)}
 
 		{(questionsRendered || objectivesRendered || proposalsRendered || decisionsRendered || peopleRendered || agentsRendered || booksRendered) && (
-		<section class="space-y-8 border-t border-[color:var(--site-border)] pt-10">
+		<section class="space-y-8 border-t border-[color:var(--ts-color-border)] pt-10">
 			<SectionIntro
 				eyebrow="TreeSeed"
 				title="Questions, objectives, proposals, decisions, contributors, and books form one connected working surface"

package/dist/pages/ui/index.astro

@@ -0,0 +1,216 @@
+---
+import '../../styles/global.css';
+import '../../styles/theme.css';
+import '../../styles/ui.css';
+import '../../styles/forms.css';
+import ThemeScript from '../../components/ui/theme/ThemeScript.astro';
+import ThemeSelector from '../../components/ui/theme/ThemeSelector.astro';
+import Button from '../../components/ui/forms/Button.astro';
+import Field from '../../components/ui/forms/Field.astro';
+import TextInput from '../../components/ui/forms/TextInput.astro';
+import Select from '../../components/ui/forms/Select.astro';
+import Textarea from '../../components/ui/forms/Textarea.astro';
+import RadioGroup from '../../components/ui/forms/RadioGroup.astro';
+import FormActions from '../../components/ui/forms/FormActions.astro';
+import PasswordMeter from '../../components/ui/forms/PasswordMeter.astro';
+import Panel from '../../components/ui/surface/Panel.astro';
+import Card from '../../components/ui/surface/Card.astro';
+import EmptyState from '../../components/ui/surface/EmptyState.astro';
+import Badge from '../../components/ui/data/Badge.astro';
+import StatusPill from '../../components/ui/data/StatusPill.astro';
+import MetricGrid from '../../components/ui/data/MetricGrid.astro';
+import ActionList from '../../components/ui/data/ActionList.astro';
+import KeyValueList from '../../components/ui/data/KeyValueList.astro';
+import DataTable from '../../components/ui/data/DataTable.astro';
+import PageHeader from '../../components/ui/layout/PageHeader.astro';
+import { getBuiltInColorSchemes, normalizeThemePreference } from '../../utils/theme.js';
+
+const selected = normalizeThemePreference({
+	scheme: Astro.url.searchParams.get('scheme'),
+	mode: Astro.url.searchParams.get('mode'),
+});
+const schemes = getBuiltInColorSchemes();
+const modes = ['system', 'light', 'dark'] as const;
+const tones = ['default', 'muted', 'accent', 'info', 'success', 'warning', 'danger'] as const;
+const themeLinks = schemes.flatMap((scheme) => modes.map((mode) => ({
+	label: `${scheme.name} / ${mode}`,
+	href: `/ui/?scheme=${scheme.id}&mode=${mode}`,
+	active: scheme.id === selected.scheme && mode === selected.mode,
+})));
+const projectMetrics = [
+	{ label: 'Open decisions', value: 7, description: 'Three are blocked by missing context.', tone: 'warning' as const },
+	{ label: 'Ready releases', value: 2, description: 'Both have verification notes attached.', tone: 'success' as const },
+	{ label: 'Active hosts', value: 14, description: 'Capacity is steady across the team.', tone: 'info' as const },
+];
+const actionItems = [
+	{
+		title: 'Review release candidate',
+		description: 'Confirm the staged package summary before the next handoff.',
+		href: '#',
+		meta: 'Waiting',
+		tone: 'warning' as const,
+		actionLabel: 'Open',
+	},
+	{
+		title: 'Resolve shared direction',
+		description: 'One proposal needs a final owner note.',
+		href: '#',
+		meta: 'Decision',
+		tone: 'accent' as const,
+		actionLabel: 'Review',
+	},
+	{
+		title: 'Host capacity checked',
+		description: 'No action required after the latest sync.',
+		meta: 'Clear',
+		tone: 'success' as const,
+	},
+];
+const tableColumns = [
+	{ key: 'name', label: 'Name' },
+	{ key: 'status', label: 'Status' },
+	{ key: 'owner', label: 'Owner' },
+];
+const tableRows = [
+	{ name: 'Direction brief', status: 'Ready', owner: 'Research' },
+	{ name: 'Release notes', status: 'Drafting', owner: 'Platform' },
+	{ name: 'Host review', status: 'Queued', owner: 'Ops' },
+];
+---
+
+<!doctype html>
+<html lang="en" data-ts-scheme={selected.scheme} data-ts-mode={selected.mode}>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>TreeSeed UI Catalog</title>
+		<ThemeScript defaultScheme={selected.scheme} defaultMode={selected.mode} />
+	</head>
+	<body>
+		<main class="ts-ui-catalog">
+			<PageHeader
+				eyebrow="Core UI"
+				title="TreeSeed primitive catalog"
+				description="A focused review surface for the first shared component set. Use the appearance controls and scheme links to inspect the same primitives across every built-in theme."
+				actions={[{ label: 'Back home', href: '/', variant: 'secondary' }]}
+			>
+				<div class="ts-ui-catalog__selector">
+					<ThemeSelector selectedScheme={selected.scheme} selectedMode={selected.mode} compact={false} />
+				</div>
+			</PageHeader>
+
+			<Panel title="Scheme and mode checks" description="Each link reloads this same catalog with a different default appearance.">
+				<div class="ts-ui-catalog__theme-links">
+					{themeLinks.map((link) => (
+						<Button href={link.href} variant={link.active ? 'primary' : 'secondary'} size="sm">
+							{link.label}
+						</Button>
+					))}
+				</div>
+			</Panel>
+
+			<Panel title="Buttons, badges, and status" description="Tones are semantic; pages should not pass arbitrary color classes.">
+				<div class="ts-ui-catalog__stack">
+					<div class="ts-ui-catalog__row">
+						<Button>Primary action</Button>
+						<Button variant="secondary">Secondary</Button>
+						<Button variant="ghost">Ghost</Button>
+						<Button variant="danger">Danger</Button>
+						<Button disabled>Disabled</Button>
+					</div>
+					<div class="ts-ui-catalog__row">
+						{tones.map((tone) => <Badge tone={tone}>{tone}</Badge>)}
+					</div>
+					<div class="ts-ui-catalog__row">
+						{tones.map((tone) => <StatusPill tone={tone} label={tone} />)}
+					</div>
+				</div>
+			</Panel>
+
+			<MetricGrid metrics={projectMetrics} />
+
+			<div class="ts-ui-catalog__grid">
+				<Card
+					eyebrow="Card"
+					title="Direction summary"
+					description="Compact cards use the same border, surface, and tone language as panels."
+					tone="accent"
+					interactive
+				>
+					<StatusPill tone="success" label="Current" />
+				</Card>
+				<Card href="#" eyebrow="Linked card" title="Open proposal" description="Cards can render anchors when a route owns the whole surface.">
+					<Badge tone="info">Proposal</Badge>
+				</Card>
+				<EmptyState
+					eyebrow="Empty state"
+					title="No queued reviews"
+					description="The empty surface keeps actions visible without introducing a custom card style."
+					actions={[{ label: 'Create review', href: '#', variant: 'secondary' }]}
+				/>
+			</div>
+
+			<Panel
+				title="Form controls"
+				description="Labels, help text, controls, radio choices, actions, and password feedback share one form vocabulary."
+			>
+				<form class="ts-ui-catalog__form">
+					<Field label="Project name" name="projectName" help="Use a short name that people can scan quickly.">
+						<TextInput name="projectName" value="Release Garden" />
+					</Field>
+					<Field label="Workspace" name="workspace">
+						<Select
+							name="workspace"
+							value="research"
+							options={[
+								{ label: 'Research', value: 'research' },
+								{ label: 'Operations', value: 'operations' },
+								{ label: 'Platform', value: 'platform' },
+							]}
+						/>
+					</Field>
+					<Field label="Notes" name="notes" full>
+						<Textarea name="notes" value="Capture the next decision and keep the release handoff visible." />
+					</Field>
+					<RadioGroup
+						name="cadence"
+						legend="Review cadence"
+						value="weekly"
+						options={[
+							{ label: 'Daily', value: 'daily', help: 'Best for launch week.' },
+							{ label: 'Weekly', value: 'weekly', help: 'A good default for steady projects.' },
+							{ label: 'Paused', value: 'paused', help: 'Hide reminders until work resumes.' },
+						]}
+					/>
+					<Field label="Password preview" name="catalogPassword" full>
+						<TextInput id="catalogPassword" name="catalogPassword" type="password" value="TreeSeed-2026" />
+					</Field>
+					<PasswordMeter inputId="catalogPassword" />
+					<FormActions align="between">
+						<Button variant="ghost" type="reset">Reset</Button>
+						<Button type="submit">Save example</Button>
+					</FormActions>
+				</form>
+			</Panel>
+
+			<div class="ts-ui-catalog__grid">
+				<Panel title="Action list" description="Rows remain dense but touch-friendly on mobile.">
+					<ActionList items={actionItems} />
+				</Panel>
+				<Panel title="Key details" description="Settings and summaries can use a consistent key/value rhythm.">
+					<KeyValueList
+						items={[
+							{ key: 'Team', value: 'Canopy Systems' },
+							{ key: 'Environment', value: 'Staging', tone: 'info' },
+							{ key: 'Risk', value: 'Low', tone: 'success' },
+						]}
+					/>
+				</Panel>
+			</div>
+
+			<Panel title="Data table" description="The table collapses into labeled mobile rows without page-specific CSS.">
+				<DataTable columns={tableColumns} rows={tableRows} caption="Review artifacts" />
+			</Panel>
+		</main>
+	</body>
+</html>

package/dist/scripts/dev-platform.js

@@ -20,7 +20,13 @@ function readNumberOption(name) {
     return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
 }
 function parseSurface(value) {
-    if (value === 'web' || value === 'integrated') {
+    if (value === 'web' ||
+        value === 'api' ||
+        value === 'manager' ||
+        value === 'worker' ||
+        value === 'agents' ||
+        value === 'services' ||
+        value === 'integrated') {
         return value;
     }
     return 'integrated';