@tileflow/svelte 0.1.0-alpha.33 → 0.1.0-alpha.35

package/README.md

@@ -16,6 +16,12 @@ npm install @tileflow/svelte@alpha @tileflow/core@alpha @tileflow/maps@alpha "ma
 npm install --save-dev --save-exact tileflow@alpha
 ```
 
+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:
@@ -101,7 +107,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
@@ -111,8 +117,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 props win over
 those options, then the manifest view, then shared defaults. `TileflowMap` always selects a Tileflow
@@ -224,5 +230,5 @@ managed delivery is required. Imports and the image path remain SSR-safe; intera
 requires a browser with WebGL.
 
 See the [interaction guide](https://github.com/tileflow/tileflow-sdk/blob/main/packages/interactions/README.md)
-and [browser runtime contract](https://github.com/tileflow/tileflow-sdk/blob/main/docs/contracts/framework-browser-runtime.md).
+and [browser runtime contract](https://github.com/tileflow/tileflow-sdk/blob/main/README.md).
 Use the installed declarations and README for release-specific behavior; `main` may be newer than npm.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/svelte",
-  "version": "0.1.0-alpha.33",
+  "version": "0.1.0-alpha.35",
   "license": "Apache-2.0",
   "description": "Svelte component for rendering Tileflow maps with MapLibre.",
   "type": "module",
@@ -44,15 +44,15 @@
     "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/core": ">=0.1.0-alpha.45 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.7 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=6.4.1 <7",
     "svelte": ">=5 <6"
   },
   "devDependencies": {
-    "maplibre-gl": "6.13.0",
+    "maplibre-gl": "6.16.0",
     "svelte": "^5.57.2",
     "svelte-check": "^4.7.7"
   },

package/src/TileflowMap.svelte

@@ -31,6 +31,7 @@
   import {
     attachTileflowAtmosphere,
     attachTileflowLabelPlacement,
+    attachTileflowHorizonQueries,
     attachTileflowFairUseNotice,
     attachTileflowMap3D,
     attachTileflowMapLifecycle,
@@ -41,8 +42,10 @@
     type TileflowMap3DAttachment,
     createTileflowTransformRequest,
     getTileflowSystemColorScheme,
+    loadTileflowRuntimeStyle,
     loadTileflowStyleFonts,
     registerTileflowContourProtocol,
+    registerTileflowPathGroundProtocol,
     registerTileflowPmtilesProtocol,
     registerTileflowWorldRequestBridge,
     subscribeTileflowSystemColorScheme,
@@ -164,6 +167,7 @@
   let manifestResolutionKey = '';
   let manifestResolutionState: 'error' | 'loading' | 'ready' = 'loading';
   let mapLoadId = 0;
+  let resourceLifetime: AbortController | undefined;
   let mounted = false;
   let refreshRunId = 0;
   let readinessRunId = 0;
@@ -449,6 +453,8 @@
 
   function destroyMap() {
     mapLoadId += 1;
+    resourceLifetime?.abort();
+    resourceLifetime = undefined;
     readinessRunId += 1;
     const lifecycleAttachment = mapLifecycleAttachment;
     const fairUseNotice = mapFairUseNotice;
@@ -550,15 +556,36 @@
     const loadId = mapLoadId;
     const targetContainer = container;
     const runtime = runtimeStyle;
+    const session = createTileflowSessionController({source: 'svelte'});
+    const lifetime = new AbortController();
+    resourceLifetime = lifetime;
+    const resourceTransform = createTileflowTransformRequest({
+      getAnalytics: () => resolvedAnalytics,
+      sessionController: session,
+      sessionId: session.sessionId,
+      transformRequest: mapOptions?.transformRequest ?? undefined,
+    });
+    const styleLoadOptions = {
+      signal: lifetime.signal,
+      transformRequest: (url: string, type: 'Style' | 'Source') =>
+        resourceTransform(
+          url,
+          type as Parameters<NonNullable<TileflowMapOptions['transformRequest']>>[1],
+        ),
+    };
     let maplibregl: Awaited<ReturnType<typeof loadTileflowMapLibre>>;
-
+    let prepared: Awaited<ReturnType<typeof loadTileflowRuntimeStyle>>;
     try {
-      [maplibregl] = await Promise.all([
+      [maplibregl, prepared] = await Promise.all([
         loadTileflowMapLibre(),
-        loadTileflowStyleFonts(runtime.style, {fontFaces: runtime.fontFaces}),
+        loadTileflowRuntimeStyle(runtime, styleLoadOptions).then(async (loaded) => {
+          await loadTileflowStyleFonts(loaded.style, {fontFaces: loaded.fontFaces});
+          return loaded;
+        }),
       ]);
     } catch (error) {
       if (mounted && runId === refreshRunId && loadId === mapLoadId) {
+        lifetime.abort();
         console.error('Failed to load the Tileflow map runtime', error);
         mapCaptureState = 'error';
       }
@@ -575,7 +602,6 @@
       return;
     }
 
-    const session = createTileflowSessionController({source: 'svelte'});
     const sessionStarter = createTileflowSessionStarter({
       getSessionId: () => session.sessionId,
       sessionId: session.sessionId,
@@ -583,6 +609,7 @@
     });
     mapFairUseNotice = attachTileflowFairUseNotice(targetContainer);
     registerTileflowContourProtocol({addProtocol: maplibregl.addProtocol});
+    registerTileflowPathGroundProtocol({addProtocol: maplibregl.addProtocol});
     registerTileflowPmtilesProtocol({addProtocol: maplibregl.addProtocol});
     mapWorldRequestBridge = registerTileflowWorldRequestBridge({
       addProtocol: maplibregl.addProtocol,
@@ -600,7 +627,7 @@
       container: targetContainer,
       interactive: resolvedInteractive,
       pitch: resolvedPitch,
-      style: runtime.style as StyleSpecification | string,
+      style: prepared.style as StyleSpecification,
       transformRequest: createTileflowTransformRequest({
         getAnalytics: () => resolvedAnalytics,
         sessionController: session,
@@ -616,11 +643,15 @@
     attachTileflowNotices(maplibreMap);
     attachTileflowNauticalLights(maplibreMap);
     attachTileflowLabelPlacement(maplibreMap);
+    // Feature queries and taps keep working once a steep pitch shows the horizon.
+    attachTileflowHorizonQueries(maplibreMap);
     themeController =
       runtime.theme === undefined
         ? null
         : createTileflowThemeController({
-            initial: runtime,
+            initial: prepared.family ? prepared : runtime,
+            initialStyle: prepared.style,
+            styleLoadOptions,
             map: maplibreMap,
             onTransition(transition) {
               onThemeChange?.(transition);