@treeseed/core 0.1.2

package/dist/components/docs/Footer.astro

@@ -0,0 +1,196 @@
+---
+import EditLink from '../../vendor/starlight/components/EditLink.astro';
+import LastUpdated from '../../vendor/starlight/components/LastUpdated.astro';
+import Pagination from '../../vendor/starlight/components/Pagination.astro';
+import config from 'virtual:starlight/user-config';
+import FooterSubscribeForm from '../forms/FooterSubscribeForm.astro';
+import DevWatchReload from '../DevWatchReload.astro';
+import { PROJECT_STAGE } from '../../utils/content-status';
+import { SITE } from '../../utils/seo';
+import { SITE_FOOTER_MENU } from '../../utils/site-config';
+---
+
+<div class="docs-footer-shell">
+	<div class="docs-footer-page-band">
+		<div class="docs-footer-page-inner">
+			<div class="docs-footer-page-meta">
+				<EditLink />
+				<LastUpdated />
+			</div>
+			<Pagination />
+			{
+				config.credits && (
+					<p class="docs-footer-credits">
+						Built with <a href="https://starlight.astro.build">Starlight</a>
+					</p>
+				)
+			}
+		</div>
+	</div>
+
+	<footer class="docs-site-footer">
+		<div class="docs-site-footer-inner">
+			<div class="docs-footer-grid">
+				<div class="docs-footer-column">
+					<p class="docs-footer-title">{SITE.name}</p>
+					<p class="docs-footer-copy">{SITE.summary}</p>
+				</div>
+				<div class="docs-footer-column">
+					<p class="docs-footer-heading">Project stage</p>
+					<p class="docs-footer-column-title">{PROJECT_STAGE.label}</p>
+					<p class="docs-footer-copy">{PROJECT_STAGE.description}</p>
+				</div>
+				{SITE_FOOTER_MENU.map((group) => (
+					<div class="docs-footer-column">
+						<p class="docs-footer-heading">{group.label}</p>
+						<div class="docs-footer-links">
+							{group.items.map((item) => (
+								<a href={item.href}>{item.label}</a>
+							))}
+						</div>
+					</div>
+				))}
+			</div>
+			<FooterSubscribeForm currentPath={Astro.url.pathname} />
+		</div>
+	</footer>
+	<DevWatchReload />
+</div>
+
+<style>
+	@layer starlight.core {
+		.docs-footer-shell {
+			margin-top: 4rem;
+			width: 100%;
+		}
+
+		.docs-footer-page-inner,
+		.docs-site-footer-inner {
+			width: min(100%, var(--site-max));
+			margin-inline: auto;
+			padding-inline: 1rem;
+		}
+
+		.docs-footer-page-band {
+			padding-bottom: 2.5rem;
+		}
+
+		.docs-footer-page-inner {
+			display: grid;
+			gap: 1.5rem;
+		}
+
+		:global(:root[data-docs-book-page='true']) .docs-footer-page-inner {
+			max-width: var(--docs-book-panel-width);
+		}
+
+		:global(:root[data-docs-book-page='true']) .docs-footer-page-inner .pagination-links > :only-child {
+			max-width: min(28rem, 100%);
+			margin-inline: auto;
+		}
+
+		.docs-footer-page-meta {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.75rem 3rem;
+			justify-content: space-between;
+			margin-top: 3rem;
+			font-size: var(--sl-text-sm);
+			color: var(--sl-color-gray-3);
+		}
+
+		.docs-footer-page-meta :global(p:only-child) {
+			margin-inline-start: auto;
+		}
+
+		.docs-footer-credits {
+			margin: 0 auto;
+			font-size: var(--sl-text-xs);
+			color: var(--sl-color-gray-3);
+		}
+
+		.docs-footer-credits a {
+			color: inherit;
+			text-decoration: none;
+		}
+
+		.docs-footer-credits a:hover,
+		.docs-footer-credits a:focus-visible {
+			color: var(--sl-color-white);
+		}
+
+		.docs-site-footer {
+			margin-top: 0;
+			border-top: 2px solid var(--site-border-strong);
+			padding-top: 2rem;
+		}
+
+		.docs-site-footer-inner {
+			padding-bottom: 3.75rem;
+		}
+
+		.docs-footer-grid {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			gap: 2rem;
+			padding-bottom: 2rem;
+		}
+
+		.docs-footer-column {
+			width: 16rem;
+		}
+
+		.docs-footer-heading {
+			font-size: var(--sl-text-sm);
+			font-weight: 600;
+			letter-spacing: 0.16em;
+			text-transform: uppercase;
+			color: var(--site-blue-strong);
+		}
+
+		.docs-footer-title,
+		.docs-footer-column-title {
+			font-size: 1.25rem;
+			font-weight: 700;
+			color: var(--site-text);
+		}
+
+		.docs-footer-copy,
+		.docs-footer-links {
+			margin-top: 0.75rem;
+			font-size: 1rem;
+			line-height: 2;
+			color: var(--site-text-muted);
+		}
+
+		.docs-footer-links {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+
+		.docs-footer-links a {
+			text-decoration: none;
+		}
+
+		.docs-footer-links a:hover,
+		.docs-footer-links a:focus-visible {
+			color: var(--site-text);
+		}
+
+		@media (min-width: 40rem) {
+			.docs-footer-page-inner,
+			.docs-site-footer-inner {
+				padding-inline: 1.5rem;
+			}
+		}
+
+		@media (min-width: 64rem) {
+			.docs-footer-page-inner,
+			.docs-site-footer-inner {
+				padding-inline: 2rem;
+			}
+		}
+	}
+</style>

package/dist/components/docs/Header.astro

@@ -0,0 +1,150 @@
+---
+import config from 'virtual:starlight/user-config';
+
+import LanguageSelect from '../../vendor/starlight/components/LanguageSelect.astro';
+import Search from '../../vendor/starlight/components/Search.astro';
+import SiteTitle from '../../vendor/starlight/components/SiteTitle.astro';
+import SocialIcons from '../../vendor/starlight/components/SocialIcons.astro';
+import DesktopSidebarToggle from './DesktopSidebarToggle.astro';
+import BookFontControls from './BookFontControls.astro';
+import DownloadBook from './DownloadBook.astro';
+import { SITE } from '../../utils/seo';
+
+const shouldRenderSearch =
+	config.pagefind || config.components.Search !== '../../vendor/starlight/components/Search.astro';
+const { hasSidebar, toc } = Astro.locals.starlightRoute;
+const hasToc = Boolean(toc);
+---
+
+<div class="header">
+	<div class="title-wrapper sl-flex">
+		<SiteTitle />
+	</div>
+	<div class="sl-hidden md:sl-flex print:hidden right-group">
+		<div class="desktop-sidebar-toggles" aria-label="Reading controls">
+			{hasSidebar && <DesktopSidebarToggle side="left" label="book contents" />}
+			{hasToc && <DesktopSidebarToggle side="right" label="page contents" />}
+		</div>
+		<BookFontControls />
+		{shouldRenderSearch && <Search class="docs-header-search" />}
+		<DownloadBook />
+		<div class="sl-flex social-icons">
+			<SocialIcons />
+			<a href="/contact/" aria-label={`Contact ${SITE.name}`} class="contact-icon">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+					<path d="M3.75 6.75h16.5v10.5H3.75z" />
+					<path d="m4.5 7.5 7.5 6 7.5-6" />
+				</svg>
+			</a>
+		</div>
+		<LanguageSelect />
+	</div>
+</div>
+
+<style>
+	@layer starlight.core {
+		.header {
+			display: flex;
+			gap: var(--sl-nav-gap);
+			justify-content: space-between;
+			align-items: center;
+			height: 100%;
+			width: 100%;
+		}
+
+		.title-wrapper {
+			overflow: clip;
+			padding: 0.25rem;
+			margin: -0.25rem;
+			min-width: 0;
+		}
+
+		.right-group,
+		.social-icons {
+			align-items: center;
+		}
+
+		.right-group {
+			margin-inline-start: auto;
+			gap: 1.25rem;
+			min-width: 0;
+		}
+
+		.desktop-sidebar-toggles {
+			display: none;
+		}
+
+		.social-icons {
+			gap: 1rem;
+			flex: 0 0 auto;
+		}
+
+		.social-icons :global(a) {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0.5rem;
+			margin: 0;
+			flex: 0 0 auto;
+		}
+
+		.contact-icon {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 2rem;
+			height: 2rem;
+			color: var(--sl-color-text);
+		}
+
+		.contact-icon:hover,
+		.contact-icon:focus-visible {
+			color: var(--sl-color-text-accent);
+		}
+
+		.contact-icon svg {
+			width: 1.25rem;
+			height: 1.25rem;
+			fill: none;
+			stroke: currentColor;
+			stroke-width: 1.8;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+		}
+
+		.social-icons::before {
+			content: '';
+			height: 2rem;
+			border-inline-start: 1px solid var(--sl-color-gray-5);
+			margin-inline-end: 0.25rem;
+			flex: 0 0 auto;
+		}
+
+		:global(.docs-header-search) {
+			margin-inline-start: auto;
+			flex: 1 1 22rem;
+		}
+
+		@media (min-width: 50rem) {
+			:global(:root[data-has-sidebar]) {
+				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+			}
+			:global(:root:not([data-has-toc])) {
+				--__toc-width: 0rem;
+			}
+			.header {
+				display: grid;
+				grid-template-columns: minmax(0, 1fr) auto;
+				align-content: center;
+			}
+		}
+
+		@media (min-width: 72rem) {
+			.desktop-sidebar-toggles {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.65rem;
+			}
+		}
+	}
+</style>

package/dist/components/docs/PageFrame.astro

@@ -0,0 +1,260 @@
+---
+import MobileMenuToggle from '../../vendor/starlight/components/MobileMenuToggle.astro';
+import { getBookForPath } from '../../utils/starlight-nav';
+
+const { hasSidebar, toc } = Astro.locals.starlightRoute;
+const hasToc = Boolean(toc);
+const isBookPage = Boolean(getBookForPath(Astro.url.pathname));
+---
+
+<div class:list={['page sl-flex', isBookPage && 'page--book']}>
+	<header class="header"><slot name="header" /></header>
+	{
+		hasSidebar && (
+			<nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
+				<MobileMenuToggle />
+				<div id="starlight__sidebar" class="sidebar-pane docs-left-sidebar">
+					<div class="sidebar-content sl-flex">
+						<slot name="sidebar" />
+					</div>
+				</div>
+			</nav>
+		)
+	}
+	<div class="main-frame"><slot /></div>
+	<div class="docs-footer-host" data-docs-footer-host></div>
+</div>
+
+<script is:inline define:vars={{ hasSidebar, hasToc, isBookPage }}>
+	const desktopQuery = window.matchMedia('(min-width: 72rem)');
+	const storageKey = 'docs.desktop-sidebar-state';
+	const bookFontScaleStorageKey = 'docs.book-font-scale';
+	const defaultBookFontScale = 1;
+	const minBookFontScale = 0.85;
+	const maxBookFontScale = 1.35;
+	const root = document.documentElement;
+	const leftSidebar = document.getElementById('starlight__sidebar');
+	const rightSidebar = document.getElementById('starlight__page-toc');
+	const pageFrame = document.querySelector('.page');
+	const footerHost = document.querySelector('[data-docs-footer-host]');
+
+	const getDefaultState = () => ({
+		left: !hasSidebar,
+		right: !hasToc,
+	});
+
+	const readState = () => {
+		try {
+			const parsed = JSON.parse(localStorage.getItem(storageKey) || '{}');
+			return {
+				left: hasSidebar ? parsed.left === true : true,
+				right: hasToc ? parsed.right === true : true,
+			};
+		} catch {
+			return getDefaultState();
+		}
+	};
+
+	const writeState = (state) => {
+		try {
+			localStorage.setItem(storageKey, JSON.stringify(state));
+		} catch {
+			// Ignore storage failures and keep the UI functional.
+		}
+	};
+
+	const syncFooterOffset = () => {
+		if (!(footerHost instanceof HTMLElement) || !desktopQuery.matches) {
+			root.style.setProperty('--docs-footer-offset', '0px');
+			return;
+		}
+
+		const footerTop = footerHost.getBoundingClientRect().top;
+		const offset = Math.max(0, window.innerHeight - footerTop);
+		root.style.setProperty('--docs-footer-offset', `${offset}px`);
+	};
+
+	const clampBookFontScale = (value) =>
+		Math.min(maxBookFontScale, Math.max(minBookFontScale, value));
+
+	const readBookFontScale = () => {
+		try {
+			const rawValue = localStorage.getItem(bookFontScaleStorageKey);
+			const parsedValue = rawValue === null ? defaultBookFontScale : Number(rawValue);
+			return Number.isFinite(parsedValue) ? clampBookFontScale(parsedValue) : defaultBookFontScale;
+		} catch {
+			return defaultBookFontScale;
+		}
+	};
+
+	const applyBookFontState = () => {
+		root.dataset.docsBookPage = String(isBookPage);
+		if (!isBookPage) {
+			root.style.removeProperty('--docs-book-font-scale');
+			return;
+		}
+
+		root.style.setProperty('--docs-book-font-scale', String(readBookFontScale()));
+	};
+
+	const setExpanded = (side, expanded) => {
+		root.dataset[`docs${side === 'left' ? 'Left' : 'Right'}SidebarExpanded`] = String(expanded);
+		const toggle = document.querySelector(`[data-docs-sidebar-toggle="${side}"]`);
+		if (toggle instanceof HTMLButtonElement) {
+			toggle.setAttribute('aria-expanded', String(expanded));
+			const label = toggle.dataset.label || '';
+			toggle.setAttribute('aria-label', `${expanded ? 'Hide' : 'Show'} ${label}`);
+			const text = toggle.querySelector('.desktop-sidebar-toggle__text');
+			if (text) {
+				text.textContent = `${expanded ? 'Hide' : 'Show'} ${label}`;
+			}
+		}
+	};
+
+	const syncAccessibility = () => {
+		const desktop = desktopQuery.matches;
+		const leftExpanded = root.dataset.docsLeftSidebarExpanded === 'true';
+		const rightExpanded = root.dataset.docsRightSidebarExpanded === 'true';
+
+		if (leftSidebar) {
+			leftSidebar.toggleAttribute('inert', desktop && !leftExpanded);
+			leftSidebar.setAttribute('aria-hidden', String(desktop && !leftExpanded));
+		}
+
+		if (rightSidebar) {
+			rightSidebar.toggleAttribute('inert', desktop && !rightExpanded);
+			rightSidebar.setAttribute('aria-hidden', String(desktop && !rightExpanded));
+		}
+	};
+
+	const applyState = (state) => {
+		setExpanded('left', hasSidebar ? state.left : false);
+		setExpanded('right', hasToc ? state.right : false);
+		syncAccessibility();
+		syncFooterOffset();
+	};
+
+	const toggleSide = (side) => {
+		const current =
+			root.dataset[`docs${side === 'left' ? 'Left' : 'Right'}SidebarExpanded`] === 'true';
+		const nextState = {
+			left: root.dataset.docsLeftSidebarExpanded === 'true',
+			right: root.dataset.docsRightSidebarExpanded === 'true',
+			[side]: !current,
+		};
+		applyState(nextState);
+		writeState(nextState);
+	};
+
+	const initialize = () => {
+		applyBookFontState();
+		const state = readState();
+		applyState(state);
+
+		if (pageFrame instanceof HTMLElement && footerHost instanceof HTMLElement) {
+			const footerShell = pageFrame.querySelector('.docs-footer-shell');
+			if (footerShell instanceof HTMLElement && footerShell.parentElement !== footerHost) {
+				footerHost.append(footerShell);
+			}
+		}
+
+		syncFooterOffset();
+
+		for (const button of document.querySelectorAll('[data-docs-sidebar-toggle]')) {
+			if (!(button instanceof HTMLButtonElement) || button.dataset.docsSidebarBound === 'true') continue;
+			button.dataset.docsSidebarBound = 'true';
+			button.addEventListener('click', () => {
+				const side = button.dataset.docsSidebarToggle;
+				if (side === 'left' || side === 'right') {
+					toggleSide(side);
+				}
+			});
+		}
+	};
+
+	initialize();
+	desktopQuery.addEventListener('change', syncAccessibility);
+	desktopQuery.addEventListener('change', syncFooterOffset);
+	window.addEventListener('scroll', syncFooterOffset, { passive: true });
+	window.addEventListener('resize', syncFooterOffset);
+</script>
+
+<style>
+	@layer starlight.core {
+		.page {
+			flex-direction: column;
+			min-height: 100vh;
+		}
+
+		.header {
+			z-index: var(--sl-z-index-navbar);
+			position: fixed;
+			inset-inline-start: 0;
+			inset-block-start: 0;
+			width: 100%;
+			height: var(--sl-nav-height);
+			border-bottom: 1px solid var(--sl-color-hairline-shade);
+			padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+			padding-inline-end: var(--sl-nav-pad-x);
+			background-color: var(--sl-color-bg-nav);
+		}
+
+		:global([data-has-sidebar]) .header {
+			padding-inline-end: calc(
+				var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
+			);
+		}
+
+		.sidebar-pane {
+			visibility: var(--sl-sidebar-visibility, hidden);
+			position: fixed;
+			z-index: var(--sl-z-index-menu);
+			inset-block: var(--sl-nav-height) var(--docs-footer-offset, 0px);
+			inset-inline-start: 0;
+			width: 100%;
+			background-color: var(--sl-color-black);
+			overflow-y: auto;
+		}
+
+		:global([aria-expanded='true']) ~ .sidebar-pane {
+			--sl-sidebar-visibility: visible;
+		}
+
+		.sidebar-content {
+			height: 100%;
+			min-height: max-content;
+			padding: 1rem var(--sl-sidebar-pad-x) 0;
+			flex-direction: column;
+			gap: 1rem;
+		}
+
+		@media (min-width: 50rem) {
+			.sidebar-content::after {
+				content: '';
+				padding-bottom: 1px;
+			}
+		}
+
+		.main-frame {
+			padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+			padding-inline-start: var(--sl-content-inline-start);
+		}
+
+		.docs-footer-host {
+			width: 100%;
+		}
+
+		@media (min-width: 50rem) {
+			:global([data-has-sidebar]) .header {
+				padding-inline-end: var(--sl-nav-pad-x);
+			}
+			.sidebar-pane {
+				--sl-sidebar-visibility: visible;
+				width: var(--sl-sidebar-width);
+				background-color: var(--sl-color-bg-sidebar);
+				border-inline-end: 1px solid var(--sl-color-hairline-shade);
+				overflow-y: auto;
+			}
+		}
+	}
+</style>

package/dist/components/docs/PageSidebar.astro

@@ -0,0 +1,63 @@
+---
+import MobileTableOfContents from '../../vendor/starlight/components/MobileTableOfContents.astro';
+import TableOfContents from '../../vendor/starlight/components/TableOfContents.astro';
+---
+
+{
+	Astro.locals.starlightRoute.toc && (
+		<>
+			<div class="lg:sl-hidden">
+				<MobileTableOfContents />
+			</div>
+			<aside
+				id="starlight__page-toc"
+				class="right-sidebar-panel sl-hidden lg:sl-block"
+				aria-label={Astro.locals.t('tableOfContents.onThisPage')}
+			>
+				<div class="sl-container">
+					<TableOfContents />
+				</div>
+			</aside>
+		</>
+	)
+}
+
+<style>
+	@layer starlight.core {
+		.right-sidebar-panel {
+			padding: 1rem var(--sl-sidebar-pad-x);
+		}
+		.sl-container {
+			width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
+		}
+		.right-sidebar-panel :global(h2) {
+			color: var(--sl-color-white);
+			font-size: var(--sl-text-h5);
+			font-weight: 600;
+			line-height: var(--sl-line-height-headings);
+			margin-bottom: 0.5rem;
+		}
+		.right-sidebar-panel :global(:where(a)) {
+			display: block;
+			font-size: var(--sl-text-xs);
+			text-decoration: none;
+			color: var(--sl-color-gray-3);
+			overflow-wrap: anywhere;
+		}
+		.right-sidebar-panel :global(:where(a):hover) {
+			color: var(--sl-color-white);
+		}
+		@media (min-width: 72rem) {
+			.sl-container {
+				max-width: calc(
+					(
+						(
+								100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
+									var(--sl-sidebar-pad-x)
+							) * 0.25
+					)
+				);
+			}
+		}
+	}
+</style>

package/dist/components/docs/PageTitle.astro

@@ -0,0 +1,39 @@
+---
+import { getBookForPath } from '../../utils/starlight-nav';
+
+const isBookPage = Boolean(getBookForPath(Astro.url.pathname));
+const PAGE_TITLE_ID = '_top';
+---
+
+<h1 id={PAGE_TITLE_ID} class:list={['docs-page-title', isBookPage && 'docs-page-title--book']}>
+	{Astro.locals.starlightRoute.entry.data.title}
+</h1>
+
+<style>
+	@layer starlight.core {
+		.docs-page-title {
+			margin-top: 1rem;
+			font-size: var(--sl-text-h1);
+			line-height: var(--sl-line-height-headings);
+			font-weight: 600;
+			color: var(--sl-color-white);
+		}
+
+		.docs-page-title--book {
+			margin-top: 0;
+			font-size: clamp(1rem, 1.1vw, 1.4rem);
+			line-height: 1.18;
+			font-weight: 800;
+			color: var(--site-accent-strong);
+			text-wrap: pretty;
+		}
+
+		@media (min-width: 72rem) {
+			.docs-page-title--book {
+				max-width: var(--docs-book-panel-width);
+				margin-inline: auto;
+				text-wrap: balance;
+			}
+		}
+	}
+</style>