@tileflow/react-native 0.1.0-alpha.8 → 0.1.0-alpha.9

package/README.md

@@ -91,7 +91,7 @@ Add `timeOfDay="dusk"` beside `theme` to select a map's optional `day`, `dawn`,
 `night` preset. For Streets, `theme="light"` with this preset selects the existing `dusk` palette.
 Maps without this capability ignore the option; omitting it keeps the selected theme unchanged.
 Changing it uses the existing theme transition. `themeBlend` takes precedence. See the
-[authoring contract](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md#style-with-themes-and-semantic-modules).
+[authoring contract](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/REFERENCE.md#style-with-themes-and-semantic-modules).
 
 Theme and `timeOfDay` changes cross-fade over 450 ms by default: a snapshot of the drawn map covers it, follows the camera and fades out once the new theme is drawn. Use `themeTransition={{duration: 700}}` to customize the duration, or `duration: 0` for an immediate change. `themeBlend={{themes: ['night', 'dusk', 'day'], position}}` shows a continuous blend of the map's themes instead of `theme`; position 0 is the first theme and 1.5 is halfway from the second to the third:
 
@@ -275,6 +275,13 @@ wrapper. A bounded accessible marker is rendered when `renderMarker` is omitted.
 remain in native vector or GeoJSON layers and are selected through semantic rendered-feature
 queries rather than thousands of React marker views.
 
+`Map` also takes the web adapters' `dataSources`, `dataOverlays` and `annotationClusters`, with
+`geojsonSource()`, `clusterOverlay()` and `heatmapOverlay()` from `@tileflow/core/native`. Tapping a
+cluster zooms in unless the application controls `view`, and reports a `cluster` target through
+`onInteractionEvent`. Compiled clusters and heatmaps are checked by
+`tileflow validate --renderer native`. Polygon drawing with Terra Draw is web-only. See the
+[interactions reference](https://github.com/tileflow/tileflow-sdk/blob/main/packages/interactions/REFERENCE.md).
+
 The application owns persistent selection and its presentation. The SDK emits normalized
 annotation or POI targets but no popup, callout, tooltip, sheet, panel or modal renderer.
 

package/dist/{contract-BWT1jxqg.d.ts → contract-BWCbfMOx.d.ts}

@@ -1,8 +1,8 @@
 import { MapProps as MapProps$1 } from '@maplibre/maplibre-react-native';
 import { ReactElement, ReactNode, Ref } from 'react';
 import { ViewProps } from 'react-native';
-import { TileflowNativeInitialView, TileflowNativeInitialViewOptions, TileflowNativeSource, TileflowNativeSourceOptions, TileflowBoundaryValues, TileflowBoundaryFamily, TileflowNativeSourceState, TileflowNativeSourceError } from '@tileflow/core/native';
-import { TileflowAnnotation, TileflowInteractionBinding, TileflowInteractionEvent, TileflowResolvedAnnotationTarget, TileflowResolvedPoiFeatureTarget, TileflowInteractionDiagnostic, TileflowAnnotationViewContext } from '@tileflow/interactions';
+import { TileflowMapLibreOverlay, TileflowGeoJsonSource, TileflowNativeInitialView, TileflowNativeInitialViewOptions, TileflowNativeSource, TileflowNativeSourceOptions, TileflowBoundaryValues, TileflowBoundaryFamily, TileflowNativeSourceState, TileflowNativeSourceError } from '@tileflow/core/native';
+import { TileflowAnnotation, TileflowAnnotationClusterOptions, TileflowInteractionBinding, TileflowInteractionEvent, TileflowResolvedAnnotationTarget, TileflowResolvedClusterTarget, TileflowResolvedPoiFeatureTarget, TileflowResolvedStyleFeatureTarget, TileflowInteractionDiagnostic, TileflowAnnotationViewContext } from '@tileflow/interactions';
 
 /** Marker composition only. Selection presentation and native handles are not part of this context. */
 type MapMarkerRenderContext<TAnnotation extends TileflowAnnotation = TileflowAnnotation> = Readonly<Pick<TileflowAnnotationViewContext<TAnnotation>, 'annotation' | 'target' | 'content' | 'viewName'>>;
@@ -10,11 +10,17 @@ type MapMarkerRenderContext<TAnnotation extends TileflowAnnotation = TileflowAnn
 type MapMarkerRenderer<TAnnotation extends TileflowAnnotation = TileflowAnnotation> = (context: MapMarkerRenderContext<TAnnotation>) => ReactElement;
 /** Mobile reports activation; the application owns any persistent selection. */
 type MapInteractionEvent<TAnnotation extends TileflowAnnotation = TileflowAnnotation> = Readonly<Omit<TileflowInteractionEvent<TAnnotation>, 'target' | 'type'> & {
-    target: TileflowResolvedAnnotationTarget<TAnnotation> | TileflowResolvedPoiFeatureTarget;
+    target: TileflowResolvedAnnotationTarget<TAnnotation> | TileflowResolvedClusterTarget | TileflowResolvedPoiFeatureTarget | TileflowResolvedStyleFeatureTarget;
     type: 'target:activate';
 }>;
 type MapInteractionProps<TAnnotation extends TileflowAnnotation = TileflowAnnotation> = Readonly<{
+    /** Group `annotations` into accessible native cluster buttons. Up to 1,000 annotations. */
+    annotationClusters?: TileflowAnnotationClusterOptions;
     annotations?: readonly TAnnotation[];
+    /** Overlays drawn over `dataSources` or compiled sources, keyed as in `defineMap`. */
+    dataOverlays?: Readonly<Record<string, TileflowMapLibreOverlay>>;
+    /** Application GeoJSON, keyed as in `defineMap`. A compiled source of the same key is filled. */
+    dataSources?: Readonly<Record<string, TileflowGeoJsonSource>>;
     interactions?: readonly TileflowInteractionBinding[];
     onInteractionEvent?: (event: MapInteractionEvent<TAnnotation>) => void;
     onInteractionDiagnostic?: (diagnostic: TileflowInteractionDiagnostic) => void;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { TileflowAnnotation } from '@tileflow/interactions';
 export { TileflowAnnotation, TileflowInteractionBinding, TileflowInteractionCoordinate, TileflowInteractionDiagnostic, TileflowPoiCategory, TileflowResolvedAnnotationTarget, TileflowResolvedPoiFeatureTarget } from '@tileflow/interactions';
-import { d as MapProps } from './contract-BWT1jxqg.js';
-export { e as MapBaseProps, f as MapBoundaryFeatureState, c as MapCameraProps, g as MapColorScheme, h as MapErrorEvent, i as MapEventHandlers, b as MapInitialViewInputs, j as MapInteractionEvent, k as MapInteractionProps, l as MapLoadEvent, m as MapMarkerRenderContext, n as MapMarkerRenderer, o as MapOptions, p as MapPresentationProps, q as MapReadinessChangeEvent, r as MapRef, s as MapSelection, t as MapSessionError, u as MapSource, v as MapSourceError, w as MapSourceProps, x as MapSourceState, y as MapTheme, z as MapThemeBlend, A as MapThemeChangeEvent, B as MapThemeSelection, C as MapThemeTransition, M as MapView, a as MapViewChangeEvent } from './contract-BWT1jxqg.js';
+import { d as MapProps } from './contract-BWCbfMOx.js';
+export { e as MapBaseProps, f as MapBoundaryFeatureState, c as MapCameraProps, g as MapColorScheme, h as MapErrorEvent, i as MapEventHandlers, b as MapInitialViewInputs, j as MapInteractionEvent, k as MapInteractionProps, l as MapLoadEvent, m as MapMarkerRenderContext, n as MapMarkerRenderer, o as MapOptions, p as MapPresentationProps, q as MapReadinessChangeEvent, r as MapRef, s as MapSelection, t as MapSessionError, u as MapSource, v as MapSourceError, w as MapSourceProps, x as MapSourceState, y as MapTheme, z as MapThemeBlend, A as MapThemeChangeEvent, B as MapThemeSelection, C as MapThemeTransition, M as MapView, a as MapViewChangeEvent } from './contract-BWCbfMOx.js';
 import '@maplibre/maplibre-react-native';
 import 'react-native';
 import '@tileflow/core/native';

package/dist/index.js

@@ -15,16 +15,25 @@ import {
   Map as NativeMap
 } from "@maplibre/maplibre-react-native";
 import {
-  Fragment,
+  Fragment as Fragment2,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo3,
-  useRef,
+  useRef as useRef2,
   useState as useState2,
   useSyncExternalStore
 } from "react";
 import { AppState, findNodeHandle, View as View2 } from "react-native";
 
+// src/native-annotation-clusters.ts
+import {
+  createTileflowAnnotationClusterIndex
+} from "@tileflow/interactions";
+import { withTileflowClusterLabelFont } from "@tileflow/interactions";
+function createNativeAnnotationClusters(annotations, options) {
+  return createTileflowAnnotationClusterIndex(annotations, options);
+}
+
 // src/native-interaction-input.ts
 import {
   tileflowInteractionJsonValueSchema,
@@ -36,6 +45,7 @@ var messages = {
   DUPLICATE_ANNOTATION_ID: "Annotation IDs must be unique.",
   INVALID_FIELD: "An interaction field is invalid.",
   INVALID_ANNOTATION: "An annotation is invalid.",
+  INVALID_DATA_LAYER: "A data source or overlay is invalid.",
   INVALID_DOCUMENT: "The interaction document is invalid.",
   LIMIT_EXCEEDED: "The portable interaction limit was exceeded.",
   MISSING_VIEW: "The interaction view is unavailable.",
@@ -828,8 +838,8 @@ function item(value, index) {
   return descriptor.value;
 }
 function array2(value, maximum2) {
-  const count = length(value, maximum2);
-  return Array.from({ length: count }, (_, index) => item(value, index));
+  const count2 = length(value, maximum2);
+  return Array.from({ length: count2 }, (_, index) => item(value, index));
 }
 function name2(value) {
   return typeof value === "string" && value.length > 0 && value.length <= 256;
@@ -914,8 +924,8 @@ function createNativeInteractionQuery(style, current, query) {
             cancel();
             return;
           }
-          const count = length(hits);
-          const read = Math.min(count, nativePoiQueryLimit + 1 - features.length);
+          const count2 = length(hits);
+          const read = Math.min(count2, nativePoiQueryLimit + 1 - features.length);
           for (let index = 0; index < read; index++) {
             const feature = item(hits, index);
             if (nativeInteractionField(feature, "type") !== "Feature") throw new Error();
@@ -1501,10 +1511,245 @@ function NativeBoundaryFeatureState({
   );
 }
 
+// src/native-data-layers.tsx
+import {
+  GeoJSONSource,
+  Layer,
+  Marker
+} from "@maplibre/maplibre-react-native";
+import { useRef } from "react";
+import { Pressable, Text } from "react-native";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var bubble = Object.freeze({
+  alignItems: "center",
+  backgroundColor: "#2563eb",
+  borderColor: "#ffffff",
+  borderRadius: 22,
+  borderWidth: 2,
+  justifyContent: "center",
+  minHeight: 44,
+  minWidth: 44,
+  paddingHorizontal: 6
+});
+var count = Object.freeze({ color: "#ffffff", fontSize: 14, fontWeight: "600" });
+function NativeDataLayers({
+  camera,
+  expand,
+  onActivate,
+  plan
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    plan.sources.map((source) => /* @__PURE__ */ jsx2(
+      NativeDataSource,
+      {
+        camera,
+        expand,
+        onActivate,
+        source
+      },
+      source.id
+    )),
+    plan.layers.map((layer) => /* @__PURE__ */ jsx2(Layer, { ...layer }, layer.id))
+  ] });
+}
+function NativeDataSource({
+  camera,
+  expand,
+  onActivate,
+  source
+}) {
+  const ref = useRef(null);
+  const pressable = source.clusterLayers.length > 0 || source.pointLayers.length > 0;
+  return /* @__PURE__ */ jsx2(
+    GeoJSONSource,
+    {
+      ...source.definition,
+      id: source.id,
+      ref,
+      data: source.data,
+      onPress: pressable ? (event) => {
+        const feature = event.nativeEvent.features[0];
+        const coordinate2 = pointCoordinate(feature);
+        if (!feature || !coordinate2) return;
+        const properties2 = jsonProperties(feature.properties);
+        const clusterId = properties2.cluster_id;
+        if (typeof clusterId !== "number") {
+          const layerId = source.pointLayers[0];
+          if (!layerId) return;
+          onActivate({
+            coordinate: coordinate2,
+            feature: { ...feature.id === void 0 ? {} : { id: feature.id }, properties: properties2 },
+            kind: "style-feature",
+            layerId
+          });
+          return;
+        }
+        onActivate({
+          clusterId,
+          coordinate: coordinate2,
+          kind: "cluster",
+          pointCount: typeof properties2.point_count === "number" ? properties2.point_count : 0,
+          properties: properties2,
+          source: source.id
+        });
+        if (!expand || !source.expandOnClick) return;
+        ref.current?.getClusterExpansionZoom(clusterId).then(
+          (zoom) => camera.current?.easeTo({
+            center: [coordinate2[0], coordinate2[1]],
+            duration: 400,
+            zoom
+          }),
+          () => void 0
+        );
+      } : void 0,
+      children: source.layers.map((layer) => /* @__PURE__ */ jsx2(Layer, { ...layer }, layer.id))
+    }
+  );
+}
+function NativeClusterMarker({
+  cluster,
+  label,
+  onPress
+}) {
+  const press = (event) => {
+    event?.stopPropagation();
+    onPress();
+  };
+  return /* @__PURE__ */ jsx2(
+    Marker,
+    {
+      id: `tileflow-cluster-${cluster.clusterId}`,
+      lngLat: [cluster.coordinate[0], cluster.coordinate[1]],
+      accessible: true,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      onAccessibilityTap: onPress,
+      onPress: press,
+      children: /* @__PURE__ */ jsx2(Pressable, { accessible: false, onPress: press, style: bubble, children: /* @__PURE__ */ jsx2(Text, { style: count, children: cluster.label }) })
+    }
+  );
+}
+function pointCoordinate(feature) {
+  const coordinates = feature?.geometry?.coordinates;
+  return feature?.geometry?.type === "Point" && Array.isArray(coordinates) && typeof coordinates[0] === "number" && typeof coordinates[1] === "number" ? [coordinates[0], coordinates[1]] : void 0;
+}
+function jsonProperties(properties2) {
+  return Object.fromEntries(
+    Object.entries(properties2 ?? {}).filter(([, value]) => value !== void 0)
+  );
+}
+
+// src/native-data-layers-plan.ts
+var clusterMetadataKey = "tileflow:cluster";
+var placementMetadataKey = "tileflow:overlay-placement-manifest";
+function planNativeDataLayers(input) {
+  const styleSources = input.style.sources ?? {};
+  const styleLayers = input.style.layers ?? [];
+  const styleLayerIds = new Set(styleLayers.map(({ id }) => String(id)));
+  const anchors = input.style.metadata?.[placementMetadataKey]?.anchors;
+  const diagnostics = [];
+  const entries = /* @__PURE__ */ new Map();
+  const freeLayers = [];
+  const entry = (id) => entries.get(id);
+  const addRoles = (sourceId, layer) => {
+    const target = entry(sourceId);
+    const cluster = layer.metadata?.[clusterMetadataKey];
+    if (!target || !cluster) return;
+    if (cluster.role === "cluster") target.clusterLayers.push(String(layer.id));
+    if (cluster.role === "point") target.pointLayers.push(String(layer.id));
+    if (cluster.expandOnClick === false) target.expandOnClick = false;
+  };
+  for (const [id, source] of Object.entries(input.dataSources ?? {}).sort(compare)) {
+    const compiled2 = styleSources[id];
+    if (source.kind !== "geojson" || compiled2 && compiled2.type !== "geojson") {
+      diagnostics.push({ message: `Source "${id}" is not GeoJSON.`, path: `/dataSources/${id}` });
+      continue;
+    }
+    const { data, kind: _kind, ...definition } = source;
+    entries.set(id, {
+      adopted: compiled2 !== void 0,
+      clusterLayers: [],
+      data,
+      // A reused source keeps its compiled cluster options.
+      definition: compiled2 ? {} : definition,
+      expandOnClick: true,
+      layers: [],
+      pointLayers: []
+    });
+  }
+  for (const layer of styleLayers) {
+    const sourceId = typeof layer.source === "string" ? layer.source : void 0;
+    const cluster = layer.metadata?.[clusterMetadataKey];
+    if (!sourceId || !cluster || entries.has(sourceId)) continue;
+    const compiled2 = styleSources[sourceId];
+    if (compiled2?.type !== "geojson") continue;
+    entries.set(sourceId, {
+      adopted: true,
+      clusterLayers: [],
+      data: compiled2.data,
+      definition: {},
+      expandOnClick: true,
+      layers: [],
+      pointLayers: []
+    });
+  }
+  for (const layer of styleLayers) {
+    if (typeof layer.source === "string") addRoles(layer.source, layer);
+  }
+  for (const [id, overlay] of Object.entries(input.dataOverlays ?? {}).sort(compare)) {
+    const path = `/dataOverlays/${id}`;
+    if (overlay.kind !== "maplibre-overlay") {
+      diagnostics.push({ message: `Overlay "${id}" is not a Tileflow overlay.`, path });
+      continue;
+    }
+    const target = entry(overlay.source);
+    if (!target && !styleSources[overlay.source]) {
+      diagnostics.push({
+        message: `Overlay "${id}" references unknown source "${overlay.source}".`,
+        path: `${path}/source`
+      });
+      continue;
+    }
+    const anchor = anchors?.[overlay.placement];
+    const beforeId = typeof anchor === "string" && styleLayerIds.has(anchor) ? anchor : void 0;
+    for (const layer of overlay.layers) {
+      if (styleLayerIds.has(layer.id)) continue;
+      const prepared = withTileflowClusterLabelFont(layer, styleLayers);
+      if (!prepared) {
+        diagnostics.push({
+          message: `Layer "${layer.id}" needs font: the style has no label font.`,
+          path
+        });
+        continue;
+      }
+      const native = {
+        ...prepared,
+        ...beforeId ? { beforeId } : {},
+        id: layer.id,
+        source: overlay.source
+      };
+      if (target) {
+        target.layers.push(native);
+        addRoles(overlay.source, layer);
+      } else {
+        freeLayers.push(native);
+      }
+    }
+  }
+  return Object.freeze({
+    diagnostics: Object.freeze(diagnostics),
+    layers: Object.freeze(freeLayers),
+    sources: Object.freeze([...entries].map(([id, value]) => Object.freeze({ id, ...value })))
+  });
+}
+function compare([left], [right]) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+
 // src/native-marker.tsx
 import { Marker as NativeMarker } from "@maplibre/maplibre-react-native";
 import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2 } from "react";
-import { Pressable, processColor, View } from "react-native";
+import { Pressable as Pressable2, processColor, View } from "react-native";
 
 // src/native-marker-model.ts
 import { isValidElement } from "react";
@@ -1550,7 +1795,7 @@ function resolveNativeMarkerContent(context, render) {
 }
 
 // src/native-marker.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var button = Object.freeze({
   minWidth: 44,
   minHeight: 44,
@@ -1593,7 +1838,7 @@ function NativeAnnotationMarker({
     event?.stopPropagation();
     lifecycle.markerPress(sceneKey, annotation);
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     NativeMarker,
     {
       id: `tileflow-annotation-${model.key}`,
@@ -1604,8 +1849,8 @@ function NativeAnnotationMarker({
         lifecycle.beginTouch(sceneKey);
         press();
       },
-      children: /* @__PURE__ */ jsx2(
-        Pressable,
+      children: /* @__PURE__ */ jsx3(
+        Pressable2,
         {
           accessible: false,
           disabled: !enabled,
@@ -1615,14 +1860,14 @@ function NativeAnnotationMarker({
             event.stopPropagation();
           },
           onPress: press,
-          children: /* @__PURE__ */ jsx2(
+          children: /* @__PURE__ */ jsx3(
             View,
             {
               pointerEvents: "none",
               accessible: false,
               accessibilityElementsHidden: true,
               importantForAccessibility: "no-hide-descendants",
-              children: rendered.content ?? /* @__PURE__ */ jsx2(View, { style: [dot, { backgroundColor: color }] })
+              children: rendered.content ?? /* @__PURE__ */ jsx3(View, { style: [dot, { backgroundColor: color }] })
             }
           )
         }
@@ -2823,7 +3068,7 @@ function decodeUtf8(bytes) {
     if (index + remaining > bytes.length) {
       throw new HostedNativeSessionError("NATIVE_SESSION_RESPONSE_UTF8_INVALID");
     }
-    for (let count = 0; count < remaining; count += 1) {
+    for (let count2 = 0; count2 < remaining; count2 += 1) {
       const byte = bytes[index++];
       if ((byte & 192) !== 128) {
         throw new HostedNativeSessionError("NATIVE_SESSION_RESPONSE_UTF8_INVALID");
@@ -3890,27 +4135,27 @@ function decode(bytes) {
   for (let index = 0; index < bytes.length; ) {
     const first = bytes[index++];
     let code;
-    let count;
+    let count2;
     let minimum;
     if (first <= 127) {
       code = first;
-      count = 0;
+      count2 = 0;
       minimum = 0;
     } else if (first >= 194 && first <= 223) {
       code = first & 31;
-      count = 1;
+      count2 = 1;
       minimum = 128;
     } else if (first >= 224 && first <= 239) {
       code = first & 15;
-      count = 2;
+      count2 = 2;
       minimum = 2048;
     } else if (first >= 240 && first <= 244) {
       code = first & 7;
-      count = 3;
+      count2 = 3;
       minimum = 65536;
     } else throw new NativePreparationError();
-    if (index + count > bytes.length) throw new NativePreparationError();
-    for (let part = 0; part < count; part++) {
+    if (index + count2 > bytes.length) throw new NativePreparationError();
+    for (let part = 0; part < count2; part++) {
       const next = bytes[index++];
       if ((next & 192) !== 128) throw new NativePreparationError();
       code = code * 64 + (next & 63);
@@ -5594,7 +5839,7 @@ function fontMetadata(input, developmentOrigin) {
 }
 function validateFontFaces(faces, documentUrl, metadata, add, rewrites, policy, discriminate, developmentOrigin) {
   if (Object.keys(faces).length > nativePreparationLimits.fontFaces) throw invalid3();
-  let count = 0;
+  let count2 = 0;
   const matched = /* @__PURE__ */ new Set();
   for (const name3 of Object.keys(faces).sort()) {
     if (name3.length === 0 || name3.length > 256 || name3 !== name3.trim()) throw invalid3();
@@ -5602,7 +5847,7 @@ function validateFontFaces(faces, documentUrl, metadata, add, rewrites, policy,
     if (!Array.isArray(definitions) || definitions.length === 0) throw invalid3();
     const rewritten = [];
     for (const definition of definitions) {
-      if (++count > nativePreparationLimits.fontFaces || !record2(definition)) throw invalid3();
+      if (++count2 > nativePreparationLimits.fontFaces || !record2(definition)) throw invalid3();
       const keys = Object.keys(definition).sort();
       if (keys.length !== 4 || !["font-family", "font-style", "font-weight", "url"].every((key2) => keys.includes(key2)))
         throw invalid3();
@@ -7703,7 +7948,7 @@ function createNativeMapOwner() {
 }
 
 // src/map.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var fill = Object.freeze({ flex: 1 });
 function NativeScene({
   scene,
@@ -7713,17 +7958,18 @@ function NativeScene({
   interactions,
   interactionEnabled,
   renderMarker,
-  boundaryFeatureState
+  boundaryFeatureState,
+  data
 }) {
-  const view = useRef(null);
-  const camera = useRef(null);
-  const nativeMap = useRef(null);
-  const committedHost = useRef(void 0);
-  const tag = useRef(null);
-  const laidOut = useRef(false);
-  const styleLoaded = useRef(false);
-  const attachRequested = useRef(false);
-  const latestStyle = useRef(scene.style);
+  const view = useRef2(null);
+  const camera = useRef2(null);
+  const nativeMap = useRef2(null);
+  const committedHost = useRef2(void 0);
+  const tag = useRef2(null);
+  const laidOut = useRef2(false);
+  const styleLoaded = useRef2(false);
+  const attachRequested = useRef2(false);
+  const latestStyle = useRef2(scene.style);
   latestStyle.current = scene.style;
   const [loadedStyle, setLoadedStyle] = useState2(void 0);
   const host = useMemo3(() => {
@@ -7778,7 +8024,42 @@ function NativeScene({
   };
   const annotations = interactions?.annotations;
   const byId = new globalThis.Map(annotations?.map((annotation) => [annotation.id, annotation]));
-  return /* @__PURE__ */ jsx3(
+  const [zoomLevel, setZoomLevel] = useState2(() => Math.floor(scene.initialView.zoom));
+  const followZoom = (event) => {
+    if (Number.isFinite(event.nativeEvent.zoom)) setZoomLevel(Math.floor(event.nativeEvent.zoom));
+  };
+  const clusterSettings = data.annotationClusters;
+  const clusterKey = JSON.stringify(clusterSettings ?? null);
+  const clusterIndex = useMemo3(
+    () => clusterSettings && annotations ? createNativeAnnotationClusters(annotations, clusterSettings) : void 0,
+    // Options written inline are new objects each render; only a real change rebuilds groups.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [annotations, clusterKey]
+  );
+  const clusterView = clusterIndex?.at(zoomLevel);
+  const styleReady = loadedStyle === scene.style;
+  const dataPlan = useMemo3(
+    () => planNativeDataLayers({
+      dataOverlays: data.dataOverlays,
+      dataSources: data.dataSources,
+      style: scene.style
+    }),
+    [data.dataOverlays, data.dataSources, scene.style]
+  );
+  const reportedPlan = useRef2(void 0);
+  useLayoutEffect3(() => {
+    if (reportedPlan.current === dataPlan) return;
+    reportedPlan.current = dataPlan;
+    for (const { message, path } of dataPlan.diagnostics)
+      data.onDiagnostic({ code: "INVALID_DATA_LAYER", level: "error", message, path });
+  }, [data, dataPlan]);
+  const activate = (target) => data.onActivate({
+    coordinate: target.coordinate,
+    inputModality: "touch",
+    target,
+    type: "target:activate"
+  });
+  return /* @__PURE__ */ jsx4(
     View2,
     {
       ref: bind2,
@@ -7795,13 +8076,15 @@ function NativeScene({
         lifecycle.layoutChanged(scene.key);
         attach();
       },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs2(
         NativeMap,
         {
           ...mapOptions,
           ref: nativeMap,
           style: fill,
           mapStyle,
+          onRegionIsChanging: followZoom,
+          onRegionDidChange: followZoom,
           onPress: (event) => {
             if (!host.current()) return;
             try {
@@ -7820,7 +8103,7 @@ function NativeScene({
             attach();
           },
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               NativeCamera,
               {
                 ref: camera,
@@ -7830,21 +8113,57 @@ function NativeScene({
               },
               "tileflow-camera"
             ),
-            /* @__PURE__ */ jsx3(Fragment, { children: interactions?.plan.order.map((id) => {
-              const annotation = byId.get(id);
-              return annotation ? /* @__PURE__ */ jsx3(
-                NativeAnnotationMarker,
+            /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              interactions?.plan.order.map((id) => {
+                const annotation = byId.get(id);
+                return annotation && !clusterView?.hiddenAnnotationIds.has(id) ? /* @__PURE__ */ jsx4(
+                  NativeAnnotationMarker,
+                  {
+                    annotation,
+                    enabled: interactionEnabled,
+                    sceneKey: scene.key,
+                    lifecycle,
+                    renderMarker
+                  },
+                  annotation.id
+                ) : null;
+              }),
+              clusterView?.clusters.map((cluster) => /* @__PURE__ */ jsx4(
+                NativeClusterMarker,
                 {
-                  annotation,
-                  enabled: interactionEnabled,
-                  sceneKey: scene.key,
-                  lifecycle,
-                  renderMarker
+                  cluster,
+                  label: clusterSettings?.formatAriaLabel?.(cluster.pointCount) ?? `${cluster.pointCount} places`,
+                  onPress: () => {
+                    activate({
+                      annotationIds: cluster.annotationIds,
+                      clusterId: cluster.clusterId,
+                      coordinate: cluster.coordinate,
+                      kind: "cluster",
+                      pointCount: cluster.pointCount,
+                      properties: { point_count: cluster.pointCount }
+                    });
+                    if (data.expand && clusterSettings?.expandOnClick !== false)
+                      camera.current?.easeTo({
+                        center: [cluster.coordinate[0], cluster.coordinate[1]],
+                        duration: 400,
+                        zoom: cluster.expansionZoom
+                      });
+                  }
                 },
-                annotation.id
-              ) : null;
-            }) }, "tileflow-annotations"),
-            boundaryFeatureState ? /* @__PURE__ */ jsx3(
+                `cluster-${cluster.clusterId}`
+              ))
+            ] }, "tileflow-annotations"),
+            styleReady ? /* @__PURE__ */ jsx4(
+              NativeDataLayers,
+              {
+                camera,
+                expand: data.expand,
+                onActivate: activate,
+                plan: dataPlan
+              },
+              "tileflow-data-layers"
+            ) : null,
+            boundaryFeatureState ? /* @__PURE__ */ jsx4(
               NativeBoundaryFeatureState,
               {
                 input: boundaryFeatureState,
@@ -7869,6 +8188,22 @@ function Map2(props) {
     lifecycle.getSnapshot,
     lifecycle.getSnapshot
   );
+  const latestProps = useRef2(props);
+  latestProps.current = props;
+  const [callbacks] = useState2(() => ({
+    onActivate: (event) => latestProps.current.onInteractionEvent?.({ ...event, type: "target:activate" }),
+    onDiagnostic: (diagnostic) => latestProps.current.onInteractionDiagnostic?.(diagnostic)
+  }));
+  const data = useMemo3(
+    () => ({
+      annotationClusters: props.annotationClusters,
+      dataOverlays: props.dataOverlays,
+      dataSources: props.dataSources,
+      expand: props.view === void 0,
+      ...callbacks
+    }),
+    [callbacks, props.annotationClusters, props.dataOverlays, props.dataSources, props.view]
+  );
   useImperativeHandle(
     props.ref,
     () => Object.freeze({ getSourceState: lifecycle.getSourceState, retry: lifecycle.retry }),
@@ -7889,7 +8224,7 @@ function Map2(props) {
   useLayoutEffect3(() => {
     lifecycle.update(props);
   });
-  return /* @__PURE__ */ jsx3(View2, { style: props.style, testID: props.testID, children: snapshot.renderer ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(View2, { style: props.style, testID: props.testID, children: snapshot.renderer ? /* @__PURE__ */ jsx4(
     NativeScene,
     {
       scene: snapshot.renderer,
@@ -7899,6 +8234,7 @@ function Map2(props) {
       interactionEnabled: snapshot.interactionEnabled === true,
       renderMarker: props.renderMarker,
       boundaryFeatureState: props.boundaryFeatureState,
+      data,
       children: props.children
     },
     snapshot.renderer.key

package/dist/internal/camera.d.ts

@@ -1,4 +1,4 @@
-import { M as MapView, a as MapViewChangeEvent, b as MapInitialViewInputs, c as MapCameraProps } from '../contract-BWT1jxqg.js';
+import { M as MapView, a as MapViewChangeEvent, b as MapInitialViewInputs, c as MapCameraProps } from '../contract-BWCbfMOx.js';
 import '@maplibre/maplibre-react-native';
 import 'react';
 import 'react-native';

package/dist/internal/initial-view.d.ts

@@ -1,4 +1,4 @@
-import { b as MapInitialViewInputs, M as MapView } from '../contract-BWT1jxqg.js';
+import { b as MapInitialViewInputs, M as MapView } from '../contract-BWCbfMOx.js';
 import '@maplibre/maplibre-react-native';
 import 'react';
 import 'react-native';

package/dist/internal/interactions.js

@@ -9,6 +9,7 @@ var messages = {
   DUPLICATE_ANNOTATION_ID: "Annotation IDs must be unique.",
   INVALID_FIELD: "An interaction field is invalid.",
   INVALID_ANNOTATION: "An annotation is invalid.",
+  INVALID_DATA_LAYER: "A data source or overlay is invalid.",
   INVALID_DOCUMENT: "The interaction document is invalid.",
   LIMIT_EXCEEDED: "The portable interaction limit was exceeded.",
   MISSING_VIEW: "The interaction view is unavailable.",

package/dist/internal/native-appearance.d.ts

@@ -1,4 +1,4 @@
-import { B as MapThemeSelection, g as MapColorScheme } from '../contract-BWT1jxqg.js';
+import { B as MapThemeSelection, g as MapColorScheme } from '../contract-BWCbfMOx.js';
 import '@maplibre/maplibre-react-native';
 import 'react';
 import 'react-native';

package/dist/internal/source-state.d.ts

@@ -1,5 +1,5 @@
 import { TileflowNativeSourceState } from '@tileflow/core/native';
-import { x as MapSourceState } from '../contract-BWT1jxqg.js';
+import { x as MapSourceState } from '../contract-BWCbfMOx.js';
 import '@maplibre/maplibre-react-native';
 import 'react';
 import 'react-native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/react-native",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "license": "Apache-2.0",
   "description": "Tileflow maps, camera control and semantic interactions for React Native.",
   "type": "module",
@@ -35,8 +35,8 @@
     }
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.43 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.7 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.48 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.8 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "@maplibre/maplibre-react-native": "11.5.0",