@janga/norna 0.7.25 → 0.7.26

package/src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { marginNoteLayoutDeclarations } from '../../scripts/lib/markdown-notes-render-plugin.mjs';
 import { getPresentationCssVariables } from '../../scripts/lib/presentation.mjs';
 import { getIconLinks, getSocialImageAsset } from '../lib/sitePublicAssets';
 import { withBasePath } from '../lib/basePath';
@@ -146,25 +147,20 @@ const marginNoteReadingWidths = [
 	['wide', `min(80ch, ${visualTheme.images.width})`],
 ] as const;
 const marginNoteOuterReserve = '0.5rem';
-const marginNoteDeclarations = [
-	'float: right;',
-	'clear: right;',
-	'width: var(--layout-note-width);',
-	'margin: 0 calc(0px - var(--layout-note-width) - var(--layout-note-gap)) 0.75rem var(--layout-note-gap);',
-].join('\n');
+const marginNoteDeclarations = marginNoteLayoutDeclarations;
 const marginNoteLayoutCss = [
 	'@media (min-width: 1101px) {',
 	...marginNoteReadingWidths.flatMap(([readingWidth, textWidth]) => [
 		[
 			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap})) {`,
-			`:root[data-reading-width="${readingWidth}"] .site-page-layout:not(.site-page-layout-tree) .section-note {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout:not(.site-page-layout-tree) .section-note-paragraph {`,
 				marginNoteDeclarations,
 			'}',
 		'}',
 		].join('\n'),
 		[
 			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} + ${marginNoteOuterReserve} - 11rem - ${visualTheme.layout.localNavigationGap})) {`,
-			`:root[data-reader-preferences-ready="true"][data-reading-width="${readingWidth}"][data-focus-reading="on"] .site-page-layout-tree .section-note {`,
+			`:root[data-reader-preferences-ready="true"][data-reading-width="${readingWidth}"][data-focus-reading="on"] .site-page-layout-tree .section-note-paragraph {`,
 				marginNoteDeclarations,
 			'}',
 		'}',
@@ -174,7 +170,7 @@ const marginNoteLayoutCss = [
 	'@media (min-width: 1101px) and (max-width: 1280px) {',
 	...marginNoteReadingWidths.map(([readingWidth, textWidth]) => [
 		`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} + ${marginNoteOuterReserve})) {`,
-		`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note {`,
+		`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note-paragraph {`,
 			marginNoteDeclarations,
 		'}',
 	'}',
@@ -184,14 +180,14 @@ const marginNoteLayoutCss = [
 	...marginNoteReadingWidths.flatMap(([readingWidth, textWidth]) => [
 		[
 			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap})) {`,
-			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree.site-page-layout-contents .section-note {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree.site-page-layout-contents .section-note-paragraph {`,
 				marginNoteDeclarations,
 			'}',
 		'}',
 		].join('\n'),
 		[
 			`@container (min-width: calc(${textWidth} + ${visualTheme.layout.noteWidth} + ${visualTheme.layout.noteGap} + ${marginNoteOuterReserve} - 11rem - ${visualTheme.layout.localNavigationGap})) {`,
-			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note {`,
+			`:root[data-reading-width="${readingWidth}"] .site-page-layout-tree:not(.site-page-layout-contents) .section-note-paragraph {`,
 				marginNoteDeclarations,
 			'}',
 		'}',
@@ -202,7 +198,7 @@ const marginNoteLayoutCss = [
 const { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = buildInfo === true;
 const buildTime = showBuildInfo
-	? new Intl.DateTimeFormat(projectConfig.locale.lang, {
+	? new Intl.DateTimeFormat(projectConfig.locale.formattingLocale, {
 		dateStyle: 'short',
 		timeStyle: 'short',
 		timeZone: 'UTC',

package/src/lib/navigationFollowing.ts

@@ -0,0 +1,142 @@
+const isDisplayed = (element: HTMLElement) => {
+	if (!element.getClientRects().length || getComputedStyle(element).visibility === 'hidden') return false;
+	// Closed native details can retain layout rectangles for their hidden links.
+	for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+		if (parent instanceof HTMLDetailsElement && !parent.open
+			&& !parent.querySelector(':scope > summary')?.contains(element)) return false;
+	}
+	return true;
+};
+
+const visibleEntry = (link: HTMLElement, container: HTMLElement): HTMLElement | undefined => {
+	if (isDisplayed(link)) return link;
+
+	let node = link.closest<HTMLElement>('.navigation-page-node');
+	while (node && container.contains(node)) {
+		const entry = node.querySelector<HTMLElement>([
+			':scope > .navigation-page-link',
+			':scope > .navigation-page-open-link',
+			':scope > .navigation-category-disclosure > summary',
+		].join(', '));
+		if (entry && isDisplayed(entry)) return entry;
+		node = node.parentElement?.closest<HTMLElement>('.navigation-page-node') ?? null;
+	}
+	return undefined;
+};
+
+// Adjust only the navigation scrollport, never the document or its focus.
+const revealEntry = (container: HTMLElement, entry: HTMLElement) => {
+	const box = container.getBoundingClientRect();
+	const inset = Math.min(16, container.clientHeight / 8);
+	let top = Math.max(0, box.top + container.clientTop);
+	const bottom = Math.min(window.innerHeight, box.top + container.clientTop + container.clientHeight);
+	for (const control of container.querySelectorAll<HTMLElement>(
+		'.navigation-tree-controls, .mobile-nav-panel-actions',
+	)) {
+		if (isDisplayed(control) && getComputedStyle(control).position === 'sticky') {
+			top = Math.max(top, control.getBoundingClientRect().bottom);
+		}
+	}
+	const bounds = entry.getBoundingClientRect();
+	const available = bottom - top - inset * 2;
+	if (available <= 0) return;
+	const delta = bounds.top < top + inset || bounds.height > available
+		? bounds.top - top - inset
+		: Math.max(0, bounds.bottom - bottom + inset);
+	if (Math.abs(delta) > 1) {
+		container.scrollTo({ top: container.scrollTop + delta, behavior: 'instant' });
+	}
+};
+
+export const setupNavigationFollowing = () => {
+	const left = document.querySelector<HTMLElement>('.tree-local-navigation');
+	const right = document.querySelector<HTMLElement>('.page-contents-navigation-rail');
+	const compact = document.querySelector<HTMLElement>('[data-compact-navigation-panel]');
+	const states = [left, right, compact]
+		.filter((container): container is HTMLElement => container !== null)
+		.map((container) => ({
+			container,
+			paused: false,
+			pointerDown: false,
+			expectedScrollTop: container.scrollTop,
+			ancestor: undefined as HTMLElement | undefined,
+		}));
+	let frame: number | undefined;
+
+	const updateContainer = (state: typeof states[number], reveal: boolean) => {
+		const { container } = state;
+		state.ancestor?.removeAttribute('data-reading-position-ancestor');
+		state.ancestor = undefined;
+		if (!isDisplayed(container)) return;
+		if (container.matches('[data-tree-filter-active="true"]')
+			|| container.querySelector('[data-tree-filter-active="true"]')) return;
+
+		const link = container.querySelector<HTMLElement>('a[aria-current="location"]');
+		if (!link) return;
+		const entry = visibleEntry(link, container);
+		if (!entry) return;
+		if (entry !== link) {
+			entry.setAttribute('data-reading-position-ancestor', 'true');
+			state.ancestor = entry;
+		}
+		if (!reveal) return;
+		revealEntry(container, entry);
+		state.expectedScrollTop = container.scrollTop;
+	};
+
+	const update = () => {
+		frame = undefined;
+		const selected = right && isDisplayed(right) ? right : left;
+		for (const state of states) {
+			const ownsFocus = state.container.contains(document.activeElement);
+			updateContainer(state, state.container === selected
+				&& !state.paused && !state.pointerDown && !ownsFocus
+				&& !document.querySelector('.mobile-nav-menu[open]'));
+		}
+	};
+	const schedule = () => {
+		if (frame === undefined) frame = requestAnimationFrame(update);
+	};
+
+	for (const state of states) {
+		const pause = () => { state.paused = true; };
+		state.container.addEventListener('wheel', pause, { passive: true });
+		state.container.addEventListener('touchstart', pause, { passive: true });
+		state.container.addEventListener('keydown', pause);
+		state.container.addEventListener('focusin', pause);
+		state.container.addEventListener('input', pause);
+		state.container.addEventListener('input', schedule);
+		state.container.addEventListener('pointerdown', () => {
+			pause();
+			state.pointerDown = true;
+		});
+		state.container.addEventListener('scroll', () => {
+			if (Math.abs(state.container.scrollTop - state.expectedScrollTop) > 1) pause();
+		}, { passive: true });
+		// A disclosure can hide the active link without changing the scrollport size.
+		state.container.addEventListener('toggle', schedule, true);
+	}
+	const releasePointer = () => {
+		states.forEach((state) => { state.pointerDown = false; });
+	};
+	document.addEventListener('pointerup', releasePointer);
+	document.addEventListener('pointercancel', releasePointer);
+	window.addEventListener('blur', releasePointer);
+	window.addEventListener('scroll', () => {
+		states.forEach((state) => { state.paused = false; });
+		// Section tracking schedules its own update for the new document position.
+	}, { passive: true });
+	window.addEventListener('resize', schedule);
+	if ('ResizeObserver' in window) {
+		const observer = new ResizeObserver(schedule);
+		states.forEach(({ container }) => observer.observe(container));
+	}
+
+	return {
+		update: schedule,
+		revealCompact: () => {
+			const state = states.find(({ container }) => container === compact);
+			if (state) updateContainer(state, true);
+		},
+	};
+};

package/src/lib/noteNavigation.ts

@@ -0,0 +1,50 @@
+export const installNoteNavigation = () => {
+	const revealReference = (target: HTMLElement) => {
+		const panel = target.closest<HTMLElement>('[data-tab-panel]');
+		if (panel?.hidden) {
+			const group = panel.closest('[data-content-tabs]');
+			const button = Array.from(group?.querySelectorAll<HTMLButtonElement>('[role="tab"]') ?? [])
+				.find((candidate) => candidate.getAttribute('aria-controls') === panel.id);
+			button?.click();
+		}
+		target.focus({ preventScroll: true });
+	};
+	const targetFor = (hash: string) => {
+		try { return document.getElementById(decodeURIComponent(hash.slice(1))); } catch { return null; }
+	};
+	document.querySelectorAll<HTMLAnchorElement>('.section-note-ref a').forEach((link) => {
+		const note = targetFor(link.hash);
+		if (!note?.classList.contains('section-note')) return;
+		let hovered = false;
+		const updateHighlight = () => {
+			note.classList.toggle('is-reference-highlighted', hovered || link.matches(':focus-visible'));
+		};
+		link.addEventListener('pointerenter', (event) => {
+			hovered = event.pointerType !== 'touch';
+			updateHighlight();
+		});
+		link.addEventListener('pointerleave', () => {
+			hovered = false;
+			updateHighlight();
+		});
+		link.addEventListener('pointercancel', () => {
+			hovered = false;
+			updateHighlight();
+		});
+		link.addEventListener('focus', updateHighlight);
+		link.addEventListener('blur', updateHighlight);
+	});
+	// Capture before native fragment navigation so a previously hidden reference
+	// is visible and focusable when the browser follows the real return link.
+	document.addEventListener('click', (event) => {
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		const link = (event.target as Element | null)?.closest<HTMLAnchorElement>('a[data-footnote-backref]');
+		if (!link) return;
+		const target = targetFor(link.hash);
+		if (target?.hasAttribute('data-footnote-ref')) revealReference(target);
+	}, true);
+	window.addEventListener('hashchange', () => {
+		const target = targetFor(location.hash);
+		if (target?.hasAttribute('data-footnote-ref')) revealReference(target);
+	});
+};

package/src/lib/searchNavigation.ts

@@ -0,0 +1,107 @@
+type SearchOrigin = {
+	id: string;
+	href: string;
+	title: string;
+	x: number;
+	y: number;
+};
+
+const returnParameter = 'norna-return';
+const historyKey = 'nornaSearchOrigin';
+
+export const setupSearchNavigation = () => {
+	const searchLink = document.querySelector<HTMLAnchorElement>('.site-search-link[data-search-base]');
+	if (!searchLink) return;
+	const basePath = searchLink.dataset.searchBase!;
+	const searchUrl = new URL(searchLink.href);
+	const departureKey = `norna:search:${basePath}:departure`;
+	const restoreKey = `norna:search:${basePath}:restore`;
+	const localHref = () => location.pathname + location.search + location.hash;
+	const isNormalClick = (event: MouseEvent, link: HTMLAnchorElement) => !event.defaultPrevented
+		&& event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey
+		&& !link.hasAttribute('download') && (!link.target || link.target === '_self');
+	const readStorage = (key: string): unknown => {
+		try { return JSON.parse(sessionStorage.getItem(key) ?? 'null'); } catch { return null; }
+	};
+	const store = (key: string, value: SearchOrigin) => {
+		try { sessionStorage.setItem(key, JSON.stringify(value)); return true; } catch { return false; }
+	};
+	const remove = (key: string) => {
+		try { sessionStorage.removeItem(key); } catch {}
+	};
+	const validate = (value: unknown): SearchOrigin | null => {
+		if (!value || typeof value !== 'object') return null;
+		const origin = value as SearchOrigin;
+		if (typeof origin.id !== 'string' || !/^[a-z0-9-]{1,100}$/i.test(origin.id)
+			|| typeof origin.href !== 'string' || !origin.href.startsWith('/')
+			|| origin.href.startsWith('//') || /[\\\u0000-\u0020]/.test(origin.href)
+			|| typeof origin.title !== 'string' || !origin.title.trim() || origin.title.length > 1000
+			|| !Number.isFinite(origin.x) || origin.x < 0
+			|| !Number.isFinite(origin.y) || origin.y < 0) return null;
+		try {
+			const url = new URL(origin.href, location.origin);
+			if (url.origin !== location.origin || !url.pathname.startsWith(basePath)
+				|| url.pathname === searchUrl.pathname) return null;
+			return origin;
+		} catch { return null; }
+	};
+
+	document.addEventListener('click', (event) => {
+		const title = searchLink.dataset.searchSourceTitle;
+		const link = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>('a[href]') : null;
+		if (!title || !link || !isNormalClick(event, link)
+			|| link.origin !== searchUrl.origin || link.pathname !== searchUrl.pathname) return;
+		const origin: SearchOrigin = {
+			id: crypto.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`,
+			href: localHref(), title, x: Math.max(0, scrollX), y: Math.max(0, scrollY),
+		};
+		if (!store(departureKey, origin)) return;
+		try { history.replaceState({ ...history.state, [historyKey]: origin }, ''); } catch {}
+		const destination = new URL(link.href);
+		destination.searchParams.set(returnParameter, origin.id);
+		event.preventDefault();
+		location.assign(destination.href);
+	});
+
+	const returnLink = document.querySelector<HTMLAnchorElement>('[data-search-return]');
+	if (returnLink) {
+		const url = new URL(location.href);
+		const token = url.searchParams.get(returnParameter);
+		let origin = validate(history.state?.[historyKey]);
+		if (url.searchParams.has(returnParameter)) {
+			const departure = validate(readStorage(departureKey));
+			origin = departure?.id === token ? departure : null;
+			url.searchParams.delete(returnParameter);
+			// Keep return context on this history entry, not on subsequent direct visits.
+			try {
+				history.replaceState({ ...history.state, [historyKey]: origin }, '', url);
+			} catch { origin = null; }
+			if (departure?.id === token) remove(departureKey);
+		}
+		if (origin) {
+			const destination = origin;
+			returnLink.href = destination.href;
+			returnLink.querySelector('span')!.textContent = returnLink.dataset.searchReturnLabel!.replace('{page}', () => destination.title);
+			returnLink.addEventListener('click', (event) => {
+				if (isNormalClick(event, returnLink)) store(restoreKey, destination);
+			});
+		}
+		return;
+	}
+
+	const restore = (event: PageTransitionEvent) => {
+		const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined;
+		const fromHistory = event.persisted || navigation?.type === 'back_forward';
+		const origin = validate(readStorage(restoreKey))
+			?? (fromHistory ? validate(history.state?.[historyKey]) : null);
+		remove(restoreKey);
+		if (!origin || origin.href !== localHref()) return;
+		try { history.replaceState({ ...history.state, [historyKey]: null }, ''); } catch {}
+		// Wait for initial anchor alignment and font layout, then restore the actual reading position.
+		void document.fonts.ready.then(() => requestAnimationFrame(() => requestAnimationFrame(() => {
+			searchLink.focus({ preventScroll: true });
+			window.scrollTo({ left: origin.x, top: origin.y, behavior: 'instant' });
+		})));
+	};
+	window.addEventListener('pageshow', restore);
+};

package/src/lib/sectionContent.ts

@@ -1,4 +1,5 @@
 import { markdownToHtml } from 'satteri';
+import { groupRenderedTabs } from '../../scripts/lib/content-tabs.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import {
 	formatHeadingIdentifierIssue,
@@ -47,15 +48,9 @@ type PageListItem = {
 	pathname: string;
 	description?: string;
 };
-type InlineNote = {
-	markdown: string;
-	number: number;
-	id: string;
-	referenceId: string;
-	html?: string;
-};
-type SectionContentBlock =
+export type SectionContentBlock =
 	| { type: 'html'; html: string }
+	| { type: 'tabs'; index: number; panels: Array<{ label: string; contentBlocks: SectionContentBlock[] }> }
 	| { type: 'image-stack'; images: ManagedImage[] }
 	| { type: 'image-carousel'; images: ManagedImage[] }
 	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width?: CardListWidth; cards: CardListItem[] }
@@ -78,6 +73,11 @@ export type HeadingNavigation = SectionNavigation & {
 	parentId: string | null;
 };
 
+export const flattenContentBlocks = (blocks: SectionContentBlock[]): SectionContentBlock[] =>
+	blocks.flatMap((block) => block.type === 'tabs'
+		? [block, ...block.panels.flatMap((panel) => flattenContentBlocks(panel.contentBlocks))]
+		: [block]);
+
 const explicitHeadingIdRegex = /\s*\{#([a-z0-9-]+)\}\s*$/;
 const imageProvenanceCommentRegex = /<!--\s*norna-image-provenance:[\s\S]*?-->/gi;
 
@@ -89,43 +89,6 @@ const prepareContentHtml = (html: string) =>
 		stripImageProvenanceComments(html),
 	);
 
-const noteDeclarationParagraphRegex = /<p>\s*\{note:\s*[\s\S]*?\}\s*<\/p>/gi;
-const htmlCodeRegionRegex = /<pre\b[\s\S]*?<\/pre>|<code\b[\s\S]*?<\/code>/gi;
-
-const replaceHtmlOutsideCode = (html: string, transform: (value: string) => string) => {
-	let result = '';
-	let cursor = 0;
-
-	for (const match of html.matchAll(htmlCodeRegionRegex)) {
-		const start = match.index ?? 0;
-		result += transform(html.slice(cursor, start));
-		result += match[0];
-		cursor = start + match[0].length;
-	}
-
-	return result + transform(html.slice(cursor));
-};
-
-const applyInlineNoteMarkup = (html: string, notes: InlineNote[]) => {
-	let referenceIndex = 0;
-	const withReferences = replaceHtmlOutsideCode(html, (value) => value.replace(/\{note-ref\}/g, () => {
-		const note = notes[referenceIndex];
-		if (!note) return '{note-ref}';
-
-		referenceIndex += 1;
-		return [
-			'\u2060',
-			`<sup class="section-note-ref"><a id="${note.referenceId}" href="#${note.id}" aria-label="Note ${note.number}" aria-describedby="${note.id}">${note.number}</a></sup>`,
-			`<span class="section-note section-note-margin" id="${note.id}" aria-label="Note ${note.number}" role="note">`,
-			`<a class="section-note-number" href="#${note.referenceId}" aria-label="Note ${note.number}">${note.number}</a>`,
-			`<span class="section-note-content">${note.html ?? ''}</span>`,
-			'</span>',
-		].join('');
-	}));
-
-	return withReferences.replace(noteDeclarationParagraphRegex, '');
-};
-
 const applyH3HeadingIds = (
 	html: string,
 	headings: Array<{ id: string | null }>,
@@ -150,27 +113,6 @@ const applyH3HeadingIds = (
 
 const getImageSourceKey = (page: SitePage, image: string) => `pages/${page.pageDirectory}/images/${image}`;
 
-const renderInlineNoteMarkdown = async (markdown: string) => {
-	const result = await markdownToHtml(markdown, {
-		features: {
-			gfm: true,
-			smartPunctuation: true,
-		},
-	});
-
-	if (/<img\b/i.test(result.html)) {
-		throw new Error('Inline notes cannot contain images. Use a Norna image block with a caption instead.');
-	}
-
-	const inlineHtml = result.html.trim();
-	const paragraph = inlineHtml.match(/^<p>([\s\S]*)<\/p>$/i);
-	if (!paragraph) {
-		throw new Error('Inline notes support inline Markdown only. Move headings, lists, and separate paragraphs into the page content.');
-	}
-
-	return paragraph[1] ?? '';
-};
-
 const renderHeadingTitleHtml = async (headingSource: string) => {
 	const headingMarkdown = headingSource
 		.replace(/^#{1,6}[ \t]+/, '')
@@ -208,14 +150,8 @@ const resolveContentBlocks = async (
 	blocks: ParsedNornaBlock[],
 	page: SitePage,
 	childPages: SitePage[],
-	inlineNotes: InlineNote[] = [],
 ) => {
-	const renderedNotes = await Promise.all(inlineNotes.map(async (note) => ({
-		...note,
-		html: await renderInlineNoteMarkdown(note.markdown),
-	})));
-	const renderedHtml = applyInlineNoteMarkup(html, renderedNotes);
-	const splitBlocks = splitNornaRenderedBlocks(renderedHtml, blocks) as Array<
+	const splitBlocks = splitNornaRenderedBlocks(html, blocks) as Array<
 		{ type: 'html'; html: string } | ParsedNornaBlock
 	>;
 	const resolvedBlocks: SectionContentBlock[] = [];
@@ -273,6 +209,10 @@ export const getSectionsContent = async (
 	childPages: SitePage[] = [],
 ) => {
 	const pageDocument = page.markdownDocument;
+	const noteError = pageDocument.noteDiagnostics.find((issue) => issue.severity === 'error');
+	if (noteError) throw new Error(noteError.message);
+	const tabError = pageDocument.diagnostics.find((issue) => issue.code === 'invalid-content-tabs');
+	if (tabError) throw new Error(tabError.message);
 	const sourceLabel = page.contentLabel;
 	const headingIdentifierIssues = pageDocument.headingIssues;
 	if (headingIdentifierIssues.length > 0) {
@@ -280,7 +220,6 @@ export const getSectionsContent = async (
 	}
 	const sections: ResolvedSection[] = [];
 	const sectionIds = new Set<string>();
-	let nextNoteNumber = 1;
 	const pageHeadingCount = pageDocument.pageHeadings.length;
 
 	if (pageHeadingCount !== 1 || pageDocument.regions[0]?.kind !== 'page-intro') {
@@ -310,29 +249,20 @@ export const getSectionsContent = async (
 		if (bodySection.noteErrors.length > 0) {
 			throw new Error(bodySection.noteErrors[0].message);
 		}
-		if (bodySection.calloutErrors.length > 0) {
-			throw new Error(bodySection.calloutErrors[0].message);
+		const calloutErrors = bodySection.calloutErrors.filter((error) => error.severity !== 'warning');
+		if (calloutErrors.length > 0) {
+			throw new Error(calloutErrors[0].message);
 		}
 
-		const inlineNotes = bodySection.notes.map((note) => {
-			const number = nextNoteNumber;
-			nextNoteNumber += 1;
-			const pageKey = page.pageId || 'home';
-			const noteKey = `${pageKey}-${id ?? 'page-title'}-${number}`;
-			return {
-				...note,
-				number,
-				id: `note-${noteKey}`,
-				referenceId: `note-ref-${noteKey}`,
-			};
-		});
-
 		sections.push({
 			id,
 			title,
 			titleHtml: await renderHeadingTitleHtml(bodySection.heading.source),
 			headingLevel,
-			contentBlocks: await resolveContentBlocks(content, bodySection.blocks, page, childPages, inlineNotes),
+			contentBlocks: groupRenderedTabs(
+				await resolveContentBlocks(content, bodySection.blocks, page, childPages),
+				bodySection.tabGroups,
+			),
 		});
 	}
 

package/src/lib/siteNavigation.ts

@@ -3,7 +3,6 @@ import type { SiteNode, SitePage } from './sitePages';
 import {
 	flattenSiteNavigationTree as flattenSiteNavigationTreeShared,
 	getDirectChildPages as getDirectChildPagesShared,
-	getFirstPageInNavigationNode as getFirstPageInNavigationNodeShared,
 	getListedSiteNavigationTree as getListedSiteNavigationTreeShared,
 	getSequentialPageNavigation as getSequentialPageNavigationShared,
 } from '../../scripts/lib/site-navigation-tree.mjs';
@@ -22,10 +21,6 @@ export const getListedSiteNavigationTree = (entries: SiteNavigationEntry[]) => (
 	getListedSiteNavigationTreeShared(entries) as SiteNavigationNode[]
 );
 
-export const getFirstPageInNavigationNode = (node: SiteNavigationNode): SitePage | null => (
-	getFirstPageInNavigationNodeShared(node) as SitePage | null
-);
-
 export const flattenSiteNavigationTree = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => (
 	flattenSiteNavigationTreeShared(nodes) as SiteNavigationNode[]
 );

package/src/lib/sitePages.ts

@@ -4,6 +4,7 @@ import { decodePageDirectoryPath, parsePageDirectoryPath } from '../../scripts/l
 import { parsePageMarkdown } from '../../scripts/lib/page-markdown.mjs';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
 import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
+import { assertCategoryDestinationModel, createCategoryDestinationModel } from '../../scripts/lib/category-destinations.mjs';
 import { getSiteStructure } from '../../scripts/lib/site-structure.mjs';
 import { sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
 
@@ -20,6 +21,7 @@ type SiteNodeBase = {
 	depth: number;
 	pageDirectories: string[];
 	pathSegment: string;
+	pathname: string;
 	pageDirectory: string;
 	pageId: string;
 	pageIds: string[];
@@ -41,6 +43,7 @@ export type SitePage = SiteNodeBase & {
 
 export type SiteCategory = SiteNodeBase & {
 	kind: 'category';
+	categorySourceLabel: string;
 };
 
 export type SiteNode = SitePage | SiteCategory;
@@ -88,8 +91,13 @@ const readPageMarkdownDocument = async (entry: SiteEntry) => {
 	const pageDirectory = getPageDirectory(entry);
 	const contentLabel = `${sitePagesLabel}/${pageDirectory}/content.md`;
 	const contentPath = path.join(sitePagesDir, pageDirectory, 'content.md');
-	const { body } = await readSiteFile(contentPath, contentLabel);
-	const markdownDocument = await parsePageMarkdown(body, { label: contentLabel });
+	const { body, frontmatter } = await readSiteFile(contentPath, contentLabel);
+	const markdownDocument = await parsePageMarkdown(body, {
+		label: contentLabel,
+		lineOffset: frontmatter.split('\n').length - 1,
+	});
+	const detailsError = markdownDocument.diagnostics.find((issue) => issue.code === 'heading-inside-details');
+	if (detailsError) throw new Error(`${detailsError.message} ${detailsError.fix}`);
 
 	if (markdownDocument.pageHeadings.length !== 1 || markdownDocument.regions[0]?.kind !== 'page-intro') {
 		throw new Error(`Page entry "${entry.id}" must contain exactly one Markdown H1 page title.`);
@@ -145,6 +153,8 @@ const createSiteCategory = (category: Awaited<ReturnType<typeof getSiteStructure
 		order: category.pageOrder,
 	},
 	pathSegment: category.pagePath,
+	pathname: getPagePathname(category.pagePath),
+	categorySourceLabel: category.categorySourceLabel,
 	pageDirectory: category.pageDirectory,
 	pageDirectories: category.pageDirectories,
 	pageId: category.pageId,
@@ -226,6 +236,7 @@ export const getSiteModel = async (entries: SiteEntry[]) => {
 	}
 
 	return {
+		categoryDestinations: assertCategoryDestinationModel(createCategoryDestinationModel(nodes)),
 		categories: nodes.filter((node): node is SiteCategory => node.kind === 'category'),
 		nodes,
 		pages,