@mailwoman/react 9.3.0 → 10.0.0

package/lib/map/{GeocoderDemo.tsx → Geocoder.tsx}

@@ -3,47 +3,47 @@
  * @license AGPL-3.0
  * @author Teffen Ellis, et al.
  *
- *   `<GeocoderDemo>` — the WHOLE geocoder demo, composed. It is the map analogue of `PipelineExplorer`
- *   and takes the SAME DI shape: an injected {@link DemoRuntime} (the host owns ONNX / httpvfs / R2 /
- *   the composed map style) plus a {@link DemoPanels} bag (the host's ModelVisualizer / VersionCompare /
+ *   `<Geocoder>` — the WHOLE geocoder, composed. It is the map analogue of `PipelineExplorer`
+ *   and takes the SAME DI shape: an injected {@link GeocoderRuntime} (the host owns ONNX / httpvfs / R2 /
+ *   the composed map style) plus a {@link GeocoderPanels} bag (the host's ModelVisualizer / VersionCompare /
  *   About / Permalink). Everything here is composition + a `ClientOnly` boundary:
  *
- *     - the floating {@link DemoControls} panel (version / compare / backend / query+autocomplete / result),
- *     - the declarative {@link DemoMap} with the phase-2 overlays ({@link OverlayLayers}) and the
+ *     - the floating {@link GeocoderControls} panel (version / compare / backend / query+autocomplete / result),
+ *     - the declarative {@link MapCanvas} with the phase-2 overlays ({@link OverlayLayers}) and the
  *       resolved-place marker/outline/camera ({@link ResolvedPlaceLayers}) driven by the parse state,
- *     - the hooks that wire them: {@link useDemoGeocode} (parse + viewport bias + map place),
+ *     - the hooks that wire them: {@link useGeocode} (parse + viewport bias + map place),
  *       {@link usePlaceAutocomplete}, {@link useCompareState}.
  *
- *   Because it pulls {@link DemoMap} (→ `react-map-gl` → `maplibre-gl`, WebGL + DOM at import), it lives on
+ *   Because it pulls {@link MapCanvas} (→ `react-map-gl` → `maplibre-gl`, WebGL + DOM at import), it lives on
  *   the `@mailwoman/react/map` subpath ONLY — never the package root. The whole thing renders in Storybook
  *   over a fake runtime (offline stub style + canned geocode) with no network, no ONNX, no gazetteer.
  */
 
-import { type ReactNode, useCallback, useEffect, useRef } from "react"
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react"
 import type { MapRef } from "react-map-gl/maplibre"
 
-import type { DemoPanels, DemoRuntime, MapBias } from "#map/types"
+import type { GeocoderPanels, GeocoderRuntime, MapBias } from "#map/types"
 import { useCompareState } from "#map/useCompareState"
-import { useDemoGeocode } from "#map/useDemoGeocode"
+import { useGeocode } from "#map/useGeocode"
 import { useMapPlaceRender } from "#map/useMapPlaceRender"
 import { usePlaceAutocomplete } from "#map/usePlaceAutocomplete"
 
 import { ClientOnly } from "../common/ClientOnly.tsx"
 import type { Preset } from "../common/PresetChips.tsx"
-import { DemoControls } from "./DemoControls.tsx"
-import { DemoMap } from "./DemoMap.tsx"
+import { GeocoderControls } from "./GeocoderControls.tsx"
+import { MapCanvas } from "./MapCanvas.tsx"
 import { OverlayLayers } from "./OverlayLayers.tsx"
 import { ResolvedPlaceLayers } from "./ResolvedPlaceLayers.tsx"
 
-export interface GeocoderDemoProps {
+export interface GeocoderProps {
 	/**
-	 * The injected demo runtime (map style + overlays + parse + version/backend).
+	 * The injected geocoder runtime (map style + overlays + parse + version/backend).
 	 */
-	runtime: DemoRuntime
+	runtime: GeocoderRuntime
 	/**
 	 * Host-injected panels (about, release blurb, compare, permalink, debug drawer, map controls, …).
 	 */
-	panels?: DemoPanels
+	panels?: GeocoderPanels
 	/**
 	 * Address to pre-fill.
 	 */
@@ -52,74 +52,87 @@ export interface GeocoderDemoProps {
 	 * Example chips. @default the empty set (host supplies its own).
 	 */
 	presets?: ReadonlyArray<Preset>
+	/**
+	 * Open the developer disclosure on mount — the model version, the backend readout and compare. Collapsed by default
+	 * so the address field is the first thing a visitor meets. @default false
+	 */
+	developer?: boolean
+	/**
+	 * Fired with the query each time one is submitted. The host writes it into its own URL — this package never touches
+	 * `location`, because which parameter carries a query is the app's decision.
+	 */
+	onSubmitQuery?: (query: string) => void
 	/**
 	 * Only hint the viewport bias once the visitor has zoomed past the global view — a whole-globe center is noise.
-	 * Matches the demo's `map.getZoom() >= 4` threshold. @default 4
+	 * Matches the `map.getZoom() >= 4` threshold. @default 4
 	 */
 	minBiasZoom?: number
 	/**
 	 * Fly/fit the map to the resolved place on each result (via {@link ResolvedPlaceLayers}). @default true. Set false
-	 * for a host that drives the camera itself (a controlled `<DemoMap viewState>`), or to keep a headless test
+	 * for a host that drives the camera itself (a controlled `<MapCanvas viewState>`), or to keep a headless test
 	 * deterministic — the marker + outline still render, only the animated camera move is skipped.
 	 */
 	applyResultCamera?: boolean
 }
 
-interface GeocoderDemoInnerProps extends Required<
-	Pick<GeocoderDemoProps, "runtime" | "defaultAddress" | "minBiasZoom" | "applyResultCamera">
+interface GeocoderInnerProps extends Required<
+	Pick<GeocoderProps, "runtime" | "defaultAddress" | "minBiasZoom" | "applyResultCamera" | "developer">
 > {
-	panels: DemoPanels
+	panels: GeocoderPanels
 	presets: ReadonlyArray<Preset>
+	onSubmitQuery?: (query: string) => void
 }
 
-function GeocoderDemoInner({
+function GeocoderInner({
 	runtime,
 	panels,
 	defaultAddress,
 	presets,
 	minBiasZoom,
 	applyResultCamera,
-}: GeocoderDemoInnerProps): ReactNode {
+	developer,
+	onSubmitQuery,
+}: GeocoderInnerProps): ReactNode {
 	const mapRef = useRef<MapRef>(null)
-
+	// The chrome sits OUTSIDE `<MapCanvas>`, so it cannot take the handle from `useMap()`. A ref alone does not
+	// re-render the compass or the layer control when the map arrives, so the same poll that publishes the test
+	// handle also puts it in state — one poll, two consumers.
+	const [map, setMap] = useState<ReturnType<MapRef["getMap"]> | null>(null)
+
+	// The map announces itself; nothing polls for it. `onLoad` carries the instance, so the compass and the layer
+	// control render on the frame the map is ready rather than up to an interval later.
+	//
 	// TEST INJECTION POINT: the e2e viewport-bias suite drives the REAL map (pan + zoom past the bias threshold)
-	// before submitting, and a browser test cannot reach a React ref — so the live map handle is
-	// republished on `globalThis.__mailwomanDemoMap`, the same global the pre-port demo carried. The
-	// ref fills only after react-map-gl instantiates the map, hence the short poll; cleared on
-	// unmount so a torn-down demo never leaves a stale handle behind.
-	useEffect(() => {
-		const host = globalThis as { __mailwomanDemoMap?: ReturnType<MapRef["getMap"]> }
-
-		const timer = setInterval(() => {
-			const map = mapRef.current?.getMap()
-
-			if (map) {
-				host.__mailwomanDemoMap = map
-				clearInterval(timer)
-			}
-		}, 250)
-
-		return () => {
-			clearInterval(timer)
-			delete host.__mailwomanDemoMap
-		}
+	// before submitting, and a browser test cannot reach a React ref — so the same handle is republished on
+	// `globalThis.__mailwomanMapCanvas`, and cleared on unmount so a torn-down geocoder leaves no stale handle.
+	const onMapLoad = useCallback((event: { target: ReturnType<MapRef["getMap"]> }) => {
+		;(globalThis as { __mailwomanMapCanvas?: ReturnType<MapRef["getMap"]> }).__mailwomanMapCanvas = event.target
+		setMap(event.target)
 	}, [])
 
+	useEffect(
+		() => () => {
+			setMap(null)
+			delete (globalThis as { __mailwomanMapCanvas?: ReturnType<MapRef["getMap"]> }).__mailwomanMapCanvas
+		},
+		[]
+	)
+
 	// Read the viewport bias at submit time — through the map handle, never a threaded state value, so granting/zooming
 	// mid-session doesn't re-create the parse callback. Below the min-bias zoom, a whole-globe center is noise → null.
 	const getBias = useCallback((): MapBias | null => {
-		const map = mapRef.current?.getMap()
+		const live = mapRef.current?.getMap()
 
-		if (!map) return null
-		const zoom = map.getZoom()
+		if (!live) return null
+		const zoom = live.getZoom()
 
 		if (zoom < minBiasZoom) return null
-		const center = map.getCenter()
+		const center = live.getCenter()
 
 		return { center: [center.lng, center.lat], zoom }
 	}, [minBiasZoom])
 
-	const geocode = useDemoGeocode({ runtime, defaultText: defaultAddress, getBias })
+	const geocode = useGeocode({ runtime, defaultText: defaultAddress, getBias })
 	const compare = useCompareState()
 
 	const autocomplete = usePlaceAutocomplete({
@@ -143,7 +156,7 @@ function GeocoderDemoInner({
 	return (
 		<div className="mw-geocoder-demo">
 			<div className="mw-geocoder-demo__map">
-				<DemoMap
+				<MapCanvas
 					mapStyle={runtime.mapStyle}
 					mapRef={mapRef}
 					initialViewState={{
@@ -152,17 +165,17 @@ function GeocoderDemoInner({
 						zoom: runtime.initialZoom ?? 3,
 					}}
 					style={{ width: "100%", height: "100%" }}
-					// Match the live demo's chrome: one compact attribution pill (the map's own default is a wide, always-open
-					// "MapLibre | © …" bar), no maplibre wordmark logo.
-					mapProps={{ attributionControl: { compact: true }, maplibreLogo: false }}
+					// One compact attribution pill (the map's own default is a wide, always-open "MapLibre | © …" bar), no
+					// maplibre wordmark logo.
+					mapProps={{ attributionControl: { compact: true }, maplibreLogo: false, onLoad: onMapLoad }}
 				>
 					<OverlayLayers overlays={runtime.overlays} />
 					<ResolvedPlaceLayers spec={spec} applyCamera={applyResultCamera} />
 					{panels.mapControls}
-				</DemoMap>
+				</MapCanvas>
 			</div>
 
-			<DemoControls
+			<GeocoderControls
 				runtime={runtime}
 				geocode={geocode}
 				autocomplete={autocomplete}
@@ -170,8 +183,11 @@ function GeocoderDemoInner({
 				panels={panels}
 				presets={presets}
 				placeholder={defaultAddress}
+				map={map}
+				onSubmitQuery={onSubmitQuery}
 				onSelectVersion={onSelectVersion}
 				onForceWASMChange={onForceWASMChange}
+				developer={developer}
 			/>
 
 			{panels.debugDrawer ? panels.debugDrawer({ result: geocode.result }) : null}
@@ -182,36 +198,40 @@ function GeocoderDemoInner({
 /**
  * Stable empty defaults — a fresh `{}`/`[]` per render would churn every downstream memo dep.
  */
-const NO_PANELS: DemoPanels = {}
+const NO_PANELS: GeocoderPanels = {}
 const NO_PRESETS: ReadonlyArray<Preset> = []
 
 /**
- * The composed geocoder demo, behind a `ClientOnly` SSR boundary (the map is intrinsically a client component).
+ * The composed geocoder, behind a `ClientOnly` SSR boundary (the map is intrinsically a client component).
  */
-export function GeocoderDemo({
+export function Geocoder({
 	runtime,
 	panels = NO_PANELS,
 	defaultAddress = "",
 	presets = NO_PRESETS,
 	minBiasZoom = 4,
 	applyResultCamera = true,
-}: GeocoderDemoProps): ReactNode {
+	developer = false,
+	onSubmitQuery,
+}: GeocoderProps): ReactNode {
 	return (
 		<ClientOnly
 			fallback={
 				<div className="mw-geocoder-demo">
-					<p>Loading demo…</p>
+					<p>Loading the geocoder…</p>
 				</div>
 			}
 		>
 			{() => (
-				<GeocoderDemoInner
+				<GeocoderInner
 					runtime={runtime}
 					panels={panels}
 					defaultAddress={defaultAddress}
 					presets={presets}
 					minBiasZoom={minBiasZoom}
 					applyResultCamera={applyResultCamera}
+					developer={developer}
+					onSubmitQuery={onSubmitQuery}
 				/>
 			)}
 		</ClientOnly>

package/lib/map/GeocoderControls.tsx

@@ -0,0 +1,352 @@
+/**
+ * @copyright Sister Software
+ * @license AGPL-3.0
+ * @author Teffen Ellis, et al.
+ *
+ *   The geocoder's chrome over the map: a search pill on top, example chips on one line beneath it, a control column
+ *   down the right edge, and a result sheet that rises from the bottom when there is something to show.
+ *
+ *   It replaces a 400px full-height panel that carried every control at once. The layout is the one the reference
+ *   map apps use, and the reason is the map: chrome that floats over it leaves the map the page, where a slab makes
+ *   the map the leftover third.
+ *
+ *   NODE-SAFE: pure React + the shared units, no maplibre.
+ */
+
+import { type ReactNode, useCallback, useState } from "react"
+import type { MapInstance } from "react-map-gl/maplibre"
+
+import type { GeocoderPanels, GeocoderRuntime } from "#map/types"
+import type { UseCompareState } from "#map/useCompareState"
+import type { UseGeocode } from "#map/useGeocode"
+import { useMapBearing } from "#map/useMapBearing"
+import { useMapLabelPick } from "#map/useMapLabelPick"
+import type { UsePlaceAutocomplete } from "#map/usePlaceAutocomplete"
+
+import { LoadingIndicator } from "../common/LoadingIndicator.tsx"
+import type { Preset } from "../common/PresetChips.tsx"
+import { BackendControl } from "./BackendControl.tsx"
+import { CompareToggle } from "./CompareToggle.tsx"
+import { MapChipRow } from "./MapChipRow.tsx"
+import { MapCompass } from "./MapCompass.tsx"
+import { MapControlButton, MapControlGroup, MapControlStack } from "./MapControlStack.tsx"
+import { MapProgressBar } from "./MapProgressBar.tsx"
+import { MapSearchBar } from "./MapSearchBar.tsx"
+import { MapSheet } from "./MapSheet.tsx"
+import { PlaceAutocomplete } from "./PlaceAutocomplete.tsx"
+import { ResultPanel } from "./ResultPanel.tsx"
+import { VersionPicker } from "./VersionPicker.tsx"
+
+export interface GeocoderControlsProps {
+	/**
+	 * The injected geocoder runtime.
+	 */
+	runtime: GeocoderRuntime
+	/**
+	 * The parse+resolve state machine.
+	 */
+	geocode: UseGeocode
+	/**
+	 * The place-autocomplete combobox state.
+	 */
+	autocomplete: UsePlaceAutocomplete
+	/**
+	 * The compare-mode state.
+	 */
+	compare: UseCompareState
+	/**
+	 * Host-injected panels (about, release blurb, compare, permalink, extras, failure).
+	 */
+	panels: GeocoderPanels
+	/**
+	 * Example chips.
+	 */
+	presets: ReadonlyArray<Preset>
+	/**
+	 * Input placeholder.
+	 */
+	placeholder: string
+	/**
+	 * The live map, for the controls that read it: the compass takes its bearing, the host's layer control reads its
+	 * style. `null` until react-map-gl instantiates the map.
+	 */
+	map?: MapInstance | null
+	/**
+	 * Fired with the query whenever one is submitted, before the parse starts. The host writes it into the URL; this
+	 * package never touches `location`, because the address bar is the app's state, not a control's.
+	 */
+	onSubmitQuery?: (query: string) => void
+	/**
+	 * Select a model version (the composed geocoder also clears a now-colliding compare selection).
+	 */
+	onSelectVersion: (version: string) => void
+	/**
+	 * Toggle the forced WASM backend.
+	 */
+	onForceWASMChange: (forceWASM: boolean) => void
+	/**
+	 * Open the developer panel on mount. The model version, the backend readout and compare live inside it: they read on
+	 * the model rather than on an address, and above the query field they were the first thing every visitor met.
+	 *
+	 * @default false
+	 */
+	developer?: boolean
+}
+
+/**
+ * Which side sheet is open. At most one, because they share an edge and a phone gives each the whole panel.
+ */
+type SheetName = "about" | "layers" | "developer" | null
+
+/**
+ * The chrome. Everything positioned here floats over the map; nothing occupies a column of the page.
+ */
+export function GeocoderControls({
+	runtime,
+	geocode,
+	autocomplete,
+	compare,
+	panels,
+	presets,
+	placeholder,
+	map = null,
+	onSubmitQuery,
+	onSelectVersion,
+	onForceWASMChange,
+	developer = false,
+}: GeocoderControlsProps): ReactNode {
+	const versions = runtime.availableVersions ?? []
+	const { busy, result, selectedCandidate } = geocode
+	const loading = runtime.loading
+	const errorMessage = geocode.parseError ?? runtime.errorMessage ?? null
+
+	// One sheet at a time. Two open at once stack on the same edge, and on a phone each is the full panel.
+	const [openSheet, setOpenSheet] = useState<SheetName>(developer ? "developer" : null)
+	const { bearing, resetNorth } = useMapBearing(map)
+
+	const toggleSheet = (name: Exclude<SheetName, null>) => setOpenSheet((current) => (current === name ? null : name))
+	const closeSheet = useCallback(() => setOpenSheet(null), [])
+
+	// Every path that starts a query goes through here, so the URL is written in exactly one place — the event that
+	// caused it, rather than an effect watching the result after the fact.
+	const runQuery = useCallback(
+		(query: string) => {
+			onSubmitQuery?.(query)
+			void geocode.submit(query)
+		},
+		[onSubmitQuery, geocode]
+	)
+
+	// A label on the map is a search a visitor already typed by pointing at it.
+	const pickLabel = useCallback(
+		(name: string) => {
+			geocode.setText(name)
+			geocode.reset()
+			runQuery(name)
+		},
+		[geocode, runQuery]
+	)
+
+	useMapLabelPick(map, pickLabel)
+
+	const chips = presets.map((preset) => ({ label: preset.label, value: preset.value }))
+	// The bundle load no longer opens the result sheet: it reports on the bar at the top of the viewport and in the
+	// footer, so an empty sheet does not sit over the map for the length of a 38 MB download.
+	const showSheet = Boolean(busy || result || errorMessage)
+
+	const bundleLoading = Boolean(loading && !runtime.ready)
+	const steps = loading?.stepLabels.length ?? 0
+
+	return (
+		<>
+			<MapProgressBar
+				active={bundleLoading}
+				fraction={steps ? ((loading?.stepIndex ?? 0) + 1) / steps : null}
+				label="Loading the geocoder"
+			/>
+
+			<div className="mw-map-chrome mw-map-chrome--top">
+				<form
+					className="mw-map-chrome__search"
+					onSubmit={(event) => {
+						event.preventDefault()
+						runQuery(geocode.text)
+					}}
+				>
+					{/*
+					 * `type="search"` brings its own clear button, so the pill carries no trailing slot: a second cross
+					 * beside the native one is two controls for one job, and the spinner that used to live there changed
+					 * the field's height on every submit.
+					 */}
+					<MapSearchBar label="Search addresses" leading={<span aria-hidden="true">⌕</span>} busy={busy}>
+						<input
+							id="mw-pipeline-input"
+							type="search"
+							aria-label="Address"
+							value={geocode.text}
+							onChange={(event) => geocode.setText(event.target.value)}
+							disabled={!runtime.ready}
+							placeholder={placeholder}
+							onKeyDown={autocomplete.onInputKeyDown}
+							{...autocomplete.inputProps}
+						/>
+					</MapSearchBar>
+				</form>
+
+				<PlaceAutocomplete
+					suggestions={autocomplete.suggestions}
+					activeIndex={autocomplete.activeIndex}
+					onPick={autocomplete.pick}
+					onHover={autocomplete.setActiveIndex}
+					listboxID={autocomplete.listboxID}
+					optionID={autocomplete.optionID}
+				/>
+
+				<MapChipRow
+					chips={chips}
+					label="Example addresses"
+					activeValue={geocode.text}
+					disabled={!runtime.ready || busy}
+					onPick={(value) => {
+						geocode.setText(value)
+						geocode.reset()
+						runQuery(value)
+					}}
+				/>
+
+				{panels.bias}
+			</div>
+
+			{/*
+			 * Every floating control lives in this one column, so nothing can land on top of anything else: the layer
+			 * control joins the capsule rather than sitting in the left column, and the compass takes its own capsule
+			 * below because it comes and goes and would otherwise resize the one above it.
+			 */}
+			<MapControlStack label="Map controls">
+				<MapControlGroup>
+					<MapControlButton
+						label="About this geocoder"
+						active={openSheet === "about"}
+						onPress={() => toggleSheet("about")}
+					>
+						<span aria-hidden="true">i</span>
+					</MapControlButton>
+
+					{panels.layers ? (
+						<MapControlButton label="Map layers" active={openSheet === "layers"} onPress={() => toggleSheet("layers")}>
+							<span aria-hidden="true">≡</span>
+						</MapControlButton>
+					) : null}
+
+					<MapControlButton
+						label="Developer controls"
+						active={openSheet === "developer"}
+						onPress={() => toggleSheet("developer")}
+					>
+						<span aria-hidden="true">⚙</span>
+					</MapControlButton>
+				</MapControlGroup>
+
+				<MapControlGroup className="mw-map-control-group--compass">
+					<MapCompass bearing={bearing} onResetNorth={resetNorth} />
+				</MapControlGroup>
+			</MapControlStack>
+
+			{openSheet === "about" ? (
+				<MapSheet title="About" onClose={closeSheet}>
+					{panels.header}
+				</MapSheet>
+			) : null}
+
+			{openSheet === "layers" ? (
+				<MapSheet title="Layers" onClose={closeSheet}>
+					{panels.layers?.({ map })}
+				</MapSheet>
+			) : null}
+
+			{openSheet === "developer" ? (
+				<MapSheet title="Developer" onClose={closeSheet}>
+					{panels.releaseInfo ? (
+						<div className="mw-map-sheet__row">
+							<span className="mw-map-sheet__label">This release</span>
+							{panels.releaseInfo}
+						</div>
+					) : null}
+
+					<div className="mw-map-sheet__row">
+						<VersionPicker
+							versions={versions}
+							selected={runtime.selectedVersion ?? null}
+							onSelect={onSelectVersion}
+							disabled={busy}
+						/>
+					</div>
+
+					<div className="mw-map-sheet__row">
+						<BackendControl
+							activeBackend={runtime.activeBackend}
+							forceWASM={runtime.forceWASM ?? false}
+							onForceWASMChange={onForceWASMChange}
+						/>
+					</div>
+
+					<div className="mw-map-sheet__row">
+						<CompareToggle
+							versions={versions}
+							primaryVersion={runtime.selectedVersion ?? null}
+							compareMode={compare.compareMode}
+							onCompareModeChange={compare.setCompareMode}
+							compareVersion={compare.compareVersion}
+							onCompareVersionChange={compare.setCompareVersion}
+							disabled={busy}
+						/>
+					</div>
+
+					{panels.developerExtras}
+				</MapSheet>
+			) : null}
+
+			{showSheet ? (
+				<section className="mw-map-sheet mw-map-sheet--bottom" aria-label="Result">
+					<div className="mw-map-sheet__handle" aria-hidden="true" />
+
+					{errorMessage ? <p className="mw-error">{errorMessage}</p> : null}
+
+					{panels.aboveResult ? panels.aboveResult({ result }) : null}
+
+					{busy ? (
+						<div className="mw-result">
+							<LoadingIndicator mode="staged" steps={runtime.parseStageLabels} activeStep={geocode.parseStage} />
+						</div>
+					) : result ? (
+						panels.result ? (
+							panels.result({
+								result,
+								selectedCandidate,
+								selectedCandidateIndex: geocode.selectedCandidateIndex,
+								onSelectCandidate: geocode.selectCandidate,
+							})
+						) : (
+							<ResultPanel
+								result={result}
+								selectedCandidate={selectedCandidate}
+								selectedCandidateIndex={geocode.selectedCandidateIndex}
+								onSelectCandidate={geocode.selectCandidate}
+								extras={panels.extras}
+								failure={panels.failure}
+							/>
+						)
+					) : null}
+
+					{panels.compare
+						? panels.compare({ result, compareMode: compare.compareMode, compareVersion: compare.compareVersion })
+						: null}
+
+					{panels.permalink ? <div className="mw-map-sheet__actions">{panels.permalink(geocode.text)}</div> : null}
+				</section>
+			) : null}
+
+			{panels.footer}
+		</>
+	)
+}