@treeseed/core 0.10.22 → 0.11.0

package/dist/components/docs/PageFrame.astro

@@ -1,260 +0,0 @@
----
-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

@@ -1,63 +0,0 @@
----
-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

@@ -1,39 +0,0 @@
----
-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(--ts-color-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>

package/dist/components/docs/Sidebar.astro

@@ -1,41 +0,0 @@
----
-import MobileMenuFooter from '../../vendor/starlight/components/MobileMenuFooter.astro';
-import SidebarPersister from '../../vendor/starlight/components/SidebarPersister.astro';
-import SidebarSublist from '../../vendor/starlight/components/SidebarSublist.astro';
-import { TREESEED_LINKS, getBookForPath } from '../../utils/starlight-nav';
-
-const { sidebar } = Astro.locals.starlightRoute;
-const activeBook = getBookForPath(Astro.url.pathname);
----
-
-<SidebarPersister>
-	{
-		activeBook && (
-			<div class="docs-sidebar-actions">
-				<a href={TREESEED_LINKS.home} class="download-button docs-sidebar-books-button">
-					All Books
-				</a>
-			</div>
-		)
-	}
-	<SidebarSublist sublist={sidebar} />
-</SidebarPersister>
-
-<div class="md:sl-hidden">
-	<MobileMenuFooter />
-</div>
-
-<style>
-	@layer starlight.components {
-		.docs-sidebar-actions {
-			margin: 0 0 1.75rem;
-			padding: 0 0.5rem;
-		}
-
-		.docs-sidebar-books-button {
-			display: inline-flex;
-			width: 100%;
-			justify-content: center;
-		}
-	}
-</style>

package/dist/components/docs/ThemeSelect.astro

@@ -1,5 +0,0 @@
----
-import ThemeScript from '../ui/theme/ThemeScript.astro';
----
-
-<ThemeScript includeCss={false} />

package/dist/components/forms/ContactForm.astro

@@ -1,233 +0,0 @@
----
-import {
-	TREESEED_PUBLIC_TURNSTILE_SITE_KEY,
-} from 'astro:env/client';
-import { CONTACT_TYPE_LABELS } from '../../utils/forms/constants';
-import { CONTACT_TYPES } from '../../types/forms';
-import { SITE_FORMS } from '../../utils/site-config';
-
-const { status, code } = Astro.props as {
-	status?: string | null;
-	code?: string | null;
-};
-
-const messages: Record<string, string> = {
-	success: 'Your message was sent successfully.',
-	invalid_request: 'The request could not be accepted. Please refresh and try again.',
-	invalid_form: 'Please complete the required fields and try again.',
-	captcha_failed: 'Please complete the verification challenge and try again.',
-	token_invalid: 'The form session expired. Refresh the page and try again.',
-	token_expired: 'The form session expired. Refresh the page and try again.',
-	token_replayed: 'This form token has already been used. Please refresh the page.',
-	rate_limited: 'Too many attempts were detected. Please wait a few minutes and try again.',
-	delivery_failed: 'We could not deliver the message right now. Please try again shortly.',
-};
-
-const statusMessage = code ? messages[code] ?? null : null;
-const shouldBypassTurnstile = import.meta.env.DEV;
-const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
----
-
-<section class="max-w-3xl">
-	{statusMessage && (
-		<div class:list={[
-			'rounded-lg border px-4 py-3 text-sm font-medium',
-			status === 'success'
-				? 'border-[color:var(--ts-color-info)] bg-[color:var(--ts-color-info-soft)] text-[color:var(--ts-color-text)]'
-				: 'border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] text-[color:var(--ts-color-text)]',
-		]}>
-			{statusMessage}
-		</div>
-	)}
-
-	<form
-		method="post"
-		action={formsApiBaseUrl}
-		class="js-secure-form mt-6 grid gap-5"
-		data-form-type="contact"
-		data-turnstile-action="contact_submit"
-	>
-		<p class="text-sm text-[color:var(--ts-color-text-subtle)]">
-			Fields marked <span class="font-semibold text-[color:var(--ts-color-warning)]">*</span> are required.
-		</p>
-		<input type="hidden" name="formType" value="contact" />
-		<input type="hidden" name="formToken" value="" />
-		<input type="hidden" name="formSession" value="" />
-		<input type="hidden" name="redirectTo" value="/contact/" />
-		<div class="sr-only" aria-hidden="true">
-			<label>
-				Website
-				<input type="text" name="website" tabindex="-1" autocomplete="off" />
-			</label>
-		</div>
-
-		<div class="grid gap-5 md:grid-cols-2">
-			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Name <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
-				<input
-					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
-					type="text"
-					name="name"
-					autocomplete="name"
-					required
-					aria-required="true"
-				/>
-			</label>
-			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Email <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
-				<input
-					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
-					type="email"
-					name="email"
-					autocomplete="email"
-					required
-					aria-required="true"
-				/>
-			</label>
-		</div>
-
-		<div class="grid gap-5 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
-			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Organization</span>
-				<input
-					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
-					type="text"
-					name="organization"
-					autocomplete="organization"
-				/>
-			</label>
-			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Topic <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
-				<select
-					class="ts-control ts-control--select min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] px-4 py-3"
-					name="contactType"
-					required
-					aria-required="true"
-				>
-					{CONTACT_TYPES.map((contactType) => (
-						<option value={contactType}>{CONTACT_TYPE_LABELS[contactType]}</option>
-					))}
-				</select>
-			</label>
-		</div>
-
-		<label class="grid gap-2">
-			<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Subject <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
-			<input
-				class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
-				type="text"
-				name="subject"
-				required
-				aria-required="true"
-			/>
-		</label>
-
-		<label class="grid gap-2">
-			<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Message <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
-			<textarea
-				class="min-h-48 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
-				name="message"
-				required
-				aria-required="true"
-			></textarea>
-		</label>
-
-		{TREESEED_PUBLIC_TURNSTILE_SITE_KEY && !shouldBypassTurnstile ? (
-			<div class="js-turnstile rounded-md border border-dashed border-[color:var(--ts-color-border-strong)] p-3"></div>
-		) : shouldBypassTurnstile ? (
-			<p class="rounded-md border border-[color:var(--ts-color-info)] bg-[color:var(--ts-color-info-soft)] px-4 py-3 text-sm text-[color:var(--ts-color-text)]">
-				Local development mode is bypassing Turnstile so you can test the form workflow without Cloudflare captcha.
-			</p>
-		) : (
-			<p class="rounded-md border border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] px-4 py-3 text-sm text-[color:var(--ts-color-text)]">
-				Turnstile is not configured yet. Add `TREESEED_PUBLIC_TURNSTILE_SITE_KEY` before deploying forms.
-			</p>
-		)}
-
-		<div class="flex flex-wrap items-center justify-between gap-4">
-			<p class="text-sm leading-7 text-[color:var(--ts-color-text-subtle)]">
-				By sending this message, you agree that we may reply by email about this inquiry.
-			</p>
-			<button
-				type="submit"
-				class="js-submit inline-flex min-h-12 items-center justify-center border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-6 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)] disabled:cursor-not-allowed disabled:opacity-60"
-				disabled
-			>
-				Send message
-			</button>
-		</div>
-	</form>
-</section>
-
-<script
-	is:inline
-	define:vars={{ siteKey: TREESEED_PUBLIC_TURNSTILE_SITE_KEY, shouldBypassTurnstile, formsApiBaseUrl }}
->
-	const bootSecureForms = () => {
-		const forms = Array.from(document.querySelectorAll('.js-secure-form'));
-
-		for (const form of forms) {
-			if (!(form instanceof HTMLFormElement) || form.dataset.ready === 'true') continue;
-			form.dataset.ready = 'true';
-
-			const formType = form.dataset.formType;
-			const action = form.dataset.turnstileAction ?? '';
-			const tokenField = form.querySelector('input[name="formToken"]');
-			const sessionField = form.querySelector('input[name="formSession"]');
-			const submitButton = form.querySelector('.js-submit');
-			const widgetContainer = form.querySelector('.js-turnstile');
-
-			const enableSubmit = () => {
-				if (submitButton instanceof HTMLButtonElement) {
-					submitButton.disabled = !(tokenField instanceof HTMLInputElement && tokenField.value);
-				}
-			};
-
-			const assignToken = async () => {
-				const response = await fetch(`${formsApiBaseUrl}?formType=${encodeURIComponent(formType ?? '')}`, {
-					headers: { accept: 'application/json' },
-					credentials: 'same-origin',
-				});
-
-				const data = await response.json();
-				if (tokenField instanceof HTMLInputElement && data?.formToken) {
-					tokenField.value = data.formToken;
-				}
-				if (sessionField instanceof HTMLInputElement && data?.sessionId) {
-					sessionField.value = data.sessionId;
-				}
-				enableSubmit();
-			};
-
-			const renderWidget = () => {
-				if (shouldBypassTurnstile) return;
-				if (!siteKey || !(widgetContainer instanceof HTMLElement)) return;
-				if (!('turnstile' in window) || typeof window.turnstile?.render !== 'function') return;
-				if (widgetContainer.dataset.rendered === 'true') return;
-
-				window.turnstile.render(widgetContainer, {
-					sitekey: siteKey,
-					action,
-					theme: 'light',
-				});
-
-				widgetContainer.dataset.rendered = 'true';
-			};
-
-			assignToken().catch((error) => {
-				console.error('Unable to initialize form token', error);
-			});
-
-			if (siteKey) {
-				renderWidget();
-				window.addEventListener('load', renderWidget, { once: true });
-			}
-		}
-	};
-
-	if (document.readyState === 'loading') {
-		document.addEventListener('DOMContentLoaded', bootSecureForms, { once: true });
-	} else {
-		bootSecureForms();
-	}
-</script>