@tileflow/react 0.1.0-alpha.29 → 0.1.0-alpha.30

package/README.md

@@ -99,12 +99,25 @@ 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.
 
+Add `timeOfDay="dusk"` beside `theme` to select a map's optional `day`, `dawn`, `dusk`, or
+`night` preset. For Streets, `theme="light"` with this preset selects the existing `dusk` palette.
+Maps without this capability ignore the option; omitting it keeps the selected theme unchanged.
+Changing it uses the existing theme transition. `themeBlend` takes precedence. See the
+[authoring contract](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md#style-with-themes-and-semantic-modules).
+
 `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).
 
+Interactive maps automatically render the map's vegetation. `vegetation` overrides visibility
+(omitting it uses the map default); false hides models and flat artwork alike. `viewMode` is `2d`
+by default and may be `3d`: only maps with `vegetation.mode: 'auto'` switch representation.
+Streets uses model trees in either view. Changing either prop updates the existing map immediately.
+These props do not change camera pitch, buildings or lighting and do not apply in image mode. See
+[vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
+
 `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,15 @@
 import * as react from 'react';
 import { CSSProperties, ImgHTMLAttributes, ReactNode } from 'react';
 import { MapOptions, Map as Map$1 } from 'maplibre-gl';
-import { TileflowBrowserThemeBlendSelection, TileflowThemeTransitionOptions, TileflowThemeTransition } from '@tileflow/core/browser';
-import { TileflowRuntimeSource, TileflowThemeSelection, TileflowAnalytics } from '@tileflow/core/runtime';
+import { TileflowBrowserThemeBlendSelection, TileflowThemeTransitionOptions, TileflowViewMode, TileflowThemeTransition } from '@tileflow/core/browser';
+import { TileflowRuntimeSource, TileflowThemeSelection, TileflowTimeOfDay, TileflowAnalytics } from '@tileflow/core/runtime';
 import { TileflowAnnotation, TileflowInteractionState, TileflowAnnotationViewContext, TileflowInteractionBinding, TileflowInteractionViewContext, TileflowInteractionDiagnostic, TileflowInteractionEvent } from '@tileflow/interactions';
 
 type TileflowMapStyleSourceProps = {
     source: TileflowRuntimeSource;
     theme?: TileflowThemeSelection;
+    /** Optional artistic preset; ignored by maps without this capability. */
+    timeOfDay?: TileflowTimeOfDay;
     /**
      * 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
@@ -23,6 +25,8 @@ type TileflowMapOptions = Omit<MapOptions, 'container' | 'style'>;
 type TileflowAnnotationRenderer<TAnnotation extends TileflowAnnotation = TileflowAnnotation> = (context: TileflowAnnotationViewContext<TAnnotation>) => ReactNode;
 type TileflowInteractionRenderer<TAnnotation extends TileflowAnnotation = TileflowAnnotation> = (context: TileflowInteractionViewContext<TAnnotation>) => ReactNode;
 type MapSharedProps = {
+    vegetation?: boolean;
+    viewMode?: TileflowViewMode;
     captureId?: string;
     imageUrl?: string;
     alt?: string;

package/dist/index.js

@@ -16,6 +16,7 @@ import {
   attachTileflowMapLifecycle,
   createTileflowSessionStarter,
   createTileflowThemeController,
+  createTileflowVegetation,
   createTileflowTransformRequest,
   getTileflowSystemColorScheme,
   loadTileflowStyleFonts,
@@ -171,6 +172,7 @@ import {
   validateTileflowBrowserThemeBlendSelection
 } from "@tileflow/core/browser";
 import {
+  isTileflowTimeOfDay,
   validateTileflowRuntimeSource,
   validateTileflowThemeSelection
 } from "@tileflow/core/runtime";
@@ -180,6 +182,9 @@ 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.timeOfDay !== void 0 && !isTileflowTimeOfDay(input.timeOfDay)) {
+    return { error: "timeOfDay must be day, dawn, dusk, or night", 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",
@@ -260,8 +265,11 @@ function Map2(props) {
     mapOptions,
     analytics,
     theme,
+    timeOfDay,
     themeBlend,
     themeTransition,
+    vegetation,
+    viewMode = "2d",
     interactionState,
     interactions = defaultInteractions,
     onInteractionDiagnostic,
@@ -302,6 +310,13 @@ function Map2(props) {
   const containerRef = useRef(null);
   const imageRef = useRef(null);
   const mapRef = useRef(null);
+  const vegetationRef = useRef(void 0);
+  const vegetationInputsRef = useRef({ vegetation, viewMode });
+  vegetationInputsRef.current = { vegetation, viewMode };
+  useEffect(() => {
+    vegetationRef.current?.setVisible(vegetation);
+    vegetationRef.current?.setViewMode(viewMode);
+  }, [vegetation, viewMode]);
   const themeControllerRef = useRef(void 0);
   const runtimeStyleRef = useRef(null);
   const interactionRuntimeRef = useRef(
@@ -370,12 +385,17 @@ function Map2(props) {
       }
       return {
         error: false,
-        name: resolveTileflowRuntimeTheme(manifestMap, selection, systemColorScheme).name
+        name: resolveTileflowRuntimeTheme(
+          manifestMap,
+          selection,
+          systemColorScheme,
+          themeBlendKey ? void 0 : timeOfDay
+        ).name
       };
     } catch {
       return { error: true, name: void 0 };
     }
-  }, [blendThemeName, manifestMap, systemColorScheme, theme, themeBlendKey]);
+  }, [blendThemeName, manifestMap, systemColorScheme, theme, themeBlendKey, timeOfDay]);
   const resolvedThemeName = themeResolution.name;
   const manifestView = resolveTileflowRuntimeView({ manifestMap });
   const manifestCenter = useStableMapOptionValue(
@@ -795,6 +815,27 @@ function Map2(props) {
           }
         });
       }
+      const vegetationController = createTileflowVegetation({
+        map,
+        ...themeController ? { controller: themeController } : {},
+        visible: vegetationInputsRef.current.vegetation,
+        viewMode: vegetationInputsRef.current.viewMode,
+        // Direct tile readers use HTTP, not MapLibre's custom World protocol.
+        transformRequest: createTileflowTransformRequest({
+          getAnalytics: () => resolvedAnalyticsRef.current,
+          sessionController: session,
+          sessionId: session.sessionId,
+          transformRequest: (url) => stableMapOptions?.transformRequest?.(
+            url,
+            "Tile"
+          )
+        })
+      });
+      vegetationRef.current = vegetationController;
+      registerCleanup(() => {
+        vegetationController.dispose();
+        if (vegetationRef.current === vegetationController) vegetationRef.current = void 0;
+      });
       const browserWindow = container.ownerDocument.defaultView;
       if (!browserWindow) {
         throw new Error("Tileflow semantic interactions require a browser document.");

package/package.json

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