@janga/norna 0.7.23 → 0.7.25

package/src/components/SitePage.astro

@@ -2,21 +2,34 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import CodeBlockCopyScript from './CodeBlockCopyScript.astro';
+import EditSourceLink from './EditSourceLink.astro';
+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';
+import TableOverflowScript from './TableOverflowScript.astro';
 import TreeNavigationScript from './TreeNavigationScript.astro';
 import { getSectionsContent, type ResolvedSection } from '../lib/sectionContent';
 import { getPageTheme } from '../lib/pageThemes';
 import { getSiteModel, type SitePage } from '../lib/sitePages';
-import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
+import {
+	flattenSiteNavigationTree,
+	getDirectChildPages,
+	getListedSiteNavigationTree,
+	getSequentialPageNavigation,
+} from '../lib/siteNavigation';
 import { getToday, isVisibleToday } from '../lib/visibility';
 import { getLogoAsset } from '../lib/sitePublicAssets';
-import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+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';
 
@@ -55,24 +68,8 @@ const logo = logoAsset
 		height: logoSettings?.height,
 	}
 	: undefined;
-const siteHtml = entry.rendered?.html ?? '';
-const resolvedSections = await getSectionsContent(siteHtml, currentPage);
-const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
-	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
-)));
 const today = getToday();
 const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
-const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
-	block.type === 'image-stack'
-	|| block.type === 'image-carousel'
-));
-const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
-let contentSectionIndex = 0;
-const renderedSections = resolvedSections.map((section, index) => ({
-	section,
-	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
-	prioritizeFirstImage: index === firstImageSectionIndex,
-}));
 
 const getPageContent = (page: SitePage) =>
 	page.markdownDocument.navigationHeadings.map(({ depth, id, parentId, title }) => ({
@@ -92,7 +89,42 @@ const siteNavigation = siteNodes.map((node) => {
 			.map(({ id, title }) => ({ id, title })),
 	};
 });
-const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
+const listedNavigationTree = getListedSiteNavigationTree(siteNavigation);
+const renderedNavigationEntries = flattenSiteNavigationTree(listedNavigationTree);
+const pageSequence = getSequentialPageNavigation(listedNavigationTree, currentPage.pagePath);
+const childPages = getDirectChildPages(listedNavigationTree, currentPage.pagePath);
+const siteHtml = entry.rendered?.html ?? '';
+const resolvedSections = await getSectionsContent(siteHtml, currentPage, childPages);
+const hasCodeBlocks = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+	block.type === 'html' && /<pre\b[^>]*>[\s\S]*?<code\b/i.test(block.html)
+)));
+const hasTables = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+	block.type === 'html' && /\bdata-table-frame(?:="")?/i.test(block.html)
+)));
+const hasImageStack = resolvedSections.some((section) => section.contentBlocks.some((block) => (
+	block.type === 'image-stack'
+)));
+const hasPrioritizableImage = (section: ResolvedSection) => section.contentBlocks.some((block) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+));
+const firstImageSectionIndex = resolvedSections.findIndex(hasPrioritizableImage);
+let contentSectionIndex = 0;
+const renderedSections = resolvedSections.map((section, index) => ({
+	section,
+	sectionIndex: section.headingLevel === 1 ? 0 : contentSectionIndex++,
+	prioritizeFirstImage: index === firstImageSectionIndex,
+}));
+const hasPageSequence = Boolean(pageSequence.previous || pageSequence.next);
+const editSourceTarget = projectConfig.editLink
+	? resolveEditSourceTarget({
+		...projectConfig.editLink,
+		development: import.meta.env.DEV,
+		hostname: Astro.url.hostname,
+		sourceLabel: currentPage.contentLabel,
+		sourcePath: currentPage.contentPath,
+	})
+	: null;
 const navigationModel = resolveNavigationModel({
 	mode: projectConfig.navigation.mode,
 	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
@@ -114,18 +146,39 @@ const pagePresentation = resolvePagePresentation(themeData, themeLabel, {
 const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
 const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: `${siteDirectory || 'site'}/${siteTheme.id}` });
 const hasTreeNavigation = navigationModel.mode === 'tree';
+const showTreeNavigation = 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 hasContentsNavigation = hasTreeNavigation && pageContentsHeadings.length > 1;
-const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+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 integratePageContentsInTree = hasTreeNavigation;
+const showContentsRail = pageContentsPlacement.placement === 'contents-rail';
+const hasNavigationRailFrame = !currentPage.isHome && (
+	navigationModel.requestedMode === 'tree'
 	|| (
 		navigationModel.requestedMode === 'automatic'
 		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
-	);
+	)
+);
 const showBreadcrumbs = !currentPage.isHome && currentPage.parentPagePath !== null;
-const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
+const reserveBreadcrumbSpace = showTreeNavigation || showBreadcrumbs;
 
 ---
 
@@ -137,7 +190,8 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
-	contentsNavigation={hasContentsNavigation}
+	contentsNavigation={hasTrackedSectionNavigation}
+	searchable
 >
 	<SiteNavigation
 		logo={logo}
@@ -152,27 +206,31 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
 	<div class:list={['site-page-layout', {
-		'site-page-layout-tree': hasTreeNavigation,
-		'site-page-layout-contents': hasContentsNavigation,
-	}]}>
-		{hasTreeNavigation && (
-			<SiteTreeNavigation currentPage={currentPage} navigationEntries={siteNavigation} />
+		'site-page-layout-tree': showTreeNavigation,
+		'site-page-layout-contents': showContentsRail,
+	}]}
+		data-page-contents-placement={hasContentsNavigation ? pageContentsPlacement.placement : undefined}
+	>
+		{showTreeNavigation && (
+			<SiteTreeNavigation
+				currentPage={currentPage}
+				navigationEntries={siteNavigation}
+				integratePageSections={integratePageContentsInTree}
+			/>
 		)}
 		<main
-			class:list={['site-content', { 'site-content-has-breadcrumbs': reserveBreadcrumbSpace }]}
+			class:list={['site-content', {
+				'site-content-has-breadcrumbs': reserveBreadcrumbSpace,
+				'site-content-has-edit-source': Boolean(editSourceTarget),
+				'site-content-has-page-sequence': hasPageSequence,
+			}]}
 			id="main-content"
+			data-pagefind-body
 			style={`--page-text-width: ${pageTextWidth}`}
 		>
 			{showBreadcrumbs
 				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
-			{hasContentsNavigation && (
-				<PageContentsNavigation
-					headings={pageContentsHeadings}
-					pageTitle={currentPage.title}
-					variant="inline"
-				/>
-			)}
 			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 				<SiteSection
 					section={section}
@@ -182,15 +240,25 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 					prioritizeFirstImage={prioritizeFirstImage}
 				/>
 			))}
+			{editSourceTarget && (
+				<EditSourceLink
+					href={editSourceTarget.href}
+					label={editSourceTarget.kind === 'local'
+						? projectConfig.locale.labels.openInVsCode
+						: projectConfig.locale.labels.editSource}
+				/>
+			)}
+			<PageSequenceNavigation previous={pageSequence.previous} next={pageSequence.next} />
 		</main>
-		{hasContentsNavigation && (
+		{showContentsRail && (
 			<PageContentsNavigation
 				headings={pageContentsHeadings}
 				pageTitle={currentPage.title}
-				variant="rail"
 			/>
 		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
 	{hasCodeBlocks && <CodeBlockCopyScript />}
+	{hasTables && <TableOverflowScript />}
+	{hasImageStack && <ImageStackEnhancement />}
 </BaseLayout>

package/src/components/SiteSection.astro

@@ -9,6 +9,7 @@ import {
 import CardList from './CardList.astro';
 import ImageCarousel from './ImageCarousel.astro';
 import ImageStack from './ImageStack.astro';
+import PageList from './PageList.astro';
 import type { ResolvedSection } from '../lib/sectionContent';
 
 type ResponsiveValue<T> = { desktop: T; mobile: T };
@@ -113,6 +114,7 @@ const isStructuredBlock = (block: ResolvedSection['contentBlocks'][number]) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| block.type === 'card-list'
+	|| block.type === 'page-list'
 );
 const hasMedia = section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
@@ -121,7 +123,7 @@ const hasMedia = section.contentBlocks.some((block) => (
 ));
 const contentGroups: Array<
 	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
-	| { type: 'media'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' }> }
+	| { type: 'structured'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' | 'page-list' }> }
 > = [];
 let readingBlocks: ResolvedSection['contentBlocks'] = [];
 const flushReadingBlocks = () => {
@@ -133,14 +135,17 @@ const flushReadingBlocks = () => {
 for (const block of section.contentBlocks) {
 	if (isStructuredBlock(block)) {
 		flushReadingBlocks();
-		contentGroups.push({ type: 'media', block });
+		contentGroups.push({ type: 'structured', block });
 	} else {
 		readingBlocks = [...readingBlocks, block];
 	}
 }
 
 flushReadingBlocks();
-const firstMediaGroupIndex = contentGroups.findIndex((group) => group.type === 'media');
+const firstMediaGroupIndex = contentGroups.findIndex((group) => (
+	group.type === 'structured'
+	&& (group.block.type === 'image-stack' || group.block.type === 'image-carousel')
+));
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingTypographySizeValue(level, headingConfig.size);
@@ -240,6 +245,9 @@ const sectionStyle = [
 						/>
 					);
 				}
+				if (block.type === 'page-list') {
+					return <PageList pages={block.pages} />;
+				}
 
 				return (
 					<ImageStack

package/src/components/SiteTreeNavigation.astro

@@ -1,21 +1,25 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { withBasePath } from '../lib/basePath';
 import { getListedSiteNavigationTree, type SiteNavigationEntry } from '../lib/siteNavigation';
 import type { SitePage } from '../lib/sitePages';
 import NavigationPageTree from './NavigationPageTree.astro';
+import NavigationTreeControls from './NavigationTreeControls.astro';
 
 interface Props {
 	currentPage: SitePage;
 	navigationEntries: SiteNavigationEntry[];
+	integratePageSections?: boolean;
 }
 
-const { currentPage, navigationEntries } = Astro.props;
+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 navigationStateRoot = withBasePath(projectConfig.site.basePath, '/');
 ---
 
 {activeRoot && (
@@ -23,12 +27,18 @@ const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}
 		id="tree-local-navigation"
 		class="tree-local-navigation"
 		data-navigation-root={navigationRoot}
+		data-navigation-state-root={navigationStateRoot}
 	>
+		<NavigationTreeControls
+			idPrefix="desktop-tree-navigation"
+			nodes={[activeRoot]}
+		/>
 		<nav aria-label={`${activeRoot.node.title}: ${projectConfig.locale.labels.siteNavigation}`}>
 			<NavigationPageTree
 				nodes={[activeRoot]}
 				currentPage={currentPage}
 				variant="sidebar"
+				integratePageSections={integratePageSections}
 			/>
 		</nav>
 	</aside>

package/src/components/TableOverflowScript.astro

@@ -0,0 +1,251 @@
+---
+import { ChevronLeft, ChevronRight } 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 hidden>
+		<span class="visually-hidden" data-table-overflow-description>{labels.tableOverflowDescription}</span>
+		<div class="norna-table-navigation-buttons" role="group" aria-label={labels.tableColumns}>
+			<button
+				type="button"
+				data-table-scroll-previous
+				aria-label={labels.tablePreviousColumns}
+				title={labels.tablePreviousColumns}
+			>
+				<ChevronLeft aria-hidden="true" size={18} stroke-width={1.8} />
+			</button>
+			<button
+				type="button"
+				data-table-scroll-next
+				aria-label={labels.tableNextColumns}
+				title={labels.tableNextColumns}
+			>
+				<ChevronRight aria-hidden="true" size={18} stroke-width={1.8} />
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+	type TableLayout = 'contained' | 'prose' | 'end' | 'canvas';
+	const layoutUpdaters = new Set<() => void>();
+	const navigationTemplate = document.querySelector<HTMLTemplateElement>('[data-table-navigation-template]');
+	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') ?? []);
+		let scheduledFrame: number | null = null;
+		let stickyHeading: HTMLElement | null = null;
+		let stickyHeadingTrack: HTMLElement | null = null;
+		let tableNavigation: HTMLElement | null = null;
+		let previousButton: HTMLButtonElement | null = null;
+		let nextButton: HTMLButtonElement | null = null;
+		let overflowDescriptionId: string | null = null;
+
+		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);
+			frame.insertBefore(stickyHeading, scrollRegion);
+		};
+
+		const createTableNavigation = () => {
+			if (!navigationTemplate) return;
+			const fragment = navigationTemplate.content.cloneNode(true) as DocumentFragment;
+			tableNavigation = fragment.querySelector<HTMLElement>('[data-table-navigation]');
+			if (!tableNavigation) return;
+
+			const description = tableNavigation.querySelector<HTMLElement>('[data-table-overflow-description]');
+			previousButton = tableNavigation.querySelector<HTMLButtonElement>('[data-table-scroll-previous]');
+			nextButton = tableNavigation.querySelector<HTMLButtonElement>('[data-table-scroll-next]');
+			overflowDescriptionId = `norna-table-overflow-${frameIndex + 1}`;
+			if (description) description.id = overflowDescriptionId;
+			frame.insertBefore(fragment, scrollRegion);
+		};
+
+		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 scrollTable = (direction: -1 | 1) => {
+			const isRightToLeft = getComputedStyle(scrollRegion).direction === 'rtl';
+			const distance = Math.max(1, Math.round(scrollRegion.clientWidth * 0.8));
+			const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			scrollRegion.scrollBy({
+				behavior: reducedMotion ? 'auto' : 'smooth',
+				left: direction * distance * (isRightToLeft ? -1 : 1),
+			});
+		};
+
+		const synchronizeStickyHeadingPosition = () => {
+			if (!stickyHeading || !stickyHeadingTrack || !table) return;
+			const layerBounds = stickyHeading.getBoundingClientRect();
+			const tableBounds = table.getBoundingClientRect();
+			stickyHeadingTrack.style.transform = `translateX(${tableBounds.left - layerBounds.left}px)`;
+		};
+
+		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`;
+			stickyHeadingTrack.replaceChildren(...headingCells.map((headingCell) => {
+				const cellBounds = headingCell.getBoundingClientRect();
+				const computedStyle = getComputedStyle(headingCell);
+				const visualCell = document.createElement('div');
+				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;
+				visualCell.append(...Array.from(headingCell.childNodes, (node) => node.cloneNode(true)));
+				removeDuplicateIdentity(visualCell);
+				return visualCell;
+			}));
+			synchronizeStickyHeadingPosition();
+			return true;
+		};
+
+		createTableNavigation();
+		createStickyHeading();
+		previousButton?.addEventListener('click', () => scrollTable(-1));
+		nextButton?.addEventListener('click', () => scrollTable(1));
+
+		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);
+
+			if (tableNavigation) {
+				tableNavigation.hidden = !hasOverflow;
+				frame.style.setProperty(
+					'--table-navigation-height',
+					hasOverflow ? `${tableNavigation.getBoundingClientRect().height}px` : '0px',
+				);
+			}
+			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';
+			if (previousButton) previousButton.disabled = isAtStart;
+			if (nextButton) nextButton.disabled = isAtEnd;
+			setOverflowDescription(hasOverflow);
+			if (hasOverflow) scrollRegion.setAttribute('tabindex', '0');
+			else 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>