@krizaka/ui 3.3.0 → 3.5.0

package/registry/map.json

@@ -0,0 +1,1368 @@
+{
+  "name": "map",
+  "type": "primitive",
+  "title": "Map",
+  "summary": "Maps that cost nothing per view — MapLibre (open source) over Protomaps tiles on the Krizaka CDN, painted from the tokens in dark or light and in the product's accent — with markers, clusters, the person's position, a radius and a location picker.",
+  "description": "Maps that cost nothing per view — MapLibre (open source) over Protomaps tiles on the Krizaka CDN, painted from the tokens in dark or light and in the product's accent — with markers, clusters, the person's position, a radius and a location picker.",
+  "status": "beta",
+  "category": "data-display",
+  "platforms": "both",
+  "whenToUse": [
+    "To show where things are: pick-up points, creators near you, an event's venue.",
+    "`Cluster` for many points (dozens to thousands): they group while close and open by zooming in.",
+    "`LocationPicker` to choose a place: a meeting point, a delivery address, the centre of a search with its radius.",
+    "`StaticMap` where a live map is too much (a card, a list, an e-mail) and as the `fallback` of every `Map`."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For an address typed or searched: a text field (geocoding is a server's job — Nominatim or Photon self-hosted later), the map only confirms it.",
+      "use": "field"
+    },
+    {
+      "when": "For figures by country or region (a choropleth): a chart.",
+      "use": "stat"
+    }
+  ],
+  "bestPractices": [
+    "Give every map a `label` and every marker a `label`: they are read as the list of places in place of the map.",
+    "Always pass a `fallback` (`StaticMap` with the same centre and places): it shows while the engine loads and for good without WebGL.",
+    "Ask for the position only on a press (`LocationPicker`'s Near me), never on load; every refusal has its words.",
+    "Keep the attribution visible (OpenStreetMap's licence, the ODbL, asks for it): the components draw it.",
+    "Install the engine only where a map is shown: `maplibre-gl` (web) or `@maplibre/maplibre-react-native` (Expo) — optional peers."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "The map (a region named by `label`), then its buttons: zoom, the markers that do something, Near me."
+      },
+      {
+        "keys": "Arrow keys",
+        "action": "Pan the focused map."
+      },
+      {
+        "keys": "+ / −",
+        "action": "Zoom the focused map in or out."
+      }
+    ],
+    "notes": [
+      "The canvas is hidden from assistive technologies: the places are read as a list (each `Marker`, `Cluster` point and the person's position by its `label`).",
+      "A marker with `onPress` is a button named by its label (`aria-pressed` when it can be chosen); the chosen one shows its name above it.",
+      "Under reduced motion the camera jumps instead of flying and the position's pulse stands still.",
+      "Colours come from the tokens: the water is the accent softened, roads and labels the text roles — readable in both schemes."
+    ]
+  },
+  "related": [
+    "dialog",
+    "search-field",
+    "chip"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/map",
+    "import": "import { Map, Marker, Cluster, UserPosition, RadiusCircle, LocationPicker, StaticMap, mapStyle, distanceMeters, formatDistance } from \"@krizaka/ui/map\";",
+    "props": [
+      {
+        "component": "MAP_GLYPHS",
+        "description": "The glyphs of the labels (Noto Sans, SIL OFL): `{fontstack}` and `{range}` filled by MapLibre.",
+        "props": []
+      },
+      {
+        "component": "LocationPicker",
+        "description": "A position picked by moving the map under a pin; its distance from the person; \"near me\" on request.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The picker's accessible name (\"Meeting point\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": null,
+            "description": "The BCP 47 locale of the distance.",
+            "required": true
+          },
+          {
+            "name": "onValueChange",
+            "type": "(value: LngLat) => void",
+            "default": null,
+            "description": "Called when the map rests on a new position.",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "LngLat",
+            "default": null,
+            "description": "The chosen position (controlled): the centre of the map.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product whose accent the map carries. Default `krizaka`.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root (its height: `h-80`, `aspect-video`).",
+            "required": false
+          },
+          {
+            "name": "fallback",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown in place of the map while its engine loads, and for good without WebGL: a `StaticMap`, a picture.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<LocationPickerLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "lang",
+            "type": "string",
+            "default": null,
+            "description": "The language of the labels (`fr`, `en`). Default `en`.",
+            "required": false
+          },
+          {
+            "name": "origin",
+            "type": "LngLat | null",
+            "default": "null",
+            "description": "Where the person is, when the app already knows it (the distance chip shows at once).",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": null,
+            "description": "A radius in metres drawn around the chosen position (a delivery zone, a search radius).",
+            "required": false
+          },
+          {
+            "name": "region",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14).",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "\"light\" | \"dark\"",
+            "default": null,
+            "description": "The scheme. Default: the page's (`html.light`), followed.",
+            "required": false
+          },
+          {
+            "name": "world",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The world's low zooms (PMTiles). Default: our world extract (to zoom 6).",
+            "required": false
+          },
+          {
+            "name": "zoom",
+            "type": "number",
+            "default": "14",
+            "description": "The zoom at first. Default 14.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Cluster",
+        "description": "Many points grouped while they are close: a disc with the count, opened by zooming in; each point is listed for screen readers.",
+        "props": [
+          {
+            "name": "points",
+            "type": "readonly ClusterPoint[]",
+            "default": null,
+            "description": "The points: many of them (creators, pick-up points, events).",
+            "required": true
+          },
+          {
+            "name": "onPointPress",
+            "type": "((point: ClusterPoint) => void)",
+            "default": null,
+            "description": "Pressing a single point. A group zooms in to open itself.",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": "48",
+            "description": "The radius, in pixels, within which points group. Default 48.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Map",
+        "description": "A map: MapLibre over our Protomaps tiles, styled from the tokens, with its places as a list for screen readers.",
+        "props": [
+          {
+            "name": "center",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where the map looks at first: longitude, latitude.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The map's accessible name (\"Pick-up points near you\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product whose accent the map carries. Default `krizaka`.",
+            "required": false
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Markers, circles, clusters, the user's position — and anything drawn over the map.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root (its height: `h-80`, `aspect-video`).",
+            "required": false
+          },
+          {
+            "name": "controlled",
+            "type": "boolean",
+            "default": null,
+            "description": "The camera follows `center` and `zoom` when they change (flies, or jumps under reduced motion).",
+            "required": false
+          },
+          {
+            "name": "controls",
+            "type": "boolean",
+            "default": "true",
+            "description": "The zoom buttons (default) — the keyboard also zooms with + and − on the focused map.",
+            "required": false
+          },
+          {
+            "name": "fallback",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown in place of the map while its engine loads, and for good without WebGL: a `StaticMap`, a picture.",
+            "required": false
+          },
+          {
+            "name": "interactive",
+            "type": "boolean",
+            "default": "true",
+            "description": "Moves with the hand (default); `false` makes a still picture of a place.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<MapLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "lang",
+            "type": "string",
+            "default": null,
+            "description": "The language of the labels (`fr`, `en`). Default `en`.",
+            "required": false
+          },
+          {
+            "name": "onMoveEnd",
+            "type": "((view: { center: LngLat; zoom: number; }) => void)",
+            "default": null,
+            "description": "Called when the camera rests: its centre and zoom.",
+            "required": false
+          },
+          {
+            "name": "onPress",
+            "type": "((position: LngLat) => void)",
+            "default": null,
+            "description": "Called with the position pressed on the map (not on a marker).",
+            "required": false
+          },
+          {
+            "name": "region",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14).",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "\"light\" | \"dark\"",
+            "default": null,
+            "description": "The scheme. Default: the page's (`html.light`), followed.",
+            "required": false
+          },
+          {
+            "name": "world",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The world's low zooms (PMTiles). Default: our world extract (to zoom 6).",
+            "required": false
+          },
+          {
+            "name": "zoom",
+            "type": "number",
+            "default": "12",
+            "description": "The zoom at first (0 the world, 12 a city, 16 a street). Default 12.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Marker",
+        "description": "A place on the map: an accent dot (or your content) that is a button when it does something.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words: the place's name, read in the list of places and as the button's name (\"Café Olimpico, 350 m\").",
+            "required": true
+          },
+          {
+            "name": "position",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where it stands.",
+            "required": true
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What it draws instead of the accent dot (an avatar, an icon).",
+            "required": false
+          },
+          {
+            "name": "onPress",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Pressing it (details in a panel, a sheet): the marker becomes a button.",
+            "required": false
+          },
+          {
+            "name": "selected",
+            "type": "boolean",
+            "default": null,
+            "description": "The chosen one: larger, its label shown above it.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "18",
+            "description": "Its size in pixels. Default 18.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "RadiusCircle",
+        "description": "A circle on the ground: a delivery zone, a search radius — filled with the accent, its edge drawn.",
+        "props": [
+          {
+            "name": "center",
+            "type": "LngLat",
+            "default": null,
+            "description": "Its centre.",
+            "required": true
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": null,
+            "description": "Its radius in metres.",
+            "required": true
+          },
+          {
+            "name": "tone",
+            "type": "\"accent\" | \"soft\"",
+            "default": "accent",
+            "description": "`accent` (a zone that matters: a delivery area, a search radius) or `soft` (an accuracy).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "UserPosition",
+        "description": "The person's position: a dot that pulses (still under reduced motion), its accuracy as a soft disc.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words (\"You are here\"), read in the list of places.",
+            "required": true
+          },
+          {
+            "name": "position",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where the person is.",
+            "required": true
+          },
+          {
+            "name": "accuracy",
+            "type": "number",
+            "default": null,
+            "description": "The accuracy in metres: a soft disc around the dot.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "StaticMap",
+        "description": "A still map: the places on the map's paper (or on a snapshot), named in words.",
+        "props": [
+          {
+            "name": "center",
+            "type": "LngLat",
+            "default": null,
+            "description": "The centre of the picture.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "What the picture shows, in words (\"Three pick-up points in the Plateau\"), passed translated: its accessible name.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root (its size).",
+            "required": false
+          },
+          {
+            "name": "image",
+            "type": "string",
+            "default": null,
+            "description": "A snapshot of the real map of the area (same centre and zoom), drawn under the places; the attribution then shows.",
+            "required": false
+          },
+          {
+            "name": "places",
+            "type": "readonly StaticMapPlace[]",
+            "default": "[]",
+            "description": "The places drawn on it (an accent dot each), listed in its name.",
+            "required": false
+          },
+          {
+            "name": "zoom",
+            "type": "number",
+            "default": "12",
+            "description": "The zoom of the picture. Default 12.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "REGION_FROM_ZOOM",
+        "description": "The zoom where the detailed region takes over from the world.",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "places",
+        "title": "Places",
+        "description": "Pick-up points in Montréal: markers are buttons, the chosen one shows its name.",
+        "path": "examples/map/places.tsx",
+        "module": "@krizaka/ui/registry/examples/map/places",
+        "code": "\"use client\";\n\nimport { Map, Marker, StaticMap } from \"@krizaka/ui/map\";\nimport * as React from \"react\";\n\nconst SPOTS = [\n  { id: \"olimpico\", label: \"Café Olimpico, Mile End\", position: [-73.6005, 45.5229] as const },\n  { id: \"jean-talon\", label: \"Marché Jean-Talon\", position: [-73.6147, 45.5363] as const },\n  { id: \"parc\", label: \"Parc La Fontaine\", position: [-73.5695, 45.5268] as const },\n];\n\n// Pick-up points in Montréal: markers are buttons, the chosen one shows its name; the places are a list for screen readers.\nexport default function MapPlaces() {\n  const [chosen, setChosen] = React.useState(\"olimpico\");\n  return (\n    <Map\n      label=\"Pick-up points in Montréal\"\n      center={[-73.592, 45.528]}\n      zoom={12.5}\n      className=\"h-80 w-full max-w-xl\"\n      fallback={<StaticMap label=\"Pick-up points in Montréal\" center={[-73.592, 45.528]} zoom={12.5} places={SPOTS} />}\n    >\n      {SPOTS.map((s) => (\n        <Marker key={s.id} position={s.position} label={s.label} selected={s.id === chosen} onPress={() => setChosen(s.id)} />\n      ))}\n    </Map>\n  );\n}\n"
+      },
+      {
+        "name": "cluster",
+        "title": "Cluster",
+        "description": "Sixty creators grouped while they are close; a group opens by zooming in.",
+        "path": "examples/map/cluster.tsx",
+        "module": "@krizaka/ui/registry/examples/map/cluster",
+        "code": "\"use client\";\n\nimport { Cluster, Map, StaticMap } from \"@krizaka/ui/map\";\n\n// 60 creators around Montréal, grouped while they are close; a group opens by zooming in.\nconst CREATORS = Array.from({ length: 60 }, (_, i) => ({\n  id: String(i),\n  label: `Creator ${i + 1}`,\n  position: [-73.62 + ((i * 37) % 60) / 600, 45.48 + ((i * 53) % 70) / 700] as const,\n}));\n\nexport default function MapCluster() {\n  return (\n    <Map label=\"Creators near Montréal\" center={[-73.58, 45.53]} zoom={11} className=\"h-80 w-full max-w-xl\" fallback={<StaticMap label=\"Creators near Montréal\" center={[-73.58, 45.53]} zoom={11} />}>\n      <Cluster points={CREATORS} />\n    </Map>\n  );\n}\n"
+      },
+      {
+        "name": "location-picker",
+        "title": "Location picker",
+        "description": "A meeting point under the pin, its distance from the person, a 1-km zone and Near me.",
+        "path": "examples/map/location-picker.tsx",
+        "module": "@krizaka/ui/registry/examples/map/location-picker",
+        "code": "\"use client\";\n\nimport { type LngLat, LocationPicker, StaticMap } from \"@krizaka/ui/map\";\nimport * as React from \"react\";\n\n// A meeting point picked by moving the map under the pin: its distance from the person, a 1-km zone, \"Near me\" on request.\nexport default function MapLocationPicker() {\n  const [point, setPoint] = React.useState<LngLat>([-73.5673, 45.5017]);\n  return (\n    <div className=\"w-full max-w-xl\">\n      <LocationPicker\n        label=\"Meeting point\"\n        locale=\"en-CA\"\n        value={point}\n        onValueChange={setPoint}\n        origin={[-73.5794, 45.5048]}\n        radius={1000}\n        fallback={<StaticMap label=\"Meeting point\" center={point} zoom={14} places={[{ position: point, label: \"Meeting point\" }]} />}\n      />\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "static",
+        "title": "Static map",
+        "description": "The places on the map's paper, without an engine: a card, a list item, a fallback.",
+        "path": "examples/map/static.tsx",
+        "module": "@krizaka/ui/registry/examples/map/static",
+        "code": "import { StaticMap } from \"@krizaka/ui/map\";\n\n// A still map without an engine: the places projected on the map's paper — a card, a list item, the fallback of a Map.\nexport default function MapStatic() {\n  return (\n    <div className=\"h-56 w-full max-w-md overflow-hidden rounded-2xl border border-border-default\">\n      <StaticMap\n        label=\"Your two pick-up points\"\n        center={[-73.585, 45.524]}\n        zoom={13}\n        places={[\n          { position: [-73.6005, 45.5229], label: \"Café Olimpico\" },\n          { position: [-73.5695, 45.5268], label: \"Parc La Fontaine\" },\n        ]}\n      />\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native/map",
+    "import": "import { Map, Marker, Cluster, UserPosition, RadiusCircle, LocationPicker } from \"@krizaka/ui/native/map\";",
+    "differences": [
+      "MapLibre Native (`@maplibre/maplibre-react-native`, an optional peer, with its Expo config plugin): the same style and tiles as the web — it reads `pmtiles://` itself.",
+      "A marker's details open in a `Sheet` (`@krizaka/ui/native`); markers and Near me play a haptic.",
+      "Near me asks the system's permission through MapLibre's `LocationManager` when pressed; the app declares the location usage in its config.",
+      "The map's name lists its places for VoiceOver and TalkBack; the screenshots of these stories are drawn by a stand-in (the markers placed, not the tiles)."
+    ],
+    "props": [
+      {
+        "component": "Map",
+        "description": "A map: MapLibre Native over our Protomaps tiles, styled from the tokens in the app's scheme; its places in its name.",
+        "props": [
+          {
+            "name": "center",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where the map looks: longitude, latitude.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The map's accessible name (\"Pick-up points near you\"), passed translated; the places follow it.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product whose accent the map carries. Default `krizaka`.",
+            "required": false
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Markers, circles, clusters, the person's position.",
+            "required": false
+          },
+          {
+            "name": "interactive",
+            "type": "boolean",
+            "default": "true",
+            "description": "Moves with the hand (default).",
+            "required": false
+          },
+          {
+            "name": "lang",
+            "type": "string",
+            "default": null,
+            "description": "The language of the labels (`fr`, `en`). Default `en`.",
+            "required": false
+          },
+          {
+            "name": "onMoveEnd",
+            "type": "((view: { center: LngLat; zoom: number; }) => void)",
+            "default": null,
+            "description": "Called when the camera rests: its centre and zoom.",
+            "required": false
+          },
+          {
+            "name": "onPress",
+            "type": "((position: LngLat) => void)",
+            "default": null,
+            "description": "Called with the position pressed on the map (not on a marker).",
+            "required": false
+          },
+          {
+            "name": "region",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last (its height).",
+            "required": false
+          },
+          {
+            "name": "world",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The world's low zooms (PMTiles). Default: our world extract (to zoom 6).",
+            "required": false
+          },
+          {
+            "name": "zoom",
+            "type": "number",
+            "default": "12",
+            "description": "The zoom (0 the world, 12 a city, 16 a street). Default 12.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Marker",
+        "description": "A place: an accent dot (or your view) that is a button when it does something.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words: the place's name (read in the map's name and as the button's name).",
+            "required": true
+          },
+          {
+            "name": "position",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where it stands.",
+            "required": true
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What it draws instead of the accent dot.",
+            "required": false
+          },
+          {
+            "name": "onPress",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Pressing it: details in a `Sheet`.",
+            "required": false
+          },
+          {
+            "name": "selected",
+            "type": "boolean",
+            "default": null,
+            "description": "The chosen one: larger, its label above it.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "UserPosition",
+        "description": "The person's position: a dot that pulses (still when the system reduces motion).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words (\"You are here\").",
+            "required": true
+          },
+          {
+            "name": "position",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where the person is.",
+            "required": true
+          },
+          {
+            "name": "accuracy",
+            "type": "number",
+            "default": null,
+            "description": "The accuracy in metres: a soft disc.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "RadiusCircle",
+        "description": "A circle on the ground: a delivery zone, a search radius.",
+        "props": [
+          {
+            "name": "center",
+            "type": "LngLat",
+            "default": null,
+            "description": "Its centre.",
+            "required": true
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": null,
+            "description": "Its radius in metres.",
+            "required": true
+          },
+          {
+            "name": "tone",
+            "type": "\"accent\" | \"soft\"",
+            "default": "accent",
+            "description": "`accent` (a zone) or `soft` (an accuracy).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Cluster",
+        "description": "Many points grouped while they are close: a disc with the count; each point is part of the map's name.",
+        "props": [
+          {
+            "name": "points",
+            "type": "readonly ClusterPoint[]",
+            "default": null,
+            "description": "The points: many of them.",
+            "required": true
+          },
+          {
+            "name": "onPointPress",
+            "type": "((point: ClusterPoint) => void)",
+            "default": null,
+            "description": "Pressing a single point (details in a `Sheet`).",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": "48",
+            "description": "The radius, in points, within which points group. Default 48.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "LocationPicker",
+        "description": "A position picked by moving the map under a pin; its distance from the person; \"near me\" asks for the location only when pressed.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The picker's accessible name (\"Meeting point\").",
+            "required": true
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": null,
+            "description": "The BCP 47 locale of the distance.",
+            "required": true
+          },
+          {
+            "name": "onValueChange",
+            "type": "(value: LngLat) => void",
+            "default": null,
+            "description": "Called when the map rests on a new position.",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "LngLat",
+            "default": null,
+            "description": "The chosen position (the centre of the map).",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product whose accent the map carries. Default `krizaka`.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<LocationPickerLabels>",
+            "default": null,
+            "description": "The words, passed translated.",
+            "required": false
+          },
+          {
+            "name": "lang",
+            "type": "string",
+            "default": null,
+            "description": "The language of the labels (`fr`, `en`). Default `en`.",
+            "required": false
+          },
+          {
+            "name": "origin",
+            "type": "LngLat | null",
+            "default": "null",
+            "description": "Where the person is, when already known.",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": null,
+            "description": "A radius in metres around the chosen position.",
+            "required": false
+          },
+          {
+            "name": "region",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last (its height).",
+            "required": false
+          },
+          {
+            "name": "world",
+            "type": "MapRegion | null",
+            "default": null,
+            "description": "The world's low zooms (PMTiles). Default: our world extract (to zoom 6).",
+            "required": false
+          },
+          {
+            "name": "zoom",
+            "type": "number",
+            "default": "14",
+            "description": "The zoom. Default 14.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "MAP_GLYPHS",
+        "description": "The glyphs of the labels (Noto Sans, SIL OFL): `{fontstack}` and `{range}` filled by MapLibre.",
+        "props": []
+      },
+      {
+        "component": "LngLat",
+        "description": "A position: longitude, latitude (GeoJSON's order, MapLibre's `LngLat`).",
+        "props": []
+      },
+      {
+        "component": "MapRegion",
+        "description": "A region of the basemap: its PMTiles file and the zoom up to which it has tiles.",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "places",
+        "title": "Places",
+        "description": "Pick-up points: a marker pressed opens its details in a bottom sheet.",
+        "path": "examples/map/native/places.tsx",
+        "module": "@krizaka/ui/registry/examples/map/native/places",
+        "code": "import { Button, Sheet, Txt } from \"@krizaka/ui/native\";\nimport { Map, Marker } from \"@krizaka/ui/native/map\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst SPOTS = [\n  { id: \"olimpico\", label: \"Café Olimpico\", address: \"124 Rue Saint-Viateur O\", position: [-73.6005, 45.5229] as const },\n  { id: \"parc\", label: \"Parc La Fontaine\", address: \"3933 Av. du Parc-La Fontaine\", position: [-73.5695, 45.5268] as const },\n];\n\n// Pick-up points: a marker pressed opens its details in a bottom sheet.\nexport default function NativeMapPlaces() {\n  const [open, setOpen] = React.useState<(typeof SPOTS)[number] | null>(null);\n  return (\n    <View style={{ width: 340 }}>\n      <Map label=\"Pick-up points in Montréal\" center={[-73.585, 45.524]} zoom={12.5}>\n        {SPOTS.map((s) => (\n          <Marker key={s.id} position={s.position} label={s.label} selected={open?.id === s.id} onPress={() => setOpen(s)} />\n        ))}\n      </Map>\n      <Sheet open={Boolean(open)} onOpenChange={(o) => !o && setOpen(null)} title={open?.label}>\n        <Txt tone=\"secondary\">{open?.address}</Txt>\n        <Button label=\"Choose this point\" variant=\"primary\" onPress={() => setOpen(null)} />\n      </Sheet>\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/map/native/places.dark.png",
+          "light": "examples/map/native/places.light.png"
+        }
+      },
+      {
+        "name": "location-picker",
+        "title": "Location picker",
+        "description": "A meeting point under the pin; Near me on request.",
+        "path": "examples/map/native/location-picker.tsx",
+        "module": "@krizaka/ui/registry/examples/map/native/location-picker",
+        "code": "import { type LngLat, LocationPicker } from \"@krizaka/ui/native/map\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\n// A meeting point under the pin; \"Near me\" asks for the location only when pressed, the distance follows.\nexport default function NativeMapLocationPicker() {\n  const [point, setPoint] = React.useState<LngLat>([-73.5673, 45.5017]);\n  return (\n    <View style={{ width: 340 }}>\n      <LocationPicker label=\"Meeting point\" locale=\"en-CA\" value={point} onValueChange={setPoint} origin={[-73.5794, 45.5048]} radius={1000} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/map/native/location-picker.dark.png",
+          "light": "examples/map/native/location-picker.light.png"
+        }
+      }
+    ]
+  },
+  "files": [
+    {
+      "path": "map/assets.ts",
+      "content": "// Where the basemap lives: Protomaps PMTiles extracts on the Krizaka CDN (Bunny), uploaded by tools/map-assets.mjs.\n// No API key, no metered service: one file per region, read by HTTP range requests. A new extract is a new file (its\n// build date in the name) and a new default here.\n\nconst CDN = \"https://krizaka-assets.b-cdn.net/maps/v1\";\n\n/** The basemap extracts: OpenStreetMap data built by Protomaps (ODbL). `world` up to zoom 6, `quebec` (Montréal–Québec) up to 14. */\nexport const MAP_TILES = {\n  world: `${CDN}/tiles/world-20261012.pmtiles`,\n  quebec: `${CDN}/tiles/quebec-20261012.pmtiles`,\n} as const;\n\n/** The glyphs of the labels (Noto Sans, SIL OFL): `{fontstack}` and `{range}` filled by MapLibre. */\nexport const MAP_GLYPHS = `${CDN}/fonts/{fontstack}/{range}.pbf`;\n\n/** The words every map shows, as the licences ask: OpenStreetMap's contributors (ODbL) and Protomaps. */\nexport const MAP_ATTRIBUTION = { osm: \"© OpenStreetMap contributors\", osmUrl: \"https://www.openstreetmap.org/copyright\", protomaps: \"Protomaps\", protomapsUrl: \"https://protomaps.com\" } as const;\n\nlet base: string | null = null;\n\n/**\n * Where the maps read the tiles and the glyphs, when not from the CDN itself: a same-origin path that proxies it\n * (`https://www.krizaka.com/maps/v1`, a rewrite of the site) — no cross-origin request at all. Absolute URL, no trailing slash.\n */\nexport function setMapAssetsBase(url: string | null) {\n  base = url ? url.replace(/\\/+$/, \"\") : null;\n}\n\n/** The tiles and glyphs the maps read now: the CDN's, or under the base set by `setMapAssetsBase`. */\nexport function mapAssets() {\n  const at = (u: string) => (base ? u.replace(CDN, base) : u);\n  return { tiles: { world: at(MAP_TILES.world), quebec: at(MAP_TILES.quebec) }, glyphs: at(MAP_GLYPHS) };\n}\n"
+    },
+    {
+      "path": "map/geo.ts",
+      "content": "/// <reference types=\"geojson\" />\n\n// Plain geometry for the maps, web and native (no DOM, no React): distances, circles, the Web Mercator projection.\n\n/** A position: longitude, latitude (GeoJSON's order, MapLibre's `LngLat`). */\nexport type LngLat = readonly [lng: number, lat: number];\n\nconst R = 6_371_008.8;\nconst rad = (d: number) => (d * Math.PI) / 180;\n\n/** The great-circle distance between two positions, in metres (haversine). */\nexport function distanceMeters(a: LngLat, b: LngLat): number {\n  const dLat = rad(b[1] - a[1]);\n  const dLng = rad(b[0] - a[0]);\n  const h = Math.sin(dLat / 2) ** 2 + Math.cos(rad(a[1])) * Math.cos(rad(b[1])) * Math.sin(dLng / 2) ** 2;\n  return 2 * R * Math.asin(Math.min(1, Math.sqrt(h)));\n}\n\n/** A circle of `radius` metres around `center` as a GeoJSON polygon (`steps` points): a delivery zone, a search radius. */\nexport function circlePolygon(center: LngLat, radius: number, steps = 64): GeoJSON.Feature<GeoJSON.Polygon> {\n  const [lng, lat] = center;\n  const d = radius / R;\n  const ring: [number, number][] = [];\n  for (let i = 0; i <= steps; i++) {\n    const brg = (2 * Math.PI * i) / steps;\n    const lat2 = Math.asin(Math.sin(rad(lat)) * Math.cos(d) + Math.cos(rad(lat)) * Math.sin(d) * Math.cos(brg));\n    const lng2 = rad(lng) + Math.atan2(Math.sin(brg) * Math.sin(d) * Math.cos(rad(lat)), Math.cos(d) - Math.sin(rad(lat)) * Math.sin(lat2));\n    ring.push([(lng2 * 180) / Math.PI, (lat2 * 180) / Math.PI]);\n  }\n  return { type: \"Feature\", properties: {}, geometry: { type: \"Polygon\", coordinates: [ring] } };\n}\n\n/** The Web Mercator pixel of a position at a zoom (256-px tiles): what a static map draws without an engine. */\nexport function project([lng, lat]: LngLat, zoom: number): [number, number] {\n  const scale = 256 * 2 ** zoom;\n  const s = Math.sin(rad(Math.max(-85.0511, Math.min(85.0511, lat))));\n  return [((lng + 180) / 360) * scale, (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * scale];\n}\n\n/** A distance written the locale's way: metres under 1 km, kilometres (one decimal under 10) above. */\nexport function formatDistance(meters: number, locale: string): string {\n  if (meters < 1000) return new Intl.NumberFormat(locale, { style: \"unit\", unit: \"meter\", maximumFractionDigits: 0 }).format(Math.round(meters / 10) * 10);\n  return new Intl.NumberFormat(locale, { style: \"unit\", unit: \"kilometer\", maximumFractionDigits: meters < 10_000 ? 1 : 0 }).format(meters / 1000);\n}\n"
+    },
+    {
+      "path": "map/index.ts",
+      "content": "/**\n * @krizaka/ui/map — maps on MapLibre GL JS (open source) over Protomaps tiles on the Krizaka CDN, styled from the\n * tokens: `Map`, `Marker`, `Cluster`, `UserPosition`, `RadiusCircle`, `LocationPicker`, `StaticMap` (the fallback), the\n * style (`mapStyle`, `mapPalette`) and the geometry (`distanceMeters`, `circlePolygon`, `formatDistance`). maplibre-gl\n * and pmtiles are optional peers, loaded when a map is shown. Client (\"use client\").\n */\nexport { MAP_ATTRIBUTION, MAP_GLYPHS, MAP_TILES, mapAssets, setMapAssetsBase } from \"./assets\";\nexport { circlePolygon, distanceMeters, formatDistance, type LngLat, project } from \"./geo\";\nexport { LocationPicker, locationPicker, type LocationPickerLabels, locationPickerLabels, type LocationPickerProps } from \"./location-picker\";\nexport {\n  Cluster,\n  type ClusterPoint,\n  type ClusterProps,\n  configureMaps,\n  Map,\n  map,\n  type MapLabels,\n  mapLabels,\n  type MapProps,\n  Marker,\n  type MarkerProps,\n  RadiusCircle,\n  type RadiusCircleProps,\n  useMap,\n  UserPosition,\n  type UserPositionProps,\n} from \"./map\";\nexport { StaticMap, staticMap, type StaticMapPlace, type StaticMapProps } from \"./static-map\";\nexport { type MapBrand, mapFlavor, mapPalette, type MapRegion, mapStyle, type MapStyleOptions, mix, REGION_FROM_ZOOM } from \"./style\";\n"
+    },
+    {
+      "path": "map/location-picker.tsx",
+      "content": "// Client. A place chosen by moving the map under a fixed pin — a meeting point, a delivery address, the centre of a\n// search — with its distance from where the person is (a chip) and \"near me\": the browser asks for the position only when\n// the button is pressed, and every answer has its words (locating, refused, unavailable). The value is a position.\nimport * as React from \"react\";\n\nimport { tv } from \"../tv\";\nimport { distanceMeters, formatDistance, type LngLat } from \"./geo\";\nimport { Map, type MapProps, RadiusCircle, UserPosition } from \"./map\";\n\nexport const locationPicker = tv({\n  slots: {\n    root: \"flex flex-col gap-2\",\n    frame: \"relative\",\n    pin: \"pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-full text-accent drop-shadow-md\",\n    bar: \"absolute inset-x-3 bottom-8 z-10 flex flex-wrap items-center justify-between gap-2\",\n    chip: \"rounded-full border border-border-default bg-surface-1 px-3 py-1.5 text-xs font-semibold tabular-nums text-fg shadow-floating\",\n    near:\n      \"inline-flex h-10 items-center gap-2 rounded-full border border-border-default bg-surface-1 bg-sheen px-4 text-sm font-semibold text-fg shadow-floating inset-shadow-edge \" +\n      \"transition-colors hover:border-border-strong focus-visible:outline-hidden focus-visible:focus-ring disabled:opacity-60\",\n    status: \"text-xs text-fg-secondary data-[tone=danger]:text-fg-danger\",\n  },\n});\n\nexport type LocationPickerLabels = {\n  /** The button that centres the map on the person (\"Near me\"). */\n  nearMe: string;\n  /** While the position is asked (\"Finding you…\"). */\n  locating: string;\n  /** The person refused (\"Location is off for this site. Move the map instead.\"). */\n  denied: string;\n  /** No position (no GPS, a timeout) (\"We could not find you. Move the map instead.\"). */\n  unavailable: string;\n  /** The person's place in the list of places (\"You are here\"). */\n  you: string;\n  /** The distance chip, from a written distance (\"1.2 km from you\"). */\n  distance: (distance: string) => string;\n};\n\nexport const locationPickerLabels: LocationPickerLabels = {\n  nearMe: \"Near me\",\n  locating: \"Finding you…\",\n  denied: \"Location is off for this site. Move the map instead.\",\n  unavailable: \"We could not find you. Move the map instead.\",\n  you: \"You are here\",\n  distance: (d) => `${d} from you`,\n};\n\nexport type LocationPickerProps = Pick<MapProps, \"scheme\" | \"brand\" | \"lang\" | \"region\" | \"world\" | \"fallback\" | \"className\"> & {\n  /** The picker's accessible name (\"Meeting point\"), passed translated. */\n  label: string;\n  /** The chosen position (controlled): the centre of the map. */\n  value: LngLat;\n  /** Called when the map rests on a new position. */\n  onValueChange: (value: LngLat) => void;\n  /** The BCP 47 locale of the distance. */\n  locale: string;\n  /** The zoom at first. Default 14. */\n  zoom?: number;\n  /** A radius in metres drawn around the chosen position (a delivery zone, a search radius). */\n  radius?: number;\n  /** Where the person is, when the app already knows it (the distance chip shows at once). */\n  origin?: LngLat | null;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<LocationPickerLabels>;\n};\n\ntype Status = \"idle\" | \"locating\" | \"denied\" | \"unavailable\";\n\n/** A position picked by moving the map under a pin; its distance from the person; \"near me\" on request. */\nexport function LocationPicker({ label, value, onValueChange, locale, zoom = 14, radius, origin: originProp = null, labels: given, className, ...map }: LocationPickerProps) {\n  const labels = { ...locationPickerLabels, ...given };\n  const s = locationPicker();\n  const [origin, setOrigin] = React.useState<LngLat | null>(originProp);\n  const [camera, setCamera] = React.useState<LngLat>(value);\n  const [status, setStatus] = React.useState<Status>(\"idle\");\n  const statusId = React.useId();\n  const nearMe = () => {\n    if (typeof navigator === \"undefined\" || !navigator.geolocation) return setStatus(\"unavailable\");\n    setStatus(\"locating\");\n    navigator.geolocation.getCurrentPosition(\n      (p) => {\n        const here: LngLat = [p.coords.longitude, p.coords.latitude];\n        setOrigin(here);\n        setCamera(here);\n        onValueChange(here);\n        setStatus(\"idle\");\n      },\n      (e) => setStatus(e.code === 1 ? \"denied\" : \"unavailable\"),\n      { enableHighAccuracy: false, timeout: 10_000, maximumAge: 60_000 },\n    );\n  };\n  const distance = origin ? formatDistance(distanceMeters(origin, value), locale) : null;\n  const message = status === \"locating\" ? labels.locating : status === \"denied\" ? labels.denied : status === \"unavailable\" ? labels.unavailable : \"\";\n  return (\n    <div className={s.root({ className })} role=\"group\" aria-label={label}>\n      <div className={s.frame()}>\n        <Map {...map} label={label} center={camera} zoom={zoom} controlled onMoveEnd={(v) => onValueChange(v.center)} className=\"h-80\">\n          {radius ? <RadiusCircle center={value} radius={radius} /> : null}\n          {origin ? <UserPosition position={origin} label={labels.you} /> : null}\n        </Map>\n        <svg aria-hidden viewBox=\"0 0 24 32\" className={s.pin()} width=\"30\" height=\"40\">\n          <path d=\"M12 0C5.4 0 0 5.2 0 11.7 0 20.4 12 32 12 32s12-11.6 12-20.3C24 5.2 18.6 0 12 0Z\" fill=\"currentColor\" />\n          <circle cx=\"12\" cy=\"11.5\" r=\"4.5\" fill=\"var(--kz-on-accent)\" />\n        </svg>\n        <div className={s.bar()}>\n          {distance ? (\n            <span className={s.chip()} aria-live=\"polite\">\n              {labels.distance(distance)}\n            </span>\n          ) : (\n            <span />\n          )}\n          <button type=\"button\" className={s.near()} onClick={nearMe} disabled={status === \"locating\"} aria-describedby={message ? statusId : undefined}>\n            <svg aria-hidden viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"3.5\" />\n              <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\" />\n            </svg>\n            {status === \"locating\" ? labels.locating : labels.nearMe}\n          </button>\n        </div>\n      </div>\n      <p id={statusId} className={s.status()} data-tone={status === \"denied\" || status === \"unavailable\" ? \"danger\" : undefined} aria-live=\"polite\">\n        {message}\n      </p>\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "map/map.tsx",
+      "content": "// Client. A map of the Krizaka family on MapLibre GL JS (open source) over Protomaps tiles on our CDN — no API key, no\n// metered service. MapLibre and PMTiles are optional peers, loaded when a map is shown (a dynamic import: a page without\n// a map never pays for them). The style comes from the tokens (`mapStyle`), in the page's scheme, and follows it.\n//\n// What every map does: the canvas is decorative for assistive technologies — the map is a region named by `label`, its\n// places a list read in order (the text alternative, `MapPlaces`), each marker a button when it does something; the\n// attribution of OpenStreetMap (ODbL) and Protomaps is always shown; under reduced motion the camera jumps, never flies;\n// without WebGL (or while the engine loads) `fallback` stands in its place.\n/// <reference types=\"geojson\" />\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePrefersReducedMotion } from \"../media\";\nimport { tv } from \"../tv\";\nimport { MAP_ATTRIBUTION, setMapAssetsBase } from \"./assets\";\nimport { circlePolygon, type LngLat } from \"./geo\";\nimport { type MapBrand, mapPalette, type MapRegion, mapStyle } from \"./style\";\n\ntype MapLibre = typeof import(\"maplibre-gl\");\ntype MapInstance = import(\"maplibre-gl\").Map;\n\nexport const map = tv({\n  slots: {\n    root: \"relative isolate overflow-hidden rounded-2xl border border-border-default bg-surface-2 shadow-raised\",\n    canvas: \"absolute inset-0 [&_.maplibregl-canvas]:outline-hidden\",\n    fallback: \"absolute inset-0\",\n    controls: \"absolute right-3 top-3 z-10 flex flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-floating\",\n    control:\n      \"inline-flex h-10 w-10 items-center justify-center text-lg font-semibold text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring-inset disabled:opacity-40 [&+&]:border-t [&+&]:border-border-subtle\",\n    attribution:\n      \"absolute bottom-1.5 right-1.5 z-10 rounded-md bg-surface-1/85 px-1.5 py-0.5 text-[10px] text-fg-secondary backdrop-blur-sm [&_a]:underline-offset-2 hover:[&_a]:underline\",\n    places: \"sr-only\",\n    marker:\n      \"group relative flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-2 border-on-accent bg-accent shadow-floating outline-hidden \" +\n      \"transition-transform hover:scale-110 focus-visible:focus-ring motion-reduce:transition-none motion-reduce:hover:scale-100 data-[selected]:scale-125\",\n    markerLabel:\n      \"pointer-events-none absolute bottom-full mb-2 whitespace-nowrap rounded-lg border border-border-default bg-surface-1 px-2 py-1 text-xs font-semibold text-fg shadow-floating\",\n  },\n});\n\ntype Registry = { add: (id: string, text: string) => void; remove: (id: string) => void };\ntype Ctx = { map: MapInstance | null; lib: MapLibre | null; ready: boolean; reduce: boolean; places: Registry };\nconst MapContext = React.createContext<Ctx | null>(null);\n\n/** The map a child is drawn on (`Marker`, `RadiusCircle`, `Cluster`…): the MapLibre instance once it is ready. */\nexport function useMap(): Ctx {\n  const ctx = React.useContext(MapContext);\n  if (!ctx) throw new Error(\"useMap: inside a <Map> only\");\n  return ctx;\n}\n\n/** The scheme of the page (`html.light`), followed as it changes. */\nfunction usePageScheme(): \"dark\" | \"light\" {\n  const read = () => (typeof document !== \"undefined\" && document.documentElement.classList.contains(\"light\") ? \"light\" : \"dark\");\n  const [scheme, setScheme] = React.useState<\"dark\" | \"light\">(read);\n  React.useEffect(() => {\n    const observer = new MutationObserver(() => setScheme(read()));\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n    return () => observer.disconnect();\n  }, []);\n  return scheme;\n}\n\nlet protocolAdded = false;\nlet workerUrl: string | null = null;\n\n/**\n * Where MapLibre's worker comes from. A bundler (Next.js, Vite) renames MapLibre's module and leaves its worker behind:\n * by default the worker of the very version the app installed is imported from jsDelivr (free, open source, no key)\n * through a module worker of the page's own origin. An app with a strict CSP serves it itself —\n * `configureMaps({ workerUrl: \"/maplibre-gl-worker.mjs\" })` (with `maplibre-gl-shared.mjs` beside it), once, before a map.\n * `assetsBase` reads the tiles and glyphs through a same-origin proxy of the CDN (`setMapAssetsBase`).\n */\nexport function configureMaps(options: { workerUrl?: string; assetsBase?: string }) {\n  if (options.workerUrl) workerUrl = options.workerUrl;\n  if (options.assetsBase) setMapAssetsBase(options.assetsBase);\n}\n\n/** MapLibre, its worker and the PMTiles protocol, loaded once for the page. */\nasync function loadEngine(): Promise<MapLibre> {\n  const [lib, pmtiles] = await Promise.all([import(\"maplibre-gl\"), import(\"pmtiles\")]);\n  const ml = ((lib as unknown as { default?: MapLibre }).default ?? lib) as MapLibre;\n  if (!protocolAdded) {\n    protocolAdded = true;\n    const remote = `https://cdn.jsdelivr.net/npm/maplibre-gl@${ml.getVersion()}/dist/maplibre-gl-worker.mjs`;\n    ml.setWorkerUrl(workerUrl ?? URL.createObjectURL(new Blob([`import ${JSON.stringify(remote)};`], { type: \"text/javascript\" })));\n    ml.addProtocol(\"pmtiles\", new pmtiles.Protocol().tile);\n  }\n  return ml;\n}\n\nconst hasWebGL = () => {\n  try {\n    const canvas = document.createElement(\"canvas\");\n    return Boolean(canvas.getContext(\"webgl2\") ?? canvas.getContext(\"webgl\"));\n  } catch {\n    return false;\n  }\n};\n\nexport type MapLabels = {\n  /** The zoom-in button (\"Zoom in\"). */\n  zoomIn: string;\n  /** The zoom-out button (\"Zoom out\"). */\n  zoomOut: string;\n  /** Before the list of places read in place of the map (\"Places on the map\"). */\n  places: string;\n};\n\nexport const mapLabels: MapLabels = { zoomIn: \"Zoom in\", zoomOut: \"Zoom out\", places: \"Places on the map\" };\n\nexport type MapProps = {\n  /** The map's accessible name (\"Pick-up points near you\"), passed translated. */\n  label: string;\n  /** Where the map looks at first: longitude, latitude. */\n  center: LngLat;\n  /** The zoom at first (0 the world, 12 a city, 16 a street). Default 12. */\n  zoom?: number;\n  /** The camera follows `center` and `zoom` when they change (flies, or jumps under reduced motion). */\n  controlled?: boolean;\n  /** The scheme. Default: the page's (`html.light`), followed. */\n  scheme?: \"dark\" | \"light\";\n  /** The product whose accent the map carries. Default `krizaka`. */\n  brand?: MapBrand;\n  /** The language of the labels (`fr`, `en`). Default `en`. */\n  lang?: string;\n  /** The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14). */\n  region?: MapRegion | null;\n  /** The world's low zooms (PMTiles). Default: our world extract (to zoom 6). */\n  world?: MapRegion | null;\n  /** The zoom buttons (default) — the keyboard also zooms with + and − on the focused map. */\n  controls?: boolean;\n  /** Moves with the hand (default); `false` makes a still picture of a place. */\n  interactive?: boolean;\n  /** Shown in place of the map while its engine loads, and for good without WebGL: a `StaticMap`, a picture. */\n  fallback?: React.ReactNode;\n  /** Called when the camera rests: its centre and zoom. */\n  onMoveEnd?: (view: { center: LngLat; zoom: number }) => void;\n  /** Called with the position pressed on the map (not on a marker). */\n  onPress?: (position: LngLat) => void;\n  /** Markers, circles, clusters, the user's position — and anything drawn over the map. */\n  children?: React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<MapLabels>;\n  /** Classes merged on the root (its height: `h-80`, `aspect-video`). */\n  className?: string;\n};\n\n/** A map: MapLibre over our Protomaps tiles, styled from the tokens, with its places as a list for screen readers. */\nexport function Map({\n  label,\n  center,\n  zoom = 12,\n  controlled,\n  scheme: schemeProp,\n  brand,\n  lang,\n  region,\n  world,\n  controls = true,\n  interactive = true,\n  fallback,\n  onMoveEnd,\n  onPress,\n  children,\n  labels: given,\n  className,\n}: MapProps) {\n  const labels = { ...mapLabels, ...given };\n  const s = map();\n  const pageScheme = usePageScheme();\n  const scheme = schemeProp ?? pageScheme;\n  const reduce = usePrefersReducedMotion();\n  const host = React.useRef<HTMLDivElement>(null);\n  const [instance, setInstance] = React.useState<MapInstance | null>(null);\n  const [lib, setLib] = React.useState<MapLibre | null>(null);\n  const [ready, setReady] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const [places, setPlaces] = React.useState<Record<string, string>>({});\n  const registry = React.useMemo<Registry>(\n    () => ({\n      add: (id, text) => setPlaces((p) => (p[id] === text ? p : { ...p, [id]: text })),\n      remove: (id) =>\n        setPlaces((p) => {\n          const { [id]: _gone, ...rest } = p;\n          return rest;\n        }),\n    }),\n    [],\n  );\n  const latest = React.useRef({ onMoveEnd, onPress });\n  React.useEffect(() => {\n    latest.current = { onMoveEnd, onPress };\n  });\n  const styleOf = React.useCallback((sc: \"dark\" | \"light\") => mapStyle({ scheme: sc, brand, lang, ...(region !== undefined ? { region } : {}), ...(world !== undefined ? { world } : {}) }), [brand, lang, region, world]);\n\n  // The engine and the map, once (the style follows the scheme below).\n  React.useEffect(() => {\n    if (!host.current) return;\n    let alive = true;\n    let created: MapInstance | null = null;\n    (hasWebGL() ? loadEngine() : Promise.reject(new Error(\"no WebGL\")))\n      .then((ml) => {\n        if (!alive || !host.current) return;\n        created = new ml.Map({\n          container: host.current,\n          style: styleOf(scheme) as never,\n          center: [...center] as [number, number],\n          zoom,\n          interactive,\n          attributionControl: false,\n          fadeDuration: reduce ? 0 : 300,\n          cooperativeGestures: false,\n        });\n        created.getCanvas().setAttribute(\"aria-hidden\", \"true\");\n        created.getCanvas().setAttribute(\"tabindex\", \"-1\");\n        created.on(\"load\", () => alive && setReady(true));\n        // The basemap cannot be read (offline, a blocked request): the fallback comes back rather than an empty map.\n        created.on(\"error\", (e) => {\n          const source = (e as { sourceId?: string }).sourceId;\n          if (alive && (source === \"world\" || source === \"region\")) setFailed(true);\n        });\n        created.on(\"moveend\", () => {\n          const c = created!.getCenter();\n          latest.current.onMoveEnd?.({ center: [c.lng, c.lat], zoom: created!.getZoom() });\n        });\n        created.on(\"click\", (e) => {\n          if ((e.originalEvent.target as Element | null)?.closest?.(\"[data-kz-marker]\")) return;\n          latest.current.onPress?.([e.lngLat.lng, e.lngLat.lat]);\n        });\n        setLib(ml);\n        setInstance(created);\n      })\n      .catch(() => alive && setFailed(true));\n    return () => {\n      alive = false;\n      created?.remove();\n    };\n    // Created once: the props that change afterwards are followed by the effects below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // The scheme (and the brand, the language) change the style, not the map.\n  const first = React.useRef(true);\n  React.useEffect(() => {\n    if (!instance) return;\n    if (first.current) {\n      first.current = false;\n      return;\n    }\n    instance.setStyle(styleOf(scheme) as never);\n  }, [instance, scheme, styleOf]);\n\n  // A controlled camera: it flies (or jumps) to the new view.\n  React.useEffect(() => {\n    if (!instance || !controlled) return;\n    const view = { center: [...center] as [number, number], zoom };\n    if (reduce) instance.jumpTo(view);\n    else instance.flyTo({ ...view, speed: 1.4 });\n  }, [instance, controlled, center[0], center[1], zoom, reduce]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const zoomBy = (by: number) => instance && (reduce ? instance.setZoom(instance.getZoom() + by) : instance.zoomTo(instance.getZoom() + by, { duration: 250 }));\n  const ctx = React.useMemo<Ctx>(() => ({ map: instance, lib, ready, reduce, places: registry }), [instance, lib, ready, reduce, registry]);\n  const listed = Object.entries(places);\n  return (\n    <MapContext.Provider value={ctx}>\n      <section\n        aria-label={label}\n        className={s.root({ className })}\n        data-ready={ready ? \"\" : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onKeyDown={(e) => {\n          if (e.target !== e.currentTarget || !instance) return;\n          if (e.key === \"+\" || e.key === \"=\") zoomBy(1);\n          else if (e.key === \"-\") zoomBy(-1);\n          else if (e.key.startsWith(\"Arrow\")) {\n            e.preventDefault();\n            const step = 80;\n            const by: Record<string, [number, number]> = { ArrowUp: [0, -step], ArrowDown: [0, step], ArrowLeft: [-step, 0], ArrowRight: [step, 0] };\n            instance.panBy(by[e.key]!, { duration: reduce ? 0 : 200 });\n          }\n        }}\n      >\n        {!ready || failed ? <div className={s.fallback()}>{fallback}</div> : null}\n        <div ref={host} className={s.canvas()} style={{ position: \"absolute\", inset: 0, visibility: failed ? \"hidden\" : undefined }} />\n        {controls && interactive && !failed ? (\n          <div className={s.controls()}>\n            <button type=\"button\" className={s.control()} aria-label={labels.zoomIn} disabled={!instance} onClick={() => zoomBy(1)}>\n              +\n            </button>\n            <button type=\"button\" className={s.control()} aria-label={labels.zoomOut} disabled={!instance} onClick={() => zoomBy(-1)}>\n              −\n            </button>\n          </div>\n        ) : null}\n        <p className={s.attribution()}>\n          <a href={MAP_ATTRIBUTION.protomapsUrl} target=\"_blank\" rel=\"noreferrer\">\n            {MAP_ATTRIBUTION.protomaps}\n          </a>\n          {\" · \"}\n          <a href={MAP_ATTRIBUTION.osmUrl} target=\"_blank\" rel=\"noreferrer\">\n            {MAP_ATTRIBUTION.osm}\n          </a>\n        </p>\n        {listed.length ? (\n          <div className={s.places()}>\n            <p>{labels.places}</p>\n            <ul>\n              {listed.map(([id, text]) => (\n                <li key={id}>{text}</li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n        {children}\n      </section>\n    </MapContext.Provider>\n  );\n}\n\nexport type MarkerProps = {\n  /** Where it stands. */\n  position: LngLat;\n  /** Its words: the place's name, read in the list of places and as the button's name (\"Café Olimpico, 350 m\"). */\n  label: string;\n  /** Pressing it (details in a panel, a sheet): the marker becomes a button. */\n  onPress?: () => void;\n  /** The chosen one: larger, its label shown above it. */\n  selected?: boolean;\n  /** Its size in pixels. Default 18. */\n  size?: number;\n  /** What it draws instead of the accent dot (an avatar, an icon). */\n  children?: React.ReactNode;\n};\n\n/** A place on the map: an accent dot (or your content) that is a button when it does something. */\nexport function Marker({ position, label, onPress, selected, size = 18, children }: MarkerProps) {\n  const { map: m, lib, places } = useMap();\n  const s = map();\n  const id = React.useId();\n  const [el] = React.useState(() => (typeof document === \"undefined\" ? null : document.createElement(\"div\")));\n  React.useEffect(() => {\n    places.add(id, label);\n    return () => places.remove(id);\n  }, [id, label, places]);\n  React.useEffect(() => {\n    if (!m || !lib || !el) return;\n    el.setAttribute(\"data-kz-marker\", \"\");\n    const marker = new lib.Marker({ element: el, anchor: \"center\" }).setLngLat([...position] as [number, number]).addTo(m);\n    return () => void marker.remove();\n  }, [m, lib, el, position[0], position[1]]); // eslint-disable-line react-hooks/exhaustive-deps\n  if (!el) return null;\n  const Tag = onPress ? \"button\" : \"span\";\n  return createPortal(\n    <Tag\n      type={onPress ? \"button\" : undefined}\n      aria-label={onPress ? label : undefined}\n      aria-hidden={onPress ? undefined : true}\n      aria-pressed={onPress && selected !== undefined ? selected : undefined}\n      data-selected={selected ? \"\" : undefined}\n      className={s.marker()}\n      style={children ? undefined : { width: size, height: size }}\n      onClick={onPress}\n    >\n      {children}\n      {selected ? <span className={s.markerLabel()}>{label}</span> : null}\n    </Tag>,\n    el,\n  );\n}\n\nexport type UserPositionProps = {\n  /** Where the person is. */\n  position: LngLat;\n  /** Its words (\"You are here\"), read in the list of places. */\n  label: string;\n  /** The accuracy in metres: a soft disc around the dot. */\n  accuracy?: number;\n};\n\n/** The person's position: a dot that pulses (still under reduced motion), its accuracy as a soft disc. */\nexport function UserPosition({ position, label, accuracy }: UserPositionProps) {\n  const { map: m, lib, places } = useMap();\n  const id = React.useId();\n  React.useEffect(() => {\n    places.add(id, label);\n    return () => places.remove(id);\n  }, [id, label, places]);\n  React.useEffect(() => {\n    if (!m || !lib) return;\n    const el = document.createElement(\"div\");\n    el.className = \"kz-map-user\";\n    el.setAttribute(\"aria-hidden\", \"true\");\n    const marker = new lib.Marker({ element: el, anchor: \"center\" }).setLngLat([...position] as [number, number]).addTo(m);\n    return () => void marker.remove();\n  }, [m, lib, position[0], position[1]]); // eslint-disable-line react-hooks/exhaustive-deps\n  return accuracy ? <RadiusCircle center={position} radius={accuracy} tone=\"soft\" /> : null;\n}\n\n/** Adds a GeoJSON source and its layers while the map has a style (again after a change of scheme). */\nfunction useGeoLayer(id: string, data: GeoJSON.GeoJSON, layers: (palette: ReturnType<typeof mapPalette>) => object[], source: object = {}) {\n  const { map: m, ready } = useMap();\n  const dataRef = React.useRef(data);\n  React.useEffect(() => {\n    dataRef.current = data;\n    const src = m?.getSource(id) as { setData?: (d: GeoJSON.GeoJSON) => void } | undefined;\n    src?.setData?.(data);\n  }, [m, id, data]);\n  React.useEffect(() => {\n    if (!m || !ready) return;\n    const add = () => {\n      if (m.getSource(id)) return;\n      const scheme = document.documentElement.classList.contains(\"light\") ? \"light\" : \"dark\";\n      m.addSource(id, { type: \"geojson\", data: dataRef.current, ...source } as never);\n      for (const layer of layers(mapPalette(scheme))) m.addLayer(layer as never);\n    };\n    add();\n    m.on(\"styledata\", add);\n    return () => {\n      m.off(\"styledata\", add);\n      if (!m.getStyle()) return;\n      for (const layer of m.getStyle().layers.filter((l) => \"source\" in l && l.source === id)) m.removeLayer(layer.id);\n      if (m.getSource(id)) m.removeSource(id);\n    };\n  }, [m, ready, id]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport type RadiusCircleProps = {\n  /** Its centre. */\n  center: LngLat;\n  /** Its radius in metres. */\n  radius: number;\n  /** `accent` (a zone that matters: a delivery area, a search radius) or `soft` (an accuracy). */\n  tone?: \"accent\" | \"soft\";\n};\n\n/** A circle on the ground: a delivery zone, a search radius — filled with the accent, its edge drawn. */\nexport function RadiusCircle({ center, radius, tone = \"accent\" }: RadiusCircleProps) {\n  const id = `kz-circle-${React.useId().replace(/[^a-zA-Z0-9]/g, \"\")}`;\n  const data = React.useMemo(() => circlePolygon(center, radius), [center[0], center[1], radius]); // eslint-disable-line react-hooks/exhaustive-deps\n  useGeoLayer(id, data, (c) => [\n    { id: `${id}-fill`, type: \"fill\", source: id, paint: { \"fill-color\": c.accent, \"fill-opacity\": tone === \"soft\" ? 0.1 : 0.14 } },\n    { id: `${id}-line`, type: \"line\", source: id, paint: { \"line-color\": c.accent, \"line-width\": tone === \"soft\" ? 1 : 2, \"line-opacity\": tone === \"soft\" ? 0.4 : 0.9, ...(tone === \"accent\" ? { \"line-dasharray\": [2, 1.5] } : {}) } },\n  ]);\n  return null;\n}\n\nexport type ClusterPoint = { id: string; position: LngLat; label: string };\n\nexport type ClusterProps = {\n  /** The points: many of them (creators, pick-up points, events). */\n  points: readonly ClusterPoint[];\n  /** Pressing a single point. A group zooms in to open itself. */\n  onPointPress?: (point: ClusterPoint) => void;\n  /** The radius, in pixels, within which points group. Default 48. */\n  radius?: number;\n};\n\n/** Many points grouped while they are close: a disc with the count, opened by zooming in; each point is listed for screen readers. */\nexport function Cluster({ points, onPointPress, radius = 48 }: ClusterProps) {\n  const { map: m, ready, reduce, places } = useMap();\n  const id = `kz-cluster-${React.useId().replace(/[^a-zA-Z0-9]/g, \"\")}`;\n  const data = React.useMemo<GeoJSON.FeatureCollection>(\n    () => ({ type: \"FeatureCollection\", features: points.map((p) => ({ type: \"Feature\", properties: { id: p.id, label: p.label }, geometry: { type: \"Point\", coordinates: [...p.position] } })) }),\n    [points],\n  );\n  React.useEffect(() => {\n    for (const p of points) places.add(`${id}-${p.id}`, p.label);\n    return () => points.forEach((p) => places.remove(`${id}-${p.id}`));\n  }, [points, places, id]);\n  useGeoLayer(\n    id,\n    data,\n    (c) => [\n      { id: `${id}-groups`, type: \"circle\", source: id, filter: [\"has\", \"point_count\"], paint: { \"circle-color\": c.accent, \"circle-opacity\": 0.92, \"circle-radius\": [\"step\", [\"get\", \"point_count\"], 16, 10, 20, 50, 26], \"circle-stroke-width\": 3, \"circle-stroke-color\": c.halo } },\n      { id: `${id}-count`, type: \"symbol\", source: id, filter: [\"has\", \"point_count\"], layout: { \"text-field\": [\"get\", \"point_count_abbreviated\"], \"text-font\": [\"Noto Sans Medium\"], \"text-size\": 13 }, paint: { \"text-color\": c.onAccent } },\n      { id: `${id}-points`, type: \"circle\", source: id, filter: [\"!\", [\"has\", \"point_count\"]], paint: { \"circle-color\": c.accent, \"circle-radius\": 7, \"circle-stroke-width\": 2.5, \"circle-stroke-color\": c.halo } },\n    ],\n    { cluster: true, clusterRadius: radius, clusterMaxZoom: 15 },\n  );\n  React.useEffect(() => {\n    if (!m || !ready) return;\n    const openGroup = async (e: { features?: { properties: Record<string, unknown>; geometry: GeoJSON.Geometry }[] }) => {\n      const f = e.features?.[0];\n      if (!f) return;\n      const src = m.getSource(id) as unknown as { getClusterExpansionZoom: (id: number) => Promise<number> };\n      const z = await src.getClusterExpansionZoom(f.properties.cluster_id as number);\n      const center = (f.geometry as GeoJSON.Point).coordinates as [number, number];\n      if (reduce) m.jumpTo({ center, zoom: z });\n      else m.easeTo({ center, zoom: z });\n    };\n    const pressPoint = (e: { features?: { properties: Record<string, unknown> }[] }) => {\n      const pid = e.features?.[0]?.properties.id;\n      const point = points.find((p) => p.id === pid);\n      if (point) onPointPress?.(point);\n    };\n    m.on(\"click\", `${id}-groups`, openGroup as never);\n    m.on(\"click\", `${id}-points`, pressPoint as never);\n    return () => {\n      m.off(\"click\", `${id}-groups`, openGroup as never);\n      m.off(\"click\", `${id}-points`, pressPoint as never);\n    };\n  }, [m, ready, id, points, onPointPress, reduce]);\n  return null;\n}\n"
+    },
+    {
+      "path": "map/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Map\",\n  summary:\n    \"Maps that cost nothing per view — MapLibre (open source) over Protomaps tiles on the Krizaka CDN, painted from the tokens in dark or light and in the product's accent — with markers, clusters, the person's position, a radius and a location picker.\",\n  status: \"beta\",\n  category: \"data-display\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To show where things are: pick-up points, creators near you, an event's venue.\",\n    \"`Cluster` for many points (dozens to thousands): they group while close and open by zooming in.\",\n    \"`LocationPicker` to choose a place: a meeting point, a delivery address, the centre of a search with its radius.\",\n    \"`StaticMap` where a live map is too much (a card, a list, an e-mail) and as the `fallback` of every `Map`.\",\n  ],\n  whenNotToUse: [\n    { when: \"For an address typed or searched: a text field (geocoding is a server's job — Nominatim or Photon self-hosted later), the map only confirms it.\", use: \"field\" },\n    { when: \"For figures by country or region (a choropleth): a chart.\", use: \"stat\" },\n  ],\n  bestPractices: [\n    \"Give every map a `label` and every marker a `label`: they are read as the list of places in place of the map.\",\n    \"Always pass a `fallback` (`StaticMap` with the same centre and places): it shows while the engine loads and for good without WebGL.\",\n    \"Ask for the position only on a press (`LocationPicker`'s Near me), never on load; every refusal has its words.\",\n    \"Keep the attribution visible (OpenStreetMap's licence, the ODbL, asks for it): the components draw it.\",\n    \"Install the engine only where a map is shown: `maplibre-gl` (web) or `@maplibre/maplibre-react-native` (Expo) — optional peers.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"The map (a region named by `label`), then its buttons: zoom, the markers that do something, Near me.\" },\n      { keys: \"Arrow keys\", action: \"Pan the focused map.\" },\n      { keys: \"+ / −\", action: \"Zoom the focused map in or out.\" },\n    ],\n    notes: [\n      \"The canvas is hidden from assistive technologies: the places are read as a list (each `Marker`, `Cluster` point and the person's position by its `label`).\",\n      \"A marker with `onPress` is a button named by its label (`aria-pressed` when it can be chosen); the chosen one shows its name above it.\",\n      \"Under reduced motion the camera jumps instead of flying and the position's pulse stands still.\",\n      \"Colours come from the tokens: the water is the accent softened, roads and labels the text roles — readable in both schemes.\",\n    ],\n  },\n  related: [\"dialog\", \"search-field\", \"chip\"],\n  web: {\n    imports: [\"Map\", \"Marker\", \"Cluster\", \"UserPosition\", \"RadiusCircle\", \"LocationPicker\", \"StaticMap\", \"mapStyle\", \"distanceMeters\", \"formatDistance\"],\n    examples: [\n      { name: \"places\", title: \"Places\", description: \"Pick-up points in Montréal: markers are buttons, the chosen one shows its name.\" },\n      { name: \"cluster\", title: \"Cluster\", description: \"Sixty creators grouped while they are close; a group opens by zooming in.\" },\n      { name: \"location-picker\", title: \"Location picker\", description: \"A meeting point under the pin, its distance from the person, a 1-km zone and Near me.\" },\n      { name: \"static\", title: \"Static map\", description: \"The places on the map's paper, without an engine: a card, a list item, a fallback.\" },\n    ],\n  },\n  native: {\n    entry: \"@krizaka/ui/native/map\",\n    imports: [\"Map\", \"Marker\", \"Cluster\", \"UserPosition\", \"RadiusCircle\", \"LocationPicker\"],\n    differences: [\n      \"MapLibre Native (`@maplibre/maplibre-react-native`, an optional peer, with its Expo config plugin): the same style and tiles as the web — it reads `pmtiles://` itself.\",\n      \"A marker's details open in a `Sheet` (`@krizaka/ui/native`); markers and Near me play a haptic.\",\n      \"Near me asks the system's permission through MapLibre's `LocationManager` when pressed; the app declares the location usage in its config.\",\n      \"The map's name lists its places for VoiceOver and TalkBack; the screenshots of these stories are drawn by a stand-in (the markers placed, not the tiles).\",\n    ],\n    examples: [\n      { name: \"places\", title: \"Places\", description: \"Pick-up points: a marker pressed opens its details in a bottom sheet.\" },\n      { name: \"location-picker\", title: \"Location picker\", description: \"A meeting point under the pin; Near me on request.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "map/static-map.tsx",
+      "content": "// Server-safe. A still map drawn without an engine: the places projected (Web Mercator) on the map's paper — or on a\n// picture of the area (`image`, a snapshot of the real map) — in the page's tokens. What a `Map` shows while its engine\n// loads and for good without WebGL; a picture for an e-mail, a card, a list item. An image (`role=\"img\"`) named by its\n// places.\n\n\nimport { tv } from \"../tv\";\nimport { MAP_ATTRIBUTION } from \"./assets\";\nimport { type LngLat, project } from \"./geo\";\n\nexport const staticMap = tv({\n  slots: {\n    root: \"relative block h-full w-full overflow-hidden bg-surface-2\",\n    svg: \"absolute inset-0 h-full w-full\",\n    attribution: \"absolute bottom-1.5 right-1.5 rounded-md bg-surface-1/85 px-1.5 py-0.5 text-[10px] text-fg-secondary\",\n  },\n});\n\nexport type StaticMapPlace = { position: LngLat; label: string };\n\nexport type StaticMapProps = {\n  /** What the picture shows, in words (\"Three pick-up points in the Plateau\"), passed translated: its accessible name. */\n  label: string;\n  /** The centre of the picture. */\n  center: LngLat;\n  /** The zoom of the picture. Default 12. */\n  zoom?: number;\n  /** The places drawn on it (an accent dot each), listed in its name. */\n  places?: readonly StaticMapPlace[];\n  /** A snapshot of the real map of the area (same centre and zoom), drawn under the places; the attribution then shows. */\n  image?: string;\n  /** Classes merged on the root (its size). */\n  className?: string;\n};\n\nconst W = 640;\nconst H = 400;\n\n/** A still map: the places on the map's paper (or on a snapshot), named in words. */\nexport function StaticMap({ label, center, zoom = 12, places = [], image, className }: StaticMapProps) {\n  const s = staticMap();\n  const [cx, cy] = project(center, zoom);\n  const at = (p: LngLat) => {\n    const [x, y] = project(p, zoom);\n    return [W / 2 + x - cx, H / 2 + y - cy] as const;\n  };\n  const name = places.length ? `${label}: ${places.map((p) => p.label).join(\", \")}` : label;\n  return (\n    <span role=\"img\" aria-label={name} className={s.root({ className })}>\n      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio=\"xMidYMid slice\" className={s.svg()} aria-hidden>\n        <defs>\n          <pattern id=\"kz-map-paper\" width=\"48\" height=\"48\" patternUnits=\"userSpaceOnUse\">\n            <path d=\"M48 0H0V48\" fill=\"none\" stroke=\"var(--kz-border-subtle)\" strokeWidth=\"1\" />\n          </pattern>\n        </defs>\n        <rect width={W} height={H} fill=\"var(--kz-surface-2)\" />\n        {image ? <image href={image} x=\"0\" y=\"0\" width={W} height={H} preserveAspectRatio=\"xMidYMid slice\" /> : <rect width={W} height={H} fill=\"url(#kz-map-paper)\" />}\n        {places.map((p) => {\n          const [x, y] = at(p.position);\n          return (\n            <g key={`${p.position[0]},${p.position[1]}`}>\n              <circle cx={x} cy={y} r=\"12\" fill=\"var(--kz-accent)\" opacity=\"0.18\" />\n              <circle cx={x} cy={y} r=\"7\" fill=\"var(--kz-accent)\" stroke=\"var(--kz-on-accent)\" strokeWidth=\"2.5\" />\n            </g>\n          );\n        })}\n      </svg>\n      {image ? (\n        <span aria-hidden className={s.attribution()}>\n          {MAP_ATTRIBUTION.protomaps} · {MAP_ATTRIBUTION.osm}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\n"
+    },
+    {
+      "path": "map/style.ts",
+      "content": "// The Krizaka map style, generated from the tokens (no hand-written colour): Protomaps' basemap layers\n// (@protomaps/basemaps) painted with a flavour drawn from `@krizaka/tokens` — the surfaces for the land, the accent\n// softened for the water, the text roles for the labels — in dark or light, the product's accent where a brand asks.\n// Platform-neutral: the web `Map` and the native `Map` both read it.\nimport { brands, themes } from \"@krizaka/tokens/native\";\nimport { type Flavor, layers, namedFlavor } from \"@protomaps/basemaps\";\n\nimport { MAP_ATTRIBUTION, mapAssets } from \"./assets\";\n\n/** A product of the family: its accent paints the map. */\nexport type MapBrand = keyof typeof brands;\n\n/** A colour mixed into another (`#rrggbb` only): `t` = 0 gives `a`, 1 gives `b`. */\nexport function mix(a: string, b: string, t: number): string {\n  const p = (h: string) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));\n  const [x, y] = [p(a), p(b)];\n  return `#${x.map((v, i) => Math.round(v + (y[i]! - v) * t).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** The colours of the map in a scheme (and a brand): what the style, the markers and the static map share. */\nexport function mapPalette(scheme: \"dark\" | \"light\", brand: MapBrand = \"krizaka\") {\n  const t = { ...themes[scheme], ...(brands as Record<string, Partial<Record<\"dark\" | \"light\", Partial<typeof themes.dark>>>>)[brand]?.[scheme] };\n  const dark = scheme === \"dark\";\n  const land = dark ? t.surface1 : t.surface0;\n  return {\n    land,\n    background: dark ? t.surface0 : t.surface2,\n    water: mix(land, t.accent, dark ? 0.18 : 0.14),\n    park: mix(land, t.success, dark ? 0.1 : 0.12),\n    road: dark ? mix(land, t.textPrimary, 0.12) : \"#ffffff\",\n    roadMajor: dark ? mix(land, t.textPrimary, 0.2) : mix(land, t.textPrimary, 0.06),\n    casing: mix(land, t.textPrimary, dark ? 0.05 : 0.12),\n    building: mix(land, t.textPrimary, dark ? 0.06 : 0.07),\n    boundary: mix(land, t.textPrimary, 0.3),\n    label: t.textSecondary,\n    labelStrong: t.textPrimary,\n    halo: land,\n    accent: t.accent,\n    onAccent: t.onAccent,\n  };\n}\n\n/** The basemap flavour of a palette: every role of Protomaps' layers filled from the tokens. */\nexport function mapFlavor(scheme: \"dark\" | \"light\", brand?: MapBrand): Flavor {\n  const c = mapPalette(scheme, brand);\n  const base = namedFlavor(scheme);\n  return {\n    ...base,\n    background: c.background,\n    earth: c.land,\n    park_a: c.park,\n    park_b: c.park,\n    wood_a: c.park,\n    wood_b: c.park,\n    scrub_a: c.park,\n    scrub_b: c.park,\n    glacier: c.land,\n    sand: c.land,\n    beach: c.land,\n    zoo: c.park,\n    hospital: c.land,\n    industrial: c.land,\n    school: c.land,\n    military: c.land,\n    aerodrome: c.land,\n    pedestrian: c.land,\n    runway: c.building,\n    water: c.water,\n    buildings: c.building,\n    pier: c.building,\n    boundaries: c.boundary,\n    railway: c.casing,\n    other: c.road,\n    minor_service: c.road,\n    minor_a: c.road,\n    minor_b: c.road,\n    link: c.road,\n    major: c.roadMajor,\n    highway: c.roadMajor,\n    bridges_other: c.road,\n    bridges_minor: c.road,\n    bridges_link: c.road,\n    bridges_major: c.roadMajor,\n    bridges_highway: c.roadMajor,\n    tunnel_other: c.road,\n    tunnel_minor: c.road,\n    tunnel_link: c.road,\n    tunnel_major: c.roadMajor,\n    tunnel_highway: c.roadMajor,\n    minor_service_casing: c.casing,\n    minor_casing: c.casing,\n    link_casing: c.casing,\n    major_casing_late: c.casing,\n    major_casing_early: c.casing,\n    highway_casing_late: c.casing,\n    highway_casing_early: c.casing,\n    bridges_other_casing: c.casing,\n    bridges_minor_casing: c.casing,\n    bridges_link_casing: c.casing,\n    bridges_major_casing: c.casing,\n    bridges_highway_casing: c.casing,\n    tunnel_other_casing: c.casing,\n    tunnel_minor_casing: c.casing,\n    tunnel_link_casing: c.casing,\n    tunnel_major_casing: c.casing,\n    tunnel_highway_casing: c.casing,\n    roads_label_minor: c.label,\n    roads_label_minor_halo: c.halo,\n    roads_label_major: c.label,\n    roads_label_major_halo: c.halo,\n    ocean_label: c.label,\n    subplace_label: c.label,\n    subplace_label_halo: c.halo,\n    city_label: c.labelStrong,\n    city_label_halo: c.halo,\n    state_label: c.label,\n    state_label_halo: c.halo,\n    country_label: c.label,\n    address_label: c.label,\n    address_label_halo: c.halo,\n    regular: \"Noto Sans Regular\",\n    bold: \"Noto Sans Medium\",\n    italic: \"Noto Sans Italic\",\n    // No point-of-interest icons (no sprite to host): the app's own markers carry the places that matter.\n    pois: undefined,\n    landcover: undefined,\n  };\n}\n\n/** A region of the basemap: its PMTiles file and the zoom up to which it has tiles. */\nexport type MapRegion = { url: string; maxzoom: number };\n\nexport type MapStyleOptions = {\n  /** `dark` or `light`: the scheme of the page or the app. */\n  scheme: \"dark\" | \"light\";\n  /** The product whose accent the map carries (its markers, its water's tint). Default `krizaka`. */\n  brand?: MapBrand;\n  /** The language of the labels (`fr`, `en`): the place names in it where OpenStreetMap has them. Default `en`. */\n  lang?: string;\n  /** The low zooms of the whole world. Default: our world extract (zoom 0–6). */\n  world?: MapRegion | null;\n  /** The detailed region drawn from zoom 7. Default: Montréal–Québec (up to 14, overzoomed beyond). */\n  region?: MapRegion | null;\n  /** The glyphs' URL template. Default: our Noto Sans on the CDN. */\n  glyphs?: string;\n};\n\n/** The zoom where the detailed region takes over from the world. */\nexport const REGION_FROM_ZOOM = 6.5;\n\n/**\n * The MapLibre style of a Krizaka map (a `StyleSpecification`): the world's low zooms, then the detailed region,\n * painted from the tokens. The `pmtiles://` sources need the PMTiles protocol (the web `Map` registers it; MapLibre\n * Native reads it as it is).\n */\nexport function mapStyle({ scheme, brand, lang = \"en\", world = { url: mapAssets().tiles.world, maxzoom: 6 }, region = { url: mapAssets().tiles.quebec, maxzoom: 14 }, glyphs = mapAssets().glyphs }: MapStyleOptions) {\n  const flavor = mapFlavor(scheme, brand);\n  const attribution = `<a href=\"${MAP_ATTRIBUTION.protomapsUrl}\">${MAP_ATTRIBUTION.protomaps}</a> · <a href=\"${MAP_ATTRIBUTION.osmUrl}\">${MAP_ATTRIBUTION.osm}</a>`;\n  const sources: Record<string, unknown> = {};\n  const all: { id: string; minzoom?: number; maxzoom?: number; [k: string]: unknown }[] = [];\n  if (world) {\n    sources.world = { type: \"vector\", url: `pmtiles://${world.url}`, attribution };\n    for (const l of layers(\"world\", flavor, { lang }) as typeof all) {\n      if (l.id === \"background\") all.push(l);\n      else all.push({ ...l, id: `world-${l.id}`, maxzoom: region ? Math.min(l.maxzoom ?? 24, REGION_FROM_ZOOM) : l.maxzoom });\n    }\n  }\n  if (region) {\n    sources.region = { type: \"vector\", url: `pmtiles://${region.url}`, attribution };\n    for (const l of layers(\"region\", flavor, { lang }) as typeof all) {\n      if (l.id === \"background\") {\n        if (!world) all.push(l);\n        continue;\n      }\n      all.push({ ...l, id: `region-${l.id}`, minzoom: world ? Math.max(l.minzoom ?? 0, REGION_FROM_ZOOM) : l.minzoom });\n    }\n  }\n  // No sprite is hosted: a layer that needs an icon (points of interest) is left out — the app's markers carry the places.\n  const drawn = all.filter((l) => !(l.layout as Record<string, unknown> | undefined)?.[\"icon-image\"]);\n  return { version: 8 as const, glyphs, sources, layers: drawn.map((l) => (l.maxzoom === undefined ? withoutKey(l, \"maxzoom\") : l)) };\n}\n\nconst withoutKey = <T extends Record<string, unknown>>(o: T, key: string) => Object.fromEntries(Object.entries(o).filter(([k]) => k !== key)) as T;\n"
+    },
+    {
+      "path": "media.ts",
+      "content": "// Shared by the data and media primitives (client): the clock format, the reduced-motion preference, the\n// in-view observer, a debounced callback. Never an entry of its own.\nimport * as React from \"react\";\n\n/** Seconds as a clock: `75` → `1:15`, `3725` → `1:02:05`. Negative or unknown values read `0:00`. */\nexport function formatClock(seconds: number): string {\n  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const rest = String(s % 60).padStart(2, \"0\");\n  return h > 0 ? `${h}:${String(m).padStart(2, \"0\")}:${rest}` : `${m}:${rest}`;\n}\n\n/** Clamps `value` between `min` and `max`. */\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduce = (notify: () => void) => {\n  if (typeof window === \"undefined\" || !window.matchMedia) return () => undefined;\n  const query = window.matchMedia(REDUCE);\n  query.addEventListener?.(\"change\", notify);\n  return () => query.removeEventListener?.(\"change\", notify);\n};\n\n/** `true` when the person asked for less motion (`prefers-reduced-motion: reduce`); follows a change of the setting. */\nexport function usePrefersReducedMotion(): boolean {\n  return React.useSyncExternalStore(\n    subscribeReduce,\n    () => (typeof window !== \"undefined\" && window.matchMedia ? window.matchMedia(REDUCE).matches : false),\n    () => false,\n  );\n}\n\n/** The latest value of a callback, for an effect or an event that must not re-subscribe when it changes. */\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value);\n  React.useLayoutEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\n/** Calls `onChange(visible)` when at least `threshold` of the element enters or leaves the viewport. */\nexport function useInView(ref: React.RefObject<Element | null>, onChange: (visible: boolean) => void, enabled = true, threshold = 0.25) {\n  const latest = useLatest(onChange);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(([entry]) => entry && latest.current(entry.isIntersecting), { threshold });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled, threshold, latest]);\n}\n\n/** A stable function that runs `callback` once `delay` ms have passed without a new call; `cancel()` drops the pending one. */\nexport function useDebouncedCallback<A extends unknown[]>(callback: (...args: A) => void, delay: number) {\n  const latest = useLatest(callback);\n  const [debounced] = React.useState(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let wait = delay;\n    const run = (...args: A) => {\n      clearTimeout(timer);\n      if (wait <= 0) latest.current(...args);\n      else timer = setTimeout(() => latest.current(...args), wait);\n    };\n    return Object.assign(run, {\n      cancel: () => clearTimeout(timer),\n      setDelay: (next: number) => {\n        wait = next;\n      },\n    });\n  });\n  React.useEffect(() => debounced.setDelay(delay), [debounced, delay]);\n  React.useEffect(() => () => debounced.cancel(), [debounced]);\n  return debounced;\n}\n\n/** A value controlled by a prop when it is given, held inside otherwise; `set` calls `onChange` either way. */\nexport function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = React.useCallback(\n    (next: T) => {\n      if (!controlled) setInner(next);\n      onChange?.(next);\n    },\n    [controlled, onChange],\n  );\n  return [current, set] as const;\n}\n\n/** Starts a media element without an unhandled rejection (autoplay refused, the source replaced meanwhile). */\nexport function playSafely(media: HTMLMediaElement | null | undefined) {\n  try {\n    const started = media?.play() as Promise<void> | undefined;\n    started?.catch?.(() => undefined);\n  } catch {\n    // Not playable here (no media support): the controls stay as they are.\n  }\n}\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"verified-badge\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "tv.ts",
+      "content": "import { createTV } from \"tailwind-variants\";\n\nimport { twMergeConfig } from \"./cn\";\n\n/** `tv` with the preset's utilities known to the merge engine (`twMergeConfig`): what a primitive wearing the material is styled with. */\nexport const tv = createTV({ twMergeConfig });\n"
+    }
+  ],
+  "dependencies": [
+    "@krizaka/tokens@^3.5.0",
+    "@protomaps/basemaps@5.7.2",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/map/places.tsx",
+    "content": "\"use client\";\n\nimport { Map, Marker, StaticMap } from \"@krizaka/ui/map\";\nimport * as React from \"react\";\n\nconst SPOTS = [\n  { id: \"olimpico\", label: \"Café Olimpico, Mile End\", position: [-73.6005, 45.5229] as const },\n  { id: \"jean-talon\", label: \"Marché Jean-Talon\", position: [-73.6147, 45.5363] as const },\n  { id: \"parc\", label: \"Parc La Fontaine\", position: [-73.5695, 45.5268] as const },\n];\n\n// Pick-up points in Montréal: markers are buttons, the chosen one shows its name; the places are a list for screen readers.\nexport default function MapPlaces() {\n  const [chosen, setChosen] = React.useState(\"olimpico\");\n  return (\n    <Map\n      label=\"Pick-up points in Montréal\"\n      center={[-73.592, 45.528]}\n      zoom={12.5}\n      className=\"h-80 w-full max-w-xl\"\n      fallback={<StaticMap label=\"Pick-up points in Montréal\" center={[-73.592, 45.528]} zoom={12.5} places={SPOTS} />}\n    >\n      {SPOTS.map((s) => (\n        <Marker key={s.id} position={s.position} label={s.label} selected={s.id === chosen} onPress={() => setChosen(s.id)} />\n      ))}\n    </Map>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "MAP_GLYPHS",
+      "description": "The glyphs of the labels (Noto Sans, SIL OFL): `{fontstack}` and `{range}` filled by MapLibre.",
+      "props": []
+    },
+    {
+      "component": "LocationPicker",
+      "description": "A position picked by moving the map under a pin; its distance from the person; \"near me\" on request.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The picker's accessible name (\"Meeting point\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": null,
+          "description": "The BCP 47 locale of the distance.",
+          "required": true
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: LngLat) => void",
+          "default": null,
+          "description": "Called when the map rests on a new position.",
+          "required": true
+        },
+        {
+          "name": "value",
+          "type": "LngLat",
+          "default": null,
+          "description": "The chosen position (controlled): the centre of the map.",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The product whose accent the map carries. Default `krizaka`.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root (its height: `h-80`, `aspect-video`).",
+          "required": false
+        },
+        {
+          "name": "fallback",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Shown in place of the map while its engine loads, and for good without WebGL: a `StaticMap`, a picture.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<LocationPickerLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string",
+          "default": null,
+          "description": "The language of the labels (`fr`, `en`). Default `en`.",
+          "required": false
+        },
+        {
+          "name": "origin",
+          "type": "LngLat | null",
+          "default": "null",
+          "description": "Where the person is, when the app already knows it (the distance chip shows at once).",
+          "required": false
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "default": null,
+          "description": "A radius in metres drawn around the chosen position (a delivery zone, a search radius).",
+          "required": false
+        },
+        {
+          "name": "region",
+          "type": "MapRegion | null",
+          "default": null,
+          "description": "The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14).",
+          "required": false
+        },
+        {
+          "name": "scheme",
+          "type": "\"light\" | \"dark\"",
+          "default": null,
+          "description": "The scheme. Default: the page's (`html.light`), followed.",
+          "required": false
+        },
+        {
+          "name": "world",
+          "type": "MapRegion | null",
+          "default": null,
+          "description": "The world's low zooms (PMTiles). Default: our world extract (to zoom 6).",
+          "required": false
+        },
+        {
+          "name": "zoom",
+          "type": "number",
+          "default": "14",
+          "description": "The zoom at first. Default 14.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Cluster",
+      "description": "Many points grouped while they are close: a disc with the count, opened by zooming in; each point is listed for screen readers.",
+      "props": [
+        {
+          "name": "points",
+          "type": "readonly ClusterPoint[]",
+          "default": null,
+          "description": "The points: many of them (creators, pick-up points, events).",
+          "required": true
+        },
+        {
+          "name": "onPointPress",
+          "type": "((point: ClusterPoint) => void)",
+          "default": null,
+          "description": "Pressing a single point. A group zooms in to open itself.",
+          "required": false
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "default": "48",
+          "description": "The radius, in pixels, within which points group. Default 48.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Map",
+      "description": "A map: MapLibre over our Protomaps tiles, styled from the tokens, with its places as a list for screen readers.",
+      "props": [
+        {
+          "name": "center",
+          "type": "LngLat",
+          "default": null,
+          "description": "Where the map looks at first: longitude, latitude.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The map's accessible name (\"Pick-up points near you\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The product whose accent the map carries. Default `krizaka`.",
+          "required": false
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Markers, circles, clusters, the user's position — and anything drawn over the map.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root (its height: `h-80`, `aspect-video`).",
+          "required": false
+        },
+        {
+          "name": "controlled",
+          "type": "boolean",
+          "default": null,
+          "description": "The camera follows `center` and `zoom` when they change (flies, or jumps under reduced motion).",
+          "required": false
+        },
+        {
+          "name": "controls",
+          "type": "boolean",
+          "default": "true",
+          "description": "The zoom buttons (default) — the keyboard also zooms with + and − on the focused map.",
+          "required": false
+        },
+        {
+          "name": "fallback",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Shown in place of the map while its engine loads, and for good without WebGL: a `StaticMap`, a picture.",
+          "required": false
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "default": "true",
+          "description": "Moves with the hand (default); `false` makes a still picture of a place.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<MapLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string",
+          "default": null,
+          "description": "The language of the labels (`fr`, `en`). Default `en`.",
+          "required": false
+        },
+        {
+          "name": "onMoveEnd",
+          "type": "((view: { center: LngLat; zoom: number; }) => void)",
+          "default": null,
+          "description": "Called when the camera rests: its centre and zoom.",
+          "required": false
+        },
+        {
+          "name": "onPress",
+          "type": "((position: LngLat) => void)",
+          "default": null,
+          "description": "Called with the position pressed on the map (not on a marker).",
+          "required": false
+        },
+        {
+          "name": "region",
+          "type": "MapRegion | null",
+          "default": null,
+          "description": "The detailed region (PMTiles) drawn from zoom 6.5. Default: our Montréal–Québec extract (to zoom 14).",
+          "required": false
+        },
+        {
+          "name": "scheme",
+          "type": "\"light\" | \"dark\"",
+          "default": null,
+          "description": "The scheme. Default: the page's (`html.light`), followed.",
+          "required": false
+        },
+        {
+          "name": "world",
+          "type": "MapRegion | null",
+          "default": null,
+          "description": "The world's low zooms (PMTiles). Default: our world extract (to zoom 6).",
+          "required": false
+        },
+        {
+          "name": "zoom",
+          "type": "number",
+          "default": "12",
+          "description": "The zoom at first (0 the world, 12 a city, 16 a street). Default 12.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Marker",
+      "description": "A place on the map: an accent dot (or your content) that is a button when it does something.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its words: the place's name, read in the list of places and as the button's name (\"Café Olimpico, 350 m\").",
+          "required": true
+        },
+        {
+          "name": "position",
+          "type": "LngLat",
+          "default": null,
+          "description": "Where it stands.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What it draws instead of the accent dot (an avatar, an icon).",
+          "required": false
+        },
+        {
+          "name": "onPress",
+          "type": "(() => void)",
+          "default": null,
+          "description": "Pressing it (details in a panel, a sheet): the marker becomes a button.",
+          "required": false
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "default": null,
+          "description": "The chosen one: larger, its label shown above it.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "18",
+          "description": "Its size in pixels. Default 18.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "RadiusCircle",
+      "description": "A circle on the ground: a delivery zone, a search radius — filled with the accent, its edge drawn.",
+      "props": [
+        {
+          "name": "center",
+          "type": "LngLat",
+          "default": null,
+          "description": "Its centre.",
+          "required": true
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "default": null,
+          "description": "Its radius in metres.",
+          "required": true
+        },
+        {
+          "name": "tone",
+          "type": "\"accent\" | \"soft\"",
+          "default": "accent",
+          "description": "`accent` (a zone that matters: a delivery area, a search radius) or `soft` (an accuracy).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "UserPosition",
+      "description": "The person's position: a dot that pulses (still under reduced motion), its accuracy as a soft disc.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its words (\"You are here\"), read in the list of places.",
+          "required": true
+        },
+        {
+          "name": "position",
+          "type": "LngLat",
+          "default": null,
+          "description": "Where the person is.",
+          "required": true
+        },
+        {
+          "name": "accuracy",
+          "type": "number",
+          "default": null,
+          "description": "The accuracy in metres: a soft disc around the dot.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "StaticMap",
+      "description": "A still map: the places on the map's paper (or on a snapshot), named in words.",
+      "props": [
+        {
+          "name": "center",
+          "type": "LngLat",
+          "default": null,
+          "description": "The centre of the picture.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "What the picture shows, in words (\"Three pick-up points in the Plateau\"), passed translated: its accessible name.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root (its size).",
+          "required": false
+        },
+        {
+          "name": "image",
+          "type": "string",
+          "default": null,
+          "description": "A snapshot of the real map of the area (same centre and zoom), drawn under the places; the attribution then shows.",
+          "required": false
+        },
+        {
+          "name": "places",
+          "type": "readonly StaticMapPlace[]",
+          "default": "[]",
+          "description": "The places drawn on it (an accent dot each), listed in its name.",
+          "required": false
+        },
+        {
+          "name": "zoom",
+          "type": "number",
+          "default": "12",
+          "description": "The zoom of the picture. Default 12.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "REGION_FROM_ZOOM",
+      "description": "The zoom where the detailed region takes over from the world.",
+      "props": []
+    }
+  ]
+}