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

package/README.md

@@ -88,6 +88,12 @@ Omitting `theme` uses `defaultTheme`. `system` needs the map's explicit light/da
 Streets supplies. Switching themes preserves the map, camera, and interactions, with rollback on
 failure. Listen to `themeChange` for transitions.
 
+`:theme-transition="{duration: 450}"` cross-fades theme changes over that many milliseconds.
+`:theme-blend="{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 props take
 priority over those options, then the published view, then shared defaults. `TileflowMap` always
 selects a Tileflow map through its manifest; it has no renderer discriminator or direct-style mode.

package/dist/index.d.ts

@@ -1,12 +1,20 @@
 import { MapOptions, Map } from 'maplibre-gl';
 import { DefineComponent, VNodeChild } from 'vue';
-import { TileflowThemeTransition } from '@tileflow/core/browser';
+import { TileflowBrowserThemeBlendSelection, TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
 import { TileflowRuntimeSource, TileflowThemeSelection, TileflowAnalytics } from '@tileflow/core/runtime';
 import { TileflowAnnotation, TileflowInteractionJsonValue, TileflowInteractionState, TileflowInteractionBinding, TileflowInteractionDiagnostic, TileflowInteractionEvent, TileflowAnnotationViewContext, TileflowInteractionViewContext } 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. `hold` keeps labels, icons, and mixed
+     * artwork back during a camera move; clearing it brings them in at once.
+     */
+    themeBlend?: TileflowBrowserThemeBlendSelection;
+    /** Cross-fades theme changes, including entering and leaving a blend. */
+    themeTransition?: TileflowThemeTransitionOptions;
 };
 
 type TileflowMapLibreConfiguration = Readonly<{

package/dist/index.js

@@ -34,12 +34,14 @@ import {
   defaultTileflowRuntimeView,
   loadTileflowManifest,
   mergeTileflowAnalytics,
+  nearestTileflowBlendTheme,
   normalizeTileflowRuntimeCenter,
   normalizeTileflowStaticImageSize,
   resolveTileflowManifestMap,
   resolveTileflowMapMode,
   resolveTileflowRuntimeStyle,
   resolveTileflowRuntimeTheme,
+  resolveTileflowRuntimeThemeBlend,
   resolveTileflowRuntimeView,
   resolveTileflowStaticImageUrl
 } from "@tileflow/core/runtime";
@@ -157,6 +159,9 @@ function configureTileflowMapLibreModule(maplibregl) {
 }
 
 // src/style-source.ts
+import {
+  validateTileflowBrowserThemeBlendSelection
+} from "@tileflow/core/browser";
 import {
   validateTileflowRuntimeSource,
   validateTileflowThemeSelection
@@ -167,8 +172,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 && !validateTileflowBrowserThemeBlendSelection(input.themeBlend)) {
+    return {
+      error: "themeBlend must name two to eight concrete themes, a position from 0 to themes.length - 1, and an optional boolean hold",
+      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) {
@@ -217,6 +239,8 @@ var TileflowMap = defineComponent({
       type: Object
     },
     theme: String,
+    themeBlend: Object,
+    themeTransition: Object,
     zoom: Number
   },
   emits: {
@@ -336,17 +360,24 @@ var TileflowMap = defineComponent({
     const manifestMap = computed(
       () => manifestResolutionKey.value === manifestRequestKey.value && manifestResolutionState.value === "ready" ? loadedManifestMap.value : null
     );
+    const themeBlendKey = computed(
+      () => props.themeBlend ? JSON.stringify(props.themeBlend.themes) : void 0
+    );
     const themeResolution = computed(() => {
+      const selection = props.themeBlend ? nearestTileflowBlendTheme(props.themeBlend) : props.theme;
       if (!manifestMap.value) {
         return {
           error: false,
-          name: props.theme && props.theme !== "system" ? props.theme : void 0
+          name: selection && selection !== "system" ? selection : void 0
         };
       }
       try {
+        for (const name of props.themeBlend?.themes ?? []) {
+          resolveTileflowRuntimeTheme(manifestMap.value, name);
+        }
         return {
           error: false,
-          name: resolveTileflowRuntimeTheme(manifestMap.value, props.theme, systemColorScheme.value).name
+          name: resolveTileflowRuntimeTheme(manifestMap.value, selection, systemColorScheme.value).name
         };
       } catch {
         return { error: true, name: void 0 };
@@ -387,6 +418,19 @@ var TileflowMap = defineComponent({
         theme: themeResolution.value.name
       })
     );
+    const blendStyles = computed(() => {
+      const key = themeBlendKey.value;
+      if (isImageMode.value || !manifestMap.value || !key) return null;
+      try {
+        return resolveTileflowRuntimeThemeBlend({
+          blend: { position: 0, themes: JSON.parse(key) },
+          manifestMap: manifestMap.value,
+          source: props.source
+        });
+      } catch {
+        return null;
+      }
+    });
     const resolvedAnalytics = computed(
       () => mergeTileflowAnalytics(props.analytics, runtimeStyle.value?.analytics)
     );
@@ -512,7 +556,12 @@ var TileflowMap = defineComponent({
       ]);
     };
     watchEffect(() => {
-      assertTileflowMapStyleInputs({ source: props.source, theme: props.theme });
+      assertTileflowMapStyleInputs({
+        source: props.source,
+        theme: props.theme,
+        themeBlend: props.themeBlend,
+        themeTransition: props.themeTransition
+      });
     });
     watchEffect(() => {
       const diagnostics = interactionInputDiagnostics.value;
@@ -879,13 +928,31 @@ var TileflowMap = defineComponent({
           return () => subscription.unsubscribe();
         }
       });
-      if (themeController && runtimeStyle.value && runtimeStyle.value !== runtime) {
+      if (themeController && blendStyles.value && props.themeBlend) {
+        switchBlend();
+      } else if (themeController && runtimeStyle.value && runtimeStyle.value !== runtime) {
         activeRuntimeResource.value = runtimeStyle.value;
-        void themeController.setTheme(runtimeStyle.value);
+        void themeController.setTheme(runtimeStyle.value, { transition: props.themeTransition });
       }
     };
+    const switchBlend = () => {
+      const themes = blendStyles.value;
+      const position = props.themeBlend?.position;
+      const hold = props.themeBlend?.hold === true;
+      if (!themeController || !themes || position === void 0) return;
+      if (runtimeStyle.value) activeRuntimeResource.value = runtimeStyle.value;
+      void themeController.setBlend({ hold, position, themes }, { transition: props.themeTransition }).then((result) => {
+        if (result.status === "failed") {
+          console.error("Failed to blend the Tileflow map themes", result.error);
+        }
+      });
+    };
     const switchTheme = () => {
       if (!themeController) return;
+      if (props.themeBlend) {
+        if (runtimeStyle.value) activeRuntimeResource.value = runtimeStyle.value;
+        return;
+      }
       if (themeResolution.value.error) {
         void themeController.setTheme(themeController.getCurrent());
         return;
@@ -893,7 +960,7 @@ var TileflowMap = defineComponent({
       const next = runtimeStyle.value;
       if (!next) return;
       activeRuntimeResource.value = next;
-      void themeController.setTheme(next).then((result) => {
+      void themeController.setTheme(next, { transition: props.themeTransition }).then((result) => {
         if (result.status === "failed") {
           console.error("Failed to change the Tileflow map theme", result.error);
         }
@@ -976,10 +1043,15 @@ var TileflowMap = defineComponent({
       () => syncSystemColorSchemeSubscription()
     );
     watch(
-      () => runtimeStyle.value,
+      () => [runtimeStyle.value, themeBlendKey.value],
       () => switchTheme(),
       { flush: "post" }
     );
+    watch(
+      () => [blendStyles.value, props.themeBlend?.position, props.themeBlend?.hold === true],
+      () => switchBlend(),
+      { flush: "post" }
+    );
     watch(
       () => [hasInteractionConfiguration.value, isImageMode.value, runtimeImageUrl.value],
       () => {
@@ -993,14 +1065,7 @@ var TileflowMap = defineComponent({
       { flush: "post" }
     );
     watch(
-      () => [
-        props.analytics,
-        props.interactive,
-        props.mapOptions,
-        props.mode,
-        props.source,
-        manifestMap.value
-      ],
+      () => [props.interactive, props.mapOptions, props.mode, props.source, manifestMap.value],
       () => void recreateMap(),
       { flush: "post" }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/vue",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "license": "Apache-2.0",
   "description": "Vue component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.29 <0.1.0-beta.0",
+    "@tileflow/core": ">=0.1.0-alpha.32 <0.1.0-beta.0",
     "@tileflow/interactions": ">=0.1.0-alpha.4 <0.1.0-beta.0"
   },
   "peerDependencies": {
@@ -46,10 +46,10 @@
     "vue": ">=3.3 <4"
   },
   "devDependencies": {
-    "@vue/server-renderer": "3.5.39",
-    "maplibre-gl": "6.9.0",
+    "@vue/server-renderer": "3.5.43",
+    "maplibre-gl": "6.13.0",
     "tsx": "^4.23.12",
-    "vue": "^3.5.26"
+    "vue": "^3.5.43"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean --external vue --external maplibre-gl",