@janga/norna 0.7.27 → 0.7.28

package/scripts/lib/theme-config.mjs

@@ -1,77 +1,35 @@
-import { readFile, readdir } from 'node:fs/promises';
+import { readdir } from 'node:fs/promises';
 import path from 'node:path';
-import {
-	validatePageThemeYamlStructure,
-	validateThemeYamlStructure,
-} from './site-content.mjs';
-import {
-	sitePagesDir,
-	sitePagesLabel,
-	siteThemeLabel,
-	siteThemePath,
-} from './site-paths.mjs';
+import { getSiteSourcePaths } from './site-conventions.mjs';
+import { siteDir, siteThemePath } from './site-paths.mjs';
+import { readThemePackage } from './theme-packages.mjs';
+import { getSourcePageLocation } from './source-files.mjs';
 import { resolveThemePresentation } from './presentation.mjs';
-import { resolveThemeConfig } from './theme-presets.mjs';
-import { pageThemeSchema, themeVisualSchema } from './schema-definitions.mjs';
-import { parseYamlConfig } from './yaml-config.mjs';
 
 export const readThemeConfig = async () => {
-	const themeFile = await readFile(siteThemePath, 'utf8').catch((error) => {
-		if (error?.code === 'ENOENT') {
-			throw new Error(`${siteThemeLabel} is required. Create it before running Norna.`);
-		}
-
-		throw error;
-	});
-	const config = parseYamlConfig(themeFile, siteThemeLabel, {
-		schema: themeVisualSchema,
-		validateStructure: validateThemeYamlStructure,
-	});
-	resolveThemeConfig(config, siteThemeLabel);
-	resolveThemePresentation(config, siteThemeLabel);
-
-	return config;
-};
-
-const getPageThemeFiles = async (directory, relativeDirectory = '') => {
-	const entries = await readdir(directory, { withFileTypes: true }).catch((error) => {
-		if (error?.code === 'ENOENT') return [];
-		throw error;
-	});
-	const files = [];
-
-	for (const entry of entries) {
-		const relativePath = path.join(relativeDirectory, entry.name);
-		const absolutePath = path.join(directory, entry.name);
-		if (entry.isDirectory()) {
-			files.push(...await getPageThemeFiles(absolutePath, relativePath));
-			continue;
-		}
-
-		if (entry.name === 'theme.yaml') {
-			files.push({
-				path: absolutePath,
-				label: `${sitePagesLabel}/${relativePath.split(path.sep).join('/')}`,
-			});
-		}
-	}
-
-	return files;
+	const theme = await readThemePackage({ siteRoot: siteDir, filename: siteThemePath });
+	resolveThemePresentation(theme.config, theme.label);
+	return theme.config;
 };
 
 export const validatePageThemeFiles = async () => {
-	const files = await getPageThemeFiles(sitePagesDir);
-	const configs = [];
-
-	for (const file of files) {
-		const source = await readFile(file.path, 'utf8');
-		const config = parseYamlConfig(source, file.label, {
-			schema: pageThemeSchema,
-			validateStructure: validatePageThemeYamlStructure,
+	const themes = [];
+	const visit = async (directory) => {
+		const entries = await readdir(directory, { withFileTypes: true }).catch((error) => {
+			if (error.code === 'ENOENT') return [];
+			throw error;
 		});
-
-		configs.push({ ...file, config });
-	}
-
-	return configs;
+		for (const entry of entries) {
+			const filename = path.join(directory, entry.name);
+			if (entry.isDirectory()) { await visit(filename); continue; }
+			if (!['tree-theme.yaml', 'page-theme.yaml', 'theme.yaml'].includes(entry.name)) continue;
+			const location = getSourcePageLocation(siteDir, directory);
+			if (!location) continue;
+			if (entry.name === 'theme.yaml') throw new Error(`${filename} uses the former theme filename. Use page-theme.yaml for one page only or tree-theme.yaml for inherited branch settings.`);
+			if (filename === siteThemePath) continue;
+			themes.push({ ...await readThemePackage({ siteRoot: siteDir, filename }), pageDirectory: location.pageDirectory });
+		}
+	};
+	await visit(getSiteSourcePaths(siteDir).root);
+	return themes;
 };

package/scripts/lib/theme-packages.mjs

@@ -0,0 +1,47 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { getPageDirectoryAncestors, parsePageDirectoryPath } from './page-model.mjs';
+import { getPageSourceDirectory } from './site-conventions.mjs';
+import { getSourceFileDefinition } from './source-files.mjs';
+import { mergeThemeOverrides } from './theme-presets.mjs';
+import { resolveThemePresentation } from './presentation.mjs';
+import { validateThemeYamlStructure } from './site-content.mjs';
+import { parseYamlConfig } from './yaml-config.mjs';
+
+export const readThemePackage = async ({ siteRoot, filename, sources = new Map() }) => {
+	const definition = getSourceFileDefinition(siteRoot, filename);
+	if (!definition || !['rootTheme', 'theme', 'pageTheme'].includes(definition.schemaKind)) throw new Error(`Not a permitted theme location: ${filename}.`);
+	const source = sources.has(filename) ? sources.get(filename) : await readFile(filename, 'utf8').catch((error) => {
+		if (error.code !== 'ENOENT') throw error;
+		if (definition.required) throw new Error(`${filename} is required. Create the root tree theme before running Norna.`);
+		return null;
+	});
+	if (source === null) return null;
+	return { path: filename, label: filename, config: parseYamlConfig(source, filename, { schema: definition.schema, validateStructure: validateThemeYamlStructure }) };
+};
+
+// Resolve authored overrides only; preset expansion stays in the shared visual
+// resolvers. A page-only file is never considered while walking ancestors.
+export const selectPageTheme = async ({ siteRoot, pageDirectory = '.', sources, includePageTheme = true }) => {
+	siteRoot = path.resolve(siteRoot);
+	parsePageDirectoryPath(pageDirectory);
+	const ancestors = pageDirectory === '.' ? ['.'] : ['.', ...getPageDirectoryAncestors(pageDirectory)];
+	let treeTheme;
+	const sourceFiles = [];
+	for (const ancestor of ancestors) {
+		const filename = path.join(siteRoot, getPageSourceDirectory(ancestor), 'tree-theme.yaml');
+		const candidate = await readThemePackage({ siteRoot, filename, sources });
+		if (candidate) {
+			treeTheme = { ...candidate, config: mergeThemeOverrides(treeTheme?.config, candidate.config) };
+			sourceFiles.push(candidate);
+		}
+	}
+	const pageTheme = includePageTheme
+		? await readThemePackage({ siteRoot, filename: path.join(siteRoot, getPageSourceDirectory(pageDirectory), 'page-theme.yaml'), sources })
+		: null;
+	const selected = pageTheme ? { ...pageTheme, config: mergeThemeOverrides(treeTheme.config, pageTheme.config) } : treeTheme;
+	if (pageTheme) sourceFiles.push(pageTheme);
+	resolveThemePresentation(treeTheme.config, treeTheme.label);
+	resolveThemePresentation(selected.config, selected.label);
+	return { treeTheme, pageTheme, selected, sourceFiles };
+};

package/scripts/lib/theme-presets.mjs

@@ -93,7 +93,7 @@ export const getThemePresetMetadata = (presetName) => {
 	};
 };
 
-export const getThemePreset = (presetName, sourceLabel = 'theme.yaml') => {
+export const getThemePreset = (presetName, sourceLabel = 'root/tree-theme.yaml') => {
 	const preset = themePresets[presetName];
 
 	if (!preset) {
@@ -103,62 +103,29 @@ export const getThemePreset = (presetName, sourceLabel = 'theme.yaml') => {
 	return structuredClone(preset);
 };
 
-export const resolveThemeConfig = (theme = {}, sourceLabel = 'theme.yaml') => {
-	const presetName = theme?.preset;
-	if (presetName === undefined) return structuredClone(theme ?? {});
+// Keep authored fields separate from preset defaults so navigation can distinguish
+// an explicit surface request from an adaptable preset default.
+export const mergeThemeOverrides = (base = {}, override = {}) => {
+	const merged = override.preset !== undefined ? structuredClone(override) : mergeDeep(base, override);
+	if (override.images?.presentation === 'prose-aligned' && override.images.maxAvailableHeightPercent === undefined) {
+		delete merged.images.maxAvailableHeightPercent;
+	}
+	return merged;
+};
 
+export const resolveThemeConfig = (theme = {}, sourceLabel = 'root/tree-theme.yaml') => {
+	const presetName = theme?.preset;
 	const overrides = structuredClone(theme ?? {});
-	delete overrides.preset;
-
-	const resolved = {
-		preset: presetName,
+	const resolved = presetName === undefined ? overrides : {
 		...mergeDeep(getThemePreset(presetName, sourceLabel), overrides),
 	};
-
-	if (
-		overrides.images?.presentation === 'prose-aligned'
-		&& overrides.images.maxAvailableHeightPercent === undefined
-	) {
+	if (overrides.images?.presentation === 'prose-aligned' && overrides.images.maxAvailableHeightPercent === undefined) {
 		delete resolved.images.maxAvailableHeightPercent;
 	}
-
-	return resolved;
-};
-
-const mergePageThemePart = (base, override, keys) => Object.fromEntries(keys
-	.filter((key) => override?.[key] !== undefined || base?.[key] !== undefined)
-	.map((key) => [key, override?.[key] ?? base?.[key]]));
-
-export const mergePageThemeConfig = (base = {}, override = {}) => {
-	const images = {
-		...(base.images ?? {}),
-		...mergePageThemePart(base.images, override.images, [
-			'presentation',
-			'width',
-			'maxAvailableWidthPercent',
-			'maxAvailableHeightPercent',
-		]),
-	};
-
-	if (
-		override.images?.presentation === 'prose-aligned'
-		&& override.images.maxAvailableHeightPercent === undefined
-	) {
-		delete images.maxAvailableHeightPercent;
+	if (resolved.images?.presentation === 'prose-aligned' && resolved.images.maxAvailableHeightPercent !== undefined) {
+		throw new Error(`images.maxAvailableHeightPercent cannot be used with images.presentation "prose-aligned" in ${sourceLabel}. Remove images.maxAvailableHeightPercent or set images.presentation to "centered-fit".`);
 	}
-
-	return {
-		...base,
-		layout: {
-			...(base.layout ?? {}),
-			...mergePageThemePart(base.layout, override.layout, ['contentSpacing', 'textWidth']),
-		},
-		images,
-		sections: {
-			...(base.sections ?? {}),
-			...mergePageThemePart(base.sections, override.sections, ['backgroundPattern']),
-		},
-	};
+	return resolved;
 };
 
 const quote = (value) => JSON.stringify(value);
@@ -171,7 +138,7 @@ const responsiveValueLines = (label, value, indent = 2) => {
 	];
 };
 
-export const renderThemePresetReference = (presetName, sourceLabel = 'theme.yaml') => {
+export const renderThemePresetReference = (presetName, sourceLabel = 'root/tree-theme.yaml') => {
 	const preset = getThemePreset(presetName, sourceLabel);
 	const metadata = getThemePresetMetadata(presetName);
 	const { appearance, corners, layout, images, blocks, typography, palette, sections } = preset;
@@ -179,8 +146,8 @@ export const renderThemePresetReference = (presetName, sourceLabel = 'theme.yaml
 	return [
 		`# Original values for Norna's "${presetName}" theme preset.`,
 		`# ${metadata.description}`,
-		'# This is a reference file. Norna only loads theme.yaml.',
-		'# Keep the preset in theme.yaml and copy only the values you want to override.',
+		'# This is a reference file. Norna loads root/tree-theme.yaml for the shared theme.',
+		'# Keep the preset in root/tree-theme.yaml and copy only the values you want to override.',
 		`# Available theme presets: ${themePresetNames.join(', ')}.`,
 		`preset: ${presetName}`,
 		'',

package/scripts/lib/typography.mjs

@@ -152,7 +152,7 @@ const evaluateResponsiveSize = (value, viewportWidth) => {
 	return Math.min(parsed.maximumRem * 16, Math.max(parsed.minimumRem * 16, preferredPixels));
 };
 
-export const assertTypographyContract = (typography, sourceLabel = 'theme.yaml') => {
+export const assertTypographyContract = (typography, sourceLabel = 'root/tree-theme.yaml') => {
 	const values = typography?.values ?? typography;
 	if (!values?.headings || !values?.body || !values?.caption) {
 		throw new Error(`Incomplete typography configuration in ${sourceLabel}.`);
@@ -427,7 +427,7 @@ export const defaultTypography = {
 	rhythm: 'normal',
 };
 
-export const resolveTypographyConfig = (typography = defaultTypography, sourceLabel = 'theme.yaml') => {
+export const resolveTypographyConfig = (typography = defaultTypography, sourceLabel = 'root/tree-theme.yaml') => {
 	const profileName = typography?.profile ?? defaultTypography.profile;
 	const rhythmName = typography?.rhythm ?? defaultTypography.rhythm;
 	const profile = typographyProfiles[profileName];

package/scripts/lib/yaml-config.mjs

@@ -60,7 +60,7 @@ export const parseYamlConfig = (source, label, {
 	if (issues.length > 0) {
 		throw new Error([
 			`${label} has invalid YAML structure.`,
-			...issues.map((issue) => `- ${issue.message}`),
+			...issues.map((issue) => `- ${issue.message}${issue.fix ? ` ${issue.fix}` : ''}`),
 		].join('\n'));
 	}
 

package/scripts/lib/yaml-source-edit.mjs

@@ -0,0 +1,94 @@
+import { isMap, isScalar, isSeq, parseDocument } from 'yaml';
+
+const collectComments = (token, start, end, comments = []) => {
+	if (!token || typeof token !== 'object') return comments;
+	if (token.type === 'comment' && token.offset >= start && token.offset < end) comments.push(token.source);
+	for (const value of Object.values(token)) {
+		if (Array.isArray(value)) for (const item of value) collectComments(item, start, end, comments);
+		else if (value && typeof value === 'object') collectComments(value, start, end, comments);
+	}
+	return comments;
+};
+
+export const changeYamlField = (yaml, keys, value, eol) => {
+	const document = parseDocument(yaml, { keepSourceTokens: true });
+	if (document.errors.length) throw new Error('Repair the YAML before editing it automatically.');
+	if (document.contents && !isMap(document.contents)) throw new Error('This YAML document requires a mapping.');
+	const scalar = (data) => JSON.stringify(data);
+	const entryText = (key, data, indent) => {
+		const prefix = ' '.repeat(indent);
+		if (Array.isArray(data)) return `${prefix}${key}:${eol}${data.map((entry) => `${prefix}  - ${scalar(entry)}${eol}`).join('')}`;
+		return data && typeof data === 'object' && !Array.isArray(data)
+			? `${prefix}${key}:${eol}${Object.entries(data).map(([child, value]) => entryText(child, value, indent + 2)).join('')}`
+			: `${prefix}${key}: ${scalar(data)}${eol}`;
+	};
+	const edit = (start, end, text) => yaml.slice(0, start) + text + yaml.slice(end);
+	const insert = (map, key, data) => {
+		if (!map) return yaml + (yaml && !yaml.endsWith('\n') ? eol : '') + entryText(key, data, 0);
+		if (map.flow) {
+			const position = map.range[1] - 1;
+			const separator = map.items.length && !yaml.slice(0, position).trimEnd().endsWith(',') ? ', ' : '';
+			return edit(position, position, `${separator}${key}: ${scalar(data)}`);
+		}
+		const indent = map.items[0]?.key.srcToken.indent ?? 0;
+		const position = map.range[2];
+		return edit(position, position, `${position && yaml[position - 1] !== '\n' ? eol : ''}${entryText(key, data, indent)}`);
+	};
+	const visit = (map, remaining, ancestors = []) => {
+		const [key, ...rest] = remaining;
+		const pair = map?.items.find((item) => item.key.value === key);
+		if (!pair) {
+			if (value === undefined) return yaml;
+			return insert(map, key, rest.reduceRight((child, part) => ({ [part]: child }), value));
+		}
+		if (rest.length) {
+			if (!isMap(pair.value)) throw new Error(`Edit ${key} as a YAML mapping in the source before editing it automatically.`);
+			return visit(pair.value, rest, [...ancestors, { map, pair }]);
+		}
+		if (value !== undefined) {
+			if ((!isScalar(pair.value) && !(Array.isArray(value) && isSeq(pair.value))) || pair.value.anchor || pair.value.tag
+				|| (isSeq(pair.value) && pair.value.items.some((item) => !isScalar(item) || item.anchor || item.tag))) {
+				throw new Error(`Edit ${keys.join('.')} in the source; this field uses YAML anchors, tags or values that cannot be changed automatically.`);
+			}
+			if (Array.isArray(value) && !map.flow) {
+				// Keep aliases in block form so a later page:move can preserve
+				// old addresses without asking the author to reformat our output.
+				const start = yaml.lastIndexOf('\n', pair.key.range[0] - 1) + 1;
+				const end = pair.value.range[2];
+				const indent = pair.key.srcToken.indent ?? 0;
+				const comments = collectComments(pair.srcToken, start, end);
+				return edit(start, end, comments.map((comment) => `${' '.repeat(indent)}${comment}${eol}`).join('')
+					+ entryText(pair.key.value, value, indent));
+			}
+			const start = pair.value.range[0];
+			const end = pair.value.range[1];
+			const comments = collectComments(pair.value.srcToken, start, end);
+			const trailing = yaml.slice(start, end).endsWith('\n') ? eol : '';
+			return edit(start, end, scalar(value) + comments.map((comment) => ` ${comment}`).join('') + trailing);
+		}
+		return remove(map, pair, ancestors);
+	};
+	const remove = (map, pair, ancestors) => {
+		if (!map.flow && map.items.length === 1 && ancestors.length) {
+			const parent = ancestors.pop();
+			return remove(parent.map, parent.pair, ancestors);
+		}
+		let start = pair.key.range[0];
+		let end = pair.value?.range[2] ?? pair.key.range[2];
+		if (map.flow) {
+			end = pair.value?.range[1] ?? pair.key.range[1];
+			const index = map.items.indexOf(pair);
+			const previousComma = pair.srcToken?.start.find((token) => token.type === 'comma');
+			const nextComma = map.items[index + 1]?.srcToken?.start.find((token) => token.type === 'comma');
+			if (previousComma) start = previousComma.offset;
+			else if (nextComma) end = nextComma.offset + 1;
+		} else {
+			start = yaml.lastIndexOf('\n', start - 1) + 1;
+		}
+		const comments = collectComments(pair.srcToken, start, end);
+		const indent = pair.key.srcToken.indent ?? 0;
+		const replacement = comments.map((comment) => `${' '.repeat(indent)}${comment}${eol}`).join('');
+		return edit(start, end, replacement);
+	};
+	return visit(document.contents, keys);
+};

package/scripts/move-site-page.mjs

@@ -1,13 +1,4 @@
-import { randomUUID } from 'node:crypto';
-import {
-	access,
-	mkdir,
-	readFile,
-	rename,
-	rm,
-	rmdir,
-	writeFile,
-} from 'node:fs/promises';
+import { applyPageMovePlan } from './lib/page-move-apply.mjs';
 import path from 'node:path';
 import {
 	createPageMovePlan,
@@ -21,6 +12,7 @@ import {
 	sitePagesDir,
 	sitePagesLabel,
 	siteProjectRoot,
+	siteDir,
 } from './lib/site-paths.mjs';
 import { getSiteStructure } from './lib/site-structure.mjs';
 
@@ -101,119 +93,6 @@ const toDisplayPath = (filePath) => {
 		: filePath).split(path.sep).join('/');
 };
 
-const fileExists = async (filePath) => access(filePath).then(() => true, () => false);
-
-const writeFileAtomically = async (filePath, source, mode) => {
-	const temporaryPath = path.join(
-		path.dirname(filePath),
-		`.${path.basename(filePath)}.norna-${process.pid}-${randomUUID()}.tmp`,
-	);
-	try {
-		await writeFile(temporaryPath, source, { mode: mode & 0o777 });
-		await rename(temporaryPath, filePath);
-	} finally {
-		await rm(temporaryPath, { force: true });
-	}
-};
-
-const assertSourcesUnchanged = async (plan) => {
-	for (const file of plan.sourceFiles) {
-		const currentSource = await readFile(file.contentPath, 'utf8');
-		if (currentSource !== file.source) {
-			throw new Error([
-				`Page move stopped because ${file.contentLabel} changed after the plan was created.`,
-				'Run the command again to build a fresh plan. No file was changed.',
-			].join('\n'));
-		}
-	}
-};
-
-const assertFinalSite = async () => {
-	const structure = await getSiteStructure();
-	const graph = await getSiteLinkGraph({ siteStructure: structure });
-	if (graph.diagnostics.length === 0) return;
-	throw new Error([
-		'Post-move link validation failed.',
-		...graph.diagnostics.flatMap((diagnostic) => [
-			`- ${diagnostic.message}`,
-			...(diagnostic.fix ? [`  Fix: ${diagnostic.fix}`] : []),
-		]),
-	].join('\n'));
-};
-
-const applyPlan = async (plan) => {
-	await assertSourcesUnchanged(plan);
-	let collectionCreated = false;
-	let directoryMoved = false;
-	let fileWritten = false;
-
-	try {
-		if (plan.mode === 'move') {
-			if (!plan.destinationCollectionExists) {
-				await mkdir(plan.destinationCollectionDirectory);
-				collectionCreated = true;
-			}
-			try {
-				await rename(plan.sourceDirectory, plan.destinationDirectory);
-				directoryMoved = true;
-			} catch (error) {
-				if (error?.code === 'EXDEV') {
-					throw new Error('Page directories must stay on one filesystem so Norna can move the complete subtree atomically.');
-				}
-				throw error;
-			}
-		}
-
-		for (const change of plan.fileChanges) {
-			await writeFileAtomically(change.finalPath, change.updatedSource, change.mode);
-			fileWritten = true;
-		}
-		await assertFinalSite();
-	} catch (error) {
-		const changesStarted = directoryMoved || fileWritten;
-		const rollbackErrors = [];
-		if (directoryMoved) {
-			try {
-				await rename(plan.destinationDirectory, plan.sourceDirectory);
-				directoryMoved = false;
-			} catch (rollbackError) {
-				rollbackErrors.push(`Could not restore the page directory: ${rollbackError.message}`);
-			}
-		}
-
-		for (const change of plan.fileChanges) {
-			try {
-				const restorePath = directoryMoved && change.finalPath !== change.originalPath
-					? change.finalPath
-					: change.originalPath;
-				await writeFileAtomically(restorePath, change.originalSource, change.mode);
-			} catch (rollbackError) {
-				rollbackErrors.push(`Could not restore ${change.contentLabel}: ${rollbackError.message}`);
-			}
-		}
-
-		if (collectionCreated && !directoryMoved) {
-			try {
-				await rmdir(plan.destinationCollectionDirectory);
-			} catch (rollbackError) {
-				if (rollbackError?.code !== 'ENOENT' && rollbackError?.code !== 'ENOTEMPTY') {
-					rollbackErrors.push(`Could not remove the newly created pages directory: ${rollbackError.message}`);
-				}
-			}
-		}
-
-		throw new Error([
-			error instanceof Error ? error.message : String(error),
-			rollbackErrors.length === 0
-				? (changesStarted
-					? 'The original page directory and content files were restored.'
-					: 'No source file was changed.')
-				: 'Rollback was incomplete. Inspect these paths before running page:move again:',
-			...rollbackErrors.map((message) => `- ${message}`),
-		].join('\n'));
-	}
-};
-
 const main = async () => {
 	const options = parseArgs(process.argv.slice(2));
 	if (options.help) {
@@ -244,7 +123,7 @@ const main = async () => {
 		return;
 	}
 
-	await applyPlan(plan);
+	await applyPageMovePlan(plan, { siteRoot: siteDir });
 	console.log(`\nPage move completed: ${plan.from} -> ${plan.to}`);
 };
 

package/scripts/show-typography.mjs

@@ -1,6 +1,4 @@
 import {
-	defaultTypography,
-	resolveTypographyConfig,
 	toYamlLines,
 	typographyProfiles,
 	typographyRhythms,
@@ -13,10 +11,13 @@ import {
 } from './lib/site-content.mjs';
 import { parsePageMarkdown } from './lib/page-markdown.mjs';
 import {
+	siteDir,
 	siteThemeLabel,
 } from './lib/site-paths.mjs';
 import { readThemeConfig } from './lib/theme-config.mjs';
 import { resolveThemeConfig } from './lib/theme-presets.mjs';
+import { selectPageTheme } from './lib/theme-packages.mjs';
+import { resolveThemePresentation } from './lib/presentation.mjs';
 
 const mode = process.argv[2] ?? 'show';
 
@@ -137,14 +138,14 @@ const defaultSources = (profileName, rhythmName) => {
 	return sources;
 };
 
-const applyOverrideSources = (sources, typographyConfig, sourceLabel) => {
+const applyOverrideSources = (sources, typographyConfig, sourceFor) => {
 	const overrides = typographyConfig?.overrides;
 	if (!overrides) return sources;
 
 	for (const path of typographyValuePaths) {
 		if (hasPath(overrides, path)) {
 			setPath(sources, path, {
-				source: `${sourceLabel} override`,
+				source: `${sourceFor(['typography', 'overrides', ...path])} override`,
 				inherited: false,
 			});
 		}
@@ -153,25 +154,38 @@ const applyOverrideSources = (sources, typographyConfig, sourceLabel) => {
 	return sources;
 };
 
-const resolveAnnotatedTypographyConfig = (typographyConfig, sourceLabel) => {
-	const resolved = resolveTypographyConfig(typographyConfig ?? defaultTypography);
+const resolveAnnotatedTypographyConfig = (theme, sourceLabel, sourceFiles) => {
+	const normalized = resolveThemeConfig(theme, sourceLabel);
+	const typographyConfig = normalized.typography;
+	const resolved = resolveThemePresentation(theme, sourceLabel).typography;
+	// Attribute a value to its last authored setting, stopping at the preset
+	// that replaced its base. The resolver still determines all effective values.
+	const sourceFor = (propertyPath) => {
+		for (const file of sourceFiles.toReversed()) {
+			if (hasPath(file.config, propertyPath)) return file.label;
+			if (file.config.preset !== undefined) return `preset:${file.config.preset} (${file.label})`;
+		}
+		return 'engine default';
+	};
 	const sources = applyOverrideSources(
 		defaultSources(resolved.profile, resolved.rhythm),
 		typographyConfig,
-		sourceLabel,
+		sourceFor,
 	);
+	if (normalized.layout?.textWidth !== undefined) {
+		setPath(sources, ['body', 'width'], { source: sourceFor(['layout', 'textWidth']), inherited: false });
+	}
 
 	return {
 		profile: {
 			value: resolved.profile,
-			source: typographyConfig?.profile ? sourceLabel : 'engine default',
-			...(typographyConfig?.profile ? {} : { inherited: true }),
+			source: sourceFor(['typography', 'profile']),
 		},
 		rhythm: {
 			value: resolved.rhythm,
-			source: typographyConfig?.rhythm ? sourceLabel : 'engine default',
-			...(typographyConfig?.rhythm ? {} : { inherited: true }),
+			source: sourceFor(['typography', 'rhythm']),
 		},
+		fontFamily: { value: typographyConfig.fontFamily, source: sourceFor(['typography', 'fontFamily']) },
 		resolved,
 		sources,
 	};
@@ -180,16 +194,16 @@ const resolveAnnotatedTypographyConfig = (typographyConfig, sourceLabel) => {
 const formatAnnotatedTypography = (annotated) => ({
 	profile: annotated.profile,
 	rhythm: annotated.rhythm,
+	fontFamily: annotated.fontFamily,
 	resolved: annotateResolvedValues(annotated.resolved, annotated.sources),
 });
 
 const readThemeTypography = async () => {
-	const themeConfig = resolveThemeConfig(await readThemeConfig(), siteThemeLabel);
-	const themeTypographyConfig = themeConfig.typography;
-	return resolveAnnotatedTypographyConfig(themeTypographyConfig ?? defaultTypography, siteThemeLabel);
+	const config = await readThemeConfig();
+	return resolveAnnotatedTypographyConfig(config, siteThemeLabel, [{ config, label: siteThemeLabel }]);
 };
 
-const readPageTypography = async (contentFile, siteThemeTypography) => {
+const readPageTypography = async (contentFile) => {
 	const { frontmatter, body } = await readSiteFile(contentFile.contentPath, contentFile.contentLabel);
 	const indentationIssues = [];
 	validateFrontmatterIndentation(frontmatter, (issue) => indentationIssues.push(issue));
@@ -201,7 +215,8 @@ const readPageTypography = async (contentFile, siteThemeTypography) => {
 		].join('\n'));
 	}
 
-	const pageTypography = siteThemeTypography;
+	const { selected, sourceFiles } = await selectPageTheme({ siteRoot: siteDir, pageDirectory: contentFile.pageDirectory });
+	const pageTypography = resolveAnnotatedTypographyConfig(selected.config, selected.label, sourceFiles);
 	const sections = (await parsePageMarkdown(body, { label: contentFile.contentLabel })).sections
 		.map((section) => {
 		return {
@@ -225,7 +240,7 @@ if (mode === 'profiles') {
 	}).join('\n'));
 } else if (mode === 'show') {
 	const themeTypography = await readThemeTypography();
-	const pages = await Promise.all((await getContentFiles()).map((contentFile) => readPageTypography(contentFile, themeTypography)));
+	const pages = await Promise.all((await getContentFiles()).map(readPageTypography));
 	const output = {
 		theme: {
 			source: siteThemeLabel,