@tileflow/react 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,13 @@
+# @tileflow/react
+
+React components for rendering Tileflow maps with MapLibre.
+
+```tsx
+import { Map } from "@tileflow/react";
+
+export function App() {
+  return <Map map="madrid" center={[-3.7038, 40.4168]} zoom={12} />;
+}
+```
+
+Docs: https://tileflow.dev/docs

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { CSSProperties, ImgHTMLAttributes } from 'react';
+import { TileflowConfig, MapLibreStyle } from '@tileflow/core';
+import { Map as Map$1 } from 'maplibre-gl';
+
+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 MapProps = {
+    map?: string;
+    mode?: "interactive" | "image";
+    config?: TileflowConfig;
+    style?: MapLibreStyle;
+    styleUrl?: string;
+    imageUrl?: string;
+    styleBaseUrl?: string;
+    tileBaseUrl?: string;
+    manifestUrl?: string;
+    preferLocalDev?: boolean;
+    alt?: string;
+    center?: [number, number];
+    zoom?: number;
+    className?: string;
+    height?: CSSProperties["height"];
+    imageLoading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    interactive?: boolean;
+    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;
+
+export { Map, type MapMarker, type MapProps };

package/dist/index.js

@@ -0,0 +1,486 @@
+// src/map.tsx
+import {
+  createStyle
+} from "@tileflow/core";
+import maplibregl from "maplibre-gl";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+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",
+  config,
+  style,
+  styleUrl,
+  imageUrl,
+  styleBaseUrl,
+  tileBaseUrl,
+  manifestUrl = defaultManifestUrl,
+  preferLocalDev = true,
+  alt = "",
+  center = defaultCenter,
+  zoom = 2,
+  className,
+  height = 420,
+  imageLoading = "eager",
+  interactive = true,
+  markers = defaultMarkers,
+  analytics,
+  onLoad
+}) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const sessionId = useMemo(() => createSessionId(), []);
+  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()
+    ),
+    [
+      config,
+      isImageMode,
+      mapName,
+      preferLocalDev,
+      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) => {
+      if (cancelled) {
+        return;
+      }
+      setManifestMap(
+        manifest ? resolveManifestMap(manifest, mapName) : null
+      );
+    }).catch((error) => {
+      if (!cancelled) {
+        console.error("Failed to load Tileflow manifest", error);
+        setManifestMap(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    config,
+    imageUrl,
+    isImageMode,
+    manifestUrl,
+    mapName,
+    style,
+    styleUrl,
+    useExplicitStyleBaseUrl
+  ]);
+  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 }) };
+  }, [
+    config,
+    isImageMode,
+    manifestMap,
+    mapName,
+    style,
+    styleBaseUrl,
+    styleUrl,
+    tileBaseUrl,
+    useExplicitStyleBaseUrl,
+    useLocalDevFallback
+  ]);
+  const resolvedAnalytics = useMemo(
+    () => mergeAnalytics(analytics, runtimeStyle?.analytics),
+    [analytics, runtimeStyle]
+  );
+  const runtimeImageUrl = useMemo(
+    () => imageUrl ?? (isImageMode ? resolveStaticImageUrl({
+      center,
+      imageSize,
+      manifestMap,
+      zoom
+    }) : void 0),
+    [center, imageSize, imageUrl, isImageMode, manifestMap, zoom]
+  );
+  const transformRequest = useMemo(
+    () => createTransformRequest(resolvedAnalytics, sessionId),
+    [resolvedAnalytics, sessionId]
+  );
+  useEffect(() => {
+    if (!isImageMode || imageUrl || !containerRef.current) {
+      setImageSize(null);
+      return;
+    }
+    const element = containerRef.current;
+    const updateImageSize = () => {
+      const nextSize = normalizeStaticImageSize({
+        height: element.clientHeight,
+        width: element.clientWidth
+      });
+      setImageSize(
+        (currentSize) => currentSize?.height === nextSize.height && currentSize.width === nextSize.width ? currentSize : nextSize
+      );
+    };
+    const resizeObserver = new ResizeObserver(updateImageSize);
+    resizeObserver.observe(element);
+    updateImageSize();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [imageUrl, isImageMode]);
+  useEffect(() => {
+    if (!containerRef.current || !runtimeStyle) {
+      return;
+    }
+    const map = new maplibregl.Map({
+      container: containerRef.current,
+      style: runtimeStyle.style,
+      center,
+      zoom,
+      interactive,
+      attributionControl: { compact: true },
+      transformRequest
+    });
+    mapRef.current = map;
+    const controls = interactive ? 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)
+      });
+    });
+    return () => {
+      resizeObserver.disconnect();
+      markerInstances.forEach((marker) => marker.remove());
+      map.remove();
+      mapRef.current = null;
+    };
+  }, [
+    center,
+    interactive,
+    mapName,
+    markers,
+    onLoad,
+    resolvedAnalytics,
+    runtimeStyle,
+    sessionId,
+    transformRequest,
+    zoom
+  ]);
+  const frameStyle = {
+    height,
+    minHeight: 240,
+    overflow: "hidden",
+    position: "relative",
+    width: "100%"
+  };
+  if (isImageMode) {
+    return /* @__PURE__ */ jsx("div", { className, ref: containerRef, style: frameStyle, children: runtimeImageUrl ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        decoding: "async",
+        loading: imageLoading,
+        src: runtimeImageUrl,
+        style: {
+          display: "block",
+          height: "100%",
+          objectFit: "cover",
+          width: "100%"
+        }
+      }
+    ) : 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(/\/+$/, "");
+}
+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);
+    }
+    return { url: nextUrl.toString() };
+  };
+}
+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;
+  }
+  return {
+    ...runtimeAnalytics,
+    ...userAnalytics,
+    apiUrl: userAnalytics?.apiUrl ?? runtimeAnalytics?.apiUrl,
+    mapId: userAnalytics?.mapId ?? runtimeAnalytics?.mapId,
+    styleId: userAnalytics?.styleId ?? runtimeAnalytics?.styleId
+  };
+}
+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 isTilePath(url) {
+  return url.pathname.startsWith("/tiles/") || url.pathname.startsWith("/v1/tiles/");
+}
+function isLocalDevHost() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return ["localhost", "127.0.0.1", "::1"].includes(window.location.hostname);
+}
+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();
+      })
+    );
+  }
+  return manifestCache.get(url);
+}
+function resolveManifestMap(manifest, mapName) {
+  const entry = manifest.maps?.[mapName] ?? manifest.styles?.[mapName];
+  if (!entry) {
+    return null;
+  }
+  if (typeof entry === "string") {
+    const analytics2 = inferAnalyticsFromStyleUrl(entry);
+    return {
+      apiUrl: analytics2?.apiUrl ?? manifest.apiUrl,
+      mapId: analytics2?.mapId,
+      styleId: analytics2?.styleId,
+      styleUrl: entry
+    };
+  }
+  const styleUrl = entry.styleUrl ?? entry.url;
+  if (!styleUrl && !entry.mapId) {
+    return null;
+  }
+  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);
+  }
+  return { height, width };
+}
+function clampDimension(value) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return 640;
+  }
+  return Math.max(
+    64,
+    Math.min(maxStaticImageDimension, Math.round(value))
+  );
+}
+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;
+}
+export {
+  Map
+};

package/dist/static.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { CSSProperties, ImgHTMLAttributes } from 'react';
+import { StaticSceneInput, StaticMapResult } from '@tileflow/static';
+
+type StaticMapBaseProps = StaticSceneInput & {
+    alt?: string;
+    className?: string;
+    imageStyle?: CSSProperties;
+    keepPreviousImage?: boolean;
+    loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    onError?: (error: Error) => void;
+    onImageLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
+    onReady?: (result: StaticMapResult) => void;
+    style?: CSSProperties;
+};
+type StaticMapImageProps = {
+    createUrl?: never;
+    imageUrl: string;
+};
+type StaticMapCreateProps = {
+    createUrl: string;
+    imageUrl?: never;
+};
+type StaticMapProps = StaticMapBaseProps & (StaticMapCreateProps | StaticMapImageProps);
+declare function StaticMap({ alt, camera, className, createUrl, imageStyle, imageUrl, keepPreviousImage, loading, map, onError, onImageLoad, onReady, overlays, size, style, }: StaticMapProps): react.JSX.Element;
+
+export { StaticMap, type StaticMapProps };

package/dist/static.js

@@ -0,0 +1,167 @@
+// src/static-map.tsx
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var inFlightRequests = /* @__PURE__ */ new Map();
+function StaticMap({
+  alt = "",
+  camera,
+  className,
+  createUrl,
+  imageStyle,
+  imageUrl,
+  keepPreviousImage = false,
+  loading = "lazy",
+  map,
+  onError,
+  onImageLoad,
+  onReady,
+  overlays,
+  size,
+  style
+}) {
+  const [result, setResult] = useState(
+    imageUrl ? imageResult(imageUrl) : null
+  );
+  const [error, setError] = useState(null);
+  const onErrorRef = useRef(onError);
+  const onReadyRef = useRef(onReady);
+  const sceneKey = useMemo(
+    () => stableStringify({ camera, map, overlays, size }),
+    [camera, map, overlays, size]
+  );
+  const requestKey = imageUrl ? `image:${imageUrl}` : `create:${createUrl}:${sceneKey}`;
+  useEffect(() => {
+    onErrorRef.current = onError;
+    onReadyRef.current = onReady;
+  }, [onError, onReady]);
+  useEffect(() => {
+    if (imageUrl) {
+      const nextResult = imageResult(imageUrl);
+      setResult(nextResult);
+      setError(null);
+      onReadyRef.current?.(nextResult);
+      return;
+    }
+    let cancelled = false;
+    if (!createUrl) {
+      return;
+    }
+    if (!keepPreviousImage) {
+      setResult(null);
+    }
+    setError(null);
+    resolveStaticMap({
+      createUrl,
+      requestKey,
+      scene: JSON.parse(sceneKey)
+    }).then((nextResult) => {
+      if (cancelled) {
+        return;
+      }
+      setResult(nextResult);
+      setError(null);
+      onReadyRef.current?.(nextResult);
+    }).catch((nextError) => {
+      if (cancelled) {
+        return;
+      }
+      const normalizedError = nextError instanceof Error ? nextError : new Error("Static map failed");
+      if (!keepPreviousImage) {
+        setResult(null);
+      }
+      setError(normalizedError);
+      onErrorRef.current?.(normalizedError);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [createUrl, imageUrl, keepPreviousImage, requestKey, sceneKey]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": !result && !error,
+      className,
+      style: {
+        aspectRatio: `${size.width} / ${size.height}`,
+        background: "#f4f4f2",
+        overflow: "hidden",
+        width: "100%",
+        ...style
+      },
+      children: result ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt,
+          decoding: "async",
+          loading,
+          onError: () => {
+            const imageError = new Error("Static map image failed to load");
+            setError(imageError);
+            onErrorRef.current?.(imageError);
+          },
+          onLoad: onImageLoad,
+          src: result.imageUrl,
+          style: {
+            display: "block",
+            height: "100%",
+            objectFit: "cover",
+            width: "100%",
+            ...imageStyle
+          }
+        }
+      ) : null
+    }
+  );
+}
+async function resolveStaticMap(input) {
+  const existing = inFlightRequests.get(input.requestKey);
+  if (existing) {
+    return existing;
+  }
+  const promise = fetch(input.createUrl, {
+    body: JSON.stringify(input.scene),
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST"
+  }).then(async (response) => {
+    if (!response.ok) {
+      throw new Error(`Static map endpoint failed: ${response.status}`);
+    }
+    return await response.json();
+  }).finally(() => {
+    inFlightRequests.delete(input.requestKey);
+  });
+  inFlightRequests.set(input.requestKey, promise);
+  return promise;
+}
+function imageResult(imageUrl) {
+  return {
+    cached: true,
+    hash: "",
+    imageUrl,
+    status: "ready"
+  };
+}
+function stableStringify(value) {
+  return JSON.stringify(sortJson(value));
+}
+function sortJson(value) {
+  if (Array.isArray(value)) {
+    return value.map(sortJson);
+  }
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).sort(([left], [right]) => left.localeCompare(right)).map(([key, entry]) => [key, sortJson(entry)])
+    );
+  }
+  return value;
+}
+export {
+  StaticMap
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@tileflow/react",
+  "version": "0.1.0-alpha.0",
+  "description": "React components for rendering Tileflow maps with MapLibre.",
+  "type": "module",
+  "homepage": "https://tileflow.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tileflow/tileflow.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/tileflow/tileflow/issues"
+  },
+  "keywords": [
+    "tileflow",
+    "react",
+    "maps",
+    "maplibre",
+    "tiles"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./static": {
+      "types": "./dist/static.d.ts",
+      "import": "./dist/static.js",
+      "default": "./dist/static.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tileflow/core": "0.1.0-alpha.0",
+    "@tileflow/static": "0.1.0-alpha.0"
+  },
+  "peerDependencies": {
+    "maplibre-gl": ">=5",
+    "react": ">=18",
+    "react-dom": ">=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"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/static.ts --format esm --dts --clean --external react --external react-dom --external maplibre-gl",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "tsc -p tsconfig.json --noEmit"
+  }
+}