@janga/norna 0.7.27 → 0.7.29

package/src/components/SectionNavigationScript.astro

@@ -66,17 +66,6 @@
 		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
 	};
 
-	const alignInitialHashTarget = () => {
-		if (!window.location.hash) return;
-
-		try {
-			const target = document.getElementById(decodeURIComponent(window.location.hash.slice(1)));
-			target?.scrollIntoView({ block: 'start' });
-		} catch {
-			// Invalid URL encoding is left to the browser's native hash handling.
-		}
-	};
-
 	const getSamePageTarget = (link: HTMLAnchorElement) => {
 		const linkUrl = new URL(link.href, window.location.href);
 		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return undefined;
@@ -158,35 +147,118 @@
 		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
 	};
 
+	const positionTopPageMenu = (menu: HTMLDetailsElement) => {
+		const panel = menu.querySelector<HTMLElement>('.top-page-panel');
+		if (!panel) return;
+		panel.style.removeProperty('--top-page-panel-shift');
+		const rectangle = panel.getBoundingClientRect();
+		let shift = Math.max(0, 16 - rectangle.left)
+			- Math.max(0, rectangle.right - document.documentElement.clientWidth + 16);
+		if (menu.hasAttribute('data-area-menu')) {
+			const trigger = menu.querySelector('summary')!.getBoundingClientRect();
+			const row = menu.closest('.site-nav-row')?.getBoundingClientRect();
+			const rightEdge = Math.min(row?.right ?? Infinity, document.documentElement.clientWidth - 16);
+			const left = Math.max(16, Math.min(trigger.left, rightEdge - rectangle.width));
+			shift = left - rectangle.left;
+		}
+		panel.style.setProperty('--top-page-panel-shift', `${shift}px`);
+	};
+
+	const closeTopPageMenu = new Map<HTMLDetailsElement, () => void>();
 	topPageMenus.forEach((menu) => {
+		let openTimer: number | undefined;
+		let closeTimer: number | undefined;
+		const clearTimers = () => {
+			window.clearTimeout(openTimer);
+			window.clearTimeout(closeTimer);
+		};
+		const close = () => {
+			clearTimers();
+			menu.open = false;
+		};
+		closeTopPageMenu.set(menu, close);
 		menu.addEventListener('toggle', () => {
 			if (!menu.open) return;
-			topPageMenus.forEach((other) => { if (other !== menu) other.open = false; });
-			const panel = menu.querySelector<HTMLElement>('.top-page-panel');
-			if (!panel) return;
-			panel.style.removeProperty('--top-page-panel-shift');
-			const rectangle = panel.getBoundingClientRect();
-			const shift = Math.max(0, 16 - rectangle.left)
-				- Math.max(0, rectangle.right - document.documentElement.clientWidth + 16);
-			panel.style.setProperty('--top-page-panel-shift', `${shift}px`);
+			topPageMenus.forEach((other) => { if (other !== menu) closeTopPageMenu.get(other)?.(); });
+			positionTopPageMenu(menu);
 		});
 		menu.addEventListener('keydown', (event) => {
 			if (event.key !== 'Escape' || !menu.open) return;
 			event.preventDefault();
-			menu.open = false;
+			close();
 			menu.querySelector('summary')?.focus();
 		});
 		menu.addEventListener('focusout', (event) => {
-			if (event.relatedTarget instanceof Node && !menu.contains(event.relatedTarget)) menu.open = false;
+			if (event.relatedTarget instanceof Node && !menu.contains(event.relatedTarget)) close();
 		});
 		menu.querySelectorAll('a').forEach((link) => {
-			link.addEventListener('click', () => { menu.open = false; });
+			link.addEventListener('click', close);
 		});
+		if (menu.hasAttribute('data-area-switcher')) {
+			menu.addEventListener('keydown', (event) => {
+				if (event.key !== 'ArrowDown' || event.target !== menu.querySelector('summary')) return;
+				event.preventDefault();
+				menu.open = true;
+				menu.querySelector('a')?.focus();
+			});
+		}
+		if (menu.hasAttribute('data-area-menu')) {
+			const canHover = window.matchMedia('(any-hover: hover)');
+			const hoverRegion = menu.closest<HTMLElement>('.site-nav-row') ?? menu;
+			const isHoverPointer = (event: PointerEvent) => event.pointerType !== 'touch' && canHover.matches;
+			menu.addEventListener('pointerenter', (event) => {
+				if (!isHoverPointer(event)) return;
+				clearTimers();
+				openTimer = window.setTimeout(() => { menu.open = true; }, 120);
+			});
+			menu.addEventListener('pointerleave', (event) => {
+				if (isHoverPointer(event)) window.clearTimeout(openTimer);
+			});
+			// The row and its descendant panel form one continuous hover region.
+			// Crossing or pausing in its padding must not start a closing timer.
+			// Other titles remain real hit targets; no invisible overlay is needed.
+			hoverRegion.addEventListener('pointerenter', (event) => {
+				if (isHoverPointer(event)) window.clearTimeout(closeTimer);
+			});
+			hoverRegion.addEventListener('pointerleave', (event) => {
+				if (!isHoverPointer(event)) return;
+				clearTimers();
+				closeTimer = window.setTimeout(() => {
+					const focus = document.activeElement;
+					if (focus instanceof Element && menu.contains(focus) && focus.matches(':focus-visible')) return;
+					close();
+				}, 180);
+			});
+			menu.querySelector('summary')?.addEventListener('click', (event) => {
+				// Mouse users open on hover; a click must not immediately fold it
+				// away. Native activation remains available for touch and keyboard.
+				if (event.detail === 0 || event.pointerType === 'touch' || !canHover.matches) return;
+				event.preventDefault();
+				clearTimers();
+				menu.open = true;
+			});
+			menu.addEventListener('keydown', (event) => {
+				if (event.key !== 'ArrowDown' || event.target !== menu.querySelector('summary')) return;
+				event.preventDefault();
+				clearTimers();
+				menu.open = true;
+				menu.querySelector('a')?.focus();
+			});
+		}
 	});
 	if (topPageMenus.length > 0) {
+		// Hover does not move focus into the panel, so Escape must also work
+		// while focus remains in the article or elsewhere on the page.
+		document.addEventListener('keydown', (event) => {
+			if (event.key !== 'Escape') return;
+			topPageMenus.filter((menu) => menu.hasAttribute('data-area-menu') || menu.hasAttribute('data-area-switcher')).forEach((menu) => {
+				if (menu.open) event.preventDefault();
+				closeTopPageMenu.get(menu)?.();
+			});
+		});
 		document.addEventListener('pointerdown', (event) => {
 			topPageMenus.forEach((menu) => {
-				if (event.target instanceof Node && !menu.contains(event.target)) menu.open = false;
+				if (event.target instanceof Node && !menu.contains(event.target)) closeTopPageMenu.get(menu)?.();
 			});
 		});
 	}
@@ -309,12 +381,20 @@
 	}
 
 	setAnchorOffset();
-	if (window.location.hash) window.requestAnimationFrame(alignInitialHashTarget);
 
 	if (siteTop && 'ResizeObserver' in window) {
-		new ResizeObserver(() => {
+		const navigationResizeObserver = new ResizeObserver(() => {
 			setAnchorOffset();
 			scheduleReadingPositionUpdate();
-		}).observe(siteTop);
+			topPageMenus.filter((menu) => menu.open).forEach((menu) => {
+				if (!menu.getClientRects().length) closeTopPageMenu.get(menu)?.();
+				else positionTopPageMenu(menu);
+			});
+		});
+		navigationResizeObserver.observe(siteTop);
+		if (topPageMenus.some((menu) => menu.hasAttribute('data-area-menu') || menu.hasAttribute('data-area-switcher'))) {
+			const row = siteTop.querySelector('.site-nav-row');
+			if (row) navigationResizeObserver.observe(row);
+		}
 	}
 </script>

package/src/components/SiteNavigation.astro

@@ -1,18 +1,24 @@
 ---
+import NavigationState from './NavigationState.astro';
 import { Menu, Search, X } from '@lucide/astro';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
 import {
 	getListedSiteNavigationTree,
+	getNavigationDestination,
+	type CategoryDestinationMap,
 	type SiteNavigationEntry,
-	type SiteNavigationNode,
 } from '../lib/siteNavigation';
 import type { SiteNode } from '../lib/sitePages';
 import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
 import TopPageMenu from './TopPageMenu.astro';
+import AreaNavigationMenu from './AreaNavigationMenu.astro';
+import AreaNavigationSwitcher from './AreaNavigationSwitcher.astro';
+import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
+import { hasLargeAreaMenu, withH2Outlines } from '../lib/areaNavigation';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 import SearchNavigationScript from './SearchNavigationScript.astro';
 
@@ -29,6 +35,7 @@ interface Props {
 	};
 	currentPage?: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
+	categoryDestinations?: CategoryDestinationMap;
 	navigationMode: 'sections' | 'top' | 'tree';
 	showTopNavigationSubmenus: boolean;
 	hasNavigationRailFrame: boolean;
@@ -46,18 +53,21 @@ interface Props {
 		};
 	};
 	searchPage?: boolean;
+	areaReadingFrame?: boolean;
 }
 
 const {
 	logo,
 	currentPage,
 	navigationEntries,
+	categoryDestinations,
 	navigationMode,
 	showTopNavigationSubmenus,
 	hasNavigationRailFrame,
 	frameColors,
 	readerPreferences,
 	searchPage = false,
+	areaReadingFrame = false,
 } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
@@ -68,12 +78,7 @@ const navigationStyle = [
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
 const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
-const mobileNavigationTree = navigationMode === 'top'
-	? getListedSiteNavigationTree(navigationEntries.map((entry) => ({
-		...entry,
-		headings: entry.headings.filter((heading) => heading.depth === 2),
-	})))
-	: siteNavigationTree;
+const mobileNavigationTree = withH2Outlines(siteNavigationTree);
 const topLevelNavigation = siteNavigationTree;
 const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
 const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
@@ -88,7 +93,6 @@ const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
 	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
 ));
 const pageHref = (page: SiteNode) => withBasePath(projectConfig.site.basePath, page.pathname);
-const getNavigationPage = (node: SiteNavigationNode) => node.node;
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
 const showSinglePageTopLink = !showSiteNavigation;
 const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
@@ -131,35 +135,41 @@ const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu
 >
 	{showNavigationRow && (
 		<div class:list={['site-nav-row', { 'site-nav-row-mobile-only': !showDesktopNavigationRow }]}>
-			{logo && (
+			{(logo || areaReadingFrame) && (
 				<div class="site-nav-leading">
-					<a class="site-brand" href={pageHref(homePage)}>
-						<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
+					<a class="site-brand" href={pageHref(homePage)} aria-label={projectConfig.locale.labels.returnHome} title={projectConfig.locale.labels.returnHome}>
+						{logo ? <img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} /> : homePage.title}
 					</a>
 				</div>
 			)}
 
 			<div class="site-nav-actions">
-				{showSiteNavigation && (
+				{showSiteNavigation && !areaReadingFrame && (
 					<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 					<ul>
 					{topLevelNavigation.map((navigationNode) => {
-						const destination = getNavigationPage(navigationNode);
+						const destination = getNavigationDestination(navigationNode.node, categoryDestinations);
 						if (!destination) return null;
 						const nodeIsCurrentPage = isCurrentPage(navigationNode.node);
+						const useAreaMenu = navigationMode === 'tree';
 						return (
 							<li class:list={['site-nav-item', {
-								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
+								'site-nav-item-current-branch': (!nodeIsCurrentPage || useAreaMenu) && isCurrentBranch(navigationNode.node),
 							}]}>
-								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
+								{useAreaMenu && navigationNode.children.length > 0 && !hasLargeAreaMenu(navigationNode) ? <AreaNavigationMenu
+									node={navigationNode}
+									currentPage={currentPage}
+									categoryDestinations={categoryDestinations}
+								/> : <a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
 									{navigationNode.node.title}
-								</a>
-								<TopPageMenu
+								</a>}
+								{!useAreaMenu && <TopPageMenu
 									node={navigationNode}
 									currentPage={currentPage}
+									categoryDestinations={categoryDestinations}
 									showSections={navigationMode === 'top'}
 									showChildren={showTopNavigationSubmenus}
-								/>
+								/>}
 							</li>
 						);
 					})}
@@ -211,9 +221,10 @@ const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu
 								</div>
 								<div
 									class="mobile-site-nav"
-									data-navigation-root={pageHref(homePage)}
-									data-navigation-state-root={pageHref(homePage)}
+									data-navigation-root={`area:${pageHref(homePage)}`}
+									data-navigation-state-root={`area:${pageHref(homePage)}`}
 								>
+									<NavigationState scope="mobile" />
 									{showSiteNavigation && (
 										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.siteNavigation}>
 											<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
@@ -224,6 +235,7 @@ const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu
 											<NavigationPageTree
 												nodes={mobileNavigationTree}
 												currentPage={currentPage}
+												categoryDestinations={categoryDestinations}
 												variant="mobile"
 												integratePageSections={navigationMode === 'tree' || navigationMode === 'top'}
 											/>
@@ -260,6 +272,19 @@ const needsNavigationScript = showMobileNavigation || hasCurrentPageSectionMenu
 						</details>
 					)}
 			</div>
+			{areaReadingFrame && (
+				<div class="site-reading-location">
+					<AreaNavigationSwitcher
+						nodes={siteNavigationTree}
+						currentPage={currentPage}
+						categoryDestinations={categoryDestinations}
+						label={searchPage ? projectConfig.locale.labels.search : undefined}
+					/>
+					{currentPage
+						? <SiteBreadcrumbs currentPage={currentPage} nodes={navigationEntries.map(({ node }) => node)} />
+						: <span class="site-reading-location-label">{projectConfig.locale.labels.search}</span>}
+				</div>
+			)}
 		</div>
 	)}
 

package/src/components/SitePage.astro

@@ -9,7 +9,6 @@ import ImageStackEnhancement from './ImageStackEnhancement.astro';
 import SiteBreadcrumbs from './SiteBreadcrumbs.astro';
 import SiteNavigation from './SiteNavigation.astro';
 import SiteBanners from './SiteBanners.astro';
-import PageContentsNavigation from './PageContentsNavigation.astro';
 import PageSequenceNavigation from './PageSequenceNavigation.astro';
 import SiteSection from './SiteSection.astro';
 import SiteTreeNavigation from './SiteTreeNavigation.astro';
@@ -22,47 +21,37 @@ import {
 	flattenSiteNavigationTree,
 	getDirectChildPages,
 	getListedSiteNavigationTree,
+	getNavigationDestination,
 	getSequentialPageNavigation,
 } from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
 import {
 	resolveNavigationModel,
-	resolvePageContentsPlacement,
 } from '../../scripts/lib/navigation-model.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
 import { resolveEditSourceTarget } from '../../scripts/lib/edit-source-link.mjs';
 import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
-import { mergePageThemeConfig } from '../../scripts/lib/theme-presets.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
 interface Props {
 	entry?: SiteEntry;
-	categoryPath?: string;
 }
 
-const { entry, categoryPath } = Astro.props;
+const { entry } = Astro.props;
 const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
 const siteModel = await getSiteModel(await getCollection('site'));
+const categoryDestinations = siteModel.categoryDestinations.byPathname;
 const { nodes: siteNodes, pages: sitePages } = siteModel;
-const categoryDestination = categoryPath ? siteModel.categoryDestinations.byPathname.get(categoryPath) : null;
-const currentPage = categoryDestination?.category
-	?? sitePages.find((page) => page.entry.id === entry?.id);
-if (!currentPage) throw new Error(`Page entry "${entry?.id ?? categoryPath}" is missing from the site page model.`);
-const [siteTheme] = await getCollection('theme');
-if (!siteTheme) {
-	throw new Error('site/theme.yaml is required. Add a root theme before building the site.');
-}
+const currentPage = sitePages.find((page) => page.entry.id === entry?.id);
+if (!currentPage) throw new Error(`Page entry "${entry?.id}" is missing from the site page model.`);
 const [sitewide] = await getCollection('sitewide');
 const sitewideData = sitewide?.data ?? {};
 const homePage = sitePages.find((page) => page.isHome) ?? currentPage;
-const siteThemeData = siteTheme.data;
 const pageTheme = await getPageTheme(currentPage.pageDirectory);
-const themeData = mergePageThemeConfig(siteThemeData, pageTheme?.data);
-const themeLabel = pageTheme
-	? `${siteDirectory || 'site'}/${pageTheme.id}`
-	: `${siteDirectory || 'site'}/${siteTheme.id}`;
+const themeData = pageTheme.data;
+const themeLabel = pageTheme.id;
 const visualTheme = resolveThemeVisualConfig(themeData, themeLabel);
 const logoAsset = getLogoAsset();
 const logoSettings = sitewideData.logo;
@@ -99,20 +88,20 @@ const renderedNavigationEntries = flattenSiteNavigationTree(listedNavigationTree
 const pageSequence = getSequentialPageNavigation(listedNavigationTree, currentPage.pagePath);
 const childPages = getDirectChildPages(listedNavigationTree, currentPage.pagePath);
 const siteHtml = entry?.rendered?.html ?? '';
-const resolvedSections: ResolvedSection[] = categoryDestination ? [{
-	id: null,
-	title: currentPage.title,
-	titleHtml: currentPage.title.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;'),
-	headingLevel: 1,
-	contentBlocks: [{
-		type: 'page-list',
-		pages: categoryDestination.children.map((node) => ({
-			title: node.title,
-			pathname: node.pathname,
-			description: node.kind === 'page' ? node.entry.data.page?.description : undefined,
-		})),
-	}],
-}] : await getSectionsContent(siteHtml, currentPage, childPages);
+const resolvedSections: ResolvedSection[] = await getSectionsContent(siteHtml, currentPage, childPages);
+if (currentPage.kind === 'page' && currentPage.entry.data.page?.listChildren) {
+	const lastSection = resolvedSections.at(-1);
+	if (lastSection && childPages.length > 0) {
+		lastSection.contentBlocks.push({
+			type: 'page-list',
+			pages: childPages.map((child) => ({
+				title: child.title,
+				pathname: child.pathname,
+				description: child.entry.data.page?.description,
+			})),
+		});
+	}
+}
 const allContentBlocks = resolvedSections.flatMap((section) => flattenContentBlocks(section.contentBlocks));
 const hasTabs = allContentBlocks.some((block) => block.type === 'tabs');
 const hasNotes = allContentBlocks.some((block) => (
@@ -126,6 +115,7 @@ const hasTables = allContentBlocks.some((block) => (
 ));
 const hasImageStack = allContentBlocks.some((block) => (
 	block.type === 'image-stack'
+	|| (block.type === 'html' && block.html.includes('data-norna-managed-image='))
 ));
 const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
@@ -167,33 +157,21 @@ const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
 	navigationMode: navigationModel.mode,
 });
 const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
-const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
+const frameColors = resolveFrameColors({ theme: themeData, sourceLabel: themeLabel });
 const hasTreeNavigation = navigationModel.mode === 'tree';
-const showTreeNavigation = hasTreeNavigation && !currentPage.isHome;
+// Keep one reading frame across tree-mode pages, including pages with no H2.
+// Home remains the site's entry point with the global navigation row.
+const areaReadingFrame = hasTreeNavigation && !currentPage.isHome;
 const currentPageNavigation = siteNavigation.find(({ node }) => (
 	node.kind === 'page' && node.pathname === currentPage.pathname
 ));
 const pageContentsHeadings = currentPageNavigation?.headings.filter(({ depth }) => depth === 2 || depth === 3) ?? [];
-const pageContentsPlacement = resolvePageContentsPlacement({
-	navigationMode: navigationModel.mode,
-	nodes: renderedNavigationEntries.map(({ node }) => ({
-		depth: Math.max(1, node.depth),
-		isHome: node.isHome,
-		listed: node.navigation.listed,
-		pagePath: node.pagePath,
-	})),
-	currentPage: {
-		isHome: currentPage.isHome,
-		pagePath: currentPage.pagePath,
-	},
-	headingCount: pageContentsHeadings.length,
-});
-const hasContentsNavigation = pageContentsPlacement.placement !== 'none';
-const hasTrackedSectionNavigation = hasContentsNavigation
-	|| (hasTreeNavigation && currentPage.isHome && pageContentsHeadings.length >= 2);
+const showTreeNavigation = hasTreeNavigation && !currentPage.isHome;
+const hasContentsNavigation = showTreeNavigation && pageContentsHeadings.some(({ depth }) => depth === 2);
+const hasTrackedSectionNavigation = hasTreeNavigation && pageContentsHeadings.some(({ depth }) => depth === 2);
 const integratePageContentsInTree = hasTreeNavigation;
-const showContentsRail = pageContentsPlacement.placement === 'contents-rail';
-const hasNavigationRailFrame = !currentPage.isHome && (
+// Home's global row and the reading layout share the site's wide coordinates.
+const hasNavigationRailFrame = (
 	navigationModel.requestedMode === 'tree'
 	|| (
 		navigationModel.requestedMode === 'automatic'
@@ -215,30 +193,35 @@ const reserveBreadcrumbSpace = showTreeNavigation || showBreadcrumbs;
 	footer={sitewideData.footer}
 	contentsNavigation={hasTrackedSectionNavigation}
 	searchable
+	areaNavigation={hasTreeNavigation}
+	areaReadingFrame={areaReadingFrame}
 >
 	<SiteNavigation
 		logo={logo}
 		currentPage={currentPage}
 		navigationEntries={siteNavigation}
+		categoryDestinations={categoryDestinations}
 		navigationMode={navigationModel.mode}
 		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
 		hasNavigationRailFrame={hasNavigationRailFrame}
 		frameColors={frameColors}
 		readerPreferences={pagePresentation.readerPreferences}
+		areaReadingFrame={areaReadingFrame}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
 	<div class:list={['site-page-layout', {
 		'site-page-layout-tree': showTreeNavigation,
-		'site-page-layout-contents': showContentsRail,
 	}]}
-		data-page-contents-placement={hasContentsNavigation ? pageContentsPlacement.placement : undefined}
+		data-page-contents-placement={hasContentsNavigation ? 'page-tree' : undefined}
 	>
 		{showTreeNavigation && (
 			<SiteTreeNavigation
 				currentPage={currentPage}
 				navigationEntries={siteNavigation}
+				categoryDestinations={categoryDestinations}
 				integratePageSections={integratePageContentsInTree}
+				areaReadingFrame={areaReadingFrame}
 			/>
 		)}
 		<main
@@ -273,12 +256,6 @@ const reserveBreadcrumbSpace = showTreeNavigation || showBreadcrumbs;
 			)}
 			<PageSequenceNavigation previous={pageSequence.previous} next={pageSequence.next} />
 		</main>
-		{showContentsRail && (
-			<PageContentsNavigation
-				headings={pageContentsHeadings}
-				pageTitle={currentPage.title}
-			/>
-		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
 	{hasCodeBlocks && <CodeBlockCopyScript />}

package/src/components/SiteSection.astro

@@ -109,6 +109,7 @@ const bodyWidth = {
 };
 const hasMedia = flattenContentBlocks(section.contentBlocks).some((block) => (
 	block.type === 'image-stack'
+	|| (block.type === 'html' && block.html.includes('data-norna-managed-image='))
 	|| block.type === 'image-carousel'
 	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
 ));

package/src/components/SiteTreeNavigation.astro

@@ -1,45 +1,65 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
+import { getListedSiteNavigationTree, getNavigationDestination, type CategoryDestinationMap, type SiteNavigationEntry } from '../lib/siteNavigation';
+import { resolveAreaNavigation, withH2Outlines } from '../lib/areaNavigation';
 import type { SiteNode } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
 import NavigationTreeControls from './NavigationTreeControls.astro';
+import NavigationState from './NavigationState.astro';
+import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	currentPage: SiteNode;
 	navigationEntries: SiteNavigationEntry[];
+	categoryDestinations?: CategoryDestinationMap;
 	integratePageSections?: boolean;
+	areaReadingFrame?: boolean;
 }
 
-const { currentPage, navigationEntries, integratePageSections = false } = Astro.props;
-const roots = getListedSiteNavigationTree(navigationEntries);
-const activeRoot = roots.find((node) => (
-	currentPage.pageDirectory === node.node.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${node.node.pageDirectory}/pages/`)
-));
-const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}/` : '/';
+const { currentPage, navigationEntries, categoryDestinations, integratePageSections = false, areaReadingFrame = false } = Astro.props;
+const roots = withH2Outlines(getListedSiteNavigationTree(navigationEntries));
+const area = resolveAreaNavigation(roots, currentPage);
+const activeRoot = area.localRoot;
+const ownOutline = !activeRoot
+	? navigationEntries.find(({ node }) => node.pagePath === currentPage.pagePath)?.headings.filter(({ depth }) => depth === 2) ?? []
+	: [];
+const navigationPage = activeRoot?.node ?? currentPage;
+const navigationRoot = navigationPage.pagePath ? `/${navigationPage.pagePath}/` : '/';
 const navigationStateRoot = withBasePath(projectConfig.site.basePath, '/');
+const showAreaTitle = activeRoot?.node.kind === 'category';
+const showReadingAreaTitle = areaReadingFrame
+	&& navigationPage.pagePath !== area?.globalRoot?.node.pagePath;
+const localNodes = activeRoot ? (showAreaTitle ? activeRoot.children : [activeRoot]) : [];
+// Retain the reviewed state namespace so existing sessions keep their position.
 ---
 
-{activeRoot && (
+{(activeRoot || ownOutline.length > 0) && (
 	<aside
 		id="tree-local-navigation"
 		class="tree-local-navigation"
-		data-navigation-root={navigationRoot}
-		data-navigation-state-root={navigationStateRoot}
+		data-navigation-root={`area:${navigationRoot}`}
+		data-navigation-state-root={`area:${navigationStateRoot}`}
+		data-navigation-area={activeRoot?.node.pagePath}
+		data-navigation-outline={ownOutline.length > 0 ? currentPage.pagePath : undefined}
 	>
-		<NavigationTreeControls
+		<NavigationState scope="desktop" />
+		{showReadingAreaTitle && <p class="navigation-area-title">{navigationPage.title}</p>}
+		{!areaReadingFrame && (showAreaTitle || ownOutline.length > 0) && <a class="navigation-area-title" href={withBasePath(projectConfig.site.basePath,
+			getNavigationDestination(navigationPage, categoryDestinations).pathname)}>{navigationPage.title}</a>}
+		{activeRoot && <NavigationTreeControls
 			idPrefix="desktop-tree-navigation"
-			nodes={[activeRoot]}
-		/>
-		<nav aria-label={`${activeRoot.node.title}: ${projectConfig.locale.labels.siteNavigation}`}>
-			<NavigationPageTree
-				nodes={[activeRoot]}
+			nodes={localNodes}
+			forceVisible
+		/>}
+		<nav aria-label={`${navigationPage.title}: ${projectConfig.locale.labels.siteNavigation}`}>
+			{activeRoot ? <NavigationPageTree
+				nodes={localNodes}
 				currentPage={currentPage}
+				categoryDestinations={categoryDestinations}
 				variant="sidebar"
 				integratePageSections={integratePageSections}
-			/>
+			/> : <PageContentsLinks headings={ownOutline} variant="desktop" />}
 		</nav>
 	</aside>
 )}

package/src/components/TopPageMenu.astro

@@ -2,17 +2,18 @@
 import { ChevronDown } from '@lucide/astro';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { SiteNavigationNode } from '../lib/siteNavigation';
+import type { CategoryDestinationMap, SiteNavigationNode } from '../lib/siteNavigation';
 import type { SiteNode } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
 
 interface Props {
 	node: SiteNavigationNode;
 	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
 	showSections: boolean;
 	showChildren: boolean;
 }
-const { node, currentPage, showSections, showChildren } = Astro.props;
+const { node, currentPage, categoryDestinations, showSections, showChildren } = Astro.props;
 const sections = showSections ? node.sections : [];
 const children = showChildren ? node.children : [];
 const pageHref = node.node.kind === 'page'
@@ -39,7 +40,7 @@ const label = `${projectConfig.locale.labels.navigationMenu}: ${node.node.title}
 			{children.length > 0 && (
 				<nav class="top-page-children" aria-label={`${projectConfig.locale.labels.navigationChildren}: ${node.node.title}`}>
 					{sections.length > 0 && <p>{projectConfig.locale.labels.navigationChildren}</p>}
-					<NavigationPageTree nodes={children} currentPage={currentPage} variant="submenu" />
+					<NavigationPageTree nodes={children} currentPage={currentPage} categoryDestinations={categoryDestinations} variant="submenu" />
 				</nav>
 			)}
 		</div>