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

package/README.md

@@ -3,11 +3,20 @@
 React components for rendering Tileflow maps with MapLibre.
 
 ```tsx
-import { Map } from "@tileflow/react";
+import {Map} from '@tileflow/react';
 
 export function App() {
   return <Map map="madrid" center={[-3.7038, 40.4168]} zoom={12} />;
 }
 ```
 
+For simple hosted static images, use image mode:
+
+```tsx
+<Map map="madrid" mode="image" center={[-3.7038, 40.4168]} zoom={12} />
+```
+
+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,7 +1,7 @@
 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 { TileflowConfig, MapLibreStyle, TileflowThemeConfig } from '@tileflow/core';
 
 type MapMarker = {
     id: string;
@@ -22,26 +22,27 @@ type TileflowAnalytics = {
 };
 type MapProps = {
     map?: string;
-    mode?: "interactive" | "image";
+    mode?: 'interactive' | 'image';
     config?: TileflowConfig;
     style?: MapLibreStyle;
     styleUrl?: string;
     imageUrl?: string;
     styleBaseUrl?: string;
     tileBaseUrl?: string;
+    themes?: Record<string, TileflowThemeConfig>;
     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;
     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, markers, analytics, onLoad, }: MapProps): react.JSX.Element;
 
 export { Map, type MapMarker, type MapProps };

package/dist/index.js

@@ -1,14 +1,14 @@
 // 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 {
+  createStyle
+} from "@tileflow/core";
 import { jsx } from "react/jsx-runtime";
 var defaultCenter = [0, 20];
 var defaultMarkers = [];
@@ -25,6 +25,7 @@ function Map({
   imageUrl,
   styleBaseUrl,
   tileBaseUrl,
+  themes,
   manifestUrl = defaultManifestUrl,
   preferLocalDev = true,
   alt = "",
@@ -41,30 +42,18 @@ function Map({
   const containerRef = useRef(null);
   const mapRef = useRef(null);
   const sessionId = useMemo(() => createSessionId(), []);
-  const [manifestMap, setManifestMap] = useState(
-    null
-  );
+  const [manifestMap, setManifestMap] = useState(null);
   const [imageSize, setImageSize] = useState(null);
   const isImageMode = mode === "image";
   const useExplicitStyleBaseUrl = useMemo(
-    () => Boolean(
-      !isImageMode && mapName && !style && !styleUrl && !config && styleBaseUrl
-    ),
+    () => 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
-    ]
+    [config, isImageMode, mapName, preferLocalDev, style, styleBaseUrl, styleUrl]
   );
   useEffect(() => {
     const shouldLoadManifest = Boolean(
@@ -79,9 +68,7 @@ function Map({
       if (cancelled) {
         return;
       }
-      setManifestMap(
-        manifest ? resolveManifestMap(manifest, mapName) : null
-      );
+      setManifestMap(manifest ? resolveManifestMap(manifest, mapName) : null);
     }).catch((error) => {
       if (!cancelled) {
         console.error("Failed to load Tileflow manifest", error);
@@ -133,7 +120,7 @@ function Map({
       }
       return null;
     }
-    return { style: createStyle(config, { tileBaseUrl }) };
+    return { style: createStyle(config, { themes, tileBaseUrl }) };
   }, [
     config,
     isImageMode,
@@ -142,6 +129,7 @@ function Map({
     style,
     styleBaseUrl,
     styleUrl,
+    themes,
     tileBaseUrl,
     useExplicitStyleBaseUrl,
     useLocalDevFallback
@@ -264,14 +252,7 @@ function Map({
       }
     ) : null });
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      ref: containerRef,
-      style: frameStyle
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className, ref: containerRef, style: frameStyle });
 }
 function resolveStyleUrl(mapName, styleBaseUrl) {
   const baseUrl = normalizeUrl(styleBaseUrl ?? getDefaultStyleBaseUrl());
@@ -429,9 +410,7 @@ function resolveStaticImageUrl(input) {
   if (!input.manifestMap?.mapId || !input.imageSize) {
     return void 0;
   }
-  const apiUrl = normalizeUrl(
-    input.manifestMap.apiUrl ?? "https://api.tileflow.dev"
-  );
+  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));
@@ -454,10 +433,7 @@ function clampDimension(value) {
   if (!Number.isFinite(value) || value <= 0) {
     return 640;
   }
-  return Math.max(
-    64,
-    Math.min(maxStaticImageDimension, Math.round(value))
-  );
+  return Math.max(64, Math.min(maxStaticImageDimension, Math.round(value)));
 }
 function inferAnalyticsFromStyleUrl(styleUrl) {
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
   "homepage": "https://tileflow.dev",
@@ -40,8 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": "0.1.0-alpha.0",
-    "@tileflow/static": "0.1.0-alpha.0"
+    "@tileflow/static": "0.1.0-alpha.1",
+    "@tileflow/core": "0.1.0-alpha.1"
   },
   "peerDependencies": {
     "maplibre-gl": ">=5",