@mailwoman/react 9.3.0 → 10.0.0

package/lib/map/useMapLabelPick.ts

@@ -0,0 +1,123 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   `useMapLabelPick` — clicking a place label on the map searches for it, the way the reference map apps behave.
+ *
+ *   A label on a map looks like a link, so a visitor clicks it. Without this the click reaches the map's pan handler
+ *   and nothing happens, which reads as the label being decoration.
+ *
+ *   It reads the label's OWN name from the rendered feature rather than reverse-geocoding the click point: the name
+ *   is what the visitor pointed at, and a lookup by coordinate answers whatever is nearest instead, which on a dense
+ *   basemap is regularly not the thing under the cursor.
+ *
+ *   THE QUERY IS SCOPED, AND THE HOVER QUERY IS THROTTLED. `queryRenderedFeatures` with no `layers` walks the whole
+ *   style: measured at 64.3 ms per call returning 4,819 features over the 79-layer basemap at zoom 14 in Manhattan,
+ *   against 4.9 ms and 44 features scoped to that style's 11 label layers. At one call per pointer move the unscoped
+ *   form is the map's whole frame budget, so the layer list is resolved once per style and the hover query runs at
+ *   most once per animation frame. The click query is not throttled — there is one of those per click.
+ */
+
+import { useEffect, useEffectEvent } from "react"
+import type { MapInstance, MapLayerMouseEvent } from "react-map-gl/maplibre"
+
+/**
+ * The layers whose features carry a place name. Protomaps names its label layers `<theme>_label` and its settlement
+ * layers `places_*`; anything else in the style is geometry, not a label a visitor can read and point at.
+ */
+const LABEL_LAYER = /_label|^places_/
+
+/**
+ * Properties a label carries its text under, in the order they are trusted. `name` is protomaps' own; the localized
+ * variants appear on styles built for a specific script.
+ */
+const NAME_KEYS = ["name", "name:en", "name_en"] as const
+
+/**
+ * The style's label layers, by id.
+ *
+ * A style with none answers an EMPTY ARRAY, and the caller must treat that as "no labels to pick" rather than passing
+ * it to `queryRenderedFeatures` — an empty `layers` option is not the same as an absent one there, and the difference
+ * between "this style has no labels" and "query everything" is the 64 ms this hook exists to avoid.
+ */
+function labelLayerIDs(map: MapInstance): string[] {
+	const layers = map.getStyle()?.layers ?? []
+
+	return layers.map((layer) => layer.id).filter((id) => LABEL_LAYER.test(id))
+}
+
+function labelNameAt(map: MapInstance, point: MapLayerMouseEvent["point"], layers: string[]): string | null {
+	if (!layers.length) return null
+
+	// `queryRenderedFeatures` answers in paint order with the topmost first, which is the label drawn over the others
+	// and therefore the one a click landed on.
+	for (const feature of map.queryRenderedFeatures(point, { layers })) {
+		for (const key of NAME_KEYS) {
+			const value = feature.properties?.[key]
+
+			if (typeof value === "string" && value.trim()) return value
+		}
+	}
+
+	return null
+}
+
+export function useMapLabelPick(map: MapInstance | null, onPick: (name: string) => void): void {
+	// The subscription depends on the MAP alone. `useGeocode` returns a fresh object every render, so a callback built
+	// from it is new every render too — with `onPick` in the dependency list these map listeners were torn down and
+	// re-added on every keystroke in the search field. `useEffectEvent` is the shape for exactly this: an event
+	// handler that always sees the latest props without being a reactive dependency.
+	const pick = useEffectEvent((name: string) => onPick(name))
+
+	useEffect(() => {
+		if (!map) return
+
+		// Recomputed when the style swaps (a theme change, a version switch) and not once per pointer move.
+		let layers = labelLayerIDs(map)
+
+		const readLayers = () => {
+			layers = labelLayerIDs(map)
+		}
+
+		const onClick = (event: MapLayerMouseEvent) => {
+			const name = labelNameAt(map, event.point, layers)
+
+			if (name) {
+				pick(name)
+			}
+		}
+
+		let frame = 0
+
+		const onMove = (event: MapLayerMouseEvent) => {
+			if (frame) return
+
+			frame = requestAnimationFrame(() => {
+				frame = 0
+
+				const canvas = map.getCanvas()
+
+				// The drag cursor belongs to the pan gesture; overriding it mid-drag would fight the map for the pointer.
+				if (canvas.style.cursor === "grabbing") return
+
+				canvas.style.cursor = labelNameAt(map, event.point, layers) ? "pointer" : ""
+			})
+		}
+
+		map.on("styledata", readLayers)
+		map.on("click", onClick)
+		map.on("mousemove", onMove)
+
+		return () => {
+			if (frame) {
+				cancelAnimationFrame(frame)
+			}
+
+			map.off("styledata", readLayers)
+			map.off("click", onClick)
+			map.off("mousemove", onMove)
+			map.getCanvas().style.cursor = ""
+		}
+	}, [map])
+}

package/lib/pipeline/CandidatePicker.tsx

@@ -7,10 +7,10 @@
  *   Presentational; the selected index is owned by the caller (the pipeline hook).
  */
 
+import type { ResolvedPlaceView } from "@mailwoman/core/pipeline/client-result"
 import type { ReactNode } from "react"
 
 import { cx } from "#common/cx"
-import type { ResolvedPlaceView } from "#pipeline/types"
 
 export interface CandidatePickerProps {
 	candidates: ResolvedPlaceView[]

package/lib/pipeline/ComponentTable.tsx

@@ -6,10 +6,9 @@
  *   `ComponentTable` — the tag / value / confidence table of decoded components. Presentational.
  */
 
+import type { ParsedComponent } from "@mailwoman/core/pipeline/client-result"
 import type { ReactNode } from "react"
 
-import type { ParsedComponent } from "#pipeline/types"
-
 import { ConfidenceCell } from "./ConfidenceCell.tsx"
 
 export interface ComponentTableProps {

package/lib/pipeline/ConfidenceCell.tsx

@@ -3,28 +3,13 @@
  * @license AGPL-3.0
  * @author Teffen Ellis, et al.
  *
- *   `ConfidenceCell` — a compact confidence bar + value for the component table. Tiers the fill colour
- *   at 0.8 / 0.5. Presentational.
+ *   `ConfidenceCell` — a compact confidence bar + value for the component table. The fill colour follows the shared
+ *   confidence tiers. Presentational.
  */
 
+import { confidenceTierOrMid } from "#common/confidence-tiers"
 import { cx } from "#common/cx"
 
-/**
- * At or above this the cell is drawn as high-confidence. Presentation only — see docs/src/shared/confidence-tiers.ts.
- */
-const HIGH_CONFIDENCE_MIN = 0.8
-
-/**
- * At or above this the cell is drawn as medium-confidence; below it, low.
- */
-const MID_CONFIDENCE_MIN = 0.5
-
-function tier(confidence?: number): "high" | "mid" | "low" {
-	if (confidence == null) return "mid"
-
-	return confidence >= HIGH_CONFIDENCE_MIN ? "high" : confidence >= MID_CONFIDENCE_MIN ? "mid" : "low"
-}
-
 export interface ConfidenceCellProps {
 	confidence?: number
 }
@@ -36,7 +21,10 @@ export function ConfidenceCell({ confidence }: ConfidenceCellProps) {
 
 	return (
 		<div className="mw-conf">
-			<div className={cx("mw-conf__bar", `mw-conf__bar--${tier(confidence)}`)} style={{ width: `${pct}%` }} />
+			<div
+				className={cx("mw-conf__bar", `mw-conf__bar--${confidenceTierOrMid(confidence)}`)}
+				style={{ width: `${pct}%` }}
+			/>
 			<span className="mw-conf__value">{confidence.toFixed(2)}</span>
 		</div>
 	)

package/lib/pipeline/FailureDiagnostic.tsx

@@ -0,0 +1,56 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   `FailureDiagnostic` — what to say when nothing resolved. It reads the parsed components and names the missing
+ *   piece a person can add (a city, a state), so the answer is a next step rather than "no hit".
+ */
+
+import type { ParsedComponent } from "@mailwoman/core/pipeline/client-result"
+import type { ReactNode } from "react"
+
+export interface FailureDiagnosticProps {
+	nodes: ParsedComponent[]
+}
+
+export function FailureDiagnostic({ nodes }: FailureDiagnosticProps): ReactNode {
+	const hasLocality = nodes.some((n) => n.tag === "locality")
+	const hasPostcode = nodes.some((n) => n.tag === "postcode")
+	const hasRegion = nodes.some((n) => n.tag === "region")
+
+	const hints: string[] = []
+
+	if (!hasLocality && !hasPostcode) {
+		hints.push(
+			"The parser found no city or postcode in this input. Try adding one — e.g. append ', Chicago, IL 60613'."
+		)
+	}
+
+	if (hasPostcode && !hasLocality) {
+		hints.push(
+			"Only a postcode was extracted. WOF ships placeholder coordinates (0, 0) for about 22% of US postcodes, and the cascade drops those."
+		)
+	}
+
+	if (hasLocality && !hasRegion) {
+		hints.push(
+			"No state in the parse. US localities share names across states (Springfield, Portland, …); add a state to disambiguate."
+		)
+	}
+
+	if (!hints.length) {
+		hints.push("The parsed components look reasonable, but the gazetteer does not index this entry.")
+	}
+
+	return (
+		<div className="mw-failure">
+			<h2>No gazetteer hit</h2>
+			<ul>
+				{hints.map((hint, i) => (
+					<li key={i}>{hint}</li>
+				))}
+			</ul>
+		</div>
+	)
+}

package/lib/pipeline/ResolvedPlace.tsx

@@ -7,10 +7,9 @@
  *   optional dual-role note. Presentational.
  */
 
+import type { DualRoleView, ResolvedPlaceView } from "@mailwoman/core/pipeline/client-result"
 import { Fragment, type ReactNode } from "react"
 
-import type { DualRoleView, ResolvedPlaceView } from "#pipeline/types"
-
 export interface ResolvedPlaceProps {
 	place: ResolvedPlaceView
 	dualRoles?: DualRoleView[]
@@ -25,8 +24,22 @@ export function ResolvedPlace({ place, dualRoles }: ResolvedPlaceProps): ReactNo
 				<dd>{place.name}</dd>
 				<dt>placetype</dt>
 				<dd>{place.placetype}</dd>
-				<dt>WOF id</dt>
-				<dd>{place.id}</dd>
+				{place.tier ? (
+					// A street-tier answer is not a gazetteer place: it carries a precision instead of an id.
+					<>
+						<dt>precision</dt>
+						<dd>
+							{place.tier === "address_point"
+								? "📍 exact address point (≤10 m)"
+								: `≈ interpolated · ±${place.uncertaintyM ?? "?"} m`}
+						</dd>
+					</>
+				) : (
+					<>
+						<dt>WOF id</dt>
+						<dd>{place.id}</dd>
+					</>
+				)}
 				<dt>coords</dt>
 				<dd>
 					{place.lat.toFixed(4)}, {place.lon.toFixed(4)}

package/lib/pipeline/SpanHighlight.tsx

@@ -0,0 +1,97 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   `SpanHighlight` — a displaCy-style span ribbon over the raw input: each tagged span is a column with the text on
+ *   top, tinted by its confidence tier, and the tag beneath. Gaps (delimiters, unparsed characters) fall through as
+ *   plain text, so a dropped span is visible as a literal break in the colour.
+ */
+
+import type { ParsedComponent } from "@mailwoman/core/pipeline/client-result"
+import type { ReactNode } from "react"
+
+import { confidenceTierOrMid } from "#common/confidence-tiers"
+import { shortestSpanOwners } from "#common/text-tokens"
+
+export interface SpanHighlightProps {
+	/**
+	 * The raw text handed to the parser — `nodes[].start/end` index into this.
+	 */
+	input: string
+	/**
+	 * Flattened parse nodes; only those with numeric `start`/`end` are rendered.
+	 */
+	nodes: ParsedComponent[]
+}
+
+interface Segment {
+	text: string
+	node: ParsedComponent | null
+}
+
+type Span = ParsedComponent & { start: number; end: number }
+
+export function SpanHighlight({ input, nodes }: SpanHighlightProps): ReactNode {
+	if (!input) return null
+
+	// Keep only well-formed spans that index into the input.
+	const spans = nodes.filter(
+		(n): n is Span =>
+			typeof n.start === "number" &&
+			typeof n.end === "number" &&
+			n.start >= 0 &&
+			n.end > n.start &&
+			n.end <= input.length
+	)
+
+	if (!spans.length) return null
+
+	// Per-character owner: the most specific (shortest) span covering it, the same rule the word-level panels apply
+	// per word. The leaf always wins whatever nesting the tree hands over, so every character renders once.
+	const characters = Array.from({ length: input.length }, (_, i) => ({ start: i, end: i + 1 }))
+	const owner = shortestSpanOwners(characters, spans)
+
+	// Coalesce runs of the same owner into segments.
+	const segments: Segment[] = []
+	let from = 0
+
+	for (let i = 1; i <= input.length; i++) {
+		if (i === input.length || owner[i] !== owner[from]) {
+			const ownerIndex = owner[from] ?? -1
+
+			segments.push({ text: input.slice(from, i), node: ownerIndex === -1 ? null : (spans[ownerIndex] ?? null) })
+
+			from = i
+		}
+	}
+
+	return (
+		<div className="mw-spans">
+			<div className="mw-spans__legend">
+				<span>confidence</span>
+				<span className="mw-spans__swatch mw-spans__swatch--low" /> low
+				<span className="mw-spans__swatch mw-spans__swatch--mid" /> mid
+				<span className="mw-spans__swatch mw-spans__swatch--high" /> high
+			</div>
+			<div className="mw-spans__track">
+				{segments.map((seg, i) =>
+					seg.node ? (
+						<span
+							key={i}
+							className={`mw-spans__seg mw-spans__seg--${confidenceTierOrMid(seg.node.confidence)}`}
+							title={`${seg.node.tag}${seg.node.confidence != null ? ` · ${seg.node.confidence.toFixed(2)}` : ""}`}
+						>
+							<span className="mw-spans__text">{seg.text}</span>
+							<span className="mw-spans__tag">{seg.node.tag}</span>
+						</span>
+					) : (
+						<span key={i} className="mw-spans__gap">
+							{seg.text}
+						</span>
+					)
+				)}
+			</div>
+		</div>
+	)
+}

package/lib/pipeline/TimingPanel.tsx

@@ -0,0 +1,65 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   `TimingPanel` — the per-stage timing breakdown: a stacked bar sized by each stage's wall-clock, plus a legend.
+ *   Stage colours are distinct hues, never the confidence red/amber/green, because they encode the pipeline stage and
+ *   not quality.
+ */
+
+import type { StageTiming } from "@mailwoman/core/pipeline/client-result"
+import type { ReactNode } from "react"
+
+export interface TimingPanelProps {
+	timing: StageTiming
+}
+
+const STAGES: ReadonlyArray<{ key: keyof StageTiming; label: string }> = [
+	{ key: "shape", label: "shape + kind" },
+	{ key: "classify", label: "classify" },
+	{ key: "resolve", label: "resolve" },
+]
+
+function formatMilliseconds(ms: number): string {
+	return ms >= 100 ? `${Math.round(ms)} ms` : `${ms.toFixed(1)} ms`
+}
+
+export function TimingPanel({ timing }: TimingPanelProps): ReactNode {
+	const present = STAGES.flatMap((stage) => {
+		const ms = timing[stage.key]
+
+		return typeof ms === "number" ? [{ ...stage, ms }] : []
+	})
+
+	const total = present.reduce((sum, stage) => sum + stage.ms, 0)
+
+	if (total <= 0) return null
+
+	return (
+		<div className="mw-timing">
+			<div className="mw-timing__heading">
+				Timing <span className="mw-timing__total">{formatMilliseconds(total)} total</span>
+			</div>
+			<div className="mw-timing__bar">
+				{present.map((stage) => (
+					// The rendered width is floored so a sub-millisecond stage stays visible as a sliver.
+					<div
+						key={stage.key}
+						className={`mw-timing__seg mw-timing__seg--${stage.key}`}
+						style={{ width: `${Math.max((stage.ms / total) * 100, 1.5)}%` }}
+						title={`${stage.label}: ${formatMilliseconds(stage.ms)}`}
+					/>
+				))}
+			</div>
+			<div className="mw-timing__legend">
+				{present.map((stage) => (
+					<span key={stage.key} className="mw-timing__item">
+						<span className={`mw-timing__swatch mw-timing__seg--${stage.key}`} />
+						{stage.label} <span className="mw-timing__ms">{formatMilliseconds(stage.ms)}</span>
+					</span>
+				))}
+			</div>
+		</div>
+	)
+}

package/lib/pipeline/TreeView.tsx

@@ -0,0 +1,55 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   `TreeView` — the parse's containment tree as nested lists with a guide rail per level. The tag tint follows the
+ *   confidence tier; the value and score render in monospace.
+ */
+
+import type { ReactNode } from "react"
+
+import { confidenceTierOrMid } from "#common/confidence-tiers"
+
+interface TreeNode {
+	tag?: string
+	value?: unknown
+	confidence?: number
+	children?: TreeNode[]
+}
+
+export interface TreeViewProps {
+	/**
+	 * The parser's `AddressTree` (`result.tree`): the view reads `.roots` and recurses `.children`.
+	 */
+	tree: unknown
+}
+
+function renderNode(node: TreeNode, path: string): ReactNode {
+	if (typeof node.tag !== "string") return null
+
+	const kids = Array.isArray(node.children) ? node.children : []
+
+	return (
+		<li key={path} className="mw-tree__node">
+			<span className="mw-tree__row">
+				<span className={`mw-tree__tag mw-tree__tag--${confidenceTierOrMid(node.confidence)}`}>{node.tag}</span>
+				{node.value != null && String(node.value) !== "" ? (
+					<span className="mw-tree__value">{String(node.value)}</span>
+				) : null}
+				{typeof node.confidence === "number" ? (
+					<span className="mw-tree__conf">{node.confidence.toFixed(2)}</span>
+				) : null}
+			</span>
+			{kids.length ? <ul className="mw-tree__children">{kids.map((c, i) => renderNode(c, `${path}.${i}`))}</ul> : null}
+		</li>
+	)
+}
+
+export function TreeView({ tree }: TreeViewProps): ReactNode {
+	const roots = (tree as { roots?: unknown[] } | null | undefined)?.roots
+
+	if (!Array.isArray(roots) || !roots.length) return null
+
+	return <ul className="mw-tree mw-tree__children">{(roots as TreeNode[]).map((n, i) => renderNode(n, String(i)))}</ul>
+}

package/lib/pipeline/copy.ts

@@ -7,7 +7,7 @@
  *   pretty-printed. Pure; shared by the explorer's copy button.
  */
 
-import type { ParseResult, ResolvedPlaceView } from "#pipeline/types"
+import type { ParseResult, ResolvedPlaceView } from "@mailwoman/core/pipeline/client-result"
 
 export function buildParsePayload(result: ParseResult, selected: ResolvedPlaceView | null): string {
 	return JSON.stringify(

package/lib/pipeline/index.ts

@@ -0,0 +1,36 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ * @file Pipeline explorer components, visualizers, hooks, and contracts.
+ */
+
+export { About } from "../common/About.tsx"
+export { FailureDiagnostic } from "./FailureDiagnostic.tsx"
+export type { FailureDiagnosticProps } from "./FailureDiagnostic.tsx"
+export { SpanHighlight } from "./SpanHighlight.tsx"
+export type { SpanHighlightProps } from "./SpanHighlight.tsx"
+export { TimingPanel } from "./TimingPanel.tsx"
+export type { TimingPanelProps } from "./TimingPanel.tsx"
+export { TreeView } from "./TreeView.tsx"
+export type { TreeViewProps } from "./TreeView.tsx"
+
+export { CandidatePicker } from "./CandidatePicker.tsx"
+export type { CandidatePickerProps } from "./CandidatePicker.tsx"
+export { ComponentTable } from "./ComponentTable.tsx"
+export type { ComponentTableProps } from "./ComponentTable.tsx"
+export { ConfidenceCell } from "./ConfidenceCell.tsx"
+export type { ConfidenceCellProps } from "./ConfidenceCell.tsx"
+export { buildParsePayload } from "#pipeline/copy"
+export { PIPELINE_DEFAULT_ADDRESS, PIPELINE_PRESETS } from "#pipeline/presets"
+export { PipelineExplorer } from "./PipelineExplorer.tsx"
+export type { PipelineExplorerProps } from "./PipelineExplorer.tsx"
+export { QueryForm } from "./QueryForm.tsx"
+export type { QueryFormProps } from "./QueryForm.tsx"
+export { ResolvedPlace } from "./ResolvedPlace.tsx"
+export type { ResolvedPlaceProps } from "./ResolvedPlace.tsx"
+
+export type { PipelineLoadingState, PipelinePanels, PipelineRuntime } from "#pipeline/types"
+
+export { useParsePipeline } from "#pipeline/useParsePipeline"
+export type { UseParsePipeline, UseParsePipelineOptions } from "#pipeline/useParsePipeline"

package/lib/pipeline/types.ts

@@ -5,86 +5,13 @@
  *
  *   Types for the pipeline (parse + resolve) explorer. The model/gazetteer runtime is INJECTED as a
  *   {@link PipelineRuntime}: this package owns the UI state machine + presentation, while the host
- *   (the docs site's DemoEmbed, or any app) owns loading ONNX/WOF and executing a parse. That keeps
+ *   (the docs site's RuntimeEmbed, or any app) owns loading ONNX/WOF and executing a parse. That keeps
  *   onnxruntime-web, sql.js-httpvfs, and node builtins entirely out of this package's browser graph.
  */
 
+import type { ParseResult } from "@mailwoman/core/pipeline/client-result"
 import type { ReactNode } from "react"
 
-import type { KindBadgeResult } from "../common/KindBadge.tsx"
-
-/**
- * One decoded component, as the table + span views render it. Offsets index into `ParseResult.input`.
- */
-export interface ParsedComponent {
-	tag: string
-	value?: unknown
-	confidence?: number
-	start?: number
-	end?: number
-}
-
-/**
- * A resolved gazetteer place, projected to what the "Resolved place" panel + copy payload need.
- */
-export interface ResolvedPlaceView {
-	id: number
-	name: string
-	placetype: string
-	lat: number
-	lon: number
-	score: number
-}
-
-/**
- * An additional admin role a resolved place also fulfils (the dual-role / city-state relation, #402).
- */
-export interface DualRoleView {
-	id: number
-	name: string
-	placetype: string
-	relationshipType: string
-	role: string
-}
-
-/**
- * Per-stage wall-clock (ms) for one parse. `resolve` is absent when the lookup is skipped.
- */
-export interface StageTiming {
-	shape: number
-	classify: number
-	resolve?: number
-}
-
-/**
- * FST gazetteer-prior provenance, as the "FST prior" disclosure renders it.
- */
-export interface FSTProvenance {
-	builtAt: string
-	stateCount: number
-	placeCount: number
-	importanceMatches: number
-}
-
-/**
- * The presentational projection of one parse+resolve. The host's `runParse` produces it.
- */
-export interface ParseResult {
-	input: string
-	/**
-	 * Opaque hierarchy — handed straight to a host-injected tree/visualizer panel.
-	 */
-	tree: unknown
-	nodes: ParsedComponent[]
-	kindResult?: KindBadgeResult
-	timing?: StageTiming
-	resolved: ResolvedPlaceView | null
-	candidates: ResolvedPlaceView[]
-	fstActive: boolean
-	fstProvenance?: FSTProvenance | null
-	dualRoles?: DualRoleView[]
-}
-
 /**
  * Bundle-load progress surfaced before the runtime is `ready`.
  */