@krizaka/ui 3.30.0 → 3.32.0

package/registry/map.json

@@ -38,6 +38,7 @@
   "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.",
+    "Motion on a map: `Marker drop={index * 90}` drops pins in turn, `Route` draws its line once (and a `courier` makes one trip, `repeatAfter` repeats it while the map is on screen), `Pulse` beats around a hot spot. The drawing is finite — nothing runs afterwards — and everything is in place at once under reduced motion.",
     "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."
@@ -71,7 +72,7 @@
   ],
   "web": {
     "entry": "@krizaka/ui/map",
-    "import": "import { Map, Marker, Cluster, UserPosition, RadiusCircle, LocationPicker, StaticMap, mapStyle, distanceMeters, formatDistance } from \"@krizaka/ui/map\";",
+    "import": "import { Map, Marker, Cluster, UserPosition, RadiusCircle, Route, Pulse, LocationPicker, StaticMap, mapStyle, distanceMeters, formatDistance, pathLength, pointAlong, sliceLine } from \"@krizaka/ui/map\";",
     "props": [
       {
         "component": "MAP_GLYPHS",
@@ -366,6 +367,13 @@
             "description": "What it draws instead of the accent dot (an avatar, an icon).",
             "required": false
           },
+          {
+            "name": "drop",
+            "type": "number",
+            "default": null,
+            "description": "Drops onto its place once, after this many milliseconds (stagger several: `index * 90`). Still under reduced motion.",
+            "required": false
+          },
           {
             "name": "onPress",
             "type": "(() => void)",
@@ -389,6 +397,40 @@
           }
         ]
       },
+      {
+        "component": "Pulse",
+        "description": "A heat pulse: rings that swell and fade around a place (a hot spot, a demand peak). Still rings under reduced motion.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words (\"High demand in Mile End\"), read in the list of places.",
+            "required": true
+          },
+          {
+            "name": "position",
+            "type": "LngLat",
+            "default": null,
+            "description": "Where it beats.",
+            "required": true
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "56",
+            "description": "The rings' reach in pixels. Default 56.",
+            "required": false
+          },
+          {
+            "name": "tone",
+            "type": "\"accent\" | \"soft\"",
+            "default": "accent",
+            "description": "`accent` (a zone that matters) or `soft`. Default `accent`.",
+            "required": false
+          }
+        ]
+      },
       {
         "component": "RadiusCircle",
         "description": "A circle on the ground: a delivery zone, a search radius — filled with the accent, its edge drawn.",
@@ -416,6 +458,75 @@
           }
         ]
       },
+      {
+        "component": "Route",
+        "description": "A route on the map: a line that draws itself, and a courier that travels it. Under reduced motion the line is whole and the courier rests at the end.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words (\"Delivery from the studio to Mile End, 2.4 km\"), read in the list of places.",
+            "required": true
+          },
+          {
+            "name": "path",
+            "type": "readonly LngLat[]",
+            "default": null,
+            "description": "The path, as positions in order (a polyline: a delivery, a walk, a flight).",
+            "required": true
+          },
+          {
+            "name": "courier",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A dot that travels the route once drawn (`true`, or your own content: an avatar, an icon).",
+            "required": false
+          },
+          {
+            "name": "draw",
+            "type": "boolean",
+            "default": "true",
+            "description": "The line draws itself once, from its start, when the map is on screen; `false` shows it whole. Default `true`.",
+            "required": false
+          },
+          {
+            "name": "duration",
+            "type": "number",
+            "default": "1400",
+            "description": "How long the drawing lasts, in milliseconds. Default 1400.",
+            "required": false
+          },
+          {
+            "name": "repeatAfter",
+            "type": "number",
+            "default": null,
+            "description": "Start the trips again after a pause (milliseconds), only while the map is on screen. Without it the courier makes one trip.",
+            "required": false
+          },
+          {
+            "name": "replayKey",
+            "type": "string | number",
+            "default": null,
+            "description": "Changing it replays the drawing and the trip.",
+            "required": false
+          },
+          {
+            "name": "tone",
+            "type": "\"accent\" | \"soft\"",
+            "default": "accent",
+            "description": "`accent` or `soft`. Default `accent`.",
+            "required": false
+          },
+          {
+            "name": "tripDuration",
+            "type": "number",
+            "default": "3200",
+            "description": "How long a trip takes, in milliseconds. Default 3200.",
+            "required": false
+          }
+        ]
+      },
       {
         "component": "UserPosition",
         "description": "The person's position: a dot that pulses (still under reduced motion), its accuracy as a soft disc.",
@@ -522,6 +633,14 @@
         "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": "route",
+        "title": "Route",
+        "description": "A delivery: pins that drop, a route that draws itself, a courier that travels it, a demand pulse — still under reduced motion.",
+        "path": "examples/map/route.tsx",
+        "module": "@krizaka/ui/registry/examples/map/route",
+        "code": "\"use client\";\n\nimport { Button } from \"@krizaka/ui/button\";\nimport { Map, Marker, Pulse, Route, StaticMap } from \"@krizaka/ui/map\";\nimport * as React from \"react\";\n\nconst STUDIO = [-73.6005, 45.5229] as const;\nconst HOME = [-73.5695, 45.5268] as const;\nconst PATH = [STUDIO, [-73.5935, 45.5232], [-73.5862, 45.5159], [-73.5753, 45.5171], HOME] as const;\n\n// A delivery in Montréal: the pins drop (staggered), the route draws itself, a courier makes the trip, a demand pulse\n// beats at the destination. Under reduced motion everything is in place at once, the courier at the end.\nexport default function MapRoute() {\n  const [run, setRun] = React.useState(0);\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-3\">\n      <Map\n        key={run}\n        label=\"A delivery from the studio to Parc La Fontaine\"\n        center={[-73.585, 45.521]}\n        zoom={13.2}\n        className=\"h-80 w-full\"\n        fallback={<StaticMap label=\"A delivery from the studio to Parc La Fontaine\" center={[-73.585, 45.521]} zoom={13.2} places={[{ position: STUDIO, label: \"Studio\" }, { position: HOME, label: \"Parc La Fontaine\" }]} />}\n      >\n        <Route path={PATH} label=\"Delivery from the studio to Parc La Fontaine, 3 km\" courier tripDuration={3600} />\n        <Marker position={STUDIO} label=\"Studio\" drop={0} />\n        <Marker position={HOME} label=\"Parc La Fontaine\" drop={260} />\n        <Pulse position={HOME} label=\"Orders are picking up around Parc La Fontaine\" size={64} />\n      </Map>\n      <Button variant=\"secondary\" size=\"sm\" onClick={() => setRun((n) => n + 1)}>\n        Replay\n      </Button>\n    </div>\n  );\n}\n"
+      },
       {
         "name": "static",
         "title": "Static map",
@@ -901,11 +1020,11 @@
     },
     {
       "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"
+      "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\n/** The length of a path of positions, in metres (the sum of its great-circle legs). */\nexport function pathLength(path: readonly LngLat[]): number {\n  let total = 0;\n  for (let i = 1; i < path.length; i++) total += distanceMeters(path[i - 1]!, path[i]!);\n  return total;\n}\n\n/** The position at `fraction` (0–1, clamped) of the path's length, with the heading of the leg it is on (degrees clockwise from north). */\nexport function pointAlong(path: readonly LngLat[], fraction: number): { position: LngLat; heading: number } {\n  const first = path[0] ?? [0, 0];\n  if (path.length < 2) return { position: first, heading: 0 };\n  const target = Math.max(0, Math.min(1, fraction)) * pathLength(path);\n  let walked = 0;\n  for (let i = 1; i < path.length; i++) {\n    const a = path[i - 1]!;\n    const b = path[i]!;\n    const leg = distanceMeters(a, b);\n    if (walked + leg >= target || i === path.length - 1) {\n      const t = leg === 0 ? 0 : Math.max(0, Math.min(1, (target - walked) / leg));\n      const heading = (Math.atan2(b[0] - a[0], b[1] - a[1]) * 180) / Math.PI;\n      return { position: [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t], heading: (heading + 360) % 360 };\n    }\n    walked += leg;\n  }\n  return { position: first, heading: 0 };\n}\n\n/** The first `fraction` (0–1) of the path, as a GeoJSON line: what a route has drawn so far. */\nexport function sliceLine(path: readonly LngLat[], fraction: number): GeoJSON.Feature<GeoJSON.LineString> {\n  const f = Math.max(0, Math.min(1, fraction));\n  const total = pathLength(path);\n  const coordinates: [number, number][] = [];\n  if (path.length) coordinates.push([...path[0]!] as [number, number]);\n  let walked = 0;\n  for (let i = 1; i < path.length && f > 0; i++) {\n    const a = path[i - 1]!;\n    const b = path[i]!;\n    const leg = distanceMeters(a, b);\n    if (walked + leg <= f * total) coordinates.push([...b] as [number, number]);\n    else {\n      const t = leg === 0 ? 0 : (f * total - walked) / leg;\n      coordinates.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]);\n      break;\n    }\n    walked += leg;\n  }\n  if (coordinates.length === 1) coordinates.push([...coordinates[0]!]);\n  return { type: \"Feature\", properties: {}, geometry: { type: \"LineString\", coordinates } };\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"
+      "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, pathLength, pointAlong, project, sliceLine } 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  Pulse,\n  type PulseProps,\n  RadiusCircle,\n  type RadiusCircleProps,\n  Route,\n  type RouteProps,\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",
@@ -913,11 +1032,11 @@
     },
     {
       "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\nconst noSubscription = () => () => undefined;\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  // The marker's host element exists only in a browser: the server and the hydration pass render nothing for it, then the\n  // client swaps in the element — `useSyncExternalStore`'s server snapshot, so hydration never sees a difference.\n  const host = React.useRef<HTMLElement | null>(null);\n  const el = React.useSyncExternalStore(\n    noSubscription,\n    () => (host.current ??= document.createElement(\"div\")),\n    () => null,\n  );\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"
+      "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, pointAlong, sliceLine } 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  /** Drops onto its place once, after this many milliseconds (stagger several: `index * 90`). Still under reduced motion. */\n  drop?: number;\n};\n\nconst noSubscription = () => () => undefined;\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, drop }: MarkerProps) {\n  const { map: m, lib, places } = useMap();\n  const s = map();\n  const id = React.useId();\n  // The marker's host element exists only in a browser: the server and the hydration pass render nothing for it, then the\n  // client swaps in the element — `useSyncExternalStore`'s server snapshot, so hydration never sees a difference.\n  const host = React.useRef<HTMLElement | null>(null);\n  const el = React.useSyncExternalStore(\n    noSubscription,\n    () => (host.current ??= document.createElement(\"div\")),\n    () => null,\n  );\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      data-drop={drop === undefined ? undefined : \"\"}\n      className={s.marker()}\n      style={{ ...(children ? null : { width: size, height: size }), ...(drop === undefined ? null : ({ \"--kz-map-drop-delay\": `${drop}ms` } as React.CSSProperties)) }}\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\nexport type PulseProps = {\n  /** Where it beats. */\n  position: LngLat;\n  /** Its words (\"High demand in Mile End\"), read in the list of places. */\n  label: string;\n  /** The rings' reach in pixels. Default 56. */\n  size?: number;\n  /** `accent` (a zone that matters) or `soft`. Default `accent`. */\n  tone?: \"accent\" | \"soft\";\n};\n\n/** A heat pulse: rings that swell and fade around a place (a hot spot, a demand peak). Still rings under reduced motion. */\nexport function Pulse({ position, label, size = 56, tone = \"accent\" }: PulseProps) {\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-pulse\";\n    el.setAttribute(\"data-tone\", tone);\n    el.setAttribute(\"aria-hidden\", \"true\");\n    el.style.setProperty(\"--kz-map-pulse-size\", `${size}px`);\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, tone, size, position[0], position[1]]); // eslint-disable-line react-hooks/exhaustive-deps\n  return null;\n}\n\nexport type RouteProps = {\n  /** The path, as positions in order (a polyline: a delivery, a walk, a flight). */\n  path: readonly LngLat[];\n  /** Its words (\"Delivery from the studio to Mile End, 2.4 km\"), read in the list of places. */\n  label: string;\n  /** The line draws itself once, from its start, when the map is on screen; `false` shows it whole. Default `true`. */\n  draw?: boolean;\n  /** How long the drawing lasts, in milliseconds. Default 1400. */\n  duration?: number;\n  /** A dot that travels the route once drawn (`true`, or your own content: an avatar, an icon). */\n  courier?: boolean | React.ReactNode;\n  /** How long a trip takes, in milliseconds. Default 3200. */\n  tripDuration?: number;\n  /** Start the trips again after a pause (milliseconds), only while the map is on screen. Without it the courier makes one trip. */\n  repeatAfter?: number;\n  /** Changing it replays the drawing and the trip. */\n  replayKey?: string | number;\n  /** `accent` or `soft`. Default `accent`. */\n  tone?: \"accent\" | \"soft\";\n};\n\ntype RouteSource = { setData?: (d: GeoJSON.GeoJSON) => void };\n\n/** A route on the map: a line that draws itself, and a courier that travels it. Under reduced motion the line is whole and the courier rests at the end. */\nexport function Route({ path, label, draw = true, duration = 1400, courier, tripDuration = 3200, repeatAfter, replayKey, tone = \"accent\" }: RouteProps) {\n  const { map: m, lib, ready, reduce, places } = useMap();\n  const id = `kz-route-${React.useId().replace(/[^a-zA-Z0-9]/g, \"\")}`;\n  const animated = draw && !reduce;\n  // The drawing is done for this `replayKey` (a new key draws again); without animation the line is whole at once.\n  const token = replayKey ?? 0;\n  const [doneFor, setDoneFor] = React.useState<string | number | null>(null);\n  const drawn = !animated || doneFor === token;\n  const whole = React.useMemo(() => sliceLine(path, 1), [path]);\n  const start = React.useMemo(() => sliceLine(path, 0), [path]);\n  React.useEffect(() => {\n    places.add(id, label);\n    return () => places.remove(id);\n  }, [id, label, places]);\n  useGeoLayer(id, drawn ? whole : start, (c) => [\n    { id: `${id}-casing`, type: \"line\", source: id, layout: { \"line-cap\": \"round\", \"line-join\": \"round\" }, paint: { \"line-color\": c.accent, \"line-width\": 9, \"line-opacity\": tone === \"soft\" ? 0.08 : 0.16, \"line-blur\": 3 } },\n    { id: `${id}-line`, type: \"line\", source: id, layout: { \"line-cap\": \"round\", \"line-join\": \"round\" }, paint: { \"line-color\": c.accent, \"line-width\": tone === \"soft\" ? 2 : 3.5, \"line-opacity\": tone === \"soft\" ? 0.6 : 1 } },\n  ]);\n  // Is the map on screen? The drawing waits for it, and a repeating trip does not start while it is not.\n  const [visible, setVisible] = React.useState(() => typeof IntersectionObserver === \"undefined\");\n  React.useEffect(() => {\n    const el = m?.getContainer?.();\n    if (!el || typeof IntersectionObserver === \"undefined\") return;\n    const io = new IntersectionObserver(([entry]) => setVisible(!!entry?.isIntersecting), { threshold: 0.25 });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [m]);\n  // The drawing: a finite animation, one frame per paint for `duration` ms — no loop, nothing runs afterwards.\n  React.useEffect(() => {\n    if (!m || !ready || !animated || drawn || !visible) return;\n    const source = m.getSource(id) as RouteSource | undefined;\n    let frame = 0;\n    const began = performance.now();\n    const step = (now: number) => {\n      const t = Math.min(1, (now - began) / Math.max(1, duration));\n      source?.setData?.(sliceLine(path, 1 - (1 - t) ** 3));\n      if (t < 1) frame = requestAnimationFrame(step);\n      else setDoneFor(token);\n    };\n    frame = requestAnimationFrame(step);\n    return () => cancelAnimationFrame(frame);\n  }, [m, ready, animated, drawn, visible, id, path, duration, token]);\n  // The courier: one trip once the line is drawn (finite frames), again after `repeatAfter` while on screen.\n  const [trip, setTrip] = React.useState(0);\n  React.useEffect(() => {\n    if (!courier || !m || !lib || !ready || !drawn) return;\n    const el = document.createElement(\"div\");\n    el.className = \"kz-map-courier\";\n    el.setAttribute(\"aria-hidden\", \"true\");\n    const marker = new lib.Marker({ element: el, anchor: \"center\" }).setLngLat([...(path[reduce ? path.length - 1 : 0] ?? [0, 0])] as [number, number]).addTo(m);\n    let frame = 0;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    if (!reduce && visible) {\n      const began = performance.now();\n      const step = (now: number) => {\n        const t = Math.min(1, (now - began) / Math.max(1, tripDuration));\n        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;\n        marker.setLngLat([...pointAlong(path, eased).position] as [number, number]);\n        if (t < 1) frame = requestAnimationFrame(step);\n        else if (repeatAfter !== undefined) timer = setTimeout(() => setTrip((n) => n + 1), repeatAfter);\n      };\n      frame = requestAnimationFrame(step);\n    } else if (!reduce) marker.setLngLat([...(path[path.length - 1] ?? [0, 0])] as [number, number]);\n    return () => {\n      cancelAnimationFrame(frame);\n      clearTimeout(timer);\n      marker.remove();\n    };\n  }, [courier, m, lib, ready, drawn, visible, reduce, path, tripDuration, repeatAfter, trip, token]);\n  return 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  parity: { desktop: \"web\" },\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"
+      "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  parity: { desktop: \"web\" },\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    \"Motion on a map: `Marker drop={index * 90}` drops pins in turn, `Route` draws its line once (and a `courier` makes one trip, `repeatAfter` repeats it while the map is on screen), `Pulse` beats around a hot spot. The drawing is finite — nothing runs afterwards — and everything is in place at once under reduced motion.\",\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\", \"Route\", \"Pulse\", \"LocationPicker\", \"StaticMap\", \"mapStyle\", \"distanceMeters\", \"formatDistance\", \"pathLength\", \"pointAlong\", \"sliceLine\"],\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: \"route\", title: \"Route\", description: \"A delivery: pins that drop, a route that draws itself, a courier that travels it, a demand pulse — still under reduced motion.\" },\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",
@@ -941,7 +1060,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.30.0",
+    "@krizaka/tokens@^3.32.0",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],
@@ -1246,6 +1365,13 @@
           "description": "What it draws instead of the accent dot (an avatar, an icon).",
           "required": false
         },
+        {
+          "name": "drop",
+          "type": "number",
+          "default": null,
+          "description": "Drops onto its place once, after this many milliseconds (stagger several: `index * 90`). Still under reduced motion.",
+          "required": false
+        },
         {
           "name": "onPress",
           "type": "(() => void)",
@@ -1269,6 +1395,40 @@
         }
       ]
     },
+    {
+      "component": "Pulse",
+      "description": "A heat pulse: rings that swell and fade around a place (a hot spot, a demand peak). Still rings under reduced motion.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its words (\"High demand in Mile End\"), read in the list of places.",
+          "required": true
+        },
+        {
+          "name": "position",
+          "type": "LngLat",
+          "default": null,
+          "description": "Where it beats.",
+          "required": true
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "56",
+          "description": "The rings' reach in pixels. Default 56.",
+          "required": false
+        },
+        {
+          "name": "tone",
+          "type": "\"accent\" | \"soft\"",
+          "default": "accent",
+          "description": "`accent` (a zone that matters) or `soft`. Default `accent`.",
+          "required": false
+        }
+      ]
+    },
     {
       "component": "RadiusCircle",
       "description": "A circle on the ground: a delivery zone, a search radius — filled with the accent, its edge drawn.",
@@ -1296,6 +1456,75 @@
         }
       ]
     },
+    {
+      "component": "Route",
+      "description": "A route on the map: a line that draws itself, and a courier that travels it. Under reduced motion the line is whole and the courier rests at the end.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its words (\"Delivery from the studio to Mile End, 2.4 km\"), read in the list of places.",
+          "required": true
+        },
+        {
+          "name": "path",
+          "type": "readonly LngLat[]",
+          "default": null,
+          "description": "The path, as positions in order (a polyline: a delivery, a walk, a flight).",
+          "required": true
+        },
+        {
+          "name": "courier",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A dot that travels the route once drawn (`true`, or your own content: an avatar, an icon).",
+          "required": false
+        },
+        {
+          "name": "draw",
+          "type": "boolean",
+          "default": "true",
+          "description": "The line draws itself once, from its start, when the map is on screen; `false` shows it whole. Default `true`.",
+          "required": false
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "default": "1400",
+          "description": "How long the drawing lasts, in milliseconds. Default 1400.",
+          "required": false
+        },
+        {
+          "name": "repeatAfter",
+          "type": "number",
+          "default": null,
+          "description": "Start the trips again after a pause (milliseconds), only while the map is on screen. Without it the courier makes one trip.",
+          "required": false
+        },
+        {
+          "name": "replayKey",
+          "type": "string | number",
+          "default": null,
+          "description": "Changing it replays the drawing and the trip.",
+          "required": false
+        },
+        {
+          "name": "tone",
+          "type": "\"accent\" | \"soft\"",
+          "default": "accent",
+          "description": "`accent` or `soft`. Default `accent`.",
+          "required": false
+        },
+        {
+          "name": "tripDuration",
+          "type": "number",
+          "default": "3200",
+          "description": "How long a trip takes, in milliseconds. Default 3200.",
+          "required": false
+        }
+      ]
+    },
     {
       "component": "UserPosition",
       "description": "The person's position: a dot that pulses (still under reduced motion), its accuracy as a soft disc.",

package/registry/marketing-layout.json

@@ -99,7 +99,7 @@
         "why": "A visitor decides whether a product is for them: the promise first, the proof and the call after.",
         "path": "examples/marketing-layout/product-page.tsx",
         "module": "@krizaka/ui/registry/examples/marketing-layout/product-page",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Facts, Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst WHY = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\", bird: \"falcon\" as const },\n  { id: \"paid\", title: \"Paid once\", hook: \"Elsewhere, you pay per token, forever.\", bird: \"flamingo\" as const },\n  { id: \"asked\", title: \"Agents that ask\", hook: \"Elsewhere, an agent acts first and apologises later.\", bird: \"pigeon\" as const },\n];\nconst DECISIONS = [\n  { id: \"local\", chose: \"Local models by default.\", refused: \"A hosted API as the default path.\", because: \"A prompt that never leaves cannot leak.\", cost: \"You need a GPU, or patience on a CPU.\" },\n  { id: \"telemetry\", chose: \"Zero telemetry.\", refused: \"Anonymous usage statistics.\", because: \"Anonymous rarely stays anonymous.\", cost: \"You tell us what breaks.\" },\n];\nconst labels = { chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" };\n\n// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action (cut, shimmer), the reasons as compact\n// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a\n// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.\nexport default function MarketingLayoutProductPage() {\n  return (\n    <div className=\"brand-orazaka\">\n      <MarketingLayout\n        skipLabel=\"Skip to content\"\n        header={\n          <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n            <NavBar.Brand href=\"#home\"><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</NavBar.Brand>\n            <NavBar.Items>\n              <NavBar.Link href=\"#why\" active>Why</NavBar.Link>\n              <NavBar.Link href=\"#decisions\">Decisions</NavBar.Link>\n            </NavBar.Items>\n          </NavBar.Root>\n        }\n      >\n        <PageHero\n          eyebrow=\"Sovereign AI · open source\"\n          title=\"The AI that never leaves home\"\n          lead=\"Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.\"\n          aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n        >\n          <Facts items={[{ label: \"Apache-2.0\", tone: \"ok\" }, { label: \"Law 25 · GDPR\" }]} />\n          <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>Install in three commands</Button>\n        </PageHero>\n        <Section id=\"why\" eyebrow=\"Why\" title=\"Three traps it removes\">\n          <CardGrid min={260} fit=\"fit\" reveal={false}>\n            {WHY.map((w) => (\n              <ArgumentCard\n                key={w.id}\n                id={`why-${w.id}`}\n                title={w.title}\n                mark={<Mascot bird={w.bird} size={40} animated={false} />}\n                hook={{ label: \"The trap\", text: w.hook }}\n                more={{ href: `#${w.id}`, label: \"Details\" }}\n              />\n            ))}\n          </CardGrid>\n        </Section>\n        <Section id=\"decisions\" eyebrow=\"Decisions\" title=\"What we chose, and what it costs you\" divider>\n          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />\n          <div className=\"mt-8\">\n            <MascotQuote variant=\"callout\" bird=\"owl\" label=\"The owl's promise\">\n              Every personal record stays in Québec, and you can read who touched it.\n            </MascotQuote>\n          </div>\n        </Section>\n        <Section spacing=\"sm\" aria-labelledby=\"product-cta\">\n          <CtaPanel id=\"product-cta\" title=\"Ready to run it at home?\" body=\"Three commands, then your first private answer.\">\n            <ActionBar primaryFirst size=\"lg\" label=\"Get started\" actions={[{ href: \"#install\", label: \"Install\" }, { href: \"#contact\", label: \"Talk to us\" }]} />\n          </CtaPanel>\n        </Section>\n      </MarketingLayout>\n    </div>\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Facts, Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst WHY = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\", bird: \"falcon\" as const },\n  { id: \"paid\", title: \"Paid once\", hook: \"Elsewhere, you pay per token, forever.\", bird: \"flamingo\" as const },\n  { id: \"asked\", title: \"Agents that ask\", hook: \"Elsewhere, an agent acts first and apologises later.\", bird: \"pigeon\" as const },\n];\nconst DECISIONS = [\n  { id: \"local\", chose: \"Local models by default.\", refused: \"A hosted API as the default path.\", because: \"A prompt that never leaves cannot leak.\", cost: \"You need a GPU, or patience on a CPU.\" },\n  { id: \"telemetry\", chose: \"Zero telemetry.\", refused: \"Anonymous usage statistics.\", because: \"Anonymous rarely stays anonymous.\", cost: \"You tell us what breaks.\" },\n];\nconst labels = { chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" };\n\n// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action, the reasons as compact\n// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a\n// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.\nexport default function MarketingLayoutProductPage() {\n  return (\n    <div className=\"brand-orazaka\">\n      <MarketingLayout\n        skipLabel=\"Skip to content\"\n        header={\n          <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n            <NavBar.Brand href=\"#home\"><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</NavBar.Brand>\n            <NavBar.Items>\n              <NavBar.Link href=\"#why\" active>Why</NavBar.Link>\n              <NavBar.Link href=\"#decisions\">Decisions</NavBar.Link>\n            </NavBar.Items>\n          </NavBar.Root>\n        }\n      >\n        <PageHero\n          eyebrow=\"Sovereign AI · open source\"\n          title=\"The AI that never leaves home\"\n          lead=\"Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.\"\n          aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n        >\n          <Facts items={[{ label: \"Apache-2.0\", tone: \"ok\" }, { label: \"Law 25 · GDPR\" }]} />\n          <Button variant=\"primary\" size=\"lg\">Install in three commands</Button>\n        </PageHero>\n        <Section id=\"why\" eyebrow=\"Why\" title=\"Three traps it removes\">\n          <CardGrid min={260} fit=\"fit\" reveal={false}>\n            {WHY.map((w) => (\n              <ArgumentCard\n                key={w.id}\n                id={`why-${w.id}`}\n                title={w.title}\n                mark={<Mascot bird={w.bird} size={40} animated={false} />}\n                hook={{ label: \"The trap\", text: w.hook }}\n                more={{ href: `#${w.id}`, label: \"Details\" }}\n              />\n            ))}\n          </CardGrid>\n        </Section>\n        <Section id=\"decisions\" eyebrow=\"Decisions\" title=\"What we chose, and what it costs you\" divider>\n          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />\n          <div className=\"mt-8\">\n            <MascotQuote variant=\"callout\" bird=\"owl\" label=\"The owl's promise\">\n              Every personal record stays in Québec, and you can read who touched it.\n            </MascotQuote>\n          </div>\n        </Section>\n        <Section spacing=\"sm\" aria-labelledby=\"product-cta\">\n          <CtaPanel id=\"product-cta\" title=\"Ready to run it at home?\" body=\"Three commands, then your first private answer.\">\n            <ActionBar primaryFirst size=\"lg\" label=\"Get started\" actions={[{ href: \"#install\", label: \"Install\" }, { href: \"#contact\", label: \"Talk to us\" }]} />\n          </CtaPanel>\n        </Section>\n      </MarketingLayout>\n    </div>\n  );\n}\n"
       },
       {
         "name": "pricing",
@@ -110,7 +110,7 @@
         "why": "A buyer compares plans and sees what a credit buys before deciding to commit.",
         "path": "examples/marketing-layout/pricing.tsx",
         "module": "@krizaka/ui/registry/examples/marketing-layout/pricing",
-        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst PLANS = [\n  { id: \"community\", name: \"Community\", price: \"Free\", unit: \"self-hosted\", points: [\"Every feature\", \"Your hardware\", \"Community support\"] },\n  { id: \"workspace\", name: \"Workspace\", price: \"€29\", unit: \"per month · 12,000 credits\", points: [\"Packs & Studios\", \"Shared workspaces\", \"Email support\"], featured: true },\n  { id: \"sovereign\", name: \"Sovereign\", price: \"Custom\", unit: \"on your servers\", points: [\"Installation with you\", \"Law 25 review\", \"A named engineer\"] },\n];\n\n// TEMPLATE — pricing and credits: the plans side by side (the featured one lit by its turning ring), what a credit buys,\n// and the credits left for a signed-in visitor. On a phone the plans stack, the featured one first in the reading order\n// it already has; every action is the cut button, the featured one primary.\nexport default function MarketingLayoutPricing() {\n  return (\n    <div className=\"w-full\">\n      <PageHero eyebrow=\"Pricing\" title=\"Pay once for what was done\" lead=\"Credits buy answers, images and minutes of video — never a seat you do not use.\" align=\"center\" backdrop=\"plain\" />\n      <Section aria-label=\"Plans\" spacing=\"sm\">\n        <ul className=\"grid gap-4 md:grid-cols-3\">\n          {PLANS.map((p) => (\n            <li key={p.id} className=\"flex\">\n              <GlowCard alive={p.featured} className=\"flex w-full flex-col gap-4\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <h2 className=\"font-display text-lg font-bold text-fg\">{p.name}</h2>\n                  {p.featured && <Badge tone=\"accent\">Most chosen</Badge>}\n                </div>\n                <p>\n                  <span className=\"font-display text-4xl font-extrabold text-fg\">{p.price}</span>\n                  <span className=\"mt-1 block text-sm text-fg-secondary\">{p.unit}</span>\n                </p>\n                <ul className=\"flex flex-col gap-2 text-sm text-fg-secondary\">\n                  {p.points.map((x) => (\n                    <li key={x}>— {x}</li>\n                  ))}\n                </ul>\n                <Button variant={p.featured ? \"primary\" : \"secondary\"} shape=\"cut\" className=\"mt-auto w-full\">\n                  Choose {p.name}\n                </Button>\n              </GlowCard>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      <Section id=\"credits\" title=\"Your credits\" headingSize=\"sm\" spacing=\"sm\" divider>\n        <div className=\"max-w-md\">\n          <Meter label=\"Credits this month\" value={3800} max={12000} valueText=\"3,800 of 12,000 used\" thresholds={{ low: 0.7, high: 0.9 }} showLabel />\n          <p className=\"mt-3 text-sm text-fg-secondary\">One credit ≈ one chat answer · 4 credits an image · 30 a minute of video.</p>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"
+        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst PLANS = [\n  { id: \"community\", name: \"Community\", price: \"Free\", unit: \"self-hosted\", points: [\"Every feature\", \"Your hardware\", \"Community support\"] },\n  { id: \"workspace\", name: \"Workspace\", price: \"€29\", unit: \"per month · 12,000 credits\", points: [\"Packs & Studios\", \"Shared workspaces\", \"Email support\"], featured: true },\n  { id: \"sovereign\", name: \"Sovereign\", price: \"Custom\", unit: \"on your servers\", points: [\"Installation with you\", \"Law 25 review\", \"A named engineer\"] },\n];\n\n// TEMPLATE — pricing and credits: the plans side by side (the featured one lit by its turning ring), what a credit buys,\n// and the credits left for a signed-in visitor. On a phone the plans stack, the featured one first in the reading order\n// it already has; every action is the cut button, the featured one primary.\nexport default function MarketingLayoutPricing() {\n  return (\n    <div className=\"w-full\">\n      <PageHero eyebrow=\"Pricing\" title=\"Pay once for what was done\" lead=\"Credits buy answers, images and minutes of video — never a seat you do not use.\" align=\"center\" backdrop=\"plain\" />\n      <Section aria-label=\"Plans\" spacing=\"sm\">\n        <ul className=\"grid gap-4 md:grid-cols-3\">\n          {PLANS.map((p) => (\n            <li key={p.id} className=\"flex\">\n              <GlowCard alive={p.featured} className=\"flex w-full flex-col gap-4\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <h2 className=\"font-display text-lg font-bold text-fg\">{p.name}</h2>\n                  {p.featured && <Badge tone=\"accent\">Most chosen</Badge>}\n                </div>\n                <p>\n                  <span className=\"font-display text-4xl font-extrabold text-fg\">{p.price}</span>\n                  <span className=\"mt-1 block text-sm text-fg-secondary\">{p.unit}</span>\n                </p>\n                <ul className=\"flex flex-col gap-2 text-sm text-fg-secondary\">\n                  {p.points.map((x) => (\n                    <li key={x}>— {x}</li>\n                  ))}\n                </ul>\n                <Button variant={p.featured ? \"primary\" : \"secondary\"} className=\"mt-auto w-full\">\n                  Choose {p.name}\n                </Button>\n              </GlowCard>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      <Section id=\"credits\" title=\"Your credits\" headingSize=\"sm\" spacing=\"sm\" divider>\n        <div className=\"max-w-md\">\n          <Meter label=\"Credits this month\" value={3800} max={12000} valueText=\"3,800 of 12,000 used\" thresholds={{ low: 0.7, high: 0.9 }} showLabel />\n          <p className=\"mt-3 text-sm text-fg-secondary\">One credit ≈ one chat answer · 4 credits an image · 30 a minute of video.</p>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"
       },
       {
         "name": "docs-hub",
@@ -160,7 +160,7 @@
   ],
   "demo": {
     "path": "examples/marketing-layout/product-page.tsx",
-    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Facts, Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst WHY = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\", bird: \"falcon\" as const },\n  { id: \"paid\", title: \"Paid once\", hook: \"Elsewhere, you pay per token, forever.\", bird: \"flamingo\" as const },\n  { id: \"asked\", title: \"Agents that ask\", hook: \"Elsewhere, an agent acts first and apologises later.\", bird: \"pigeon\" as const },\n];\nconst DECISIONS = [\n  { id: \"local\", chose: \"Local models by default.\", refused: \"A hosted API as the default path.\", because: \"A prompt that never leaves cannot leak.\", cost: \"You need a GPU, or patience on a CPU.\" },\n  { id: \"telemetry\", chose: \"Zero telemetry.\", refused: \"Anonymous usage statistics.\", because: \"Anonymous rarely stays anonymous.\", cost: \"You tell us what breaks.\" },\n];\nconst labels = { chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" };\n\n// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action (cut, shimmer), the reasons as compact\n// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a\n// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.\nexport default function MarketingLayoutProductPage() {\n  return (\n    <div className=\"brand-orazaka\">\n      <MarketingLayout\n        skipLabel=\"Skip to content\"\n        header={\n          <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n            <NavBar.Brand href=\"#home\"><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</NavBar.Brand>\n            <NavBar.Items>\n              <NavBar.Link href=\"#why\" active>Why</NavBar.Link>\n              <NavBar.Link href=\"#decisions\">Decisions</NavBar.Link>\n            </NavBar.Items>\n          </NavBar.Root>\n        }\n      >\n        <PageHero\n          eyebrow=\"Sovereign AI · open source\"\n          title=\"The AI that never leaves home\"\n          lead=\"Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.\"\n          aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n        >\n          <Facts items={[{ label: \"Apache-2.0\", tone: \"ok\" }, { label: \"Law 25 · GDPR\" }]} />\n          <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>Install in three commands</Button>\n        </PageHero>\n        <Section id=\"why\" eyebrow=\"Why\" title=\"Three traps it removes\">\n          <CardGrid min={260} fit=\"fit\" reveal={false}>\n            {WHY.map((w) => (\n              <ArgumentCard\n                key={w.id}\n                id={`why-${w.id}`}\n                title={w.title}\n                mark={<Mascot bird={w.bird} size={40} animated={false} />}\n                hook={{ label: \"The trap\", text: w.hook }}\n                more={{ href: `#${w.id}`, label: \"Details\" }}\n              />\n            ))}\n          </CardGrid>\n        </Section>\n        <Section id=\"decisions\" eyebrow=\"Decisions\" title=\"What we chose, and what it costs you\" divider>\n          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />\n          <div className=\"mt-8\">\n            <MascotQuote variant=\"callout\" bird=\"owl\" label=\"The owl's promise\">\n              Every personal record stays in Québec, and you can read who touched it.\n            </MascotQuote>\n          </div>\n        </Section>\n        <Section spacing=\"sm\" aria-labelledby=\"product-cta\">\n          <CtaPanel id=\"product-cta\" title=\"Ready to run it at home?\" body=\"Three commands, then your first private answer.\">\n            <ActionBar primaryFirst size=\"lg\" label=\"Get started\" actions={[{ href: \"#install\", label: \"Install\" }, { href: \"#contact\", label: \"Talk to us\" }]} />\n          </CtaPanel>\n        </Section>\n      </MarketingLayout>\n    </div>\n  );\n}\n"
+    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Facts, Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst WHY = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\", bird: \"falcon\" as const },\n  { id: \"paid\", title: \"Paid once\", hook: \"Elsewhere, you pay per token, forever.\", bird: \"flamingo\" as const },\n  { id: \"asked\", title: \"Agents that ask\", hook: \"Elsewhere, an agent acts first and apologises later.\", bird: \"pigeon\" as const },\n];\nconst DECISIONS = [\n  { id: \"local\", chose: \"Local models by default.\", refused: \"A hosted API as the default path.\", because: \"A prompt that never leaves cannot leak.\", cost: \"You need a GPU, or patience on a CPU.\" },\n  { id: \"telemetry\", chose: \"Zero telemetry.\", refused: \"Anonymous usage statistics.\", because: \"Anonymous rarely stays anonymous.\", cost: \"You tell us what breaks.\" },\n];\nconst labels = { chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" };\n\n// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action, the reasons as compact\n// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a\n// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.\nexport default function MarketingLayoutProductPage() {\n  return (\n    <div className=\"brand-orazaka\">\n      <MarketingLayout\n        skipLabel=\"Skip to content\"\n        header={\n          <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n            <NavBar.Brand href=\"#home\"><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</NavBar.Brand>\n            <NavBar.Items>\n              <NavBar.Link href=\"#why\" active>Why</NavBar.Link>\n              <NavBar.Link href=\"#decisions\">Decisions</NavBar.Link>\n            </NavBar.Items>\n          </NavBar.Root>\n        }\n      >\n        <PageHero\n          eyebrow=\"Sovereign AI · open source\"\n          title=\"The AI that never leaves home\"\n          lead=\"Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.\"\n          aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n        >\n          <Facts items={[{ label: \"Apache-2.0\", tone: \"ok\" }, { label: \"Law 25 · GDPR\" }]} />\n          <Button variant=\"primary\" size=\"lg\">Install in three commands</Button>\n        </PageHero>\n        <Section id=\"why\" eyebrow=\"Why\" title=\"Three traps it removes\">\n          <CardGrid min={260} fit=\"fit\" reveal={false}>\n            {WHY.map((w) => (\n              <ArgumentCard\n                key={w.id}\n                id={`why-${w.id}`}\n                title={w.title}\n                mark={<Mascot bird={w.bird} size={40} animated={false} />}\n                hook={{ label: \"The trap\", text: w.hook }}\n                more={{ href: `#${w.id}`, label: \"Details\" }}\n              />\n            ))}\n          </CardGrid>\n        </Section>\n        <Section id=\"decisions\" eyebrow=\"Decisions\" title=\"What we chose, and what it costs you\" divider>\n          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />\n          <div className=\"mt-8\">\n            <MascotQuote variant=\"callout\" bird=\"owl\" label=\"The owl's promise\">\n              Every personal record stays in Québec, and you can read who touched it.\n            </MascotQuote>\n          </div>\n        </Section>\n        <Section spacing=\"sm\" aria-labelledby=\"product-cta\">\n          <CtaPanel id=\"product-cta\" title=\"Ready to run it at home?\" body=\"Three commands, then your first private answer.\">\n            <ActionBar primaryFirst size=\"lg\" label=\"Get started\" actions={[{ href: \"#install\", label: \"Install\" }, { href: \"#contact\", label: \"Talk to us\" }]} />\n          </CtaPanel>\n        </Section>\n      </MarketingLayout>\n    </div>\n  );\n}\n"
   },
   "props": [
     {