@janga/norna 0.7.24 → 0.7.26

package/src/components/TableOverflowScript.astro

@@ -0,0 +1,579 @@
+---
+import { ChevronDown, ChevronsUpDown, ChevronUp } from '@lucide/astro';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+
+const labels = projectConfig.locale.labels;
+---
+
+<template data-table-navigation-template>
+	<div class="norna-table-navigation" data-table-navigation data-table-locale={projectConfig.locale.formattingLocale} hidden>
+		<span class="visually-hidden" data-table-overflow-description>{labels.tableOverflowDescription}</span>
+		<div class="norna-table-scrollbar" data-table-scrollbar role="scrollbar"
+			aria-label={labels.tableColumns} aria-orientation="horizontal"
+			aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
+			<span class="norna-table-scrollbar-thumb" data-table-scrollbar-thumb aria-hidden="true"></span>
+		</div>
+	</div>
+</template>
+
+<template data-table-sort-indicator-template
+	data-sort-ascending={labels.tableSortAscending}
+	data-sort-descending={labels.tableSortDescending}
+	data-sort-reset={labels.tableSortReset}>
+	<span class="norna-table-sort-indicator" aria-hidden="true">
+		<span data-table-sort-icon="unsorted"><ChevronsUpDown size={15} stroke-width={1.8} /></span>
+		<span data-table-sort-icon="ascending"><ChevronUp size={15} stroke-width={1.8} /></span>
+		<span data-table-sort-icon="descending"><ChevronDown size={15} stroke-width={1.8} /></span>
+	</span>
+</template>
+
+<script>
+	import { createTableSortTooltip } from '../lib/table-sort-tooltip';
+
+	type TableLayout = 'contained' | 'prose' | 'end' | 'canvas';
+	type SortDirection = 'ascending' | 'descending';
+	type ScrollbarControl = { element: HTMLElement; thumb: HTMLElement; navigation: HTMLElement };
+	const layoutUpdaters = new Set<() => void>();
+	let sortTooltip: ReturnType<typeof createTableSortTooltip> | undefined;
+	const navigationTemplate = document.querySelector<HTMLTemplateElement>('[data-table-navigation-template]');
+	const sortIndicatorTemplate = document.querySelector<HTMLTemplateElement>('[data-table-sort-indicator-template]');
+	const sortActions = {
+		unsorted: sortIndicatorTemplate?.dataset.sortAscending ?? '',
+		ascending: sortIndicatorTemplate?.dataset.sortDescending ?? '',
+		descending: sortIndicatorTemplate?.dataset.sortReset ?? '',
+	};
+	const tableLocale = navigationTemplate?.content.querySelector<HTMLElement>('[data-table-locale]')?.dataset.tableLocale ?? 'en';
+	const synchronizedAttributes = [
+		'data-appearance',
+		'data-focus-reading',
+		'data-reading-width',
+		'dir',
+	];
+
+	const initializeTableFrame = (frame: HTMLElement, frameIndex: number) => {
+		const scrollRegion = frame.querySelector<HTMLElement>('[data-table-scroll]');
+		const table = scrollRegion?.querySelector<HTMLTableElement>('table');
+		if (!scrollRegion || frame.dataset.tableReady === 'true') return;
+		const isTopLevel = frame.parentElement?.classList.contains('section-markdown') === true;
+		const tableHead = table?.tHead;
+		const headingCells = Array.from(tableHead?.querySelectorAll<HTMLTableCellElement>('th') ?? []);
+		const hasRowHeaders = frame.dataset.tableRowHeaders === 'true';
+		let scheduledFrame: number | null = null;
+		let stickyHeading: HTMLElement | null = null;
+		let stickyHeadingTrack: HTMLElement | null = null;
+		const scrollbars: ScrollbarControl[] = [];
+		let scrollbarDrag: { control: ScrollbarControl; pointerId: number; grabOffset: number } | null = null;
+		let overflowDescriptionId: string | null = null;
+		const tableBody = table?.tBodies.length === 1 ? table.tBodies[0] : null;
+		const bodyRows = Array.from(tableBody?.rows ?? []);
+		const originalRows = bodyRows.map((row, index) => ({ row, index }));
+		let sortedColumn: number | null = null;
+		let sortDirection: SortDirection | null = null;
+		const sortButtons: HTMLButtonElement[] = [];
+		const stickyCells: HTMLElement[] = [];
+		const stickySortButtons: HTMLButtonElement[] = [];
+		// One sticky surface keeps the heading and scrollbar together at both table edges.
+		const stickyContext = document.createElement('div');
+		stickyContext.className = 'norna-table-sticky-context';
+		frame.insertBefore(stickyContext, scrollRegion);
+
+		const removeDuplicateIdentity = (element: HTMLElement) => {
+			element.removeAttribute('id');
+			element.querySelectorAll<HTMLElement>('[id]').forEach((descendant) => descendant.removeAttribute('id'));
+		};
+
+		const createStickyHeading = () => {
+			if (!isTopLevel || !tableHead || headingCells.length === 0) return;
+
+			stickyHeading = document.createElement('div');
+			stickyHeading.className = 'norna-table-sticky-heading';
+			stickyHeading.dataset.tableStickyHeading = '';
+			stickyHeading.setAttribute('aria-hidden', 'true');
+			stickyHeading.setAttribute('inert', '');
+
+			stickyHeadingTrack = document.createElement('div');
+			stickyHeadingTrack.className = 'norna-table-sticky-heading-track';
+			stickyHeading.append(stickyHeadingTrack);
+			stickyContext.prepend(stickyHeading);
+		};
+
+		const createTableNavigation = () => {
+			if (!navigationTemplate) return;
+			if (!scrollRegion.id) scrollRegion.id = `norna-table-scroll-${frameIndex + 1}`;
+			overflowDescriptionId = `norna-table-overflow-${frameIndex + 1}`;
+			for (const placement of ['top', 'bottom']) {
+				const fragment = navigationTemplate.content.cloneNode(true) as DocumentFragment;
+				const navigation = fragment.querySelector<HTMLElement>('[data-table-navigation]');
+				const element = navigation?.querySelector<HTMLElement>('[data-table-scrollbar]');
+				const thumb = element?.querySelector<HTMLElement>('[data-table-scrollbar-thumb]');
+				if (!navigation || !element || !thumb) continue;
+				navigation.dataset.tableNavigation = placement;
+				element.setAttribute('aria-controls', scrollRegion.id);
+				const description = navigation.querySelector<HTMLElement>('[data-table-overflow-description]');
+				if (placement === 'top' && description) description.id = overflowDescriptionId;
+				else description?.remove();
+				scrollbars.push({ element, thumb, navigation });
+				if (placement === 'top') stickyContext.append(fragment);
+				else frame.append(fragment);
+			}
+			if (scrollbars.length === 2) frame.dataset.tableCustomScrollbars = 'true';
+		};
+
+		const cellText = (cell: HTMLTableCellElement) => (cell.textContent ?? '').replace(/\s+/gu, ' ').trim();
+
+		const parseNumber = (value: string) => {
+			if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(value)) return null;
+			const number = Number(value);
+			return Number.isFinite(number) ? number : null;
+		};
+
+		const parseIsoDate = (value: string) => {
+			const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/u.exec(value);
+			if (dateOnly) {
+				const year = Number(dateOnly[1]);
+				const month = Number(dateOnly[2]);
+				const day = Number(dateOnly[3]);
+				const timestamp = Date.UTC(year, month - 1, day);
+				const date = new Date(timestamp);
+				return date.getUTCFullYear() === year
+					&& date.getUTCMonth() === month - 1
+					&& date.getUTCDate() === day
+					? timestamp
+					: null;
+			}
+
+			if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:\d{2})?$/u.test(value)) {
+				return null;
+			}
+
+			const timestamp = Date.parse(value);
+			return Number.isNaN(timestamp) ? null : timestamp;
+		};
+
+		const getColumnType = (columnIndex: number) => {
+			const values = originalRows
+				.map(({ row }) => cellText(row.cells[columnIndex]))
+				.filter((value) => value !== '');
+			if (values.length === 0) return 'text';
+			if (values.every((value) => parseNumber(value) !== null)) return 'number';
+			if (values.every((value) => parseIsoDate(value) !== null)) return 'date';
+			return 'text';
+		};
+
+		const getCollator = () => {
+			try {
+				return new Intl.Collator(tableLocale, {
+					numeric: false,
+					sensitivity: 'variant',
+					usage: 'sort',
+				});
+			} catch {
+				return new Intl.Collator(undefined, {
+					numeric: false,
+					sensitivity: 'variant',
+					usage: 'sort',
+				});
+			}
+		};
+
+		const isSortableTable = () => {
+			if (!tableBody || bodyRows.length === 0 || headingCells.length === 0 || tableHead?.rows.length !== 1) return false;
+			const expectedColumns = headingCells.length;
+			return headingCells.every((cell) => cell.colSpan === 1 && cell.rowSpan === 1
+				&& !cell.querySelector('a, button, input, select, textarea, summary, [tabindex], [contenteditable]'))
+				&& bodyRows.every((row) => row.cells.length === expectedColumns
+					&& Array.from(row.cells).every((cell) => cell.colSpan === 1 && cell.rowSpan === 1));
+		};
+
+		const updateSortState = (activeColumn: number | null, direction: SortDirection | null) => {
+			headingCells.forEach((headingCell, columnIndex) => {
+				headingCell.removeAttribute('aria-sort');
+				const button = sortButtons[columnIndex];
+				if (!button) return;
+				const state = columnIndex === activeColumn && direction ? direction : 'unsorted';
+				const action = sortActions[state];
+				const columnName = headingCell.getAttribute('aria-label') ?? cellText(headingCell);
+				for (const control of [button, stickySortButtons[columnIndex]]) {
+					if (!control) continue;
+					control.dataset.tableSortState = state;
+					control.dataset.tableSortAction = action;
+					control.setAttribute('aria-label', `${columnName}: ${action}`);
+					sortTooltip?.refresh(control);
+				}
+				if (columnIndex === activeColumn && direction) headingCell.setAttribute('aria-sort', direction);
+			});
+			if (activeColumn === null || !direction) {
+				table?.removeAttribute('data-table-sort-column');
+				table?.removeAttribute('data-table-sort-direction');
+			} else {
+				table?.setAttribute('data-table-sort-column', String(activeColumn));
+				table?.setAttribute('data-table-sort-direction', direction);
+			}
+		};
+
+		const sortRows = (columnIndex: number, direction: SortDirection) => {
+			if (!tableBody) return;
+			const type = getColumnType(columnIndex);
+			const collator = type === 'text' ? getCollator() : null;
+			const sortedRows = [...originalRows].sort((left, right) => {
+				const leftValue = cellText(left.row.cells[columnIndex]);
+				const rightValue = cellText(right.row.cells[columnIndex]);
+				if (leftValue === '' || rightValue === '') {
+					if (leftValue === rightValue) return left.index - right.index;
+					return leftValue === '' ? 1 : -1;
+				}
+
+				let result = 0;
+				if (type === 'number') {
+					result = (parseNumber(leftValue) ?? 0) - (parseNumber(rightValue) ?? 0);
+				} else if (type === 'date') {
+					result = (parseIsoDate(leftValue) ?? 0) - (parseIsoDate(rightValue) ?? 0);
+				} else {
+					result = collator?.compare(leftValue, rightValue) ?? 0;
+				}
+
+				return result === 0
+					? left.index - right.index
+					: result * (direction === 'ascending' ? 1 : -1);
+			});
+			sortedRows.forEach(({ row }) => tableBody.append(row));
+		};
+
+		const resetRows = () => {
+			if (!tableBody) return;
+			originalRows.forEach(({ row }) => tableBody.append(row));
+		};
+
+		const createTableSorting = () => {
+			if (!table || !sortIndicatorTemplate || !isSortableTable()) return;
+			sortTooltip ??= createTableSortTooltip();
+			headingCells.forEach((headingCell, columnIndex) => {
+				const button = document.createElement('button');
+				button.type = 'button';
+				button.className = 'norna-table-sort-button';
+				button.dataset.tableSortButton = '';
+				button.dataset.tableSortState = 'unsorted';
+				// Keep the semantic column name when its original control is hidden.
+				if (!headingCell.hasAttribute('aria-label')) headingCell.setAttribute('aria-label', cellText(headingCell));
+				button.append(...Array.from(headingCell.childNodes));
+				button.append(sortIndicatorTemplate.content.cloneNode(true));
+				headingCell.replaceChildren(button);
+				sortButtons.push(button);
+				sortTooltip.attach(button);
+				button.addEventListener('click', () => {
+					if (sortedColumn !== columnIndex) {
+						sortedColumn = columnIndex;
+						sortDirection = 'ascending';
+						sortRows(columnIndex, sortDirection);
+					} else if (sortDirection === 'ascending') {
+						sortDirection = 'descending';
+						sortRows(columnIndex, sortDirection);
+					} else {
+						resetRows();
+						sortedColumn = null;
+						sortDirection = null;
+					}
+					updateSortState(sortedColumn, sortDirection);
+				});
+			});
+			updateSortState(null, null);
+			table.dataset.tableSortable = 'true';
+		};
+
+		const setOverflowDescription = (enabled: boolean) => {
+			if (!overflowDescriptionId) return;
+			const descriptionIds = new Set((scrollRegion.getAttribute('aria-describedby') ?? '')
+				.split(/\s+/u)
+				.filter(Boolean));
+			if (enabled) descriptionIds.add(overflowDescriptionId);
+			else descriptionIds.delete(overflowDescriptionId);
+			if (descriptionIds.size > 0) scrollRegion.setAttribute('aria-describedby', [...descriptionIds].join(' '));
+			else scrollRegion.removeAttribute('aria-describedby');
+		};
+
+		const getScrollbarGeometry = (control = scrollbars[0]) => {
+			const maximum = Math.max(0, scrollRegion.scrollWidth - scrollRegion.clientWidth);
+			const rtl = getComputedStyle(scrollRegion).direction === 'rtl';
+			const position = Math.min(maximum, Math.max(0, scrollRegion.scrollLeft * (rtl ? -1 : 1)));
+			const width = control?.element.getBoundingClientRect().width ?? 0;
+			const fraction = scrollRegion.clientWidth / Math.max(1, scrollRegion.scrollWidth);
+			const thumbWidth = Math.min(width, Math.max(24, width * fraction));
+			return { maximum, rtl, position, width, thumbWidth, travel: width - thumbWidth };
+		};
+
+		const setScrollbarPosition = (position: number) => {
+			const { maximum, rtl } = getScrollbarGeometry();
+			scrollRegion.scrollTo({ left: Math.min(maximum, Math.max(0, position)) * (rtl ? -1 : 1), behavior: 'instant' });
+			updateOverflow();
+		};
+
+		const synchronizeScrollbar = () => {
+			for (const control of scrollbars) {
+				const { maximum, rtl, position, thumbWidth, travel } = getScrollbarGeometry(control);
+				const progress = maximum > 0 ? position / maximum : 0;
+				control.thumb.style.width = `${thumbWidth}px`;
+				control.thumb.style.left = `${travel * (rtl ? 1 - progress : progress)}px`;
+				control.element.setAttribute('aria-valuenow', String(Math.round(progress * 100)));
+			}
+		};
+
+		const dragScrollbar = (clientX: number) => {
+			if (!scrollbarDrag) return;
+			const { control } = scrollbarDrag;
+			const { maximum, rtl, travel } = getScrollbarGeometry(control);
+			if (travel <= 0) return;
+			const offset = clientX - control.element.getBoundingClientRect().left - scrollbarDrag.grabOffset;
+			const fraction = Math.min(1, Math.max(0, offset / travel));
+			setScrollbarPosition(maximum * (rtl ? 1 - fraction : fraction));
+		};
+
+		const synchronizeStickyHeadingPosition = () => {
+			if (!stickyHeading || !stickyHeadingTrack || !table) return;
+			const layerBounds = stickyHeading.getBoundingClientRect();
+			const tableBounds = table.getBoundingClientRect();
+			const trackOffset = tableBounds.left - layerBounds.left;
+			stickyHeadingTrack.style.transform = `translateX(${trackOffset}px)`;
+
+			const rowHeader = stickyHeadingTrack.querySelector<HTMLElement>('[data-table-sticky-row-header]');
+			if (!rowHeader) return;
+			const rowHeaderLeft = Number.parseFloat(rowHeader.style.left) || 0;
+			const rowHeaderWidth = Number.parseFloat(rowHeader.style.width) || 0;
+			const isRightToLeft = getComputedStyle(table).direction === 'rtl';
+			const naturalLeft = tableBounds.left + rowHeaderLeft;
+			const desiredLeft = isRightToLeft
+				? layerBounds.right - rowHeaderWidth
+				: layerBounds.left;
+			rowHeader.style.transform = `translateX(${desiredLeft - naturalLeft}px)`;
+		};
+
+		const synchronizeSortControls = (useSticky: boolean) => {
+			if (!stickyHeading || sortButtons.length === 0) return;
+			const active = document.activeElement;
+			const from = useSticky ? sortButtons : stickySortButtons;
+			const to = useSticky ? stickySortButtons : sortButtons;
+			const focusedColumn = from.findIndex((button) => button === active);
+			stickyHeading.toggleAttribute('inert', !useSticky);
+			if (useSticky) {
+				stickyHeading.removeAttribute('aria-hidden');
+				stickyHeading.setAttribute('role', 'group');
+				const groupLabel = scrollbars[0]?.element.getAttribute('aria-label');
+				if (groupLabel) stickyHeading.setAttribute('aria-label', groupLabel);
+			}
+			for (const [index, button] of sortButtons.entries()) {
+				button.tabIndex = useSticky ? -1 : 0;
+				if (!useSticky) button.removeAttribute('aria-hidden');
+				if (stickySortButtons[index]) stickySortButtons[index].tabIndex = useSticky ? 0 : -1;
+			}
+			// Transfer focus before hiding the control that previously owned it.
+			if (focusedColumn >= 0) to[focusedColumn]?.focus({ preventScroll: true });
+			if (useSticky) sortButtons.forEach((button) => button.setAttribute('aria-hidden', 'true'));
+			else stickyHeading.setAttribute('aria-hidden', 'true');
+		};
+
+		const synchronizeStickyHeadingGeometry = () => {
+			if (!stickyHeading || !stickyHeadingTrack || !table || !tableHead) return false;
+			const tableBounds = table.getBoundingClientRect();
+			const headingBounds = tableHead.getBoundingClientRect();
+			if (tableBounds.width <= 0 || headingBounds.height <= 0) {
+				return false;
+			}
+
+			frame.style.setProperty('--table-sticky-heading-height', `${headingBounds.height}px`);
+			stickyHeadingTrack.style.width = `${tableBounds.width}px`;
+			stickyHeadingTrack.style.height = `${headingBounds.height}px`;
+			headingCells.forEach((headingCell, columnIndex) => {
+				const cellBounds = headingCell.getBoundingClientRect();
+				const computedStyle = getComputedStyle(headingCell);
+				let visualCell = stickyCells[columnIndex];
+				if (!visualCell) {
+					visualCell = document.createElement('div');
+					visualCell.append(...Array.from(headingCell.childNodes, (node) => node.cloneNode(true)));
+					removeDuplicateIdentity(visualCell);
+					const button = visualCell.querySelector<HTMLButtonElement>('[data-table-sort-button]');
+					if (button) {
+						button.removeAttribute('aria-hidden');
+						button.tabIndex = -1;
+						sortTooltip?.attach(button);
+						button.addEventListener('click', () => sortButtons[columnIndex].click());
+						// Focus on a clipped column must reveal it in the real scroll region.
+						button.addEventListener('focus', () => {
+							if (!stickyHeading) return;
+							const bounds = visualCell.getBoundingClientRect();
+							const viewport = stickyHeading.getBoundingClientRect();
+							const pinnedWidth = hasRowHeaders && columnIndex > 0
+								? stickyCells[0].getBoundingClientRect().width : 0;
+							const rtl = getComputedStyle(scrollRegion).direction === 'rtl';
+							const start = viewport.left + (rtl ? 0 : pinnedWidth);
+							const end = viewport.right - (rtl ? pinnedWidth : 0);
+							const delta = bounds.left < start ? bounds.left - start
+								: bounds.right > end ? Math.min(bounds.right - end, bounds.left - start) : 0;
+							if (Math.abs(delta) > 1) scrollRegion.scrollLeft += delta;
+							synchronizeStickyHeadingPosition();
+						});
+						stickySortButtons[columnIndex] = button;
+					}
+					stickyCells[columnIndex] = visualCell;
+					stickyHeadingTrack.append(visualCell);
+				}
+				visualCell.className = 'norna-table-sticky-heading-cell';
+				visualCell.style.left = `${cellBounds.left - tableBounds.left}px`;
+				visualCell.style.top = `${cellBounds.top - headingBounds.top}px`;
+				visualCell.style.width = `${cellBounds.width}px`;
+				visualCell.style.height = `${cellBounds.height}px`;
+				visualCell.style.font = computedStyle.font;
+				visualCell.style.fontWeight = computedStyle.fontWeight;
+				visualCell.style.letterSpacing = computedStyle.letterSpacing;
+				visualCell.style.lineHeight = computedStyle.lineHeight;
+				visualCell.style.padding = computedStyle.padding;
+				visualCell.style.textAlign = computedStyle.textAlign;
+				visualCell.style.textTransform = computedStyle.textTransform;
+				visualCell.style.whiteSpace = computedStyle.whiteSpace;
+				visualCell.style.wordBreak = computedStyle.wordBreak;
+				visualCell.style.overflowWrap = computedStyle.overflowWrap;
+				if (hasRowHeaders && columnIndex === 0) {
+					visualCell.classList.add('norna-table-sticky-heading-cell-row-header');
+					visualCell.dataset.tableStickyRowHeader = '';
+				}
+			});
+			synchronizeStickyHeadingPosition();
+			return true;
+		};
+
+		createTableSorting();
+		createTableNavigation();
+		createStickyHeading();
+		const stopScrollbarDrag = () => {
+			const pointerId = scrollbarDrag?.pointerId;
+			const scrollbar = scrollbarDrag?.control.element;
+			scrollbarDrag = null;
+			if (pointerId !== undefined && scrollbar?.hasPointerCapture(pointerId)) scrollbar.releasePointerCapture(pointerId);
+			if (scrollbar) delete scrollbar.dataset.dragging;
+		};
+		for (const control of scrollbars) {
+			const { element: scrollbar, thumb: scrollbarThumb } = control;
+			scrollbar.addEventListener('keydown', (event) => {
+				const { maximum, rtl, position } = getScrollbarGeometry(control);
+				const step = Math.max(1, scrollRegion.clientWidth * 0.1);
+				const page = scrollRegion.clientWidth * 0.8;
+				let next: number;
+				switch (event.key) {
+					case 'ArrowLeft': next = position + step * (rtl ? 1 : -1); break;
+					case 'ArrowRight': next = position + step * (rtl ? -1 : 1); break;
+					case 'PageUp': next = position - page; break;
+					case 'PageDown': next = position + page; break;
+					case 'Home': next = 0; break;
+					case 'End': next = maximum; break;
+					default: return;
+				}
+				event.preventDefault();
+				setScrollbarPosition(next);
+			});
+			scrollbar.addEventListener('pointerdown', (event) => {
+				if (!event.isPrimary || event.button !== 0) return;
+				event.preventDefault();
+				scrollbar.focus({ preventScroll: true });
+				const bounds = scrollbarThumb.getBoundingClientRect();
+				const onThumb = event.clientX >= bounds.left && event.clientX <= bounds.right;
+				scrollbarDrag = { control, pointerId: event.pointerId, grabOffset: onThumb ? event.clientX - bounds.left : bounds.width / 2 };
+				scrollbar.setPointerCapture(event.pointerId);
+				scrollbar.dataset.dragging = 'true';
+				dragScrollbar(event.clientX);
+			});
+			scrollbar.addEventListener('pointermove', (event) => {
+				if (scrollbarDrag?.pointerId === event.pointerId) dragScrollbar(event.clientX);
+			});
+			scrollbar.addEventListener('pointerup', stopScrollbarDrag);
+			scrollbar.addEventListener('pointercancel', stopScrollbarDrag);
+			scrollbar.addEventListener('lostpointercapture', stopScrollbarDrag);
+		}
+
+		const updateOverflow = ({ refreshStickyHeading = false } = {}) => {
+			const maximumScroll = Math.max(0, scrollRegion.scrollWidth - scrollRegion.clientWidth);
+			const hasOverflow = maximumScroll > 1;
+			const scrollBounds = scrollRegion.getBoundingClientRect();
+			const tableBounds = table?.getBoundingClientRect();
+			const isRightToLeft = getComputedStyle(scrollRegion).direction === 'rtl';
+			const isAtStart = !hasOverflow || !tableBounds || (isRightToLeft
+				? tableBounds.right <= scrollBounds.right + 2
+				: tableBounds.left >= scrollBounds.left - 2);
+			const isAtEnd = !hasOverflow || !tableBounds || (isRightToLeft
+				? tableBounds.left >= scrollBounds.left - 2
+				: tableBounds.right <= scrollBounds.right + 2);
+
+			for (const { navigation } of scrollbars) {
+				if (!hasOverflow && navigation.contains(document.activeElement)) {
+					scrollRegion.tabIndex = -1;
+					scrollRegion.focus({ preventScroll: true });
+				}
+				if (!hasOverflow) stopScrollbarDrag();
+				navigation.hidden = !hasOverflow;
+			}
+			const stickyHeadingReady = hasOverflow && stickyHeading
+				? (refreshStickyHeading
+					? synchronizeStickyHeadingGeometry()
+					: (stickyHeadingTrack?.childElementCount ?? 0) > 0)
+				: false;
+
+			frame.dataset.tableOverflow = hasOverflow ? 'true' : 'false';
+			frame.dataset.tableAtStart = isAtStart ? 'true' : 'false';
+			frame.dataset.tableAtEnd = isAtEnd ? 'true' : 'false';
+			frame.dataset.tableStickyHeading = stickyHeadingReady ? 'true' : 'false';
+			synchronizeSortControls(Boolean(stickyHeadingReady));
+			if (hasOverflow) synchronizeScrollbar();
+			setOverflowDescription(hasOverflow);
+			if (hasOverflow) scrollRegion.setAttribute('tabindex', '0');
+			else if (document.activeElement !== scrollRegion) scrollRegion.removeAttribute('tabindex');
+			if (stickyHeadingReady && !refreshStickyHeading) synchronizeStickyHeadingPosition();
+		};
+
+		const tableFitsLayout = (layout: TableLayout) => {
+			frame.dataset.tableLayout = layout;
+			return scrollRegion.scrollWidth - scrollRegion.clientWidth <= 1;
+		};
+
+		const updateLayout = () => {
+			scheduledFrame = null;
+			if (!isTopLevel || !table) {
+				frame.dataset.tableLayout = 'contained';
+				updateOverflow();
+				return;
+			}
+
+			const candidates: TableLayout[] = ['prose', 'end', 'canvas'];
+			const selected = candidates.find(tableFitsLayout) ?? 'canvas';
+			frame.dataset.tableLayout = selected;
+			updateOverflow({ refreshStickyHeading: true });
+		};
+
+		const scheduleLayoutUpdate = () => {
+			if (scheduledFrame !== null) return;
+			scheduledFrame = requestAnimationFrame(updateLayout);
+		};
+
+		frame.dataset.tableReady = 'true';
+		scrollRegion.addEventListener('scroll', () => updateOverflow(), { passive: true });
+		layoutUpdaters.add(scheduleLayoutUpdate);
+		if ('ResizeObserver' in window) {
+			const observer = new ResizeObserver(scheduleLayoutUpdate);
+			observer.observe(frame);
+			observer.observe(scrollRegion);
+			if (table) observer.observe(table);
+			if (frame.parentElement) observer.observe(frame.parentElement);
+		} else {
+			window.addEventListener('resize', scheduleLayoutUpdate, { passive: true });
+		}
+
+		updateLayout();
+		document.fonts?.ready.then(scheduleLayoutUpdate).catch(() => {});
+	};
+
+	const frames = Array.from(document.querySelectorAll<HTMLElement>('[data-table-frame]'));
+	frames.forEach(initializeTableFrame);
+	if (frames.length > 0) {
+		const preferenceObserver = new MutationObserver(() => layoutUpdaters.forEach((update) => update()));
+		preferenceObserver.observe(document.documentElement, {
+			attributeFilter: synchronizedAttributes,
+			attributes: true,
+		});
+	}
+</script>

package/src/components/TopPageMenu.astro

@@ -0,0 +1,47 @@
+---
+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 { SiteNode } from '../lib/sitePages';
+import NavigationPageTree from './NavigationPageTree.astro';
+
+interface Props {
+	node: SiteNavigationNode;
+	currentPage?: SiteNode;
+	showSections: boolean;
+	showChildren: boolean;
+}
+const { node, currentPage, showSections, showChildren } = Astro.props;
+const sections = showSections ? node.sections : [];
+const children = showChildren ? node.children : [];
+const pageHref = node.node.kind === 'page'
+	? withBasePath(projectConfig.site.basePath, node.node.pathname)
+	: '';
+const label = `${projectConfig.locale.labels.navigationMenu}: ${node.node.title}`;
+---
+
+{(sections.length > 0 || children.length > 0) && (
+	<details class="top-page-menu">
+		<summary aria-label={label} title={label}>
+			<ChevronDown aria-hidden="true" />
+		</summary>
+		<div class="top-page-panel">
+			{sections.length > 0 && (
+				<nav aria-label={`${projectConfig.locale.labels.pageSections}: ${node.node.title}`}>
+					<ul class="top-page-sections">
+						{sections.map((section) => (
+							<li><a href={`${pageHref}#${section.id}`}>{section.title}</a></li>
+						))}
+					</ul>
+				</nav>
+			)}
+			{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" />
+				</nav>
+			)}
+		</div>
+	</details>
+)}