@janga/norna 0.7.24 → 0.7.25

package/src/components/SiteNavigation.astro

@@ -1,5 +1,5 @@
 ---
-import { Search } from '@lucide/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';
@@ -177,56 +177,80 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
 				)}
 
-				{showMobileNavigation && <details class="mobile-nav-menu">
-			<summary>
-				<span>{projectConfig.locale.labels.navigationMenu}</span>
-			</summary>
-			<div class="mobile-nav-panel">
-			<div class="mobile-site-nav" data-navigation-root={pageHref(homePage)}>
-					{showSiteNavigation && (
-						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.siteNavigation}>
-							<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
-							<NavigationTreeControls
-								idPrefix="mobile-tree-navigation"
-								nodes={siteNavigationTree}
-							/>
-							<NavigationPageTree
-								nodes={siteNavigationTree}
-								currentPage={currentPage}
-								variant="mobile"
-								integratePageSections={navigationMode === 'tree'}
-							/>
-						</nav>
-					)}
+					{showMobileNavigation && (
+						<details class="mobile-nav-menu" data-compact-navigation>
+							<summary>
+								<span>{projectConfig.locale.labels.navigationMenu}</span>
+								<Menu class="mobile-nav-trigger-icon mobile-nav-trigger-open" aria-hidden="true" />
+								<X class="mobile-nav-trigger-icon mobile-nav-trigger-close" aria-hidden="true" />
+							</summary>
+							<div
+								class="mobile-nav-panel"
+								data-compact-navigation-panel
+								role="dialog"
+								aria-modal="true"
+								aria-label={projectConfig.locale.labels.navigationMenu}
+							>
+								<div class="mobile-nav-panel-actions">
+									<button
+										type="button"
+										class="mobile-nav-close"
+										data-compact-navigation-close
+										aria-label={projectConfig.locale.labels.closeNavigation}
+									>
+										<X aria-hidden="true" />
+									</button>
+								</div>
+								<div
+									class="mobile-site-nav"
+									data-navigation-root={pageHref(homePage)}
+									data-navigation-state-root={pageHref(homePage)}
+								>
+									{showSiteNavigation && (
+										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.siteNavigation}>
+											<h2 tabindex="-1">{projectConfig.locale.labels.siteNavigation}</h2>
+											<NavigationTreeControls
+												idPrefix="mobile-tree-navigation"
+												nodes={siteNavigationTree}
+											/>
+											<NavigationPageTree
+												nodes={siteNavigationTree}
+												currentPage={currentPage}
+												variant="mobile"
+												integratePageSections={navigationMode === 'tree'}
+											/>
+										</nav>
+									)}
 
-					{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
-						<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
-							{!showSinglePageTopLink && (
-								<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
-							)}
-							<ul class="mobile-nav-sections">
-								{showSinglePageTopLink && (
-									<li class="mobile-nav-page-top-item">
-										<a
-											class="mobile-nav-destination mobile-nav-page-top"
-											data-page-top
-											href={pageHref(currentPage)}
-										>
-											{currentPage.title}
-										</a>
-									</li>
-								)}
-									{currentPageNavigation.sections.map((section) => (
-										<li>
-											<a class="mobile-nav-destination" href={`#${section.id}`}>{section.title}</a>
-										</li>
-								))}
-							</ul>
-						</nav>
+									{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && currentPage && (
+										<nav class="mobile-nav-view" aria-label={projectConfig.locale.labels.pageNavigation}>
+											{!showSinglePageTopLink && (
+												<h2 tabindex="-1">{projectConfig.locale.labels.pageNavigation}</h2>
+											)}
+											<ul class="mobile-nav-sections">
+												{showSinglePageTopLink && (
+													<li class="mobile-nav-page-top-item">
+														<a
+															class="mobile-nav-destination mobile-nav-page-top"
+															data-page-top
+															href={pageHref(currentPage)}
+														>
+															{currentPage.title}
+														</a>
+													</li>
+												)}
+												{currentPageNavigation.sections.map((section) => (
+													<li>
+														<a class="mobile-nav-destination" href={`#${section.id}`}>{section.title}</a>
+													</li>
+												))}
+											</ul>
+										</nav>
+									)}
+								</div>
+							</div>
+						</details>
 					)}
-				</div>
-			</div>
-				</details>}
 			</div>
 		</div>
 	)}

package/src/components/SitePage.astro

@@ -3,6 +3,7 @@ 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';
@@ -10,6 +11,7 @@ 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';
@@ -27,7 +29,7 @@ import {
 	resolvePageContentsPlacement,
 } from '../../scripts/lib/navigation-model.mjs';
 import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
-import { getEditSourceUrl } from '../../scripts/lib/edit-source-link.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';
 
@@ -96,6 +98,12 @@ const resolvedSections = await getSectionsContent(siteHtml, currentPage, childPa
 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'
@@ -108,10 +116,13 @@ const renderedSections = resolvedSections.map((section, index) => ({
 	prioritizeFirstImage: index === firstImageSectionIndex,
 }));
 const hasPageSequence = Boolean(pageSequence.previous || pageSequence.next);
-const editSourceUrl = projectConfig.editLink
-	? getEditSourceUrl({
-		baseUrl: projectConfig.editLink.baseUrl,
-		sourcePath: currentPage.contentLabel,
+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({
@@ -135,6 +146,7 @@ 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
 ));
@@ -154,15 +166,19 @@ const pageContentsPlacement = resolvePageContentsPlacement({
 	headingCount: pageContentsHeadings.length,
 });
 const hasContentsNavigation = pageContentsPlacement.placement !== 'none';
-const integratePageContentsInTree = pageContentsPlacement.placement === 'page-tree';
+const hasTrackedSectionNavigation = hasContentsNavigation
+	|| (hasTreeNavigation && currentPage.isHome && pageContentsHeadings.length >= 2);
+const integratePageContentsInTree = hasTreeNavigation;
 const showContentsRail = pageContentsPlacement.placement === 'contents-rail';
-const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+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;
 
 ---
 
@@ -174,7 +190,7 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	frameColors={frameColors}
 	pathname={currentPage.pathname}
 	footer={sitewideData.footer}
-	contentsNavigation={hasContentsNavigation}
+	contentsNavigation={hasTrackedSectionNavigation}
 	searchable
 >
 	<SiteNavigation
@@ -190,12 +206,12 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
 
 	<div class:list={['site-page-layout', {
-		'site-page-layout-tree': hasTreeNavigation,
+		'site-page-layout-tree': showTreeNavigation,
 		'site-page-layout-contents': showContentsRail,
 	}]}
 		data-page-contents-placement={hasContentsNavigation ? pageContentsPlacement.placement : undefined}
 	>
-		{hasTreeNavigation && (
+		{showTreeNavigation && (
 			<SiteTreeNavigation
 				currentPage={currentPage}
 				navigationEntries={siteNavigation}
@@ -205,7 +221,7 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 		<main
 			class:list={['site-content', {
 				'site-content-has-breadcrumbs': reserveBreadcrumbSpace,
-				'site-content-has-edit-source': Boolean(editSourceUrl),
+				'site-content-has-edit-source': Boolean(editSourceTarget),
 				'site-content-has-page-sequence': hasPageSequence,
 			}]}
 			id="main-content"
@@ -215,13 +231,6 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			{showBreadcrumbs
 				? <SiteBreadcrumbs currentPage={currentPage} nodes={siteNodes} />
 				: reserveBreadcrumbSpace && <div class="site-breadcrumbs" aria-hidden="true"></div>}
-			{showContentsRail && (
-				<PageContentsNavigation
-					headings={pageContentsHeadings}
-					pageTitle={currentPage.title}
-					variant="inline"
-				/>
-			)}
 			{renderedSections.map(({ section, sectionIndex, prioritizeFirstImage }) => (
 				<SiteSection
 					section={section}
@@ -231,8 +240,13 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 					prioritizeFirstImage={prioritizeFirstImage}
 				/>
 			))}
-			{editSourceUrl && (
-				<EditSourceLink href={editSourceUrl} label={projectConfig.locale.labels.editSource} />
+			{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>
@@ -240,10 +254,11 @@ const reserveBreadcrumbSpace = hasTreeNavigation || showBreadcrumbs;
 			<PageContentsNavigation
 				headings={pageContentsHeadings}
 				pageTitle={currentPage.title}
-				variant="rail"
 			/>
 		)}
 	</div>
 	{hasTreeNavigation && <TreeNavigationScript />}
 	{hasCodeBlocks && <CodeBlockCopyScript />}
+	{hasTables && <TableOverflowScript />}
+	{hasImageStack && <ImageStackEnhancement />}
 </BaseLayout>

package/src/components/SiteTreeNavigation.astro

@@ -1,5 +1,6 @@
 ---
 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';
@@ -18,6 +19,7 @@ const activeRoot = roots.find((node) => (
 	|| currentPage.pageDirectory.startsWith(`${node.node.pageDirectory}/pages/`)
 ));
 const navigationRoot = activeRoot?.node.pagePath ? `/${activeRoot.node.pagePath}/` : '/';
+const navigationStateRoot = withBasePath(projectConfig.site.basePath, '/');
 ---
 
 {activeRoot && (
@@ -25,6 +27,7 @@ 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"

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>