@orioro/react-maplibre-util 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orioro/react-maplibre-util
 
+## 0.9.0
+
+### Minor Changes
+
+- 793bce0: add support for non-reactive <Source /> and <Layer /> props through force-remount via `key` prop
+- d8d6b68: implement feature-state handling on <Source /> component and expose memoizee options on makeMemoFetch
+
+### Patch Changes
+
+- Updated dependencies [d8d6b68]
+  - @orioro/vector-tile-util@0.4.0
+
 ## 0.8.1
 
 ### Patch Changes

package/dist/LayeredMap/index.d.ts

@@ -1,3 +1,3 @@
 export * from './LayeredMap';
 export * from './parseMapViews';
-export * from './layeredMapOnClickHandler';
+export * from './layeredMapMouseEventHandler';

package/dist/LayeredMap/layeredMapMouseEventHandler.d.ts

@@ -0,0 +1,24 @@
+import type { MapGeoJSONFeature, MapMouseEvent } from 'maplibre-gl';
+import { Merge } from 'type-fest';
+type MouseEventHandlerFn = (feature: MapGeoJSONFeature, event: AugmentedMouseEvent, context: Record<string, any>) => any;
+type LayeredMouseInteractiveFeature = Merge<MapGeoJSONFeature, {
+    layer: {
+        id: string;
+        onClick: MouseEventHandlerFn;
+        onMouseMove: MouseEventHandlerFn;
+    };
+}>;
+type AugmentedMouseEvent = Merge<MapMouseEvent, {
+    features: LayeredMouseInteractiveFeature[];
+}>;
+type LayeredMapMouseEventHandlerName = 'onClick' | 'onMouseMove';
+type LayeredMapMouseEventHandlerProps = {
+    resolveTargetFeature?: (features: AugmentedMouseEvent['features'], event: AugmentedMouseEvent) => LayeredMouseInteractiveFeature | Promise<LayeredMouseInteractiveFeature>;
+    context?: Record<string, any>;
+};
+type LayeredMapEventHandler = (e: AugmentedMouseEvent) => any;
+type LayeredMapEventHandlerList = Record<LayeredMapMouseEventHandlerName, LayeredMapEventHandler>;
+export declare function layeredMapMouseEventHandler(handlerName: LayeredMapMouseEventHandlerName, props?: LayeredMapMouseEventHandlerProps): LayeredMapEventHandler;
+export declare function layeredMapMouseEventHandler(handlerName: LayeredMapMouseEventHandlerName[], props?: LayeredMapMouseEventHandlerProps): LayeredMapEventHandlerList;
+export declare function layeredMapOnClickHandler(props?: LayeredMapMouseEventHandlerProps): LayeredMapEventHandler;
+export {};

package/dist/LayeredMap/parseMapViews.d.ts

@@ -9,6 +9,7 @@ type ParsedLayer = MapViewLayer & {
     id: string;
     viewId: string;
     onClick?: (feature: GeoJSON.Feature, event: MapMouseEvent) => any;
+    onMouseMove?: (feature: GeoJSON.Feature, event: MapMouseEvent) => any;
 };
 export type MapViewsParseResult = {
     srcMapViews: MapView[];

package/dist/Source/Source.d.ts

@@ -0,0 +1,14 @@
+import React, { type ComponentProps } from 'react';
+import { Source as MapGlSource } from 'react-map-gl/maplibre';
+import { FeatureState } from '../useFeatureState';
+type MapGlSourceProps = ComponentProps<typeof MapGlSource>;
+export type SourceProps = MapGlSourceProps & {
+    id: string;
+    featureState: FeatureState;
+};
+/**
+ * Drop-in replacement for react-map-gl's <Source /> that also declaratively
+ * syncs MapLibre feature-state from props.
+ */
+export declare function Source({ id, featureState, ...sourceProps }: SourceProps): React.JSX.Element;
+export {};

package/dist/Source/index.d.ts

@@ -0,0 +1 @@
+export * from './Source';

package/dist/StorybookUtil/DebugMap.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MapProps, SourceProps } from 'react-map-gl/maplibre';
+export declare const DEBUG_MAP_PROPS: MapProps;
+export declare function DebugMap({ children, panel, ...props }: MapProps): React.JSX.Element;
+export declare function sourceGeoJsonBr({ id, intrarregiao, ...props }?: {
+    id?: string;
+    intrarregiao?: 'municipio' | 'uf' | 'regiao' | null;
+    [key: string]: any;
+}): SourceProps;

package/dist/StorybookUtil/DebugPanel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type PanelPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare const Panel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $position: PanelPosition;
+}>> & string;
+export declare function DebugPanel({ data, children, position, ...props }: {
+    data: any;
+    children?: React.ReactNode;
+    position?: PanelPosition;
+}): React.JSX.Element;
+export {};

package/dist/StorybookUtil/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DebugPanel';
+export * from './DebugMap';

package/dist/h3/hexRegistry.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Global interning table for H3 cell ids.
+ *
+ * Problem: every row of every API response carries full 15-char hex H3 ids.
+ * Parsing each into a BigInt (`h3ToBigInt`) allocates a heap object per row,
+ * and using bigint as a Map key is slow + heavy. But the *set* of distinct
+ * hexes in play (a city, at a fixed resolution) is small and highly
+ * recurring across mousemoves/tiles — so we intern each hex string to a
+ * small uint32 index exactly once, and every downstream structure
+ * (TileData, feature-state ids, caches) works with that index instead.
+ *
+ * This module is a singleton by design: it must persist for the lifetime
+ * of the app so the same hex always maps to the same index, and so the
+ * dedup benefit compounds across requests instead of resetting per fetch.
+ */
+export declare function hexRegistry(): {
+    registerHex: (hex: string) => number;
+    hexFromIdx: (idx: number) => string;
+    idxFromHex: (hex: string) => number | undefined;
+    registrySize: () => number;
+};

package/dist/h3/index.d.ts

@@ -0,0 +1 @@
+export * from './hexRegistry';

package/dist/index.d.ts

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './util';
 export * from './types';
 export * from './Controls';
+export * from './Source';
+export * from './useFeatureState';
+export * from './h3';

package/dist/index.mjs

@@ -1,18 +1,17 @@
-import { __assign, __spreadArray, __rest, __awaiter, __generator, __makeTemplateObject } from 'tslib';
-import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useEffect, useState, useCallback, useLayoutEffect, createRef } from 'react';
-import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
+import { __assign, __rest, __spreadArray, __awaiter, __generator, __makeTemplateObject } from 'tslib';
+import React, { useRef, useEffect, forwardRef, useContext, createContext, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, createRef } from 'react';
+import { useMap, Source as Source$1, Map as Map$1, Layer, useControl } from 'react-map-gl/maplibre';
+import { bbox } from '@turf/turf';
 import { isPlainObject, uniq, uniqBy, isEqual, pick, omit } from 'lodash-es';
 import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui-core';
 import styled from 'styled-components';
 import { usePrevious } from 'react-use';
 import { mergeRefs } from 'react-merge-refs';
-import { jsxs } from 'react/jsx-runtime';
 import { mdiCloseCircleOutline, mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
 import { interpolate, strExpr } from '@orioro/util';
 import { ckmeans } from 'simple-statistics';
 import { schemeYlOrRd } from 'd3-scale-chromatic';
 import { maxIndex, range, variance, sum } from 'd3';
-import { bbox } from '@turf/turf';
 import { createPortal } from 'react-dom';
 import { Icon } from '@mdi/react';
 import { Tooltip } from '@radix-ui/themes';
@@ -20,6 +19,244 @@ import maplibregl from 'maplibre-gl';
 import mlcontour from 'maplibre-contour';
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
 
+function _resolveState(map, sourceId, _a) {
+  var sourceLayer = _a.sourceLayer,
+    stateById = _a.stateById,
+    stateByQuery = _a.stateByQuery;
+  var result = {};
+  for (var _i = 0, _b = stateByQuery !== null && stateByQuery !== void 0 ? stateByQuery : []; _i < _b.length; _i++) {
+    var spec = _b[_i];
+    var features = map.querySourceFeatures(sourceId, {
+      sourceLayer: sourceLayer,
+      filter: spec.filter
+    });
+    for (var _c = 0, features_1 = features; _c < features_1.length; _c++) {
+      var f = features_1[_c];
+      if (f.id === undefined) continue;
+      // result[f.id] may be undefined here — spreading undefined is a no-op
+      // ({ ...undefined, ...x } === { ...x }), so this is safe as-is.
+      result[f.id] = __assign(__assign({}, result[f.id]), spec.state);
+    }
+  }
+  for (var id in stateById) {
+    result[id] = __assign(__assign({}, result[id]), stateById[id]);
+  }
+  return result;
+}
+function useFeatureState(featureStateBySourceId) {
+  var _a;
+  if (featureStateBySourceId === void 0) {
+    featureStateBySourceId = {};
+  }
+  var mapRef = useMap();
+  var map = (_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.getMap();
+  var prevAppliedStateBySourceId = useRef({});
+  useEffect(function () {
+    if (!map) {
+      return;
+    }
+    var appliedOnceBySourceId = {};
+    function _applySourceFeatureState(sourceId) {
+      var _a;
+      var featureState = featureStateBySourceId[sourceId];
+      var _map = map;
+      if (!_map.getSource(sourceId)) {
+        return false;
+      }
+      var _nextSourceAppliedState = _resolveState(_map, sourceId, featureState);
+      var _prevSourceAppliedState = prevAppliedStateBySourceId.current[sourceId] || {};
+      //
+      // TODO: maybe add batching + requestAnimationFrame
+      //
+      for (var id in _nextSourceAppliedState) {
+        _map.setFeatureState({
+          source: sourceId,
+          sourceLayer: featureState.sourceLayer,
+          id: id
+        }, _nextSourceAppliedState[id]);
+      }
+      for (var id in _prevSourceAppliedState) {
+        if (!(id in _nextSourceAppliedState)) {
+          _map.removeFeatureState({
+            source: sourceId,
+            sourceLayer: featureState.sourceLayer,
+            id: id
+          });
+        }
+      }
+      prevAppliedStateBySourceId.current = __assign(__assign({}, prevAppliedStateBySourceId.current), (_a = {}, _a[sourceId] = _nextSourceAppliedState, _a));
+      return true;
+    }
+    appliedOnceBySourceId = Object.fromEntries(Object.keys(featureStateBySourceId).map(function (sourceId) {
+      return [sourceId, _applySourceFeatureState(sourceId)];
+    }));
+    // Re-apply on sourcedata for two distinct reasons:
+    //  1. Initial retry: if the source wasn't registered yet on mount (async
+    //     relative to this effect), keep trying until it succeeds — this
+    //     matters even for stateById-only usage, not just stateByQuery.
+    //  2. Ongoing re-resolution: stateByQuery results only reflect currently
+    //     loaded tiles, so once applied at least once, keep re-resolving as
+    //     more tiles load — this part only matters when queries are in use.
+    function onSourceData(e) {
+      var _a;
+      var _b;
+      if (!(e.sourceId in featureStateBySourceId)) {
+        //
+        // No feature state specified for the given source
+        //
+        return;
+      }
+      if (!appliedOnceBySourceId[e.sourceId]) {
+        appliedOnceBySourceId = __assign(__assign({}, appliedOnceBySourceId), (_a = {}, _a[e.sourceId] = _applySourceFeatureState(e.sourceId), _a));
+      } else if ((_b = featureStateBySourceId[e.sourceId].stateByQuery) === null || _b === void 0 ? void 0 : _b.length) {
+        _applySourceFeatureState(e.sourceId);
+      }
+    }
+    map.on('sourcedata', onSourceData);
+    return function () {
+      map.off('sourcedata', onSourceData);
+    };
+  }, [map, featureStateBySourceId]);
+}
+
+var DEFAULT_OPTIONS = {
+  padding: {
+    top: 60,
+    bottom: 60,
+    left: 60,
+    right: 60
+  }
+};
+function fitGeometry(map, geo, options) {
+  if (options === void 0) {
+    options = DEFAULT_OPTIONS;
+  }
+  var bounds = bbox(geo);
+  return map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], __assign(__assign({}, DEFAULT_OPTIONS), options));
+}
+
+//
+// Taken from react-map-gl/maplibre
+// https://github.com/visgl/react-map-gl/blob/c7112cf50d6985e8427d6b187d23a4d957791bb7/modules/react-maplibre/src/utils/apply-react-style.ts
+//
+// This is a simplified version of
+// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
+var unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
+function applyReactStyle(element, styles) {
+  if (!element || !styles) {
+    return;
+  }
+  var style = element.style;
+  for (var key in styles) {
+    var value = styles[key];
+    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
+      style[key] = "".concat(value, "px");
+    } else {
+      style[key] = value;
+    }
+  }
+}
+
+function ensureAddLayer(map, layerId, layer) {
+  if (!map.getLayer(layerId)) {
+    map.addLayer(__assign(__assign({}, layer), {
+      id: layerId
+    }));
+  }
+}
+function ensureRemoveLayer(map, layerId) {
+  if (map.getLayer(layerId)) {
+    map.removeLayer(layerId);
+  }
+}
+function ensureAddSource(map, sourceId, sourceSpec) {
+  if (!map.getSource(sourceId)) {
+    map.addSource(sourceId, sourceSpec);
+  }
+}
+function ensureRemoveSource(map, sourceId) {
+  if (map.getSource(sourceId)) {
+    map.removeSource(sourceId);
+  }
+}
+
+// Props react-map-gl's updateSource() cannot push to the underlying
+// MapLibre/Mapbox source after creation, per source type.
+// Keep this in sync with react-map-gl's source.ts — as it gains
+// reactive support for more props (e.g. tiles/url did in 7.1.8),
+// trim the corresponding entries here.
+//
+// See location of <Source /> component src code:
+// https://github.com/visgl/react-map-gl/blob/4b649aaf926adacb3ffba4b7c5d8edebaca90f8a/modules/react-maplibre/src/components/source.ts#L79
+//
+var NON_REACTIVE_PROPS_BY_TYPE = {
+  vector: ['bounds', 'scheme', 'minzoom', 'maxzoom', 'attribution', 'promoteId', 'volatile'],
+  raster: ['bounds', 'minzoom', 'maxzoom', 'tileSize', 'scheme', 'attribution', 'volatile'],
+  'raster-dem': ['bounds', 'tileSize', 'minzoom', 'maxzoom', 'encoding', 'attribution'],
+  geojson: ['cluster', 'clusterRadius', 'clusterMaxZoom', 'clusterMinPoints', 'clusterProperties', 'maxzoom', 'attribution', 'buffer', 'tolerance', 'lineMetrics', 'generateId', 'promoteId', 'filter'],
+  video: ['urls'],
+  canvas: ['canvas', 'animate']
+  // image has no non-reactive props — omitted
+};
+function getSourceRemountKey(id, source) {
+  var _a, _b;
+  var nonReactiveKeys = (_b = NON_REACTIVE_PROPS_BY_TYPE[(_a = source.type) !== null && _a !== void 0 ? _a : '']) !== null && _b !== void 0 ? _b : [];
+  if (nonReactiveKeys.length === 0) return id;
+  var fingerprint = nonReactiveKeys.map(function (key) {
+    return typeof source[key] !== 'undefined' ? "".concat(key, ":").concat(JSON.stringify(source[key])) : null;
+  }).filter(Boolean).join('|');
+  return "".concat(id, ":").concat(fingerprint);
+}
+
+/**
+ * Derives a React `key` for a <Layer> that changes whenever a
+ * non-reactive prop changes, forcing a remount instead of a silently
+ * dropped update.
+ *
+ * react-map-gl only pushes `paint`, `layout`, `filter`,
+ * `minzoom`/`maxzoom`, and `beforeId` to the map after mount (via
+ * real setters like `setPaintProperty`). `type`, `source`, and
+ * `source-layer` have no such setters — changing them is a no-op
+ * unless the layer is removed and re-added, i.e. remounted.
+ *
+ *   <Layer key={getLayerRemountKey(id, layer)} id={id} {...layer} />
+ *
+ * https://github.com/visgl/react-map-gl/blob/4b649aaf926adacb3ffba4b7c5d8edebaca90f8a/modules/react-maplibre/src/components/layer.ts#L20
+ */
+function getLayerRemountKey(id, layer) {
+  var _a;
+  return "".concat(id, ":").concat(layer.type, ":").concat(layer.source, ":").concat((_a = layer['source-layer']) !== null && _a !== void 0 ? _a : '');
+}
+
+/**
+ * Drop-in replacement for react-map-gl's <Source /> that also declaratively
+ * syncs MapLibre feature-state from props.
+ */
+function Source(_a) {
+  var _b;
+  var id = _a.id,
+    featureState = _a.featureState,
+    sourceProps = __rest(_a, ["id", "featureState"]);
+  useFeatureState(featureState ? (_b = {}, _b[id] = featureState, _b) : {});
+  return /*#__PURE__*/React.createElement(Source$1
+  //
+  // Use `getSourceRemountKey` to ensure that
+  // non-reactive props (props that react-map-gl as no
+  // way of updating on maplibre) force re-mount
+  // of component
+  //
+  , __assign({
+    //
+    // Use `getSourceRemountKey` to ensure that
+    // non-reactive props (props that react-map-gl as no
+    // way of updating on maplibre) force re-mount
+    // of component
+    //
+    key: getSourceRemountKey(id, sourceProps),
+    id: id
+  }, sourceProps));
+}
+
 function _validZIndex(zIndex) {
   return typeof zIndex === 'number' && !Number.isNaN(zIndex);
 }
@@ -279,7 +516,6 @@ function syncLayerOrder(_a) {
   });
 }
 
-// import { mergeRefs } from 'react-merge-refs'
 //
 // Augment mouse events with info from original view
 //
@@ -367,7 +603,7 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
       clearTimeout(timeoutId);
     };
   }, [parsed === null || parsed === void 0 ? void 0 : parsed.layers]);
-  return /*#__PURE__*/React.createElement(Map, __assign({
+  return /*#__PURE__*/React.createElement(Map$1, __assign({
     ref: mapRef,
     interactiveLayerIds: __spreadArray(__spreadArray([], interactiveLayerIdsInput, true), parsed.interactiveLayerIds, true)
   }, mapProps, evtHandlers), /*#__PURE__*/React.createElement(LayeredMapContext.Provider, {
@@ -377,58 +613,85 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
       _a.viewId;
       var source = __rest(_a, ["id", "viewId"]);
     return /*#__PURE__*/React.createElement(Source, __assign({
-      key: id,
       id: id
     }, source));
   }), parsed.layers.map(function (_a) {
     var id = _a.id,
       layer = __rest(_a, ["id"]);
-    return /*#__PURE__*/React.createElement(Layer, __assign({
-      key: id,
+    return /*#__PURE__*/React.createElement(Layer
+    //
+    // Use `getLayerRemountKey` to ensure that
+    // non-reactive props (props that react-map-gl as no
+    // way of updating on maplibre) force re-mount
+    // of component
+    //
+    , __assign({
+      //
+      // Use `getLayerRemountKey` to ensure that
+      // non-reactive props (props that react-map-gl as no
+      // way of updating on maplibre) force re-mount
+      // of component
+      //
+      key: getLayerRemountKey(id, layer),
       id: id
     }, layer));
   })));
 });
 
-function selectFirstClickableFeature(features) {
+function selectFirstInteractiveFeature(features) {
   return features[0];
 }
-function layeredMapOnClickHandler(_a) {
-  var _b = _a === void 0 ? {} : _a,
-    _c = _b.resolveTargetFeature,
-    resolveTargetFeature = _c === void 0 ? selectFirstClickableFeature : _c,
-    _d = _b.context,
-    context = _d === void 0 ? {} : _d;
-  return function onClick(e) {
-    return __awaiter(this, void 0, void 0, function () {
-      var features, clickableFeatures, targetFeature, _a;
-      return __generator(this, function (_b) {
-        switch (_b.label) {
-          case 0:
-            features = e.features || [];
-            clickableFeatures = features.filter(function (feature) {
-              var _a;
-              return typeof ((_a = feature.layer) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
-            });
-            if (!(clickableFeatures.length > 0)) return [3 /*break*/, 4];
-            if (!(clickableFeatures.length === 1)) return [3 /*break*/, 1];
-            _a = clickableFeatures[0];
-            return [3 /*break*/, 3];
-          case 1:
-            return [4 /*yield*/, resolveTargetFeature(clickableFeatures, e)];
-          case 2:
-            _a = _b.sent();
-            _b.label = 3;
-          case 3:
-            targetFeature = _a;
-            targetFeature.layer.onClick(targetFeature, e, context);
-            _b.label = 4;
-          case 4:
-            return [2 /*return*/];
-        }
+function layeredMapMouseEventHandler(handlerName, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  if (Array.isArray(handlerName)) {
+    return Object.fromEntries(handlerName.map(function (_handlerName) {
+      return [_handlerName, layeredMapMouseEventHandler(_handlerName, props)];
+    }));
+  } else {
+    var _a = props.resolveTargetFeature,
+      resolveTargetFeature_1 = _a === void 0 ? selectFirstInteractiveFeature : _a,
+      _b = props.context,
+      context_1 = _b === void 0 ? {} : _b;
+    return function layeredMapOnHandleMouseEvent(e) {
+      return __awaiter(this, void 0, void 0, function () {
+        var features, taregetableFeatures, targetFeature, _a;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              features = e.features || [];
+              taregetableFeatures = features.filter(function (feature) {
+                var _a;
+                return typeof ((_a = feature.layer) === null || _a === void 0 ? void 0 : _a[handlerName]) === 'function';
+              });
+              if (!(taregetableFeatures.length > 0)) return [3 /*break*/, 4];
+              if (!(taregetableFeatures.length === 1)) return [3 /*break*/, 1];
+              _a = taregetableFeatures[0];
+              return [3 /*break*/, 3];
+            case 1:
+              return [4 /*yield*/, resolveTargetFeature_1(taregetableFeatures, e)];
+            case 2:
+              _a = _b.sent();
+              _b.label = 3;
+            case 3:
+              targetFeature = _a;
+              targetFeature.layer[handlerName](targetFeature, e, context_1);
+              _b.label = 4;
+            case 4:
+              return [2 /*return*/];
+          }
+        });
       });
-    });
-  };
+    };
+  }
+}
+function layeredMapOnClickHandler(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  console.warn('layeredMapOnClickHandler deprecated, prefer layeredMapMouseEventHandler(`onClick`, props)');
+  return layeredMapMouseEventHandler('onClick', props);
 }
 
 var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 16px;\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  border: 1px solid rgba(0, 0, 0, 0.3);\n\n  // background-color: black;\n  color: white;\n  border-radius: 5px;\n  font-size: 0.9rem;\n\n  max-width: 300px;\n\n  hyphens: auto;\n  word-break: break-word; /* Avoids overflow */\n  overflow-wrap: break-word; /* Ensures long words break */\n  white-space: normal;\n"], ["\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 16px;\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  border: 1px solid rgba(0, 0, 0, 0.3);\n\n  // background-color: black;\n  color: white;\n  border-radius: 5px;\n  font-size: 0.9rem;\n\n  max-width: 300px;\n\n  hyphens: auto;\n  word-break: break-word; /* Avoids overflow */\n  overflow-wrap: break-word; /* Ensures long words break */\n  white-space: normal;\n"])));
@@ -661,7 +924,7 @@ var MapWindow = /*#__PURE__*/forwardRef(function MapWindowInner(_a, externalRef)
       externalOnLoad(e);
     }
   }, [setCenterOffsetPixels, setMapReady]);
-  return /*#__PURE__*/React.createElement(Map, __assign({
+  return /*#__PURE__*/React.createElement(Map$1, __assign({
     attributionControl: false
   }, mapProps, {
     onLoad: _onLoad,
@@ -767,160 +1030,6 @@ function useHover(props, deps) {
   }, hoverInfo, isDragging];
 }
 
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _arrayWithHoles(r) {
-  if (Array.isArray(r)) return r;
-}
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = true,
-      o = false;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = true, n = r;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _slicedToArray(r, e) {
-  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
-}
-
-var _excluded = ["cursor", "onMouseMove", "onDragStart", "onDragEnd", "children"];
-function useMergedCallback(cbA, cbB) {
-  return useCallback(function () {
-    if (typeof cbA === 'function') {
-      cbA.apply(void 0, arguments);
-    }
-    if (typeof cbB === 'function') {
-      cbB.apply(void 0, arguments);
-    }
-  }, [cbA, cbB]);
-}
-function withHover(Component, withHoverProps) {
-  return /*#__PURE__*/forwardRef(function WithHover(_ref, ref) {
-    var cursor = _ref.cursor,
-      onMouseMove = _ref.onMouseMove,
-      onDragStart = _ref.onDragStart,
-      onDragEnd = _ref.onDragEnd,
-      children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-    //
-    // Hover stuff
-    //
-    var _useHover = useHover(withHoverProps, []),
-      _useHover2 = _slicedToArray(_useHover, 1),
-      hoverProps = _useHover2[0];
-    return /*#__PURE__*/jsxs(Component, _objectSpread2(_objectSpread2({}, restProps), {}, {
-      ref: ref,
-      cursor: cursor || hoverProps.cursor,
-      onMouseMove: useMergedCallback(onMouseMove, hoverProps.onMouseMove),
-      onDragStart: useMergedCallback(onDragStart, hoverProps.onDragStart),
-      onDragEnd: useMergedCallback(onDragEnd, hoverProps.onDragEnd),
-      children: [hoverProps.children, children]
-    }));
-  });
-}
-
 function parseHoverInfo(index, event) {
   return {
     index: index,
@@ -1097,7 +1206,7 @@ function makeSyncedMaps(_a) {
 }
 var SyncedMaps = makeSyncedMaps({
   components: {
-    Map: Map
+    Map: Map$1
   }
 });
 var templateObject_1;
@@ -1549,67 +1658,6 @@ var $naturalBreaks = function $naturalBreaks(_a) {
   return breaks;
 };
 
-var DEFAULT_OPTIONS = {
-  padding: {
-    top: 60,
-    bottom: 60,
-    left: 60,
-    right: 60
-  }
-};
-function fitGeometry(map, geo, options) {
-  if (options === void 0) {
-    options = DEFAULT_OPTIONS;
-  }
-  var bounds = bbox(geo);
-  return map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], __assign(__assign({}, DEFAULT_OPTIONS), options));
-}
-
-//
-// Taken from react-map-gl/maplibre
-// https://github.com/visgl/react-map-gl/blob/c7112cf50d6985e8427d6b187d23a4d957791bb7/modules/react-maplibre/src/utils/apply-react-style.ts
-//
-// This is a simplified version of
-// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
-var unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
-function applyReactStyle(element, styles) {
-  if (!element || !styles) {
-    return;
-  }
-  var style = element.style;
-  for (var key in styles) {
-    var value = styles[key];
-    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
-      style[key] = "".concat(value, "px");
-    } else {
-      style[key] = value;
-    }
-  }
-}
-
-function ensureAddLayer(map, layerId, layer) {
-  if (!map.getLayer(layerId)) {
-    map.addLayer(__assign(__assign({}, layer), {
-      id: layerId
-    }));
-  }
-}
-function ensureRemoveLayer(map, layerId) {
-  if (map.getLayer(layerId)) {
-    map.removeLayer(layerId);
-  }
-}
-function ensureAddSource(map, sourceId, sourceSpec) {
-  if (!map.getSource(sourceId)) {
-    map.addSource(sourceId, sourceSpec);
-  }
-}
-function ensureRemoveSource(map, sourceId) {
-  if (map.getSource(sourceId)) {
-    map.removeSource(sourceId);
-  }
-}
-
 function ControlContainer(_a) {
   var style = _a.style,
     _b = _a.position,
@@ -1660,6 +1708,16 @@ function ControlContainerWithStyleReset(_a) {
 }
 ControlContainer.Unstyled = ControlContainerWithStyleReset;
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
 var DEFAULT_DEM_SOURCE_ID = 'dem';
 var DEFAULT_DEM_SOURCE_SPEC = {
   url: 'https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png',
@@ -1978,4 +2036,54 @@ function InspectControl(props) {
   return null;
 }
 
-export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, index as SVG_PATTERNS, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, circles_1, cross_1, diamonds_1, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, layeredMapOnClickHandler, lines_1, makeSyncedMaps, mapSetFeaturesState, mosaic_1, mosaic_2, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, squares_1, svgIconGenerator, svgImageGenerator, svgImageId, triangles_1, useClientRect, useHover, useLayeredMap, useMapRegistry, useTilesLoading, waves_1, withHover };
+/**
+ * Global interning table for H3 cell ids.
+ *
+ * Problem: every row of every API response carries full 15-char hex H3 ids.
+ * Parsing each into a BigInt (`h3ToBigInt`) allocates a heap object per row,
+ * and using bigint as a Map key is slow + heavy. But the *set* of distinct
+ * hexes in play (a city, at a fixed resolution) is small and highly
+ * recurring across mousemoves/tiles — so we intern each hex string to a
+ * small uint32 index exactly once, and every downstream structure
+ * (TileData, feature-state ids, caches) works with that index instead.
+ *
+ * This module is a singleton by design: it must persist for the lifetime
+ * of the app so the same hex always maps to the same index, and so the
+ * dedup benefit compounds across requests instead of resetting per fetch.
+ */
+function hexRegistry() {
+  var hexToIdx = new Map();
+  var idxToHex = [];
+  /** Intern a 15-char H3 hex string, returning a stable uint32 index. */
+  var registerHex = function registerHex(hex) {
+    var idx = hexToIdx.get(hex);
+    if (idx === undefined) {
+      idx = idxToHex.length;
+      hexToIdx.set(hex, idx);
+      idxToHex.push(hex);
+    }
+    return idx;
+  };
+  /** Reverse lookup: index -> original hex string (e.g. for feature ids). */
+  var hexFromIdx = function hexFromIdx(idx) {
+    var hex = idxToHex[idx];
+    if (hex === undefined) {
+      throw new Error("hexRegistry: no hex interned for index ".concat(idx));
+    }
+    return hex;
+  };
+  var idxFromHex = function idxFromHex(hex) {
+    return hexToIdx.get(hex);
+  };
+  var registrySize = function registrySize() {
+    return idxToHex.length;
+  };
+  return {
+    registerHex: registerHex,
+    hexFromIdx: hexFromIdx,
+    idxFromHex: idxFromHex,
+    registrySize: registrySize
+  };
+}
+
+export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, index as SVG_PATTERNS, Source, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, circles_1, cross_1, diamonds_1, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getLayerRemountKey, getSourceRemountKey, getSrcLayer, getSrcViewByLayerId, hexRegistry, hoverParseEvent, layeredMapMouseEventHandler, layeredMapOnClickHandler, lines_1, makeSyncedMaps, mapSetFeaturesState, mosaic_1, mosaic_2, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, squares_1, svgIconGenerator, svgImageGenerator, svgImageId, triangles_1, useClientRect, useFeatureState, useHover, useLayeredMap, useMapRegistry, useTilesLoading, waves_1 };

package/dist/tmp_h3/H3HexSource/H3HexSource.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Converts an array of H3 cell indexes into a GeoJSON FeatureCollection
+ * of polygons.
+ */
+export declare function h3CellsToGeoJSON(cells: any, getProperties?: () => {}): {
+    type: string;
+    features: ({
+        type: string;
+        id: any;
+        properties: {
+            h3: any;
+        };
+        geometry: {
+            type: string;
+            coordinates: import("h3-js").CoordPair[][];
+        };
+    } | {
+        type: string;
+        id: any;
+        properties: {
+            h3: any;
+        };
+        geometry: {
+            type: string;
+            coordinates: number[][][][];
+        };
+    })[];
+};
+export declare function resolutionForZoom(zoom: any): number;
+/**
+ * Bounds -> H3 cell indexes covering that area at the given resolution.
+ * `paddingRatio` expands the box so cells don't pop in right at the
+ * viewport edge while panning.
+ */
+export declare function boundsToH3Cells(bounds: any, resolution: any, paddingRatio?: number): string[];
+/** Memoized GeoJSON conversion; see usage note on stable `cells` refs. */
+export declare function useH3GeoJSON(cells: any, getProperties: any): {
+    type: string;
+    features: ({
+        type: string;
+        id: any;
+        properties: {
+            h3: any;
+        };
+        geometry: {
+            type: string;
+            coordinates: import("h3-js").CoordPair[][];
+        };
+    } | {
+        type: string;
+        id: any;
+        properties: {
+            h3: any;
+        };
+        geometry: {
+            type: string;
+            coordinates: number[][][][];
+        };
+    })[];
+};
+/**
+ * Tracks the map's viewport and returns the H3 cells currently covering
+ * it. Recomputes on `moveend` (debounced) rather than every pan frame —
+ * `polygonToCells` does real geometric coverage work and isn't cheap
+ * enough to run at 60fps during drag.
+ */
+export declare function useViewportH3Cells({ mapId, getResolution, paddingRatio, debounceMs, }?: {
+    getResolution?: typeof resolutionForZoom | undefined;
+    paddingRatio?: number | undefined;
+    debounceMs?: number | undefined;
+}): never[];
+/**
+ * Drop-in hex layer. Two modes:
+ *  - pass `cells` explicitly -> renders exactly that set (old behavior)
+ *  - omit `cells` -> auto-tracks the viewport and renders whatever's
+ *    visible, at a resolution derived from zoom
+ */
+export declare function H3HexSource({ id, mapId, cells: cellsProp, getResolution, paddingRatio, getProperties, fillColor, fillOpacity, lineColor, lineWidth, beforeId, }: {
+    id?: string | undefined;
+    mapId: any;
+    cells: any;
+    getResolution: any;
+    paddingRatio: any;
+    getProperties: any;
+    fillColor?: string | undefined;
+    fillOpacity?: number | undefined;
+    lineColor?: string | undefined;
+    lineWidth?: number | undefined;
+    beforeId: any;
+}): import("react").JSX.Element;

package/dist/tmp_h3/H3HexSource/H3HexSource.stories_.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import '@radix-ui/themes/styles.css';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Basic: () => React.JSX.Element;

package/dist/types.d.ts

@@ -11,6 +11,7 @@ export type MapViewLayer = Omit<AnyLayer, 'id'> & {
     absoluteSourceId?: string;
     zIndex?: number;
     onClick?: (feature: MapGeoJSONFeature, event: MapMouseEvent) => any;
+    onMouseMove?: (feature: MapGeoJSONFeature, event: MapMouseEvent) => any;
 };
 type MapViewLegend = {
     type: string;

package/dist/useFeatureState/index.d.ts

@@ -0,0 +1 @@
+export * from './useFeatureState';

package/dist/useFeatureState/useFeatureState.d.ts

@@ -0,0 +1,17 @@
+import type { FilterSpecification } from 'maplibre-gl';
+type SourceId = string;
+type FeatureId = string | number;
+type FeatureStateValue = Record<string, unknown>;
+export type QuerySpec = {
+    filter: FilterSpecification;
+    state: FeatureStateValue;
+};
+export type FeatureState = {
+    sourceLayer?: string;
+    featureIdType?: 'string' | 'number';
+    stateById?: Record<FeatureId, FeatureStateValue>;
+    stateByQuery?: QuerySpec[];
+};
+export type FeatureStateBySourceId = Record<SourceId, FeatureState>;
+export declare function useFeatureState(featureStateBySourceId?: Record<SourceId, FeatureState>): void;
+export {};

package/dist/useHover/index.d.ts

@@ -1,2 +1 @@
 export * from './useHover';
-export * from './withHover';

package/dist/util/getLayerRemountKey.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Derives a React `key` for a <Layer> that changes whenever a
+ * non-reactive prop changes, forcing a remount instead of a silently
+ * dropped update.
+ *
+ * react-map-gl only pushes `paint`, `layout`, `filter`,
+ * `minzoom`/`maxzoom`, and `beforeId` to the map after mount (via
+ * real setters like `setPaintProperty`). `type`, `source`, and
+ * `source-layer` have no such setters — changing them is a no-op
+ * unless the layer is removed and re-added, i.e. remounted.
+ *
+ *   <Layer key={getLayerRemountKey(id, layer)} id={id} {...layer} />
+ *
+ * https://github.com/visgl/react-map-gl/blob/4b649aaf926adacb3ffba4b7c5d8edebaca90f8a/modules/react-maplibre/src/components/layer.ts#L20
+ */
+export declare function getLayerRemountKey(id: string, layer: Record<string, unknown>): string;

package/dist/util/getSourceRemountKey.d.ts

@@ -0,0 +1,5 @@
+type SourceLike = Record<string, unknown> & {
+    type?: string;
+};
+export declare function getSourceRemountKey(id: string, source: SourceLike): string;
+export {};

package/dist/util/index.d.ts

@@ -1,3 +1,5 @@
 export * from './fitGeometry';
 export * from './applyReactStyle';
 export * from './misc';
+export * from './getSourceRemountKey';
+export * from './getLayerRemountKey';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioro/react-maplibre-util",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/index.mjs",
@@ -56,10 +56,12 @@
     "@orioro/resolve": "^0.1.12",
     "@orioro/scale-util": "^0.0.12",
     "@orioro/util": "^0.16.0",
+    "@orioro/vector-tile-util": "^0.4.0",
     "@turf/turf": "^7.2.0",
     "d3": "^7.9.0",
     "d3-scale-chromatic": "^3.1.0",
     "greenlet": "^1.1.0",
+    "h3-js": "^4.5.0",
     "lodash-es": "^4.17.21",
     "maplibre-contour": "^0.1.0",
     "query-string": "^9.1.1",

package/dist/LayeredMap/layeredMapOnClickHandler.d.ts

@@ -1,17 +0,0 @@
-import type { MapGeoJSONFeature, MapMouseEvent } from 'maplibre-gl';
-import { Merge } from 'type-fest';
-type ClickableFeature = Merge<MapGeoJSONFeature, {
-    layer: {
-        id: string;
-        onClick: (feature: MapGeoJSONFeature, event: AugmentedMouseEvent, context: Record<string, any>) => any;
-    };
-}>;
-type AugmentedMouseEvent = Merge<MapMouseEvent, {
-    features: ClickableFeature[];
-}>;
-type LayeredMapOnClickHandlerProps = {
-    resolveTargetFeature?: (features: AugmentedMouseEvent['features'], event: AugmentedMouseEvent) => ClickableFeature | Promise<ClickableFeature>;
-    context?: Record<string, any>;
-};
-export declare function layeredMapOnClickHandler({ resolveTargetFeature, context, }?: LayeredMapOnClickHandlerProps): (e: AugmentedMouseEvent) => Promise<void>;
-export {};

package/dist/useHover/withHover.d.ts

@@ -1,2 +0,0 @@
-export function withHover(Component: any, withHoverProps: any): React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';