@tileflow/react 0.1.0-alpha.26 → 0.1.0-alpha.28

package/README.md

@@ -99,6 +99,12 @@ for assets.
 explicit light/dark mapping, which Streets supplies. Theme changes preserve the MapLibre instance,
 camera, and interactions, and roll back on failure. `onThemeChange` reports transitions.
 
+`themeTransition={{duration: 450}}` cross-fades theme changes over that many milliseconds.
+`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. Moving the position updates the map at once. See
+[theme transitions and blends](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/theme-transitions-and-blends.md).
+
 `mapOptions` accepts native MapLibre options except `container` and `style`. Direct camera props
 take priority over `mapOptions`, then the manifest view, then shared defaults. `Map` always selects
 a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.

package/dist/index.d.ts

@@ -1,13 +1,20 @@
 import * as react from 'react';
 import { CSSProperties, ImgHTMLAttributes, ReactNode } from 'react';
 import { MapOptions, Map as Map$1 } from 'maplibre-gl';
-import { TileflowThemeTransition } from '@tileflow/core/browser';
-import { TileflowRuntimeSource, TileflowThemeSelection, TileflowAnalytics } from '@tileflow/core/runtime';
+import { TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
+import { TileflowRuntimeSource, TileflowThemeSelection, TileflowThemeBlendSelection, TileflowAnalytics } from '@tileflow/core/runtime';
 import { TileflowAnnotation, TileflowInteractionState, TileflowAnnotationViewContext, TileflowInteractionBinding, TileflowInteractionViewContext, TileflowInteractionDiagnostic, TileflowInteractionEvent } from '@tileflow/interactions';
 
 type TileflowMapStyleSourceProps = {
     source: TileflowRuntimeSource;
     theme?: TileflowThemeSelection;
+    /**
+     * Shows a continuous blend of the map's themes instead of `theme`. Moving `position` changes the
+     * map at once; changing `themes` prepares a new blend.
+     */
+    themeBlend?: TileflowThemeBlendSelection;
+    /** Cross-fades theme changes, including entering and leaving a blend. */
+    themeTransition?: TileflowThemeTransitionOptions;
 };
 
 type TileflowMapSource = TileflowRuntimeSource;

package/dist/index.js

@@ -11,6 +11,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import {
+  attachTileflowAtmosphere,
   attachTileflowFairUseNotice,
   attachTileflowMapLifecycle,
   createTileflowSessionStarter,
@@ -30,12 +31,14 @@ import {
   defaultTileflowRuntimeView,
   loadTileflowManifest,
   mergeTileflowAnalytics,
+  nearestTileflowBlendTheme,
   normalizeTileflowRuntimeCenter,
   normalizeTileflowStaticImageSize,
   resolveTileflowManifestMap,
   resolveTileflowMapMode,
   resolveTileflowRuntimeStyle,
   resolveTileflowRuntimeTheme,
+  resolveTileflowRuntimeThemeBlend,
   resolveTileflowRuntimeView,
   resolveTileflowStaticImageUrl
 } from "@tileflow/core/runtime";
@@ -166,6 +169,7 @@ function prepareTileflowReactInteractionState(interactionState, defaultInteracti
 // src/map-style-inputs.ts
 import {
   validateTileflowRuntimeSource,
+  validateTileflowThemeBlendSelection,
   validateTileflowThemeSelection
 } from "@tileflow/core/runtime";
 function validateTileflowMapStyleInputs(input) {
@@ -174,8 +178,25 @@ function validateTileflowMapStyleInputs(input) {
   if (input.theme !== void 0 && !validateTileflowThemeSelection(input.theme)) {
     return { error: 'theme must be a concrete portable theme name or "system"', ok: false };
   }
+  if (input.themeBlend !== void 0 && !validateTileflowThemeBlendSelection(input.themeBlend)) {
+    return {
+      error: "themeBlend must name two to eight concrete themes and a position from 0 to themes.length - 1",
+      ok: false
+    };
+  }
+  if (input.themeTransition !== void 0 && !isThemeTransition(input.themeTransition)) {
+    return {
+      error: "themeTransition.duration must be a number of milliseconds from 0 to 5000",
+      ok: false
+    };
+  }
   return { ok: true };
 }
+function isThemeTransition(value) {
+  if (!value || typeof value !== "object") return false;
+  const { duration } = value;
+  return duration === void 0 || typeof duration === "number" && Number.isFinite(duration) && duration >= 0 && duration <= 5e3;
+}
 function assertTileflowMapStyleInputs(input) {
   const validation = validateTileflowMapStyleInputs(input);
   if (!validation.ok) {
@@ -237,6 +258,8 @@ function Map2(props) {
     mapOptions,
     analytics,
     theme,
+    themeBlend,
+    themeTransition,
     interactionState,
     interactions = defaultInteractions,
     onInteractionDiagnostic,
@@ -325,19 +348,31 @@ function Map2(props) {
   const manifestRequestKey = JSON.stringify([manifestUrl, mapName]);
   const currentManifestResolution = manifestResolution.key === manifestRequestKey ? manifestResolution : { key: manifestRequestKey, map: null, state: "loading" };
   const manifestMap = currentManifestResolution.state === "ready" ? currentManifestResolution.map : null;
+  const themeBlendKey = themeBlend ? JSON.stringify(themeBlend.themes) : void 0;
+  const themeBlendPosition = themeBlend?.position;
+  const blendThemeName = themeBlend ? nearestTileflowBlendTheme(themeBlend) : void 0;
   const themeResolution = useMemo(() => {
+    const selection = blendThemeName ?? theme;
     if (!manifestMap) {
-      return { error: false, name: theme && theme !== "system" ? theme : void 0 };
+      return {
+        error: false,
+        name: selection && selection !== "system" ? selection : void 0
+      };
     }
     try {
+      if (themeBlendKey) {
+        for (const name of JSON.parse(themeBlendKey)) {
+          resolveTileflowRuntimeTheme(manifestMap, name);
+        }
+      }
       return {
         error: false,
-        name: resolveTileflowRuntimeTheme(manifestMap, theme, systemColorScheme).name
+        name: resolveTileflowRuntimeTheme(manifestMap, selection, systemColorScheme).name
       };
     } catch {
       return { error: true, name: void 0 };
     }
-  }, [manifestMap, systemColorScheme, theme]);
+  }, [blendThemeName, manifestMap, systemColorScheme, theme, themeBlendKey]);
   const resolvedThemeName = themeResolution.name;
   const manifestView = resolveTileflowRuntimeView({ manifestMap });
   const manifestCenter = useStableMapOptionValue(
@@ -476,6 +511,22 @@ function Map2(props) {
     });
   }, [isImageMode, manifestMap, runtimeSource, systemColorScheme, themeResolution]);
   runtimeStyleRef.current = runtimeStyle;
+  const blendStyles = useMemo(() => {
+    if (isImageMode || !manifestMap || !themeBlendKey) return null;
+    try {
+      return resolveTileflowRuntimeThemeBlend({
+        blend: { position: 0, themes: JSON.parse(themeBlendKey) },
+        manifestMap,
+        source: runtimeSource
+      });
+    } catch {
+      return null;
+    }
+  }, [isImageMode, manifestMap, runtimeSource, themeBlendKey]);
+  const blendRequestRef = useRef(null);
+  blendRequestRef.current = blendStyles && themeBlendPosition !== void 0 ? { position: themeBlendPosition, themes: blendStyles } : null;
+  const themeTransitionRef = useRef(themeTransition);
+  themeTransitionRef.current = themeTransition;
   const runtimeMapIdentity = `${manifestUrl}\0${runtimeSource.map}`;
   const runtimeStyleReady = runtimeStyle !== null || themeResolution.error && mapRef.current !== null;
   const resolvedAnalytics = useMemo(
@@ -719,6 +770,7 @@ function Map2(props) {
       mapRef.current = map;
       setupResources.map = map;
       registerCleanup(() => map.remove());
+      registerCleanup(attachTileflowAtmosphere(map));
       const themeController = initialRuntimeStyle.theme === void 0 ? void 0 : createTileflowThemeController({
         initial: initialRuntimeStyle,
         map,
@@ -917,9 +969,15 @@ function Map2(props) {
       });
       registerCleanup(() => lifecycle.dispose());
       const latestRuntimeStyle = runtimeStyleRef.current;
-      if (themeController && latestRuntimeStyle && latestRuntimeStyle !== initialRuntimeStyle) {
+      const latestBlend = blendRequestRef.current;
+      if (themeController && latestBlend) {
+        if (latestRuntimeStyle) setActiveRuntimeResource(latestRuntimeStyle);
+        void themeController.setBlend(latestBlend, { transition: themeTransitionRef.current });
+      } else if (themeController && latestRuntimeStyle && latestRuntimeStyle !== initialRuntimeStyle) {
         setActiveRuntimeResource(latestRuntimeStyle);
-        void themeController.setTheme(latestRuntimeStyle);
+        void themeController.setTheme(latestRuntimeStyle, {
+          transition: themeTransitionRef.current
+        });
       }
     }).catch((error) => {
       try {
@@ -940,19 +998,33 @@ function Map2(props) {
   }, [resolvedInteractive, runtimeMapIdentity, runtimeStyleReady, stableMapOptions]);
   useEffect(() => {
     const controller = themeControllerRef.current;
-    if (!controller) return;
+    if (!controller || themeBlendKey) return;
     if (themeResolution.error) {
       void controller.setTheme(controller.getCurrent());
       return;
     }
-    if (!runtimeStyle || controller.getCurrent() === runtimeStyle) return;
+    if (!runtimeStyle || controller.getCurrent() === runtimeStyle && !controller.getBlend())
+      return;
     setActiveRuntimeResource(runtimeStyle);
-    void controller.setTheme(runtimeStyle).then((result) => {
+    void controller.setTheme(runtimeStyle, { transition: themeTransitionRef.current }).then((result) => {
       if (result.status === "failed") {
         console.error("Failed to change the Tileflow map theme", result.error);
       }
     });
-  }, [runtimeStyle, themeResolution.error]);
+  }, [runtimeStyle, themeBlendKey, themeResolution.error]);
+  useEffect(() => {
+    const controller = themeControllerRef.current;
+    if (!controller || !blendStyles || themeBlendPosition === void 0) return;
+    if (runtimeStyle) setActiveRuntimeResource(runtimeStyle);
+    void controller.setBlend(
+      { position: themeBlendPosition, themes: blendStyles },
+      { transition: themeTransitionRef.current }
+    ).then((result) => {
+      if (result.status === "failed") {
+        console.error("Failed to blend the Tileflow map themes", result.error);
+      }
+    });
+  }, [blendStyles, runtimeStyle, themeBlendPosition]);
   useLayoutEffect(() => {
     if (!isImageMode) return;
     readinessRunRef.current += 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "license": "Apache-2.0",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.27 <0.1.0-beta.0",
+    "@tileflow/core": ">=0.1.0-alpha.30 <0.1.0-beta.0",
     "@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0",
     "@tileflow/static": ">=0.1.0-alpha.27 <0.1.0-beta.0"
   },