@tileflow/react 0.1.0-alpha.0 → 0.1.0-alpha.10

package/README.md

@@ -2,12 +2,57 @@
 
 React components for rendering Tileflow maps with MapLibre.
 
+Install `maplibre-gl` alongside the package and import its CSS once in your app.
+
 ```tsx
-import { Map } from "@tileflow/react";
+import {Map} from '@tileflow/react';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 export function App() {
-  return <Map map="madrid" center={[-3.7038, 40.4168]} zoom={12} />;
+  return (
+    <Map
+      map="madrid"
+      center={[-3.7038, 40.4168]}
+      zoom={12}
+      mapOptions={{
+        cooperativeGestures: true,
+        maxZoom: 18,
+      }}
+    />
+  );
 }
 ```
 
+`mapOptions` accepts native MapLibre options except `container` and `style`, which
+Tileflow resolves from the map name, manifest, or explicit style props. Direct
+Tileflow props such as `center`, `zoom`, and `interactive` take priority when
+provided.
+
+To reuse one published map across multiple repos, point every app at the same
+manifest:
+
+```tsx
+<Map map="madrid" manifestUrl="https://cdn.example.com/tileflow/manifest.json" />
+```
+
+Or bypass the manifest and load a hosted style directly:
+
+```tsx
+<Map styleUrl="https://api.tileflow.dev/v1/styles/acme/madrid.json" />
+```
+
+For simple hosted static images, use image mode:
+
+```tsx
+<Map map="madrid" mode="image" center={[-3.7038, 40.4168]} zoom={12} />
+```
+
+When `mode="image"` does not include an explicit `imageUrl`, local development
+hosts render the interactive map while `preferLocalDev` is enabled. Production
+hosts render the deployed static image. Set `preferLocalDev={false}` to preview
+the production image behavior locally.
+
+For full static scenes with bounds, overlays, and server-side precache, use
+`StaticMap` from `@tileflow/react/static` or helpers from `@tileflow/static`.
+
 Docs: https://tileflow.dev/docs

package/dist/index.d.ts

@@ -1,47 +1,34 @@
 import * as react from 'react';
 import { CSSProperties, ImgHTMLAttributes } from 'react';
-import { TileflowConfig, MapLibreStyle } from '@tileflow/core';
-import { Map as Map$1 } from 'maplibre-gl';
+import { MapOptions, Map as Map$1 } from 'maplibre-gl';
+import { TileflowConfig, MapLibreStyle, TileflowProjectThemes, TileflowMapMarker, TileflowAnalytics } from '@tileflow/core';
 
-type MapMarker = {
-    id: string;
-    coordinates: [number, number];
-    color?: string;
-    label?: string;
-};
-type TileflowAnalytics = {
-    apiUrl?: string;
-    endpoint?: string;
-    enabled?: boolean;
-    mapId?: string;
-    metadata?: Record<string, unknown>;
-    projectId?: string;
-    sdkVersion?: string;
-    source?: string;
-    styleId?: string;
-};
+type MapMarker = TileflowMapMarker;
+type TileflowMapOptions = Omit<MapOptions, 'container' | 'style'>;
 type MapProps = {
     map?: string;
-    mode?: "interactive" | "image";
+    mode?: 'interactive' | 'image';
     config?: TileflowConfig;
     style?: MapLibreStyle;
     styleUrl?: string;
     imageUrl?: string;
     styleBaseUrl?: string;
     tileBaseUrl?: string;
+    themes?: TileflowProjectThemes;
     manifestUrl?: string;
     preferLocalDev?: boolean;
     alt?: string;
     center?: [number, number];
     zoom?: number;
     className?: string;
-    height?: CSSProperties["height"];
-    imageLoading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    height?: CSSProperties['height'];
+    imageLoading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
     interactive?: boolean;
+    mapOptions?: TileflowMapOptions;
     markers?: MapMarker[];
     analytics?: TileflowAnalytics;
     onLoad?: (map: Map$1) => void;
 };
-declare function Map({ map: mapName, mode, config, style, styleUrl, imageUrl, styleBaseUrl, tileBaseUrl, manifestUrl, preferLocalDev, alt, center, zoom, className, height, imageLoading, interactive, markers, analytics, onLoad, }: MapProps): react.JSX.Element;
+declare function Map({ map: mapName, mode, config, style, styleUrl, imageUrl, styleBaseUrl, tileBaseUrl, themes, manifestUrl, preferLocalDev, alt, center, zoom, className, height, imageLoading, interactive, mapOptions, markers, analytics, onLoad, }: MapProps): react.JSX.Element;
 
-export { Map, type MapMarker, type MapProps };
+export { Map, type MapMarker, type MapProps, type TileflowMapOptions };

package/dist/index.js

@@ -1,21 +1,30 @@
+'use client';
+
 // src/map.tsx
-import {
-  createStyle
-} from "@tileflow/core";
-import maplibregl from "maplibre-gl";
 import {
   useEffect,
   useMemo,
   useRef,
   useState
 } from "react";
+import maplibregl from "maplibre-gl";
+import {
+  createTileflowSessionId,
+  defaultTileflowManifestUrl,
+  loadTileflowManifest,
+  mergeTileflowAnalytics,
+  normalizeTileflowStaticImageSize,
+  resolveTileflowAnalyticsRequestUrl,
+  resolveTileflowManifestMap,
+  resolveTileflowMapMode,
+  resolveTileflowRuntimeStyle,
+  resolveTileflowStaticImageUrl,
+  shouldLoadTileflowManifest,
+  startTileflowSession
+} from "@tileflow/core";
 import { jsx } from "react/jsx-runtime";
 var defaultCenter = [0, 20];
 var defaultMarkers = [];
-var defaultManifestUrl = "/tileflow/manifest.json";
-var maxStaticImageDimension = 1280;
-var maxStaticImagePixels = 1280 * 1280;
-var manifestCache = new globalThis.Map();
 function Map({
   map: mapName,
   mode = "interactive",
@@ -25,63 +34,63 @@ function Map({
   imageUrl,
   styleBaseUrl,
   tileBaseUrl,
-  manifestUrl = defaultManifestUrl,
+  themes,
+  manifestUrl = defaultTileflowManifestUrl,
   preferLocalDev = true,
   alt = "",
-  center = defaultCenter,
-  zoom = 2,
+  center,
+  zoom,
   className,
   height = 420,
   imageLoading = "eager",
-  interactive = true,
+  interactive,
+  mapOptions,
   markers = defaultMarkers,
   analytics,
   onLoad
 }) {
   const containerRef = useRef(null);
   const mapRef = useRef(null);
-  const sessionId = useMemo(() => createSessionId(), []);
-  const [manifestMap, setManifestMap] = useState(
-    null
+  const markerInstancesRef = useRef([]);
+  const stableMapOptions = useStableMapOptions(mapOptions);
+  const resolvedCenter = useStableMapOptionValue(
+    center ?? stableMapOptions?.center ?? defaultCenter
   );
+  const resolvedZoom = zoom ?? stableMapOptions?.zoom ?? 2;
+  const resolvedInteractive = interactive ?? stableMapOptions?.interactive ?? true;
+  const staticImageCenter = center ?? defaultCenter;
+  const centerRef = useRef(resolvedCenter);
+  const zoomRef = useRef(resolvedZoom);
+  const onLoadRef = useRef(onLoad);
+  const mapNameRef = useRef(mapName);
+  const resolvedAnalyticsRef = useRef(void 0);
+  const sessionStartsRef = useRef(/* @__PURE__ */ new Set());
+  const sessionId = useMemo(() => createTileflowSessionId(), []);
+  const [manifestMap, setManifestMap] = useState(null);
   const [imageSize, setImageSize] = useState(null);
-  const isImageMode = mode === "image";
-  const useExplicitStyleBaseUrl = useMemo(
-    () => Boolean(
-      !isImageMode && mapName && !style && !styleUrl && !config && styleBaseUrl
-    ),
-    [config, isImageMode, mapName, style, styleBaseUrl, styleUrl]
-  );
-  const useLocalDevFallback = useMemo(
-    () => Boolean(
-      !isImageMode && mapName && !style && !styleUrl && !config && !styleBaseUrl && preferLocalDev && isLocalDevHost()
-    ),
-    [
+  const resolvedMode = resolveTileflowMapMode({ imageUrl, mode, preferLocalDev });
+  const isImageMode = resolvedMode === "image";
+  useEffect(() => {
+    const shouldLoadManifest = shouldLoadTileflowManifest({
       config,
-      isImageMode,
-      mapName,
-      preferLocalDev,
+      imageMode: isImageMode,
+      imageUrl,
+      map: mapName,
       style,
       styleBaseUrl,
       styleUrl
-    ]
-  );
-  useEffect(() => {
-    const shouldLoadManifest = Boolean(
-      mapName && !config && (isImageMode && !imageUrl || !isImageMode && !style && !styleUrl && !useExplicitStyleBaseUrl)
-    );
+    });
     if (!shouldLoadManifest) {
       setManifestMap(null);
       return;
     }
     let cancelled = false;
-    loadManifest(manifestUrl).then((manifest) => {
+    setManifestMap(null);
+    loadTileflowManifest(manifestUrl).then((manifest) => {
       if (cancelled) {
         return;
       }
-      setManifestMap(
-        manifest ? resolveManifestMap(manifest, mapName) : null
-      );
+      setManifestMap(manifest && mapName ? resolveTileflowManifestMap(manifest, mapName) : null);
     }).catch((error) => {
       if (!cancelled) {
         console.error("Failed to load Tileflow manifest", error);
@@ -91,77 +100,71 @@ function Map({
     return () => {
       cancelled = true;
     };
-  }, [
-    config,
-    imageUrl,
-    isImageMode,
-    manifestUrl,
-    mapName,
-    style,
-    styleUrl,
-    useExplicitStyleBaseUrl
-  ]);
+  }, [config, imageUrl, isImageMode, manifestUrl, mapName, style, styleUrl, styleBaseUrl]);
   const runtimeStyle = useMemo(() => {
     if (isImageMode) {
       return null;
     }
-    if (style) {
-      return { style };
-    }
-    if (styleUrl) {
-      return {
-        analytics: inferAnalyticsFromStyleUrl(styleUrl),
-        style: styleUrl
-      };
-    }
-    if (mapName && useExplicitStyleBaseUrl) {
-      return { style: resolveStyleUrl(mapName, styleBaseUrl) };
-    }
-    if (mapName) {
-      if (manifestMap?.styleUrl) {
-        return {
-          analytics: {
-            apiUrl: manifestMap.apiUrl,
-            mapId: manifestMap.mapId,
-            styleId: manifestMap.styleId
-          },
-          style: manifestMap.styleUrl
-        };
-      }
-      if (useLocalDevFallback) {
-        return { style: resolveStyleUrl(mapName) };
-      }
-      return null;
-    }
-    return { style: createStyle(config, { tileBaseUrl }) };
+    return resolveTileflowRuntimeStyle({
+      config,
+      manifestMap,
+      map: mapName,
+      preferLocalDev,
+      style,
+      styleBaseUrl,
+      styleUrl,
+      themes,
+      tileBaseUrl
+    });
   }, [
     config,
     isImageMode,
     manifestMap,
     mapName,
+    preferLocalDev,
     style,
     styleBaseUrl,
     styleUrl,
-    tileBaseUrl,
-    useExplicitStyleBaseUrl,
-    useLocalDevFallback
+    themes,
+    tileBaseUrl
   ]);
   const resolvedAnalytics = useMemo(
-    () => mergeAnalytics(analytics, runtimeStyle?.analytics),
+    () => mergeTileflowAnalytics(analytics, runtimeStyle?.analytics),
     [analytics, runtimeStyle]
   );
+  useEffect(() => {
+    centerRef.current = resolvedCenter;
+    zoomRef.current = resolvedZoom;
+    mapRef.current?.jumpTo({
+      center: resolvedCenter,
+      zoom: resolvedZoom
+    });
+  }, [resolvedCenter, resolvedZoom]);
+  useEffect(() => {
+    onLoadRef.current = onLoad;
+  }, [onLoad]);
+  useEffect(() => {
+    mapNameRef.current = mapName;
+  }, [mapName]);
+  useEffect(() => {
+    resolvedAnalyticsRef.current = resolvedAnalytics;
+  }, [resolvedAnalytics]);
   const runtimeImageUrl = useMemo(
-    () => imageUrl ?? (isImageMode ? resolveStaticImageUrl({
-      center,
+    () => imageUrl ?? (isImageMode ? resolveTileflowStaticImageUrl({
+      center: staticImageCenter,
       imageSize,
       manifestMap,
-      zoom
+      zoom: resolvedZoom
     }) : void 0),
-    [center, imageSize, imageUrl, isImageMode, manifestMap, zoom]
+    [imageSize, imageUrl, isImageMode, manifestMap, resolvedZoom, staticImageCenter]
   );
   const transformRequest = useMemo(
-    () => createTransformRequest(resolvedAnalytics, sessionId),
-    [resolvedAnalytics, sessionId]
+    () => createTransformRequest(
+      () => resolvedAnalyticsRef.current,
+      sessionId,
+      stableMapOptions?.transformRequest
+    ),
+    [sessionId, stableMapOptions?.transformRequest]
   );
   useEffect(() => {
     if (!isImageMode || imageUrl || !containerRef.current) {
@@ -170,7 +173,7 @@ function Map({
     }
     const element = containerRef.current;
     const updateImageSize = () => {
-      const nextSize = normalizeStaticImageSize({
+      const nextSize = normalizeTileflowStaticImageSize({
         height: element.clientHeight,
         width: element.clientWidth
       });
@@ -190,56 +193,68 @@ function Map({
       return;
     }
     const map = new maplibregl.Map({
+      ...stableMapOptions,
       container: containerRef.current,
       style: runtimeStyle.style,
-      center,
-      zoom,
-      interactive,
-      attributionControl: { compact: true },
+      center: centerRef.current,
+      zoom: zoomRef.current,
+      interactive: resolvedInteractive,
+      attributionControl: stableMapOptions?.attributionControl ?? { compact: true },
       transformRequest
     });
     mapRef.current = map;
-    const controls = interactive ? new maplibregl.NavigationControl() : null;
+    const controls = resolvedInteractive ? new maplibregl.NavigationControl() : null;
     if (controls) {
       map.addControl(controls, "top-right");
     }
-    const markerInstances = markers.map((marker) => {
-      const element = document.createElement("div");
-      element.className = "tileflow-marker";
-      element.style.background = marker.color ?? "#C6A15B";
-      element.title = marker.label ?? marker.id;
-      return new maplibregl.Marker({ element }).setLngLat(marker.coordinates).addTo(map);
-    });
     const resizeObserver = new ResizeObserver(() => {
       map.resize();
     });
     resizeObserver.observe(containerRef.current);
     map.on("load", () => {
-      onLoad?.(map);
-      startSession(resolvedAnalytics, {
-        mapId: resolvedAnalytics?.mapId,
-        sessionId,
-        styleId: resolvedAnalytics?.styleId ?? (typeof runtimeStyle.style === "string" ? runtimeStyle.style : mapName)
-      });
+      const analyticsForLoad = resolvedAnalyticsRef.current;
+      const styleId = analyticsForLoad?.styleId ?? (typeof runtimeStyle.style === "string" ? runtimeStyle.style : mapNameRef.current);
+      onLoadRef.current?.(map);
+      if (analyticsForLoad?.mapId) {
+        const sessionKey = `${sessionId}:${analyticsForLoad.mapId}:${styleId ?? ""}`;
+        if (!sessionStartsRef.current.has(sessionKey)) {
+          sessionStartsRef.current.add(sessionKey);
+          startTileflowSession(analyticsForLoad, {
+            mapId: analyticsForLoad.mapId,
+            sessionId,
+            source: "react",
+            styleId
+          });
+        }
+      }
     });
     return () => {
       resizeObserver.disconnect();
-      markerInstances.forEach((marker) => marker.remove());
+      clearMarkers(markerInstancesRef.current);
+      markerInstancesRef.current = [];
       map.remove();
       mapRef.current = null;
     };
-  }, [
-    center,
-    interactive,
-    mapName,
-    markers,
-    onLoad,
-    resolvedAnalytics,
-    runtimeStyle,
-    sessionId,
-    transformRequest,
-    zoom
-  ]);
+  }, [resolvedInteractive, runtimeStyle, sessionId, stableMapOptions, transformRequest]);
+  useEffect(() => {
+    const map = mapRef.current;
+    clearMarkers(markerInstancesRef.current);
+    markerInstancesRef.current = [];
+    if (!map) {
+      return;
+    }
+    markerInstancesRef.current = markers.map((marker) => {
+      const markerInstance = new maplibregl.Marker({
+        color: marker.color ?? "#C6A15B"
+      }).setLngLat(marker.coordinates).addTo(map);
+      markerInstance.getElement().title = marker.label ?? marker.id;
+      return markerInstance;
+    });
+    return () => {
+      clearMarkers(markerInstancesRef.current);
+      markerInstancesRef.current = [];
+    };
+  }, [markers, runtimeStyle]);
   const frameStyle = {
     height,
     minHeight: 240,
@@ -264,222 +279,70 @@ function Map({
       }
     ) : null });
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      ref: containerRef,
-      style: frameStyle
-    }
-  );
-}
-function resolveStyleUrl(mapName, styleBaseUrl) {
-  const baseUrl = normalizeUrl(styleBaseUrl ?? getDefaultStyleBaseUrl());
-  return `${baseUrl}/styles/${mapName}.json`;
-}
-function getDefaultStyleBaseUrl() {
-  const globalValue = globalThis.__TILEFLOW_STYLE_BASE_URL__;
-  return globalValue ?? "http://localhost:3333";
-}
-function normalizeUrl(value) {
-  return value.replace(/\/+$/, "");
+  return /* @__PURE__ */ jsx("div", { className, ref: containerRef, style: frameStyle });
 }
-function createSessionId() {
-  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
-    return `ses_${crypto.randomUUID()}`;
-  }
-  return `ses_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
-}
-function createTransformRequest(analytics, sessionId) {
-  if (!analytics || analytics.enabled === false) {
-    return void 0;
-  }
-  return (url) => {
-    const apiUrl = getAnalyticsApiUrl(analytics);
-    if (!apiUrl || !isTileflowTileUrl(url, apiUrl)) {
-      return void 0;
-    }
-    const nextUrl = new URL(url);
-    nextUrl.searchParams.set("session", sessionId);
-    if (analytics.mapId) {
-      nextUrl.searchParams.set("map", analytics.mapId);
-    }
-    if (analytics.styleId) {
-      nextUrl.searchParams.set("styleId", analytics.styleId);
+function createTransformRequest(getAnalytics, sessionId, userTransformRequest) {
+  return (url, resourceType) => {
+    const request = userTransformRequest?.(url, resourceType);
+    if (isPromiseLike(request)) {
+      return request.then(
+        (resolvedRequest) => applyTileflowAnalyticsRequest(url, resolvedRequest, getAnalytics(), sessionId) ?? resolvedRequest
+      );
     }
-    return { url: nextUrl.toString() };
+    return applyTileflowAnalyticsRequest(url, request, getAnalytics(), sessionId);
   };
 }
-function startSession(analytics, input) {
-  if (!analytics || analytics.enabled === false || !input.mapId || typeof navigator === "undefined") {
-    return;
-  }
-  const endpoint = analytics.endpoint ?? `${getAnalyticsApiUrl(analytics)}/v1/sessions/start`;
-  const payload = JSON.stringify({
-    mapId: input.mapId,
-    metadata: analytics.metadata,
-    referrer: typeof document === "undefined" ? void 0 : document.referrer || "",
-    sdkVersion: analytics.sdkVersion,
-    sessionId: input.sessionId,
-    source: analytics.source ?? "react",
-    styleId: input.styleId,
-    timestamp: (/* @__PURE__ */ new Date()).toISOString()
-  });
-  const blob = new Blob([payload], { type: "application/json" });
-  if (navigator.sendBeacon?.(endpoint, blob)) {
-    return;
-  }
-  void fetch(endpoint, {
-    body: payload,
-    credentials: "omit",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    keepalive: true,
-    method: "POST"
-  });
-}
-function getAnalyticsApiUrl(analytics) {
-  if (analytics.apiUrl) {
-    return normalizeUrl(analytics.apiUrl);
-  }
-  if (analytics.endpoint) {
-    const url = new URL(analytics.endpoint);
-    return url.origin;
-  }
-  return "https://api.tileflow.dev";
-}
-function mergeAnalytics(userAnalytics, runtimeAnalytics) {
-  if (userAnalytics?.enabled === false) {
-    return userAnalytics;
-  }
-  if (!userAnalytics && !runtimeAnalytics?.mapId) {
-    return void 0;
+function applyTileflowAnalyticsRequest(url, request, analytics, sessionId) {
+  const requestUrl = request?.url ?? url;
+  const nextUrl = resolveTileflowAnalyticsRequestUrl(requestUrl, analytics, sessionId);
+  if (!nextUrl) {
+    return request;
   }
-  return {
-    ...runtimeAnalytics,
-    ...userAnalytics,
-    apiUrl: userAnalytics?.apiUrl ?? runtimeAnalytics?.apiUrl,
-    mapId: userAnalytics?.mapId ?? runtimeAnalytics?.mapId,
-    styleId: userAnalytics?.styleId ?? runtimeAnalytics?.styleId
-  };
+  return request ? { ...request, url: nextUrl } : { url: nextUrl };
 }
-function isTileflowTileUrl(url, apiUrl) {
-  try {
-    const parsedUrl = new URL(url);
-    const parsedApiUrl = new URL(apiUrl);
-    return parsedUrl.origin === parsedApiUrl.origin && isTilePath(parsedUrl);
-  } catch {
-    return false;
-  }
+function isPromiseLike(value) {
+  return Boolean(value && typeof value.then === "function");
 }
-function isTilePath(url) {
-  return url.pathname.startsWith("/tiles/") || url.pathname.startsWith("/v1/tiles/");
+function clearMarkers(markerInstances) {
+  markerInstances.forEach((marker) => marker.remove());
 }
-function isLocalDevHost() {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  return ["localhost", "127.0.0.1", "::1"].includes(window.location.hostname);
+function useStableMapOptions(options) {
+  return useStableMapOptionValue(options);
 }
-function loadManifest(url) {
-  if (!manifestCache.has(url)) {
-    manifestCache.set(
-      url,
-      fetch(url, { cache: "no-store" }).then(async (response) => {
-        if (response.status === 404) {
-          return null;
-        }
-        if (!response.ok) {
-          throw new Error(`Tileflow manifest failed: ${response.status}`);
-        }
-        return await response.json();
-      })
-    );
+function useStableMapOptionValue(value) {
+  const valueRef = useRef(value);
+  if (!areEquivalentMapOptionValues(valueRef.current, value)) {
+    valueRef.current = value;
   }
-  return manifestCache.get(url);
+  return valueRef.current;
 }
-function resolveManifestMap(manifest, mapName) {
-  const entry = manifest.maps?.[mapName] ?? manifest.styles?.[mapName];
-  if (!entry) {
-    return null;
+function areEquivalentMapOptionValues(left, right, seen = /* @__PURE__ */ new WeakMap()) {
+  if (Object.is(left, right)) {
+    return true;
   }
-  if (typeof entry === "string") {
-    const analytics2 = inferAnalyticsFromStyleUrl(entry);
-    return {
-      apiUrl: analytics2?.apiUrl ?? manifest.apiUrl,
-      mapId: analytics2?.mapId,
-      styleId: analytics2?.styleId,
-      styleUrl: entry
-    };
+  if (!left || !right || typeof left !== "object" || typeof right !== "object") {
+    return false;
   }
-  const styleUrl = entry.styleUrl ?? entry.url;
-  if (!styleUrl && !entry.mapId) {
-    return null;
+  const seenRight = seen.get(left);
+  if (seenRight) {
+    return seenRight === right;
   }
-  const analytics = styleUrl ? inferAnalyticsFromStyleUrl(styleUrl) : void 0;
-  return {
-    apiUrl: entry.apiUrl ?? manifest.apiUrl ?? analytics?.apiUrl,
-    mapId: entry.mapId ?? analytics?.mapId,
-    styleId: entry.styleId ?? analytics?.styleId,
-    styleUrl
-  };
-}
-function resolveStaticImageUrl(input) {
-  if (!input.manifestMap?.mapId || !input.imageSize) {
-    return void 0;
-  }
-  const apiUrl = normalizeUrl(
-    input.manifestMap.apiUrl ?? "https://api.tileflow.dev"
-  );
-  const url = new URL(`/maps/${input.manifestMap.mapId}/static.png`, apiUrl);
-  url.searchParams.set("center", input.center.join(","));
-  url.searchParams.set("zoom", String(input.zoom));
-  url.searchParams.set("width", String(input.imageSize.width));
-  url.searchParams.set("height", String(input.imageSize.height));
-  return url.toString();
-}
-function normalizeStaticImageSize(input) {
-  let width = clampDimension(input.width);
-  let height = clampDimension(input.height);
-  const pixelCount = width * height;
-  if (pixelCount > maxStaticImagePixels) {
-    const scale = Math.sqrt(maxStaticImagePixels / pixelCount);
-    width = clampDimension(width * scale);
-    height = clampDimension(height * scale);
+  seen.set(left, right);
+  if (Array.isArray(left) || Array.isArray(right)) {
+    return Array.isArray(left) && Array.isArray(right) && left.length === right.length && left.every((value, index) => areEquivalentMapOptionValues(value, right[index], seen));
   }
-  return { height, width };
-}
-function clampDimension(value) {
-  if (!Number.isFinite(value) || value <= 0) {
-    return 640;
+  if (!isPlainObject(left) || !isPlainObject(right)) {
+    return false;
   }
-  return Math.max(
-    64,
-    Math.min(maxStaticImageDimension, Math.round(value))
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  return leftKeys.length === rightKeys.length && leftKeys.every(
+    (key) => Object.hasOwn(right, key) && areEquivalentMapOptionValues(left[key], right[key], seen)
   );
 }
-function inferAnalyticsFromStyleUrl(styleUrl) {
-  try {
-    const url = new URL(styleUrl, getLocationOrigin());
-    const match = url.pathname.match(/\/(?:v1\/)?maps\/([^/]+)\/style\.json$/);
-    if (!match?.[1]) {
-      return void 0;
-    }
-    return {
-      apiUrl: url.origin,
-      mapId: match[1],
-      styleId: url.toString()
-    };
-  } catch {
-    return void 0;
-  }
-}
-function getLocationOrigin() {
-  if (typeof window === "undefined") {
-    return "http://localhost";
-  }
-  return window.location.origin;
+function isPlainObject(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
 }
 export {
   Map

package/dist/static.js

@@ -1,3 +1,5 @@
+'use client';
+
 // src/static-map.tsx
 import {
   useEffect,

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.10",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
+  "sideEffects": false,
   "homepage": "https://tileflow.dev",
   "repository": {
     "type": "git",
@@ -40,23 +41,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": "0.1.0-alpha.0",
-    "@tileflow/static": "0.1.0-alpha.0"
+    "@tileflow/core": "0.1.0-alpha.10",
+    "@tileflow/static": "0.1.0-alpha.10"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18"
   },
   "devDependencies": {
     "maplibre-gl": "^5.24.0",
     "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3"
+    "@types/react": "^19.2.17"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/static.ts --format esm --dts --clean --external react --external react-dom --external maplibre-gl",
+    "build": "tsup",
+    "verify": "pnpm run build && tsx --test test/*.test.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "tsc -p tsconfig.json --noEmit"
   }