@mailwoman/react 9.4.0 → 10.1.0

package/lib/search/SearchModal.tsx

@@ -0,0 +1,317 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   The docs search modal. A native `<dialog>` opened with `showModal()` supplies the focus trap, the inert
+ *   background, the backdrop, the close on Escape and the return of focus to the opener. The query field is an
+ *   `<input type="search">` with the ARIA combobox role. DOM focus stays on the input, and the selected hit is
+ *   named by `aria-activedescendant`. The component owns no data access: `search` is passed in.
+ */
+
+import { type KeyboardEvent, type MouseEvent, type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react"
+
+import { useDebouncedValue } from "#common/useDebouncedValue"
+
+import type { SearchHit, SearchResponse } from "./types.ts"
+
+export interface SearchModalProps {
+	open: boolean
+	onClose: () => void
+	/**
+	 * Called with the hit's site-relative link on Enter or on an unmodified click.
+	 * Absent, the link navigates as an ordinary anchor.
+	 */
+	onNavigate?: (href: string) => void
+	/**
+	 * Runs the query.
+	 *
+	 * The function must keep a stable identity across renders (for example through `useCallback`),
+	 * because a new identity refires the request for the current query.
+	 */
+	search: (q: string, signal: AbortSignal) => Promise<SearchResponse>
+}
+
+type Status =
+	| { kind: "idle" }
+	| { kind: "loading" }
+	| { kind: "results"; response: SearchResponse }
+	| { kind: "failed" }
+
+const DEBOUNCE_MS = 150
+
+/**
+ * How long a request runs before the live region announces that the index is loading.
+ */
+const LOADING_ANNOUNCE_MS = 300
+const MAX_QUERY_LENGTH = 200
+const DEFAULT_CATEGORY = "Documentation"
+
+/**
+ * The site-relative link for a hit.
+ */
+export function hitHref(hit: Pick<SearchHit, "url" | "anchor">): string {
+	return hit.anchor === "" ? hit.url : `${hit.url}#${hit.anchor}`
+}
+
+function statusText(status: Status): string {
+	if (status.kind === "failed") return "Search is unavailable. Try again in a moment."
+
+	if (status.kind === "loading") return "Loading the search index…"
+
+	if (status.kind === "idle") return ""
+
+	const { response } = status
+
+	if (!response.hits.length) return `No results for “${response.query}”.`
+
+	return response.hits.length === 1 ? "1 result." : `${response.hits.length} results.`
+}
+
+function highlighted(hit: SearchHit): ReactNode[] {
+	const parts: ReactNode[] = []
+	let cursor = 0
+
+	for (const [start, end] of hit.highlights) {
+		if (start < cursor) continue
+
+		parts.push(hit.snippet.slice(cursor, start), <mark key={start}>{hit.snippet.slice(start, end)}</mark>)
+		cursor = end
+	}
+
+	parts.push(hit.snippet.slice(cursor))
+
+	return parts
+}
+
+function title(hit: SearchHit): string {
+	return hit.hierarchy
+		.slice(1)
+		.filter((entry): entry is string => entry !== null)
+		.join(" › ")
+}
+
+export function SearchModal({ open, onClose, onNavigate, search }: SearchModalProps) {
+	const dialogRef = useRef<HTMLDialogElement>(null)
+	const inputRef = useRef<HTMLInputElement>(null)
+	const baseID = useId()
+	const listboxID = `${baseID}-listbox`
+	const [query, setQuery] = useState("")
+	const [settled, setSettled] = useState<Status>({ kind: "idle" })
+	const [selected, setSelected] = useState(0)
+	const [loading, setLoading] = useState(false)
+	const trimmed = query.trim().slice(0, MAX_QUERY_LENGTH)
+	const debounced = useDebouncedValue(trimmed, DEBOUNCE_MS)
+
+	useEffect(() => {
+		const dialog = dialogRef.current
+
+		if (!dialog) return
+
+		if (open && !dialog.open) {
+			dialog.showModal()
+			inputRef.current?.focus()
+		} else if (!open && dialog.open) {
+			dialog.close()
+		}
+	}, [open])
+
+	useEffect(() => {
+		if (debounced === "") return
+
+		// Aborting the earlier request is what keeps a late response from replacing newer results.
+		const controller = new AbortController()
+		const loadingTimer = setTimeout(() => setLoading(true), LOADING_ANNOUNCE_MS)
+
+		search(debounced, controller.signal).then(
+			(response) => {
+				if (controller.signal.aborted) return
+
+				clearTimeout(loadingTimer)
+				setLoading(false)
+				setSettled({ kind: "results", response })
+				setSelected(0)
+			},
+			() => {
+				if (controller.signal.aborted) return
+
+				clearTimeout(loadingTimer)
+				setLoading(false)
+				setSettled({ kind: "failed" })
+			}
+		)
+
+		return () => {
+			clearTimeout(loadingTimer)
+			setLoading(false)
+			controller.abort()
+		}
+	}, [debounced, search])
+
+	// An empty query shows no results, whatever the last settled response was.
+	const status: Status = debounced === "" ? { kind: "idle" } : settled
+	const response = status.kind === "results" ? status.response : undefined
+	// The announcement reports a slow request while the last results stay on screen.
+	const announced: Status = loading && debounced !== "" ? { kind: "loading" } : status
+
+	const groups = useMemo(() => {
+		const hits = response?.hits ?? []
+		const byCategory = new Map<string, SearchHit[]>()
+
+		for (const hit of hits) {
+			const category = hit.hierarchy[0] ?? DEFAULT_CATEGORY
+
+			byCategory.set(category, [...(byCategory.get(category) ?? []), hit])
+		}
+
+		// Options are numbered in display order so the arrow keys follow what the reader sees.
+		let order = 0
+
+		return [...byCategory].map(([category, entries]) => ({
+			category,
+			entries: entries.map((hit) => ({ hit, order: order++ })),
+		}))
+	}, [response])
+
+	const ordered = groups.flatMap((group) => group.entries)
+	const optionID = (order: number) => `${baseID}-option-${order}`
+
+	function go(hit: SearchHit) {
+		const href = hitHref(hit)
+
+		onClose()
+
+		if (onNavigate) {
+			onNavigate(href)
+		} else {
+			globalThis.location.assign(href)
+		}
+	}
+
+	function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+		// A key that commits or edits an IME composition is not a command.
+		if (event.nativeEvent.isComposing) return
+
+		if (!ordered.length) return
+
+		const last = ordered.length - 1
+
+		const next =
+			event.key === "ArrowDown"
+				? selected === last
+					? 0
+					: selected + 1
+				: event.key === "ArrowUp"
+					? selected === 0
+						? last
+						: selected - 1
+					: event.key === "Home"
+						? 0
+						: event.key === "End"
+							? last
+							: undefined
+
+		if (next !== undefined) {
+			event.preventDefault()
+			setSelected(next)
+			document.getElementById(optionID(next))?.scrollIntoView({ block: "nearest" })
+		} else if (event.key === "Enter") {
+			event.preventDefault()
+
+			// The hits on screen answer an earlier query until the debounce settles.
+			if (trimmed !== debounced) return
+
+			const entry = ordered[selected]
+
+			if (entry) {
+				go(entry.hit)
+			}
+		}
+	}
+
+	function onDialogClick(event: MouseEvent<HTMLDialogElement>) {
+		// A click whose target is the dialog element itself landed on the backdrop.
+		if (event.target === event.currentTarget) {
+			event.currentTarget.close()
+		}
+	}
+
+	function onLinkClick(event: MouseEvent<HTMLAnchorElement>, hit: SearchHit) {
+		if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return
+
+		event.preventDefault()
+		go(hit)
+	}
+
+	return (
+		<dialog
+			ref={dialogRef}
+			className="mw-search"
+			aria-label="Search the documentation"
+			onClose={onClose}
+			onClick={onDialogClick}
+		>
+			<form role="search" className="mw-search__form" onSubmit={(event) => event.preventDefault()}>
+				<input
+					ref={inputRef}
+					type="search"
+					className="mw-search__input"
+					role="combobox"
+					aria-label="Search the documentation"
+					aria-autocomplete="list"
+					aria-expanded={ordered.length > 0}
+					aria-controls={listboxID}
+					aria-activedescendant={ordered.length ? optionID(selected) : undefined}
+					autoComplete="off"
+					spellCheck={false}
+					maxLength={MAX_QUERY_LENGTH}
+					placeholder="Search the documentation"
+					value={query}
+					onChange={(event) => setQuery(event.target.value)}
+					onKeyDown={onKeyDown}
+				/>
+			</form>
+
+			{response?.corrected !== undefined && (
+				<p className="mw-search__corrected">Showing results for “{response.corrected}”</p>
+			)}
+
+			<div id={listboxID} role="listbox" aria-label="Search results" className="mw-search__results">
+				{groups.map((group, groupIndex) => (
+					<div
+						key={group.category}
+						role="group"
+						aria-labelledby={`${baseID}-group-${groupIndex}`}
+						className="mw-search__group"
+					>
+						<div id={`${baseID}-group-${groupIndex}`} className="mw-search__category">
+							{group.category}
+						</div>
+						{group.entries.map(({ hit, order }) => (
+							// The option is the link itself: an option may not contain an interactive element, and
+							// `option` is an allowed role on `a[href]`, which keeps the URL for open-in-new-tab.
+							<a
+								key={order}
+								id={optionID(order)}
+								role="option"
+								aria-selected={order === selected}
+								href={hitHref(hit)}
+								tabIndex={-1}
+								className="mw-search__option"
+								onPointerMove={() => setSelected(order)}
+								onClick={(event) => onLinkClick(event, hit)}
+							>
+								<span className="mw-search__title">{title(hit)}</span>
+								{hit.snippet !== "" && <span className="mw-search__snippet">{highlighted(hit)}</span>}
+							</a>
+						))}
+					</div>
+				))}
+			</div>
+
+			<p aria-live="polite" className="mw-search__status">
+				{statusText(announced)}
+			</p>
+		</dialog>
+	)
+}

package/lib/search/search.css

@@ -0,0 +1,144 @@
+/* ---------------------------------------------------------------------------
+ * The docs search modal.
+ *
+ * The native <dialog> has zero padding, so the only click whose target is the dialog element itself is a click on
+ * the backdrop. The padding sits on the form, the results and the status line instead.
+ *
+ * The selected option is marked by an inset accent bar as well as a fill, so the selection holds 3:1 against the
+ * panel without depending on the fill alone. Colors, radii, spacing, type and motion read semantic tokens from
+ * tokens.css. The layout literals are the panel width and height caps, the 44px input height, the 3px selection
+ * bar and the backdrop scrim, for which no token exists.
+ * --------------------------------------------------------------------------- */
+
+.mw-search {
+	width: min(40rem, 92vw);
+	max-height: 70vh;
+	margin: 12vh auto 0;
+	padding: 0;
+	overflow: hidden;
+	color: var(--color-text-primary);
+	font-family: var(--font-family-text);
+	font-size: var(--font-size-callout);
+	line-height: var(--line-height-body);
+	background: var(--color-background-raised);
+	border: 1px solid var(--control-border);
+	border-radius: var(--radius-panel);
+	box-shadow: var(--material-glass-shadow);
+}
+
+.mw-search[open] {
+	display: flex;
+	flex-direction: column;
+}
+
+.mw-search::backdrop {
+	background: oklch(0% 0 264 / 0.5);
+}
+
+.mw-search__form {
+	padding: var(--space-5);
+	border-bottom: 1px solid var(--color-separator);
+}
+
+.mw-search__input {
+	width: 100%;
+	min-height: 44px;
+	padding: var(--space-3) var(--space-4);
+	color: var(--control-foreground);
+	font: inherit;
+	font-size: var(--font-size-body);
+	background: var(--control-background);
+	border: 1px solid var(--control-border);
+	border-radius: var(--radius-control);
+}
+
+.mw-search__input:focus-visible {
+	outline: 2px solid var(--color-accent);
+	outline-offset: 1px;
+}
+
+.mw-search__corrected {
+	margin: 0;
+	padding: var(--space-3) var(--space-5) 0;
+	color: var(--color-text-secondary);
+	font-size: var(--font-size-footnote);
+}
+
+.mw-search__results {
+	flex: 1 1 auto;
+	min-height: 0;
+	padding: var(--space-3) var(--space-4);
+	overflow-y: auto;
+}
+
+.mw-search__category {
+	padding: var(--space-4) var(--space-4) var(--space-2);
+	color: var(--color-text-secondary);
+	font-size: var(--font-size-footnote);
+	font-weight: var(--font-weight-semibold);
+}
+
+.mw-search__option {
+	border-radius: var(--radius-control);
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	padding: var(--space-3) var(--space-4);
+	color: inherit;
+	text-decoration: none;
+}
+
+.mw-search__option[aria-selected="true"] {
+	background: var(--color-background-sunken);
+	box-shadow: inset 3px 0 0 var(--color-accent);
+}
+
+.mw-search__title {
+	font-size: var(--font-size-subheadline);
+	font-weight: var(--font-weight-semibold);
+}
+
+.mw-search__snippet {
+	color: var(--color-text-secondary);
+	font-size: var(--font-size-footnote);
+}
+
+.mw-search__snippet mark {
+	color: var(--color-text-primary);
+	font-weight: var(--font-weight-semibold);
+	background: var(--color-accent-background);
+	border-radius: var(--radius-tick);
+}
+
+.mw-search__status {
+	margin: 0;
+	padding: var(--space-3) var(--space-5);
+	color: var(--color-text-secondary);
+	font-size: var(--font-size-footnote);
+	border-top: 1px solid var(--color-separator);
+}
+
+/* An empty live region stays rendered, because a region that appears with its text is often not announced. */
+.mw-search__status:empty {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	overflow: hidden;
+	border: 0;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.mw-search[open] {
+		animation: mw-search-open var(--duration-standard) var(--easing-decelerate);
+	}
+}
+
+@keyframes mw-search-open {
+	from {
+		opacity: 0;
+		transform: translateY(calc(var(--space-4) * -1));
+	}
+}

package/lib/search/types.ts

@@ -0,0 +1,67 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   The record the docs build indexes and the response the search modal renders. The modal and the
+ *   query code share these through `import type`.
+ */
+
+/**
+ * The number of hierarchy entries: the sidebar category, then `h1` through `h6`.
+ */
+export const HIERARCHY_DEPTH = 7
+
+export interface SearchRecord {
+	/**
+	 * The first 32 hex characters of `sha256(url + "#" + anchor + "\n" + position)`.
+	 */
+	id: string
+	/**
+	 * Site-relative path without the anchor, such as `/docs/developers/reference/cli`.
+	 */
+	url: string
+	/**
+	 * The heading id the record links to, or the empty string for the top of the page.
+	 */
+	anchor: string
+	/**
+	 * Seven entries, `lvl0` through `lvl6`, with `null` below the record's own level.
+	 */
+	hierarchy: (string | null)[]
+	/**
+	 * Aggregated text under the heading, or the empty string for a heading without body text.
+	 */
+	content: string
+	/**
+	 * Depth of the deepest non-null hierarchy entry, 0 through 6.
+	 */
+	level: number
+	/**
+	 * Zero-based order of the record on its page.
+	 */
+	position: number
+}
+
+export interface SearchHit {
+	url: string
+	anchor: string
+	hierarchy: (string | null)[]
+	/**
+	 * At most 160 characters of content around the first match.
+	 */
+	snippet: string
+	/**
+	 * Character ranges within `snippet` that matched a query token.
+	 */
+	highlights: [start: number, end: number][]
+}
+
+export interface SearchResponse {
+	query: string
+	/**
+	 * The text actually searched when a token was corrected against the vocabulary.
+	 */
+	corrected?: string
+	hits: SearchHit[]
+}

package/lib/search.ts

@@ -0,0 +1,11 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ * @file The docs search modal and its wire types.
+ */
+
+export { hitHref, SearchModal } from "./search/SearchModal.tsx"
+export type { SearchModalProps } from "./search/SearchModal.tsx"
+export { HIERARCHY_DEPTH } from "./search/types.ts"
+export type { SearchHit, SearchRecord, SearchResponse } from "./search/types.ts"

package/out/common/About.d.ts

@@ -3,10 +3,19 @@
  * @license AGPL-3.0
  * @author Teffen Ellis, et al.
  *
- *   `About` — the collapsible explainer for the browser geocoder: the neural model, the confidence colours, the
- *   gazetteer resolver, the byte-range database and the FST prior. Prose about the product a host places above or
- *   beside the geocoder; it renders nothing live.
+ * `About` — the explainer for the browser geocoder: the neural model, the confidence colors, the gazetteer resolver, the byte-range database and the FST prior. It renders no live content.
  */
 import type { ReactNode } from "react";
-export declare function About(): ReactNode;
+export interface AboutProps {
+    /**
+     * Wraps the prose in its own `<details>` disclosure.
+     *
+     * Set false where the host is already the disclosure, because a summary repeating
+     * an About button's words is one control too many.
+     *
+     * @default true
+     */
+    collapsible?: boolean;
+}
+export declare function About({ collapsible }?: AboutProps): ReactNode;
 //# sourceMappingURL=About.d.ts.map

package/out/common/About.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../lib/common/About.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,wBAAgB,KAAK,IAAI,SAAS,CA4EjC"}
+{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../lib/common/About.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,UAAU;IAC1B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,KAAK,CAAC,EAAE,WAAkB,EAAE,GAAE,UAAe,GAAG,SAAS,CAkFxE"}

package/out/common/About.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function About() {
-    return (_jsxs("details", { className: "mw-about", children: [_jsxs("summary", { className: "mw-about__summary", children: [_jsx("span", { className: "mw-about__icon", children: "\u2139\uFE0F" }), "About this geocoder"] }), _jsxs("div", { className: "mw-about__body", children: [_jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "Neural model" }), _jsxs("p", { children: ["A ~29M-parameter BERT-style encoder classifies each token into one of 33 BIO labels covering 16 address components (street, house number, unit, locality, region, postcode, venue, country, intersection, etc.). It runs entirely in your browser via ", _jsx("strong", { children: "onnxruntime-web" }), " (WebGPU with WASM SIMD fallback). The model ships as a 37.6 MB int8-quantized ONNX bundle; fp32 weights are also available for higher accuracy."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "Confidence colors" }), _jsx("p", { children: "Every classified span carries a confidence score between 0 and 1. The colors in the results table give you a quick visual read:" }), _jsxs("ul", { className: "mw-about__legend", children: [_jsxs("li", { className: "mw-about__item", children: [_jsx("span", { className: "mw-about__swatch mw-about__swatch--high" }), _jsx("strong", { children: "Green" }), " (\u2265 0.8) \u2014 high confidence. The model is nearly certain."] }), _jsxs("li", { className: "mw-about__item", children: [_jsx("span", { className: "mw-about__swatch mw-about__swatch--mid" }), _jsx("strong", { children: "Amber" }), " (0.5\u20130.8) \u2014 moderate confidence. Worth verifying."] }), _jsxs("li", { className: "mw-about__item", children: [_jsx("span", { className: "mw-about__swatch mw-about__swatch--low" }), _jsx("strong", { children: "Red" }), " (< 0.5) \u2014 low confidence. The model is unsure \u2014 likely wrong."] })] }), _jsxs("p", { children: ["These are raw model scores. For calibrated probabilities, the library ships a per-locale isotonic calibrator (", _jsx("code", { children: "calibration.json" }), ") that maps the raw scores to well-calibrated probability estimates."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "WOF resolver" }), _jsxs("p", { children: ["After classification, the resolver queries a ", _jsx("strong", { children: "Who's On First" }), " (WOF) SQLite gazetteer to match the parsed components \u2014 locality, region, and postcode \u2014 against real-world places with coordinates. The cascade tries postcode first (most precise), then locality, then the raw input text. The result is a sorted list of candidate places with WOF IDs, placetypes, lat/lon, and bounding boxes."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "Byte-range gazetteer" }), _jsxs("p", { children: ["The gazetteer is a multi-gigabyte SQLite file served from a public bucket. It loads via", " ", _jsx("strong", { children: "sql.js-httpvfs" }), ", which range-requests only the pages a lookup touches, so your browser fetches a few hundred kilobytes per session instead of the whole file."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "FST prior" }), _jsxs("p", { children: ["A ", _jsx("strong", { children: "finite-state transducer" }), " (FST) built from ~94K US place names runs before the neural classifier. It pre-annotates known locality, region, and postcode spans in the input \u2014 places like \"Springfield\" or \"Cook County\" that the FST can match exactly. These \"FST prior\" hits feed the classifier as strong hints, improving locality and region recall on addresses where the neural model alone might miss them. The FST is active whenever the selected release includes it."] })] })] })] }));
+export function About({ collapsible = true } = {}) {
+    const body = (_jsxs("div", { className: "mw-about__body", children: [_jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "Neural model" }), _jsxs("p", { children: ["A ~29M-parameter BERT-style encoder classifies each token into one of 33 BIO labels covering 16 address components (street, house number, unit, locality, region, postcode, venue, country, intersection, etc.). It runs entirely in your browser via ", _jsx("strong", { children: "onnxruntime-web" }), " (WebGPU with WASM SIMD fallback). The model ships as a 37.6 MB int8-quantized ONNX bundle; fp32 weights are also available for higher accuracy."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "Confidence colors" }), _jsx("p", { children: "Every classified span carries a confidence score between 0 and 1. The colors in the results table give you a quick visual read:" }), _jsxs("ul", { className: "mw-about__legend", children: [_jsxs("li", { className: "mw-about__item", children: [_jsx("span", { className: "mw-about__swatch mw-about__swatch--high" }), _jsx("strong", { children: "Green" }), " (\u2265 0.8) \u2014 high confidence. The model is nearly certain."] }), _jsxs("li", { className: "mw-about__item", children: [_jsx("span", { className: "mw-about__swatch mw-about__swatch--mid" }), _jsx("strong", { children: "Amber" }), " (0.5\u20130.8) \u2014 moderate confidence. Worth verifying."] }), _jsxs("li", { className: "mw-about__item", children: [_jsx("span", { className: "mw-about__swatch mw-about__swatch--low" }), _jsx("strong", { children: "Red" }), " (< 0.5) \u2014 low confidence. The model is unsure \u2014 likely wrong."] })] }), _jsxs("p", { children: ["These are raw model scores. For calibrated probabilities, the library ships a per-locale isotonic calibrator (", _jsx("code", { children: "calibration.json" }), ") that maps the raw scores to well-calibrated probability estimates."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "WOF resolver" }), _jsxs("p", { children: ["After classification, the resolver queries a ", _jsx("strong", { children: "Who's On First" }), " (WOF) SQLite gazetteer to match the parsed components \u2014 locality, region, and postcode \u2014 against real-world places with coordinates. The cascade tries postcode first (most precise), then locality, then the raw input text. The result is a sorted list of candidate places with WOF IDs, placetypes, lat/lon, and bounding boxes."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "Byte-range gazetteer" }), _jsxs("p", { children: ["The gazetteer is a multi-gigabyte SQLite file served from a public bucket. It loads via", " ", _jsx("strong", { children: "sqlite-wasm" }), " over a read-only HTTP file system. It range-requests only the pages a lookup touches. Therefore, your browser fetches a few hundred kilobytes per session instead of the whole file."] })] }), _jsxs("section", { className: "mw-about__section", children: [_jsx("h3", { className: "mw-about__heading", children: "FST prior" }), _jsxs("p", { children: ["A ", _jsx("strong", { children: "finite-state transducer" }), " (FST) built from ~94K US place names runs before the neural classifier. It pre-annotates known locality, region, and postcode spans in the input \u2014 places like \"Springfield\" or \"Cook County\" that the FST can match exactly. These \"FST prior\" hits feed the classifier as strong hints, improving locality and region recall on addresses where the neural model alone might miss them. The FST is active whenever the selected release includes it."] })] })] }));
+    if (!collapsible)
+        return body;
+    return (_jsxs("details", { className: "mw-about", children: [_jsxs("summary", { className: "mw-about__summary", children: [_jsx("span", { className: "mw-about__icon", children: "\u2139\uFE0F" }), "About this geocoder"] }), body] }));
 }
 //# sourceMappingURL=About.js.map

package/out/common/About.js.map

@@ -1 +1 @@
-{"version":3,"file":"About.js","sourceRoot":"","sources":["../../lib/common/About.tsx"],"names":[],"mappings":";AAYA,MAAM,UAAU,KAAK;IACpB,OAAO,CACN,mBAAS,SAAS,EAAC,UAAU,aAC5B,mBAAS,SAAS,EAAC,mBAAmB,aACrC,eAAM,SAAS,EAAC,gBAAgB,6BAAU,2BAEjC,EACV,eAAK,SAAS,EAAC,gBAAgB,aAC9B,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,6BAAkB,EACnD,kRAGmC,+CAAgC,wJAE/D,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,kCAAuB,EACxD,0JAGI,EACJ,cAAI,SAAS,EAAC,kBAAkB,aAC/B,cAAI,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,yCAAyC,GAAG,EAC5D,qCAAsB,0EAClB,EACL,cAAI,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,wCAAwC,GAAG,EAC3D,qCAAsB,oEAClB,EACL,cAAI,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,wCAAwC,GAAG,EAC3D,mCAAoB,gFAChB,IACD,EACL,0IAEE,8CAA6B,4EAC3B,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,6BAAkB,EACnD,yEAC8C,8CAAoC,uVAI9E,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,qCAA0B,EAC3D,mHACyF,GAAG,EAC3F,8CAA+B,sJAE5B,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,0BAAe,EAChD,8BACG,uDAAwC,0cAKvC,IACK,IACL,IACG,CACV,CAAA;AACF,CAAC"}
+{"version":3,"file":"About.js","sourceRoot":"","sources":["../../lib/common/About.tsx"],"names":[],"mappings":";AAsBA,MAAM,UAAU,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,GAAe,EAAE;IAC5D,MAAM,IAAI,GAAG,CACZ,eAAK,SAAS,EAAC,gBAAgB,aAC9B,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,6BAAkB,EACnD,kRAGmC,+CAAgC,wJAE/D,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,kCAAuB,EACxD,0JAGI,EACJ,cAAI,SAAS,EAAC,kBAAkB,aAC/B,cAAI,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,yCAAyC,GAAG,EAC5D,qCAAsB,0EAClB,EACL,cAAI,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,wCAAwC,GAAG,EAC3D,qCAAsB,oEAClB,EACL,cAAI,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,wCAAwC,GAAG,EAC3D,mCAAoB,gFAChB,IACD,EACL,0IAEC,8CAA6B,4EAC1B,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,6BAAkB,EACnD,yEAC8C,8CAAoC,uVAI9E,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,qCAA0B,EAC3D,mHACyF,GAAG,EAC3F,2CAA4B,6LAEzB,IACK,EAEV,mBAAS,SAAS,EAAC,mBAAmB,aACrC,aAAI,SAAS,EAAC,mBAAmB,0BAAe,EAChD,8BACG,uDAAwC,0cAKvC,IACK,IACL,CACN,CAAA;IAED,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,CAAA;IAE7B,OAAO,CACN,mBAAS,SAAS,EAAC,UAAU,aAC5B,mBAAS,SAAS,EAAC,mBAAmB,aACrC,eAAM,SAAS,EAAC,gBAAgB,6BAAU,2BAEjC,EACT,IAAI,IACI,CACV,CAAA;AACF,CAAC"}

package/out/common/ClientOnly.d.ts

@@ -3,21 +3,12 @@
  * @license AGPL-3.0
  * @author Teffen Ellis, et al.
  *
- *   `ClientOnly` — a portable SSR boundary. The docs explorers wrapped Docusaurus's `<BrowserOnly>`;
- *   this is the framework-agnostic equivalent so the components stay usable in any React app (Next,
- *   Remix, Docusaurus). It renders `fallback` on the server and the first client paint, then swaps to
- *   `children()` once mounted — keeping timers, clipboard, and dynamic imports off the server render.
- *
- *   The mount flag comes from `useSyncExternalStore` with a constant snapshot pair — `false` on the
- *   server, `true` in the browser — which is the store-shaped statement of exactly this boundary. The
- *   earlier `useState(false)` + `useEffect(() => setMounted(true))` said the same thing with a
- *   render-cascade the react(set-state-in-effect) rule rightly flags: the second render was the
- *   mechanism, not an accident, and the store form gets the same second paint without a set-state.
+ * `ClientOnly` — a portable SSR boundary that renders `fallback` on the server and first client paint. It swaps to `children()` after mounting, keeping timers, clipboard and dynamic imports off the server render.
  */
 import { type ReactNode } from "react";
 export interface ClientOnlyProps {
     /**
-     * Rendered once mounted in the browser. A thunk so its (browser-only) imports never run on the server.
+     * Rendered once mounted in the browser, as a thunk so its browser-only imports never run on the server.
      */
     children: () => ReactNode;
     /**

package/out/common/ClientOnly.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClientOnly.d.ts","sourceRoot":"","sources":["../../lib/common/ClientOnly.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAA;AAS5D,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,QAAQ,EAAE,MAAM,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAe,EAAE,EAAE,eAAe,GAAG,SAAS,CAQpF"}
+{"version":3,"file":"ClientOnly.d.ts","sourceRoot":"","sources":["../../lib/common/ClientOnly.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAA;AAM5D,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,QAAQ,EAAE,MAAM,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAe,EAAE,EAAE,eAAe,GAAG,SAAS,CAQpF"}

package/out/common/ClientOnly.js

@@ -3,21 +3,9 @@
  * @license AGPL-3.0
  * @author Teffen Ellis, et al.
  *
- *   `ClientOnly` — a portable SSR boundary. The docs explorers wrapped Docusaurus's `<BrowserOnly>`;
- *   this is the framework-agnostic equivalent so the components stay usable in any React app (Next,
- *   Remix, Docusaurus). It renders `fallback` on the server and the first client paint, then swaps to
- *   `children()` once mounted — keeping timers, clipboard, and dynamic imports off the server render.
- *
- *   The mount flag comes from `useSyncExternalStore` with a constant snapshot pair — `false` on the
- *   server, `true` in the browser — which is the store-shaped statement of exactly this boundary. The
- *   earlier `useState(false)` + `useEffect(() => setMounted(true))` said the same thing with a
- *   render-cascade the react(set-state-in-effect) rule rightly flags: the second render was the
- *   mechanism, not an accident, and the store form gets the same second paint without a set-state.
+ * `ClientOnly` — a portable SSR boundary that renders `fallback` on the server and first client paint. It swaps to `children()` after mounting, keeping timers, clipboard and dynamic imports off the server render.
  */
 import { useSyncExternalStore } from "react";
-/**
- * The boundary never changes after mount, so nothing ever notifies.
- */
 function subscribeNever() {
     return () => { };
 }

package/out/common/ClientOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClientOnly.js","sourceRoot":"","sources":["../../lib/common/ClientOnly.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5D;;GAEG;AACH,SAAS,cAAc;IACtB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;AAChB,CAAC;AAaD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAmB;IACxE,MAAM,OAAO,GAAG,oBAAoB,CACnC,cAAc,EACd,GAAG,EAAE,CAAC,IAAI,EACV,GAAG,EAAE,CAAC,KAAK,CACX,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;AACvC,CAAC"}
+{"version":3,"file":"ClientOnly.js","sourceRoot":"","sources":["../../lib/common/ClientOnly.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAkB,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5D,SAAS,cAAc;IACtB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;AAChB,CAAC;AAaD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAmB;IACxE,MAAM,OAAO,GAAG,oBAAoB,CACnC,cAAc,EACd,GAAG,EAAE,CAAC,IAAI,EACV,GAAG,EAAE,CAAC,KAAK,CACX,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;AACvC,CAAC"}

package/out/common/CopyButton.d.ts

@@ -9,7 +9,9 @@
 import type { ReactNode } from "react";
 export interface CopyButtonProps {
     /**
-     * The text to copy. If a thunk, it's evaluated at click time (so callers can copy the latest value).
+     * The text to copy.
+     *
+     * If a thunk, it's evaluated at click time (so callers can copy the latest value).
      */
     value: string | (() => string);
     /**