@tileflow/dev 0.1.0-alpha.34 → 0.1.0-alpha.35

package/THIRD_PARTY_NOTICES.md

@@ -58,8 +58,8 @@ License.
 
 ## PMTiles JavaScript 4.5.0
 
-The local Streets preview loads the separately installed `pmtiles` browser decoder to retrieve
-individual landmark GLB entries with HTTP byte ranges. PMTiles is copyright Protomaps and
+Local tileset inspection uses the separately installed `pmtiles` package to read vector and raster
+tiles from local PMTiles archives. PMTiles is copyright Protomaps and
 contributors and is distributed under the BSD 3-Clause License. Its `fflate` dependency is
 copyright 2020 Arjun Barrett and is distributed under the MIT License.
 

package/dist/devtools-browser.js

@@ -8976,7 +8976,7 @@ function readUtf8(buf, pos, end) {
   return str;
 }
 
-// src/landmarks.ts
+// src/bounded-response.ts
 async function readBoundedTileflowResponse(response, maximumBytes) {
   if (!Number.isSafeInteger(maximumBytes) || maximumBytes < 1) {
     throw new Error("invalid response byte limit");

package/dist/{preview-assets-KGUICQHG.js → preview-assets-MT3RXZMN.js}

@@ -11,8 +11,6 @@ var localMapLibreAssets = /* @__PURE__ */ new Map();
 var localTileflowBrowserJavaScript;
 var localThreeCoreJavaScript;
 var localThreeModuleJavaScript;
-var localPmtilesJavaScript;
-var localFflateJavaScript;
 function getTileflowPreviewRuntimeResponse(path) {
   if (path === "/__runtime/devtools-observer.js") {
     return textAssetResponse(
@@ -44,18 +42,6 @@ function getTileflowPreviewRuntimeResponse(path) {
   if (path === "/__runtime/three.core.min.js") {
     return textAssetResponse(getLocalThreeAsset("core"), "text/javascript; charset=utf-8");
   }
-  if (path === "/__runtime/pmtiles.js") {
-    return textAssetResponse(getLocalPmtilesAsset(), "text/javascript; charset=utf-8");
-  }
-  if (path === "/__runtime/fflate.js") {
-    return textAssetResponse(getLocalFflateAsset(), "text/javascript; charset=utf-8");
-  }
-  if (path === "/__runtime/three-addons/libs/draco/gltf/draco_decoder.wasm") {
-    return binaryAssetResponse(
-      getLocalThreeAddonBinaryAsset("libs/draco/gltf/draco_decoder.wasm"),
-      "application/wasm"
-    );
-  }
   if (path.startsWith("/__runtime/three-addons/")) {
     return textAssetResponse(
       getLocalThreeAddonAsset(path.slice("/__runtime/three-addons/".length)),
@@ -103,34 +89,6 @@ function getLocalThreeAddonAsset(relativePath) {
   if (!isPathWithin(addonRoot, assetPath)) throw new Error("Invalid Three.js addon path.");
   return readFileSync(assetPath, "utf8");
 }
-function getLocalThreeAddonBinaryAsset(relativePath) {
-  if (!/^[A-Za-z0-9_./-]+\.wasm$/.test(relativePath) || relativePath.includes("..")) {
-    throw new Error("Invalid Three.js binary addon path.");
-  }
-  const commonJsPath = localRequire.resolve("three");
-  const addonRoot = join(dirname(dirname(commonJsPath)), "examples", "jsm");
-  const assetPath = join(addonRoot, relativePath);
-  if (!isPathWithin(addonRoot, assetPath)) throw new Error("Invalid Three.js binary addon path.");
-  return readFileSync(assetPath);
-}
-function getLocalPmtilesAsset() {
-  if (localPmtilesJavaScript !== void 0) return localPmtilesJavaScript;
-  const packagePath = localRequire.resolve("pmtiles/package.json");
-  localPmtilesJavaScript = readFileSync(
-    join(dirname(packagePath), "dist", "esm", "index.js"),
-    "utf8"
-  );
-  return localPmtilesJavaScript;
-}
-function getLocalFflateAsset() {
-  if (localFflateJavaScript !== void 0) return localFflateJavaScript;
-  const commonJsPath = localRequire.resolve("fflate");
-  localFflateJavaScript = readFileSync(
-    join(dirname(dirname(commonJsPath)), "esm", "browser.js"),
-    "utf8"
-  );
-  return localFflateJavaScript;
-}
 function textAssetResponse(body, contentType) {
   return new Response(body, {
     headers: {
@@ -140,15 +98,6 @@ function textAssetResponse(body, contentType) {
     }
   });
 }
-function binaryAssetResponse(body, contentType) {
-  return new Response(new Uint8Array(body), {
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-      "Cache-Control": "no-store",
-      "Content-Type": contentType
-    }
-  });
-}
 export {
   getTileflowPreviewRuntimeResponse
 };

package/dist/preview.d.ts

@@ -3,50 +3,10 @@ import { TileflowBuildCatalog } from '@tileflow/core/build';
 
 declare function renderTileflowPreviewHtml(preview: ResolvedTileflowPreview | undefined, basePath: string, initialStatus: unknown, isSemanticPreview: boolean, fontFaces?: readonly TileflowStyleFontFace[], fitViewport?: boolean, controls?: string): string;
 
-type TileflowLandmarkAxisConvention = 'ENU_Z_UP' | 'EUN_Y_UP' | 'EUS_Y_UP';
-type TileflowLandmarkArchive = {
-    bytes: number;
-    id: string;
-    sha256: string;
-    url: string;
-};
-type TileflowLandmarkModel = {
-    archive: TileflowLandmarkArchive;
-    archiveId: string;
-    axisConvention: TileflowLandmarkAxisConvention;
-    bytes: number;
-    key: string;
-    minzoom: number;
-    sha256: string;
-    x: number;
-    y: number;
-    z: number;
-};
-type TileflowLandmark = {
-    bounds: [number, number, number, number];
-    center: [number, number];
-    id: string;
-    models: TileflowLandmarkModel[];
-    priority: number;
-};
-type TileflowLandmarkManifestV2 = {
-    archives: TileflowLandmarkArchive[];
-    id: string;
-    landmarks: TileflowLandmark[];
-    maximumCachedModels: number;
-    maximumVisibleModels: number;
-    minzoom: number;
-    schemaVersion: 2;
-};
 /** Reads a response without ever buffering more than the declared bound. */
 declare function readBoundedTileflowResponse(response: Response, maximumBytes: number): Promise<Uint8Array>;
 /** Reads and strictly decodes a bounded UTF-8 JSON response. */
 declare function readBoundedTileflowJsonResponse(response: Response, maximumBytes: number): Promise<unknown>;
-/**
- * Validates the browser preview's bounded v2 PMTiles landmark contract. Keep this function
- * self-contained: the preview serializes it into its isolated browser document.
- */
-declare function normalizeTileflowLandmarkManifest(candidate: unknown, manifestUrl: string): TileflowLandmarkManifestV2;
 
 type TileflowPreviewSelection = {
     map?: string;
@@ -68,4 +28,4 @@ declare class TileflowPreviewSelectionError extends Error {
 }
 declare function resolveTileflowPreview(project: TileflowBuildCatalog, selection?: TileflowPreviewSelection): ResolvedTileflowPreview;
 
-export { type ResolvedTileflowPreview, type TileflowLandmark, type TileflowLandmarkArchive, type TileflowLandmarkAxisConvention, type TileflowLandmarkManifestV2, type TileflowLandmarkModel, type TileflowPreviewSelection, TileflowPreviewSelectionError, normalizeTileflowLandmarkManifest, readBoundedTileflowJsonResponse, readBoundedTileflowResponse, renderTileflowPreviewHtml, resolveTileflowPreview };
+export { type ResolvedTileflowPreview, type TileflowPreviewSelection, TileflowPreviewSelectionError, readBoundedTileflowJsonResponse, readBoundedTileflowResponse, renderTileflowPreviewHtml, resolveTileflowPreview };

package/dist/preview.js

@@ -11,7 +11,7 @@ import {
   resolveThemeSelection
 } from "@tileflow/core";
 
-// src/landmarks.ts
+// src/bounded-response.ts
 async function readBoundedTileflowResponse(response, maximumBytes) {
   if (!Number.isSafeInteger(maximumBytes) || maximumBytes < 1) {
     throw new Error("invalid response byte limit");
@@ -51,94 +51,6 @@ async function readBoundedTileflowJsonResponse(response, maximumBytes) {
   const bytes = await readBoundedTileflowResponse(response, maximumBytes);
   return JSON.parse(new TextDecoder("utf-8", { fatal: true }).decode(bytes));
 }
-function normalizeTileflowLandmarkManifest(candidate, manifestUrl) {
-  const value = candidate;
-  const portableId = /^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/;
-  const sha256 = /^[a-f0-9]{64}$/;
-  const axisConventions = /* @__PURE__ */ new Set(["EUN_Y_UP", "EUS_Y_UP", "ENU_Z_UP"]);
-  if (value?.schemaVersion !== 2 || typeof value.id !== "string" || !portableId.test(value.id) || !Array.isArray(value.archives) || value.archives.length > 64 || !Array.isArray(value.landmarks) || value.landmarks.length > 4096 || !Number.isInteger(value.minzoom) || value.minzoom < 0 || value.minzoom > 24 || !Number.isInteger(value.maximumVisibleModels) || value.maximumVisibleModels < 1 || value.maximumVisibleModels > 64) {
-    throw new Error("invalid landmark manifest");
-  }
-  const minzoom = value.minzoom;
-  const maximumVisibleModels = value.maximumVisibleModels;
-  const maximumCachedModels = value.maximumCachedModels === void 0 ? Math.min(128, Math.max(maximumVisibleModels, maximumVisibleModels * 2)) : value.maximumCachedModels;
-  if (!Number.isInteger(maximumCachedModels) || maximumCachedModels < maximumVisibleModels || maximumCachedModels > 128) {
-    throw new Error("invalid landmark cache limit");
-  }
-  const archiveIds = /* @__PURE__ */ new Set();
-  const archiveMap = /* @__PURE__ */ new Map();
-  for (const input of value.archives) {
-    const archive = input;
-    if (typeof archive?.id !== "string" || !portableId.test(archive.id) || archiveIds.has(archive.id) || typeof archive.url !== "string" || archive.url.length < 1 || archive.url.length > 2048 || !Number.isSafeInteger(archive.bytes) || archive.bytes < 1 || archive.bytes > 8 * 1024 * 1024 * 1024 || typeof archive.sha256 !== "string" || !sha256.test(archive.sha256)) {
-      throw new Error("invalid landmark archive");
-    }
-    const url = new URL(archive.url, manifestUrl);
-    if (url.protocol !== "http:" && url.protocol !== "https:" || url.username !== "" || url.password !== "") {
-      throw new Error("invalid landmark archive URL");
-    }
-    const normalized = {
-      bytes: archive.bytes,
-      id: archive.id,
-      sha256: archive.sha256,
-      url: url.toString()
-    };
-    archiveIds.add(archive.id);
-    archiveMap.set(archive.id, normalized);
-  }
-  const landmarkIds = /* @__PURE__ */ new Set();
-  const landmarks = value.landmarks.map((input) => {
-    const landmark = input;
-    const center = landmark?.center;
-    const bounds = landmark?.bounds;
-    if (typeof landmark?.id !== "string" || !portableId.test(landmark.id) || landmarkIds.has(landmark.id) || !Array.isArray(center) || center.length !== 2 || !center.every(Number.isFinite) || center[0] < -180 || center[0] > 180 || center[1] < -90 || center[1] > 90 || !Array.isArray(bounds) || bounds.length !== 4 || !bounds.every(Number.isFinite) || bounds[0] < -180 || bounds[2] > 180 || bounds[1] < -90 || bounds[3] > 90 || bounds[0] > bounds[2] || bounds[1] > bounds[3] || center[0] < bounds[0] || center[0] > bounds[2] || center[1] < bounds[1] || center[1] > bounds[3] || landmark.priority !== void 0 && !Number.isFinite(landmark.priority) || !Array.isArray(landmark.models) || landmark.models.length < 1 || landmark.models.length > 8) {
-      throw new Error("invalid landmark entry");
-    }
-    landmarkIds.add(landmark.id);
-    const models = landmark.models.map((inputModel) => {
-      const model = inputModel;
-      if (!model) throw new Error("invalid landmark model");
-      const archive = typeof model.archiveId === "string" ? archiveMap.get(model.archiveId) : void 0;
-      if (!archive || !Number.isInteger(model?.minzoom) || model.minzoom < minzoom || model.minzoom > 24 || !Number.isInteger(model.z) || model.z < 0 || model.z > 26 || !Number.isInteger(model.x) || model.x < 0 || model.x >= 2 ** model.z || !Number.isInteger(model.y) || model.y < 0 || model.y >= 2 ** model.z || !Number.isSafeInteger(model.bytes) || model.bytes < 1 || model.bytes > 64 * 1024 * 1024 || typeof model.sha256 !== "string" || !sha256.test(model.sha256) || typeof model.axisConvention !== "string" || !axisConventions.has(model.axisConvention)) {
-        throw new Error("invalid landmark model");
-      }
-      return {
-        archive,
-        archiveId: model.archiveId,
-        axisConvention: model.axisConvention,
-        bytes: model.bytes,
-        key: [archive.sha256, model.z, model.x, model.y, model.sha256].join(":"),
-        minzoom: model.minzoom,
-        sha256: model.sha256,
-        x: model.x,
-        y: model.y,
-        z: model.z
-      };
-    });
-    models.sort((left, right) => left.minzoom - right.minzoom || left.key.localeCompare(right.key));
-    if (new Set(models.map((model) => model.minzoom)).size !== models.length) {
-      throw new Error("duplicate landmark LOD zoom");
-    }
-    if (models[0].minzoom !== minzoom) {
-      throw new Error("landmark requires a base model");
-    }
-    return {
-      bounds,
-      center,
-      id: landmark.id,
-      models,
-      priority: landmark.priority ?? 0
-    };
-  });
-  return {
-    archives: [...archiveMap.values()],
-    id: value.id,
-    landmarks,
-    maximumCachedModels,
-    maximumVisibleModels,
-    minzoom,
-    schemaVersion: 2
-  };
-}
 
 // src/preview-scene.ts
 var previewSceneClient = String.raw`
@@ -230,6 +142,42 @@ function createPreviewSceneThemes(map, readSun) {
   };
 }
 
+// src/preview-style-reads.ts
+function createPreviewStyleReads(map) {
+  let snapshot;
+  map.on("style.load", () => {
+    snapshot = void 0;
+  });
+  return {
+    metadata() {
+      if (!snapshot || snapshot.style !== map.style) {
+        const style = map.getStyle();
+        if (!style) return void 0;
+        snapshot = { style: map.style, metadata: style.metadata };
+      }
+      return snapshot.metadata;
+    },
+    // Layers change between style loads, so they are read live, in the shape of the style's own
+    // layers. Custom layers have no style definition; getStyle leaves them out too.
+    layers() {
+      const layers = [];
+      for (const id of map.getLayersOrder()) {
+        const layer = map.getLayer(id);
+        if (!layer || layer.type === "custom") continue;
+        layers.push({
+          id: layer.id,
+          type: layer.type,
+          metadata: layer.metadata,
+          "source-layer": layer.sourceLayer,
+          minzoom: layer.minzoom,
+          maxzoom: layer.maxzoom
+        });
+      }
+      return layers;
+    }
+  };
+}
+
 // src/preview-html.ts
 function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticPreview, fontFaces = [], fitViewport = false, controls) {
   const styleUrl = preview ? `${basePath}/styles/${preview.mapName}/${preview.themeName}.json${controls ? `?${new URLSearchParams({ controls })}` : ""}` : void 0;
@@ -341,7 +289,7 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
     <div class="badge" id="badge">Tileflow preview</div>
     <div class="status" id="status" role="status"></div>
     <div id="map"></div>
-    <script type="importmap">{"imports":{"fflate":"${basePath}/__runtime/fflate.js","three":"${basePath}/__runtime/three.module.js"}}</script>
+    <script type="importmap">{"imports":{"three":"${basePath}/__runtime/three.module.js"}}</script>
     <script type="module">
       import * as maplibregl from "${basePath}/__runtime/maplibre-gl.mjs";
       import {createPreviewObserver} from "${basePath}/__runtime/devtools-observer.js";
@@ -349,7 +297,7 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
       import {registerTileflowContourProtocol} from "${basePath}/__runtime/tileflow-browser.js";
       import {registerTileflowPmtilesProtocol} from "${basePath}/__runtime/tileflow-browser.js";
       import {attachTileflowNotices} from "${basePath}/__runtime/tileflow-browser.js";
-      import {createTileflowBuildings3D, createTileflowStreetLights, createTileflowVegetation} from "${basePath}/__runtime/tileflow-browser.js";
+      import {createTileflowMap3D} from "${basePath}/__runtime/tileflow-browser.js";
       import {readTileflowSunPreset, resolveTileflowSun, tileflowDefaultSunPreset} from "${basePath}/__runtime/tileflow-browser.js";
 
       maplibregl.setWorkerUrl("${basePath}/__runtime/maplibre-gl-worker.mjs");
@@ -359,7 +307,6 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
       if (window.parent !== window) document.documentElement.dataset.devtoolsEmbedded = "true";
 
       const initialStatus = ${JSON.stringify(initialStatus)};
-      const normalizeTileflowLandmarkManifest = ${normalizeTileflowLandmarkManifest.toString()};
       const readBoundedTileflowResponse = ${readBoundedTileflowResponse.toString()};
       const readBoundedTileflowJsonResponse = ${readBoundedTileflowJsonResponse.toString()};
       const initialGeneration = initialStatus.generation;
@@ -409,16 +356,6 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
       }
       let threeDimensionalEnabled = readToggleFromUrl("buildings3d", true);
       let treesEnabled = readToggleFromUrl("trees3d", true);
-      const landmarkState = {
-        active: [],
-        cacheLimit: undefined,
-        enabled: threeDimensionalEnabled,
-        manifestId: undefined,
-        loaded: [],
-        loading: [],
-        errors: []
-      };
-      globalThis.__tileflowLandmarkState = landmarkState;
       const buildingWireframeMetrics = {
         buildingCount: 0,
         refreshMilliseconds: undefined,
@@ -427,22 +364,11 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
       };
       globalThis.__tileflowBuildingWireframeMetrics = buildingWireframeMetrics;
       let THREE;
-      let GLTFLoader;
-      let DRACOLoader;
-      let MeshoptDecoder;
       let LineMaterial;
       let LineSegments2;
       let LineSegmentsGeometry;
-      let PMTiles;
-      let FetchSource;
-      let landmarkDracoLoader;
       let threeCoreRuntimePromise;
       let buildingWireframeRuntimePromise;
-      let landmarkRuntimePromise;
-      let pmtilesRuntimePromise;
-      const landmarkManifestPromises = new Map();
-      const landmarkManifestMaximumBytes = 1024 * 1024;
-      const landmarkManifestTimeoutMs = 10000;
 
       function loadThreeCoreRuntime() {
         if (!threeCoreRuntimePromise) {
@@ -471,89 +397,6 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
         return buildingWireframeRuntimePromise;
       }
 
-      function loadLandmarkRuntime() {
-        if (!landmarkRuntimePromise) {
-          landmarkRuntimePromise = Promise.all([
-            loadThreeCoreRuntime(),
-            import("${basePath}/__runtime/three-addons/loaders/GLTFLoader.js"),
-            import("${basePath}/__runtime/three-addons/loaders/DRACOLoader.js"),
-            import("${basePath}/__runtime/three-addons/libs/meshopt_decoder.module.js"),
-            loadPmtilesRuntime()
-          ]).then(([, gltfLoaderModule, dracoLoaderModule, meshoptDecoderModule, pmtilesModule]) => {
-            GLTFLoader = gltfLoaderModule.GLTFLoader;
-            DRACOLoader = dracoLoaderModule.DRACOLoader;
-            MeshoptDecoder = meshoptDecoderModule.MeshoptDecoder;
-            PMTiles = pmtilesModule.PMTiles;
-            FetchSource = pmtilesModule.FetchSource;
-            landmarkDracoLoader = new DRACOLoader()
-              .setDecoderPath("${basePath}/__runtime/three-addons/libs/draco/gltf/")
-              .setDecoderConfig({type: "wasm"});
-            landmarkDracoLoader.preload();
-          });
-        }
-        return landmarkRuntimePromise;
-      }
-
-      function loadPmtilesRuntime() {
-        if (!pmtilesRuntimePromise) {
-          pmtilesRuntimePromise = import("${basePath}/__runtime/pmtiles.js").then((pmtilesModule) => {
-            PMTiles = pmtilesModule.PMTiles;
-            FetchSource = pmtilesModule.FetchSource;
-            return pmtilesModule;
-          });
-        }
-        return pmtilesRuntimePromise;
-      }
-
-      function waitForLandmarkManifest(promise, signal) {
-        if (!signal) return promise;
-        if (signal.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
-        return new Promise((resolve, reject) => {
-          const abort = () => reject(new DOMException("Aborted", "AbortError"));
-          signal.addEventListener("abort", abort, {once: true});
-          promise.then(resolve, reject).finally(() => signal.removeEventListener("abort", abort));
-        });
-      }
-
-      function loadLandmarkManifestCandidate(manifestUrl, signal) {
-        const existing = landmarkManifestPromises.get(manifestUrl);
-        if (existing) return waitForLandmarkManifest(existing, signal);
-        const resolvedUrl = new URL(manifestUrl, location.href);
-        if (
-          !["http:", "https:"].includes(resolvedUrl.protocol) ||
-          resolvedUrl.username ||
-          resolvedUrl.password
-        ) throw new Error("invalid landmark manifest URL");
-        const controller = new AbortController();
-        const timeout = setTimeout(() => controller.abort(), landmarkManifestTimeoutMs);
-        const pending = (async () => {
-          try {
-            const response = await fetch(resolvedUrl, {
-              credentials: "include",
-              signal: controller.signal
-            });
-            if (!response.ok) throw new Error("HTTP " + response.status);
-            return readBoundedTileflowJsonResponse(response, landmarkManifestMaximumBytes);
-          } finally {
-            clearTimeout(timeout);
-          }
-        })();
-        landmarkManifestPromises.set(manifestUrl, pending);
-        pending.catch(() => {
-          if (landmarkManifestPromises.get(manifestUrl) === pending) {
-            landmarkManifestPromises.delete(manifestUrl);
-          }
-        });
-        return waitForLandmarkManifest(pending, signal);
-      }
-
-      function loadLandmarkPrerequisites(manifestUrl, signal) {
-        return Promise.all([
-          loadLandmarkRuntime(),
-          loadLandmarkManifestCandidate(manifestUrl, signal)
-        ]);
-      }
-
       function percentile(values, percentileValue) {
         if (values.length === 0) return undefined;
         const sorted = [...values].sort((left, right) => left - right);
@@ -1021,7 +864,10 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
       }
 
       function updateGlobeBackdrop(map) {
-        const projection = map.getProjection?.()?.type ?? map.getStyle?.()?.projection?.type;
+        // getProjection reads the style's projection without serializing the style.
+        const projection = map.getProjection
+          ? map.getProjection()?.type
+          : map.getStyle?.()?.projection?.type;
         const container = map.getContainer?.();
         if (!container || !projection) return;
         if (projection !== "globe") {
@@ -1036,7 +882,7 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
       // Uses the map's declared atmosphere for the preview's space and rim, so a themed globe shows
       // its own colours; maps without one keep the default backdrop.
       function applyAtmosphereBackdrop(map, container) {
-        const atmosphere = map.getStyle?.()?.metadata?.["tileflow:atmosphere"];
+        const atmosphere = styleReads(map).metadata()?.["tileflow:atmosphere"];
         const rgba = (hex, alpha) => {
           const match = /^#([0-9a-f]{6})$/i.exec(String(hex ?? ""));
           if (!match) return undefined;
@@ -1512,530 +1358,44 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
         return zoom >= minzoom && zoom < maxzoom;
       }
 
-      function createLandmarkLayer(map, configLayer, fallbackLayers = []) {
-        const manifestUrl = configLayer.metadata?.["tileflow:landmark-manifest-url"];
-        const {minzoom: landmarkMinimumZoom, maxzoom: landmarkMaximumZoom} =
-          styleLayerZoomRange(configLayer);
-        const abortController = new AbortController();
-        const loaded = new Map();
-        const loading = new Map();
-        const archiveReaders = new Map();
-        const activeLandmarkIds = new Set();
-        let cacheClock = 0;
-        let camera;
-        let renderer;
-        let scene;
-        let group;
-        let sceneOriginMercator;
-        let sceneElevation = 0;
-        let manifest;
-        let fallbackSignature;
-        let queuedRefresh;
-        const mapMatrix = new THREE.Matrix4();
-        const sceneMatrix = new THREE.Matrix4();
-
-        function overlapsViewport(bounds, paddingRatio = 0) {
-          const viewport = map.getBounds();
-          const longitudePadding = Math.abs(viewport.getEast() - viewport.getWest()) * paddingRatio;
-          const latitudePadding = Math.abs(viewport.getNorth() - viewport.getSouth()) * paddingRatio;
-          return !(
-            bounds[2] < viewport.getWest() - longitudePadding ||
-            bounds[0] > viewport.getEast() + longitudePadding ||
-            bounds[3] < viewport.getSouth() - latitudePadding ||
-            bounds[1] > viewport.getNorth() + latitudePadding
-          );
-        }
-
-        function updateLandmarkFallbackFilters() {
-          const readyIds = [...activeLandmarkIds]
-            .filter((id) => loaded.has(id))
-            .sort();
-          const signature = JSON.stringify(readyIds);
-          if (signature === fallbackSignature) return;
-          fallbackSignature = signature;
-          for (const fallback of fallbackLayers) {
-            if (!map.getLayer(fallback.id)) continue;
-            const spatialExclusions = (fallback.spatialFallbacks ?? [])
-              .filter((entry) => readyIds.includes(entry.id))
-              .map((entry) => ["!", ["within", {
-                type: "Polygon",
-                coordinates: [[
-                  [entry.bounds[0], entry.bounds[1]],
-                  [entry.bounds[2], entry.bounds[1]],
-                  [entry.bounds[2], entry.bounds[3]],
-                  [entry.bounds[0], entry.bounds[3]],
-                  [entry.bounds[0], entry.bounds[1]]
-                ]]
-              }]]);
-            map.setFilter(
-              fallback.id,
-              readyIds.length === 0 && spatialExclusions.length === 0
-                ? (fallback.filter ?? null)
-                : [
-                    "all",
-                    ...(fallback.filter ? [fallback.filter] : []),
-                    [
-                      "!",
-                      ["in", ["get", "landmark_id"], ["literal", readyIds]]
-                    ],
-                    ...spatialExclusions
-                  ]
-            );
-          }
-        }
-
-        function queueRefresh() {
-          if (queuedRefresh !== undefined) return;
-          queuedRefresh = setTimeout(() => {
-            queuedRefresh = undefined;
-            refresh();
-          }, 100);
-        }
-
-        function ensureSceneOrigin(elevation) {
-          if (sceneOriginMercator) return;
-          sceneElevation = elevation;
-          sceneOriginMercator = maplibregl.MercatorCoordinate.fromLngLat(
-            map.getCenter(),
-            elevation
-          );
-        }
-
-        function localPosition(lng, lat, elevation) {
-          const mercator = maplibregl.MercatorCoordinate.fromLngLat([lng, lat]);
-          const mercatorPerMeter = sceneOriginMercator.meterInMercatorCoordinateUnits();
-          return new THREE.Vector3(
-            (mercator.x - sceneOriginMercator.x) / mercatorPerMeter,
-            elevation - sceneElevation,
-            (sceneOriginMercator.y - mercator.y) / mercatorPerMeter
-          );
-        }
-
-        function disposeModel(model) {
-          const disposed = new Set();
-          group?.remove(model);
-          for (const texture of model.userData?.tileflowDetachedTextures ?? []) {
-            if (!texture?.isTexture || disposed.has(texture)) continue;
-            disposed.add(texture);
-            texture.dispose();
-          }
-          for (const material of model.userData?.tileflowDetachedMaterials ?? []) {
-            if (!material || disposed.has(material)) continue;
-            for (const value of Object.values(material)) {
-              if (value?.isTexture && !disposed.has(value)) {
-                disposed.add(value);
-                value.dispose();
-              }
-            }
-            disposed.add(material);
-            material.dispose?.();
-          }
-          model.traverse((object) => {
-            if (object.geometry && !disposed.has(object.geometry)) {
-              disposed.add(object.geometry);
-              object.geometry.dispose?.();
-            }
-            const materials = Array.isArray(object.material)
-              ? object.material
-              : [object.material];
-            for (const material of materials) {
-              if (!material || disposed.has(material)) continue;
-              for (const value of Object.values(material)) {
-                if (value?.isTexture && !disposed.has(value)) {
-                  disposed.add(value);
-                  value.dispose();
-                }
-              }
-              disposed.add(material);
-              material.dispose?.();
-            }
-          });
-        }
-
-        function harmonizeLandmarkModel(model) {
-          const detachedMaterials = new Set();
-          const uniformMaterial = new THREE.MeshStandardMaterial({
-            alphaTest: 0,
-            color: "#EEE4D4",
-            depthWrite: true,
-            metalness: 0,
-            opacity: 1,
-            roughness: 0.9,
-            side: THREE.DoubleSide,
-            transparent: false
-          });
-          model.traverse((object) => {
-            if (!object.isMesh) return;
-            const originalMaterials = Array.isArray(object.material)
-              ? object.material
-              : [object.material];
-            for (const material of originalMaterials) {
-              if (material) detachedMaterials.add(material);
-            }
-            object.material = Array.isArray(object.material)
-              ? object.material.map(() => uniformMaterial)
-              : uniformMaterial;
-          });
-          model.userData.tileflowDetachedMaterials = [...detachedMaterials];
-        }
-
-        function normalizeLandmarkAxes(sourceModel, axisConvention) {
-          if (axisConvention === "EUN_Y_UP") return sourceModel;
-          if (axisConvention === "ENU_Z_UP") {
-            sourceModel.rotateX(-Math.PI / 2);
-          }
-          const normalizedModel = new THREE.Group();
-          normalizedModel.scale.z = -1;
-          normalizedModel.add(sourceModel);
-          return normalizedModel;
-        }
-
-        function unloadLandmark(id) {
-          const entry = loaded.get(id);
-          if (!entry) return;
-          disposeModel(entry.model);
-          loaded.delete(id);
-          landmarkState.loaded = [...loaded.keys()];
-          fallbackSignature = undefined;
-        }
-
-        function enforceCacheLimit() {
-          if (!manifest || loaded.size <= manifest.maximumCachedModels) return;
-          const evictionCandidates = [...loaded.entries()]
-            .filter(([id]) => !activeLandmarkIds.has(id))
-            .sort(
-              ([leftId, left], [rightId, right]) =>
-                left.lastUsed - right.lastUsed || leftId.localeCompare(rightId)
-            );
-          while (
-            loaded.size > manifest.maximumCachedModels &&
-            evictionCandidates.length > 0
-          ) {
-            unloadLandmark(evictionCandidates.shift()[0]);
-          }
-        }
-
-        function landmarkModelAtZoom(landmark, zoom) {
-          let selected = landmark.models[0];
-          for (const candidate of landmark.models) {
-            if (candidate.minzoom > zoom) break;
-            selected = candidate;
-          }
-          return selected;
-        }
-
-        async function sha256Hex(bytes) {
-          const digest = await crypto.subtle.digest("SHA-256", bytes);
-          return [...new Uint8Array(digest)]
-            .map((value) => value.toString(16).padStart(2, "0"))
-            .join("");
-        }
-
-        function archiveReader(archive) {
-          let reader = archiveReaders.get(archive.url);
-          if (!reader) {
-            reader = new PMTiles(
-              new FetchSource(archive.url, new Headers(), "include")
-            );
-            archiveReaders.set(archive.url, reader);
-          }
-          return reader;
-        }
-
-        async function loadLandmarkBytes(modelDefinition) {
-          const tile = await archiveReader(modelDefinition.archive).getZxy(
-            modelDefinition.z,
-            modelDefinition.x,
-            modelDefinition.y,
-            abortController.signal
-          );
-          if (!tile) throw new Error("landmark entry is missing from PMTiles");
-          if (tile.data.byteLength !== modelDefinition.bytes) {
-            throw new Error("landmark entry has an unexpected byte length");
-          }
-          if ((await sha256Hex(tile.data)) !== modelDefinition.sha256) {
-            throw new Error("landmark entry has an unexpected SHA-256");
-          }
-          return tile.data;
-        }
-
-        function loadLandmark(landmark, requestedModel) {
-          const cached = loaded.get(landmark.id);
-          const nextModel = cached ? requestedModel : landmark.models[0];
-          if (cached?.modelKey === nextModel.key) {
-            cached.lastUsed = ++cacheClock;
-            cached.model.visible = activeLandmarkIds.has(landmark.id);
-            return;
-          }
-          if (cached) {
-            // Keep the previous LOD visible until its replacement has loaded.
-            cached.lastUsed = ++cacheClock;
-            cached.model.visible = activeLandmarkIds.has(landmark.id);
-          }
-          if (loading.has(landmark.id)) return;
-          loading.set(landmark.id, nextModel.key);
-          landmarkState.loading = [...loading.keys()];
-          const loader = new GLTFLoader();
-          loader.setMeshoptDecoder(MeshoptDecoder);
-          loader.setDRACOLoader(landmarkDracoLoader);
-          loader.setWithCredentials(true);
-          const fail = (error) => {
-            if (loading.get(landmark.id) !== nextModel.key) return;
-            loading.delete(landmark.id);
-            landmarkState.loading = [...loading.keys()];
-            landmarkState.errors = [
-              ...landmarkState.errors.filter((item) => item.id !== landmark.id),
-              {id: landmark.id, message: String(error)}
-            ];
-            console.warn("Tileflow landmark failed to load", landmark.id, error);
-          };
-          void loadLandmarkBytes(nextModel).then((bytes) => {
-            if (loading.get(landmark.id) !== nextModel.key) return;
-            loader.parse(
-              bytes,
-              new URL(".", nextModel.archive.url).toString(),
-            (gltf) => {
-              if (loading.get(landmark.id) !== nextModel.key) {
-                disposeModel(gltf.scene);
-                return;
-              }
-              loading.delete(landmark.id);
-              landmarkState.loading = [...loading.keys()];
-              if (abortController.signal.aborted) {
-                disposeModel(gltf.scene);
-                return;
-              }
-              const elevation = map.queryTerrainElevation(landmark.center) ?? 0;
-              ensureSceneOrigin(elevation);
-              const model = normalizeLandmarkAxes(
-                gltf.scene,
-                nextModel.axisConvention
-              );
-              model.name = "tileflow-landmark-" + landmark.id;
-              harmonizeLandmarkModel(model);
-              model.position.copy(
-                localPosition(landmark.center[0], landmark.center[1], elevation)
-              );
-              model.traverse((object) => {
-                if (!object.isMesh) return;
-                object.frustumCulled = true;
-                object.castShadow = false;
-                object.receiveShadow = false;
-              });
-              model.visible = activeLandmarkIds.has(landmark.id);
-              if (loaded.has(landmark.id)) unloadLandmark(landmark.id);
-              loaded.set(landmark.id, {
-                lastUsed: ++cacheClock,
-                model,
-                modelKey: nextModel.key
-              });
-              landmarkState.errors = landmarkState.errors.filter(
-                (item) => item.id !== landmark.id
-              );
-              landmarkState.loaded = [...loaded.keys()];
-              group.add(model);
-              enforceCacheLimit();
-              fallbackSignature = undefined;
-              refresh();
-            },
-              fail
-            );
-          }).catch(fail);
-        }
-
-        function refresh() {
-          if (
-            !threeDimensionalEnabled ||
-            !manifest ||
-            !styleLayerIsVisibleAtZoom(configLayer, map.getZoom())
-          ) {
-            activeLandmarkIds.clear();
-            landmarkState.active = [];
-            for (const entry of loaded.values()) entry.model.visible = false;
-            updateLandmarkFallbackFilters();
-            return;
-          }
-          const zoom = map.getZoom();
-          const visible = manifest.landmarks
-            .filter((landmark) => overlapsViewport(landmark.bounds))
-            .sort(
-              (left, right) =>
-                right.priority - left.priority || (left.id < right.id ? -1 : left.id > right.id ? 1 : 0)
-            )
-            .slice(0, manifest.maximumVisibleModels);
-          activeLandmarkIds.clear();
-          for (const landmark of visible) activeLandmarkIds.add(landmark.id);
-          landmarkState.active = visible.map((landmark) => landmark.id);
-          for (const [id, entry] of loaded) {
-            entry.model.visible = activeLandmarkIds.has(id);
-          }
-          for (const landmark of visible) {
-            loadLandmark(landmark, landmarkModelAtZoom(landmark, zoom));
-          }
-          const nearbyCacheSlots = Math.max(
-            0,
-            manifest.maximumCachedModels - visible.length
-          );
-          const nearby = manifest.landmarks
-            .filter(
-              (landmark) =>
-                !activeLandmarkIds.has(landmark.id) &&
-                overlapsViewport(landmark.bounds, 0.35)
-            )
-            .sort(
-              (left, right) =>
-                right.priority - left.priority || (left.id < right.id ? -1 : left.id > right.id ? 1 : 0)
-            )
-            .slice(0, nearbyCacheSlots);
-          for (const landmark of nearby) {
-            loadLandmark(landmark, landmark.models[0]);
-          }
-          enforceCacheLimit();
-          updateLandmarkFallbackFilters();
-          map.triggerRepaint();
-        }
-
-        function normalizeManifest(candidate) {
-          return normalizeTileflowLandmarkManifest(candidate, manifestUrl);
-        }
-
-        async function loadManifest() {
-          try {
-            const candidate = await loadLandmarkManifestCandidate(
-              manifestUrl,
-              abortController.signal
-            );
-            if (abortController.signal.aborted) return;
-            manifest = normalizeManifest(candidate);
-            landmarkState.manifestId = candidate.id;
-            landmarkState.cacheLimit = manifest.maximumCachedModels;
-            refresh();
-          } catch (error) {
-            if (error?.name !== "AbortError") {
-              console.warn("Tileflow landmark manifest failed to load", error);
-            }
-          }
-        }
-
-        return {
-          id: "tileflow-landmarks-3d",
-          type: "custom",
-          renderingMode: "3d",
-          minzoom: landmarkMinimumZoom,
-          ...(Number.isFinite(landmarkMaximumZoom)
-            ? {maxzoom: landmarkMaximumZoom}
-            : {}),
-          metadata: {"tileflow:3d-toggle": "landmark"},
-          onAdd(_map, gl) {
-            camera = new THREE.Camera();
-            scene = new THREE.Scene();
-            scene.rotateX(Math.PI / 2);
-            scene.scale.multiply(new THREE.Vector3(1, 1, -1));
-            group = new THREE.Group();
-            scene.add(group);
-            scene.add(new THREE.AmbientLight(0xffffff, 2.2));
-            scene.add(new THREE.HemisphereLight(0xfff8e8, 0xd8cfbd, 0.8));
-            const sun = new THREE.DirectionalLight(0xffffff, 0.45);
-            sun.position.set(-120, 220, 100);
-            scene.add(sun);
-            renderer = new THREE.WebGLRenderer({
-              canvas: map.getCanvas(),
-              context: gl
-            });
-            renderer.autoClear = false;
-            renderer.outputColorSpace = THREE.SRGBColorSpace;
-            map.on("move", queueRefresh);
-            map.on("moveend", refresh);
-            map.on("tileflow:3d-toggle", refresh);
-            void loadManifest();
-          },
-          render(_gl, options) {
-            if (
-              !threeDimensionalEnabled ||
-              !sceneOriginMercator ||
-              group.children.length === 0
-            ) return;
-            const meter = sceneOriginMercator.meterInMercatorCoordinateUnits();
-            mapMatrix.fromArray(options.defaultProjectionData.mainMatrix);
-            sceneMatrix
-              .makeTranslation(
-                sceneOriginMercator.x,
-                sceneOriginMercator.y,
-                sceneOriginMercator.z
-              )
-              .scale(new THREE.Vector3(meter, -meter, meter));
-            camera.projectionMatrix.copy(mapMatrix).multiply(sceneMatrix);
-            renderer.resetState();
-            renderer.render(scene, camera);
-          },
-          onRemove() {
-            abortController.abort();
-            if (queuedRefresh !== undefined) clearTimeout(queuedRefresh);
-            map.off("move", queueRefresh);
-            map.off("moveend", refresh);
-            map.off("tileflow:3d-toggle", refresh);
-            for (const entry of loaded.values()) disposeModel(entry.model);
-            loaded.clear();
-            for (const fallback of fallbackLayers) {
-              if (map.getLayer(fallback.id)) {
-                map.setFilter(fallback.id, fallback.filter ?? null);
-              }
-            }
-            renderer?.dispose();
-          }
-        };
-      }
-
-      function addLandmarkLayerIfConfigured(map, styleLayers) {
-        const configLayer = styleLayers.find(
-          (layer) => layer.metadata?.["tileflow:landmark-manifest-url"]
-        );
-        if (!configLayer || map.getLayer("tileflow-landmarks-3d")) return;
-        const fallbackLayers = styleLayers
-          .filter((layer) => layer.metadata?.["tileflow:landmark-fallback"] === true)
-          .map((layer) => ({
-            filter: layer.filter,
-            id: layer.id,
-            spatialFallbacks:
-              layer.metadata?.["tileflow:landmark-spatial-fallbacks"] ?? []
-          }));
-        // Landmark custom layers use Mercator world coordinates.
-        if (map.getProjection().type !== "mercator") {
-          map.setProjection({type: "mercator"});
-        }
-        const firstForegroundLabel = styleLayers.find(
-          (layer) =>
-            (layer.id.startsWith("tileflow-label-") &&
-              !layer.id.startsWith("tileflow-label-road-")) ||
-            layer.id === "tileflow-poi" ||
-            layer.id.startsWith("tileflow-poi-")
-        )?.id;
-        const treeLayer = map.getLayer("tileflow-vegetation-trees")
-          ? "tileflow-vegetation-trees"
-          : firstForegroundLabel;
-        map.addLayer(createLandmarkLayer(map, configLayer, fallbackLayers), treeLayer);
-      }
-
-      // Core's 3D layers, as an application mounts them: the map's style describes how its
+      // Core's 3D scene, as an application mounts it: the map's style describes how its
       // buildings, trees and street lights look, and the controls only show and hide them. The
       // vegetation control hides all trees when off. The preview shows one theme at a
       // time, so the style on screen holds the sun and the design.
-      const coreScene = {buildings: undefined, trees: undefined, lights: undefined, buildingsShown: undefined, animation: "0"};
+      const coreScene = {scene: undefined, shown: undefined, buildingsShown: undefined, animation: "0"};
       const runtimeLayerVisibility = {};
       globalThis.__tileflowPreviewScene = coreScene;
       globalThis.__tileflowRuntimeVisibility = (id, visible) => {
         if (!['tileflow-buildings-3d','tileflow-trees-3d','tileflow-street-lights'].includes(id)) return undefined;
-        if (typeof visible === 'boolean') { runtimeLayerVisibility[id]=visible; mountCoreScene(map); map.triggerRepaint(); }
+        const previewMap = globalThis.__tileflowPreviewMap;
+        if (typeof visible === 'boolean') {
+          runtimeLayerVisibility[id] = visible;
+          if (previewMap) { mountCoreScene(previewMap); previewMap.triggerRepaint(); }
+        }
         return runtimeLayerVisibility[id] !== false;
       };
       // Explicit observation capability: controllers stay private to the preview and expose
       // only their public state/statistics to the parent inspector.
-      globalThis.__tileflowInspectModels = () => [...(coreScene.buildings?.inspectModels?.() || []), ...(coreScene.trees?.inspectModels?.() || [])];
-      globalThis.__tileflowDescribeRuntimeLayers = () => ({
-        ...(coreScene.buildings ? {"tileflow-buildings-3d": {controller:"Buildings 3D", state:{visible:runtimeLayerVisibility["tileflow-buildings-3d"] !== false, shown:coreScene.buildingsShown, scale:coreScene.buildings.scale}, stats:coreScene.buildings.stats}} : {}),
-        ...(coreScene.trees ? {"tileflow-trees-3d": {controller:"Vegetation", state:{visible:runtimeLayerVisibility["tileflow-trees-3d"] !== false, representation:coreScene.trees.representation}, stats:coreScene.trees.stats}} : {}),
-        ...(coreScene.lights ? {"tileflow-street-lights": {controller:"Street lights", state:{visible:runtimeLayerVisibility["tileflow-street-lights"] !== false, mounted:true}, stats:coreScene.lights.stats}} : {})
-      });
+      globalThis.__tileflowInspectModels = () => [...(coreScene.scene?.buildings?.inspectModels?.() || []), ...(coreScene.scene?.vegetation?.inspectModels?.() || [])];
+      globalThis.__tileflowDescribeRuntimeLayers = () => {
+        const {buildings, vegetation, streetLights} = coreScene.scene ?? {};
+        return {
+          ...(buildings ? {"tileflow-buildings-3d": {controller:"Buildings 3D", state:{visible:runtimeLayerVisibility["tileflow-buildings-3d"] !== false, shown:coreScene.buildingsShown, scale:buildings.scale}, stats:buildings.stats}} : {}),
+          ...(vegetation ? {"tileflow-trees-3d": {controller:"Vegetation", state:{visible:runtimeLayerVisibility["tileflow-trees-3d"] !== false, representation:vegetation.representation}, stats:vegetation.stats}} : {}),
+          ...(streetLights ? {"tileflow-street-lights": {controller:"Street lights", state:{visible:runtimeLayerVisibility["tileflow-street-lights"] !== false, mounted:true}, stats:streetLights.stats}} : {})
+        };
+      };
+      const createPreviewStyleReads = ${createPreviewStyleReads.toString()};
+      const previewStyleReads = new WeakMap();
+      // Style reads for code that runs on every camera move or style event.
+      function styleReads(map) {
+        let reads = previewStyleReads.get(map);
+        if (!reads) {
+          reads = createPreviewStyleReads(map);
+          previewStyleReads.set(map, reads);
+        }
+        return reads;
+      }
       const createPreviewSceneThemes = ${createPreviewSceneThemes.toString()};
       const coreSceneThemeControllers = new WeakMap();
       function coreSceneThemes(map) {
@@ -2052,26 +1412,34 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
         if (mountingCoreScene) return;
         mountingCoreScene = true;
         try {
-          const metadata = map.getStyle()?.metadata ?? {};
-          const controller = coreSceneThemes(map);
-          if (!coreScene.buildings && metadata["tileflow:buildings"]) {
-            coreScene.buildings = createTileflowBuildings3D({map, controller});
-          }
-          if (!coreScene.trees) {
+          const metadata = styleReads(map).metadata() ?? {};
+          const treesShown = () => treesEnabled && runtimeLayerVisibility["tileflow-trees-3d"] !== false;
+          if (!coreScene.scene) {
             if (!previewSearchParameters.has("trees3d")) {
               treesEnabled = metadata["tileflow:vegetation-display"]?.visible ?? true;
             }
-            coreScene.trees = createTileflowVegetation({map, controller, visible: treesEnabled,
-              viewMode: threeDimensionalEnabled ? "3d" : "2d", transformRequest: previewTransformRequest});
+            // The scene mounts what the style declares; street lights belong to the 3D view.
+            coreScene.scene = createTileflowMap3D({map, controller: coreSceneThemes(map),
+              viewMode: threeDimensionalEnabled ? "3d" : "2d", vegetation: treesShown(),
+              transformRequest: previewTransformRequest});
+          }
+          const scene = coreScene.scene;
+          scene.setVegetation(treesShown());
+          const instant = {transition: {duration: 0}};
+          const animation = previewSearchParameters.get('animation') || '0';
+          const duration = animation === 'fade' ? 800 : Math.min(3000, Math.max(0, Number(animation) || 0));
+          // Only a change of the controls moves the layers, so a style event does not restart them.
+          if (coreScene.shown !== threeDimensionalEnabled || coreScene.animation !== animation) {
+            coreScene.shown = threeDimensionalEnabled;
+            coreScene.buildingsShown = threeDimensionalEnabled;
+            coreScene.animation = animation;
+            void (threeDimensionalEnabled ? scene.show({transition: {duration, mode: animation === "fade" ? "fade" : "grow"}}) : scene.hide(instant));
           }
-          coreScene.trees.setVisible(treesEnabled && runtimeLayerVisibility["tileflow-trees-3d"] !== false);
-          coreScene.trees.setViewMode(threeDimensionalEnabled ? "3d" : "2d");
-          // Street lights require an explicit map opt-in and the 3D control; defaults stay off.
-          if (!coreScene.lights && threeDimensionalEnabled && metadata["tileflow:street-lights"]) {
-            coreScene.lights = createTileflowStreetLights({map, controller});
-          } else if (coreScene.lights && (!threeDimensionalEnabled || !metadata["tileflow:street-lights"])) {
-            coreScene.lights.dispose();
-            coreScene.lights = undefined;
+          // The inspector can hide the buildings alone.
+          const showBuildings = threeDimensionalEnabled && runtimeLayerVisibility["tileflow-buildings-3d"] !== false;
+          if (scene.buildings && coreScene.buildingsShown !== showBuildings) {
+            coreScene.buildingsShown = showBuildings;
+            void (showBuildings ? scene.buildings.show(instant) : scene.buildings.hide(instant));
           }
           const lightLayer = map.getLayer("tileflow-street-lights");
           const lightRenderer = lightLayer?.implementation || lightLayer;
@@ -2082,16 +1450,6 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
             };
             lightRenderer.__previewVisibility = true;
           }
-          const showBuildings = threeDimensionalEnabled && runtimeLayerVisibility["tileflow-buildings-3d"] !== false;
-          const instant = {transition: {duration: 0}};
-          const animation = previewSearchParameters.get('animation') || '0';
-          const duration = animation === 'fade' ? 800 : Math.min(3000, Math.max(0, Number(animation) || 0));
-          // Only a change of the controls moves the layers, so a style event does not restart them.
-          if (coreScene.buildings && (coreScene.buildingsShown !== showBuildings || coreScene.animation !== animation)) {
-            coreScene.buildingsShown = showBuildings;
-            coreScene.animation = animation;
-            void (showBuildings ? coreScene.buildings.show({transition: {duration, mode: animation === "fade" ? "fade" : "grow"}}) : coreScene.buildings.hide(instant));
-          }
         } finally {mountingCoreScene = false;}
       }
 
@@ -2126,7 +1484,6 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
           if (typeof enabled !== "boolean" || enabled === this.enabled) return;
           this.enabled = enabled;
           threeDimensionalEnabled = this.enabled;
-          landmarkState.enabled = this.enabled;
           this.update();
           writeToggleStateToUrl();
           this.map.fire("tileflow:3d-toggle", {enabled: this.enabled});
@@ -2135,11 +1492,12 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
         }
 
         update() {
-          for (const layer of this.map.getStyle()?.layers || []) {
+          const reads = styleReads(this.map);
+          for (const layer of reads.layers()) {
             const toggle = layer.metadata?.["tileflow:3d-toggle"];
             if (toggle !== "building" && toggle !== "landmark") continue;
             // Core's 3D buildings stand in for the compiled extrusion where the style describes them.
-            const replaced = toggle === "building" && this.map.getStyle()?.metadata?.["tileflow:buildings"];
+            const replaced = toggle === "building" && reads.metadata()?.["tileflow:buildings"];
             const visibility = this.enabled && !replaced ? "visible" : "none";
             if (this.map.getLayoutProperty(layer.id, "visibility") !== visibility) {
               this.map.setLayoutProperty(layer.id, "visibility", visibility);
@@ -2297,9 +1655,10 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
             ...visibleLayerGroups,
           ].join(",");
         }
-        const vegetationLayers = map.getStyle()?.metadata?.["tileflow:vegetation-display"]?.flatLayers;
-        for (const layer of map.getStyle()?.layers || []) {
-          if (layer.type === "symbol" && layer.layout?.["text-field"] !== undefined) {
+        const reads = styleReads(map);
+        const vegetationLayers = reads.metadata()?.["tileflow:vegetation-display"]?.flatLayers;
+        for (const layer of reads.layers()) {
+          if (layer.type === "symbol" && map.getLayoutProperty(layer.id, "text-field") !== undefined) {
             const hideLabels = !visibleLayerGroups.has("labels");
             if (hideLabels && !defaultLayerTextField.has(layer.id)) {
               defaultLayerTextField.set(
@@ -2333,7 +1692,7 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
           const threeDimensionalToggle = layer.metadata?.["tileflow:3d-toggle"];
           const authoredVisibility = defaultLayerVisibility.get(layer.id);
           if (!hideLayer) defaultLayerVisibility.delete(layer.id);
-          const styleMetadata = map.getStyle()?.metadata ?? {};
+          const styleMetadata = reads.metadata() ?? {};
           // Core's 3D buildings and trees stand in for compiled extrusions and flat trees.
           const replacedByCore =
             threeDimensionalToggle === "building" && styleMetadata["tileflow:buildings"];
@@ -2408,45 +1767,17 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
         let ensuringThreeDimensionalLayers;
         const ensureThreeDimensionalLayers = () => {
           if (ensuringThreeDimensionalLayers) return ensuringThreeDimensionalLayers;
-          const currentStyleLayers = map.getStyle()?.layers || [];
-          const landmarkConfigLayer = currentStyleLayers.find(
-            (layer) => layer.metadata?.["tileflow:landmark-manifest-url"]
-          );
-          const buildingWireframeConfigLayer = currentStyleLayers.find(
+          const buildingWireframeConfigLayer = styleReads(map).layers().find(
             (layer) => layer.metadata?.["tileflow:building-wireframe"] === true
           );
-          const landmarkManifestUrl =
-            landmarkConfigLayer?.metadata?.["tileflow:landmark-manifest-url"];
-          const landmarkPreloadZoom = landmarkConfigLayer
-            ? Math.max(0, styleLayerZoomRange(landmarkConfigLayer).minzoom - 1)
-            : Infinity;
-          const shouldPreloadLandmarks =
-            landmarkManifestUrl &&
-            threeDimensionalEnabled &&
-            map.getZoom() >= landmarkPreloadZoom;
-          const needsLandmarks =
-            landmarkConfigLayer &&
-            threeDimensionalEnabled &&
-            styleLayerIsVisibleAtZoom(landmarkConfigLayer, map.getZoom()) &&
-            !map.getLayer("tileflow-landmarks-3d");
           const needsBuildingWireframe =
             buildingWireframeConfigLayer &&
             threeDimensionalEnabled &&
             styleLayerIsVisibleAtZoom(buildingWireframeConfigLayer, map.getZoom()) &&
             !map.getLayer("tileflow-buildings-wireframe-3d");
-          if (
-            !needsLandmarks &&
-            !needsBuildingWireframe &&
-            !shouldPreloadLandmarks
-          ) return;
-          const runtimePrerequisites = [
-            shouldPreloadLandmarks
-              ? loadLandmarkPrerequisites(landmarkManifestUrl)
-              : loadThreeCoreRuntime(),
-            ...(needsBuildingWireframe ? [loadBuildingWireframeRuntime()] : [])
-          ];
-          ensuringThreeDimensionalLayers = Promise.all(runtimePrerequisites)
-            .then(async () => {
+          if (!needsBuildingWireframe) return;
+          ensuringThreeDimensionalLayers = loadBuildingWireframeRuntime()
+            .then(() => {
               const styleLayers = map.getStyle()?.layers || [];
               const buildingWireframeConfigLayer = styleLayers.find(
                 (layer) => layer.metadata?.["tileflow:building-wireframe"] === true
@@ -2456,28 +1787,8 @@ function renderTileflowPreviewHtml(preview, basePath, initialStatus, isSemanticP
                 threeDimensionalEnabled &&
                 styleLayerIsVisibleAtZoom(buildingWireframeConfigLayer, map.getZoom())
               ) {
-                // A tree-only load may already be in flight when buildings are
-                // enabled. Reassert the line runtime before mounting the layer.
-                await loadBuildingWireframeRuntime();
                 addBuildingWireframeLayerIfConfigured(map, styleLayers);
               }
-              const landmarkConfigLayer = styleLayers.find(
-                (layer) => layer.metadata?.["tileflow:landmark-manifest-url"]
-              );
-              const shouldAddLandmarks =
-                landmarkConfigLayer &&
-                threeDimensionalEnabled &&
-                styleLayerIsVisibleAtZoom(landmarkConfigLayer, map.getZoom()) &&
-                !map.getLayer("tileflow-landmarks-3d");
-              if (shouldAddLandmarks) {
-                // The tree-only path may already be in flight when landmarks
-                // are enabled. Reassert the richer runtime here so a shared
-                // core promise can never expose an undefined GLTF loader.
-                await loadLandmarkPrerequisites(
-                  landmarkConfigLayer.metadata["tileflow:landmark-manifest-url"]
-                );
-                addLandmarkLayerIfConfigured(map, styleLayers);
-              }
             })
             .catch((error) => console.warn("Tileflow 3D runtime failed to load", error))
             .finally(() => {
@@ -2710,7 +2021,6 @@ function resolvePreviewTheme(map, requested) {
 }
 export {
   TileflowPreviewSelectionError,
-  normalizeTileflowLandmarkManifest,
   readBoundedTileflowJsonResponse,
   readBoundedTileflowResponse,
   renderTileflowPreviewHtml,

package/dist/server.js

@@ -3271,7 +3271,7 @@ function createTileflowDevRequestHandler(options = {}) {
         return options.session ? eventStreamResponse(options.session) : jsonResponse2({ error: "Live events require a development session." }, 404);
       }
       if (path.startsWith("/__runtime/")) {
-        const runtimeResponse = (await import("./preview-assets-KGUICQHG.js")).getTileflowPreviewRuntimeResponse(path);
+        const runtimeResponse = (await import("./preview-assets-MT3RXZMN.js")).getTileflowPreviewRuntimeResponse(path);
         if (runtimeResponse) return runtimeResponse;
       }
       const session = options.session ?? await loadOwnedSession(url.origin);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/dev",
-  "version": "0.1.0-alpha.34",
+  "version": "0.1.0-alpha.35",
   "license": "Apache-2.0",
   "description": "Node development utilities for Tileflow configs and builds.",
   "type": "module",
@@ -84,9 +84,8 @@
   "dependencies": {
     "@mapbox/vector-tile": "3.0.0",
     "@maplibre/maplibre-gl-style-spec": "26.4.4",
-    "@tileflow/core": ">=0.1.0-alpha.37 <0.1.0-beta.0",
+    "@tileflow/core": ">=0.1.0-alpha.38 <0.1.0-beta.0",
     "chokidar": "4.0.3",
-    "fflate": "0.8.3",
     "fontkit": "2.0.4",
     "jiti": "^2.7.0",
     "maplibre-gl": "6.13.0",
@@ -97,7 +96,7 @@
     "three": "0.185.1"
   },
   "devDependencies": {
-    "@tileflow/maps": "0.1.0-alpha.11"
+    "@tileflow/maps": "0.1.0-alpha.12"
   },
   "optionalDependencies": {
     "sharp": "0.35.5"