@andesine/ui 0.4.0

package/dist/solid/source/index.jsx

@@ -0,0 +1,1166 @@
+import { createContext, createEffect, createSignal, createUniqueId, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
+import { Tabs as Tabs$1 } from "@ark-ui/solid/tabs";
+//#region src/core/storage.ts
+/** Reads a JSON value from session storage. Storage can be unavailable, so errors give `undefined`. */
+const readSession = (key) => {
+	try {
+		return JSON.parse(sessionStorage.getItem(key) ?? "null") ?? void 0;
+	} catch {
+		return;
+	}
+};
+const writeSession = (key, value) => {
+	try {
+		sessionStorage.setItem(key, JSON.stringify(value));
+	} catch {}
+};
+//#endregion
+//#region src/solid/navigation-tree/create-navigation-tree.ts
+const syncEvent$1 = "andesine:navigation-tree";
+const getActiveGroups = (items) => {
+	return items.flatMap((item) => {
+		return item.children?.length && item.active ? [item.id, ...getActiveGroups(item.children)] : [];
+	});
+};
+const getDefaultGroups = (items, depth) => {
+	return depth > 0 ? items.flatMap((item) => {
+		return item.children?.length ? [item.id, ...getDefaultGroups(item.children, depth - 1)] : [];
+	}) : [];
+};
+/** The saved groups replace the defaults; the current page's groups are always expanded. */
+const getInitialGroups = (options) => {
+	const items = options.items();
+	const saved = !isServer && options.storageKey ? readSession(options.storageKey) : void 0;
+	const base = Array.isArray(saved) ? saved.map(String) : getDefaultGroups(items, options.defaultDepth ?? 0);
+	return /* @__PURE__ */ new Set([...base, ...getActiveGroups(items)]);
+};
+const createNavigationTree = (options) => {
+	const [expanded, setExpanded] = createSignal(getInitialGroups(options));
+	const save = (ids) => {
+		if (!options.storageKey) return;
+		writeSession(options.storageKey, [...ids]);
+		window.dispatchEvent(new CustomEvent(syncEvent$1, { detail: {
+			key: options.storageKey,
+			ids: [...ids]
+		} }));
+	};
+	onMount(() => {
+		if (!options.storageKey) return;
+		const sync = (event) => {
+			const { key, ids } = event.detail;
+			if (key === options.storageKey) setExpanded(new Set(ids));
+		};
+		writeSession(options.storageKey, [...expanded()]);
+		window.addEventListener(syncEvent$1, sync);
+		onCleanup(() => window.removeEventListener(syncEvent$1, sync));
+	});
+	return {
+		isExpanded: (id) => expanded().has(id),
+		setExpanded: (id, open) => {
+			const ids = new Set(expanded());
+			if (open) ids.add(id);
+			else ids.delete(id);
+			setExpanded(ids);
+			save(ids);
+		}
+	};
+};
+//#endregion
+//#region src/solid/navigation-tree/navigation-tree.tsx
+const TreeContext = createContext();
+const ItemContext = createContext();
+const useTree = () => {
+	const tree = useContext(TreeContext);
+	if (!tree) throw new Error("NavigationTree parts must be inside NavigationTree.Root.");
+	return tree;
+};
+const useItem = () => {
+	const item = useContext(ItemContext);
+	if (!item) throw new Error("NavigationTree item parts must be inside NavigationTree.Item.");
+	return item;
+};
+const Root$5 = (props) => {
+	const [local, rest] = splitProps(props, [
+		"items",
+		"storageKey",
+		"defaultDepth"
+	]);
+	const tree = createNavigationTree({
+		items: () => local.items,
+		storageKey: local.storageKey,
+		defaultDepth: local.defaultDepth
+	});
+	return <TreeContext.Provider value={tree}>
+      <nav aria-label="Documentation" {...rest} data-scope="navigation-tree" data-part="root" data-storage-key={local.storageKey} />
+    </TreeContext.Provider>;
+};
+const List$2 = (props) => {
+	return <ul {...props} data-scope="navigation-tree" data-part="list" />;
+};
+const Item$2 = (props) => {
+	const [local, rest] = splitProps(props, ["item"]);
+	const tree = useTree();
+	const contentID = createUniqueId();
+	const isGroup = () => Boolean(local.item.children?.length);
+	return <ItemContext.Provider value={{
+		item: local.item,
+		contentID
+	}}>
+      <li {...rest} data-scope="navigation-tree" data-part="item" data-id={local.item.id} data-current={local.item.current || void 0} data-active={local.item.active || void 0} data-state={isGroup() ? tree.isExpanded(local.item.id) ? "open" : "closed" : void 0} />
+    </ItemContext.Provider>;
+};
+/** The item's page link. Activation never expands or collapses a group. */
+const Link$3 = (props) => {
+	const { item } = useItem();
+	return <a href={item.href} aria-current={item.current ? "page" : void 0} {...props} data-scope="navigation-tree" data-part="link" />;
+};
+const GroupTrigger = (props) => {
+	const tree = useTree();
+	const { item, contentID } = useItem();
+	const expanded = () => tree.isExpanded(item.id);
+	return <button type="button" {...props} aria-expanded={expanded()} aria-controls={contentID} data-scope="navigation-tree" data-part="group-trigger" data-state={expanded() ? "open" : "closed"} onClick={() => tree.setExpanded(item.id, !expanded())} />;
+};
+const GroupContent = (props) => {
+	const tree = useTree();
+	const { item, contentID } = useItem();
+	const expanded = () => tree.isExpanded(item.id);
+	return <div {...props} id={contentID} hidden={!expanded()} data-scope="navigation-tree" data-part="group-content" data-state={expanded() ? "open" : "closed"} />;
+};
+const NavigationTree = {
+	Root: Root$5,
+	List: List$2,
+	Item: Item$2,
+	Link: Link$3,
+	GroupTrigger,
+	GroupContent
+};
+//#endregion
+//#region src/core/focus.ts
+const focusableSelector = "a[href], button, input, select, textarea, summary, [tabindex]";
+/** Moves keyboard focus to an element without a second scroll, e.g. after anchor navigation. */
+const focusTarget = (target) => {
+	const temporary = !target.matches(focusableSelector);
+	if (temporary) target.setAttribute("tabindex", "-1");
+	target.focus({ preventScroll: true });
+	if (temporary) target.addEventListener("blur", () => target.removeAttribute("tabindex"), { once: true });
+};
+/** Returns the visible, enabled elements that take keyboard focus. */
+const getFocusable = (root) => {
+	return Array.from(root.querySelectorAll(focusableSelector)).filter((element) => {
+		return element.tabIndex >= 0 && !element.matches(":disabled, [aria-disabled='true']") && !element.closest("[inert], [hidden]") && element.getClientRects().length > 0;
+	});
+};
+//#endregion
+//#region src/core/scroll.ts
+/** Returns the document's `scroll-padding-top` in pixels, the height of sticky headers. */
+const getScrollOffset = () => {
+	return parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop) || 0;
+};
+/** Scrolls a container just enough to show an element, with a margin at the edges. */
+const scrollIntoContainer = (container, element, margin = 8) => {
+	const bounds = container.getBoundingClientRect();
+	const target = element.getBoundingClientRect();
+	if (target.top < bounds.top + margin) container.scrollTop += target.top - bounds.top - margin;
+	if (target.bottom > bounds.bottom - margin) container.scrollTop += target.bottom - bounds.bottom + margin;
+};
+//#endregion
+//#region src/solid/table-of-contents/create-table-of-contents.ts
+const scrollKeys = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End",
+	" "
+]);
+const intentEvents = [
+	"wheel",
+	"touchmove",
+	"keydown",
+	"pointerdown"
+];
+const createTableOfContents = (options) => {
+	const [activeID, setActiveID] = createSignal(options.headingIDs()[0]);
+	const [visibleIDs, setVisibleIDs] = createSignal([]);
+	let locked = false;
+	let userScroll = false;
+	onMount(() => {
+		let headings = [];
+		let frame = 0;
+		const update = () => {
+			const offset = getScrollOffset() + 1;
+			const atBottom = window.scrollY > 0 && window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+			const tops = headings.map((heading) => heading.getBoundingClientRect().top);
+			const passed = headings.filter((_, index) => tops[index] <= offset);
+			const visible = headings.filter((heading, index) => {
+				const end = tops[index + 1] ?? heading.parentElement.getBoundingClientRect().bottom;
+				return tops[index] < window.innerHeight && end > offset;
+			});
+			frame = 0;
+			setVisibleIDs(visible.map((heading) => heading.id));
+			if (locked) return;
+			setActiveID((atBottom ? headings.at(-1) : passed.at(-1) ?? headings[0])?.id);
+		};
+		const schedule = () => {
+			frame ||= requestAnimationFrame(update);
+		};
+		const onIntent = (event) => {
+			if (!(event instanceof KeyboardEvent) || scrollKeys.has(event.key)) userScroll = true;
+		};
+		const onScroll = () => {
+			if (userScroll) locked = false;
+			userScroll = false;
+			schedule();
+		};
+		const observer = new ResizeObserver(schedule);
+		createEffect(() => {
+			headings = options.headingIDs().flatMap((id) => document.getElementById(id) ?? []);
+			schedule();
+		});
+		observer.observe(document.body);
+		intentEvents.forEach((name) => window.addEventListener(name, onIntent, { passive: true }));
+		window.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("hashchange", schedule);
+		onCleanup(() => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			intentEvents.forEach((name) => window.removeEventListener(name, onIntent));
+			window.removeEventListener("scroll", onScroll);
+			window.removeEventListener("hashchange", schedule);
+		});
+	});
+	return {
+		activeID,
+		visibleIDs,
+		select: (id) => {
+			locked = true;
+			userScroll = false;
+			setActiveID(id);
+		}
+	};
+};
+//#endregion
+//#region src/solid/table-of-contents/table-of-contents.tsx
+const Context = createContext();
+const useTableOfContents = () => {
+	const state = useContext(Context);
+	if (!state) throw new Error("TableOfContents parts must be inside TableOfContents.Root.");
+	return state;
+};
+const Root$4 = (props) => {
+	const [local, rest] = splitProps(props, ["headingIDs"]);
+	const state = createTableOfContents({ headingIDs: () => local.headingIDs });
+	return <Context.Provider value={state}>
+      <nav aria-label="On this page" {...rest} data-scope="table-of-contents" data-part="root" />
+    </Context.Provider>;
+};
+const List$1 = (props) => {
+	return <ul {...props} data-scope="table-of-contents" data-part="list" />;
+};
+const Item$1 = (props) => {
+	return <li {...props} data-scope="table-of-contents" data-part="item" />;
+};
+/** Links to a heading, marks it as current, and moves focus to it after navigation. */
+const Link$2 = (props) => {
+	const [local, rest] = splitProps(props, ["headingID"]);
+	const state = useTableOfContents();
+	const onClick = (event) => {
+		if (!(event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey)) return;
+		state.select(local.headingID);
+		requestAnimationFrame(() => {
+			const heading = document.getElementById(local.headingID);
+			if (heading) focusTarget(heading);
+		});
+	};
+	return <a {...rest} href={`#${encodeURIComponent(local.headingID)}`} aria-current={state.activeID() === local.headingID ? "location" : void 0} data-visible={state.visibleIDs().includes(local.headingID) || void 0} data-scope="table-of-contents" data-part="link" onClick={onClick} />;
+};
+const TableOfContents = {
+	Root: Root$4,
+	List: List$1,
+	Item: Item$1,
+	Link: Link$2
+};
+//#endregion
+//#region src/solid/table-of-contents/create-table-of-contents-guide.ts
+/**
+* Measures one guide path through all table of contents links, with curves between depths, the
+* dash that highlights a range of links, and a backdrop for that range.
+*/
+const createTableOfContentsGuide = (options) => {
+	const [shape, setShape] = createSignal();
+	const [stroke, setStroke] = createSignal();
+	const links = /* @__PURE__ */ new Map();
+	const inset = options.inset ?? 6;
+	const radius = options.radius ?? 8;
+	const edgePoints = options.edgePoints ?? 16;
+	let track;
+	let marker;
+	onMount(() => {
+		let frame = 0;
+		const measure = () => {
+			const bounds = track?.getBoundingClientRect();
+			const segments = options.ids().flatMap((id) => {
+				const rect = links.get(id)?.getBoundingClientRect();
+				const x = options.position(id);
+				return rect && bounds ? [{
+					id,
+					x,
+					top: rect.top - bounds.top,
+					bottom: rect.bottom - bounds.top
+				}] : [];
+			});
+			const highlighted = segments.filter((segment) => {
+				return options.highlightedIDs().includes(segment.id);
+			});
+			const first = highlighted[0];
+			const last = highlighted.at(-1);
+			const width = bounds?.width ?? 0;
+			const path = segments.map((segment, index) => {
+				const previous = segments[index - 1];
+				const line = `L ${segment.x} ${segment.bottom - inset}`;
+				if (!previous) return `M ${segment.x} ${segment.top + inset} ${line}`;
+				if (previous.x === segment.x) return line;
+				const middle = (previous.bottom + segment.top) / 2;
+				return `C ${previous.x} ${middle} ${segment.x} ${middle} ${segment.x} ${segment.top + inset} ${line}`;
+			}).join(" ");
+			frame = 0;
+			setShape(segments.length ? {
+				path,
+				width,
+				range: first && last && {
+					top: first.top,
+					height: last.bottom - first.top
+				}
+			} : void 0);
+		};
+		const schedule = () => {
+			frame ||= requestAnimationFrame(measure);
+		};
+		const observer = new ResizeObserver(schedule);
+		createEffect(() => {
+			options.highlightedIDs();
+			schedule();
+		});
+		if (track) observer.observe(track);
+		onCleanup(() => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		});
+	});
+	createEffect(() => {
+		const current = shape();
+		if (!current || !marker) return setStroke(void 0);
+		marker.setAttribute("d", current.path);
+		const total = marker.getTotalLength();
+		const lengthAt = (y) => {
+			let low = 0;
+			let high = total;
+			for (let step = 0; step < 20; step += 1) {
+				const middle = (low + high) / 2;
+				if (marker.getPointAtLength(middle).y < y) low = middle;
+				else high = middle;
+			}
+			return (low + high) / 2;
+		};
+		if (!current.range) return setStroke({
+			...current,
+			offset: 0,
+			length: 0,
+			total
+		});
+		const { top, height } = current.range;
+		const bottom = top + height;
+		const r = Math.min(radius, height / 2);
+		const xAt = (y) => marker.getPointAtLength(lengthAt(y)).x;
+		const edge = Array.from({ length: edgePoints }, (_, index) => {
+			const y = bottom - r - (height - 2 * r) * index / (edgePoints - 1);
+			return `L ${xAt(y)} ${y}`;
+		});
+		const [xTop, xBottom] = [xAt(top + r), xAt(bottom - r)];
+		const backdrop = [
+			`M ${xTop + r} ${top} L ${current.width - r} ${top}`,
+			`Q ${current.width} ${top} ${current.width} ${top + r} L ${current.width} ${bottom - r}`,
+			`Q ${current.width} ${bottom} ${current.width - r} ${bottom} L ${xBottom + r} ${bottom}`,
+			`Q ${xBottom} ${bottom} ${xBottom} ${bottom - r}`,
+			...edge,
+			`Q ${xTop} ${top} ${xTop + r} ${top} Z`
+		].join(" ");
+		const start = lengthAt(top + inset);
+		const end = lengthAt(bottom - inset);
+		setStroke({
+			...current,
+			offset: -start,
+			length: end - start,
+			total,
+			backdrop
+		});
+	});
+	createEffect(() => {
+		const viewport = options.viewport?.();
+		const first = links.get(options.highlightedIDs()[0] ?? "");
+		if (viewport && first) scrollIntoContainer(viewport, first, 12);
+	});
+	return {
+		stroke,
+		trackRef: (element) => track = element,
+		linkRef: (id, element) => links.set(id, element),
+		pathRef: (element) => marker = element
+	};
+};
+//#endregion
+//#region src/solid/mobile-navigation/enhance-mobile-navigation.ts
+/**
+* Makes a server-rendered `<details>` menu modal: it traps focus, makes the rest of the page
+* inert, locks scrolling, closes on Escape and on navigation, and restores focus.
+* Returns a cleanup function.
+*/
+const enhanceMobileNavigation = (root, options = {}) => {
+	const trigger = root.querySelector(":scope > summary");
+	const content = root.querySelector(":scope > :not(summary)");
+	const media = options.mediaQuery ? window.matchMedia(options.mediaQuery) : void 0;
+	const inertElements = /* @__PURE__ */ new Map();
+	let opened = false;
+	let previousOverflow = "";
+	if (!trigger || !content) throw new Error("Mobile navigation needs a summary and content.");
+	const setModal = (modal) => {
+		if (!modal) {
+			inertElements.forEach((inert, element) => element.inert = inert);
+			inertElements.clear();
+			document.body.style.overflow = previousOverflow;
+			return;
+		}
+		for (let branch = root; branch.parentElement; branch = branch.parentElement) for (const sibling of branch.parentElement.children) {
+			if (sibling === branch || !(sibling instanceof HTMLElement)) continue;
+			inertElements.set(sibling, sibling.inert);
+			sibling.inert = true;
+		}
+		previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+	};
+	const sync = () => {
+		const open = root.open && (media?.matches ?? true);
+		if (root.open && !open) root.open = false;
+		if (opened === open) return;
+		opened = open;
+		setModal(open);
+		if (open) (getFocusable(content)[0] ?? trigger).focus({ preventScroll: true });
+		options.onOpenChange?.(open);
+	};
+	const close = () => {
+		root.open = false;
+		sync();
+	};
+	const onToggle = (event) => {
+		if (event.target !== root) return;
+		const hadFocus = content.contains(document.activeElement);
+		sync();
+		if (!opened && hadFocus) trigger.focus({ preventScroll: true });
+	};
+	const onKeyDown = (event) => {
+		if (!opened || event.defaultPrevented) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close();
+			trigger.focus({ preventScroll: true });
+		}
+		if (event.key !== "Tab") return;
+		const items = [trigger, ...getFocusable(content)];
+		const edge = event.shiftKey ? items[0] : items.at(-1);
+		if (document.activeElement !== edge) return;
+		event.preventDefault();
+		(event.shiftKey ? items.at(-1) : items[0])?.focus();
+	};
+	const onClick = (event) => {
+		const link = event.target.closest("a[href]");
+		const isPlainClick = event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+		if (!(opened && isPlainClick && link !== null && content.contains(link))) return;
+		const url = new URL(link.href);
+		const samePage = url.origin === location.origin && url.pathname === location.pathname;
+		close();
+		if (samePage) requestAnimationFrame(() => {
+			const target = url.hash && document.getElementById(decodeURIComponent(url.hash.slice(1))) || options.navigationTarget?.();
+			if (target) focusTarget(target);
+			else trigger.focus({ preventScroll: true });
+		});
+	};
+	root.addEventListener("toggle", onToggle);
+	root.addEventListener("keydown", onKeyDown);
+	root.addEventListener("click", onClick);
+	media?.addEventListener("change", sync);
+	sync();
+	return () => {
+		root.removeEventListener("toggle", onToggle);
+		root.removeEventListener("keydown", onKeyDown);
+		root.removeEventListener("click", onClick);
+		media?.removeEventListener("change", sync);
+		if (opened) setModal(false);
+	};
+};
+//#endregion
+//#region src/solid/mobile-navigation/mobile-navigation.tsx
+/** A `<details>` menu; without JavaScript, it still opens and closes. */
+const Root$3 = (props) => {
+	const [local, rest] = splitProps(props, [
+		"mediaQuery",
+		"navigationTarget",
+		"onOpenChange"
+	]);
+	let root;
+	onMount(() => onCleanup(enhanceMobileNavigation(root, local)));
+	return <details {...rest} ref={root} data-scope="mobile-navigation" data-part="root" />;
+};
+const Trigger = (props) => {
+	return <summary {...props} data-scope="mobile-navigation" data-part="trigger" />;
+};
+const Content = (props) => {
+	return <div {...props} data-scope="mobile-navigation" data-part="content" />;
+};
+const MobileNavigation = {
+	Root: Root$3,
+	Trigger,
+	Content
+};
+//#endregion
+//#region src/solid/breadcrumbs/index.tsx
+const Root$2 = (props) => {
+	return <nav aria-label="Breadcrumbs" {...props} data-scope="breadcrumbs" data-part="root" />;
+};
+const List = (props) => {
+	return <ol {...props} data-scope="breadcrumbs" data-part="list" />;
+};
+const Item = (props) => {
+	return <li {...props} data-scope="breadcrumbs" data-part="item" />;
+};
+const Link$1 = (props) => {
+	return <a {...props} data-scope="breadcrumbs" data-part="link" />;
+};
+/** An ancestor without a page. */
+const Label = (props) => {
+	return <span {...props} data-scope="breadcrumbs" data-part="label" />;
+};
+const Separator = (props) => {
+	return <span aria-hidden="true" {...props} data-scope="breadcrumbs" data-part="separator" />;
+};
+const Breadcrumbs = {
+	Root: Root$2,
+	List,
+	Item,
+	Link: Link$1,
+	Label,
+	Separator
+};
+//#endregion
+//#region src/solid/pagination/index.tsx
+const Root$1 = (props) => {
+	return <nav aria-label="Pages" {...props} data-scope="pagination" data-part="root" />;
+};
+const Link = (props) => {
+	const [local, rest] = splitProps(props, ["direction"]);
+	return <a {...rest} rel={local.direction === "previous" ? "prev" : "next"} data-scope="pagination" data-part="link" data-direction={local.direction} />;
+};
+const Pagination = {
+	Root: Root$1,
+	Link
+};
+//#endregion
+//#region src/solid/tabs/tabs.tsx
+const syncEvent = "andesine:tabs";
+const Root = (props) => {
+	const [local, rest] = splitProps(props, [
+		"values",
+		"defaultValue",
+		"syncKey",
+		"onValueChange"
+	]);
+	const [value, setValue] = createSignal(local.defaultValue ?? local.values[0] ?? "");
+	const storageKey = () => `andesine-tabs:${local.syncKey}`;
+	const select = (next) => {
+		if (typeof next === "string" && local.values.includes(next)) setValue(next);
+	};
+	onMount(() => {
+		if (!local.syncKey) return;
+		const sync = (event) => {
+			const { key, value } = event.detail;
+			if (key === local.syncKey) select(value);
+		};
+		select(readSession(storageKey()));
+		window.addEventListener(syncEvent, sync);
+		onCleanup(() => window.removeEventListener(syncEvent, sync));
+	});
+	return <Tabs$1.Root {...rest} value={value()} onValueChange={(details) => {
+		setValue(details.value);
+		local.onValueChange?.(details);
+		if (!local.syncKey) return;
+		writeSession(storageKey(), details.value);
+		window.dispatchEvent(new CustomEvent(syncEvent, { detail: {
+			key: local.syncKey,
+			value: details.value
+		} }));
+	}} />;
+};
+const Tabs = {
+	Root,
+	List: Tabs$1.List,
+	Trigger: Tabs$1.Trigger,
+	Content: Tabs$1.Content,
+	Indicator: Tabs$1.Indicator
+};
+//#endregion
+//#region src/solid/clipboard/index.ts
+/** Copies text, and reports the result for a short time. */
+const createClipboard = (timeout = 2e3) => {
+	const [status, setStatus] = createSignal();
+	let timer;
+	onCleanup(() => clearTimeout(timer));
+	return {
+		status,
+		copy: async (text) => {
+			clearTimeout(timer);
+			try {
+				if (typeof text !== "string" && typeof ClipboardItem !== "undefined") {
+					const blob = text.then((value) => new Blob([value], { type: "text/plain" }));
+					await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]);
+				} else await navigator.clipboard.writeText(await text);
+				setStatus(true);
+			} catch {
+				setStatus(false);
+			}
+			timer = setTimeout(() => setStatus(void 0), timeout);
+		}
+	};
+};
+//#endregion
+//#region src/solid/search/create-search.ts
+/**
+* Runs a search after input stops. A new query cancels the previous request, and only the
+* latest response updates the results.
+*/
+const createSearch = (options) => {
+	const [query, setQueryValue] = createSignal("");
+	const [results, setResults] = createSignal();
+	const [status, setStatus] = createSignal("idle");
+	const [error, setError] = createSignal();
+	let timer;
+	let controller;
+	const cancel = () => {
+		clearTimeout(timer);
+		controller?.abort();
+		controller = void 0;
+		if (status() === "loading") setStatus(results() ? "done" : "idle");
+	};
+	const run = async (value) => {
+		const current = new AbortController();
+		controller = current;
+		try {
+			const found = await options.search(value, current.signal);
+			if (controller !== current) return;
+			setResults(() => found);
+			setStatus("done");
+		} catch (reason) {
+			if (controller !== current || current.signal.aborted) return;
+			setError(reason);
+			setStatus("error");
+		}
+	};
+	onCleanup(cancel);
+	return {
+		query,
+		results,
+		status,
+		error,
+		cancel,
+		setQuery: (value) => {
+			cancel();
+			setQueryValue(value);
+			if (!value.trim()) {
+				setResults(void 0);
+				setStatus("idle");
+				return;
+			}
+			setStatus("loading");
+			timer = setTimeout(() => run(value.trim()), options.delay ?? 200);
+		}
+	};
+};
+//#endregion
+//#region src/solid/search/create-list-navigation.ts
+/** Keyboard navigation for a list whose focus stays on another element. */
+const createListNavigation = (options) => {
+	const [active, setActive] = createSignal(0);
+	const moves = {
+		ArrowDown: (index, count) => (index + 1) % count,
+		ArrowUp: (index, count) => (index - 1 + count) % count,
+		Home: () => 0,
+		End: (_, count) => count - 1
+	};
+	return {
+		active,
+		setActive,
+		onKeyDown: (event) => {
+			const count = options.count();
+			const move = moves[event.key];
+			if (!count || event.isComposing) return;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				options.onSelect(Math.min(active(), count - 1));
+			}
+			if (!move) return;
+			event.preventDefault();
+			setActive(move(Math.min(active(), count - 1), count));
+		}
+	};
+};
+//#endregion
+//#region src/solid/search/create-answer.ts
+/** A conversation of streamed answers, with cancellation and follow-up questions. */
+const createAnswer = (options) => {
+	const [turns, setTurns] = createSignal([]);
+	let controller;
+	const pending = () => turns().at(-1)?.status === "loading";
+	const updateLast = (current, turn) => {
+		if (controller !== current) return;
+		setTurns((list) => [...list.slice(0, -1), {
+			...list.at(-1),
+			...turn
+		}]);
+	};
+	const cancel = () => {
+		controller?.abort();
+		controller = void 0;
+		if (pending()) setTurns((list) => list.slice(0, -1));
+	};
+	const run = async (question) => {
+		const current = new AbortController();
+		cancel();
+		controller = current;
+		const history = turns().filter((turn) => turn.status === "done");
+		setTurns([...history, {
+			question,
+			status: "loading"
+		}]);
+		try {
+			const answer = await options.ask(question, history, current.signal, (partial) => {
+				return updateLast(current, { answer: partial });
+			});
+			updateLast(current, {
+				answer,
+				status: "done"
+			});
+		} catch (error) {
+			if (current.signal.aborted) return;
+			updateLast(current, {
+				status: "error",
+				error
+			});
+		} finally {
+			if (controller === current) controller = void 0;
+		}
+	};
+	onCleanup(cancel);
+	return {
+		turns,
+		pending,
+		cancel,
+		ask: (question) => {
+			run(question).catch(() => {});
+		},
+		reset: () => {
+			cancel();
+			setTurns([]);
+		}
+	};
+};
+//#endregion
+//#region src/core/platform.ts
+/** Apple devices use Command in place of Ctrl for shortcuts. */
+const isApplePlatform = () => {
+	return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+};
+//#endregion
+//#region src/solid/search/create-search-palette.ts
+/**
+* The state of a search dialog: search as you type, AI answers with follow-ups, keyboard
+* navigation, the ⌘K or Ctrl+K shortcut, trigger elements, and a query in the URL.
+*/
+const createSearchPalette = (options) => {
+	const [open, setOpen] = createSignal(false);
+	const [isApple, setIsApple] = createSignal(true);
+	const [input, setInput] = createSignal();
+	const search = createSearch({
+		search: options.search,
+		delay: options.delay ?? 250
+	});
+	const answer = options.ask && createAnswer({ ask: options.ask });
+	const items = () => {
+		const results = search.results();
+		return results === void 0 ? [] : options.items(results);
+	};
+	const canAsk = () => Boolean(answer && search.query().trim());
+	const showingAnswer = () => {
+		return !search.query().trim() && Boolean(answer && answer.turns().length);
+	};
+	const openItem = (item) => {
+		setOpen(false);
+		window.location.assign(item.href);
+	};
+	const askQuery = () => {
+		const question = search.query().trim();
+		if (!question || !answer) return;
+		follow = true;
+		answer.ask(question);
+		search.setQuery("");
+	};
+	const navigation = createListNavigation({
+		count: () => search.status() === "loading" ? 0 : items().length + (canAsk() ? 1 : 0),
+		onSelect: (index) => {
+			const item = items()[index];
+			if (item) openItem(item);
+			else askQuery();
+		}
+	});
+	let results;
+	let resumeSearch = false;
+	let follow = true;
+	createEffect(() => {
+		search.results();
+		navigation.setActive(0);
+	});
+	createEffect(on(open, (isOpen) => {
+		if (isOpen) {
+			if (resumeSearch) search.setQuery(search.query());
+			resumeSearch = false;
+			return;
+		}
+		resumeSearch = search.status() === "loading";
+		search.cancel();
+		answer?.cancel();
+	}));
+	createEffect(() => {
+		answer?.turns();
+		if (follow && results) queueMicrotask(() => results.scrollTo({ top: results.scrollHeight }));
+	});
+	onMount(() => {
+		const url = new URL(window.location.href);
+		const param = options.queryParam ?? "q";
+		const query = url.searchParams.get(param)?.trim();
+		const onShortcut = (event) => {
+			if (!(event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey))) return;
+			event.preventDefault();
+			setOpen(true);
+		};
+		const onClick = (event) => {
+			if (event.target.closest(options.triggerSelector ?? "[data-search-trigger]")) setOpen(true);
+		};
+		setIsApple(isApplePlatform());
+		if (query) {
+			url.searchParams.delete(param);
+			window.history.replaceState(window.history.state, "", url);
+			search.setQuery(query.slice(0, options.maxLength ?? 500));
+			setOpen(true);
+		}
+		document.addEventListener("keydown", onShortcut);
+		document.addEventListener("click", onClick);
+		onCleanup(() => {
+			document.removeEventListener("keydown", onShortcut);
+			document.removeEventListener("click", onClick);
+		});
+	});
+	return {
+		open,
+		setOpen,
+		search,
+		answer,
+		items,
+		canAsk,
+		showingAnswer,
+		navigation,
+		isApple,
+		askQuery,
+		openItem,
+		input,
+		inputRef: setInput,
+		resultsRef: (element) => {
+			results = element;
+			element.addEventListener("scroll", () => {
+				follow = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
+			});
+		},
+		onInputKeyDown: (event) => {
+			const isTouch = window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+			if (event.key === "Enter" && isTouch) {
+				event.preventDefault();
+				input()?.blur();
+				return;
+			}
+			if (showingAnswer()) return;
+			navigation.onKeyDown(event);
+			queueMicrotask(() => {
+				results?.querySelector(`[data-search-result="${navigation.active()}"]`)?.scrollIntoView({ block: "nearest" });
+			});
+		}
+	};
+};
+//#endregion
+//#region src/solid/search/highlight.ts
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/** The whole query and its words of two or more characters, longest first. */
+const getMatchTerms = (query) => {
+	const phrase = query.trim().toLowerCase();
+	if (!phrase) return [];
+	return [.../* @__PURE__ */ new Set([phrase, ...phrase.split(/\s+/).filter((term) => term.length >= 2)])].sort((a, b) => b.length - a.length);
+};
+const matchesQuery = (text, query) => {
+	return getMatchTerms(query).some((term) => text.toLowerCase().includes(term));
+};
+/** Splits text into parts that match the query and parts that do not, for highlighting. */
+const splitMatches = (text, query) => {
+	const terms = getMatchTerms(query);
+	if (!terms.length) return [{
+		text,
+		match: false
+	}];
+	return text.split(new RegExp(`(${terms.map(escapeRegExp).join("|")})`, "giu")).filter(Boolean).map((part) => ({
+		text: part,
+		match: terms.includes(part.toLowerCase())
+	}));
+};
+/** Cuts the text to start just before the first match of the query. */
+const getMatchPreview = (text, query, options = {}) => {
+	const lower = text.toLowerCase();
+	const matches = getMatchTerms(query).map((term) => lower.indexOf(term)).filter((index) => index >= 0);
+	const start = matches.length ? Math.max(Math.min(...matches) - (options.prefix ?? 24), 0) : 0;
+	const end = Math.min(start + (options.length ?? 180), text.length);
+	return `${start > 0 ? "…" : ""}${text.slice(start, end).trim()}${end < text.length ? "…" : ""}`;
+};
+//#endregion
+//#region src/solid/page-actions/create-page-actions.ts
+/** Copies the page URL or its Markdown alternative. */
+const createPageActions = (options) => {
+	const [item, setItem] = createSignal("link");
+	const clipboard = createClipboard(options.timeout);
+	let markdown;
+	const loadMarkdown = () => {
+		markdown ??= fetch(options.markdown).then((response) => {
+			if (!response.ok) throw new Error(`Markdown request failed (${response.status}).`);
+			return response.text();
+		});
+		markdown.catch(() => markdown = void 0);
+		return markdown;
+	};
+	const result = () => {
+		const success = clipboard.status();
+		return success === void 0 ? void 0 : {
+			item: item(),
+			success
+		};
+	};
+	return {
+		result,
+		copyLink: () => {
+			setItem("link");
+			return clipboard.copy(window.location.href);
+		},
+		copyMarkdown: () => {
+			setItem("markdown");
+			return clipboard.copy(loadMarkdown());
+		}
+	};
+};
+//#endregion
+//#region src/solid/scroll/create-scroll-memory.ts
+/** Keeps the scroll position of a container between pages, and shows the current item. */
+const createScrollMemory = (options) => {
+	onMount(() => {
+		const container = options.container();
+		const current = options.current?.();
+		if (!container) return;
+		const save = () => writeSession(options.key, container.scrollTop);
+		container.scrollTop = Number(readSession(options.key)) || 0;
+		if (current) scrollIntoContainer(container, current);
+		container.addEventListener("scroll", save, { passive: true });
+		onCleanup(() => container.removeEventListener("scroll", save));
+	});
+};
+//#endregion
+//#region src/solid/scroll/create-scroll-edges.ts
+/** Tracks whether the page has content past the top and bottom of the viewport, e.g. for fades. */
+const createScrollEdges = () => {
+	const [start, setStart] = createSignal(false);
+	const [end, setEnd] = createSignal(false);
+	onMount(() => {
+		const root = document.documentElement;
+		const update = () => {
+			setStart(root.scrollTop > 0);
+			setEnd(root.scrollHeight - root.clientHeight - root.scrollTop >= 10);
+		};
+		const observer = new ResizeObserver(update);
+		observer.observe(document.body);
+		window.addEventListener("scroll", update, { passive: true });
+		update();
+		onCleanup(() => {
+			observer.disconnect();
+			window.removeEventListener("scroll", update);
+		});
+	});
+	return {
+		start,
+		end
+	};
+};
+//#endregion
+//#region src/solid/scroll/create-page-scrollbar.ts
+/**
+* An overlay scrollbar for the page, for layouts that hide the native one so pages with and
+* without overflow have the same width. It shows while the page scrolls, or when the pointer is
+* near the right edge, and supports dragging and track clicks.
+*/
+const createPageScrollbar = (options = {}) => {
+	const [metrics, setMetrics] = createSignal();
+	const [scrolling, setScrolling] = createSignal(false);
+	const [near, setNear] = createSignal(false);
+	const [dragging, setDragging] = createSignal(false);
+	const inset = options.inset ?? 4;
+	const interactive = () => near() || dragging();
+	let dragStart = 0;
+	let scrollStart = 0;
+	const scrollTo = (top) => window.scrollTo({
+		top,
+		behavior: "instant"
+	});
+	const stopDragging = () => {
+		setDragging(false);
+	};
+	onMount(() => {
+		const edgeZone = options.edgeZone ?? 16;
+		const minThumbHeight = options.minThumbHeight ?? 24;
+		let frame = 0;
+		let timer;
+		const measure = () => {
+			const root = document.documentElement;
+			const viewport = window.innerHeight;
+			const maximum = root.scrollHeight - viewport;
+			const locked = getComputedStyle(document.body).overflow === "hidden";
+			const track = viewport - inset * 2;
+			const height = Math.max(minThumbHeight, track * viewport / root.scrollHeight);
+			frame = 0;
+			setMetrics(maximum > 0 && !locked ? {
+				top: inset + window.scrollY / maximum * (track - height),
+				height,
+				ratio: maximum / (track - height)
+			} : void 0);
+		};
+		const schedule = () => {
+			frame ||= requestAnimationFrame(measure);
+		};
+		const onScroll = () => {
+			schedule();
+			setScrolling(true);
+			clearTimeout(timer);
+			timer = setTimeout(() => setScrolling(false), options.hideDelay ?? 1e3);
+		};
+		const onPointerMove = (event) => {
+			setNear(event.pointerType === "mouse" && event.clientX >= window.innerWidth - edgeZone);
+		};
+		const observer = new ResizeObserver(schedule);
+		const styleObserver = new MutationObserver(schedule);
+		observer.observe(document.body);
+		styleObserver.observe(document.body, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+		window.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", schedule);
+		window.addEventListener("pointermove", onPointerMove, { passive: true });
+		measure();
+		onCleanup(() => {
+			cancelAnimationFrame(frame);
+			clearTimeout(timer);
+			observer.disconnect();
+			styleObserver.disconnect();
+			window.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", schedule);
+			window.removeEventListener("pointermove", onPointerMove);
+		});
+	});
+	return {
+		thumb: () => {
+			const current = metrics();
+			return current && {
+				top: current.top,
+				height: current.height
+			};
+		},
+		visible: () => Boolean(metrics() && (scrolling() || interactive())),
+		interactive,
+		onTrackPointerDown: (event) => {
+			const current = metrics();
+			if (event.button !== 0 || !current) return;
+			scrollTo((event.clientY - inset - current.height / 2) * current.ratio);
+		},
+		thumbHandlers: {
+			onPointerDown: (event) => {
+				if (event.button !== 0) return;
+				event.preventDefault();
+				event.stopPropagation();
+				event.currentTarget.setPointerCapture(event.pointerId);
+				dragStart = event.clientY;
+				scrollStart = window.scrollY;
+				setDragging(true);
+			},
+			onPointerMove: (event) => {
+				const current = metrics();
+				if (dragging() && current) scrollTo(scrollStart + (event.clientY - dragStart) * current.ratio);
+			},
+			onPointerUp: stopDragging,
+			onPointerCancel: stopDragging,
+			onLostPointerCapture: stopDragging
+		}
+	};
+};
+//#endregion
+//#region src/solid/tab-indicator/create-tab-indicator.ts
+/** Measures an underline for the current tab of a scrollable row, and keeps that tab in view. */
+const createTabIndicator = (options) => {
+	const [position, setPosition] = createSignal();
+	const tabs = /* @__PURE__ */ new Map();
+	let root;
+	let scroll;
+	onMount(() => {
+		let frame = 0;
+		const measure = () => {
+			const rootBounds = root?.getBoundingClientRect();
+			const tabBounds = tabs.get(options.current())?.getBoundingClientRect();
+			frame = 0;
+			setPosition(rootBounds && tabBounds && {
+				left: tabBounds.left - rootBounds.left,
+				width: tabBounds.width
+			});
+		};
+		const schedule = () => {
+			frame ||= requestAnimationFrame(measure);
+		};
+		const observer = new ResizeObserver(schedule);
+		tabs.get(options.current())?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+		if (root) observer.observe(root);
+		scroll?.addEventListener("scroll", schedule, { passive: true });
+		schedule();
+		onCleanup(() => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			scroll?.removeEventListener("scroll", schedule);
+		});
+	});
+	return {
+		position,
+		rootRef: (element) => root = element,
+		scrollRef: (element) => scroll = element,
+		tabRef: (index, element) => tabs.set(index, element)
+	};
+};
+//#endregion
+export { Breadcrumbs, MobileNavigation, NavigationTree, Pagination, TableOfContents, Tabs, createAnswer, createClipboard, createListNavigation, createNavigationTree, createPageActions, createPageScrollbar, createScrollEdges, createScrollMemory, createSearch, createSearchPalette, createTabIndicator, createTableOfContents, createTableOfContentsGuide, enhanceMobileNavigation, getMatchPreview, getMatchTerms, matchesQuery, splitMatches, useTableOfContents };