{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "store-locator",
"title": "Store Locator",
"description": "A page that finds stores: search a place and the map pulls in to it and its nearest stores, a list that follows the view and answers the map on hover, a drive-time halo round the store you pick, and directions to it. Calls /geocode/autocomplete (and /geocode/reverse for typed coordinates), /isochrone and /route. Ships with Ottawa Public Library branches (City of Ottawa open data).",
"dependencies": [
"@unmap/routing"
],
"registryDependencies": [
"https://registry.unmap.dev/r/map.json",
"https://registry.unmap.dev/r/map-context.json",
"https://registry.unmap.dev/r/geocoder.json",
"https://registry.unmap.dev/r/cluster-layer.json",
"https://registry.unmap.dev/r/geojson-layer.json",
"https://registry.unmap.dev/r/route-line.json",
"https://registry.unmap.dev/r/marker-popup.json",
"card",
"button",
"alert",
"spinner"
],
"files": [
{
"path": "registry/blocks/store-locator/page.tsx",
"content": "/**\n * /store-locator: the store-locator block as a Next.js App Router page, full-bleed (the block keeps\n * its own gutter). The key comes from NEXT_PUBLIC_UNMAP_KEY in .env.local; installing the block\n * added the empty line, paste your key.\n */\nimport { StoreLocator } from \"@/components/ui/store-locator\";\n\nexport const metadata = { title: \"Find a branch\" };\n\nexport default function StoreLocatorPage() {\n return (\n \n \n \n );\n}\n",
"type": "registry:page",
"target": "app/store-locator/page.tsx"
},
{
"path": "registry/blocks/store-locator/store-locator.tsx",
"content": "\"use client\";\n\n/**\n * - a store-locator page in one component. A full-bleed map with a floating panel\n * (a bottom sheet on a phone): search a place and the map pulls in to it and its nearest stores;\n * the list is the map's legend, listing the stores in view as clusters split on zoom; hover either\n * and the other answers; pick a store for its hours, a drive-time halo round it, and directions.\n *\n * Composes the registry's map, geocoder, cluster-layer, geojson-layer, route-line and\n * marker-popup items on your shadcn Card, Button, Alert and Spinner, in your tokens. Each action is\n * one request to the unmap API: the search box calls /geocode/autocomplete (and /geocode/reverse for\n * typed coordinates), the drive area calls /isochrone, \"Directions\" calls /route. Nothing is\n * requested until the reader acts. Routes and drive areas are OpenStreetMap data (ODbL), credited\n * in the panel.\n *\n * Ships with Ottawa Public Library branches (lib/store-locator-data) and credits them. Pass\n * `stores` for your own points. Installed by `npx shadcn add` with its page at\n * app/store-locator/page.tsx. Edit freely.\n */\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Router, type LngLat } from \"@unmap/routing\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { ClusterLayer } from \"@/components/ui/cluster-layer\";\nimport { Geocoder } from \"@/components/ui/geocoder\";\nimport { GeoJSONLayer } from \"@/components/ui/geojson-layer\";\nimport { Map } from \"@/components/ui/map\";\nimport { Marker, MarkerLabel } from \"@/components/ui/marker-popup\";\nimport { RouteLine } from \"@/components/ui/route-line\";\nimport { Spinner } from \"@/components/ui/spinner\";\nimport { useMap } from \"@/lib/map-context\";\nimport { STORES, STORES_SOURCE, type StoreCollection, type StoreFeature } from \"@/lib/store-locator-data\";\n\n// --- store-locator helpers (kept identical across both lanes) ---\nexport type LocatorLang = \"en\" | \"fr\";\n\n/** [west, south, east, north], as the map's visible bounds. */\nexport type LocatorBounds = [number, number, number, number];\n\n/** The place the reader searched for. */\nexport interface LocatorOrigin {\n name: string;\n lng: number;\n lat: number;\n}\n\n/** What /isochrone returns: GeoJSON polygons, largest band first. */\nexport interface LocatorReach {\n type: \"FeatureCollection\";\n features: Array<{ geometry: { type: string; coordinates: unknown } | null }>;\n}\n\nexport interface StoreRow {\n feature: StoreFeature;\n /** Metres from the searched place; null before a search. */\n distance: number | null;\n}\n\n/** A box on screen, as getBoundingClientRect() gives it. */\nexport interface LocatorRect {\n left: number;\n top: number;\n right: number;\n bottom: number;\n width: number;\n height: number;\n}\n\n/** Camera padding in pixels, as fitBounds takes it. */\nexport interface LocatorPadding {\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\n\n/** Where a reader gets an unmap key: the no-key state's first action. */\nexport const KEY_URL = \"https://unmap.dev/dashboard\";\n\nexport const LOCATOR_COPY = {\n en: {\n title: \"Find a branch\",\n intro: \"Search a place, or pick a branch on the map.\",\n search: \"Search a place\",\n list: \"Branches\",\n count: (n: number) => (n === 1 ? \"branch in view\" : \"branches in view\"),\n empty: \"No branches here. Zoom out, move the map, or show them all.\",\n allStores: \"Show all branches\",\n announceNearest: (place: string, store: string, distance: string) => `Nearest to ${place}: ${store}, ${distance}.`,\n announcePick: (store: string) => `${store} selected.`,\n capped: (n: number) => `Showing the first ${n}. Zoom in to see the rest.`,\n showList: \"Show the list\",\n hideList: \"Hide the list\",\n close: \"Close\",\n directions: \"Directions\",\n needOrigin: \"Search a place to get directions from it.\",\n reach: (minutes: number) => `${minutes} min drive area`,\n reachArea: (minutes: number, store: string) => `The shaded area is within a ${minutes} min drive of ${store}.`,\n reachInside: (place: string, minutes: number, store: string) => `${place} is within a ${minutes} min drive of ${store}.`,\n reachOutside: (place: string, minutes: number, store: string) =>\n `${place} is more than a ${minutes} min drive from ${store}.`,\n byCar: \"by car\",\n loadingRoute: \"Finding the route...\",\n loadingReach: \"Drawing the drive area...\",\n retry: \"Try again\",\n openToday: \"Open today\",\n closedToday: \"Closed today\",\n closed: \"Closed\",\n source: \"Data:\",\n routesCredit: \"Routes and drive areas:\",\n osm: \"OpenStreetMap contributors\",\n odbl: \"ODbL\",\n noKeyTitle: \"Add your unmap key to load the map.\",\n getKey: \"Get a key\",\n noKey:\n 'Pass apiKey. On Next.js, set NEXT_PUBLIC_UNMAP_KEY in .env.local. On Nuxt, set NUXT_PUBLIC_UNMAP_KEY in .env. If you installed with unmap add, nuxt.config already declares runtimeConfig: { public: { unmapKey: \"\" } }; otherwise add it there. Then restart the dev server.',\n outside: \"That place is outside Canada. Routing covers Canada.\",\n noRoute: \"No road connects those places.\",\n busy: \"Too many requests. Try again in a moment.\",\n keyRefused: \"The API key was refused. Check it and try again.\",\n unavailable: \"The service didn't answer. Try again in a moment.\",\n failed: \"The request failed. Try again.\",\n },\n fr: {\n title: \"Trouver une succursale\",\n intro: \"Cherchez un lieu ou choisissez une succursale sur la carte.\",\n search: \"Chercher un lieu\",\n list: \"Succursales\",\n count: (n: number) => (n === 1 ? \"succursale visible\" : \"succursales visibles\"),\n empty: \"Aucune succursale ici. Dézoomez, déplacez la carte ou affichez-les toutes.\",\n allStores: \"Afficher toutes les succursales\",\n announceNearest: (place: string, store: string, distance: string) => `Plus proche de ${place} : ${store}, ${distance}.`,\n announcePick: (store: string) => `${store} sélectionnée.`,\n capped: (n: number) => `Affichage des ${n} premières. Zoomez pour voir les autres.`,\n showList: \"Afficher la liste\",\n hideList: \"Masquer la liste\",\n close: \"Fermer\",\n directions: \"Itinéraire\",\n needOrigin: \"Cherchez un lieu pour obtenir un itinéraire à partir de celui-ci.\",\n reach: (minutes: number) => `Zone à ${minutes} min en voiture`,\n reachArea: (minutes: number, store: string) => `La zone colorée est à moins de ${minutes} min en voiture de ${store}.`,\n reachInside: (place: string, minutes: number, store: string) => `${place} est à moins de ${minutes} min en voiture de ${store}.`,\n reachOutside: (place: string, minutes: number, store: string) => `${place} est à plus de ${minutes} min en voiture de ${store}.`,\n byCar: \"en voiture\",\n loadingRoute: \"Calcul de l'itinéraire...\",\n loadingReach: \"Tracé de la zone...\",\n retry: \"Réessayer\",\n openToday: \"Ouvert aujourd'hui\",\n closedToday: \"Fermé aujourd'hui\",\n closed: \"Fermé\",\n source: \"Données :\",\n routesCredit: \"Itinéraires et zones de trajet :\",\n osm: \"contributeurs d'OpenStreetMap\",\n odbl: \"ODbL\",\n noKeyTitle: \"Ajoutez votre clé unmap pour charger la carte.\",\n getKey: \"Obtenir une clé\",\n noKey:\n 'Passez apiKey. Avec Next.js, définissez NEXT_PUBLIC_UNMAP_KEY dans .env.local. Avec Nuxt, définissez NUXT_PUBLIC_UNMAP_KEY dans .env. Si vous avez installé le bloc avec unmap add, nuxt.config déclare déjà runtimeConfig: { public: { unmapKey: \"\" } } ; sinon, ajoutez-le. Redémarrez ensuite le serveur de développement.',\n outside: \"Ce lieu est hors du Canada. Les itinéraires couvrent le Canada.\",\n noRoute: \"Aucune route ne relie ces lieux.\",\n busy: \"Trop de requêtes. Réessayez dans un instant.\",\n keyRefused: \"La clé API a été refusée. Vérifiez-la et réessayez.\",\n unavailable: \"Le service n'a pas répondu. Réessayez dans un instant.\",\n failed: \"La requête a échoué. Réessayez.\",\n },\n} satisfies Record string)>>;\n\n/** Downtown Ottawa, where the sample branches are. */\nexport const OTTAWA: [number, number] = [-75.69, 45.42];\n\n/** The block's own map id, so a map elsewhere on the page never answers for it. */\nexport const LOCATOR_MAP_ID = \"store-locator\";\n/** Source ids (and layer-id prefixes) of what the block draws. */\nexport const LOCATOR_LAYERS = {\n stores: \"store-locator-stores\",\n points: \"store-locator-stores-points\",\n reach: \"store-locator-reach\",\n route: \"store-locator-route\",\n focus: \"store-locator-focus\",\n};\n\n/** Who the routes and drive areas come from, and the licence they carry. */\nexport const ROUTING_CREDIT = {\n sourceUrl: \"https://www.openstreetmap.org/copyright\",\n licenceUrl: \"https://opendatacommons.org/licenses/odbl/\",\n};\n\n/** The drive-time halo is a light wash of the fill colour, so the stores under it stay readable. */\nexport const REACH_FILL = { \"fill-opacity\": 0.15 };\n/** The ring on the store under the pointer or picked: larger than a point, on a thick halo of the page ground, below the labels. */\nexport const FOCUS_CIRCLE = { \"circle-radius\": 10, \"circle-stroke-width\": 3 };\n\n/** The most rows the list renders; the headline still counts them all. */\nexport const LIST_LIMIT = 50;\n/** How many of the nearest stores a search frames with the searched place. */\nexport const NEAREST_FRAMED = 3;\n/** The panel's inset from the map edge, and the gutter the camera keeps. */\nexport const GUTTER = 24;\n/** Camera moves and the route draw-in, in milliseconds. Reduced motion jumps. */\nexport const CAMERA_MS = 800;\nexport const DRAW_MS = 900;\n\nconst EARTH_RADIUS_M = 6_371_008.8;\nconst DAYS = [\"sun\", \"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\"] as const;\n/** The least map, in pixels, a padded camera must have before it tightens its gutter. */\nconst MIN_FRAME = 120;\n/** The tightened gutter, and the least strip the camera keeps to frame in beside a tall panel. */\nconst TIGHT = 8;\nconst MIN_STRIP = 32;\n\n/** Great-circle distance in metres. */\nexport function distanceMetres(a: [number, number], b: [number, number]): number {\n const toRadians = (degrees: number) => (degrees * Math.PI) / 180;\n const dLat = toRadians(b[1] - a[1]);\n const dLng = toRadians(b[0] - a[0]);\n const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRadians(a[1])) * Math.cos(toRadians(b[1])) * Math.sin(dLng / 2) ** 2;\n return 2 * EARTH_RADIUS_M * Math.asin(Math.min(1, Math.sqrt(h)));\n}\n\n/** The map's visible bounds as [west, south, east, north]. */\nexport function boundsOf(map: { getBounds(): { toArray(): number[][] } }): LocatorBounds {\n const [southWest, northEast] = map.getBounds().toArray();\n return [southWest![0]!, southWest![1]!, northEast![0]!, northEast![1]!];\n}\n\nexport function inBounds([lng, lat]: [number, number], [west, south, east, north]: LocatorBounds): boolean {\n if (lat < south || lat > north) return false;\n // Across the antimeridian `west` is greater than `east`.\n return west <= east ? lng >= west && lng <= east : lng >= west || lng <= east;\n}\n\nfunction inRing([x, y]: [number, number], ring: [number, number][]): boolean {\n let inside = false;\n for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {\n const [xi, yi] = ring[i]!;\n const [xj, yj] = ring[j]!;\n if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;\n }\n return inside;\n}\n\nfunction inPolygon(point: [number, number], rings: [number, number][][]): boolean {\n const [outer, ...holes] = rings;\n return !!outer && inRing(point, outer) && !holes.some((hole) => inRing(point, hole));\n}\n\n/** The polygons of a drive-time area, each as its rings. */\nfunction polygonsOf(reach: LocatorReach): [number, number][][][] {\n return reach.features.flatMap(({ geometry }) => {\n if (geometry?.type === \"Polygon\") return [geometry.coordinates as [number, number][][]];\n if (geometry?.type === \"MultiPolygon\") return geometry.coordinates as [number, number][][][];\n return [];\n });\n}\n\n/** True when the point is inside any polygon of the drive-time area. */\nexport function inReach(point: [number, number], reach: LocatorReach): boolean {\n return polygonsOf(reach).some((polygon) => inPolygon(point, polygon));\n}\n\n/** [[west, south], [east, north]] around some points, for fitBounds. A loop: spreading a long route into Math.min overflows the stack. */\nexport function pointsBounds(points: [number, number][]): [[number, number], [number, number]] {\n let west = Infinity;\n let south = Infinity;\n let east = -Infinity;\n let north = -Infinity;\n for (const [lng, lat] of points) {\n if (lng < west) west = lng;\n if (lng > east) east = lng;\n if (lat < south) south = lat;\n if (lat > north) north = lat;\n }\n return [\n [west, south],\n [east, north],\n ];\n}\n\n/** The drive-time area's outer bounds, or null when it holds no polygon. */\nexport function reachBounds(reach: LocatorReach): [[number, number], [number, number]] | null {\n const points = polygonsOf(reach).flatMap((polygon) => polygon[0] ?? []);\n return points.length > 0 ? pointsBounds(points) : null;\n}\n\nexport function storeName(feature: StoreFeature, lang: LocatorLang): string {\n return lang === \"fr\" ? feature.properties.name_fr : feature.properties.name;\n}\n\n/**\n * The list beside the map: every store inside the view, nearest first after a search, by name\n * before one. The panel renders the first LIST_LIMIT and counts the rest.\n */\nexport function visibleStores(\n stores: StoreCollection,\n options: { bounds: LocatorBounds | null; origin: LocatorOrigin | null; lang: LocatorLang },\n): StoreRow[] {\n const { bounds, origin, lang } = options;\n const locale = lang === \"fr\" ? \"fr-CA\" : \"en-CA\";\n return stores.features\n .filter((feature) => !bounds || inBounds(feature.geometry.coordinates, bounds))\n .map((feature) => ({\n feature,\n distance: origin ? distanceMetres([origin.lng, origin.lat], feature.geometry.coordinates) : null,\n }))\n .sort((a, b) =>\n a.distance !== null && b.distance !== null\n ? a.distance - b.distance\n : storeName(a.feature, lang).localeCompare(storeName(b.feature, lang), locale),\n );\n}\n\n/** The stores to ring on the map, in order, each once: the one under the pointer and the one picked. */\nexport function focusCollection(stores: StoreCollection, ids: Array): StoreCollection {\n const wanted = [...new Set(ids.filter((id): id is string => !!id))];\n return {\n type: \"FeatureCollection\",\n features: wanted\n .map((id) => stores.features.find((feature) => feature.properties.id === id))\n .filter((feature): feature is StoreFeature => !!feature),\n };\n}\n\n/**\n * Camera padding that keeps what the camera frames clear of the floating panel: its width on the\n * left when it floats beside the map, its height at the bottom when it is a sheet across it. An\n * even gutter when nothing is measured. When the full gutter would leave too little map (a tall\n * sheet on a small phone), the gutter tightens and the frame stays in the strip the panel leaves,\n * never behind the panel.\n */\nexport function panelPadding(map: LocatorRect, panel: LocatorRect | null, gutter = GUTTER): LocatorPadding {\n const even = { top: gutter, right: gutter, bottom: gutter, left: gutter };\n if (!panel || panel.width <= 0 || panel.height <= 0 || map.width <= 0 || map.height <= 0) return even;\n const sheet = panel.width >= map.width * 0.6;\n const cover = Math.round(sheet ? map.bottom - panel.top : panel.right - map.left);\n const size = sheet ? map.height : map.width;\n if (size - 2 * gutter - cover >= MIN_FRAME) return sheet ? { ...even, bottom: cover + gutter } : { ...even, left: cover + gutter };\n const near = Math.min(cover + TIGHT, size - TIGHT - MIN_STRIP);\n return sheet ? { ...even, top: TIGHT, bottom: near } : { ...even, left: near, right: TIGHT };\n}\n\n/**\n * The list's scrollTop that shows a row whole, moving as little as it can; unchanged when the row\n * shows already. Scrolling the list itself, not scrollIntoView, keeps the page and the panel still.\n */\nexport function listScrollTop(\n view: { scrollTop: number; clientHeight: number },\n row: { offsetTop: number; offsetHeight: number },\n): number {\n if (row.offsetTop < view.scrollTop) return row.offsetTop;\n const bottom = row.offsetTop + row.offsetHeight;\n return bottom > view.scrollTop + view.clientHeight ? bottom - view.clientHeight : view.scrollTop;\n}\n\n/** The pixel offset that centres a point in the padded area: easeTo's `offset`, which, unlike its `padding`, does not stick. */\nexport function paddingOffset(padding: LocatorPadding): [number, number] {\n return [(padding.left - padding.right) / 2, (padding.top - padding.bottom) / 2];\n}\n\nexport function formatDistance(metres: number, lang: LocatorLang): string {\n if (metres < 1000) return `${Math.round(metres)} m`;\n const km = new Intl.NumberFormat(lang === \"fr\" ? \"fr-CA\" : \"en-CA\", {\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n });\n return `${km.format(metres / 1000)} km`;\n}\n\n/** \"18 min\", \"1 h 15 min\": a drive time, never under a minute. */\nexport function formatDuration(seconds: number, _lang: LocatorLang): string {\n const minutes = Math.max(1, Math.round(seconds / 60));\n if (minutes < 60) return `${minutes} min`;\n const rest = minutes % 60;\n return rest ? `${Math.floor(minutes / 60)} h ${rest} min` : `${minutes / 60} h`;\n}\n\n/** Today's opening hours as the data gives them (\"10:00-20:30\"), or \"Closed\". `day` is Date#getDay(). */\nexport function hoursToday(feature: StoreFeature, day: number, lang: LocatorLang): string {\n return feature.properties.hours[DAYS[day] ?? \"sun\"] ?? LOCATOR_COPY[lang].closed;\n}\n\n/** \"Open today 10:00-20:30\" or \"Closed today\". */\nexport function todayLine(feature: StoreFeature, day: number, lang: LocatorLang): string {\n const hours = feature.properties.hours[DAYS[day] ?? \"sun\"];\n const copy = LOCATOR_COPY[lang];\n return hours ? `${copy.openToday} ${hours}` : copy.closedToday;\n}\n\n/**\n * What to tell the reader about a failed request: the place, the key or the rate when the gateway\n * says so; a service that did not answer for a 5xx or a request that never got an HTTP answer.\n */\nexport function requestError(caught: unknown, lang: LocatorLang): string {\n const copy = LOCATOR_COPY[lang];\n const failure = typeof caught === \"object\" && caught !== null ? (caught as { code?: unknown; status?: unknown }) : {};\n const status = typeof failure.status === \"number\" ? failure.status : null;\n if (failure.code === \"outside_coverage\") return copy.outside;\n if (failure.code === \"no_route\") return copy.noRoute;\n if (status === 429) return copy.busy;\n if (status === 401 || status === 403) return copy.keyRefused;\n if (status === null || status >= 500) return copy.unavailable;\n return copy.failed;\n}\n\nexport function isAbort(caught: unknown): boolean {\n return typeof caught === \"object\" && caught !== null && (caught as { name?: unknown }).name === \"AbortError\";\n}\n\n/** True when the reader asked for less motion: the camera jumps and the route appears whole. */\nexport function prefersReducedMotion(): boolean {\n return typeof window !== \"undefined\" && window.matchMedia?.(\"(prefers-reduced-motion: reduce)\")?.matches === true;\n}\n\n/** Fast start, soft landing: the route's draw-in. */\nexport function easeOut(t: number): number {\n return 1 - (1 - t) ** 3;\n}\n// --- end store-locator helpers ---\n\nexport interface StoreLocatorProps {\n /** unmap API key. The page passes NEXT_PUBLIC_UNMAP_KEY. With none, the block asks for one and loads nothing. */\n apiKey: string;\n /** Gateway base URL. Defaults to the unmap production gateway. */\n gateway?: string;\n /** Your stores: a FeatureCollection of points with StoreProperties. Defaults to the sample Ottawa Public Library branches. */\n stores?: StoreCollection;\n /** The drive time the halo round a store covers, in minutes (1 to 120). Defaults to 10. */\n driveMinutes?: number;\n /** Where the map opens, [longitude, latitude]. Defaults to downtown Ottawa. */\n center?: [number, number];\n /** Opening zoom. Defaults to 11. */\n zoom?: number;\n /** Language of the copy, the numbers and the store names. Defaults to \"en\". */\n lang?: LocatorLang;\n className?: string;\n}\n\nexport function StoreLocator({\n apiKey,\n gateway,\n stores = STORES,\n driveMinutes = 10,\n center = OTTAWA,\n zoom = 11,\n lang = \"en\",\n className,\n}: StoreLocatorProps) {\n if (!apiKey.trim()) {\n const copy = LOCATOR_COPY[lang];\n // Where the map would be: the block's gutter, the Alert at a readable width, the first action first.\n return (\n \n \n {copy.noKeyTitle}\n \n \n {copy.getKey}\n \n
{copy.noKey}
\n \n \n \n );\n }\n return (\n
\n \n
\n );\n}\n\ntype Trip = { coordinates: LngLat[]; distanceMeters: number; durationSeconds: number };\ntype Hover = { id: string; from: \"map\" | \"list\" };\ntype Pending = \"route\" | \"reach\";\ntype MapPointerEvent = { features?: Array<{ properties?: Record | null }> };\n\n/** 0 to 1 as a new line draws in; 1 at once under reduced motion. */\nfunction useDrawIn(line: unknown): number {\n const [drawn, setDrawn] = useState<{ line: unknown; progress: number }>({ line: null, progress: 1 });\n useEffect(() => {\n if (!line || prefersReducedMotion()) return;\n if (typeof requestAnimationFrame !== \"function\") {\n setDrawn({ line, progress: 1 });\n return;\n }\n const start = performance.now();\n let frame = 0;\n const step = () => {\n const t = Math.min(1, (performance.now() - start) / DRAW_MS);\n setDrawn({ line, progress: easeOut(t) });\n if (t < 1) frame = requestAnimationFrame(step);\n };\n frame = requestAnimationFrame(step);\n return () => cancelAnimationFrame(frame);\n }, [line]);\n if (prefersReducedMotion()) return 1;\n return drawn.line === line ? drawn.progress : 0;\n}\n\n/** The route on the map, drawing in. Its own component so the draw-in's frames re-render the line alone, not the panel and its list. */\nfunction DrawnRoute({ line }: { line: Trip }) {\n const progress = useDrawIn(line);\n return ;\n}\n\n/** Everything that needs the map. It renders inside