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

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 }] })
             }
           )
         }
@@ -1965,6 +2210,8 @@ var RETRY_LIMIT_MS = 6e4;
 var RETRY_AFTER_LIMIT_MS = 15 * 60 * 1e3;
 var RETRY_AFTER_SECONDS = /^\d{1,10}$/u;
 var QUOTA_CODES = /* @__PURE__ */ new Set(["COMMERCIAL_MAP_LIMIT_REACHED", "COMMERCIAL_SPENDING_LIMIT_REACHED"]);
+var SERVICE_CODE = /^[A-Z][A-Z0-9_]{0,63}$/u;
+var SERVICE_CODE_BODY_LIMIT = 4096;
 var MOBILE_CREDENTIAL = /^tf_public_[0-9a-f]{48}$/u;
 var MAP_ID = /^map_[A-Za-z0-9_-]{16}$/u;
 var CREDENTIAL_ID = /^key_[A-Za-z0-9_-]{8,80}$/u;
@@ -2008,7 +2255,8 @@ var TERMINAL_CODES = /* @__PURE__ */ new Set([
   "NATIVE_SESSION_CREDENTIAL_REJECTED",
   "NATIVE_SESSION_MAP_MISMATCH",
   "NATIVE_SESSION_MAP_NOT_FOUND",
-  "NATIVE_SESSION_QUOTA_EXCEEDED"
+  "NATIVE_SESSION_QUOTA_EXCEEDED",
+  "NATIVE_SESSION_REJECTED"
 ]);
 var ERROR_MESSAGES = {
   NATIVE_SESSION_INPUT_INVALID: "Native session configuration is invalid.",
@@ -2027,13 +2275,16 @@ var ERROR_MESSAGES = {
   NATIVE_SESSION_DISPOSED: "Native session controller is disposed."
 };
 var HostedNativeSessionError = class extends Error {
-  constructor(code) {
+  constructor(code, reason) {
     super(ERROR_MESSAGES[code]);
     __publicField(this, "code");
     __publicField(this, "kind");
     this.name = "HostedNativeSessionError";
     this.code = code;
     this.kind = errorKind(code);
+    if (code === "NATIVE_SESSION_REJECTED" && typeof reason === "string" && SERVICE_CODE.test(reason)) {
+      this.reason = reason;
+    }
   }
 };
 function createHostedNativeSessionController(input) {
@@ -2162,10 +2413,10 @@ function createHostedNativeSessionController(input) {
     if (retryAt === null || at >= retryAt) failures = Math.min(failures + 1, 16);
     const backoff = Math.min(RETRY_INITIAL_MS * 2 ** (failures - 1), RETRY_LIMIT_MS);
     retryAt = Math.max(retryAt ?? at, at + Math.max(backoff, retryAfterDelays.get(error) ?? 0));
-    retryError = Object.freeze({ code: error.code, kind: error.kind });
+    retryError = safeError(error);
   }
   function rotateIfRequired(at) {
-    if (terminal) throw new HostedNativeSessionError(terminal.code);
+    if (terminal) throw errorFrom(terminal);
     if (!activeSession || binding.kind !== "hosted") return;
     if (at - activeSession.startedAt < ROTATION_AGE_MS && activeSession.requestCount < ROTATION_REQUEST_LIMIT) {
       return;
@@ -2199,7 +2450,7 @@ function createHostedNativeSessionController(input) {
     return current;
   }
   async function ensureAuthority(session, at) {
-    if (terminal) throw new HostedNativeSessionError(terminal.code);
+    if (terminal) throw errorFrom(terminal);
     if (session.authority && session.authority.clockEpoch === clock.epoch && session.authority.validUntil - at > REFRESH_MARGIN_MS) {
       return { authority: session.authority, session };
     }
@@ -2211,7 +2462,7 @@ function createHostedNativeSessionController(input) {
       if (session.authority && session.authority.clockEpoch === clock.epoch && session.authority.validUntil > at) {
         return { authority: session.authority, session };
       }
-      throw new HostedNativeSessionError(retryError.code);
+      throw errorFrom(retryError);
     }
     const operationBinding = binding;
     const abort = new SessionAbortController();
@@ -2238,14 +2489,16 @@ function createHostedNativeSessionController(input) {
           const normalized = abort.signal.aborted ? abort.error() : normalizeError(error);
           const target = latestSession(session);
           if (normalized.kind === "terminal" && binding === operationBinding && !terminal) {
-            const failure3 = Object.freeze({ code: normalized.code, kind: normalized.kind });
+            const failure3 = safeError(normalized);
             terminal = failure3;
             const rejectedSession = activeSession;
             if (rejectedSession) {
               rejectedSession.authority = null;
               rejectedSession.error = failure3;
             }
-            for (const pending of [...operations]) pending.abort(failure3.code);
+            for (const pending of [...operations]) {
+              pending.abort(failure3.code, failure3.reason);
+            }
             if (binding === operationBinding && rejectedSession) {
               publishSession(rejectedSession, "error", failure3);
             }
@@ -2254,7 +2507,7 @@ function createHostedNativeSessionController(input) {
             delayRetry(normalized);
           }
           if (normalized.code !== "NATIVE_SESSION_REPLACED" && normalized.code !== "NATIVE_SESSION_DISPOSED") {
-            target.error = Object.freeze({ code: normalized.code, kind: normalized.kind });
+            target.error = safeError(normalized);
             publishSession(target, "error", target.error);
           }
           throw normalized;
@@ -2280,7 +2533,7 @@ function createHostedNativeSessionController(input) {
     if (abort.signal.aborted) throw abort.error();
     const expectedSurfaceId = session.authority?.public.surfaceId ?? session.requestedSurfaceId;
     const response = await fetchResponse(hostedBinding, session, expectedSurfaceId, abort);
-    const source = await readBoundedResponse(response, abort);
+    const { source, size } = await readBoundedResponse(response, abort);
     let body;
     try {
       body = source.length ? JSON.parse(source) : null;
@@ -2290,14 +2543,15 @@ function createHostedNativeSessionController(input) {
       }
       body = null;
     }
-    if (response.status === 409 && allowRestart && isExactRestart(body, session.sessionId)) {
+    if (response.status === 409 && isExactRestart(body, session.sessionId)) {
+      if (!allowRestart) throw new HostedNativeSessionError("NATIVE_SESSION_UNAVAILABLE");
       assertCurrentSession(session, hostedBinding);
       const replacement = redirectSession(session, readClock());
       if (abort.signal.aborted) throw abort.error();
       return bootstrap(replacement, hostedBinding, abort, false, false);
     }
     if (response.status !== 201) {
-      const failure3 = statusError(response.status, body);
+      const failure3 = statusError(response.status, body, size);
       const delay = retryAfterMs(response.headers, now);
       if (delay !== null) retryAfterDelays.set(failure3, delay);
       throw failure3;
@@ -2435,7 +2689,7 @@ function createHostedNativeSessionController(input) {
       if (bindingGeneration !== expectedGeneration) {
         throw new HostedNativeSessionError("NATIVE_SESSION_REPLACED");
       }
-      if (terminal) throw new HostedNativeSessionError(terminal.code);
+      if (terminal) throw errorFrom(terminal);
       checkedAt = readClock();
       if (resolved.authority.clockEpoch === clock.epoch && resolved.authority.validUntil > checkedAt) {
         admittedAuthorities.set(resolved.authority.public, resolved.authority);
@@ -2510,7 +2764,7 @@ function createHostedNativeSessionController(input) {
       if (disposed) throw new HostedNativeSessionError("NATIVE_SESSION_DISPOSED");
       lifecycle = "foreground";
       if (terminal) {
-        const error = new HostedNativeSessionError(terminal.code);
+        const error = errorFrom(terminal);
         publish(currentSnapshot());
         throw error;
       }
@@ -2783,7 +3037,7 @@ async function readBoundedResponse(response, abort) {
     bytes.set(chunk, offset);
     offset += chunk.byteLength;
   }
-  return decodeUtf8(bytes);
+  return { source: decodeUtf8(bytes), size };
 }
 function decodeUtf8(bytes) {
   let result = "";
@@ -2814,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");
@@ -2831,7 +3085,7 @@ function decodeUtf8(bytes) {
 function hasNoStore(value) {
   return typeof value === "string" && value.split(",").some((part) => part.trim().toLowerCase() === "no-store");
 }
-function statusError(status, body) {
+function statusError(status, body, size) {
   if (status === 401) return new HostedNativeSessionError("NATIVE_SESSION_CREDENTIAL_REJECTED");
   if (status === 403) return new HostedNativeSessionError("NATIVE_SESSION_MAP_MISMATCH");
   if (status === 404) return new HostedNativeSessionError("NATIVE_SESSION_MAP_NOT_FOUND");
@@ -2843,7 +3097,21 @@ function statusError(status, body) {
   if (status === 408 || status >= 500 && status <= 599) {
     return new HostedNativeSessionError("NATIVE_SESSION_UNAVAILABLE");
   }
-  return new HostedNativeSessionError("NATIVE_SESSION_REJECTED");
+  if (status >= 400 && status <= 499) {
+    return new HostedNativeSessionError(
+      "NATIVE_SESSION_REJECTED",
+      size <= SERVICE_CODE_BODY_LIMIT && isRecord(body) && typeof body.code === "string" ? body.code : void 0
+    );
+  }
+  return new HostedNativeSessionError("NATIVE_SESSION_RESPONSE_INVALID");
+}
+function safeError(error) {
+  return Object.freeze(
+    error.reason === void 0 ? { code: error.code, kind: error.kind } : { code: error.code, kind: error.kind, reason: error.reason }
+  );
+}
+function errorFrom(error) {
+  return new HostedNativeSessionError(error.code, error.reason);
 }
 var retryAfterDelays = /* @__PURE__ */ new WeakMap();
 function retryAfterMs(headers, now) {
@@ -2893,12 +3161,13 @@ async function cancelResponse(response) {
   } catch {
   }
 }
-var _aborted, _code, _listeners;
+var _aborted, _code, _reason, _listeners;
 var SessionAbortController = class {
   constructor() {
     __publicField(this, "signal");
     __privateAdd(this, _aborted, false);
     __privateAdd(this, _code, "NATIVE_SESSION_REPLACED");
+    __privateAdd(this, _reason);
     __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
     const isAborted = () => __privateGet(this, _aborted);
     this.signal = Object.freeze({
@@ -2913,9 +3182,10 @@ var SessionAbortController = class {
       }
     });
   }
-  abort(code) {
+  abort(code, reason) {
     if (__privateGet(this, _aborted)) return;
     __privateSet(this, _code, code);
+    __privateSet(this, _reason, reason);
     __privateSet(this, _aborted, true);
     for (const listener of [...__privateGet(this, _listeners)]) {
       try {
@@ -2926,11 +3196,12 @@ var SessionAbortController = class {
     __privateGet(this, _listeners).clear();
   }
   error() {
-    return new HostedNativeSessionError(__privateGet(this, _code));
+    return new HostedNativeSessionError(__privateGet(this, _code), __privateGet(this, _reason));
   }
 };
 _aborted = new WeakMap();
 _code = new WeakMap();
+_reason = new WeakMap();
 _listeners = new WeakMap();
 function raceWithAbort(promise, controller) {
   if (controller.signal.aborted) return Promise.reject(controller.error());
@@ -3238,7 +3509,7 @@ function createNativeAdmissionOwner(options) {
         reported = code;
         if (state.status !== "error") return;
         try {
-          input.onSessionError?.(Object.freeze({ code: state.error.code, kind: state.error.kind }));
+          input.onSessionError?.(Object.freeze({ ...state.error }));
         } catch {
         }
       });
@@ -3864,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);
@@ -5568,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();
@@ -5576,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();
@@ -5824,8 +6095,10 @@ var sessionErrorCodes = /* @__PURE__ */ new Set([
   "NATIVE_SESSION_MAP_MISMATCH",
   "NATIVE_SESSION_MAP_NOT_FOUND",
   "NATIVE_SESSION_QUOTA_EXCEEDED",
+  "NATIVE_SESSION_REJECTED",
   "NATIVE_SESSION_INPUT_INVALID"
 ]);
+var SERVICE_CODE2 = /^[A-Z][A-Z0-9_]{0,63}$/u;
 function themeSource(source, name3) {
   const theme = Object.hasOwn(source.map.themes, name3) ? source.map.themes[name3] : void 0;
   if (!theme) throw new NativePreparationError();
@@ -6085,9 +6358,14 @@ function createMountedMapOwner(ports2) {
     reopenings += 1;
     restart(epoch);
   }
-  function sessionError(epoch, code) {
+  function sessionError(epoch, code, reason) {
     if (disposed || current !== epoch || !epoch.live || !sessionErrorCodes.has(code)) return;
-    const error = Object.freeze({ code, kind: "terminal" });
+    const detail = code === "NATIVE_SESSION_REJECTED" && typeof reason === "string" && SERVICE_CODE2.test(reason) ? { reason } : {};
+    const error = Object.freeze({
+      code,
+      kind: "terminal",
+      ...detail
+    });
     emit({ type: "session-error", generation: generation(), error });
   }
   function createEpoch(developmentOrigin) {
@@ -6125,7 +6403,7 @@ function createMountedMapOwner(ports2) {
           onRetired: () => void Promise.resolve().then(() => reopen(epoch)),
           onSessionError: (error) => {
             if (error.kind !== "terminal") return;
-            void Promise.resolve().then(() => sessionError(epoch, error.code));
+            void Promise.resolve().then(() => sessionError(epoch, error.code, error.reason));
           }
         });
         const map = await epoch.lease.ready;
@@ -7670,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,
@@ -7680,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(() => {
@@ -7745,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,
@@ -7762,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 {
@@ -7787,7 +8103,7 @@ function NativeScene({
             attach();
           },
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               NativeCamera,
               {
                 ref: camera,
@@ -7797,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,
@@ -7836,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 }),
@@ -7856,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,
@@ -7866,6 +8234,7 @@ function Map2(props) {
       interactionEnabled: snapshot.interactionEnabled === true,
       renderMarker: props.renderMarker,
       boundaryFeatureState: props.boundaryFeatureState,
+      data,
       children: props.children
     },
     snapshot.renderer.key