@sakaniui/react 0.10.2 → 0.11.1

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.11.1
+
+- **Fixed: `Map` markers on the server.** Rendered before the map is measured, markers and popups were placed
+  against a 0x0 map and then jumped, and Next.js logged a hydration warning. They now appear once the map has a
+  size. No API changes.
+- **Fixed: `--map-tile-filter` can be set from outside.** It was declared on the map itself, so a value set on a
+  wrapper was ignored, and a panel that forces the light tokens inside a dark page still got dark tiles. It now
+  falls back to the built-in light or dark filter, so setting `--map-tile-filter` on the map or on any ancestor wins.
+- **Fixed: `tileUrlDark` now reacts to a `.dark` class added or removed on any ancestor**, not only on `<html>`.
+
+## 0.11.0
+
+- **New: `Map`**, an interactive tile map built from the new *↳ Map* page in Figma, with no map library.
+  Tiles are plain images on a Web Mercator grid (OpenStreetMap by default; pass `tileUrl` and `attribution` for
+  your own provider). Drag to pan with inertia, scroll or pinch to zoom at the pointer, double-click to zoom in;
+  with focus, arrows pan and + / - zoom. Props: `center`, `zoom`, `minZoom`, `maxZoom` (changing `center` or `zoom`
+  flies the map there), `onViewChange`, `controls`, `locate` with `onLocate` / `onLocateError`, `height`, `tileUrl`,
+  `attribution`. Dark mode inverts and mutes the tiles through `--map-tile-filter`, which you can override.
+  - **`MapMarker`**: `pin`, `dot` or `cluster` (with `count`), `selected`, `label`, `onClick`.
+  - **`MapPopup`**: a card that opens above a place, with `title`, `description`, `onClose` and `offset`.
+  - **Live data:** `glide` (ms) on `MapMarker` and `MapPopup` slides them to each new `position` instead of
+    jumping, for markers fed by a WebSocket, server-sent events or polling. It interpolates the place, so it stays
+    correct while the map is panned or zoomed, and reduced motion turns it off.
+  - **`MapClusterLayer`**: pass `points` and a `renderPoint`; nearby places group into counted cluster markers
+    that zoom to their places on click, and only what is in view is rendered (a zoom step takes about 5 ms with
+    10,000 places). `radius`, `clusterMaxZoom` and `onClusterClick` tune it.
+  - **Dark mode** like the Figma *Dark* example: the map follows a `.dark` class on `<html>` or any ancestor, or
+    pass `theme="dark"` to make just that map dark on a light page (tiles, markers, controls and popups all switch).
+    The default tiles are darkened to flat near-black land with blue water and roads darker than the land;
+    `tileUrlDark` swaps in a provider's own dark tiles instead.
+  - **Every Figma variant and state:** `MapMarker` Pin / Dot / Cluster × Default / Hover / Selected (hover works on
+    every marker, and the hovered or selected one rises above its neighbours); new `MapControlButton` and
+    `MapControls` (Default / Hover / Disabled, with or without the locate button); `MapPopup` gains `pointer`
+    (Figma *Show pointer*). `hovered` pins the hover look on markers and control buttons for docs and visual tests.
+  - `useMapContext()` gives custom overlays `project`, `zoom`, `flyTo` and `fitBounds`.
+- **New: `MapGlobe`**, a 3D dotted globe (the Figma *Map Globe*), with hover too: markers have Default, Hover
+  (soft halo), Selected (larger halo) and Active (pulse) states; hovering one stops the spin and shows its `label`
+  in a small card; `onMarkerClick` / `onMarkerHover` report the marker, and labelled markers are reachable with Tab.
+  `theme="dark"` makes a globe on a dark surface draw light dots. `variant` "land" dots the continents and "ocean"
+  dots the sea; it spins, can be dragged with inertia, and pauses offscreen and under reduced motion. `markers`
+  (with `active` pulses) and `arcs` are plain props, so a feed can drive them. It is a canvas with an orthographic
+  projection and an 11 KB land mask (Natural Earth, public domain, notice in `THIRD_PARTY_NOTICES.md`), so it adds
+  no dependency.
+- Agent contract: `Map`, `MapMarker`, `MapPopup`, `MapClusterLayer` and `MapGlobe` are in the manifest with the
+  aliases *google maps*, *leaflet*, *mapbox*, *globe*, *marker clustering* and more, plus recipes for a live feed
+  and for clustering.
+
 ## 0.10.2
 
 - **New logo.** The SakaniUI arc mark replaces the orange "S" tile everywhere the library shows its own brand:

package/THIRD_PARTY_NOTICES.md

@@ -59,3 +59,25 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
+
+## Natural Earth land, via world-atlas
+
+`src/components/Map/landMask.ts` (the land mask behind `MapGlobe`) is Natural Earth 1:110m land
+(https://www.naturalearthdata.com), which is in the public domain, rasterised from the TopoJSON in
+world-atlas 2.0.2 (https://github.com/topojson/world-atlas), used under the ISC license:
+
+```
+Copyright 2013-2019 Michael Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+```