@mailwoman/react 9.2.0 → 9.4.0

package/lib/pipeline/ConfidenceCell.tsx

@@ -0,0 +1,31 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   `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"
+
+export interface ConfidenceCellProps {
+	confidence?: number
+}
+
+export function ConfidenceCell({ confidence }: ConfidenceCellProps) {
+	if (confidence == null) return <span className="mw-conf__dash">—</span>
+
+	const pct = Math.max(0, Math.min(1, confidence)) * 100
+
+	return (
+		<div className="mw-conf">
+			<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/{pipeline → lib/pipeline}/PipelineExplorer.tsx

@@ -11,6 +11,11 @@
 
 import type { ReactNode } from "react"
 
+import { buildParsePayload } from "#pipeline/copy"
+import { PIPELINE_DEFAULT_ADDRESS, PIPELINE_PRESETS } from "#pipeline/presets"
+import type { PipelinePanels, PipelineRuntime } from "#pipeline/types"
+import { useParsePipeline } from "#pipeline/useParsePipeline"
+
 import { ClientOnly } from "../common/ClientOnly.tsx"
 import { CopyButton } from "../common/CopyButton.tsx"
 import { KindBadge } from "../common/KindBadge.tsx"
@@ -18,12 +23,8 @@ import { LoadingIndicator } from "../common/LoadingIndicator.tsx"
 import { PresetChips, type Preset } from "../common/PresetChips.tsx"
 import { CandidatePicker } from "./CandidatePicker.tsx"
 import { ComponentTable } from "./ComponentTable.tsx"
-import { buildParsePayload } from "./copy.ts"
-import { PIPELINE_DEFAULT_ADDRESS, PIPELINE_PRESETS } from "./presets.ts"
 import { QueryForm } from "./QueryForm.tsx"
 import { ResolvedPlace } from "./ResolvedPlace.tsx"
-import type { PipelinePanels, PipelineRuntime } from "./types.ts"
-import { useParsePipeline } from "./useParsePipeline.ts"
 
 export interface PipelineExplorerProps {
 	/**

package/{pipeline → lib/pipeline}/QueryForm.tsx

@@ -19,11 +19,11 @@ export interface QueryFormProps {
 	busy?: boolean
 	placeholder?: string
 	/**
-	 * Keydown on the input — the seam a combobox (the demo's place-autocomplete) needs for arrow/Enter/Esc nav.
+	 * Keydown on the input — the hook a combobox (the demo's place-autocomplete) needs for arrow/Enter/Esc nav.
 	 */
 	onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void
 	/**
-	 * Escape hatch for extra `<input>` attributes (aria-combobox props, `autoComplete`, …). Merged last.
+	 * Override for extra `<input>` attributes (aria-combobox props, `autoComplete`, …). Merged last.
 	 */
 	inputProps?: InputHTMLAttributes<HTMLInputElement>
 }

package/{pipeline → 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 "./types.ts"
-
 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/{pipeline → lib/pipeline}/copy.ts

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

package/{pipeline → lib/pipeline}/presets.ts

@@ -30,6 +30,7 @@ export const PIPELINE_PRESETS: ReadonlyArray<Preset> = [
 	{ label: "Space Needle", value: "400 Broad St, Seattle, WA 98109", country: "us" },
 	{ label: "ZIP only", value: "90210", country: "us" },
 	{ label: "Berlin (native order)", value: "Straußstraße 27, 12623 Berlin", country: "de" },
+	{ label: "Berlin city-state (int'l order)", value: "5 Hauptstraße, Berlin, Berlin 10115", country: "de" },
 	{ label: "Paris (street fall-through)", value: "181 Rue du Chevaleret, Paris", country: "fr" },
 	// GB dependent_locality (placetype-pair-prior arc) — "Henbury" flips to dependent_locality via the en-gb pair-index
 	// prior; the UK postcode is also structurally detectable (parity with docs EXAMPLE_ADDRESSES).
@@ -40,7 +41,7 @@ export const PIPELINE_PRESETS: ReadonlyArray<Preset> = [
 	},
 	// NZ dependent_locality (en-nz pair-prior arc) — Plimmerton is a suburb (dependent_locality) of Porirua. Postcode
 	// DELIBERATELY OMITTED: a trailing "Porirua 5026" folds "porirua 5026" in segment mode and misses the index's bare
-	// "porirua" key (tracked as #1308). The `country: "nz"` pin is load-bearing — locale-gate can't structurally detect
+	// "porirua" key (tracked as #1308). The `country: "nz"` pin is required — locale-hint can't structurally detect
 	// NZ (4-digit postcode isn't distinctive), so only the pin selects the nz index; free-typed NZ stays unfired.
 	{ label: "Plimmerton (NZ dependent_locality)", value: "35 Steyne Avenue, Plimmerton, Porirua", country: "nz" },
 ]

package/{pipeline → 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`.
  */

package/{pipeline → lib/pipeline}/useParsePipeline.ts

@@ -9,9 +9,10 @@
  *   contract and shapes the UI state.
  */
 
+import type { ParseResult, ResolvedPlaceView } from "@mailwoman/core/pipeline/client-result"
 import { useCallback, useState } from "react"
 
-import type { ParseResult, PipelineRuntime, ResolvedPlaceView } from "./types.ts"
+import type { PipelineRuntime } from "#pipeline/types"
 
 export interface UseParsePipelineOptions {
 	runtime: PipelineRuntime

package/{poi → lib/poi}/LiveResultsBlock.tsx

@@ -10,8 +10,8 @@
 
 import type { ReactNode } from "react"
 
-import { formatDistance } from "./runtime.ts"
-import type { LiveSearchState } from "./types.ts"
+import { formatDistance } from "#poi/runtime"
+import type { LiveSearchState } from "#poi/types"
 
 export interface LiveResultsBlockProps {
 	/**

package/{poi → lib/poi}/POIExplorer.tsx

@@ -11,6 +11,10 @@
 
 import { type ReactNode, useState } from "react"
 
+import { POI_DEFAULT_TEXT, POI_PRESETS } from "#poi/runtime"
+import type { LoadPOIRuntime, POILiveSearch } from "#poi/types"
+import { usePOISearch } from "#poi/usePOISearch"
+
 import { ClientOnly } from "../common/ClientOnly.tsx"
 import { KindBadge } from "../common/KindBadge.tsx"
 import { PresetChips, type Preset } from "../common/PresetChips.tsx"
@@ -18,10 +22,7 @@ import { AbstainPanel } from "./AbstainPanel.tsx"
 import { LiveResultsBlock } from "./LiveResultsBlock.tsx"
 import { OverpassBlock } from "./OverpassBlock.tsx"
 import { QueryInput } from "./QueryInput.tsx"
-import { POI_DEFAULT_TEXT, POI_PRESETS } from "./runtime.ts"
 import { SubjectPanel } from "./SubjectPanel.tsx"
-import type { LoadPOIRuntime, POILiveSearch } from "./types.ts"
-import { usePOISearch } from "./usePOISearch.ts"
 
 export interface POIExplorerProps {
 	/**

package/{poi → lib/poi}/SubjectPanel.tsx

@@ -10,7 +10,7 @@
 
 import type { ReactNode } from "react"
 
-import type { POISubject } from "./types.ts"
+import type { POISubject } from "#poi/types"
 
 export interface SubjectPanelProps {
 	subject: POISubject

package/{poi → lib/poi}/runtime.ts

@@ -13,7 +13,7 @@ import { createKindClassifier } from "@mailwoman/kind-classifier"
 import type { POIPhraseLookup } from "@mailwoman/kind-classifier"
 import { createPOIBrandLookup, createPOITaxonomyLookup } from "@mailwoman/poi-taxonomy/table"
 
-import type { POIRuntime } from "./types.ts"
+import type { POIRuntime } from "#poi/types"
 
 /**
  * Build the POI runtime, dynamically importing the taxonomy + brand JSON so the tables land in their own chunk. A
@@ -31,8 +31,8 @@ export async function loadPOIRuntime(): Promise<POIRuntime> {
 		import("@mailwoman/poi-taxonomy/data/brands.json").then((m) => m.default),
 	])
 
-	const lookup = createPOITaxonomyLookup(table as unknown as Parameters<typeof createPOITaxonomyLookup>[0])
-	const brands = createPOIBrandLookup(brandTable as unknown as Parameters<typeof createPOIBrandLookup>[0])
+	const lookup = createPOITaxonomyLookup(table as Parameters<typeof createPOITaxonomyLookup>[0])
+	const brands = createPOIBrandLookup(brandTable as Parameters<typeof createPOIBrandLookup>[0])
 
 	// Adapt the taxonomy + brand lookups to the `POIPhraseLookup` shape the classifier expects: categories first, brands
 	// on a category miss.

package/{poi → lib/poi}/types.ts

@@ -5,11 +5,12 @@
  *
  *   Types for the POI explorer. The intent path (classification → subject → OverpassQL) is fully
  *   self-contained over the pure `@mailwoman/*` packages; the live poi.db path is expressed only as an
- *   INJECTED async function ({@link POILiveSearch}) so the httpvfs/worker machinery stays out of this
+ *   INJECTED async function ({@link POILiveSearch}) so the httpvfs/worker implementation stays out of this
  *   package's browser graph (it lives in the docs site, which knows where the layer is served).
  */
 
-import type { POIPhraseLookup, QueryKindResult, createKindClassifier } from "@mailwoman/kind-classifier"
+import type { QueryKindResult } from "@mailwoman/core/pipeline"
+import type { POIPhraseLookup, createKindClassifier } from "@mailwoman/kind-classifier"
 import type { createPOITaxonomyLookup } from "@mailwoman/poi-taxonomy/table"
 
 export type TaxonomyLookup = ReturnType<typeof createPOITaxonomyLookup>

package/{poi → lib/poi}/usePOISearch.ts

@@ -15,9 +15,9 @@ import type { OverpassIntentLike } from "@mailwoman/poi-taxonomy/overpass"
 import { computeQueryShape } from "@mailwoman/query-shape"
 import { useCallback, useEffect, useEffectEvent, useState } from "react"
 
-import { useDebouncedValue } from "../common/useDebouncedValue.ts"
-import { loadPOIRuntime } from "./runtime.ts"
-import type { LiveSearchState, LoadPOIRuntime, POIExplorerResult, POILiveSearch, POIRuntime } from "./types.ts"
+import { useDebouncedValue } from "#common/useDebouncedValue"
+import { loadPOIRuntime } from "#poi/runtime"
+import type { LiveSearchState, LoadPOIRuntime, POIExplorerResult, POILiveSearch, POIRuntime } from "#poi/types"
 
 export interface UsePOISearchOptions {
 	/**
@@ -84,12 +84,12 @@ function buildOverpass(
 	}
 
 	const intent: OverpassIntentLike = {
-		subject: { kind: "category", categoryID, matched: matchedPhrase },
+		subject: { kind: "category", categoryIDs: [categoryID], matched: matchedPhrase },
 		...(remainder ? { anchor: { text: remainder } } : {}),
 	}
 
 	try {
-		return { overpassQL: emitOverpassQL(intent, category.osmTag ? { osmTag: category.osmTag } : {}) }
+		return { overpassQL: emitOverpassQL(intent, category.osmTag ? { osmTags: [category.osmTag] } : {}) }
 	} catch (error) {
 		return { overpassError: error instanceof Error ? error.message : String(error) }
 	}