@janga/norna 0.7.27 → 0.7.28

package/scripts/sync-content-sections.mjs

@@ -233,7 +233,6 @@ try {
 const siteStructure = await getSiteStructure();
 const contentFiles = siteStructure.contentFiles;
 for (const warning of siteStructure.warnings) {
-	if (warning.code === 'empty-category') continue;
 	addIssue({
 		severity: 'warning',
 		message: warning.message,
@@ -424,17 +423,20 @@ const listedNavigationTree = getListedSiteNavigationTree(siteStructure.nodes.map
 	return {
 		node: {
 			...node,
-			navigation: {
-				listed: node.kind === 'category'
-					? true
-					: context?.frontmatterData.navigation?.listed ?? true,
-			},
+			navigation: { listed: context?.frontmatterData.navigation?.listed ?? true },
 		},
 	};
 }));
 
 for (const context of contentFileContexts) {
 	const childPages = getDirectChildPages(listedNavigationTree, context.contentFile.pagePath);
+	if (context.frontmatterData.page?.listChildren && childPages.length === 0) {
+		addContentIssue(context.contentFile, {
+			severity: 'warning',
+			message: 'page.listChildren has no listed direct child pages to display.',
+			fix: 'Add a listed direct child page, or remove page.listChildren while this page has no children.',
+		});
+	}
 	const warnedChildren = new Set();
 
 	for (const section of context.sections) {
@@ -444,7 +446,7 @@ for (const context of contentFileContexts) {
 			if (childPages.length === 0) {
 				addSectionIssue(context.contentFile, section, {
 					severity: 'error',
-					message: `page-list on line ${block.line} has no listed direct child pages to display. Navigation categories are not pages.`,
+					message: `page-list on line ${block.line} has no listed direct child pages to display.`,
 					fix: 'Add a listed direct child page or remove the block.',
 				});
 				continue;

package/scripts/sync-site-public.mjs

@@ -33,7 +33,7 @@ const sourceEntries = await readDirectory(sitePublicDir);
 const generatedPublicFiles = [
 	{
 		filename: sitemapFilename,
-		explanation: `Norna generates ${sitemapFilename} from the public page tree and the URL in site/config.yaml.`,
+		explanation: `Norna generates ${sitemapFilename} from the public page tree and the URL in site/site-config/settings.yaml.`,
 	},
 	{
 		filename: '404.html',

package/scripts/upgrade-site.mjs

@@ -0,0 +1,17 @@
+import { siteDir } from './lib/site-paths.mjs';
+import { planSiteUpgrade } from './lib/site-upgrade.mjs';
+
+const usage = 'Usage: norna site:upgrade [--apply]\nCheck the root/ source layout. Former layouts require manual conversion; --apply is retained but does not convert old sources.';
+const args = process.argv.slice(2);
+try {
+	if (args.includes('--help') || args.includes('-h')) {
+		console.log(usage);
+	} else {
+		if (args.length > 1 || args.some((arg) => arg !== '--apply')) throw new Error(usage);
+		await planSiteUpgrade(siteDir);
+		console.log('The site already uses the current configuration and homepage layout. No files changed.');
+	}
+} catch (error) {
+	console.error(error.message);
+	process.exitCode = 1;
+}

package/src/components/AreaNavigationMenu.astro

@@ -0,0 +1,24 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import type { CategoryDestinationMap, SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode } from '../lib/sitePages';
+import AreaNavigationPanel from './AreaNavigationPanel.astro';
+
+interface Props {
+	node: SiteNavigationNode;
+	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
+}
+const { node, currentPage, categoryDestinations } = Astro.props;
+const label = `${projectConfig.locale.labels.navigationMenu}: ${node.node.title}`;
+const panelId = `area-menu-${encodeURIComponent(node.node.pagePath)}`;
+---
+
+{node.children.length > 0 && (
+	<details class="top-page-menu area-navigation-menu" data-area-menu={node.node.pagePath}>
+		<summary aria-label={label} aria-controls={panelId}>
+			<span class="top-page-menu-title">{node.node.title}</span>
+		</summary>
+		<AreaNavigationPanel id={panelId} node={node} currentPage={currentPage} categoryDestinations={categoryDestinations} />
+	</details>
+)}

package/src/components/AreaNavigationPanel.astro

@@ -0,0 +1,55 @@
+---
+import { Check } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
+import { getNavigationDestination, type CategoryDestinationMap, type SiteNavigationNode } from '../lib/siteNavigation';
+import { getAreaMenuGroups, resolveAreaNavigation } from '../lib/areaNavigation';
+import type { SiteNode } from '../lib/sitePages';
+
+interface Props {
+	id: string;
+	node?: SiteNavigationNode;
+	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
+	otherRoots?: SiteNavigationNode[];
+}
+const { id, node, currentPage, categoryDestinations, otherRoots = [] } = Astro.props;
+const { localRoot } = resolveAreaNavigation(node ? [node] : [], currentPage);
+const { branches, pages } = node ? getAreaMenuGroups(node) : { branches: [], pages: [] };
+const columnsFor = (count: number, maximum: number) => count === 0 ? 0 : Math.ceil(count / Math.ceil(count / maximum));
+const branchColumns = columnsFor(branches.length, pages.length > 0 ? 2 : 3);
+const pageColumns = branches.length === 0 ? columnsFor(pages.length, 3) : pages.length > 0 ? 1 : 0;
+const groups = [
+	{ kind: 'branches', choices: branches, columns: branchColumns },
+	{ kind: 'pages', choices: pages, columns: pageColumns },
+].filter(({ choices }) => choices.length > 0);
+---
+
+<nav id={id} class="top-page-panel area-navigation-panel"
+	style={`--area-menu-columns: ${branchColumns + pageColumns || 2}`}
+	aria-label={node ? `${node.node.title}: ${projectConfig.locale.labels.navigationChildren}` : projectConfig.locale.labels.siteNavigation}>
+	{groups.map((group) => <ul class="area-navigation-choices" data-area-choice-group={group.kind}
+		style={`--area-group-columns: ${group.columns}; --area-group-rows: ${Math.ceil(group.choices.length / group.columns)}`}>
+		{group.choices.map((child) => {
+			const destination = getNavigationDestination(child.node, categoryDestinations);
+			const selected = localRoot === child || currentPage?.pagePath === child.node.pagePath;
+			const description = child.node.kind === 'page'
+				? child.node.entry.data.page?.description
+				: child.node.description;
+			return <li>
+				<a href={withBasePath(projectConfig.site.basePath, destination.pathname)}
+					aria-current={selected ? 'true' : undefined} data-area-choice={child.node.pagePath}>
+					<span class="area-navigation-title">{child.node.title}{selected && <Check aria-hidden="true" />}</span>
+					{group.kind === 'branches' && description && <span class="area-navigation-description">{description}</span>}
+				</a>
+			</li>;
+		})}
+	</ul>)}
+	{otherRoots.length > 0 && <ul class="area-navigation-other-roots" aria-label={projectConfig.locale.labels.siteNavigation}>
+		{otherRoots.map(({ node: root }) => <li>
+			<a href={withBasePath(projectConfig.site.basePath, getNavigationDestination(root, categoryDestinations).pathname)}>
+				{root.isHome ? projectConfig.locale.labels.returnHome : root.title}
+			</a>
+		</li>)}
+	</ul>}
+</nav>

package/src/components/AreaNavigationSwitcher.astro

@@ -0,0 +1,30 @@
+---
+import { Menu } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { hasLargeAreaMenu, resolveAreaNavigation } from '../lib/areaNavigation';
+import type { CategoryDestinationMap, SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode } from '../lib/sitePages';
+import AreaNavigationPanel from './AreaNavigationPanel.astro';
+
+interface Props {
+	nodes: SiteNavigationNode[];
+	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
+	label?: string;
+}
+
+const { nodes, currentPage, categoryDestinations, label } = Astro.props;
+const { globalRoot } = resolveAreaNavigation(nodes, currentPage);
+const currentLabel = label ?? globalRoot?.node.title ?? projectConfig.locale.labels.navigationMenu;
+const menuRoot = globalRoot && globalRoot.children.length > 0 && !hasLargeAreaMenu(globalRoot) ? globalRoot : undefined;
+const otherRoots = nodes.filter((root) => root !== menuRoot);
+const menuLabel = `${projectConfig.locale.labels.navigationMenu}: ${currentLabel}`;
+---
+
+<details class="top-page-menu area-navigation-switcher" data-area-switcher>
+	<summary aria-label={menuLabel} title={menuLabel} aria-controls="area-switcher-panel">
+		<Menu aria-hidden="true" />
+	</summary>
+	<AreaNavigationPanel id="area-switcher-panel" node={menuRoot} currentPage={currentPage}
+		categoryDestinations={categoryDestinations} otherRoots={otherRoots} />
+</details>

package/src/components/ImageStackEnhancement.astro

@@ -104,13 +104,6 @@ const labels = projectConfig.locale.labels;
 		const imageBounds = image.getBoundingClientRect();
 		if (imageBounds.height < usableViewportHeight * persistentCaptionHeightRatio) return;
 
-		const visibleContentsRail = Array.from(
-			layout.querySelectorAll<HTMLElement>('.page-contents-navigation-rail'),
-		).some(isVisible);
-		const reservesContentsLane = layout.dataset.pageContentsPlacement === 'contents-rail'
-			&& document.documentElement.dataset.focusReading !== 'on';
-		if (visibleContentsRail || reservesContentsLane) return;
-
 		const frameBounds = frame.getBoundingClientRect();
 		const figureBounds = figure.getBoundingClientRect();
 		const captionBounds = caption.getBoundingClientRect();

package/src/components/NavigationContinuity.astro

@@ -0,0 +1,26 @@
+---
+import styles from '../styles/navigation-continuity.css?inline';
+---
+
+<style is:inline set:html={styles} />
+<script is:inline>
+	// A cold history arrival can restore its position at pagereveal, then lose
+	// it to native fragment scrolling when deferred modules finish parsing.
+	// Keep the browser's restored position until that initial load completes.
+	window.addEventListener('pagereveal', () => {
+		if (!location.hash || document.readyState === 'complete'
+			|| performance.getEntriesByType('navigation')[0]?.type !== 'back_forward'
+			|| history.scrollRestoration !== 'auto') return;
+
+		history.scrollRestoration = 'manual';
+		const release = () => {
+			history.scrollRestoration = 'auto';
+			window.removeEventListener('load', release);
+			window.removeEventListener('pagehide', release);
+		};
+		window.addEventListener('load', release);
+		window.addEventListener('pagehide', release);
+	}, { once: true });
+</script>
+<!-- A streamed response must finish the page before its transition snapshot. -->
+<link rel="expect" blocking="render" href="#norna-navigation-ready" />

package/src/components/NavigationPageTree.astro

@@ -1,19 +1,23 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { SiteNavigationNode } from '../lib/siteNavigation';
+import { getNavigationDestination, type CategoryDestinationMap, type SiteNavigationNode } from '../lib/siteNavigation';
 import type { SiteNode, SitePage } from '../lib/sitePages';
 import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
 	nodes: SiteNavigationNode[];
 	currentPage?: SiteNode;
+	categoryDestinations?: CategoryDestinationMap;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
 }
 
-const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
+const { nodes, currentPage, categoryDestinations, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const categoryHref = (node: SiteNavigationNode) => withBasePath(
+	projectConfig.site.basePath, getNavigationDestination(node.node, categoryDestinations).pathname,
+);
 const hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
 const isCurrentPage = (page: SitePage) => currentPage?.pathname === page.pathname;
 const isCurrentBranch = (node: SiteNode) => Boolean(currentPage && (
@@ -71,13 +75,17 @@ const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' &
 						class="navigation-page-summary"
 						aria-controls={getBranchId(node.node)}
 					>
-						<span class="navigation-page-summary-title">{node.node.title}</span>
+							<a class:list={['navigation-page-summary-title', 'navigation-category-link', {
+								'mobile-nav-destination': variant === 'mobile',
+							}]}
+								href={categoryHref(node)}>{node.node.title}</a>
 						<span class="navigation-page-chevron" aria-hidden="true"></span>
 					</summary>
 					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
 						<Astro.self
 							nodes={node.children}
 							currentPage={currentPage}
+							categoryDestinations={categoryDestinations}
 							variant={variant}
 							integratePageSections={integratePageSections}
 						/>
@@ -123,6 +131,7 @@ const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' &
 						<Astro.self
 							nodes={node.children}
 							currentPage={currentPage}
+							categoryDestinations={categoryDestinations}
 							variant={variant}
 							integratePageSections={integratePageSections}
 						/>
@@ -174,7 +183,7 @@ const usesPageDisclosure = (node: SiteNavigationNode) => variant !== 'submenu' &
 						{node.node.title}
 					</a>
 					{node.children.length > 0 && (
-						<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />
+						<Astro.self nodes={node.children} currentPage={currentPage} categoryDestinations={categoryDestinations} variant={variant} />
 					)}
 				</>
 			)}

package/src/components/NavigationState.astro

@@ -0,0 +1,11 @@
+---
+import { getNavigationStateScript } from '../lib/navigationStateScript.mjs';
+
+interface Props {
+	scope: 'desktop' | 'mobile';
+}
+
+const { scope } = Astro.props;
+---
+
+<script is:inline data-navigation-state-scope={scope} set:html={getNavigationStateScript()} />

package/src/components/NavigationTreeControls.astro

@@ -6,15 +6,16 @@ import type { SiteNavigationNode } from '../lib/siteNavigation';
 interface Props {
 	idPrefix: string;
 	nodes: SiteNavigationNode[];
+	forceVisible?: boolean;
 }
 
-const { idPrefix, nodes } = Astro.props;
+const { idPrefix, nodes, forceVisible = false } = Astro.props;
 const countNodes = (tree: SiteNavigationNode[]): number => tree.reduce(
 	(total, node) => total + 1 + countNodes(node.children),
 	0,
 );
 const minimumUsefulNodeCount = 12;
-const showControls = countNodes(nodes) >= minimumUsefulNodeCount;
+const showControls = forceVisible || countNodes(nodes) >= minimumUsefulNodeCount;
 const labels = projectConfig.locale.labels;
 const filterId = `${idPrefix}-filter`;
 const statusId = `${idPrefix}-status`;

package/src/components/SearchPage.astro

@@ -17,12 +17,13 @@ import { withBasePath } from '../lib/basePath';
 
 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 homePage = sitePages.find((page) => page.isHome);
 if (!homePage) throw new Error('The required homepage 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.');
+if (!siteTheme) throw new Error('site/root/tree-theme.yaml is required. Add the shared site theme before building the site.');
 const [sitewide] = await getCollection('sitewide');
 const sitewideData = sitewide?.data ?? {};
 const siteThemeData = siteTheme.data;
@@ -55,6 +56,7 @@ const pagePresentation = resolvePagePresentation(siteThemeData, themeLabel, {
 	navigationMode: navigationModel.mode,
 });
 const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const areaReadingFrame = navigationModel.mode === 'tree';
 const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: themeLabel });
 const logoAsset = getLogoAsset();
 const logo = logoAsset
@@ -130,19 +132,24 @@ const searchScript = `(() => {
 	pathname="/search/"
 	footer={sitewideData.footer}
 	indexable={false}
+	areaNavigation={navigationModel.mode === 'tree'}
+	areaReadingFrame={areaReadingFrame}
 >
 	<link slot="head" rel="stylesheet" href={`${bundlePath}pagefind-ui.css`} />
 	<SiteNavigation
 		logo={logo}
 		navigationEntries={siteNavigation}
+		categoryDestinations={categoryDestinations}
 		navigationMode={navigationModel.mode}
 		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
 		hasNavigationRailFrame={hasNavigationRailFrame}
 		frameColors={frameColors}
 		readerPreferences={pagePresentation.readerPreferences}
 		searchPage
+		areaReadingFrame={areaReadingFrame}
 	/>
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
+	<div class:list={['site-page-layout', { 'site-page-layout-tree': areaReadingFrame }]}>
 	<main class="site-content search-page-content" id="main-content" style={`--page-text-width: ${pageTextWidth}`}>
 		<SiteSection
 			section={searchSection}
@@ -158,6 +165,7 @@ const searchScript = `(() => {
 			</div>
 		</SiteSection>
 	</main>
+	</div>
 	<script is:inline set:html={searchScript} />
 </BaseLayout>
 

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>