@treeseed/core 0.8.8 → 0.8.9

package/dist/components/ui/theme/ThemeScript.astro

@@ -0,0 +1,105 @@
+---
+import {
+	buildTreeseedThemeCss,
+	getBuiltInColorSchemes,
+	normalizeThemePreference,
+	type ThemePreference,
+} from '../../../utils/theme.js';
+
+interface Props {
+	defaultScheme?: ThemePreference['scheme'];
+	defaultMode?: ThemePreference['mode'];
+	includeCss?: boolean;
+	preferDefaultPreference?: boolean;
+}
+
+const preference = normalizeThemePreference({
+	scheme: (Astro.props as Props).defaultScheme,
+	mode: (Astro.props as Props).defaultMode,
+});
+const { includeCss = true, preferDefaultPreference = false } = Astro.props as Props;
+const builtInSchemeIds = getBuiltInColorSchemes().map((scheme) => scheme.id);
+const themeCss = buildTreeseedThemeCss();
+---
+
+{includeCss ? <style is:inline set:html={themeCss}></style> : null}
+
+<script
+	is:inline
+	define:vars={{
+		builtInSchemeIds,
+		defaultScheme: preference.scheme,
+		defaultMode: preference.mode,
+		preferDefaultPreference,
+	}}
+>
+	(() => {
+		const schemeKey = 'treeseed_color_scheme';
+		const modeKey = 'treeseed_theme_mode';
+		const modes = new Set(['light', 'dark', 'system']);
+		const schemes = new Set(builtInSchemeIds);
+		const root = document.documentElement;
+
+		function readCookie(name) {
+			const pair = document.cookie
+				.split('; ')
+				.find((entry) => entry.startsWith(`${name}=`));
+			return pair ? decodeURIComponent(pair.slice(name.length + 1)) : '';
+		}
+
+		function readStored(name) {
+			try {
+				return window.sessionStorage.getItem(name) || window.localStorage.getItem(name) || '';
+			} catch {
+				return '';
+			}
+		}
+
+		function store(name, value) {
+			try {
+				window.sessionStorage.setItem(name, value);
+			} catch {
+				// Session storage can be disabled; local storage/cookies still carry the preference.
+			}
+			try {
+				window.localStorage.setItem(name, value);
+			} catch {
+				// Local storage can be disabled; cookies still carry the preference for SSR.
+			}
+		}
+
+		function resolveScheme(value) {
+			return schemes.has(value) ? value : defaultScheme;
+		}
+
+		function resolveMode(value) {
+			return modes.has(value) ? value : defaultMode;
+		}
+
+		function resolveRenderedMode(mode) {
+			if (mode !== 'system') return mode;
+			return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+
+		const storedScheme = readStored(schemeKey) || readCookie(schemeKey);
+		const storedModeValue = readStored(modeKey) || readCookie(modeKey);
+		const scheme = preferDefaultPreference ? resolveScheme(defaultScheme) : resolveScheme(storedScheme || defaultScheme);
+		const storedMode = preferDefaultPreference ? resolveMode(defaultMode) : resolveMode(storedModeValue || defaultMode);
+		const renderedMode = resolveRenderedMode(storedMode);
+
+		root.dataset.tsScheme = scheme;
+		root.dataset.tsMode = renderedMode;
+		if (storedMode === 'system') {
+			root.dataset.tsModeSource = 'system';
+		} else {
+			delete root.dataset.tsModeSource;
+		}
+		store(schemeKey, scheme);
+		store(modeKey, storedMode);
+		window.matchMedia?.('(prefers-color-scheme: dark)').addEventListener?.('change', () => {
+			if (root.dataset.tsModeSource === 'system') {
+				root.dataset.tsMode = resolveRenderedMode('system');
+			}
+		});
+	})();
+</script>

package/dist/components/ui/theme/ThemeSelector.astro

@@ -0,0 +1,202 @@
+---
+import {
+	getBuiltInColorSchemes,
+	normalizeThemePreference,
+	type ThemePreference,
+} from '../../../utils/theme.js';
+import ThemePreviewSwatch from './ThemePreviewSwatch.astro';
+
+interface Props {
+	label?: string;
+	selectedScheme?: ThemePreference['scheme'];
+	selectedMode?: ThemePreference['mode'];
+	includeHiddenFields?: boolean;
+	schemeFieldName?: string;
+	modeFieldName?: string;
+	compact?: boolean;
+}
+
+const {
+	label = 'Appearance',
+	selectedScheme,
+	selectedMode,
+	includeHiddenFields = false,
+	schemeFieldName = 'colorScheme',
+	modeFieldName = 'themeMode',
+	compact = true,
+} = Astro.props as Props;
+
+const schemes = getBuiltInColorSchemes();
+const preference = normalizeThemePreference({ scheme: selectedScheme, mode: selectedMode });
+const activeScheme = schemes.find((scheme) => scheme.id === preference.scheme) ?? schemes[0];
+const initialSwatches = preference.mode === 'dark'
+	? activeScheme.modeSwatches.dark
+	: activeScheme.modeSwatches.light;
+const modes = [
+	{ value: 'system', label: 'System' },
+	{ value: 'light', label: 'Light' },
+	{ value: 'dark', label: 'Dark' },
+];
+---
+
+<div
+	class:list={['ts-theme-selector', compact && 'ts-theme-selector--compact']}
+	data-ts-theme-selector
+	data-selected-scheme={preference.scheme}
+	data-selected-mode={preference.mode}
+	data-scheme-field={schemeFieldName}
+	data-mode-field={modeFieldName}
+>
+	<div class="ts-theme-selector__summary">
+		<ThemePreviewSwatch swatches={initialSwatches} label={`${activeScheme.name} preview`} />
+		<span class="ts-theme-selector__label">
+			<span>{label}</span>
+			<small data-ts-theme-preview-label>{activeScheme.name} · {preference.mode}</small>
+		</span>
+	</div>
+	<div class="ts-theme-selector__controls">
+		<label class="ts-theme-selector__field">
+			<span>Color scheme</span>
+			<select data-ts-theme-scheme-select aria-label="Color scheme">
+				{schemes.map((scheme) => (
+					<option value={scheme.id} selected={scheme.id === preference.scheme}>
+						{scheme.name}
+					</option>
+				))}
+			</select>
+		</label>
+		<label class="ts-theme-selector__field">
+			<span>Mode</span>
+			<select data-ts-theme-mode-select aria-label="Theme mode">
+				{modes.map((mode) => (
+					<option value={mode.value} selected={mode.value === preference.mode}>
+						{mode.label}
+					</option>
+				))}
+			</select>
+		</label>
+	</div>
+	{includeHiddenFields ? (
+		<>
+			<input type="hidden" name={schemeFieldName} value={preference.scheme} data-ts-theme-scheme-field />
+			<input type="hidden" name={modeFieldName} value={preference.mode} data-ts-theme-mode-field />
+		</>
+	) : null}
+</div>
+
+<script is:inline define:vars={{ schemes }}>
+	(() => {
+		const schemeKey = 'treeseed_color_scheme';
+		const modeKey = 'treeseed_theme_mode';
+		const maxAge = 60 * 60 * 24 * 365;
+		const modeValues = new Set(['light', 'dark', 'system']);
+		const schemeValues = new Set(schemes.map((scheme) => scheme.id));
+		const schemeMap = new Map(schemes.map((scheme) => [scheme.id, scheme]));
+		const media = window.matchMedia?.('(prefers-color-scheme: dark)');
+
+		function cookie(name, value) {
+			const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+			document.cookie = `${name}=${encodeURIComponent(value)}; Max-Age=${maxAge}; Path=/; SameSite=Lax${secure}`;
+		}
+
+		function store(name, value) {
+			try {
+				window.sessionStorage.setItem(name, value);
+			} catch {
+				// Session storage can be disabled; local storage/cookies still carry the preference.
+			}
+			try {
+				window.localStorage.setItem(name, value);
+			} catch {
+				// Storage can be disabled; cookies still carry the preference for SSR.
+			}
+		}
+
+		function renderedMode(mode) {
+			if (mode !== 'system') return mode;
+			return media?.matches ? 'dark' : 'light';
+		}
+
+		function applyTheme(scheme, mode, persist = true) {
+			const root = document.documentElement;
+			const safeScheme = schemeValues.has(scheme) ? scheme : 'fern';
+			const safeMode = modeValues.has(mode) ? mode : 'system';
+			root.dataset.tsScheme = safeScheme;
+			root.dataset.tsMode = renderedMode(safeMode);
+			if (safeMode === 'system') {
+				root.dataset.tsModeSource = 'system';
+			} else {
+				delete root.dataset.tsModeSource;
+			}
+			if (persist) {
+				cookie(schemeKey, safeScheme);
+				cookie(modeKey, safeMode);
+				store(schemeKey, safeScheme);
+				store(modeKey, safeMode);
+			}
+			window.dispatchEvent(new CustomEvent('treeseed:theme-change', {
+				detail: { scheme: safeScheme, mode: safeMode, renderedMode: renderedMode(safeMode) },
+			}));
+		}
+
+		function modeSwatches(scheme, mode) {
+			const rendered = renderedMode(mode);
+			return scheme.modeSwatches?.[rendered] || scheme.swatches || [];
+		}
+
+		function updateSwatch(selector, schemeId, mode) {
+			const scheme = schemeMap.get(schemeId);
+			const swatch = selector.querySelector('.ts-theme-swatch');
+			const previewLabel = selector.querySelector('[data-ts-theme-preview-label]');
+			if (!scheme || !swatch) return;
+			swatch.setAttribute('aria-label', `${scheme.name} preview`);
+			modeSwatches(scheme, mode).slice(0, 4).forEach((value, index) => {
+				swatch.style.setProperty(`--ts-preview-swatch-${index + 1}`, value);
+			});
+			if (previewLabel) {
+				previewLabel.textContent = `${scheme.name} · ${mode === 'system' ? `System ${renderedMode(mode)}` : mode}`;
+			}
+		}
+
+		function currentPreference() {
+			const root = document.documentElement;
+			const scheme = schemeValues.has(root.dataset.tsScheme) ? root.dataset.tsScheme : '';
+			const mode = root.dataset.tsModeSource === 'system' ? 'system' : root.dataset.tsMode;
+			return {
+				scheme,
+				mode: modeValues.has(mode) ? mode : '',
+			};
+		}
+
+		function bind(selector) {
+			const schemeSelect = selector.querySelector('[data-ts-theme-scheme-select]');
+			const modeSelect = selector.querySelector('[data-ts-theme-mode-select]');
+			const schemeField = selector.querySelector('[data-ts-theme-scheme-field]');
+			const modeField = selector.querySelector('[data-ts-theme-mode-field]');
+			if (!(schemeSelect instanceof HTMLSelectElement) || !(modeSelect instanceof HTMLSelectElement)) return;
+
+			const activePreference = currentPreference();
+			if (activePreference.scheme) schemeSelect.value = activePreference.scheme;
+			if (activePreference.mode) modeSelect.value = activePreference.mode;
+
+			function sync(persist = true) {
+				const scheme = schemeSelect.value;
+				const mode = modeSelect.value;
+				if (schemeField instanceof HTMLInputElement) schemeField.value = scheme;
+				if (modeField instanceof HTMLInputElement) modeField.value = mode;
+				updateSwatch(selector, scheme, mode);
+				applyTheme(scheme, mode, persist);
+			}
+
+			schemeSelect.addEventListener('change', () => sync(true));
+			modeSelect.addEventListener('change', () => sync(true));
+			sync(false);
+		}
+
+		document.querySelectorAll('[data-ts-theme-selector]').forEach(bind);
+		media?.addEventListener?.('change', () => {
+			const mode = document.documentElement.dataset.tsModeSource === 'system' ? 'system' : document.documentElement.dataset.tsMode;
+			applyTheme(document.documentElement.dataset.tsScheme || 'fern', mode || 'system', false);
+		});
+	})();
+</script>

package/dist/dev.js

@@ -33,6 +33,7 @@ const TREESEED_DEFAULT_MAILPIT_UI_PORT = 8025;
 const DEV_RELOAD_FILE = "public/__treeseed/dev-reload.json";
 const DEV_RUNTIME_FILE = ".treeseed/generated/dev/runtime.json";
 const DEFAULT_READINESS_TIMEOUT_MS = 9e4;
+const DEFAULT_SETUP_STEP_TIMEOUT_MS = 3e5;
 const DEFAULT_PROCESS_READY_GRACE_MS = 1200;
 const DEFAULT_SHUTDOWN_GRACE_MS = 2500;
 const DEFAULT_KILL_GRACE_MS = 500;
@@ -825,7 +826,8 @@ function runSetupStep(step, plan, deps) {
       TREESEED_LOCAL_DEV_MODE: "cloudflare",
       TREESEED_PUBLIC_DEV_WATCH_RELOAD: plan.feedbackMode === "live" ? "true" : process.env.TREESEED_PUBLIC_DEV_WATCH_RELOAD
     },
-    encoding: "utf8"
+    encoding: "utf8",
+    timeout: DEFAULT_SETUP_STEP_TIMEOUT_MS
   });
   if ((result.status ?? 1) === 0) {
     return {
@@ -834,10 +836,12 @@ function runSetupStep(step, plan, deps) {
       detail: [result.stdout, result.stderr].filter(Boolean).join("\n").trim() || step.detail
     };
   }
+  const timedOut = result.error && "code" in result.error && result.error.code === "ETIMEDOUT";
+  const timeoutDetail = timedOut ? `${step.label} timed out after ${Math.round(DEFAULT_SETUP_STEP_TIMEOUT_MS / 1e3)} seconds.` : null;
   return {
     ...step,
     status: step.required ? "failed" : "degraded",
-    detail: [result.stdout, result.stderr].filter(Boolean).join("\n").trim() || `Exited with ${result.status ?? 1}.`
+    detail: [timeoutDetail, result.stdout, result.stderr].filter(Boolean).join("\n").trim() || `Exited with ${result.status ?? 1}.`
   };
 }
 function runLocalSetup(plan, options, deps) {
@@ -851,6 +855,14 @@ function runLocalSetup(plan, options, deps) {
   }
   for (const step of plan.setupSteps) {
     let result = step;
+    if (step.status === "planned") {
+      emitEvent(options, deps.write, {
+        type: "setup",
+        status: "running",
+        message: `${step.label}: running`,
+        detail: step.detail
+      });
+    }
     if (step.id === "workspace-links") {
       if (plan.setupMode === "check") {
         result = { ...step, status: "skipped", detail: "Workspace links were checked in non-mutating mode." };

package/dist/layouts/AuthoredEntryLayout.astro

@@ -52,80 +52,80 @@ const {
 
 <MainLayout title={entry.title} description={entry.description} currentPath={currentPath}>
 	<article class="max-w-4xl space-y-8">
-		<div class="space-y-4 border-b border-[color:var(--site-border)] pb-8">
+		<div class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-8">
 			<div class="flex flex-wrap items-center gap-3">
 				<StatusBadge status={entry.status} />
-				<p class="text-sm font-medium text-[color:var(--site-text-soft)]">{entry.date.toISOString().slice(0, 10)}</p>
-				{contributor && <p class="text-sm text-[color:var(--site-text-soft)]">{contributor.data.name}</p>}
-				{metaLabel && metaValue && <p class="text-sm text-[color:var(--site-text-soft)]">{metaLabel}: {metaValue}</p>}
+				<p class="text-sm font-medium text-[color:var(--ts-color-text-subtle)]">{entry.date.toISOString().slice(0, 10)}</p>
+				{contributor && <p class="text-sm text-[color:var(--ts-color-text-subtle)]">{contributor.data.name}</p>}
+				{metaLabel && metaValue && <p class="text-sm text-[color:var(--ts-color-text-subtle)]">{metaLabel}: {metaValue}</p>}
 			</div>
-			<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">{entry.title}</h1>
-			<p class="max-w-3xl text-xl leading-10 text-[color:var(--site-text-muted)]">{entry.summary}</p>
-			{(introText ?? entry.motivation) && <p class="max-w-3xl text-base leading-8 text-[color:var(--site-text-muted)]">{introText ?? entry.motivation}</p>}
+			<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">{entry.title}</h1>
+			<p class="max-w-3xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{entry.summary}</p>
+			{(introText ?? entry.motivation) && <p class="max-w-3xl text-base leading-8 text-[color:var(--ts-color-text-muted)]">{introText ?? entry.motivation}</p>}
 			{entry.tags.length > 0 && (
-				<p class="text-sm uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{entry.tags.join(' / ')}</p>
+				<p class="text-sm uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{entry.tags.join(' / ')}</p>
 			)}
 		</div>
 		<div class="prose-karyon">
 			<slot />
 		</div>
-		<div class="grid gap-6 border-t border-[color:var(--site-border)] pt-8 md:grid-cols-3">
+		<div class="grid gap-6 border-t border-[color:var(--ts-color-border)] pt-8 md:grid-cols-3">
 			{relatedQuestions.length > 0 && (
 				<div>
-						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Related questions</p>
-						<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Related questions</p>
+						<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 							{relatedQuestions.map((question) => (
-								<li><a href={`/questions/${question.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(question)}</a></li>
+								<li><a href={`/questions/${question.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(question)}</a></li>
 							))}
 						</ul>
 					</div>
 			)}
 			{relatedObjectives.length > 0 && (
 				<div>
-						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Related objectives</p>
-						<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Related objectives</p>
+						<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 							{relatedObjectives.map((objective) => (
-								<li><a href={`/objectives/${objective.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(objective)}</a></li>
+								<li><a href={`/objectives/${objective.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(objective)}</a></li>
 							))}
 						</ul>
 					</div>
 			)}
 			{relatedNotes.length > 0 && (
 				<div>
-						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Related notes</p>
-						<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Related notes</p>
+						<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 							{relatedNotes.map((note) => (
-								<li><a href={`/notes/${note.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(note)}</a></li>
+								<li><a href={`/notes/${note.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(note)}</a></li>
 							))}
 						</ul>
 					</div>
 			)}
 			{relatedProposals.length > 0 && (
 				<div>
-						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Related proposals</p>
-						<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Related proposals</p>
+						<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 							{relatedProposals.map((proposal) => (
-								<li><a href={`/proposals/${proposal.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(proposal)}</a></li>
+								<li><a href={`/proposals/${proposal.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(proposal)}</a></li>
 							))}
 						</ul>
 					</div>
 			)}
 			{relatedDecisions.length > 0 && (
 				<div>
-						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Related decisions</p>
-						<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Related decisions</p>
+						<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 							{relatedDecisions.map((decision) => (
-								<li><a href={`/decisions/${decision.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(decision)}</a></li>
+								<li><a href={`/decisions/${decision.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(decision)}</a></li>
 							))}
 						</ul>
 					</div>
 			)}
 			{relatedBooks.length > 0 && (
 				<div>
-						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Related books</p>
-						<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+						<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Related books</p>
+						<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 							{relatedBooks.map((book) => (
-								<li><a href={`/books/${book.id}/`} class="hover:text-[color:var(--site-text)]">{entryTitle(book)}</a></li>
+								<li><a href={`/books/${book.id}/`} class="hover:text-[color:var(--ts-color-text)]">{entryTitle(book)}</a></li>
 							))}
 						</ul>
 					</div>

package/dist/layouts/BookLayout.astro

@@ -6,25 +6,25 @@ const { entry, currentPath } = Astro.props;
 
 <MainLayout title={entry.title} description={entry.description} currentPath={currentPath}>
 	<article class="max-w-5xl space-y-8">
-		<div class="space-y-4 border-b border-[color:var(--site-border)] pb-8">
-			<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">{entry.sectionLabel}</p>
-			<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-6xl">{entry.title}</h1>
-			<p class="max-w-4xl text-xl leading-10 text-[color:var(--site-text-muted)]">{entry.summary}</p>
+		<div class="space-y-4 border-b border-[color:var(--ts-color-border)] pb-8">
+			<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">{entry.sectionLabel}</p>
+			<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-6xl">{entry.title}</h1>
+			<p class="max-w-4xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{entry.summary}</p>
 			{entry.tags.length > 0 && (
-				<p class="text-sm uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{entry.tags.join(' / ')}</p>
+				<p class="text-sm uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{entry.tags.join(' / ')}</p>
 			)}
 			<div class="flex flex-wrap gap-3 pt-2">
-				<a href={entry.landingPath} class="border border-[color:var(--site-border-strong)] 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)]">Open knowledge</a>
-				<a href={entry.downloadHref} class="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)]">Download book</a>
+				<a href={entry.landingPath} class="border border-[color:var(--ts-color-border-strong)] 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)]">Open knowledge</a>
+				<a href={entry.downloadHref} class="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 book</a>
 			</div>
 		</div>
 		<div class="grid gap-6 md:grid-cols-[1.25fr_0.75fr]">
 			<div class="prose-karyon">
 				<slot />
 			</div>
-			<div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-5">
-				<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">Book paths</p>
-				<ul class="mt-3 space-y-2 text-[color:var(--site-text-muted)]">
+			<div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-5">
+				<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">Book paths</p>
+				<ul class="mt-3 space-y-2 text-[color:var(--ts-color-text-muted)]">
 					<li>Landing path: <code>{entry.landingPath}</code></li>
 					<li>Base path: <code>{entry.basePath}</code></li>
 					<li>Download file: <code>{entry.downloadFileName}</code></li>

package/dist/layouts/ContentLayout.astro

@@ -9,13 +9,13 @@ const { entry, currentPath } = Astro.props;
 <MainLayout title={entry.title} description={entry.description} currentPath={currentPath}>
 	<div class="space-y-8">
 		<StageBanner />
-		<section class="max-w-5xl space-y-5 border-b border-[color:var(--site-border)] pb-8">
+		<section class="max-w-5xl space-y-5 border-b border-[color:var(--ts-color-border)] pb-8">
 			<div class="flex flex-wrap items-center gap-3">
 				<StatusBadge status={entry.status} />
-				<p class="text-sm font-medium text-[color:var(--site-text-soft)]">Updated {entry.updated.toISOString().slice(0, 10)}</p>
+				<p class="text-sm font-medium text-[color:var(--ts-color-text-subtle)]">Updated {entry.updated.toISOString().slice(0, 10)}</p>
 			</div>
-			<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--site-text)] md:text-7xl">{entry.title}</h1>
-			<p class="max-w-4xl text-xl leading-10 text-[color:var(--site-text-muted)]">{entry.summary}</p>
+			<h1 class="max-w-4xl font-serif text-5xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-7xl">{entry.title}</h1>
+			<p class="max-w-4xl text-xl leading-10 text-[color:var(--ts-color-text-muted)]">{entry.summary}</p>
 		</section>
 		<article class="prose-karyon max-w-4xl">
 			<slot />