{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "location-selector", "title": "Location Selector", "description": "A UK location picker: address search plus an optional draggable map pin (Mapbox), and the movement-form flow — a selected-location card field backed by a config-driven picker modal with directory search and a map/address escape hatch.", "dependencies": [ "@untitledui/icons@^0.0.22", "mapbox-gl@^3.25.0", "react-map-gl@^8.1.1" ], "registryDependencies": [ "@nx-ui/button", "@nx-ui/dialog", "@nx-ui/input", "@nx-ui/label", "@nx-ui/mapbox", "@nx-ui/mapbox-overrides", "@nx-ui/os-grid-reference", "@nx-ui/spinner", "@nx-ui/tabs", "@nx-ui/utils" ], "files": [ { "path": "components/blocks/domain/location-selector/index.ts", "content": "export { LocationSelector, type LocationSelectorProps } from \"./location-selector\"\nexport { LocationSearch, type LocationSearchProps } from \"./location-search\"\nexport { LocationSearchBox, type LocationSearchBoxProps } from \"./location-search-box\"\nexport {\n LocationDetailsPanel,\n} from \"./location-details-panel\"\nexport { LocationMap, type LocationMapProps } from \"./location-map\"\nexport {\n LocationField,\n type LocationFieldProps,\n type LocationFieldTone,\n} from \"./location-field\"\nexport {\n LocationPickerModal,\n type LocationPickerModalProps,\n} from \"./location-picker-modal\"\nexport type {\n GeoPoint,\n GeocodeFn,\n GeocodeResult,\n LocationDetails,\n LocationOption,\n LocationValue,\n LocationValueKind,\n SelectedLocation,\n} from \"./types\"\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/index.ts" }, { "path": "components/blocks/domain/location-selector/location-details-panel.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Copy01 } from \"@untitledui/icons\"\n\nimport { latLonToOsGridReference } from \"@/lib/os-grid-reference\"\nimport { cn } from \"@/lib/utils\"\n\nimport type { SelectedLocation } from \"./types\"\n\n/**\n * LocationDetailsPanel — the read-out for a resolved location: the full address,\n * a display \"Town, County\" line, and a coordinates block (lat/lon to 6 dp and\n * the OS grid reference) with per-row copy buttons.\n */\nexport function LocationDetailsPanel({\n location,\n className,\n}: {\n location: SelectedLocation\n className?: string\n}) {\n const { point } = location\n const gridRef = latLonToOsGridReference(point.lat, point.lon)\n\n return (\n
\n
\n

\n Full address\n

\n

{location.label}

\n {location.displayLocation && (\n

{location.displayLocation}

\n )}\n
\n\n
\n

\n Coordinates\n

\n \n \n \n
\n
\n )\n}\n\nfunction CoordRow({\n label,\n value,\n copyable = true,\n}: {\n label: string\n value: string\n copyable?: boolean\n}) {\n const [copied, setCopied] = React.useState(false)\n\n async function copy() {\n try {\n await navigator.clipboard.writeText(value)\n setCopied(true)\n setTimeout(() => setCopied(false), 1200)\n } catch {\n // clipboard unavailable — ignore\n }\n }\n\n return (\n
\n {label}\n \n {value}\n {copyable && (\n \n {copied ? (\n \n ) : (\n \n )}\n \n )}\n \n
\n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-details-panel.tsx" }, { "path": "components/blocks/domain/location-selector/location-field.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MarkerPin01, PencilLine } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport type { LocationValue } from \"./types\"\n\nexport type LocationFieldTone = \"source\" | \"destination\" | \"neutral\"\n\nexport interface LocationFieldProps {\n /** The picked location, or `null` for the placeholder state. */\n value: LocationValue | null\n /** Opens the picker modal — fired from both the placeholder and \"Change\". */\n onOpen: () => void\n /**\n * Accent for the pin square, matching the map-pin colour coding: `source`\n * is Nexus accent yellow, `destination` success green, `neutral` brand navy.\n */\n tone?: LocationFieldTone\n placeholder?: string\n invalid?: boolean\n disabled?: boolean\n className?: string\n}\n\nconst TONE_CLASS: Record = {\n source: \"bg-accent-400 text-brand-700\",\n // Static green-600 ramp, not utility-green-600: the utility alias flips to\n // green-400 in dark mode, which fails contrast under fixed white text.\n destination: \"bg-green-600 text-white\",\n neutral: \"bg-brand-600 text-white dark:bg-brand-500\",\n}\n\n/**\n * LocationField — the selected-location card for movement forms. Empty, it is\n * a slim input-lookalike (\"Pick a location\"); once set it becomes a card with\n * a tone-tinted map-pin square, the location's label and secondary line, and\n * a \"Change\" affordance. The whole control opens the picker modal — pair it\n * with `LocationPickerModal`.\n */\nexport function LocationField({\n value,\n onOpen,\n tone = \"neutral\",\n placeholder = \"Pick a location\",\n invalid = false,\n disabled = false,\n className,\n}: LocationFieldProps) {\n if (!value) {\n return (\n \n \n {placeholder}\n \n )\n }\n\n return (\n \n \n \n \n \n \n \n {value.label}\n \n {value.badge && (\n \n {value.badge}\n \n )}\n \n {value.secondary && (\n \n {value.secondary}\n \n )}\n \n \n \n Change\n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-field.tsx" }, { "path": "components/blocks/domain/location-selector/location-map.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Map, {\n type MapRef,\n Marker,\n NavigationControl,\n} from \"react-map-gl/mapbox\"\n\nimport \"mapbox-gl/dist/mapbox-gl.css\"\n\n// Hides Mapbox's injected logo/attribution chrome on every map.\n// @registry-dep: mapbox-overrides\nimport \"@/styles/mapbox-overrides.css\"\n\nimport { MAPBOX_STYLES, MAPBOX_TOKEN } from \"@/lib/mapbox\"\nimport { cn } from \"@/lib/utils\"\n\nimport type { GeoPoint } from \"./types\"\n\ntype MapStyleKey = \"streets\" | \"satellite\"\n\nconst STYLE_URL: Record = {\n streets: MAPBOX_STYLES.light,\n satellite: MAPBOX_STYLES.satellite,\n}\n\nexport interface LocationMapProps {\n /** The currently-dropped point, or null. */\n point: GeoPoint | null\n /** Fired when the user clicks the map or finishes dragging the pin. */\n onPointChange: (point: GeoPoint) => void\n /** Mapbox access token; defaults to the shared `MAPBOX_TOKEN`. */\n token?: string\n className?: string\n}\n\n/** Great Britain default view when no point is set. */\nconst GB_VIEW = { longitude: -1.8, latitude: 52.5, zoom: 5.2 }\n\n/**\n * LocationMap — a Mapbox map with a draggable brand pin.\n *\n * Click the map to drop a pin, or drag the pin to fine-tune; both fire\n * `onPointChange`. A Map / Satellite toggle switches basemap. The map resizes\n * with its container. Reverse-geocoding of the new point is the parent's job\n * (it owns the `geocode` function) — this component only reports the point.\n */\nexport function LocationMap({\n point,\n onPointChange,\n token = MAPBOX_TOKEN,\n className,\n}: LocationMapProps) {\n const [styleKey, setStyleKey] = React.useState(\"satellite\")\n const mapRef = React.useRef(null)\n\n // Keep the map sized to its container across layout changes.\n React.useEffect(() => {\n const el = mapRef.current?.getContainer()\n if (!el || typeof ResizeObserver === \"undefined\") return\n const ro = new ResizeObserver(() => mapRef.current?.resize())\n ro.observe(el)\n return () => ro.disconnect()\n }, [])\n\n // Fly to a newly-set point (e.g. chosen from search).\n React.useEffect(() => {\n if (point) {\n mapRef.current?.flyTo({\n center: [point.lon, point.lat],\n zoom: Math.max(mapRef.current.getZoom() ?? 0, 14),\n speed: 0.8,\n curve: 1.4,\n })\n }\n }, [point])\n\n return (\n \n onPointChange({ lon: e.lngLat.lng, lat: e.lngLat.lat })}\n style={{ width: \"100%\", height: \"100%\" }}\n attributionControl={false}\n >\n \n {point && (\n onPointChange({ lon: e.lngLat.lng, lat: e.lngLat.lat })}\n anchor=\"bottom\"\n >\n \n \n )}\n \n\n {/* Style toggle */}\n \n {([\"streets\", \"satellite\"] as const).map((key) => (\n setStyleKey(key)}\n className={cn(\n \"px-3 py-1.5 text-xs font-semibold capitalize transition-colors\",\n styleKey === key\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-muted\"\n )}\n >\n {key === \"streets\" ? \"Map\" : \"Satellite\"}\n \n ))}\n \n\n {!point && (\n
\n \n Click the map to drop a pin\n \n
\n )}\n \n )\n}\n\n/** The brand pin: a pulsing ring around a teardrop, filled Nexus yellow. */\nfunction BrandPin() {\n return (\n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-map.tsx" }, { "path": "components/blocks/domain/location-selector/location-picker-modal.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MarkerPin01, SearchLg } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\n\nimport { LocationSelector } from \"./location-selector\"\nimport type {\n GeocodeFn,\n LocationOption,\n LocationValue,\n LocationValueKind,\n SelectedLocation,\n} from \"./types\"\n\nexport interface LocationPickerModalProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n /** Fires with the picked location (display snapshot included); the modal closes itself. */\n onSelect: (value: LocationValue) => void\n title?: string\n description?: string\n searchPlaceholder?: string\n /**\n * Static directory rows, filtered client-side as the user types. Rows keep\n * their own `kind`/`badge`/`group`, so one modal serves sites, stockpiles,\n * facilities and listings alike.\n */\n options?: LocationOption[]\n /**\n * Async directory search (server typeahead). When provided it replaces the\n * client-side filtering; `options` (if any) remain the pre-query list.\n */\n search?: (query: string) => Promise\n /** Copy for the no-results state, e.g. \"No stockpiles on this project…\". */\n emptyState?: { title: string; description?: string }\n /**\n * Enables the \"Map & address\" escape hatch — address geocoding plus a\n * draggable pin, reusing the block's hybrid `LocationSelector`.\n */\n geocode?: GeocodeFn\n /** Mapbox token for the map tab; defaults to the shared `MAPBOX_TOKEN`. */\n token?: string\n /** The `kind` stamped onto map/address picks. Defaults to \"freeform\". */\n freeformKind?: LocationValueKind\n}\n\n/**\n * LocationPickerModal — the set/change dialog behind `LocationField`. One\n * config-driven modal covers every backing directory: pass static `options`\n * (client-filtered), an async `search` (server typeahead), or both; add\n * `geocode` to unlock the \"Map & address\" tab for locations that are not in\n * any directory. Picks emit a `LocationValue` whose display snapshot (label,\n * secondary, badge, point) travels with the id.\n */\nexport function LocationPickerModal({\n open,\n onOpenChange,\n onSelect,\n title = \"Pick a location\",\n description = \"Search the directory, or use the map for somewhere new.\",\n searchPlaceholder = \"Search by name or address…\",\n options,\n search,\n emptyState,\n geocode,\n token,\n freeformKind = \"freeform\",\n}: LocationPickerModalProps) {\n const [tab, setTab] = React.useState<\"directory\" | \"map\">(\"directory\")\n const [query, setQuery] = React.useState(\"\")\n const [results, setResults] = React.useState(null)\n const [loading, setLoading] = React.useState(false)\n const [activeIndex, setActiveIndex] = React.useState(-1)\n const [freeform, setFreeform] = React.useState(null)\n const [freeformName, setFreeformName] = React.useState(\"\")\n\n const searchRef = React.useRef(null)\n const listRef = React.useRef(null)\n const requestSeq = React.useRef(0)\n const nameId = React.useId()\n\n React.useEffect(() => {\n if (!open) return\n setTab(\"directory\")\n setQuery(\"\")\n setResults(null)\n setLoading(false)\n setActiveIndex(-1)\n setFreeform(null)\n setFreeformName(\"\")\n }, [open])\n\n const trimmed = query.trim()\n\n // Async directory search (debounced, sequence-guarded).\n React.useEffect(() => {\n if (!search || !open) return\n if (!trimmed) {\n setResults(null)\n setLoading(false)\n return\n }\n setLoading(true)\n const seq = ++requestSeq.current\n const timer = setTimeout(async () => {\n try {\n const next = await search(trimmed)\n if (seq === requestSeq.current) {\n setResults(next)\n setActiveIndex(next.length > 0 ? 0 : -1)\n }\n } catch {\n if (seq === requestSeq.current) setResults([])\n } finally {\n if (seq === requestSeq.current) setLoading(false)\n }\n }, 250)\n return () => clearTimeout(timer)\n }, [search, trimmed, open])\n\n // The flat visible row list: async results when searching a server\n // directory, otherwise the static options filtered client-side.\n const visible = React.useMemo(() => {\n if (search && trimmed) return results ?? []\n const pool = options ?? []\n if (!trimmed) return pool\n const q = trimmed.toLowerCase()\n return pool.filter(\n (option) =>\n option.label.toLowerCase().includes(q) ||\n (option.secondary?.toLowerCase().includes(q) ?? false) ||\n (option.badge?.toLowerCase().includes(q) ?? false) ||\n (option.group?.toLowerCase().includes(q) ?? false)\n )\n }, [search, trimmed, results, options])\n\n // Group rows under their `group` heading, preserving order.\n const grouped = React.useMemo(() => {\n const map = new Map()\n for (const option of visible) {\n const key = option.group ?? \"\"\n const list = map.get(key) ?? []\n list.push(option)\n map.set(key, list)\n }\n return [...map.entries()]\n }, [visible])\n\n const commit = React.useCallback(\n (value: LocationValue) => {\n onSelect(value)\n onOpenChange(false)\n },\n [onSelect, onOpenChange]\n )\n\n const commitOption = (option: LocationOption) => {\n // Strip the picker-only `group` off the emitted value.\n const { group: _group, ...value } = option\n commit(value)\n }\n\n const handleSearchKeyDown = (e: React.KeyboardEvent) => {\n if (visible.length === 0) return\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault()\n const next =\n e.key === \"ArrowDown\"\n ? Math.min(activeIndex + 1, visible.length - 1)\n : Math.max(activeIndex - 1, 0)\n setActiveIndex(next)\n listRef.current\n ?.querySelector(`[data-index=\"${next}\"]`)\n ?.scrollIntoView({ block: \"nearest\" })\n } else if (e.key === \"Enter\") {\n e.preventDefault()\n const option = visible[activeIndex] ?? visible[0]\n if (option) commitOption(option)\n }\n }\n\n const commitFreeform = () => {\n if (!freeform) return\n const name = freeformName.trim()\n commit({\n kind: freeformKind,\n label: name || freeform.label,\n secondary: name ? freeform.label : freeform.displayLocation,\n point: freeform.point,\n details: freeform.details,\n })\n }\n\n const showEmpty =\n !loading &&\n visible.length === 0 &&\n (trimmed.length > 0 || (options?.length ?? 0) === 0)\n\n return (\n \n \n \n \n \n \n
\n {title}\n \n {description}\n \n
\n \n\n {geocode && (\n
\n {\n setTab(value as \"directory\" | \"map\")\n // The map selector resets on unmount, so drop any half-made\n // freeform pick rather than letting a stale one linger.\n if (value === \"directory\") {\n setFreeform(null)\n setFreeformName(\"\")\n }\n }}\n >\n \n Directory\n Map & address\n \n \n
\n )}\n\n {tab === \"directory\" ? (\n <>\n
\n
\n \n {\n setQuery(e.target.value)\n setActiveIndex(-1)\n }}\n onKeyDown={handleSearchKeyDown}\n placeholder={searchPlaceholder}\n aria-label={searchPlaceholder}\n className=\"h-9 w-full rounded-lg border border-input bg-background pr-3 pl-9 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/25\"\n data-slot=\"location-picker-search\"\n />\n
\n
\n\n \n {loading && (\n
\n \n Searching…\n
\n )}\n\n {!loading && search && !trimmed && visible.length === 0 && (\n

\n Start typing to search the directory.\n

\n )}\n\n {showEmpty && (\n
\n

\n {emptyState?.title ?? \"No locations found\"}\n

\n

\n {emptyState?.description ??\n (geocode\n ? \"Try a different name, or switch to Map & address to set it manually.\"\n : \"Try a different name.\")}\n

\n
\n )}\n\n {!loading &&\n grouped.map(([groupLabel, groupOptions]) => (\n
\n {groupLabel && (\n

\n {groupLabel}\n

\n )}\n
\n {groupOptions.map((option) => {\n const index = visible.indexOf(option)\n return (\n commitOption(option)}\n onMouseEnter={() => setActiveIndex(index)}\n className={cn(\n \"flex items-start gap-3 rounded-lg border p-2.5 text-left outline-none transition-colors focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/25\",\n index === activeIndex\n ? \"border-border bg-muted\"\n : \"border-transparent hover:border-border hover:bg-muted/60\"\n )}\n >\n \n \n \n \n \n \n {option.label}\n \n {option.badge && (\n \n {option.badge}\n \n )}\n \n {option.secondary && (\n \n {option.secondary}\n \n )}\n \n \n )\n })}\n
\n
\n ))}\n \n\n {geocode && (\n
\n

\n Not in the directory? Set it from the map instead.\n

\n setTab(\"map\")}\n data-slot=\"location-picker-to-map\"\n >\n Map & address\n \n
\n )}\n \n ) : (\n <>\n
\n \n
\n \n setFreeformName(e.target.value)}\n placeholder=\"e.g. Gate 3 laydown area\"\n className=\"h-9 text-sm\"\n />\n
\n
\n
\n

\n {freeform\n ? freeform.label\n : \"Search an address or drop a pin to continue.\"}\n

\n \n Use this location\n \n
\n \n )}\n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-picker-modal.tsx" }, { "path": "components/blocks/domain/location-selector/location-search-box.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MarkerPin01, SearchLg } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\nimport type { GeocodeFn, GeocodeResult } from \"./types\"\n\nexport interface LocationSearchBoxProps {\n geocode: GeocodeFn\n onSelect: (result: GeocodeResult) => void\n label?: string\n placeholder?: string\n /** Helper text under the input — defaults to a postcode tip. */\n hint?: React.ReactNode\n /** Controlled initial query text (uncontrolled thereafter). */\n initialQuery?: string\n disabled?: boolean\n className?: string\n}\n\n/**\n * LocationSearchBox — a debounced, keyboard-navigable address search.\n *\n * Calls the injected `geocode` function (min 3 chars, 300 ms debounce) and lists\n * the suggestions in a popover. Arrow keys move the active row, Enter selects,\n * Escape closes. Shared by the search-only and map-hybrid location selectors.\n */\nexport function LocationSearchBox({\n geocode,\n onSelect,\n label = \"Search address\",\n placeholder = \"Start typing an address…\",\n hint = \"Tip: postcodes work well.\",\n initialQuery = \"\",\n disabled = false,\n className,\n}: LocationSearchBoxProps) {\n const [query, setQuery] = React.useState(initialQuery)\n const [results, setResults] = React.useState([])\n const [open, setOpen] = React.useState(false)\n const [loading, setLoading] = React.useState(false)\n const [activeIndex, setActiveIndex] = React.useState(-1)\n const [touched, setTouched] = React.useState(false)\n\n const inputId = React.useId()\n const listboxId = React.useId()\n const containerRef = React.useRef(null)\n const requestSeq = React.useRef(0)\n\n // Debounced geocode. A monotonic sequence guards against out-of-order\n // responses overwriting a newer query's results.\n React.useEffect(() => {\n const q = query.trim()\n if (q.length < 3) {\n setResults([])\n setLoading(false)\n return\n }\n setLoading(true)\n const seq = ++requestSeq.current\n const timer = setTimeout(async () => {\n try {\n const next = await geocode({ query: q })\n if (seq === requestSeq.current) {\n setResults(next)\n setActiveIndex(next.length > 0 ? 0 : -1)\n }\n } catch {\n if (seq === requestSeq.current) setResults([])\n } finally {\n if (seq === requestSeq.current) setLoading(false)\n }\n }, 300)\n return () => clearTimeout(timer)\n }, [query, geocode])\n\n // Close on outside click.\n React.useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setOpen(false)\n }\n }\n document.addEventListener(\"mousedown\", handler)\n return () => document.removeEventListener(\"mousedown\", handler)\n }, [])\n\n function choose(result: GeocodeResult) {\n onSelect(result)\n setQuery(result.fullAddress)\n setOpen(false)\n setActiveIndex(-1)\n }\n\n function handleKeyDown(e: React.KeyboardEvent) {\n if (!open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n setOpen(true)\n return\n }\n if (e.key === \"ArrowDown\") {\n e.preventDefault()\n setActiveIndex((i) => Math.min(i + 1, results.length - 1))\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault()\n setActiveIndex((i) => Math.max(i - 1, 0))\n } else if (e.key === \"Enter\") {\n if (activeIndex >= 0 && results[activeIndex]) {\n e.preventDefault()\n choose(results[activeIndex])\n }\n } else if (e.key === \"Escape\") {\n setOpen(false)\n }\n }\n\n const showPanel = open && query.trim().length >= 3\n const showEmpty = showPanel && !loading && touched && results.length === 0\n\n return (\n
\n \n
\n \n = 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n }\n autoComplete=\"off\"\n disabled={disabled}\n value={query}\n placeholder={placeholder}\n onChange={(e) => {\n setQuery(e.target.value)\n setOpen(true)\n setTouched(true)\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={handleKeyDown}\n className=\"h-10 w-full rounded-lg border border-input bg-background pr-3 pl-9 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50\"\n />\n
\n {hint ?

{hint}

: null}\n\n {showPanel && (\n \n {loading && results.length === 0 ? (\n

Searching…

\n ) : showEmpty ? (\n
\n

No results

\n

\n Try a postcode, town/city, or a shorter query.\n

\n
\n ) : (\n
    \n {results.map((result, index) => (\n
  • \n setActiveIndex(index)}\n onClick={() => choose(result)}\n className={cn(\n \"flex w-full items-start gap-2.5 px-3 py-2 text-left text-sm\",\n index === activeIndex\n ? \"bg-accent text-accent-foreground\"\n : \"hover:bg-muted\"\n )}\n >\n \n \n \n {result.fullAddress}\n \n {result.displayLocation && (\n \n {result.displayLocation}\n \n )}\n \n \n
    • \n ))}\n
\n )}\n
\n )}\n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-search-box.tsx" }, { "path": "components/blocks/domain/location-selector/location-search.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Trash01 } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nimport { LocationDetailsPanel } from \"./location-details-panel\"\nimport { LocationSearchBox } from \"./location-search-box\"\nimport type { GeocodeFn, GeocodeResult, SelectedLocation } from \"./types\"\n\nexport interface LocationSearchProps {\n geocode: GeocodeFn\n onChange?: (location: SelectedLocation | null) => void\n initialQuery?: string\n label?: string\n placeholder?: string\n className?: string\n}\n\n/**\n * LocationSearch — the map-free variant of the location picker. Just the\n * debounced address search plus the resolved-address read-out (coordinates and\n * OS grid reference). Ideal where a map would be overkill, or on a first pass\n * that a fuller picker refines.\n */\nexport function LocationSearch({\n geocode,\n onChange,\n initialQuery,\n label,\n placeholder,\n className,\n}: LocationSearchProps) {\n const [selected, setSelected] = React.useState(null)\n\n function commit(next: SelectedLocation | null) {\n setSelected(next)\n onChange?.(next)\n }\n\n function handleSelect(result: GeocodeResult) {\n commit({\n point: result.point,\n label: result.fullAddress,\n displayLocation: result.displayLocation,\n details: result.details,\n })\n }\n\n return (\n \n \n {selected && (\n <>\n \n \n \n )}\n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-search.tsx" }, { "path": "components/blocks/domain/location-selector/location-selector.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Trash01 } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nimport { LocationDetailsPanel } from \"./location-details-panel\"\nimport { LocationSearchBox } from \"./location-search-box\"\nimport type {\n GeocodeFn,\n GeocodeResult,\n GeoPoint,\n SelectedLocation,\n} from \"./types\"\n\n// The map pulls in mapbox-gl (a large, browser-only dependency), so it is\n// loaded lazily — the search-only surfaces never pay for it.\nconst LocationMap = React.lazy(() =>\n import(\"./location-map\").then((m) => ({ default: m.LocationMap }))\n)\n\nexport interface LocationSelectorProps {\n geocode: GeocodeFn\n /** Fired whenever a location is confirmed (search pick, pin drop or drag). */\n onChange?: (location: SelectedLocation | null) => void\n /** Mapbox token; defaults to the shared `MAPBOX_TOKEN` from `@/lib/mapbox`. */\n token?: string\n initialQuery?: string\n className?: string\n}\n\nfunction toSelected(result: GeocodeResult): SelectedLocation {\n return {\n point: result.point,\n label: result.fullAddress,\n displayLocation: result.displayLocation,\n details: result.details,\n }\n}\n\n/**\n * LocationSelector — the UK location picker: search an address or drop/drag a\n * map pin, resolving to a `{lon, lat}` point plus a formatted address, a display\n * \"Town, County\" line and an OS grid reference. A two-column layout: search and\n * the resolved-address read-out on the left, the map on the right.\n *\n * `geocode` is injected by the consumer (forward for search, reverse for pin\n * moves), so the block carries no network dependency of its own.\n */\nexport function LocationSelector({\n geocode,\n onChange,\n token,\n initialQuery,\n className,\n}: LocationSelectorProps) {\n const [selected, setSelected] = React.useState(null)\n\n const commit = React.useCallback(\n (next: SelectedLocation | null) => {\n setSelected(next)\n onChange?.(next)\n },\n [onChange]\n )\n\n // A pin move: reverse-geocode the new point, falling back to raw coordinates.\n const handlePointChange = React.useCallback(\n async (point: GeoPoint) => {\n const coordsLabel = `${point.lat.toFixed(5)}, ${point.lon.toFixed(5)}`\n // Optimistically show the dropped point immediately.\n commit({ point, label: \"Dropped pin\" })\n try {\n const results = await geocode({ point })\n commit(results[0] ? toSelected(results[0]) : { point, label: coordsLabel })\n } catch {\n commit({ point, label: coordsLabel })\n }\n },\n [commit, geocode]\n )\n\n return (\n \n
\n commit(toSelected(result))}\n />\n {selected ? (\n <>\n \n \n \n ) : (\n

\n Search an address or place a pin on the map. Drag to fine-tune.\n

\n )}\n
\n\n
\n \n Loading map…\n
\n }\n >\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/location-selector.tsx" }, { "path": "components/blocks/domain/location-selector/types.ts", "content": "/**\n * Location selector — shared types.\n *\n * A UK-focused location picker: search an address (via an injected `geocode`\n * function) or drop/drag a map pin, resolving to a `{lon, lat}` point plus a\n * formatted address and structured details. Grid-reference conversion is done\n * from the point with `@/lib/os-grid-reference`.\n */\n\n/** A WGS84 point. */\nexport interface GeoPoint {\n lon: number\n lat: number\n}\n\n/** Structured address components, best-effort. */\nexport interface LocationDetails {\n city?: string\n county?: string\n postcode?: string\n}\n\n/** A single geocoding suggestion returned by the injected `geocode` function. */\nexport interface GeocodeResult {\n /** Stable id for keys (e.g. a Mapbox `mapbox_id`, or any unique string). */\n id: string\n /** The full, human-readable address, e.g. \"10 Downing Street, London, SW1A 2AA\". */\n fullAddress: string\n /** A shorter contextual label, e.g. \"Westminster, Greater London\". */\n displayLocation?: string\n point: GeoPoint\n details?: LocationDetails\n}\n\n/**\n * A forward/reverse geocoder. Forward calls pass `{ query }`; reverse calls\n * (from a dropped/dragged pin) pass `{ point }`. Return an ordered list of\n * results — forward geocoding typically returns several, reverse returns one.\n * Injected by the consumer, so the block ships with no network dependency.\n */\nexport type GeocodeFn = (\n request: { query: string } | { point: GeoPoint }\n) => Promise\n\n/** The value a location selector resolves to. */\nexport interface SelectedLocation {\n point: GeoPoint\n label: string\n displayLocation?: string\n details?: LocationDetails\n}\n\n// ─── Field + picker-modal flow ───────────────────────────────────────────────\n\n/** What kind of record a picked location refers to. */\nexport type LocationValueKind =\n | \"site\"\n | \"stockpile\"\n | \"supplier\"\n | \"facility\"\n | \"listing\"\n | \"freeform\"\n\n/**\n * The value the location field/modal flow resolves to: a display snapshot\n * (label, secondary line, badge) that travels with the backing id and point,\n * so consuming views never need to re-resolve the record to render it.\n */\nexport interface LocationValue {\n kind: LocationValueKind\n /** Backing record id, when the pick came from a directory list. */\n id?: string\n label: string\n /** Secondary display line — an address, \"permit · address\", etc. */\n secondary?: string\n /** Small badge next to the label, e.g. a permit number. */\n badge?: string\n point?: GeoPoint\n details?: LocationDetails\n}\n\n/** A pickable row in the location picker modal. */\nexport interface LocationOption extends LocationValue {\n id: string\n /** Optional grouping heading, e.g. a project name. */\n group?: string\n}\n", "type": "registry:component", "target": "components/blocks/domain/location-selector/types.ts" } ], "type": "registry:block" }