@minidocs/astro 0.0.0-stage → 0.2.0

package/dist/behaviors.mjs

@@ -0,0 +1,635 @@
+//#region src/behaviors.ts
+/**
+* Restores a sidebar to how the reader left it on the previous page, so navigating changes nothing they can see.
+* Groups containing the current page are always open. Without a snapshot, the current page is scrolled into view.
+*
+* Runs inline right after the sidebar markup, before the first paint, so it must not reference anything outside itself.
+*/
+function restoreSidebar(root) {
+	const groups = [...root.querySelectorAll("[data-md-sidebar-group]")];
+	const titleOf = (group) => group.querySelector(":scope > :is(summary, a)")?.textContent?.trim() ?? "";
+	for (const group of groups) {
+		const titles = [];
+		for (let el = group; el && root.contains(el); el = el.parentElement.closest("[data-md-sidebar-group]")) titles.unshift(titleOf(el));
+		group.dataset.mdKey = titles.join("/");
+	}
+	let scroller = root;
+	while (scroller && scroller !== document.body && getComputedStyle(scroller).overflowY === "visible") scroller = scroller.parentElement;
+	if (scroller === document.body) scroller = null;
+	let snapshot = null;
+	try {
+		const key = `minidocs:sidebar:${root.id}:${document.documentElement.lang}`;
+		snapshot = JSON.parse(sessionStorage.getItem(key) ?? "null");
+	} catch {}
+	for (const group of groups) {
+		const stored = snapshot?.open[group.dataset.mdKey];
+		const open = group.querySelector("[aria-current=\"page\"]") ? true : stored;
+		if (open === void 0) continue;
+		group.dataset.state = open ? "open" : "closed";
+		if (group instanceof HTMLDetailsElement) group.open = open;
+		else {
+			const content = group.querySelector(":scope > [data-md-sidebar-group-content]");
+			if (content) content.hidden = !open;
+		}
+	}
+	if (!scroller) return;
+	if (snapshot) {
+		scroller.scrollTop = snapshot.scroll;
+		return;
+	}
+	const current = root.querySelector("[aria-current=\"page\"]");
+	if (!current) return;
+	const top = current.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+	if (top < 0 || top + current.offsetHeight > scroller.clientHeight) scroller.scrollTop += top - (scroller.clientHeight - current.offsetHeight) / 2;
+}
+/** Mirrors native collapsing into `data-state`, and remembers group and scroll state when the reader leaves the page. */
+function attachSidebar(root) {
+	const onToggle = (event) => {
+		const details = event.target;
+		if (details instanceof HTMLDetailsElement && details.hasAttribute("data-md-sidebar-group")) details.dataset.state = details.open ? "open" : "closed";
+	};
+	const onVisibilityChange = () => {
+		if (document.visibilityState !== "hidden") return;
+		const open = {};
+		for (const group of root.querySelectorAll("[data-md-key]")) open[group.dataset.mdKey] = group.dataset.state === "open";
+		let scroller = root;
+		while (scroller && scroller !== document.body && getComputedStyle(scroller).overflowY === "visible") scroller = scroller.parentElement;
+		const scroll = scroller && scroller !== document.body ? scroller.scrollTop : 0;
+		try {
+			const key = `minidocs:sidebar:${root.id}:${document.documentElement.lang}`;
+			sessionStorage.setItem(key, JSON.stringify({
+				open,
+				scroll
+			}));
+		} catch {}
+	};
+	root.addEventListener("toggle", onToggle, true);
+	document.addEventListener("visibilitychange", onVisibilityChange);
+	return () => {
+		root.removeEventListener("toggle", onToggle, true);
+		document.removeEventListener("visibilitychange", onVisibilityChange);
+	};
+}
+/** Turns a button into a toggle for the element named by its `aria-controls`. */
+function attachTrigger(button) {
+	const id = button.getAttribute("aria-controls");
+	const target = id ? document.getElementById(id) : null;
+	if (!target) {
+		console.warn(`[minidocs] Sidebar trigger points to "${id}", which is not on the page.`);
+		return () => {};
+	}
+	const setOpen = (open) => {
+		target.dataset.state = open ? "open" : "closed";
+		target.dispatchEvent(new CustomEvent("md:sidebar-toggle", {
+			detail: { open },
+			bubbles: true
+		}));
+	};
+	const sync = () => button.setAttribute("aria-expanded", String(target.dataset.state === "open"));
+	sync();
+	const onClick = () => setOpen(target.dataset.state !== "open");
+	const onKeydown = (event) => {
+		if (event.key !== "Escape" || target.dataset.state !== "open") return;
+		setOpen(false);
+		button.focus();
+	};
+	const onPointerDown = (event) => {
+		if (target.dataset.state !== "open") return;
+		const clicked = event.target;
+		if (target.contains(clicked) || clicked.closest?.(`[aria-controls="${CSS.escape(id)}"]`)) return;
+		setOpen(false);
+	};
+	button.addEventListener("click", onClick);
+	target.addEventListener("md:sidebar-toggle", sync);
+	document.addEventListener("keydown", onKeydown);
+	document.addEventListener("pointerdown", onPointerDown);
+	return () => {
+		button.removeEventListener("click", onClick);
+		target.removeEventListener("md:sidebar-toggle", sync);
+		document.removeEventListener("keydown", onKeydown);
+		document.removeEventListener("pointerdown", onPointerDown);
+	};
+}
+/**
+* Marks the link of the heading being read with `aria-current="true"`. One link is always current.
+* Each change dispatches a bubbling `md:toc-change` event with the link.
+* A heading is passed once its top crosses its own `scroll-margin-top`, so anchor jumps and highlighting line up.
+*/
+function attachToc(root) {
+	const items = [...root.querySelectorAll("a[href^=\"#\"]")].flatMap((link) => {
+		const heading = document.getElementById(decodeURIComponent(link.getAttribute("href").slice(1)));
+		return heading ? [{
+			link,
+			heading,
+			margin: 0
+		}] : [];
+	});
+	if (items.length === 0) return () => {};
+	const measure = () => {
+		for (const item of items) item.margin = Number.parseFloat(getComputedStyle(item.heading).scrollMarginTop) || 0;
+	};
+	let current;
+	let placed = false;
+	const placeMarker = (slide = false) => {
+		if (!current) return;
+		const instant = !slide || !placed;
+		if (instant) root.setAttribute("data-md-toc-instant", "");
+		const top = current.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;
+		root.style.setProperty("--md-toc-marker-top", `${top}px`);
+		root.style.setProperty("--md-toc-marker-height", `${current.offsetHeight}px`);
+		if (!instant) return;
+		getComputedStyle(root, "::after").transform;
+		root.removeAttribute("data-md-toc-instant");
+		placed = true;
+	};
+	const setCurrent = (link) => {
+		if (link === current) return;
+		current?.removeAttribute("aria-current");
+		link.setAttribute("aria-current", "true");
+		current = link;
+		placeMarker(true);
+		revealInScroller(link);
+		root.dispatchEvent(new CustomEvent("md:toc-change", {
+			detail: { link },
+			bubbles: true
+		}));
+	};
+	const update = () => {
+		const page = document.documentElement;
+		if (page.scrollHeight > innerHeight && Math.ceil(scrollY + innerHeight) >= page.scrollHeight - 1) {
+			setCurrent(items.at(-1).link);
+			return;
+		}
+		let passed = items[0].link;
+		for (const { link, heading, margin } of items) {
+			if (heading.getBoundingClientRect().top - margin > 1) break;
+			passed = link;
+		}
+		setCurrent(passed);
+	};
+	let locked;
+	const lock = () => {
+		clearTimeout(locked);
+		locked = setTimeout(() => locked = void 0, 150);
+	};
+	let frame = 0;
+	const onScroll = () => {
+		if (locked) return lock();
+		cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(update);
+	};
+	const onResize = () => {
+		measure();
+		onScroll();
+	};
+	const onClick = (event) => {
+		const link = event.target.closest("a[href^=\"#\"]");
+		const item = items.find((candidate) => candidate.link === link);
+		if (!item) return;
+		setCurrent(item.link);
+		lock();
+	};
+	const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => placeMarker());
+	resizeObserver?.observe(root);
+	measure();
+	update();
+	addEventListener("scroll", onScroll, { passive: true });
+	addEventListener("resize", onResize);
+	addEventListener("load", onResize);
+	root.addEventListener("click", onClick);
+	return () => {
+		resizeObserver?.disconnect();
+		clearTimeout(locked);
+		cancelAnimationFrame(frame);
+		removeEventListener("scroll", onScroll);
+		removeEventListener("resize", onResize);
+		removeEventListener("load", onResize);
+		root.removeEventListener("click", onClick);
+	};
+}
+/** Scrolls the closest scrollable ancestor of `element` just enough to show it, without scrolling the page. */
+function revealInScroller(element) {
+	let scroller = element.parentElement;
+	while (scroller && scroller !== document.body) {
+		if (scroller.scrollHeight > scroller.clientHeight && getComputedStyle(scroller).overflowY !== "visible") break;
+		scroller = scroller.parentElement;
+	}
+	if (!scroller || scroller === document.body) return;
+	const top = element.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+	if (top < 0) scroller.scrollTop += top;
+	else if (top + element.offsetHeight > scroller.clientHeight) scroller.scrollTop += top + element.offsetHeight - scroller.clientHeight;
+}
+/**
+* Marks a Layout.Root with `data-md-resizing` while the viewport is resized.
+* Crossing a breakpoint changes the layout, not the state, so styles turn off transitions meant for opening and closing, e.g. the drawer sliding out.
+*/
+function attachLayout(root) {
+	let timer;
+	let width = innerWidth;
+	const onResize = () => {
+		if (innerWidth === width) return;
+		width = innerWidth;
+		root.setAttribute("data-md-resizing", "");
+		clearTimeout(timer);
+		timer = setTimeout(() => root.removeAttribute("data-md-resizing"), 150);
+	};
+	addEventListener("resize", onResize);
+	return () => {
+		clearTimeout(timer);
+		root.removeAttribute("data-md-resizing");
+		removeEventListener("resize", onResize);
+	};
+}
+/**
+* Collapses a Layout.Aside that the styles show in its collapsible form, so it starts closed above the content.
+* Runs inline right after the aside, before the first paint, so it must not reference anything outside itself.
+*/
+function restoreAside(aside) {
+	if (getComputedStyle(aside).getPropertyValue("--md-layout-aside-collapsible").trim() === "1") aside.open = false;
+}
+/**
+* Keeps a Layout.Aside open while the styles show it as a column, and closes it after a link inside is followed.
+* The styles decide which form applies through --md-layout-aside-collapsible, so breakpoints live only in CSS.
+* Its title shows the heading being read, taken from md:toc-change events.
+*/
+function attachAside(aside) {
+	const summary = aside.querySelector(":scope > summary");
+	const currentText = aside.querySelector("[data-md-aside-current]");
+	const collapsible = () => getComputedStyle(aside).getPropertyValue("--md-layout-aside-collapsible").trim() === "1";
+	const showCurrent = (link) => {
+		if (currentText) currentText.textContent = link?.textContent?.trim() ?? "";
+	};
+	showCurrent(aside.querySelector("[aria-current=\"true\"]"));
+	const onTocChange = (event) => showCurrent(event.detail.link);
+	const onPointerDown = (event) => {
+		if (aside.open && collapsible() && !aside.contains(event.target)) aside.open = false;
+	};
+	const onKeydown = (event) => {
+		if (event.key !== "Escape" || !aside.open || !collapsible()) return;
+		aside.open = false;
+		summary?.focus();
+	};
+	let wasCollapsible = collapsible();
+	const sync = () => {
+		const canCollapse = collapsible();
+		if (!canCollapse) aside.open = true;
+		else if (!wasCollapsible) aside.open = false;
+		wasCollapsible = canCollapse;
+		if (summary) summary.tabIndex = canCollapse ? 0 : -1;
+	};
+	const onClick = (event) => {
+		const target = event.target;
+		if (!collapsible()) {
+			if (summary?.contains(target)) event.preventDefault();
+			return;
+		}
+		if (target.closest("a[href]") && !summary?.contains(target)) aside.open = false;
+	};
+	let frame = 0;
+	const progress = () => {
+		cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(() => {
+			const scrollable = document.documentElement.scrollHeight - innerHeight;
+			const value = scrollable > 0 ? Math.min(1, Math.max(0, scrollY / scrollable)) : 1;
+			aside.style.setProperty("--md-reading-progress", value.toFixed(3));
+		});
+	};
+	sync();
+	progress();
+	addEventListener("scroll", progress, { passive: true });
+	addEventListener("resize", progress);
+	addEventListener("resize", sync);
+	aside.addEventListener("click", onClick);
+	aside.addEventListener("md:toc-change", onTocChange);
+	document.addEventListener("pointerdown", onPointerDown);
+	document.addEventListener("keydown", onKeydown);
+	return () => {
+		cancelAnimationFrame(frame);
+		removeEventListener("scroll", progress);
+		removeEventListener("resize", progress);
+		removeEventListener("resize", sync);
+		aside.removeEventListener("click", onClick);
+		aside.removeEventListener("md:toc-change", onTocChange);
+		document.removeEventListener("pointerdown", onPointerDown);
+		document.removeEventListener("keydown", onKeydown);
+	};
+}
+/** Looks for Apple platforms, where Mod in a shortcut means ⌘ instead of Ctrl. */
+const APPLE_PLATFORM = /Mac|iPhone|iPad|iPod/;
+/**
+* Fills a Search.Shortcut with the shortcut of the trigger around it, one nested `<kbd>` per key as HTML suggests for key combinations.
+* Keys follow the platform: ⌘ and other symbols on Apple platforms, Ctrl and other names elsewhere. Each carries `data-key` for styling.
+* Without a shortcut it hides. Runs inline right after it, before the first paint, so it must not reference anything outside itself.
+*/
+function restoreShortcut(kbd) {
+	const keys = kbd.closest("[data-md-search-keys]")?.getAttribute("data-md-search-keys")?.split(" ")[0];
+	if (!keys) {
+		kbd.hidden = true;
+		return;
+	}
+	const apple = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+	kbd.dataset.platform = apple ? "apple" : "other";
+	const names = apple ? {
+		Mod: "⌘",
+		Meta: "⌘",
+		Control: "⌃",
+		Alt: "⌥",
+		Shift: "⇧"
+	} : {
+		Mod: "Ctrl",
+		Meta: "Meta",
+		Control: "Ctrl",
+		Alt: "Alt",
+		Shift: "Shift"
+	};
+	kbd.replaceChildren(...keys.split("+").map((key) => {
+		const part = document.createElement("kbd");
+		part.dataset.key = key;
+		part.textContent = names[key] ?? (key.length === 1 ? key.toUpperCase() : key);
+		return part;
+	}));
+}
+/** Reads shortcuts written as in aria-keyshortcuts, e.g. "Mod+K /", with Mod standing for the platform's command key. */
+function parseShortcuts(value, apple) {
+	return value.split(" ").filter(Boolean).map((combo) => {
+		const parts = combo.split("+");
+		const modifiers = new Set(parts.slice(0, -1).map((part) => part === "Mod" ? apple ? "Meta" : "Control" : part));
+		return {
+			key: parts.at(-1),
+			ctrl: modifiers.has("Control"),
+			meta: modifiers.has("Meta"),
+			alt: modifiers.has("Alt"),
+			shift: modifiers.has("Shift")
+		};
+	});
+}
+/** The shortcut in aria-keyshortcuts form, with Mod resolved for this platform. */
+const ariaShortcut = ({ key, ctrl, meta, alt, shift }) => [
+	ctrl && "Control",
+	meta && "Meta",
+	alt && "Alt",
+	shift && "Shift",
+	key.length === 1 ? key.toUpperCase() : key
+].filter(Boolean).join("+");
+function matchesShortcut(event, shortcut) {
+	if (event.key.toLowerCase() !== shortcut.key.toLowerCase()) return false;
+	if (event.ctrlKey !== shortcut.ctrl || event.metaKey !== shortcut.meta || event.altKey !== shortcut.alt) return false;
+	return !/^[a-z]$/i.test(shortcut.key) || event.shiftKey === shortcut.shift;
+}
+/** Whether the reader is typing somewhere, where a shortcut without Ctrl, ⌘ or Alt is just text. */
+const isTyping = (target) => target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+let optionCount = 0;
+/**
+* Runs the search inside a Search.Root: queries, states, keyboard navigation, the dialog and the triggers that point to it.
+* It never changes what `render` puts in the results container; it only reads the options there.
+* The root dispatches bubbling `md:search-open`, `md:search-close`, `md:search-select` and `md:search-error` events.
+*/
+function attachSearch(root, { source, render, debounce = 100 }) {
+	const input = root.querySelector("[data-md-search-input]");
+	const results = root.querySelector("[data-md-search-results]");
+	const dialog = root.querySelector("[data-md-search-dialog]");
+	if (!input || !results || !dialog || !root.id) {
+		console.warn("[minidocs] Search.Root needs an id, and a Search.Dialog with a Search.Input and a Search.Results inside.");
+		return () => {};
+	}
+	const triggers = [...document.querySelectorAll(`[data-md-search-trigger][aria-controls="${CSS.escape(root.id)}"]`)];
+	const apple = APPLE_PLATFORM.test(navigator.platform);
+	results.id ||= `md-search-results-${++optionCount}`;
+	input.setAttribute("aria-controls", results.id);
+	const bindings = triggers.flatMap((trigger) => {
+		const value = trigger.dataset.mdSearchKeys;
+		if (!value) return [];
+		const shortcuts = parseShortcuts(value, apple);
+		trigger.setAttribute("aria-keyshortcuts", shortcuts.map(ariaShortcut).join(" "));
+		return shortcuts;
+	});
+	const emit = (name, detail = null) => root.dispatchEvent(new CustomEvent(`md:search-${name}`, {
+		detail,
+		bubbles: true
+	}));
+	const announcer = document.createElement("div");
+	announcer.setAttribute("role", "status");
+	announcer.style.cssText = "position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap";
+	dialog.append(announcer);
+	const show = (status, query, count = 0) => {
+		root.dataset.status = status;
+		for (const part of root.querySelectorAll("[data-md-search-state]")) if (part.dataset.mdSearchState !== "loading") part.hidden = part.dataset.mdSearchState !== status;
+		for (const part of root.querySelectorAll("[data-md-search-query]")) part.textContent = query;
+		for (const part of root.querySelectorAll("[data-md-search-count]")) part.textContent = String(count);
+		results.hidden = status !== "found";
+		input.setAttribute("aria-expanded", String(status === "found"));
+		if (status === "found" || status === "empty" || status === "error") {
+			const message = root.querySelector(`[data-md-search-state="${status}"]`);
+			announcer.textContent = message?.textContent?.replace(/\s+/g, " ").trim() ?? "";
+		}
+	};
+	const setBusy = (busy) => {
+		root.toggleAttribute("aria-busy", busy);
+		for (const part of root.querySelectorAll("[data-md-search-state=\"loading\"]")) part.hidden = !busy;
+	};
+	const params = () => {
+		const values = new URLSearchParams();
+		for (const control of root.querySelectorAll("input[name], select[name], textarea[name]")) {
+			if (control.disabled || results.contains(control)) continue;
+			if (control instanceof HTMLSelectElement && control.multiple) {
+				for (const option of control.options) if (option.selected) values.append(control.name, option.value);
+			} else if (!(control instanceof HTMLInputElement && /^(checkbox|radio)$/.test(control.type) && !control.checked)) values.append(control.name, control.value);
+		}
+		return values;
+	};
+	let active;
+	let resetPending = false;
+	const options = () => [...results.querySelectorAll("[role=\"option\"]")];
+	const setActive = (option, reveal) => {
+		if (option === active) return;
+		active?.removeAttribute("aria-selected");
+		active = option;
+		if (!option) {
+			input.removeAttribute("aria-activedescendant");
+			return;
+		}
+		option.id ||= `md-search-option-${++optionCount}`;
+		option.setAttribute("aria-selected", "true");
+		input.setAttribute("aria-activedescendant", option.id);
+		if (reveal) option.scrollIntoView?.({ block: "nearest" });
+	};
+	const observer = new MutationObserver(() => {
+		if (!resetPending && active && results.contains(active)) return;
+		resetPending = false;
+		setActive(options()[0], false);
+	});
+	observer.observe(results, {
+		childList: true,
+		subtree: true
+	});
+	let timer;
+	let controller;
+	const query = async (text) => {
+		const current = new AbortController();
+		controller = current;
+		setBusy(true);
+		if (text && root.dataset.status === "idle") show("loading", text);
+		try {
+			const found = await source(text, {
+				signal: current.signal,
+				params: params()
+			});
+			if (current.signal.aborted) return;
+			render(found, results, { query: text });
+			resetPending = true;
+			setActive(options()[0], false);
+			show(found.length > 0 ? "found" : text ? "empty" : "idle", text, found.length);
+		} catch (error) {
+			if (current.signal.aborted) return;
+			console.error("[minidocs] Search failed:", error);
+			render([], results, { query: text });
+			setActive(void 0, false);
+			show("error", text);
+			emit("error", {
+				error,
+				query: text
+			});
+		}
+		setBusy(false);
+	};
+	const run = () => {
+		clearTimeout(timer);
+		controller?.abort();
+		const text = input.value.trim();
+		if (text) timer = setTimeout(() => query(text), debounce);
+		else query(text);
+	};
+	const onInput = (event) => {
+		if (event.isComposing) return;
+		const target = event.target;
+		if (target === input || target.hasAttribute("name") && !results.contains(target)) run();
+	};
+	const move = (step) => {
+		const list = options();
+		if (list.length === 0) return;
+		const index = active ? list.indexOf(active) : -1;
+		setActive(list[(index + step + list.length) % list.length], true);
+		resetPending = false;
+	};
+	const onKeydown = (event) => {
+		if (event.isComposing || event.keyCode === 229 || results.hidden) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			move(event.key === "ArrowDown" ? 1 : -1);
+		} else if (event.key === "Enter" && active && results.contains(active)) {
+			event.preventDefault();
+			const { ctrlKey, metaKey, shiftKey, altKey } = event;
+			active.dispatchEvent(new MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				view: window,
+				ctrlKey,
+				metaKey,
+				shiftKey,
+				altKey
+			}));
+		}
+	};
+	const onPointerMove = (event) => {
+		const option = event.target.closest("[role=\"option\"]");
+		if (option && results.contains(option)) {
+			setActive(option, false);
+			resetPending = false;
+		}
+	};
+	let returnTo;
+	let returnRing = false;
+	const open = () => {
+		if (!dialog.open) {
+			returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : void 0;
+			returnRing = returnTo?.matches(":focus-visible") ?? false;
+			dialog.showModal();
+			emit("open");
+			if (!input.value.trim()) run();
+		}
+		input.focus();
+		input.select();
+	};
+	const onClose = () => {
+		emit("close");
+		if (!returnTo || returnRing || document.activeElement !== returnTo) return;
+		returnTo.blur();
+		returnTo.focus({
+			focusVisible: false,
+			preventScroll: true
+		});
+	};
+	const onShortcut = (event) => {
+		if (event.defaultPrevented || event.isComposing) return;
+		const typing = isTyping(event.target);
+		if (!bindings.some((shortcut) => matchesShortcut(event, shortcut) && !(typing && !shortcut.ctrl && !shortcut.meta && !shortcut.alt))) return;
+		event.preventDefault();
+		if (dialog.open) dialog.close();
+		else open();
+	};
+	const onResultClick = (event) => {
+		const option = event.target.closest("[role=\"option\"]");
+		if (!option || !results.contains(option)) return;
+		emit("select", {
+			option,
+			query: input.value.trim()
+		});
+		if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+		dialog.close();
+	};
+	const onDialogClick = (event) => {
+		if (event.target !== dialog) return;
+		const box = dialog.getBoundingClientRect();
+		if (!(event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom)) dialog.close();
+	};
+	root.addEventListener("input", onInput);
+	input.addEventListener("compositionend", run);
+	input.addEventListener("keydown", onKeydown);
+	results.addEventListener("pointermove", onPointerMove);
+	results.addEventListener("click", onResultClick);
+	dialog.addEventListener("click", onDialogClick);
+	dialog.addEventListener("close", onClose);
+	for (const trigger of triggers) trigger.addEventListener("click", open);
+	document.addEventListener("keydown", onShortcut);
+	return () => {
+		clearTimeout(timer);
+		controller?.abort();
+		observer.disconnect();
+		announcer.remove();
+		root.removeEventListener("input", onInput);
+		input.removeEventListener("compositionend", run);
+		input.removeEventListener("keydown", onKeydown);
+		results.removeEventListener("pointermove", onPointerMove);
+		results.removeEventListener("click", onResultClick);
+		dialog.removeEventListener("click", onDialogClick);
+		dialog.removeEventListener("close", onClose);
+		for (const trigger of triggers) trigger.removeEventListener("click", open);
+		document.removeEventListener("keydown", onShortcut);
+	};
+}
+/**
+* Splits HTML such as an excerpt from Pagefind into plain and `<mark>`ed pieces, so any renderer can show it safely.
+* Every other tag is dropped and only its text is kept.
+*/
+function splitMarks(html) {
+	const template = document.createElement("template");
+	template.innerHTML = html;
+	const pieces = [];
+	const push = (text, marked) => {
+		const last = pieces.at(-1);
+		if (last?.marked === marked) last.text += text;
+		else if (text) pieces.push({
+			text,
+			marked
+		});
+	};
+	const walk = (node) => {
+		for (const child of node.childNodes) if (child.nodeType === Node.TEXT_NODE) push(child.textContent ?? "", false);
+		else if (child.nodeName === "MARK") push(child.textContent ?? "", true);
+		else walk(child);
+	};
+	walk(template.content);
+	return pieces;
+}
+//#endregion
+export { attachAside, attachLayout, attachSearch, attachSidebar, attachToc, attachTrigger, restoreAside, restoreShortcut, restoreSidebar, splitMarks };

package/dist/index.d.mts

@@ -0,0 +1,23 @@
+import { AstroIntegration } from "astro";
+//#region src/settings.d.ts
+interface MinidocsOptions {
+  /** Locales to try, in order, when a page is not translated. Locales without an entry never fall back. Requires `i18n`. */
+  fallback?: Record<string, string | string[]>;
+  /** Markdown syntax minidocs adds on top of the configured processor. */
+  markdown?: {
+    /** `:::tip[Title]` callout blocks. Defaults to `true`. */
+    directives?: boolean;
+    /** GitHub's `> [!TIP]` alerts, rendered as callouts. Defaults to `true`. */
+    alerts?: boolean;
+  };
+}
+//#endregion
+//#region src/callouts.d.ts
+/** Callout types, shared by `:::type` directives, `> [!TYPE]` alerts and the `Callout` component. */
+declare const CALLOUT_TYPES: readonly ['note', 'tip', 'important', 'warning', 'caution'];
+type CalloutType = (typeof CALLOUT_TYPES)[number];
+//#endregion
+//#region src/index.d.ts
+export default function minidocs(options?: MinidocsOptions): AstroIntegration;
+//#endregion
+export type { CalloutType, MinidocsOptions };