@tileflow/react 0.1.0-alpha.35 → 0.1.0-alpha.37

package/README.md

@@ -19,6 +19,12 @@ npm install --save-dev --save-exact tileflow@alpha
 The supported peer ranges are React/React DOM 18–19 and MapLibre GL JS `>=6.4.1 <7`. The worker
 must come from the same MapLibre installation as the main module.
 
+Prepared styles may retain relative asset URLs. The component loads them through Core's shared
+resource loader before creating the map and before changing or blending themes. Sprites, fonts,
+data and model resources resolve against their declaring documents. Pending document loads are
+cancelled when the map is replaced or unmounted; `mapOptions.transformRequest` also applies to
+style and HTTP TileJSON requests.
+
 ## Prepare a map
 
 Create `tileflow.config.ts` at the application root:
@@ -110,7 +116,7 @@ Theme and `timeOfDay` changes cross-fade over 450 ms by default, respecting redu
 `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).
+[theme transitions and blends](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md).
 
 Interactive maps show the 3D scene their style declares by default: buildings with Tileflow
 landmarks and the map's Team building models, 3D trees, and street lights where the map enables
@@ -120,8 +126,8 @@ draws vegetation as the map's policy sets for the 2D view (Streets keeps its mod
 view). `vegetation` overrides vegetation visibility (omitting it uses the map default); `vegetation={false}`
 hides models and flat artwork alike. Changing either prop updates the existing map immediately.
 They do not change camera pitch and do not apply in image mode. See
-[the map's 3D scene](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/buildings-3d.md#the-maps-3d-scene)
-and [vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/trees-3d.md#visibility-and-representation).
+[the map's 3D scene](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md)
+and [vegetation controls](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.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
@@ -163,7 +169,7 @@ export function Unemployment({rates}: {rates: {ine: string; rate: number}[]}) {
 
 Rows join by `ref` here, so this map declares `boundaryAreas: {family: 'boundaries', promoteId:
 'ref'}`. Without `promoteId`, rows join by registry `id`. See
-[boundary areas and choropleths](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/boundary-areas-and-choropleths.md)
+[boundary areas and choropleths](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/README.md)
 for scales, joins and the lookup table.
 
 ## Add annotations and popups

package/dist/index.js

@@ -41,6 +41,7 @@ import { createPortal } from "react-dom";
 import {
   attachTileflowAtmosphere,
   attachTileflowFairUseNotice,
+  attachTileflowHorizonQueries,
   attachTileflowLabelPlacement,
   attachTileflowMap3D,
   attachTileflowMapLifecycle,
@@ -50,8 +51,10 @@ import {
   createTileflowThemeController,
   createTileflowTransformRequest,
   getTileflowSystemColorScheme,
+  loadTileflowRuntimeStyle,
   loadTileflowStyleFonts,
   registerTileflowContourProtocol,
+  registerTileflowPathGroundProtocol,
   registerTileflowPmtilesProtocol,
   registerTileflowWorldRequestBridge,
   subscribeTileflowSystemColorScheme,
@@ -746,12 +749,28 @@ function Map2(props) {
     const container = containerRef.current;
     let cancelled = false;
     let disposeMap;
+    const resourceLifetime = new AbortController();
+    const session = createTileflowSessionController({ source: "react" });
+    const resourceTransform = createTileflowTransformRequest({
+      getAnalytics: () => resolvedAnalyticsRef.current,
+      sessionController: session,
+      sessionId: session.sessionId,
+      transformRequest: stableMapOptions?.transformRequest ?? void 0
+    });
+    const styleLoadOptions = {
+      signal: resourceLifetime.signal,
+      transformRequest: (url, type) => resourceTransform(
+        url,
+        type
+      )
+    };
     void Promise.all([
       loadTileflowMapLibre(),
-      loadTileflowStyleFonts(initialRuntimeStyle.style, {
-        fontFaces: initialRuntimeStyle.fontFaces
+      loadTileflowRuntimeStyle(initialRuntimeStyle, styleLoadOptions).then(async (prepared) => {
+        await loadTileflowStyleFonts(prepared.style, { fontFaces: prepared.fontFaces });
+        return prepared;
       })
-    ]).then(([maplibregl]) => {
+    ]).then(([maplibregl, prepared]) => {
       if (cancelled || containerRef.current !== container) {
         return;
       }
@@ -785,7 +804,6 @@ function Map2(props) {
           setRendererBridgeDiagnostic(void 0);
         }
       };
-      const session = createTileflowSessionController({ source: "react" });
       const sessionStarter = createTileflowSessionStarter({
         getSessionId: () => session.sessionId,
         sessionId: session.sessionId,
@@ -794,6 +812,7 @@ function Map2(props) {
       const fairUseNotice = attachTileflowFairUseNotice(container);
       registerCleanup(() => fairUseNotice.dispose());
       registerTileflowContourProtocol({ addProtocol: maplibregl.addProtocol });
+      registerTileflowPathGroundProtocol({ addProtocol: maplibregl.addProtocol });
       registerTileflowPmtilesProtocol({ addProtocol: maplibregl.addProtocol });
       const worldRequestBridge = registerTileflowWorldRequestBridge({
         addProtocol: maplibregl.addProtocol,
@@ -813,7 +832,7 @@ function Map2(props) {
           stableMapOptions?.canvasContextAttributes
         ),
         container,
-        style: initialRuntimeStyle.style,
+        style: prepared.style,
         bearing: bearingRef.current,
         center: centerRef.current,
         pitch: pitchRef.current,
@@ -834,8 +853,11 @@ function Map2(props) {
       registerCleanup(attachTileflowNotices(map));
       registerCleanup(attachTileflowNauticalLights(map));
       registerCleanup(attachTileflowLabelPlacement(map));
+      registerCleanup(attachTileflowHorizonQueries(map));
       const themeController = initialRuntimeStyle.theme === void 0 ? void 0 : createTileflowThemeController({
-        initial: initialRuntimeStyle,
+        initial: prepared.family ? prepared : initialRuntimeStyle,
+        initialStyle: prepared.style,
+        styleLoadOptions,
         map,
         onTransition(transition) {
           onThemeChangeRef.current?.(transition);
@@ -1066,6 +1088,7 @@ function Map2(props) {
         });
       }
     }).catch((error) => {
+      resourceLifetime.abort();
       try {
         disposeMap?.();
       } catch (cleanupError) {
@@ -1078,6 +1101,7 @@ function Map2(props) {
     });
     return () => {
       cancelled = true;
+      resourceLifetime.abort();
       readinessRunRef.current += 1;
       disposeMap?.();
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.35",
+  "version": "0.1.0-alpha.37",
   "license": "Apache-2.0",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -43,9 +43,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.40 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.6 <0.1.0-beta.0",
-    "@tileflow/static": ">=0.1.0-alpha.28 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.45 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.7 <0.1.0-beta.0",
+    "@tileflow/static": ">=0.1.0-alpha.29 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=6.4.1 <7",
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "maplibre-gl": "6.13.0",
+    "maplibre-gl": "6.16.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0"
   },