map-gl-offline 0.8.9 → 0.9.1

package/dist/index.js

@@ -186,8 +186,10 @@ const MAPBOX_API = {
 /**
  * Mapbox Standard sub-tilesets that are sparse-by-design across the planet.
  * These only have tiles where the underlying feature (indoor venues, landmark
- * POIs, 3D procedural buildings) actually exists, and return 404 for nearly
- * every other coordinate. The tile downloader pre-skips any source whose tile
+ * POIs, 3D procedural buildings) actually exists, and return 404 for every other
+ * coordinate, though they can be dense inside a major city. Unless the style's
+ * config has switched on a feature that needs one, the tile downloader pre-skips
+ * any source whose tile
  * URL templates reference one of these tileset IDs, so we never issue probe
  * or download requests for them — eliminating the 404 noise in devtools.
  *
@@ -389,7 +391,10 @@ async function openOfflineMapDB() {
                 // Migration: v2 -> v3
                 // Move regions from 'regions' store to styles.regions[]
                 if (oldVersion > 0 && oldVersion < 3) {
-                    migrateRegionsToStyles(transaction);
+                    // Unwrap to the raw IDBTransaction: on idb's wrapper, getAll()/get()
+                    // return Promises, so the onsuccess callbacks the migration relies
+                    // on would never fire and no region would be migrated.
+                    migrateRegionsToStyles(idb.unwrap(transaction));
                 }
                 // Migration: v3 -> v4
                 // Adds the `models` store for Mapbox Standard 3D model assets.
@@ -1050,6 +1055,20 @@ function formatBytes(bytes) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
+/**
+ * A stored style's display name: its own `name`, or else the last meaningful
+ * part of its URL ("liberty" for `.../styles/liberty`), or else its key.
+ */
+function styleDisplayName(entry) {
+    if (entry.style?.name)
+        return entry.style.name;
+    const path = (entry.originalUrl ?? '').split(/[?#]/)[0];
+    const segments = path
+        .split('/')
+        .map(segment => segment.replace(/\.json$/i, ''))
+        .filter(segment => segment && !/^(style|styles)$/i.test(segment) && !segment.includes(':'));
+    return segments.at(-1) ?? entry.key;
+}
 /**
  * Format date to human readable string
  */
@@ -1277,6 +1296,39 @@ function deriveTileExtension(tiles) {
  * They have different shapes so cannot be shared; the key computation
  * can be and is.
  */
+/**
+ * `decodeURIComponent` that returns the input unchanged instead of throwing
+ * on a malformed escape (e.g. a literal `%` in a font or source name), so a
+ * bad path becomes a lookup miss / 404 rather than a rejected fetch.
+ */
+function safeDecodeURIComponent(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+// ---------------------------------------------------------------------------
+// Mapbox GL runtime assets
+// ---------------------------------------------------------------------------
+const MAPBOX_RUNTIME_ORIGIN = 'https://api.mapbox.com';
+const MAPBOX_RUNTIME_CACHE = 'map-gl-offline-runtime-v1';
+/**
+ * Code Mapbox GL fetches from api.mapbox.com while rendering, so it has to be
+ * available offline too. Paths are versioned, so a renderer that moves to a new
+ * version misses here; `npm run check:mapbox-standard` compares this list with
+ * the installed renderer. They match Mapbox GL 3.34; an app on a version with
+ * other paths gets no offline copy of those files.
+ */
+const MAPBOX_RUNTIME_ASSETS = [
+    '/mapbox-gl-js/draco_decoder_gltf_v1.5.6.wasm',
+    '/mapbox-gl-js/meshopt_base_v1.2.wasm',
+    '/mapbox-gl-js/meshopt_simd_v1.2.wasm',
+    '/mapbox-gl-js/rtl_text_v1.0.0.wasm',
+    '/mapbox-gl-js/building-gen/building_gen_v1.2.6.wasm',
+    '/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.3.0/mapbox-gl-rtl-text.js',
+];
 /**
  * Extensions to try in order when the requested extension misses. `glb` is
  * last so batched-model sources (Mapbox Standard 3D buildings) resolve when
@@ -1314,9 +1366,10 @@ function findStyleByRegionIdIn(styles, regionId) {
 // Glyph candidate keys
 // ---------------------------------------------------------------------------
 /**
- * Parse `FontA,FontB,FontC/0-255.pbf` into (fontstacks, rangePart). Mapbox
- * requests a comma-joined font-family fallback chain; each glyph is stored
- * individually, so the caller tries each fontstack in order.
+ * Parse `FontA,FontB,FontC/0-255.pbf` into (fontstacks, rangePart). Older Mapbox
+ * GL requests a comma-joined font-family fallback chain (current versions fetch
+ * each font and merge them client-side); each glyph is stored individually, so
+ * the caller tries each fontstack in order.
  */
 function parseGlyphPath(decodedPath) {
     const pathParts = decodedPath.split('/');
@@ -1328,6 +1381,47 @@ function parseGlyphPath(decodedPath) {
         .filter(Boolean);
     return { fontstacks, rangePart };
 }
+function readVarint(bytes, start) {
+    let value = 0;
+    let multiplier = 1;
+    for (let pos = start; pos < bytes.length && pos < start + 5; pos++) {
+        value += (bytes[pos] & 0x7f) * multiplier;
+        if (bytes[pos] < 0x80)
+            return { value, next: pos + 1 };
+        multiplier *= 128;
+    }
+    return null;
+}
+/**
+ * True for a glyph range PBF holding only its font name and range. Servers
+ * return these for blocks a font doesn't cover, e.g. `DIN Pro Medium/1536-1791`.
+ * Serving one in place of a later font in the chain blanks those labels.
+ *
+ * Reads `glyphs { fontstack stacks = 1 { name = 1; range = 2; glyph = 3 } }`.
+ * Anything unexpected counts as not empty, so unknown data is still served.
+ */
+function isEmptyGlyphRange(data) {
+    const bytes = new Uint8Array(data);
+    if (bytes[0] !== 0x0a)
+        return false;
+    const stack = readVarint(bytes, 1);
+    if (!stack)
+        return false;
+    const end = stack.next + stack.value;
+    if (end !== bytes.length)
+        return false;
+    let pos = stack.next;
+    while (pos < end) {
+        const tag = bytes[pos];
+        if ((tag & 0x07) !== 2 || tag >> 3 === 3)
+            return false;
+        const length = readVarint(bytes, pos + 1);
+        if (!length)
+            return false;
+        pos = length.next + length.value;
+    }
+    return true;
+}
 /**
  * Build the list of keys to try for a single (fontstack, range) pair.
  * Order: actualStyleId variants first (most common), then downloadId,
@@ -1498,10 +1592,10 @@ function clearAllCaches() {
     tileCache.clear();
 }
 /**
- * Find a style entry that contains the given region ID
- * Since styles are stored by style key but patched with region IDs,
- * we need to search all styles to find which one contains this region
- * Results are cached to avoid repeated DB queries during tile fetching
+ * Resolve the `{id}` segment of an `idb://{id}/...` URL to its style entry.
+ * Styles patched since URLs became style-keyed use the style key itself (one
+ * keyed read); older stored styles use a region id, which needs a scan of all
+ * styles. Results are cached to avoid repeated DB queries during tile fetching.
  */
 async function findStyleByRegionId(db, regionId) {
     // Check cache first
@@ -1510,6 +1604,11 @@ async function findStyleByRegionId(db, regionId) {
         return cached.styleEntry;
     }
     try {
+        const direct = (await db.get('styles', regionId));
+        if (direct) {
+            regionToStyleCache.set(regionId, { styleEntry: direct, timestamp: Date.now() });
+            return direct;
+        }
         const allStyles = await db.getAll('styles');
         const hit = findStyleByRegionIdIn(allStyles, regionId);
         if (hit) {
@@ -1599,9 +1698,11 @@ async function idbFetchHandler(url, init) {
     }
     const db = await dbPromise;
     const parsed = url.replace('idb://', '').split('/');
-    const [downloadId, type, ...rest] = parsed;
+    // A Request's URL arrives percent-encoded, so decode the style id as the Service Worker does.
+    const [encodedDownloadId, type, ...rest] = parsed;
+    const downloadId = safeDecodeURIComponent(encodedDownloadId ?? '');
     const resourcePath = rest.join('/');
-    const decodedResourcePath = decodeURIComponent(resourcePath);
+    const decodedResourcePath = safeDecodeURIComponent(resourcePath);
     const key = `${downloadId}::${decodedResourcePath}`;
     try {
         switch (type) {
@@ -1620,7 +1721,7 @@ async function idbFetchHandler(url, init) {
                     // MapLibre can request fractional zoom levels (e.g., 12.5)
                     // but tiles are stored with integer zoom levels, so floor the value
                     const z = Math.floor(parseFloat(pathParts[pathParts.length - 3]));
-                    const sourceKey = pathParts.slice(0, pathParts.length - 3).join('/');
+                    const sourceKey = safeDecodeURIComponent(pathParts.slice(0, pathParts.length - 3).join('/'));
                     const yMatch = yExt.match(/^(\d+)\.(\w+)$/);
                     if (yMatch) {
                         const y = parseInt(yMatch[1]);
@@ -1658,7 +1759,7 @@ async function idbFetchHandler(url, init) {
                     if (pathParts.length === 1) {
                         // Old format without sourceKey - try to extract from the URL
                         const encodedTileUrl = pathParts[0];
-                        const tileUrl = decodeURIComponent(encodedTileUrl);
+                        const tileUrl = safeDecodeURIComponent(encodedTileUrl);
                         // Try to extract source from URL pattern
                         // For example: https://domain.com/service/source/vt/{z}/{x}/{y}.pbf
                         const urlParts = tileUrl.split('/');
@@ -1702,21 +1803,30 @@ async function idbFetchHandler(url, init) {
                 const actualStyleId = styleEntry?.key || downloadId;
                 const { fontstacks, rangePart } = parseGlyphPath(decodedResourcePath);
                 idbLogger.debug(`Trying ${fontstacks.length} fonts in fallback order: ${fontstacks.join(', ')}`);
+                const glyphResponse = (data) => new Response(data, {
+                    status: 200,
+                    headers: { 'Content-Type': 'application/x-protobuf' },
+                });
+                let emptyRange;
                 for (const fontstack of fontstacks) {
                     const candidateKeys = glyphCandidateKeys(actualStyleId, downloadId, fontstack, rangePart);
                     for (const candidateKey of candidateKeys) {
                         const resource = await db.get('glyphs', candidateKey);
                         if (resource?.data) {
-                            idbLogger.debug(`Found glyph using key: ${candidateKey} (font: ${fontstack})`);
-                            return new Response(resource.data, {
-                                status: 200,
-                                headers: { 'Content-Type': 'application/x-protobuf' },
-                            });
+                            if (!isEmptyGlyphRange(resource.data)) {
+                                idbLogger.debug(`Found glyph using key: ${candidateKey} (font: ${fontstack})`);
+                                return glyphResponse(resource.data);
+                            }
+                            emptyRange ??= resource.data;
                         }
                     }
                 }
-                idbLogger.warn(`Glyph not found for any font in: ${fontstacks.join(', ')}`);
-                break;
+                // Never a 404: Mapbox GL fails a tile's whole glyph request if one range
+                // errors, so a range outside the downloaded set would blank all its labels.
+                if (!emptyRange) {
+                    idbLogger.warn(`Glyph not found for any font in: ${fontstacks.join(', ')}`);
+                }
+                return glyphResponse(emptyRange ?? new ArrayBuffer(0));
             }
             case 'sprite': {
                 idbLogger.debug(`Looking for sprite with key: ${key}`);
@@ -1808,7 +1918,8 @@ async function idbFetchHandler(url, init) {
     catch (error) {
         idbLogger.error(`Error fetching resource from IDB: ${url}`, error);
     }
-    idbLogger.warn(`Resource not found in IDB: ${url}`);
+    // Normal once the map moves outside a saved region, so not worth a warning per tile.
+    idbLogger.debug(`Resource not found in IDB: ${url}`);
     return new Response('Not found in IDB', { status: 404 });
 }
 
@@ -1869,57 +1980,103 @@ function resolveMapboxUrl(mapboxUrl, accessToken) {
     if (!accessToken) {
         throw new Error(`Mapbox access token is required to resolve mapbox:// URL: ${mapboxUrl}`);
     }
-    // Strip the protocol prefix
-    const path = mapboxUrl.slice(MAPBOX_API.PROTOCOL.length);
+    // Strip the protocol prefix, and split off any query so path matching and
+    // the resolved URL's suffixes (`.json`, `/sprite`) go before it. Existing
+    // parameters are kept; `access_token` is set exactly once.
+    const withoutProtocol = mapboxUrl.slice(MAPBOX_API.PROTOCOL.length);
+    const queryIndex = withoutProtocol.indexOf('?');
+    const path = queryIndex === -1 ? withoutProtocol : withoutProtocol.slice(0, queryIndex);
+    const params = new URLSearchParams(queryIndex === -1 ? '' : withoutProtocol.slice(queryIndex + 1));
+    params.set('access_token', accessToken);
+    const query = `?${params.toString()}`;
     // mapbox://styles/{user}/{id}
     if (path.startsWith('styles/')) {
         const rest = path.slice('styles/'.length);
-        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.STYLES_PATH}/${rest}?access_token=${accessToken}`;
+        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.STYLES_PATH}/${rest}${query}`;
     }
     // mapbox://sprites/{user}/{id}
     if (path.startsWith('sprites/')) {
         const rest = path.slice('sprites/'.length);
-        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.STYLES_PATH}/${rest}/sprite?access_token=${accessToken}`;
+        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.STYLES_PATH}/${rest}/sprite${query}`;
     }
     // mapbox://fonts/{user}/{fontstack}/{range}.pbf
     if (path.startsWith('fonts/')) {
         const rest = path.slice('fonts/'.length);
-        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.FONTS_PATH}/${rest}?access_token=${accessToken}`;
+        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.FONTS_PATH}/${rest}${query}`;
     }
     // mapbox://models/{path}
     if (path.startsWith('models/')) {
         const rest = path.slice('models/'.length);
-        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.MODELS_PATH}/${rest}?access_token=${accessToken}`;
+        return `${MAPBOX_API.BASE_URL}${MAPBOX_API.MODELS_PATH}/${rest}${query}`;
     }
     // mapbox://{tileset} (e.g. mapbox://mapbox.mapbox-streets-v8)
-    return `${MAPBOX_API.BASE_URL}${MAPBOX_API.TILES_PATH}/${path}.json?access_token=${accessToken}`;
+    return `${MAPBOX_API.BASE_URL}${MAPBOX_API.TILES_PATH}/${path}.json${query}`;
 }
 /**
- * Rewrite Mapbox CDN tile URLs to use the api.mapbox.com/v4 endpoint.
+ * Pick the TileJSON variant Mapbox GL renders from, the way its `mergeVariants`
+ * does: `meshopt-v2+lod`, then `meshopt`, then the base tileset.
+ *
+ * These aren't just different encodings of one dataset. For
+ * `mapbox.mapbox-3dbuildings-v1`, the base tile over central Dubai is empty while
+ * the variants hold its 3D buildings, so downloading the base loses them offline.
+ * Variant tiles are `mapbox://3dtiles/...` URLs, resolved here using the base
+ * URL's query string, which carries the access token.
+ */
+function selectTileJsonVariant(tileJson) {
+    const { variants, tiles: baseTiles } = tileJson;
+    if (!Array.isArray(variants))
+        return tileJson;
+    const withCapability = (capability) => variants.find(variant => Array.isArray(variant?.capabilities) &&
+        variant.capabilities.length === 1 &&
+        variant.capabilities[0] === capability);
+    const selected = withCapability('meshopt-v2+lod') ?? withCapability('meshopt');
+    if (!selected || !Array.isArray(selected.tiles))
+        return tileJson;
+    const firstBaseTile = Array.isArray(baseTiles) ? String(baseTiles[0] ?? '') : '';
+    const queryIndex = firstBaseTile.indexOf('?');
+    const query = queryIndex === -1 ? '' : firstBaseTile.slice(queryIndex);
+    const tiles = selected.tiles.map(tile => tile.startsWith('mapbox://3dtiles/')
+        ? `${MAPBOX_API.BASE_URL}/3dtiles/v1/${tile.slice('mapbox://3dtiles/'.length)}${query}`
+        : tile);
+    return { ...tileJson, ...selected, tiles };
+}
+const SKU_LIFETIME_MS = 12 * 60 * 60 * 1000;
+const SKU_CHARS = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+let skuSession;
+/** A Mapbox session token in the format Mapbox GL JS generates: version + SKU id + 10 random. */
+function getSkuToken() {
+    if (!skuSession || Date.now() > skuSession.expiresAt) {
+        let randomizer = '';
+        for (let i = 0; i < 10; i++) {
+            randomizer += SKU_CHARS[Math.floor(Math.random() * SKU_CHARS.length)];
+        }
+        skuSession = { token: `101${randomizer}`, expiresAt: Date.now() + SKU_LIFETIME_MS };
+    }
+    return skuSession.token;
+}
+/**
+ * Add the `sku` session token that Mapbox `/raster/v1/` tile URLs need.
  *
- * TileJSON responses from Mapbox return tile URLs on *.tiles.mapbox.com CDN
- * which may use paths like /raster/v1/ that require an SKU session token
- * generated by the Mapbox GL JS SDK at runtime. Since we fetch tiles directly
- * without the SDK, these 401. The /v4/ API endpoint on api.mapbox.com works
- * with just an access_token, so we rewrite CDN URLs to use it.
+ * TileJSON returns these URLs without one, and without it they 401. Mapbox GL
+ * adds it at request time, but this library fetches tiles itself.
+ *
+ * Don't switch these to the `/v4/` endpoint, which needs no token: it serves a
+ * different tile. For `mapbox.mapbox-terrain-dem-v1`, `/v4/….png` is a 256px
+ * palette PNG with elevations off by up to ~200 m, while the renderer expects
+ * the 514px RGB tile (`tileSize: 514`) that `/raster/v1/` returns.
  *
  * Example:
  *   https://a.tiles.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.png?access_token=...
- *   -> https://api.mapbox.com/v4/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.png?access_token=...
+ *   -> https://a.tiles.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.png?access_token=...&sku=101...
  */
 function rewriteMapboxCdnTileUrl(tileUrl) {
-    // Only rewrite *.tiles.mapbox.com/raster/v1/ URLs — these require an SKU
-    // session token that only the Mapbox GL JS SDK can generate. Other CDN paths
-    // like /v4/ (vector tiles) and /3dtiles/v1/ (3D models) work with just an
-    // access_token.
-    const match = tileUrl.match(/^https?:\/\/[a-z]\.tiles\.mapbox\.com\/raster\/v1\/([^?]+)(\?.*)?$/);
-    if (!match) {
+    if (!/^https?:\/\/(?:[a-z]\.tiles\.mapbox\.com|api\.mapbox\.com)\/raster\/v1\//.test(tileUrl)) {
+        return tileUrl;
+    }
+    if (/[?&]sku=/.test(tileUrl)) {
         return tileUrl;
     }
-    // match[1] is the path after /raster/v1/: "mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.png"
-    const tilesetAndPath = match[1];
-    const queryString = match[2] || '';
-    return `${MAPBOX_API.BASE_URL}${MAPBOX_API.TILES_PATH}/${tilesetAndPath}${queryString}`;
+    return `${tileUrl}${tileUrl.includes('?') ? '&' : '?'}sku=${getSkuToken()}`;
 }
 /**
  * Detect the style provider based on the style URL or content
@@ -2145,24 +2302,100 @@ function validateStyleForProvider(style, provider) {
 
 const styleLogger = logger.scope('StyleUtils');
 /**
- * Patches a MapboxStyle for offline use by replacing URLs with IndexedDB references
+ * Patches a MapboxStyle for offline use by replacing URLs with IndexedDB references.
+ *
+ * Safe to call repeatedly on the same stored style (every `addRegion` does):
+ * the first call stashes each source's upstream `tiles` / `maxzoom` under
+ * `__originalTiles` / `__originalMaxzoom`, and later calls patch from those,
+ * so the download pipeline can still reach the network and `maxzoom` can grow
+ * again when a deeper region is added.
+ *
  * @param style - The style to patch
- * @param downloadId - The download/region ID for tiles and other resources
- * @param maxZoom - Optional max zoom level for sources
+ * @param downloadId - Fallback ID for `idb://` URLs when `styleId` is omitted
+ * @param maxZoom - Max zoom downloaded for this style (the highest across its regions)
  * @param tileExtension - Optional tile extension
- * @param styleId - Optional style ID for sprites (if different from downloadId). Sprites are shared
- *                  across regions and stored with the style ID, so this parameter allows the sprite
- *                  URLs to correctly reference the style ID.
+ * @param styleId - Style ID used in all `idb://` URLs. Tiles, glyphs, sprites and
+ *                  models are stored per style, so URLs keyed by style keep working
+ *                  when any one region is deleted.
+ */
+/**
+ * Add a region's extra tile sources to a style, unless one with that id is
+ * already there. Sources must be in the style before it's patched for offline use.
+ */
+function injectExtraSources(style, extraSources = []) {
+    for (const extra of extraSources) {
+        if (style.sources[extra.id])
+            continue;
+        style.sources[extra.id] = {
+            type: extra.type || 'vector',
+            tiles: extra.tiles,
+            ...(extra.minzoom !== undefined ? { minzoom: extra.minzoom } : {}),
+            ...(extra.maxzoom !== undefined ? { maxzoom: extra.maxzoom } : {}),
+            ...(extra.attribution ? { attribution: extra.attribution } : {}),
+        };
+    }
+}
+/**
+ * Keep each model's upstream URL before the style is patched, the first time
+ * only. Patching points every model at `idb://`, so without this a model that
+ * failed to download couldn't be fetched again.
+ */
+function stashOriginalModels(entry) {
+    const models = entry.style.models;
+    if (!models || entry.originalModels)
+        return;
+    const isPatched = (value) => String(typeof value === 'string' ? value : value?.uri).startsWith('idb://');
+    // A style patched before this stash existed has no upstream URLs left to keep.
+    if (Object.values(models).some(isPatched))
+        return;
+    entry.originalModels = JSON.parse(JSON.stringify(models));
+}
+/**
+ * Point models that aren't stored back at their upstream URLs. Run after
+ * patching, which points every model at `idb://`.
+ */
+function restoreUnstoredModels(entry, storedNames) {
+    const models = entry.style.models;
+    if (!models || !entry.originalModels)
+        return;
+    for (const name of Object.keys(models)) {
+        if (!storedNames.has(name) && entry.originalModels[name] !== undefined) {
+            models[name] = JSON.parse(JSON.stringify(entry.originalModels[name]));
+        }
+    }
+}
+/**
+ * Whether a style uses parts of the spec only Mapbox GL JS v3 draws: config
+ * (`schema`), 3D `models`, `lights` or `imports`. MapLibre rejects these.
  */
+function needsMapboxGl(style) {
+    const parts = style;
+    return Boolean(parts.schema || parts.models || parts.lights || parts.imports);
+}
+/** Whether a map instance is Mapbox GL JS v3, the only renderer with style config. */
+function isMapboxGlMap(map) {
+    return typeof map?.setConfigProperty === 'function';
+}
 function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId) {
     styleLogger.debug(`Patching style for offline use with downloadId: ${downloadId}, maxZoom: ${maxZoom}, tileExtension: ${tileExtension}`);
     styleLogger.debug(`Original style:`, style);
+    const urlId = styleId || downloadId;
     // Patch sources
     for (const sourceKey in style.sources) {
         const source = style.sources[sourceKey];
         styleLogger.debug(`Patching source: ${sourceKey}`, source);
+        // Stash upstream values once. Already-patched tiles (all idb://) are never
+        // stashed as "original"; `null` records that the source had no maxzoom.
+        if (source.tiles &&
+            source.__originalTiles === undefined &&
+            !source.tiles.every(url => url.startsWith('idb://'))) {
+            source.__originalTiles = [...source.tiles];
+        }
+        if (source.__originalMaxzoom === undefined) {
+            source.__originalMaxzoom = source.maxzoom ?? null;
+        }
         if (source.tiles) {
-            const originalTiles = [...source.tiles];
+            const originalTiles = source.__originalTiles ?? [...source.tiles];
             // Patch to idb://{downloadId}/tile/{sourceKey}/{z}/{x}/{y}.ext.
             // Extension extraction goes through the shared extractTileExtensionFromUrl
             // helper so the patched URL's extension matches what tileService used when
@@ -2170,9 +2403,9 @@ function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId
             // stored key under `.pbf` but a patched URL with `.vector`, forcing
             // idbFetchHandler to fall through its pbf/mvt/png/jpg/webp fallback loop
             // on every tile.
-            source.tiles = source.tiles.map((url) => {
+            source.tiles = originalTiles.map((url) => {
                 const ext = tileExtension ?? extractTileExtensionFromUrl(url);
-                return `idb://${downloadId}/tile/${sourceKey}/{z}/{x}/{y}.${ext}`;
+                return `idb://${urlId}/tile/${sourceKey}/{z}/{x}/{y}.${ext}`;
             });
             styleLogger.debug(`Patched tiles for ${sourceKey} with extension .${tileExtension || 'pbf'}:`, {
                 original: originalTiles,
@@ -2180,10 +2413,12 @@ function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId
             });
         }
         // Cap maxzoom so the map doesn't request tiles beyond what we downloaded.
-        // Use the lower of the region maxZoom and the source's original maxzoom so we
-        // don't raise it above the tileset's actual range (e.g. 3dbuildings at z14).
+        // Use the lower of the downloaded maxZoom and the source's *upstream*
+        // maxzoom so we don't raise it above the tileset's actual range (e.g.
+        // 3dbuildings at z14) — and so an earlier, shallower region's cap doesn't
+        // stick once a deeper region is added.
         if (maxZoom !== undefined) {
-            const originalMaxzoom = source.maxzoom;
+            const originalMaxzoom = source.__originalMaxzoom ?? undefined;
             source.maxzoom = originalMaxzoom !== undefined ? Math.min(maxZoom, originalMaxzoom) : maxZoom;
             styleLogger.debug(`Set maxzoom for ${sourceKey}: ${originalMaxzoom} → ${source.maxzoom}`);
         }
@@ -2196,7 +2431,7 @@ function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId
                 let ext = tileExtension;
                 if (!ext)
                     ext = 'pbf';
-                source.tiles = [`idb://${downloadId}/tile/${sourceKey}/{z}/{x}/{y}.${ext}`];
+                source.tiles = [`idb://${urlId}/tile/${sourceKey}/{z}/{x}/{y}.${ext}`];
                 styleLogger.debug(`Added tiles array for TileJSON-only source ${sourceKey}:`, {
                     tiles: source.tiles,
                 });
@@ -2212,7 +2447,7 @@ function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId
     // Patch glyphs
     if (style.glyphs) {
         const originalGlyphs = style.glyphs;
-        style.glyphs = `idb://${downloadId}/glyph/{fontstack}/{range}.pbf`;
+        style.glyphs = `idb://${urlId}/glyph/{fontstack}/{range}.pbf`;
         styleLogger.debug(`Patched glyphs:`, { original: originalGlyphs, patched: style.glyphs });
     }
     // Patch sprite
@@ -2271,13 +2506,31 @@ function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId
     styleLogger.debug(`Final patched style:`, style);
     return style;
 }
+/** Resolve one entry of a font stack: a name, `["config", key]` or a `["concat", ...]` of those. */
+function resolveFontName(value, schema) {
+    if (typeof value === 'string')
+        return value;
+    if (!Array.isArray(value))
+        return undefined;
+    if (value[0] === 'config' && typeof value[1] === 'string') {
+        const configured = schema?.[value[1]]?.default;
+        return typeof configured === 'string' ? configured : undefined;
+    }
+    if (value[0] === 'concat') {
+        const parts = value.slice(1).map(part => resolveFontName(part, schema));
+        return parts.every(part => part !== undefined) ? parts.join('') : undefined;
+    }
+    return undefined;
+}
 /**
  * Extract individual font names from a `text-font` layout property value.
  *
- * Handles both simple arrays (`["Font A", "Font B"]`) and Mapbox GL expression
- * syntax (e.g. `["step", ["zoom"], ["literal", ["Font A"]], 10, ["literal", ["Font B"]]]`).
+ * Handles simple arrays (`["Font A", "Font B"]`), Mapbox GL expression syntax
+ * (e.g. `["step", ["zoom"], ["literal", ["Font A"]], 10, ["literal", ["Font B"]]]`),
+ * and Mapbox Standard's config-built stacks
+ * (`[["concat", ["config", "font"], " Medium"], "Arial Unicode MS Bold"]`).
  */
-function extractFontNamesFromTextField(textFont) {
+function extractFontNamesFromTextField(textFont, schema) {
     const fonts = new Set();
     // Known expression operators — anything starting with one of these is NOT a font name list
     const expressionOps = new Set([
@@ -2317,20 +2570,40 @@ function extractFontNamesFromTextField(textFont) {
             }
             return;
         }
-        // Simple font stack: every element is a string and the first element is
-        // NOT a known expression operator
-        if (value.every((v) => typeof v === 'string') && !expressionOps.has(value[0])) {
-            for (const f of value) {
-                fonts.add(f);
+        // A font stack: only font names, and the first isn't an expression operator
+        const isFontEntry = (item) => typeof item === 'string' ||
+            (Array.isArray(item) && (item[0] === 'config' || item[0] === 'concat'));
+        if (value.every(isFontEntry) && !expressionOps.has(value[0])) {
+            for (const item of value) {
+                const name = resolveFontName(item, schema);
+                if (name !== undefined)
+                    fonts.add(name);
             }
             return;
         }
-        // Recurse into sub-arrays (covers step/match/case branches)
-        for (const item of value) {
-            if (Array.isArray(item)) {
-                walk(item);
+        // Only the branches that output a font. Conditions and inputs hold strings
+        // like `["zoom"]` or match labels that aren't fonts.
+        const last = value.length - 1;
+        const isOutput = (i) => {
+            switch (value[0]) {
+                case 'step': // ["step", input, out0, stop, out, ...]
+                    return i >= 2 && i % 2 === 0;
+                case 'match': // ["match", input, label, out, label, out, ..., fallback]
+                    return i === last || (i >= 3 && i % 2 === 1);
+                case 'case': // ["case", cond, out, cond, out, ..., fallback]
+                    return i === last || (i >= 2 && i % 2 === 0);
+                case 'coalesce':
+                    return i >= 1;
+                case 'let': // ["let", name, value, ..., body]
+                    return i === last;
+                default:
+                    return false;
             }
-        }
+        };
+        value.forEach((item, i) => {
+            if (isOutput(i))
+                walk(item);
+        });
     }
     walk(textFont);
     return Array.from(fonts);
@@ -2358,7 +2631,7 @@ function extractAllFontNames(style) {
     if (style && Array.isArray(style.layers)) {
         for (const layer of style.layers) {
             if (layer.layout && layer.layout['text-font']) {
-                for (const name of extractFontNamesFromTextField(layer.layout['text-font'])) {
+                for (const name of extractFontNamesFromTextField(layer.layout['text-font'], style.schema)) {
                     fonts.add(name);
                 }
             }
@@ -2427,8 +2700,13 @@ var styleUtils = /*#__PURE__*/Object.freeze({
     extractAllFontNames: extractAllFontNames,
     extractFontNamesFromTextField: extractFontNamesFromTextField,
     generateGlyphUrlsFromStyle: generateGlyphUrlsFromStyle,
+    injectExtraSources: injectExtraSources,
+    isMapboxGlMap: isMapboxGlMap,
+    needsMapboxGl: needsMapboxGl,
     normalizeSpriteProperty: normalizeSpriteProperty,
-    patchStyleForOffline: patchStyleForOffline
+    patchStyleForOffline: patchStyleForOffline,
+    restoreUnstoredModels: restoreUnstoredModels,
+    stashOriginalModels: stashOriginalModels
 });
 
 const cleanupLogger$1 = logger.scope('CleanupCompressedTiles');
@@ -2985,7 +3263,7 @@ async function resolveImportsRecursive(style, accessToken, visited, depth, maxRe
     // Collect all flattened sources, layers from imports
     const flattenedSources = {};
     const flattenedLayers = [];
-    let importedSprite;
+    const importSprites = [];
     let importedGlyphs;
     let importedModels;
     for (const importEntry of imports) {
@@ -3037,6 +3315,7 @@ async function resolveImportsRecursive(style, accessToken, visited, depth, maxRe
         // Build config lookup: schema defaults + import config overrides
         const configValues = buildConfigLookup(importedStyle, importEntry.config);
         // Flatten layers: prefix layer IDs, update source references, resolve config expressions
+        const importLayers = [];
         if (importedStyle.layers && Array.isArray(importedStyle.layers)) {
             for (const layer of importedStyle.layers) {
                 const layerObj = layer;
@@ -3052,11 +3331,13 @@ async function resolveImportsRecursive(style, accessToken, visited, depth, maxRe
                 // Resolve ["config", "key"] expressions using schema defaults and import overrides.
                 resolveConfigExpressions(prefixedLayer, configValues);
                 flattenedLayers.push(prefixedLayer);
+                importLayers.push(prefixedLayer);
             }
         }
-        // Sprite: collect imported sprite
-        if (importedStyle.sprite && !importedSprite) {
-            importedSprite = importedStyle.sprite;
+        // Sprite: collect every import's sprite with its layers, so each can be
+        // scoped if the flattened style ends up with more than one sprite.
+        if (importedStyle.sprite) {
+            importSprites.push({ importId, sprite: importedStyle.sprite, layers: importLayers });
         }
         // Glyphs: collect imported glyphs
         if (importedStyle.glyphs && !importedGlyphs) {
@@ -3073,12 +3354,10 @@ async function resolveImportsRecursive(style, accessToken, visited, depth, maxRe
     // Layers: imported layers go first (bottom), outer layers on top
     const outerLayers = style.layers || [];
     style.layers = [...flattenedLayers, ...outerLayers];
-    // Sprite: merge if both exist
-    if (style.sprite && importedSprite) {
-        style.sprite = mergeSprites(style.sprite, importedSprite);
-    }
-    else if (!style.sprite && importedSprite) {
-        style.sprite = importedSprite;
+    // Sprite: a single sprite stays as-is; several become an array sprite with
+    // each import's image references scoped to its sprite id.
+    if (importSprites.length > 0) {
+        style.sprite = combineSprites(style.sprite, importSprites);
     }
     // Glyphs: outer wins; if absent, use imported
     if (!style.glyphs && importedGlyphs) {
@@ -3265,23 +3544,37 @@ function isExpression(value) {
     return Array.isArray(value) && value.length > 0 && typeof value[0] === 'string';
 }
 /**
- * Merge two sprite values into array format.
- * Handles string + string, string + array, array + string, array + array.
- */
-function mergeSprites(outer, imported) {
-    const result = [];
-    // Add imported sprites first (bottom)
-    if (typeof imported === 'string') {
-        result.push({ id: 'imported', url: imported });
+ * Combine the outer style's sprite with its imports' sprites.
+ *
+ * With one sprite in total it is returned unchanged (a plain string keeps
+ * working in Mapbox GL, which only accepts a string `sprite`). With several,
+ * the result is a MapLibre array sprite: imports first, the outer sprite last
+ * as `default`. Array-sprite images from any entry other than `default` are
+ * only reachable as `{id}:{name}`, so each string-sprite import gets its
+ * import id as sprite id and its layers' image references are prefixed with
+ * `{importId}:`. Imports that already use an array sprite keep their entries
+ * and references unchanged.
+ */
+function combineSprites(outer, imports) {
+    if (!outer && imports.length === 1) {
+        return imports[0].sprite;
     }
-    else if (Array.isArray(imported)) {
-        for (const entry of imported) {
-            if (entry && typeof entry.url === 'string') {
-                result.push(entry);
+    const result = [];
+    for (const { importId, sprite, layers } of imports) {
+        if (typeof sprite === 'string') {
+            result.push({ id: importId, url: sprite });
+            for (const layer of layers) {
+                prefixLayerImages(layer, `${importId}:`);
+            }
+        }
+        else if (Array.isArray(sprite)) {
+            for (const entry of sprite) {
+                if (entry && typeof entry.url === 'string') {
+                    result.push(entry);
+                }
             }
         }
     }
-    // Add outer sprites on top
     if (typeof outer === 'string') {
         result.push({ id: 'default', url: outer });
     }
@@ -3294,8 +3587,74 @@ function mergeSprites(outer, imported) {
     }
     return result;
 }
+/** Layer properties whose values name sprite images. */
+const IMAGE_PROPERTIES = [
+    ['layout', 'icon-image'],
+    ['paint', 'fill-pattern'],
+    ['paint', 'line-pattern'],
+    ['paint', 'fill-extrusion-pattern'],
+    ['paint', 'background-pattern'],
+];
+function prefixLayerImages(layer, prefix) {
+    for (const [group, property] of IMAGE_PROPERTIES) {
+        const props = layer[group];
+        if (props && property in props) {
+            props[property] = prefixImageValue(props[property], prefix);
+        }
+    }
+}
+/**
+ * Prefix the image name(s) a property value resolves to. Handles plain names
+ * (including `{token}` templates), legacy `stops` functions, and expressions:
+ * `image` / `literal` directly, the output branches of `coalesce` / `case` /
+ * `match` / `step`, and anything else string-valued via `concat`.
+ */
+function prefixImageValue(value, prefix) {
+    if (typeof value === 'string') {
+        return value === '' ? value : `${prefix}${value}`;
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0 || typeof value[0] !== 'string')
+            return value;
+        const [op, ...args] = value;
+        const mapAt = (isOutput) => value.map((arg, i) => (i > 0 && isOutput(i) ? prefixImageValue(arg, prefix) : arg));
+        const lastIndex = value.length - 1;
+        switch (op) {
+            case 'image':
+                return ['image', prefixImageValue(args[0], prefix), ...args.slice(1)];
+            case 'literal':
+                return typeof args[0] === 'string' ? ['literal', `${prefix}${args[0]}`] : value;
+            case 'coalesce':
+                return mapAt(() => true);
+            case 'case':
+                // ["case", cond, out, cond, out, ..., fallback]
+                return mapAt(i => i % 2 === 0 || i === lastIndex);
+            case 'match':
+                // ["match", input, label, out, label, out, ..., fallback]
+                return mapAt(i => (i >= 3 && i % 2 === 1) || i === lastIndex);
+            case 'step':
+                // ["step", input, out0, stop, out, ...]
+                return mapAt(i => i >= 2 && i % 2 === 0);
+            default:
+                return ['concat', prefix, value];
+        }
+    }
+    if (value && typeof value === 'object') {
+        const fn = value;
+        if (Array.isArray(fn.stops)) {
+            return {
+                ...fn,
+                stops: fn.stops.map(stop => Array.isArray(stop) ? [stop[0], prefixImageValue(stop[1], prefix)] : stop),
+                ...('default' in fn
+                    ? { default: prefixImageValue(fn.default, prefix) }
+                    : {}),
+            };
+        }
+    }
+    return value;
+}
 
-const DEFAULT_WASM_URL = 'https://cdn.jsdelivr.net/npm/sql.js@1.14.1/dist/';
+const DEFAULT_WASM_URL = 'https://cdn.jsdelivr.net/npm/sql.js@1.15.2/dist/';
 let currentConfig = {};
 let sqlJsPromise = null;
 /**
@@ -3356,100 +3715,590 @@ async function getSqlJs() {
     return sqlJsPromise;
 }
 
-const fontLogger = logger.scope('FontService');
-class FontService {
+const modelLogger = logger.scope('ModelService');
+/**
+ * Build the storage key for a model. Kept consistent with sprite/glyph
+ * conventions: `{styleId}::model::{modelName}`.
+ */
+function modelKey(styleId, modelName) {
+    return `${styleId}::model::${modelName}`;
+}
+/** Names of the models stored for a style. */
+async function storedModelNames(styleId) {
+    const db = await dbPromise;
+    const prefix = modelKey(styleId, '');
+    const keys = await db.getAllKeys('models', IDBKeyRange.bound(prefix, `${prefix}￿`));
+    return new Set(keys.map(key => String(key).slice(prefix.length)));
+}
+/** True when the given key belongs to the given styleId's model store prefix. */
+function modelKeyBelongsToStyle(key, styleId) {
+    return key.startsWith(`${styleId}::model::`);
+}
+/**
+ * Service for downloading, storing, and serving Mapbox 3D model (.glb) files.
+ *
+ * Mapbox Standard declares 32 models at the top of `style.models`:
+ *
+ * ```json
+ * {
+ *   "maple1-lod1": "mapbox://models/mapbox/maple1-v4-lod1.glb",
+ *   ...
+ * }
+ * ```
+ *
+ * `model` layers (e.g. `trees`, `wind-turbine-towers`) pick one by name at
+ * render time. For offline use each referenced URL is fetched and stored
+ * here, and `patchStyleForOffline` rewrites the dictionary entries to
+ * `idb://{styleId}/model/{name}` URLs.
+ */
+class ModelService {
     db = dbPromise;
-    async downloadFonts(fontUrls, styleName, options = {}) {
+    /**
+     * Download the set of models referenced by `style.models` for one style.
+     *
+     * @param models   `{ modelName: resolvedHttpUrl }` — URLs must already be
+     *                 resolved (mapbox:// URLs should be resolved by the caller).
+     * @param styleId  The owning style's key.
+     */
+    async downloadModels(models, styleId, options = {}) {
         const db = await this.db;
-        const { batchSize = 10, maxRetries = 3, skipExisting = true, retryDelay = 1000, timeout = 30000, validateFonts = true, storageQuotaCheck = true, quietMode = false, } = options;
-        const startTime = Date.now();
-        let totalSize = 0;
-        let downloadedFonts = 0;
-        let skippedFonts = 0;
-        let failedFonts = 0;
-        const errors = [];
-        const fontsByType = {};
-        // Create progress tracker
-        const progressTracker = createProgressTracker(fontUrls.length);
-        // Filter existing fonts if skipExisting is true
-        let urlsToDownload = fontUrls;
+        const { onProgress, batchSize = 4, maxRetries = 3, skipExisting = true, timeoutMs = 30000, signal, } = options;
+        const entries = Object.entries(models);
+        const progressTracker = createProgressTracker(entries.length);
+        const result = {
+            totalModels: entries.length,
+            downloadedModels: 0,
+            skippedModels: 0,
+            failedModels: 0,
+            totalSize: 0,
+            errors: [],
+        };
+        const emit = () => onProgress?.(progressTracker.getProgress());
+        emit();
+        if (entries.length === 0)
+            return result;
+        // Pre-compute existing keys for skipExisting
+        const existingKeys = new Set();
         if (skipExisting) {
-            const existingFonts = new Set();
-            const tx = db.transaction(['fonts'], 'readonly');
-            let cursor = await tx.objectStore('fonts').openCursor();
-            while (cursor) {
-                existingFonts.add(cursor.value.key);
-                cursor = await cursor.continue();
+            const tx = db.transaction('models', 'readonly');
+            for await (const cursor of tx.store) {
+                existingKeys.add(cursor.value.key);
             }
-            urlsToDownload = fontUrls.filter(url => {
-                const key = this.createFontKey(url, styleName);
-                return !existingFonts.has(key);
-            });
-            skippedFonts = fontUrls.length - urlsToDownload.length;
         }
-        // Check storage quota if enabled
-        if (storageQuotaCheck && 'storage' in navigator && 'estimate' in navigator.storage) {
-            const estimate = await navigator.storage.estimate();
-            const usedSpace = estimate.usage || 0;
-            const availableSpace = (estimate.quota || 0) - usedSpace;
-            if (availableSpace < 50 * 1024 * 1024) {
-                // Less than 50MB
-                throw new Error('Insufficient storage space for font download');
+        await processBatch(entries, async ([modelName, url]) => {
+            // Cancelled: let the remaining models go by without fetching them.
+            if (signal?.aborted)
+                return;
+            const key = modelKey(styleId, modelName);
+            const label = `${styleId}::${modelName}`;
+            if (skipExisting && existingKeys.has(key)) {
+                result.skippedModels++;
+                progressTracker.update(1, label);
+                emit();
+                return;
             }
-        }
-        // Process fonts in batches with concurrency control
-        await processBatch(urlsToDownload, async (fontUrl) => {
             try {
-                const fontKey = this.createFontKey(fontUrl, styleName);
-                const response = await fetchResourceWithRetry(fontUrl, {
+                const response = await fetchResourceWithRetry(url, {
                     retries: maxRetries,
-                    retryDelay,
-                    timeout,
-                    proxyType: 'fonts',
+                    timeout: timeoutMs,
+                    proxyType: 'tiles',
                 });
                 if (response.type === 'json') {
-                    throw new Error(`Unexpected JSON response when fetching font: ${fontUrl}`);
-                }
-                const fontData = response.data;
-                const contentType = response.contentType ||
-                    (response.type === 'other' ? 'font/opentype' : `font/${response.type}`);
-                // Validate font if enabled
-                if (validateFonts) {
-                    await this.validateFont(fontData, contentType);
+                    throw new Error('Unexpected JSON response for model');
                 }
-                // Store font in database
-                const fontEntry = {
-                    key: fontKey,
-                    url: fontUrl,
-                    originalUrl: fontUrl,
-                    data: fontData,
+                const data = response.data;
+                const contentType = ('contentType' in response && response.contentType) || 'model/gltf-binary';
+                const entry = {
+                    key,
+                    data,
                     contentType,
-                    type: this.detectFontType(contentType, fontUrl),
-                    size: fontData.byteLength,
+                    size: data.byteLength,
+                    url,
+                    styleId,
+                    modelName,
                     lastModified: Date.now(),
                     downloadedAt: new Date().toISOString(),
-                    downloadId: styleName,
-                    metadata: {
-                        userAgent: navigator.userAgent,
-                        downloadTimestamp: Date.now(),
-                    },
                     expires: response.expires,
                 };
-                await db.put('fonts', fontEntry);
-                progressTracker.update(1, fontKey);
-                totalSize += fontData.byteLength;
-                downloadedFonts++;
-                // Track font types
-                const fontType = this.detectFontType(contentType, fontUrl);
-                fontsByType[fontType] = (fontsByType[fontType] || 0) + 1;
+                await db.put('models', entry);
+                result.downloadedModels++;
+                result.totalSize += data.byteLength;
+                progressTracker.update(1, label);
             }
-            catch (error) {
-                failedFonts++;
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                errors.push({
-                    url: fontUrl,
-                    error: errorMessage,
+            catch (err) {
+                const message = err instanceof Error ? err.message : String(err);
+                result.failedModels++;
+                result.errors.push({ url, error: message });
+                modelLogger.warn(`Failed to download model "${modelName}" from ${url}:`, err);
+                progressTracker.update(1, label, message);
+            }
+            emit();
+        }, { batchSize });
+        modelLogger.info(`Models downloaded for style ${styleId}: ${result.downloadedModels} new, ${result.skippedModels} skipped, ${result.failedModels} failed`);
+        return result;
+    }
+    /** Retrieve a single model by `{styleId, modelName}`. */
+    async getModel(styleId, modelName) {
+        const db = await this.db;
+        return db.get('models', modelKey(styleId, modelName));
+    }
+    /** Aggregate stats across all stored models. */
+    async getModelStats() {
+        const db = await this.db;
+        const stats = {
+            count: 0,
+            totalSize: 0,
+            averageSize: 0,
+            models: [],
+            modelsByStyle: {},
+        };
+        const tx = db.transaction('models', 'readonly');
+        for await (const cursor of tx.store) {
+            const m = cursor.value;
+            stats.count++;
+            stats.totalSize += m.size;
+            stats.models.push({ name: m.modelName, size: m.size, lastModified: m.lastModified });
+            stats.modelsByStyle[m.styleId] = (stats.modelsByStyle[m.styleId] ?? 0) + 1;
+        }
+        stats.averageSize = stats.count > 0 ? stats.totalSize / stats.count : 0;
+        return stats;
+    }
+    /**
+     * Delete models older than `maxAge` days. Defaults to 30.
+     */
+    async cleanupOldModels(maxAge = 30) {
+        const db = await this.db;
+        const cutoff = Date.now() - maxAge * 24 * 60 * 60 * 1000;
+        let deleted = 0;
+        const tx = db.transaction('models', 'readwrite');
+        for await (const cursor of tx.store) {
+            if (cursor.value.lastModified < cutoff) {
+                await cursor.delete();
+                deleted++;
+            }
+        }
+        return deleted;
+    }
+    /**
+     * Basic integrity check: remove entries with empty/missing data.
+     */
+    async verifyAndRepairModels() {
+        const db = await this.db;
+        let verified = 0;
+        let removed = 0;
+        const tx = db.transaction('models', 'readwrite');
+        for await (const cursor of tx.store) {
+            const m = cursor.value;
+            if (!m.data || m.data.byteLength === 0) {
+                await cursor.delete();
+                removed++;
+            }
+            else {
+                verified++;
+            }
+        }
+        return { verified, repaired: 0, removed };
+    }
+}
+// Singleton + convenience exports, matching other service modules.
+const modelService = new ModelService();
+const downloadModels = (models, styleId, options) => modelService.downloadModels(models, styleId, options);
+const getModel = (styleId, modelName) => modelService.getModel(styleId, modelName);
+const getModelStats = () => modelService.getModelStats();
+const cleanupOldModels = (maxAge) => modelService.cleanupOldModels(maxAge);
+const verifyAndRepairModels = () => modelService.verifyAndRepairModels();
+
+var modelService$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ModelService: ModelService,
+    cleanupOldModels: cleanupOldModels,
+    downloadModels: downloadModels,
+    getModel: getModel,
+    getModelStats: getModelStats,
+    modelKeyBelongsToStyle: modelKeyBelongsToStyle,
+    modelService: modelService,
+    storedModelNames: storedModelNames,
+    verifyAndRepairModels: verifyAndRepairModels
+});
+
+/**
+ * Mapbox GL v3 style-config helpers.
+ *
+ * Mapbox Standard is one style with switchable features: most of its layers set
+ * `layout.visibility` from `["config", key]` expressions backed by `style.schema`
+ * defaults. These helpers work out which sources the style actually needs for
+ * the current config, so features that are switched off aren't downloaded and
+ * features that are switched on aren't skipped.
+ */
+const configLogger = logger.scope('StyleConfig');
+/** Sentinel for an expression that can't be decided from config alone. */
+const UNKNOWN = Symbol('unknown');
+/**
+ * True for styles whose feature set is config-driven: they declare a `schema`,
+ * or were flattened from `imports` (whose config is already resolved into the
+ * layers). Other styles are never filtered by config.
+ */
+function isConfigDrivenStyle(style) {
+    const s = style;
+    if (!s)
+        return false;
+    return ((s.schema !== undefined && Object.keys(s.schema).length > 0) ||
+        (Array.isArray(s.imports) && s.imports.length > 0));
+}
+function evaluate(expr, config) {
+    if (!Array.isArray(expr))
+        return expr;
+    const [op, ...args] = expr;
+    switch (op) {
+        case 'literal':
+            return args[0];
+        case 'config': {
+            const key = args[0];
+            return typeof key === 'string' && key in config ? config[key] : UNKNOWN;
+        }
+        case '!': {
+            const value = evaluate(args[0], config);
+            return typeof value === 'boolean' ? !value : UNKNOWN;
+        }
+        case 'all':
+        case 'any': {
+            const decisive = op === 'any';
+            let sawUnknown = false;
+            for (const arg of args) {
+                const value = evaluate(arg, config);
+                if (value === decisive)
+                    return decisive;
+                if (typeof value !== 'boolean')
+                    sawUnknown = true;
+            }
+            return sawUnknown ? UNKNOWN : !decisive;
+        }
+        case '==':
+        case '!=': {
+            const a = evaluate(args[0], config);
+            const b = evaluate(args[1], config);
+            if (a === UNKNOWN || b === UNKNOWN)
+                return UNKNOWN;
+            return op === '==' ? a === b : a !== b;
+        }
+        case 'case': {
+            // ["case", cond, out, cond, out, ..., fallback]
+            for (let i = 0; i < args.length - 1; i += 2) {
+                const condition = evaluate(args[i], config);
+                if (typeof condition !== 'boolean')
+                    return UNKNOWN;
+                if (condition)
+                    return evaluate(args[i + 1], config);
+            }
+            return evaluate(args[args.length - 1], config);
+        }
+        case 'match': {
+            // ["match", input, label, out, label, out, ..., fallback]
+            const input = evaluate(args[0], config);
+            if (input === UNKNOWN)
+                return UNKNOWN;
+            for (let i = 1; i < args.length - 1; i += 2) {
+                const label = args[i];
+                if (Array.isArray(label) ? label.includes(input) : label === input) {
+                    return evaluate(args[i + 1], config);
+                }
+            }
+            return evaluate(args[args.length - 1], config);
+        }
+        default:
+            return UNKNOWN;
+    }
+}
+function collectIconsetIds(value, ids) {
+    if (Array.isArray(value)) {
+        for (const item of value)
+            collectIconsetIds(item, ids);
+    }
+    else if (value && typeof value === 'object') {
+        const record = value;
+        const iconset = record.iconset;
+        if (iconset && typeof iconset.id === 'string')
+            ids.add(iconset.id);
+        for (const item of Object.values(record))
+            collectIconsetIds(item, ids);
+    }
+}
+/**
+ * Sources a config-driven style uses under its current config (`active`), and
+ * those it references but only from hidden layers or unused iconsets (`inactive`).
+ *
+ * Deliberately errs towards keeping sources: a visibility expression that can't
+ * be decided counts as visible. Sources nothing in the style references
+ * (`extraSources`, ones a caller adds at runtime) are in neither set.
+ */
+function classifySources(style) {
+    const inactive = new Set();
+    const active = new Set();
+    if (!isConfigDrivenStyle(style))
+        return { active, inactive };
+    const s = style;
+    const config = {};
+    for (const [key, entry] of Object.entries(s.schema ?? {})) {
+        if (entry && typeof entry === 'object' && 'default' in entry)
+            config[key] = entry.default;
+    }
+    const activeIconsets = new Set();
+    for (const layer of (s.layers ?? [])) {
+        const visible = evaluate(layer?.layout?.visibility ?? 'visible', config) !== 'none';
+        if (typeof layer?.source === 'string') {
+            inactive.add(layer.source);
+            if (visible)
+                active.add(layer.source);
+        }
+        if (visible) {
+            // The whole layer, since `appearances` can also name an iconset.
+            collectIconsetIds(layer, activeIconsets);
+        }
+    }
+    for (const [id, iconset] of Object.entries(s.iconsets ?? {})) {
+        if (typeof iconset?.source !== 'string')
+            continue;
+        inactive.add(iconset.source);
+        if (activeIconsets.has(id))
+            active.add(iconset.source);
+    }
+    if (typeof s.terrain?.source === 'string')
+        active.add(s.terrain.source);
+    for (const id of active)
+        inactive.delete(id);
+    return { active, inactive };
+}
+/**
+ * Write config values into a style's `schema` defaults. `["config", key]` reads
+ * those defaults at render time, so this one edit drives both what gets
+ * downloaded and what the stored style shows offline. Keys the schema doesn't
+ * declare are ignored with a warning.
+ */
+function applyStyleConfig(style, config) {
+    const schema = style.schema;
+    for (const [key, value] of Object.entries(config)) {
+        const entry = schema?.[key];
+        if (entry && typeof entry === 'object') {
+            entry.default = value;
+        }
+        else {
+            configLogger.warn(`Ignoring styleConfig "${key}": the style's schema doesn't declare it`);
+        }
+    }
+}
+
+/**
+ * XYZ tile range covering `bounds` at zoom `z`. Shared by the download
+ * pipeline (which fetches exactly this range) and region-scoped consumers
+ * like MBTiles export, so both agree on which tiles belong to a region.
+ */
+function getTileRangeAtZoom(bounds, z) {
+    const minTile = pointToTileClamped(bounds[0][0], bounds[0][1], z);
+    const maxTile = pointToTileClamped(bounds[1][0], bounds[1][1], z);
+    return {
+        minX: Math.min(minTile[0], maxTile[0]),
+        maxX: Math.max(minTile[0], maxTile[0]),
+        minY: Math.min(minTile[1], maxTile[1]),
+        maxY: Math.max(minTile[1], maxTile[1]),
+    };
+}
+/** Web Mercator's latitude limit; tiles don't exist beyond it. */
+const MAX_MERCATOR_LAT = 85.0511287798066;
+/**
+ * `tilebelt.pointToTile`, kept on the tile grid. tilebelt wraps longitude 180
+ * to x = 0, so a region whose east edge is the antimeridian became the range
+ * 0..maxX — nearly the whole world at every zoom. Latitudes beyond the
+ * Mercator limit likewise fall off the grid.
+ */
+function pointToTileClamped(lon, lat, z) {
+    const maxIndex = 2 ** z - 1;
+    const clampedLon = Math.max(-180, Math.min(180, lon));
+    const clampedLat = Math.max(-MAX_MERCATOR_LAT, Math.min(MAX_MERCATOR_LAT, lat));
+    const [x, y] = tilebelt__namespace.pointToTile(clampedLon, clampedLat, z);
+    return [
+        clampedLon === 180 ? maxIndex : Math.max(0, Math.min(maxIndex, x)),
+        Math.max(0, Math.min(maxIndex, y)),
+    ];
+}
+/**
+ * Whether tile `z/x/y` falls inside `bounds` and `[minZoom, maxZoom]`.
+ */
+function isTileInRegion(z, x, y, region) {
+    if (z < region.minZoom || z > region.maxZoom)
+        return false;
+    const { minX, maxX, minY, maxY } = getTileRangeAtZoom(region.bounds, z);
+    return x >= minX && x <= maxX && y >= minY && y <= maxY;
+}
+/**
+ * Zoom levels to download for one source in `region`: the overlap of the
+ * region's and the source's zoom ranges. When they don't overlap, the source
+ * still gets the zooms the map needs from it:
+ * - source ends below the region (`maxzoom` < region min) → its `maxzoom`,
+ *   which the renderer overzooms for the region's zooms;
+ * - source starts above the region (`minzoom` > region max) → `minzoom`
+ *   through `maxzoom` (or just `minzoom` if unbounded).
+ */
+function sourceZoomRange(region, sourceMinZoom, sourceMaxZoom) {
+    const srcMin = sourceMinZoom !== undefined ? Math.ceil(sourceMinZoom) : undefined;
+    const srcMax = sourceMaxZoom !== undefined ? Math.floor(sourceMaxZoom) : undefined;
+    if (srcMax !== undefined && srcMax < region.minZoom) {
+        return { min: srcMax, max: srcMax };
+    }
+    if (srcMin !== undefined && srcMin > region.maxZoom) {
+        return { min: srcMin, max: srcMax ?? srcMin };
+    }
+    return {
+        min: Math.max(region.minZoom, srcMin ?? region.minZoom),
+        max: Math.min(region.maxZoom, srcMax ?? region.maxZoom),
+    };
+}
+/**
+ * A stored source's upstream `maxzoom`. Patched styles cap `maxzoom` for
+ * rendering and stash the upstream value under `__originalMaxzoom`.
+ */
+function upstreamMaxzoom(source) {
+    if (source?.__originalMaxzoom !== undefined)
+        return source.__originalMaxzoom ?? undefined;
+    return source?.maxzoom;
+}
+function hasValidBounds(region) {
+    const b = region.bounds;
+    return (Array.isArray(b) &&
+        b.length === 2 &&
+        b.every(corner => Array.isArray(corner) && corner.length === 2));
+}
+/**
+ * Whether a stored tile was downloaded for `region`: inside its bounds, at a
+ * zoom the download pipeline fetches for the tile's source (which can fall
+ * outside the region's own range — see `sourceZoomRange`). `sources` is the
+ * stored style's `sources`. Regions with malformed bounds match nothing.
+ */
+function tileBelongsToRegion(tile, region, sources) {
+    if (!hasValidBounds(region))
+        return false;
+    const source = tile.sourceId !== undefined ? sources[tile.sourceId] : undefined;
+    const { min, max } = sourceZoomRange(region, source?.minzoom, upstreamMaxzoom(source));
+    return isTileInRegion(tile.z, tile.x, tile.y, {
+        bounds: region.bounds,
+        minZoom: min,
+        maxZoom: max,
+    });
+}
+
+const fontLogger = logger.scope('FontService');
+class FontService {
+    db = dbPromise;
+    async downloadFonts(fontUrls, styleName, options = {}) {
+        const db = await this.db;
+        const { batchSize = 10, maxRetries = 3, skipExisting = true, retryDelay = 1000, timeout = 30000, validateFonts = true, storageQuotaCheck = true, quietMode = false, onProgress, } = options;
+        const startTime = Date.now();
+        let totalSize = 0;
+        let downloadedFonts = 0;
+        let skippedFonts = 0;
+        let failedFonts = 0;
+        const errors = [];
+        const fontsByType = {};
+        // Create progress tracker
+        const progressTracker = createProgressTracker(fontUrls.length);
+        const reportProgress = (message) => {
+            if (!onProgress)
+                return;
+            const progress = progressTracker.getProgress();
+            onProgress({
+                completed: progress.completed,
+                total: progress.total,
+                percentage: progress.percentage,
+                message,
+                errors: errors.map(e => e.error),
+            });
+        };
+        // Filter existing fonts if skipExisting is true
+        let urlsToDownload = fontUrls;
+        if (skipExisting) {
+            const existingFonts = new Set();
+            const tx = db.transaction(['fonts'], 'readonly');
+            let cursor = await tx.objectStore('fonts').openCursor();
+            while (cursor) {
+                existingFonts.add(cursor.value.key);
+                cursor = await cursor.continue();
+            }
+            urlsToDownload = fontUrls.filter(url => {
+                const key = this.createFontKey(url, styleName);
+                return !existingFonts.has(key);
+            });
+            skippedFonts = fontUrls.length - urlsToDownload.length;
+            // Skipped fonts count toward the total, so mark them done up front.
+            if (skippedFonts > 0) {
+                progressTracker.update(skippedFonts);
+            }
+        }
+        // Check storage quota if enabled
+        if (storageQuotaCheck && 'storage' in navigator && 'estimate' in navigator.storage) {
+            const estimate = await navigator.storage.estimate();
+            const usedSpace = estimate.usage || 0;
+            const availableSpace = (estimate.quota || 0) - usedSpace;
+            if (availableSpace < 50 * 1024 * 1024) {
+                // Less than 50MB
+                throw new Error('Insufficient storage space for font download');
+            }
+        }
+        // Process fonts in batches with concurrency control
+        await processBatch(urlsToDownload, async (fontUrl) => {
+            try {
+                const fontKey = this.createFontKey(fontUrl, styleName);
+                const response = await fetchResourceWithRetry(fontUrl, {
+                    retries: maxRetries,
+                    retryDelay,
+                    timeout,
+                    proxyType: 'fonts',
+                });
+                if (response.type === 'json') {
+                    throw new Error(`Unexpected JSON response when fetching font: ${fontUrl}`);
+                }
+                const fontData = response.data;
+                const contentType = response.contentType ||
+                    (response.type === 'other' ? 'font/opentype' : `font/${response.type}`);
+                // Validate font if enabled
+                if (validateFonts) {
+                    await this.validateFont(fontData, contentType);
+                }
+                // Store font in database
+                const fontEntry = {
+                    key: fontKey,
+                    url: fontUrl,
+                    originalUrl: fontUrl,
+                    data: fontData,
+                    contentType,
+                    type: this.detectFontType(contentType, fontUrl),
+                    size: fontData.byteLength,
+                    lastModified: Date.now(),
+                    downloadedAt: new Date().toISOString(),
+                    downloadId: styleName,
+                    metadata: {
+                        userAgent: navigator.userAgent,
+                        downloadTimestamp: Date.now(),
+                    },
+                    expires: response.expires,
+                };
+                await db.put('fonts', fontEntry);
+                progressTracker.update(1, fontKey);
+                reportProgress(`Downloaded ${fontKey}`);
+                totalSize += fontData.byteLength;
+                downloadedFonts++;
+                // Track font types
+                const fontType = this.detectFontType(contentType, fontUrl);
+                fontsByType[fontType] = (fontsByType[fontType] || 0) + 1;
+            }
+            catch (error) {
+                failedFonts++;
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                errors.push({
+                    url: fontUrl,
+                    error: errorMessage,
                 });
+                // A failed font is finished too; don't let the bar stall on it.
+                progressTracker.update(1, fontUrl);
+                reportProgress(`Failed: ${fontUrl}`);
                 // Only log detailed errors if not in quiet mode
                 if (!quietMode) {
                     fontLogger.error(`Failed to download font ${fontUrl}:`, errorMessage);
@@ -3462,6 +4311,7 @@ class FontService {
         }, { batchSize });
         const downloadTime = Date.now() - startTime;
         const averageSpeed = downloadTime > 0 ? (totalSize / downloadTime) * 1000 : 0;
+        reportProgress(`Font download complete: ${downloadedFonts} downloaded, ${skippedFonts} skipped, ${failedFonts} failed`);
         return {
             totalFonts: fontUrls.length,
             downloadedFonts,
@@ -3740,7 +4590,7 @@ class SpriteService {
      */
     async downloadSprites(spriteUrls, styleName, options = {}) {
         const db = await this.db;
-        const { onProgress, batchSize = 10, maxRetries = 3, skipExisting = true, timeoutMs = 15000, storageQuotaCheck = true, prioritySprites = [], bandwidthLimit, enableValidation = true, namePrefix, } = options;
+        const { onProgress, batchSize = 10, maxRetries = 3, skipExisting = true, timeoutMs = 15000, storageQuotaCheck = true, prioritySprites = [], bandwidthLimit, enableValidation = true, namePrefix, signal, } = options;
         const startTime = Date.now();
         let totalSize = 0;
         let downloadedSprites = 0;
@@ -3788,6 +4638,10 @@ class SpriteService {
                 return !existingSprites.has(key);
             });
             skippedSprites = spriteUrls.length - urlsToDownload.length;
+            // Skipped sprites count toward the total, so mark them done up front.
+            if (skippedSprites > 0) {
+                progressTracker.update(skippedSprites);
+            }
         }
         // Check storage quota if enabled
         if (storageQuotaCheck && 'storage' in navigator && 'estimate' in navigator.storage) {
@@ -3808,6 +4662,9 @@ class SpriteService {
             spriteLogger.debug(`  ${url} -> ${key}`);
         });
         await processBatch(urlsToDownload, async (spriteUrl) => {
+            // Cancelled: let the remaining sprites go by without fetching them.
+            if (signal?.aborted)
+                return;
             try {
                 const spriteName = namePrefix
                     ? this.buildSpriteName(spriteUrl, namePrefix)
@@ -3903,7 +4760,9 @@ class SpriteService {
                     error: errorMessage,
                 });
                 spriteLogger.error(`Failed to download sprite ${spriteUrl}:`, error);
-                // Update progress even on failure
+                // Advance progress on failure too — a failed item is finished, and
+                // otherwise the bar stalls, then jumps to 100% at the end.
+                progressTracker.update(1, this.extractSpriteName(spriteUrl));
                 if (onProgress) {
                     const progress = progressTracker.getProgress();
                     onProgress({
@@ -4217,7 +5076,74 @@ var spriteService$1 = /*#__PURE__*/Object.freeze({
     verifyAndRepairSprites: verifyAndRepairSprites
 });
 
-// Helper functions to work with StyleEntry structure
+/** A style URL's identity, ignoring the access token (same style, different token). */
+function styleUrlIdentity(url) {
+    try {
+        const parsed = new URL(url);
+        parsed.searchParams.delete('access_token');
+        return parsed.toString();
+    }
+    catch {
+        return url;
+    }
+}
+/**
+ * Pick the storage key for a style downloaded from `styleUrl`. `baseId` comes
+ * from the style's `id`/`name`, which unrelated styles can share ("Streets"),
+ * so a key already held by a style from a different URL is never reused:
+ * fall back to the key this URL was stored under before, else a free
+ * `${baseId}-N`. Entries without `originalUrl` (saved with
+ * `includeMetadata: false`) are assumed to be the same style, so re-downloads
+ * don't pile up duplicates; `carryOverRegions` keeps their regions either way.
+ */
+async function resolveStyleKey(db, baseId, styleUrl) {
+    const target = styleUrlIdentity(styleUrl);
+    const isSameStyle = (entry) => !!entry.originalUrl && styleUrlIdentity(entry.originalUrl) === target;
+    const existing = await db.get('styles', baseId);
+    if (!existing || !existing.originalUrl || isSameStyle(existing))
+        return baseId;
+    const all = await db.getAll('styles');
+    const previous = all.find(isSameStyle);
+    if (previous)
+        return previous.key;
+    const taken = new Set(all.map(entry => entry.key));
+    let n = 2;
+    while (taken.has(`${baseId}-${n}`))
+        n++;
+    logger.warn(`Style key "${baseId}" is used by a style from another URL; storing ${styleUrl} as "${baseId}-${n}"`);
+    return `${baseId}-${n}`;
+}
+/**
+ * Re-downloading a style replaces its stored entry. Carry over the regions
+ * already attached to it and re-patch the fresh style for them — otherwise
+ * every existing region is dropped and their tiles are orphaned. Patches a
+ * copy, so callers can keep using the unpatched style for resource downloads.
+ */
+async function carryOverRegions(db, entry) {
+    const existing = await db.get('styles', entry.key);
+    const regions = existing?.regions;
+    // Config set through `styleConfig` decides what renders and what's planned,
+    // so it has to survive a fresh copy of the style.
+    if (existing?.styleConfig) {
+        entry.style = JSON.parse(JSON.stringify(entry.style));
+        applyStyleConfig(entry.style, existing.styleConfig);
+        entry.styleConfig = existing.styleConfig;
+    }
+    if (!Array.isArray(regions) || regions.length === 0)
+        return;
+    entry.regions = regions;
+    entry.style = JSON.parse(JSON.stringify(entry.style));
+    // Regions' extra sources were added to the old copy, so add them to this one.
+    for (const region of regions) {
+        injectExtraSources(entry.style, region.extraSources);
+    }
+    stashOriginalModels(entry);
+    patchStyleForOffline(entry.style, entry.key, Math.max(...regions.map(region => region.maxZoom)), undefined, entry.key);
+    const { storedModelNames } = await Promise.resolve().then(function () { return modelService$1; });
+    restoreUnstoredModels(entry, await storedModelNames(entry.key));
+    logger.debug(`Carried ${regions.length} region(s) over to re-downloaded style ${entry.key}`);
+}
+// Helper functions to work with StyleEntry structure
 function createStyleEntry(key, style, provider = 'auto', metadata = {}) {
     return {
         key,
@@ -4319,8 +5245,11 @@ async function downloadStyles(stylesUrl, options = {}) {
                 layerCount: style.layers ? style.layers.length : 0,
             });
         }
+        // Mapbox Standard now arrives flat, so resolveImports may not have run.
+        sanitizeIndoorExpressions(style);
         // Check if style already exists in the database
         const db = await dbPromise;
+        style.id = await resolveStyleKey(db, style.id, stylesUrl);
         if (skipExisting) {
             const existingStyle = await db.get('styles', style.id);
             if (existingStyle && typeof existingStyle === 'object') {
@@ -4384,7 +5313,7 @@ async function downloadStyles(stylesUrl, options = {}) {
                             timeout: timeoutMs,
                             retryDelay: 1000,
                         });
-                        const sourceData = await sourceResponse.json();
+                        const sourceData = selectTileJsonVariant(await sourceResponse.json());
                         style.sources[sourceKey] = { ...source, ...sourceData }; // Embed source data
                         sourcesEmbedded++;
                         logger.debug(`Embedded source data for ${sourceKey}`);
@@ -4451,6 +5380,7 @@ async function downloadStyles(stylesUrl, options = {}) {
             }
             : {});
         // Save the style
+        await carryOverRegions(db, styleStorageItem);
         await db.put('styles', styleStorageItem);
         logger.debug('Style with sources saved successfully');
         onProgress?.({
@@ -4724,18 +5654,26 @@ async function loadStyleById(styleId) {
         return null;
     }
 }
+/** Delete every style and everything stored for them. */
 async function deleteStyles() {
     try {
         const db = await dbPromise;
-        await db.clear('styles');
+        await Promise.all(['tiles', 'fonts', 'glyphs', 'sprites', 'models', 'styles'].map(store => db.clear(store)));
+        clearAllCaches();
         logger.debug('All styles deleted successfully');
     }
     catch (error) {
         logger.error('Error deleting styles:', error);
     }
 }
+/**
+ * Delete a style, its regions and everything stored for it. The entry goes last,
+ * so a failure part-way leaves the style listed and able to be deleted again.
+ */
 async function deleteStyleById(styleId) {
     try {
+        const { RegionService } = await Promise.resolve().then(function () { return regionService; });
+        await new RegionService().deleteStyleData(styleId);
         const db = await dbPromise;
         await db.delete('styles', styleId);
         logger.debug(`Style with ID ${styleId} deleted successfully`);
@@ -4744,6 +5682,24 @@ async function deleteStyleById(styleId) {
         logger.error(`Error deleting style with ID ${styleId}:`, error);
     }
 }
+/**
+ * Bytes stored for each style, by style id: its tiles, and its other resources
+ * (glyphs, sprites, models and fonts). Tiles shared by regions count once.
+ */
+async function getStyleStorageSizes() {
+    const db = await dbPromise;
+    const sizes = {};
+    for (const storeName of ['tiles', 'glyphs', 'sprites', 'models', 'fonts']) {
+        for await (const cursor of db.transaction(storeName).store) {
+            const { styleId, size } = cursor.value;
+            if (!styleId)
+                continue;
+            sizes[styleId] ??= { tiles: 0, resources: 0 };
+            sizes[styleId][storeName === 'tiles' ? 'tiles' : 'resources'] += size ?? 0;
+        }
+    }
+    return sizes;
+}
 /**
  * Get enhanced style statistics
  */
@@ -4969,9 +5925,10 @@ async function isStyleDownloaded(styleId, styleUrl) {
  * Enhanced style download that supports both Mapbox GL and MapLibre GL
  */
 async function downloadStyleWithProvider(styleUrl, options = {}) {
-    const { provider: explicitProvider, accessToken: explicitAccessToken, forceProvider = false, skipExisting = false, enableSourceEmbedding = true, maxRetries = 3, timeoutMs = 30000, } = options;
+    const { provider: explicitProvider, accessToken: explicitAccessToken, forceProvider = false, skipExisting = false, enableSourceEmbedding = true, maxRetries = 3, timeoutMs = 30000, onProgress, } = options;
     const startTime = Date.now();
     let sourcesEmbedded = 0;
+    const emit = (percentage, message) => onProgress?.({ completed: percentage, total: 100, percentage, message, errors: [] });
     logger.debug(`Downloading style from: ${styleUrl}`);
     try {
         // Auto-detect provider if not explicitly set
@@ -4992,6 +5949,7 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
             fetchUrl = normalizeStyleUrl(styleUrl, extractedToken);
         }
         // Fetch the style
+        emit(0, 'Fetching style');
         const response = await fetchWithRetry(fetchUrl, {
             timeout: timeoutMs,
             retries: maxRetries,
@@ -5000,6 +5958,7 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
             throw new Error(`Failed to fetch style: ${response.status} ${response.statusText}`);
         }
         const style = (await response.json());
+        emit(20, 'Style fetched');
         // Resolve imports (Mapbox Standard / compositional styles)
         if (hasImports(style)) {
             const importToken = extractedToken || '';
@@ -5013,13 +5972,19 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
                 layerCount: style.layers ? style.layers.length : 0,
             });
         }
+        // Mapbox Standard now arrives flat, so resolveImports may not have run.
+        sanitizeIndoorExpressions(style);
+        emit(40, 'Processing style sources');
         // Process style for the detected provider
         const processedStyle = processStyleSources(style, detectedProvider, extractedToken);
         // Embed TileJSON data into sources for reliable offline tile downloads
         // This fetches each source's TileJSON URL and merges the result (including tiles array,
         // minzoom, maxzoom) into the source config, so tile downloads don't need extra fetches
         if (enableSourceEmbedding && processedStyle.sources) {
-            for (const [sourceKey, sourceConfig] of Object.entries(processedStyle.sources)) {
+            const sourceEntries = Object.entries(processedStyle.sources);
+            let sourcesVisited = 0;
+            for (const [sourceKey, sourceConfig] of sourceEntries) {
+                emit(40 + Math.round((sourcesVisited++ / Math.max(1, sourceEntries.length)) * 40), `Embedding source ${sourceKey}`);
                 const source = sourceConfig;
                 if (source.url && typeof source.url === 'string' && !source.tiles) {
                     const sourceUrl = source.url;
@@ -5032,7 +5997,7 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
                             timeout: timeoutMs,
                             retryDelay: 1000,
                         });
-                        const sourceData = await sourceResponse.json();
+                        const sourceData = selectTileJsonVariant(await sourceResponse.json());
                         // Only copy valid MapLibre/Mapbox source properties from TileJSON
                         // Copying unknown properties (like "name", "tilejson") causes
                         // MapLibre to throw "unknown property" errors on setStyle()
@@ -5066,6 +6031,7 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
                 }
             }
         }
+        emit(80, 'Saving style');
         // Set default glyphs URL if not present
         if (!processedStyle.glyphs) {
             processedStyle.glyphs = GLYPH_CONFIG.DEFAULT_URL;
@@ -5077,13 +6043,17 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
             throw new Error(`Style validation failed: ${validation.errors.join(', ')}`);
         }
         // Generate style ID
-        const styleId = processedStyle.name?.toLowerCase().replace(/\s+/g, '-') || `style-${Date.now()}`;
-        // Check if style already exists
         const db = await dbPromise;
+        const styleId = await resolveStyleKey(db, 
+        // The key goes into resource keys ("{key}:...") and idb:// URLs, so ":" or "/"
+        // in a style's name would make its data look like another style's or break its URLs.
+        processedStyle.name?.toLowerCase().replace(/[\s:/\\?#%]+/g, '-') || `style-${Date.now()}`, styleUrl);
+        // Check if style already exists
         if (skipExisting) {
             const existingStyle = await db.get('styles', styleId);
             if (existingStyle) {
                 logger.debug(`Style ${styleId} already exists, skipping`);
+                emit(100, 'Style already exists');
                 return {
                     styleId,
                     success: true,
@@ -5114,7 +6084,9 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
             accessToken: extractedToken,
         });
         // Save style
+        await carryOverRegions(db, styleEntry);
         await db.put('styles', styleEntry);
+        emit(100, 'Style saved');
         const downloadTime = Date.now() - startTime;
         logger.info(`Style ${styleId} downloaded in ${downloadTime}ms`);
         return {
@@ -5163,12 +6135,38 @@ var styleService = /*#__PURE__*/Object.freeze({
     downloadStyleWithProvider: downloadStyleWithProvider,
     downloadStyles: downloadStyles,
     getStyleStats: getStyleStats,
+    getStyleStorageSizes: getStyleStorageSizes,
     isStyleDownloaded: isStyleDownloaded,
     loadStyleById: loadStyleById,
     loadStyles: loadStyles
 });
 
 const regionLogger$1 = logger.scope('RegionService');
+/**
+ * Where each phase sits in a download's overall progress, as [start, end] in
+ * percent. Tiles get the most because they're usually most of the bytes.
+ */
+const PHASE_PROGRESS_RANGES = {
+    style: [0, 5],
+    sprites: [5, 10],
+    glyphs: [10, 25],
+    models: [25, 30],
+    tiles: [30, 99],
+    metadata: [99, 100],
+};
+/** True for a Mapbox-hosted style sprite, which has an `iconset.pbf` beside it. */
+function hasMapboxIconset(spriteUrl) {
+    try {
+        const { hostname, pathname } = new URL(spriteUrl);
+        return (hostname === 'api.mapbox.com' &&
+            pathname.startsWith('/styles/v1/') &&
+            pathname.endsWith('/sprite'));
+    }
+    catch {
+        // Not an absolute URL, so not a Mapbox-hosted sprite.
+        return false;
+    }
+}
 /**
  * True when `key` belongs to the given styleId.
  *
@@ -5185,44 +6183,10 @@ function resourceKeyBelongsToStyle(key, styleId) {
 }
 class RegionService {
     /**
-     * Check if a tile overlaps with any region bounds
-     */
-    tileOverlapsWithRegion(tileX, tileY, tileZ, region) {
-        // Validate region bounds exist and have correct structure
-        if (!region.bounds ||
-            !Array.isArray(region.bounds) ||
-            region.bounds.length !== 2 ||
-            !Array.isArray(region.bounds[0]) ||
-            !Array.isArray(region.bounds[1]) ||
-            region.bounds[0].length !== 2 ||
-            region.bounds[1].length !== 2) {
-            regionLogger$1.warn('Invalid region bounds structure:', region.bounds);
-            return false;
-        }
-        // Get tile bounds using tilebelt
-        const tileBounds = tilebelt__namespace.tileToBBOX([tileX, tileY, tileZ]);
-        const [tileWest, tileSouth, tileEast, tileNorth] = tileBounds;
-        // Region bounds format: [[west, south], [east, north]]
-        const regionWest = region.bounds[0][0];
-        const regionSouth = region.bounds[0][1];
-        const regionEast = region.bounds[1][0];
-        const regionNorth = region.bounds[1][1];
-        // Check if bounding boxes overlap
-        return !(tileEast < regionWest ||
-            tileWest > regionEast ||
-            tileNorth < regionSouth ||
-            tileSouth > regionNorth);
-    }
-    /**
-     * Check if a tile overlaps with any of the given regions
-     */
-    tileOverlapsWithAnyRegion(tileX, tileY, tileZ, regions) {
-        return regions.some(region => this.tileOverlapsWithRegion(tileX, tileY, tileZ, region));
-    }
-    /**
-     * Delete tiles that don't overlap with any remaining regions
+     * Delete tiles no remaining region needs — outside every remaining region's
+     * bounds, or at a zoom none of them downloads for that tile's source.
      */
-    async deleteNonOverlappingTiles(styleId, remainingRegions) {
+    async deleteNonOverlappingTiles(styleId, remainingRegions, sources) {
         const db = await dbPromise;
         let deletedCount = 0;
         regionLogger$1.debug(`Checking tiles for style ${styleId} against ${remainingRegions.length} remaining regions`);
@@ -5239,9 +6203,13 @@ class RegionService {
                 regionLogger$1.warn(`Invalid tile key format: ${tileEntry.key}`);
                 continue;
             }
-            const { x, y, z } = parsed;
-            // Check if this tile overlaps with any remaining region
-            if (!this.tileOverlapsWithAnyRegion(x, y, z, remainingRegions)) {
+            const tile = {
+                sourceId: tileEntry.sourceId ?? parsed.sourceId,
+                z: parsed.z,
+                x: parsed.x,
+                y: parsed.y,
+            };
+            if (!remainingRegions.some(region => tileBelongsToRegion(tile, region, sources))) {
                 regionLogger$1.debug(`Deleting non-overlapping tile: ${tileEntry.key}`);
                 await cursor.delete();
                 deletedCount++;
@@ -5295,6 +6263,46 @@ class RegionService {
     /**
      * Delete all tiles for a style
      */
+    /**
+     * Delete everything stored for a style except its own entry: tiles, fonts,
+     * glyphs, sprites and models.
+     */
+    /**
+     * Undo what a failed or cancelled download left behind: its partly stored
+     * tiles and its config change. A style this download created, which no other
+     * region uses, goes entirely, and so does a style deleted during the download.
+     */
+    async cleanUpFailedDownload(styleId, createdStyle, configBefore) {
+        try {
+            const db = await dbPromise;
+            const entry = await db.get('styles', styleId);
+            if (!entry) {
+                await this.deleteStyleData(styleId);
+                return;
+            }
+            const regions = Array.isArray(entry.regions) ? entry.regions : [];
+            if (createdStyle && regions.length === 0) {
+                await this.deleteStyleData(styleId);
+                await db.delete('styles', styleId);
+                return;
+            }
+            if (configBefore) {
+                entry.style.schema = configBefore.schema;
+                entry.styleConfig = configBefore.values;
+                await db.put('styles', entry);
+            }
+            await this.deleteNonOverlappingTiles(styleId, regions, (entry.style?.sources ?? {}));
+            clearAllCaches();
+        }
+        catch (error) {
+            regionLogger$1.warn(`Could not clean up after the failed download on ${styleId}:`, error);
+        }
+    }
+    async deleteStyleData(styleId) {
+        await this.deleteAllStyleTiles(styleId);
+        await this.deleteStyleResources(styleId);
+        clearAllCaches();
+    }
     async deleteAllStyleTiles(styleId) {
         const db = await dbPromise;
         let deletedCount = 0;
@@ -5341,23 +6349,15 @@ class RegionService {
             styleEntry.regions = [];
         }
         // Inject extra sources into the style so they get patched for offline use
-        if (region.extraSources && region.extraSources.length > 0) {
-            for (const extra of region.extraSources) {
-                if (!styleEntry.style.sources[extra.id]) {
-                    styleEntry.style.sources[extra.id] = {
-                        type: extra.type || 'vector',
-                        tiles: extra.tiles,
-                        ...(extra.minzoom !== undefined ? { minzoom: extra.minzoom } : {}),
-                        ...(extra.maxzoom !== undefined ? { maxzoom: extra.maxzoom } : {}),
-                        ...(extra.attribution ? { attribution: extra.attribution } : {}),
-                    };
-                    regionLogger$1.debug(`Injected extra source into style: ${extra.id}`);
-                }
-            }
-        }
-        // Patch style for offline use with the region's maxZoom and tileExtension
-        // Pass styleId for sprites since they're stored with the style ID, not region ID
-        patchStyleForOffline(styleEntry.style, region.id, region.maxZoom, region.tileExtension, styleId);
+        injectExtraSources(styleEntry.style, region.extraSources);
+        stashOriginalModels(styleEntry);
+        // Patch style for offline use. URLs are keyed by styleId (resources are
+        // stored per style), and maxzoom is capped at the deepest region on the
+        // style — not just this one — so adding a shallow region doesn't hide a
+        // deeper sibling's tiles.
+        const otherRegions = styleEntry.regions.filter((r) => r.id !== region.id && r.regionId !== region.id);
+        patchStyleForOffline(styleEntry.style, region.id, Math.max(region.maxZoom, ...otherRegions.map(r => r.maxZoom)), region.tileExtension, styleId);
+        restoreUnstoredModels(styleEntry, await storedModelNames(styleId));
         // Add or update region metadata on the style entry.
         // `expiry` is stored as an absolute timestamp (per the type doc and all
         // readers in cleanupService/cleanupManagement/RegionList). If the caller
@@ -5385,6 +6385,8 @@ class RegionService {
             styleEntry.regions.push(regionWithMeta);
         }
         await db.put('styles', styleEntry);
+        // Drop in-memory region→style / tile caches so the fetch handler sees the new region.
+        clearAllCaches();
     }
     async loadRegion(region, options = {}) {
         return this.downloadRegion(region, options);
@@ -5398,17 +6400,22 @@ class RegionService {
         if (!region.styleUrl) {
             throw new Error('Region must have a styleUrl');
         }
-        const { onProgress, provider = 'auto', accessToken, skipGlyphs = false, skipSprites = false, skipModels = false, glyphRanges, tileOptions, } = options;
+        validateZoomLevels(region.minZoom, region.maxZoom);
+        const { onProgress, provider = 'auto', accessToken, skipGlyphs = false, skipSprites = false, skipModels = false, glyphRanges, tileOptions, styleConfig, signal, } = options;
+        let overallPercentage = 0;
         const emit = (phase, completed, total, message) => {
             if (!onProgress)
                 return;
             const safeTotal = total > 0 ? total : 1;
             const clamped = Math.min(completed, safeTotal);
+            const [start, end] = PHASE_PROGRESS_RANGES[phase];
+            overallPercentage = Math.max(overallPercentage, start + (end - start) * (clamped / safeTotal));
             onProgress({
                 phase,
                 completed: clamped,
-                total: safeTotal,
+                total,
                 percentage: (clamped / safeTotal) * 100,
+                overallPercentage,
                 message,
             });
         };
@@ -5447,9 +6454,22 @@ class RegionService {
         const originalSpriteUrl = (styleEntry.originalSpriteUrl ??
             storedStyle.sprite);
         const originalGlyphsUrl = styleEntry.originalGlyphsUrl ?? storedStyle.glyphs;
+        // Applied before the resource phases, which all plan from the style's config.
+        // Kept so a failed download can put the config back as it was.
+        const configBefore = styleConfig
+            ? JSON.parse(JSON.stringify({ schema: storedStyle.schema, values: styleEntry.styleConfig }))
+            : undefined;
+        if (styleConfig) {
+            applyStyleConfig(storedStyle, styleConfig);
+            styleEntry.styleConfig = { ...styleEntry.styleConfig, ...styleConfig };
+        }
+        // A reused style may predate download-time sanitizing.
+        sanitizeIndoorExpressions(storedStyle);
+        await (await dbPromise).put('styles', styleEntry);
         // 2. Sprites
         const spriteResults = [];
-        if (!skipSprites) {
+        // After a cancel, later phases don't start; the tile step then cleans up.
+        if (!skipSprites && !signal?.aborted) {
             const spriteSources = normalizeSpriteProperty(originalSpriteUrl);
             if (spriteSources.length > 0) {
                 const { downloadSprites } = await Promise.resolve().then(function () { return spriteService$1; });
@@ -5457,16 +6477,17 @@ class RegionService {
                 // sibling is also served under the same /styles/v1/.../<hash>/ path
                 // — we detect that case per-source below and append it to the list.
                 const baseSuffixes = ['.json', '.png', '@2x.json', '@2x.png'];
-                // Estimate total files assuming iconset is always included (the actual
-                // number may be smaller; the emit helper clamps progress to total).
-                const totalFiles = spriteSources.length * (baseSuffixes.length + 1);
+                const resolveSpriteBase = (url) => isMapboxProtocol(url) && effectiveAccessToken
+                    ? resolveMapboxUrl(url, effectiveAccessToken)
+                    : url;
+                const totalFiles = spriteSources.reduce((sum, source) => {
+                    const base = resolveSpriteBase(source.url).split('?')[0];
+                    return sum + baseSuffixes.length + (hasMapboxIconset(base) ? 1 : 0);
+                }, 0);
                 let completed = 0;
                 emit('sprites', 0, totalFiles, 'Downloading sprites');
                 for (const source of spriteSources) {
-                    let spriteBase = source.url;
-                    if (isMapboxProtocol(spriteBase) && effectiveAccessToken) {
-                        spriteBase = resolveMapboxUrl(spriteBase, effectiveAccessToken);
-                    }
+                    const spriteBase = resolveSpriteBase(source.url);
                     const qIndex = spriteBase.indexOf('?');
                     const suffixes = [...baseSuffixes];
                     // Mapbox Standard serves an iconset.pbf alongside the sprite under
@@ -5474,18 +6495,7 @@ class RegionService {
                     // /styles/v1/{owner}/{style}/{hash}/iconset.pbf. The last path
                     // segment is `sprite`, so replacing it with `iconset.pbf` works.
                     const pathWithoutQuery = qIndex !== -1 ? spriteBase.slice(0, qIndex) : spriteBase;
-                    let isMapboxStandardSprite = false;
-                    try {
-                        const parsed = new URL(pathWithoutQuery);
-                        isMapboxStandardSprite =
-                            parsed.hostname === 'api.mapbox.com' &&
-                                parsed.pathname.startsWith('/styles/v1/') &&
-                                parsed.pathname.endsWith('/sprite');
-                    }
-                    catch {
-                        // Non-URL sprite base (e.g. relative); not a Mapbox Standard sprite.
-                    }
-                    if (isMapboxStandardSprite) {
+                    if (hasMapboxIconset(pathWithoutQuery)) {
                         // The path-rewrite suffix replaces the trailing `sprite` segment.
                         suffixes.push('__ICONSET__');
                     }
@@ -5501,6 +6511,7 @@ class RegionService {
                     });
                     try {
                         const result = await downloadSprites(spriteUrls, styleId, {
+                            signal,
                             enableValidation: true,
                             skipExisting: false,
                             namePrefix: source.id !== 'sprite' ? source.id : undefined,
@@ -5520,7 +6531,10 @@ class RegionService {
         }
         // 3. Glyphs
         let glyphResult;
-        if (!skipGlyphs && originalGlyphsUrl && !originalGlyphsUrl.startsWith('idb://')) {
+        if (!skipGlyphs &&
+            !signal?.aborted &&
+            originalGlyphsUrl &&
+            !originalGlyphsUrl.startsWith('idb://')) {
             const fontFamilies = new Set(extractAllFontNames(storedStyle));
             if (fontFamilies.size > 0) {
                 const { downloadGlyphs } = await Promise.resolve().then(function () { return glyphService$1; });
@@ -5534,6 +6548,7 @@ class RegionService {
                 // jump when the real total came in).
                 try {
                     glyphResult = await downloadGlyphs(glyphsUrl, Array.from(fontFamilies), styleId, ranges, {
+                        signal,
                         onProgress: (progress) => {
                             emit('glyphs', progress.completed, progress.total, 'Downloading glyphs');
                         },
@@ -5548,15 +6563,17 @@ class RegionService {
         //    turbine .glb assets. Two value shapes exist in the wild
         //    (plain string or `{ uri }`) — we accept both.
         let modelResult;
-        if (!skipModels && storedStyle.models) {
-            const rawModels = storedStyle.models;
+        if (!skipModels && !signal?.aborted && storedStyle.models) {
+            // Upstream URLs, from before patching, so models that failed last time are retried.
+            const rawModels = (styleEntry.originalModels ?? storedStyle.models);
+            const alreadyStored = await storedModelNames(styleId);
             const resolved = {};
             for (const [name, value] of Object.entries(rawModels)) {
                 const uri = typeof value === 'string' ? value : value?.uri;
-                if (!uri)
+                if (!uri || alreadyStored.has(name))
                     continue;
                 if (uri.startsWith('idb://'))
-                    continue; // already patched
+                    continue; // patched before upstream URLs were kept
                 const httpUrl = isMapboxProtocol(uri) && effectiveAccessToken
                     ? resolveMapboxUrl(uri, effectiveAccessToken)
                     : uri;
@@ -5569,6 +6586,7 @@ class RegionService {
                 emit('models', 0, Object.keys(resolved).length, 'Downloading 3D models');
                 try {
                     modelResult = await downloadModels(resolved, styleId, {
+                        signal,
                         onProgress: (progress) => {
                             emit('models', progress.completed, progress.total, 'Downloading 3D models');
                         },
@@ -5579,29 +6597,57 @@ class RegionService {
                 }
             }
         }
+        // Renderer code fetched from api.mapbox.com at render time (3D decoders,
+        // RTL text, procedural buildings). Never throws; see cacheMapboxRuntimeAssets.
+        let runtimeAssetsCached;
+        if (!signal?.aborted &&
+            /mapbox:\/\/|api\.mapbox\.com/.test(`${region.styleUrl ?? ''} ${originalGlyphsUrl ?? ''}`)) {
+            const { cacheMapboxRuntimeAssets } = await Promise.resolve().then(function () { return runtimeAssetService; });
+            runtimeAssetsCached = await cacheMapboxRuntimeAssets();
+        }
         // 5. Tiles — use the stored (source-embedded) style, which still has HTTP tile URLs
-        const { downloadTiles } = await Promise.resolve().then(function () { return tileService$1; });
-        const regionForTiles = { ...region, styleId };
-        emit('tiles', 0, 100, 'Downloading tiles');
-        const tileResult = await downloadTiles(regionForTiles, storedStyle, styleId, {
-            skipExisting: false,
-            batchSize: 20,
-            ...tileOptions,
-            onProgress: progress => {
-                emit('tiles', progress.completed, progress.total, progress.message ?? 'Downloading tiles');
-                tileOptions?.onProgress?.(progress);
-            },
-        });
-        // 6. Metadata — must run last, since addRegion patches style URLs to idb://.
-        // Do NOT auto-fill tileExtension from tileResult: that's only the first
-        // source's extension, and addRegion feeds it to patchStyleForOffline which
-        // would override ALL sources — breaking mixed raster+vector styles. The
-        // patcher extracts per-source extensions from tile URL patterns when
-        // tileExtension is undefined. Callers who need to force an extension can
-        // still pass `region.tileExtension` explicitly.
-        emit('metadata', 0, 1, 'Saving region metadata');
-        await this.addRegion({ ...region, styleId });
-        emit('metadata', 1, 1, 'Region ready');
+        let tileResult;
+        try {
+            signal?.throwIfAborted();
+            const { downloadTiles } = await Promise.resolve().then(function () { return tileService$1; });
+            const regionForTiles = { ...region, styleId };
+            // The tile count isn't known until the plan is made, which can take a while.
+            emit('tiles', 0, 0, 'Planning tiles');
+            tileResult = await downloadTiles(regionForTiles, storedStyle, styleId, {
+                skipExisting: false,
+                batchSize: 20,
+                ...tileOptions,
+                signal,
+                onProgress: progress => {
+                    emit('tiles', progress.completed, progress.total, progress.message ?? 'Downloading tiles');
+                    tileOptions?.onProgress?.(progress);
+                },
+            });
+            signal?.throwIfAborted();
+            // A region with no tiles at all isn't worth saving as if it had worked, as happens
+            // with an expired token. Partial failures still save: tileResult reports them.
+            const { failedTiles, downloadedTiles, skippedTiles } = tileResult;
+            if (failedTiles > 0 && downloadedTiles === 0 && skippedTiles === 0) {
+                throw new Error(`None of the ${failedTiles} tiles could be downloaded. Check your connection and access token.`);
+            }
+            // 6. Metadata — must run last, since addRegion patches style URLs to idb://.
+            // Do NOT auto-fill tileExtension from tileResult: that's only the first
+            // source's extension, and addRegion feeds it to patchStyleForOffline which
+            // would override ALL sources — breaking mixed raster+vector styles. The
+            // patcher extracts per-source extensions from tile URL patterns when
+            // tileExtension is undefined. Callers who need to force an extension can
+            // still pass `region.tileExtension` explicitly.
+            emit('metadata', 0, 1, 'Saving region metadata');
+            if (!(await (await dbPromise).get('styles', styleId))) {
+                throw new Error('The style was deleted while this region was downloading.');
+            }
+            await this.addRegion({ ...region, styleId });
+            emit('metadata', 1, 1, 'Region ready');
+        }
+        catch (error) {
+            await this.cleanUpFailedDownload(styleId, Boolean(styleResult), configBefore);
+            throw error;
+        }
         return {
             regionId: region.id,
             styleId,
@@ -5609,6 +6655,7 @@ class RegionService {
             spriteResults,
             glyphResult,
             modelResult,
+            runtimeAssetsCached,
             tileResult,
         };
     }
@@ -5633,12 +6680,20 @@ class RegionService {
         }
         return undefined;
     }
-    async deleteRegion(regionId) {
+    /**
+     * Delete a region and the tiles/resources only it needed.
+     * @param styleId - The style holding the region. Region ids are only unique
+     *   within a style, so pass it whenever known; without it the first style
+     *   containing `regionId` is used.
+     */
+    async deleteRegion(regionId, styleId) {
         const db = await dbPromise;
-        regionLogger$1.debug(`Deleting region: ${regionId}`);
+        regionLogger$1.debug(`Deleting region: ${regionId}${styleId ? ` from style ${styleId}` : ''}`);
         try {
             // Find which style contains this region
-            const allStyles = await db.getAll('styles');
+            const allStyles = styleId
+                ? [await db.get('styles', styleId)].filter((entry) => entry !== undefined)
+                : await db.getAll('styles');
             regionLogger$1.debug(`Found ${allStyles.length} styles to search through`);
             let foundStyle = null;
             let foundRegion = null;
@@ -5657,7 +6712,7 @@ class RegionService {
                 }
             }
             if (!foundStyle || !foundRegion) {
-                regionLogger$1.warn(`Region ${regionId} not found in any style`);
+                regionLogger$1.warn(`Region ${regionId} not found in ${styleId ? `style ${styleId}` : 'any style'}`);
                 return;
             }
             regionLogger$1.debug(`Found region in style: ${foundStyle.key}`, foundRegion);
@@ -5668,11 +6723,7 @@ class RegionService {
             // If this was the last region for the style, delete the entire style and all its resources
             if (remainingRegions.length === 0) {
                 regionLogger$1.info(`Style ${foundStyle.key} has no remaining regions, deleting entire style and all resources`);
-                // Delete all tiles for this style
-                const deletedTileCount = await this.deleteAllStyleTiles(foundStyle.key);
-                regionLogger$1.debug(`Deleted ${deletedTileCount} tiles`);
-                // Delete all style resources (fonts, glyphs, sprites)
-                await this.deleteStyleResources(foundStyle.key);
+                await this.deleteStyleData(foundStyle.key);
                 // Delete the style entry itself
                 await db.delete('styles', foundStyle.key);
                 regionLogger$1.info(`Completely deleted style ${foundStyle.key} and all associated resources`);
@@ -5680,11 +6731,18 @@ class RegionService {
             else {
                 regionLogger$1.debug(`Style ${foundStyle.key} has ${remainingRegions.length} remaining regions, cleaning up non-overlapping tiles`);
                 // Delete tiles that don't overlap with any remaining regions
-                const deletedTileCount = await this.deleteNonOverlappingTiles(foundStyle.key, remainingRegions);
+                const deletedTileCount = await this.deleteNonOverlappingTiles(foundStyle.key, remainingRegions, (foundStyle.style?.sources ?? {}));
+                // Re-patch for the remaining regions: shrink maxzoom to the deepest
+                // survivor, and re-key URLs by styleId. Styles patched before URLs
+                // were style-keyed still point at `idb://{deletedRegionId}/...`,
+                // which no longer resolves once the region is gone.
+                patchStyleForOffline(foundStyle.style, foundStyle.key, Math.max(...remainingRegions.map((r) => r.maxZoom)), undefined, foundStyle.key);
+                restoreUnstoredModels(foundStyle, await storedModelNames(foundStyle.key));
                 // Update the style entry with the remaining regions
                 await db.put('styles', foundStyle);
                 regionLogger$1.info(`Region ${regionId} deleted successfully from style ${foundStyle.key}, cleaned up ${deletedTileCount} non-overlapping tiles`);
             }
+            clearAllCaches();
             regionLogger$1.info(`Region deletion completed successfully for: ${regionId}`);
         }
         catch (error) {
@@ -5735,6 +6793,13 @@ async function loadAllStoredRegions() {
     }
 }
 
+var regionService = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RegionService: RegionService,
+    loadAllStoredRegions: loadAllStoredRegions,
+    resourceKeyBelongsToStyle: resourceKeyBelongsToStyle
+});
+
 const cleanupLogger = logger.scope('CleanupService');
 class CleanupService {
     db = dbPromise;
@@ -5833,9 +6898,9 @@ class CleanupService {
             let deletedCount = 0;
             for (const region of uniqueRegionsToDelete) {
                 try {
-                    const regionSize = await this.getRegionSize(region.id);
+                    const bytesBefore = await this.getStyleStoredBytes(region.styleId);
                     await this.deleteRegionCallback(region.id, region.styleId);
-                    result.freedSpace += regionSize;
+                    result.freedSpace += Math.max(0, bytesBefore - (await this.getStyleStoredBytes(region.styleId)));
                     deletedCount++;
                     onProgress?.({
                         phase: 'cleaning',
@@ -5899,7 +6964,7 @@ class CleanupService {
             neverExpiring: 0,
         };
         for (const region of regions) {
-            const regionSize = await this.getRegionSize(region.id);
+            const regionSize = await this.getRegionSize(region.id, region.styleId);
             totalSize += regionSize;
             // Track by style
             const styleId = region.styleId || 'unknown';
@@ -6001,8 +7066,8 @@ class CleanupService {
     async getExpiredResourceCount() {
         const db = await this.db;
         const now = Date.now();
-        const counts = { tiles: 0, fonts: 0, sprites: 0, glyphs: 0, total: 0 };
-        const stores = ['tiles', 'fonts', 'sprites', 'glyphs'];
+        const counts = { tiles: 0, fonts: 0, sprites: 0, glyphs: 0, models: 0, total: 0 };
+        const stores = ['tiles', 'fonts', 'sprites', 'glyphs', 'models'];
         for (const storeName of stores) {
             try {
                 const tx = db.transaction([storeName], 'readonly');
@@ -6048,46 +7113,77 @@ class CleanupService {
     async getAllRegions() {
         return loadAllStoredRegions();
     }
+    /**
+     * Bytes of the tiles stored for a region: tiles on its style inside its
+     * bounds, at the zooms the download pipeline fetched for each source. Tiles
+     * are stored per style, so regions that overlap share (and both count)
+     * their common tiles; shared style resources are not included.
+     */
     async getRegionSize(regionId, styleIdParam) {
         const db = await this.db;
-        let totalSize = 0;
-        let styleId = styleIdParam;
-        let regionMinZoom = 0;
-        let regionMaxZoom = 22;
-        // Find the region's styleId and zoom range from styles.regions[]
-        if (!styleId) {
-            const styles = await db.getAll('styles');
-            for (const style of styles) {
-                const styleEntry = style;
-                if (styleEntry.regions && Array.isArray(styleEntry.regions)) {
-                    const found = styleEntry.regions.find(r => r.id === regionId);
-                    if (found) {
-                        styleId = styleEntry.key;
-                        regionMinZoom = found.minZoom ?? 0;
-                        regionMaxZoom = found.maxZoom ?? 22;
-                        break;
-                    }
-                }
+        const candidates = styleIdParam
+            ? [await db.get('styles', styleIdParam)]
+            : await db.getAll('styles');
+        let styleEntry;
+        let region;
+        for (const entry of candidates) {
+            region = entry?.regions?.find((r) => r.id === regionId || r.regionId === regionId);
+            if (region) {
+                styleEntry = entry;
+                break;
             }
         }
-        if (!styleId) {
+        if (!styleEntry || !region) {
             return 0;
         }
-        // Calculate size from tiles that belong to this style within the region's zoom range
+        const styleId = styleEntry.key;
+        const sources = (styleEntry.style?.sources ?? {});
+        let totalSize = 0;
         const tx = db.transaction(['tiles'], 'readonly');
         for await (const cursor of tx.objectStore('tiles')) {
             const tile = cursor.value;
             if (tile.styleId !== styleId)
                 continue;
-            // Filter by zoom range when possible
             const parsed = parseTileKey(tile.key);
-            if (parsed && (parsed.z < regionMinZoom || parsed.z > regionMaxZoom)) {
+            if (!parsed)
                 continue;
+            const coords = {
+                sourceId: tile.sourceId ?? parsed.sourceId,
+                z: parsed.z,
+                x: parsed.x,
+                y: parsed.y,
+            };
+            if (tileBelongsToRegion(coords, region, sources)) {
+                totalSize += tile.size || 0;
             }
-            totalSize += tile.size || 0;
         }
         return totalSize;
     }
+    /**
+     * Bytes stored for a style: its tiles plus the fonts, glyphs, sprites and
+     * models keyed to it. Measured before and after a deletion to report the
+     * space actually freed (a region's own size over-counts tiles it shares).
+     */
+    async getStyleStoredBytes(styleId) {
+        if (!styleId)
+            return 0;
+        const db = await this.db;
+        let total = 0;
+        const tx = db.transaction(['tiles'], 'readonly');
+        for await (const cursor of tx.objectStore('tiles')) {
+            if (cursor.value.styleId === styleId)
+                total += cursor.value.size || 0;
+        }
+        for (const storeName of ['fonts', 'glyphs', 'sprites', 'models']) {
+            const storeTx = db.transaction([storeName], 'readonly');
+            for await (const cursor of storeTx.objectStore(storeName)) {
+                const entry = cursor.value;
+                if (resourceKeyBelongsToStyle(entry.key, styleId))
+                    total += entry.size || 0;
+            }
+        }
+        return total;
+    }
     async calculateTotalStorageSize() {
         if ('storage' in navigator && 'estimate' in navigator.storage) {
             const estimate = await navigator.storage.estimate();
@@ -6101,6 +7197,7 @@ class CleanupService {
             'fonts',
             'sprites',
             'glyphs',
+            'models',
             'styles',
         ];
         for (const storeName of stores) {
@@ -6142,7 +7239,7 @@ class CleanupService {
             if (currentSize >= targetSize)
                 break;
             selected.push(region);
-            const regionSize = await this.getRegionSize(region.id);
+            const regionSize = await this.getRegionSize(region.id, region.styleId);
             currentSize += regionSize > 0 ? regionSize : 10 * 1024 * 1024; // Fallback to 10MB if size unknown
         }
         return selected;
@@ -6233,7 +7330,7 @@ class TileService {
      */
     async downloadTiles(region, style, styleId, options = {}) {
         const db = await this.db;
-        const { onProgress, batchSize = 10, maxRetries = 3, skipExisting = true, timeout = 10000, retryDelay = 1000, priorityZoomLevels = [], storageQuotaCheck = true, validateTiles = false, compressTiles = false, bandwidthLimit, probeSourcesBeforeDownload = true, skipKnownSparseSources = true, } = options;
+        const { onProgress, batchSize = 10, maxRetries = 3, skipExisting = true, timeout = 10000, retryDelay = 1000, priorityZoomLevels = [], storageQuotaCheck = true, validateTiles = false, compressTiles = false, bandwidthLimit, probeSourcesBeforeDownload = true, skipKnownSparseSources = true, skipInactiveSources = true, signal, } = options;
         const startTime = Date.now();
         let totalSize = 0;
         let downloadedTiles = 0;
@@ -6274,31 +7371,31 @@ class TileService {
         if (tileSources.size === 0) {
             throw new Error('No valid tile sources found in style definition');
         }
-        // Some sources have zoom ranges outside the user's region (e.g. procedural-buildings
-        // at z15 when the user requested z0-z14). Generate additional tile coordinates so
+        // Features a config-driven style has switched off (Mapbox Standard's HD
+        // roads, indoor, landmark icons...) don't need their tiles.
+        const { active: activeSources, inactive: inactiveSources } = classifySources(style);
+        if (skipInactiveSources) {
+            for (const sourceId of inactiveSources) {
+                if (tileSources.delete(sourceId)) {
+                    tileLogger.info(`Skipping source "${sourceId}" — nothing visible uses it under the style's config`);
+                }
+            }
+        }
+        // Some sources have zoom ranges entirely outside the user's region (e.g.
+        // procedural-buildings at z15 when the user requested z0-z14, or a z14-capped
+        // basemap for a z15-z17 region). Generate the extra coordinates they need so
         // these sources aren't silently skipped.
+        const generatedZooms = new Set();
+        for (let z = region.minZoom; z <= region.maxZoom; z++)
+            generatedZooms.add(z);
         for (const [sourceId, sourceConfig] of tileSources) {
-            const srcMin = sourceConfig.minzoom;
-            const srcMax = sourceConfig.maxzoom;
-            if (srcMin === undefined && srcMax === undefined)
-                continue;
-            const extraMinZ = srcMin !== undefined && srcMin > region.maxZoom ? srcMin : null;
-            const extraMaxZ = srcMax !== undefined && srcMax < region.minZoom ? srcMax : null;
-            // Only extend upward (higher zoom) — sources that need zooms above region.maxZoom
-            if (extraMinZ !== null) {
-                const upperBound = srcMax !== undefined ? srcMax : extraMinZ;
-                tileLogger.debug(`Source ${sourceId} needs zoom ${extraMinZ}-${upperBound} beyond region max ${region.maxZoom}, generating extra tiles`);
-                const extraRegion = { ...region, minZoom: extraMinZ, maxZoom: upperBound };
-                const extraCoords = this.generateTileCoordinates(extraRegion);
-                tileCoords.push(...extraCoords);
-            }
-            // Extend downward (lower zoom) — sources that need zooms below region.minZoom
-            if (extraMaxZ !== null) {
-                const lowerBound = srcMin !== undefined ? srcMin : extraMaxZ;
-                tileLogger.debug(`Source ${sourceId} needs zoom ${lowerBound}-${extraMaxZ} below region min ${region.minZoom}, generating extra tiles`);
-                const extraRegion = { ...region, minZoom: lowerBound, maxZoom: extraMaxZ };
-                const extraCoords = this.generateTileCoordinates(extraRegion);
-                tileCoords.push(...extraCoords);
+            const { min, max } = sourceZoomRange(region, sourceConfig.minzoom, sourceConfig.maxzoom);
+            for (let z = min; z <= max; z++) {
+                if (generatedZooms.has(z))
+                    continue;
+                generatedZooms.add(z);
+                tileLogger.debug(`Source ${sourceId} needs zoom ${z} outside region ${region.minZoom}-${region.maxZoom}, generating extra tiles`);
+                tileCoords.push(...this.generateTileCoordinates({ ...region, minZoom: z, maxZoom: z }));
             }
         }
         // Sort by priority zoom levels if requested (lower zoom first)
@@ -6341,14 +7438,16 @@ class TileService {
             // issuing any network request. They 404 for nearly every coord in a
             // typical region; the downstream probe step would catch them, but the
             // probe itself logs 404s in devtools. Matching here keeps the console
-            // clean.
-            if (skipKnownSparseSources &&
-                tiles.some(template => urlReferencesKnownSparseTileset(template))) {
+            // clean. A sparse source a switched-on feature needs is kept instead, and
+            // not probed, because its tiles cluster and the three probe tiles could
+            // easily all miss.
+            const knownSparse = tiles.some(template => urlReferencesKnownSparseTileset(template));
+            const neededSparseSource = knownSparse && activeSources.has(sourceId);
+            if (skipKnownSparseSources && knownSparse && !neededSparseSource) {
                 tileLogger.info(`Skipping source "${sourceId}" — references a known sparse Mapbox Standard sub-tileset (no probe/download issued)`);
                 continue;
             }
-            const sourceMinZ = Math.ceil(sourceConfig.minzoom ?? region.minZoom);
-            const sourceMaxZ = Math.floor(sourceConfig.maxzoom ?? region.maxZoom);
+            const { min: sourceMinZ, max: sourceMaxZ } = sourceZoomRange(region, sourceConfig.minzoom, sourceConfig.maxzoom);
             let coordsForSource = tileCoords.filter(coord => coord.z >= sourceMinZ && coord.z <= sourceMaxZ);
             tileLogger.debug(`After zoom filter (${sourceMinZ}-${sourceMaxZ}): ${coordsForSource.length} tiles`);
             if (coordsForSource.length === 0) {
@@ -6382,7 +7481,7 @@ class TileService {
             // A single probe on the wrong coord would false-pass and cause a
             // flood of 404s during the download. Probing start/middle/end of
             // the plan catches this case.
-            if (probeSourcesBeforeDownload) {
+            if (probeSourcesBeforeDownload && !neededSparseSource) {
                 const picks = [
                     coordsForSource[0],
                     coordsForSource[Math.floor(coordsForSource.length / 2)],
@@ -6441,6 +7540,9 @@ class TileService {
                 .map(([z, count]) => `Z${z}: ${count} tiles`)
                 .join(', '));
             await processBatch(plan.coords, async (coord) => {
+                // Cancelled: let the remaining tiles go by without fetching them.
+                if (signal?.aborted)
+                    return;
                 const { x, y, z } = coord;
                 const label = `${plan.sourceId}:${z}/${x}/${y}`;
                 let tileUrl = '';
@@ -6550,7 +7652,9 @@ class TileService {
                     const errorObject = _error;
                     errorMessage = errorObject instanceof Error ? errorObject.message : String(errorObject);
                     // 404s on sparse tilesets (landmarks, POIs) are expected — don't count as failures
-                    const is404 = errorMessage.includes('404') || errorMessage.includes('not found');
+                    // Match the start only: the message goes on to include the URL, whose
+                    // coordinates or token can contain "404".
+                    const is404 = /^(Resource not found \(404\)|HTTP 404\b)/.test(errorMessage);
                     const isExpected = errorMessage.includes('NonRetryableError');
                     if (is404) {
                         skippedTiles++;
@@ -6728,13 +7832,7 @@ class TileService {
         tileLogger.debug(`Approximate area: ${areaApproxKm2.toFixed(2)} km² (improved calculation)`);
         tileLogger.debug(`Region dimensions: ${widthKm.toFixed(1)}km × ${heightKm.toFixed(1)}km`);
         for (let z = region.minZoom; z <= region.maxZoom; z++) {
-            const bounds = region.bounds;
-            const minTile = tilebelt__namespace.pointToTile(bounds[0][0], bounds[0][1], z);
-            const maxTile = tilebelt__namespace.pointToTile(bounds[1][0], bounds[1][1], z);
-            const minX = Math.min(minTile[0], maxTile[0]);
-            const maxX = Math.max(minTile[0], maxTile[0]);
-            const minY = Math.min(minTile[1], maxTile[1]);
-            const maxY = Math.max(minTile[1], maxTile[1]);
+            const { minX, maxX, minY, maxY } = getTileRangeAtZoom(region.bounds, z);
             const tilesAtZoom = (maxX - minX + 1) * (maxY - minY + 1);
             tilesByZoom[z] = tilesAtZoom;
             tileLogger.debug(`Zoom ${z}: ${tilesAtZoom} tiles (X: ${minX}-${maxX}, Y: ${minY}-${maxY})`);
@@ -6768,7 +7866,10 @@ class TileService {
         }
         tileLogger.debug('Processing sources in extractTileSources:', Object.keys(style.sources));
         for (const [sourceId, sourceConfig] of Object.entries(style.sources)) {
-            const config = sourceConfig;
+            // Shallow copy: the maxzoom override below must not mutate the caller's style.
+            const config = {
+                ...sourceConfig,
+            };
             tileLogger.debug(`Source ${sourceId} RAW DATA:`, JSON.stringify(config, null, 2));
             tileLogger.debug(`Processing source ${sourceId}:`, {
                 type: config.type,
@@ -6779,18 +7880,26 @@ class TileService {
             });
             // Handle tile-based sources (vector, raster, raster-dem, batched-model,
             // raster-array). `raster-array` is used by Mapbox Standard for layers
-            // like `mapbox-landmarks` (mapbox.mapbox-landmark-icons-v1) — the tiles
-            // are fetched from the same /v4/ endpoint as other tilesets, so the
-            // TileJSON resolution path below handles them uniformly.
+            // like `mapbox-landmarks` (mapbox.mapbox-landmark-icons-v1). Each type has
+            // its own tile endpoint (/v4/, /raster/v1/, /rasterarrays/v1/, /3dtiles/v1/),
+            // but TileJSON gives the URL for all of them, so the resolution path below
+            // handles them uniformly.
             if (config.type === 'vector' ||
                 config.type === 'raster' ||
                 config.type === 'raster-dem' ||
                 config.type === 'raster-array' ||
                 config.type === 'batched-model') {
+                // A style already patched for offline (every region after the first)
+                // has idb:// tiles and a maxzoom capped to earlier regions; plan from
+                // the upstream values patchStyleForOffline stashed instead.
+                const sourceTiles = config.__originalTiles ?? config.tiles;
+                if (config.__originalMaxzoom !== undefined) {
+                    config.maxzoom = config.__originalMaxzoom ?? undefined;
+                }
                 // Handle direct tile URLs in the source config
-                if (config.tiles && Array.isArray(config.tiles) && config.tiles.length > 0) {
+                if (sourceTiles && Array.isArray(sourceTiles) && sourceTiles.length > 0) {
                     // Resolve mapbox:// tile URLs to HTTPS, then filter for HTTP(S) URLs
-                    const resolvedTiles = config.tiles.map((tile) => {
+                    const resolvedTiles = sourceTiles.map((tile) => {
                         if (isMapboxProtocol(tile)) {
                             // Try to find an access token from the style or source URL
                             const accessToken = this.extractAccessTokenFromStyle(style);
@@ -6862,7 +7971,9 @@ class TileService {
                             });
                             tileLogger.debug(`TileJSON fetch response type: ${response.type}`);
                             if (response.type === 'json') {
-                                const jsonData = response.data;
+                                const jsonData = response.data
+                                    ? selectTileJsonVariant(response.data)
+                                    : null;
                                 tileLogger.debug(`TileJSON data keys: ${Object.keys(jsonData || {}).join(', ')}`);
                                 if (jsonData &&
                                     typeof jsonData === 'object' &&
@@ -6966,16 +8077,9 @@ class TileService {
             }
         }
         if (tileSources.size === 0) {
+            // No fabricated fallback: a relative '{z}/{x}/{y}.pbf' template resolves
+            // against the page and stores whatever the app server returns as tiles.
             tileLogger.warn('No valid tile sources found in style', Object.keys(style.sources));
-            // As a last resort, try to use a common vector tile source pattern if we can't extract any
-            if (style.sources && Object.keys(style.sources).length > 0) {
-                const firstSourceId = Object.keys(style.sources)[0];
-                tileLogger.debug(`Attempting to create fallback source from ${firstSourceId}`);
-                tileSources.set(firstSourceId, {
-                    type: 'vector',
-                    tiles: ['{z}/{x}/{y}.pbf'],
-                });
-            }
         }
         return tileSources;
     }
@@ -7133,7 +8237,7 @@ class GlyphService {
     db = dbPromise;
     async downloadGlyphs(glyphUrl, fontstacks, styleName, ranges = ['0-255'], options = {}) {
         const db = await this.db;
-        const { maxConcurrency = 5, retries = 3, timeout = 10000, onProgress, enableValidation = true, priorityFonts = [], } = options;
+        const { maxConcurrency = 5, retries = 3, timeout = 10000, onProgress, enableValidation = true, priorityFonts = [], signal, } = options;
         const startTime = Date.now();
         let totalSize = 0;
         let downloadedGlyphs = 0;
@@ -7165,7 +8269,8 @@ class GlyphService {
         // Process glyphs with concurrency control
         const semaphore = new Array(maxConcurrency).fill(0);
         const promises = semaphore.map(async () => {
-            while (glyphTasks.length > 0) {
+            // Once cancelled, workers stop taking tasks; those in flight finish.
+            while (glyphTasks.length > 0 && !signal?.aborted) {
                 const task = glyphTasks.shift();
                 if (!task)
                     break;
@@ -7385,339 +8490,144 @@ class GlyphService {
                 corruptionRate: stats.count > 0 ? (stats.corruptedGlyphs.length / stats.count) * 100 : 0,
             },
             temporal: {
-                oldestGlyph: stats.oldestGlyph,
-                newestGlyph: stats.newestGlyph,
-                ageSpan: stats.oldestGlyph && stats.newestGlyph
-                    ? stats.newestGlyph.lastModified - stats.oldestGlyph.lastModified
-                    : 0,
-            },
-        };
-    }
-    /**
-     * Remove glyphs older than the specified age. When `options.styleId` is
-     * provided, only glyphs belonging to that style (per
-     * `resourceKeyBelongsToStyle`) are eligible.
-     */
-    async cleanupOldGlyphs(maxAge = 30, options = {}) {
-        const db = await this.db;
-        const cutoffTime = Date.now() - maxAge * 24 * 60 * 60 * 1000;
-        const { styleId } = options;
-        let deletedCount = 0;
-        const tx = db.transaction('glyphs', 'readwrite');
-        for await (const cursor of tx.store) {
-            const glyphEntry = cursor.value;
-            const belongs = !styleId || resourceKeyBelongsToStyle(glyphEntry.key, styleId);
-            if (belongs && glyphEntry.lastModified < cutoffTime) {
-                await cursor.delete();
-                deletedCount++;
-            }
-        }
-        return deletedCount;
-    }
-    async verifyAndRepairGlyphs() {
-        const db = await this.db;
-        let verified = 0;
-        // eslint-disable-next-line prefer-const -- will be incremented when repair logic is added
-        let repaired = 0;
-        let removed = 0;
-        const tx = db.transaction('glyphs', 'readwrite');
-        for await (const cursor of tx.store) {
-            const glyphEntry = cursor.value;
-            try {
-                // Basic validation
-                if (!glyphEntry.data || glyphEntry.size === 0) {
-                    await cursor.delete();
-                    removed++;
-                }
-                else {
-                    this.validateGlyphData(glyphEntry.data);
-                    verified++;
-                }
-            }
-            catch {
-                // Remove corrupted glyphs (they can be re-downloaded)
-                await cursor.delete();
-                removed++;
-            }
-        }
-        return { verified, repaired, removed };
-    }
-    validateGlyphData(data) {
-        if (data.byteLength < 10) {
-            throw new Error('Glyph data too short');
-        }
-        // Basic Protocol Buffer validation
-        const view = new Uint8Array(data);
-        // Check for valid protobuf structure (basic check)
-        if (view[0] === 0x00 && view[1] === 0x00 && view[2] === 0x00 && view[3] === 0x00) {
-            throw new Error('Invalid glyph data - appears to be empty');
-        }
-    }
-    normalizeFontstack(fontstack) {
-        try {
-            return decodeURIComponent(fontstack);
-        }
-        catch {
-            return fontstack;
-        }
-    }
-    buildGlyphPath(fontstack, range) {
-        const normalizedFontstack = this.normalizeFontstack(fontstack);
-        return `${normalizedFontstack}/${range}.pbf`;
-    }
-    parseGlyphKey(key) {
-        let remaining = key;
-        let styleId;
-        if (remaining.includes('::')) {
-            const [prefix, ...rest] = remaining.split('::');
-            styleId = prefix;
-            remaining = rest.join('::');
-        }
-        else if (remaining.includes(':') && !remaining.includes('/')) {
-            const [prefix, rest] = remaining.split(':');
-            styleId = styleId ?? prefix;
-            remaining = rest;
-        }
-        const trimmed = remaining.endsWith('.pbf') ? remaining.slice(0, -4) : remaining;
-        if (trimmed.includes('/')) {
-            const [fontstack, range] = trimmed.split('/');
-            if (fontstack && range) {
-                return { styleId, fontstack, range };
-            }
-        }
-        if (trimmed.includes('_')) {
-            const [fontstack, range] = trimmed.split('_');
-            if (fontstack && range) {
-                return { styleId, fontstack, range };
-            }
-        }
-        return { styleId, fontstack: trimmed, range: '' };
-    }
-    createGlyphKey(fontstack, range, styleName) {
-        // Create a consistent key from the style name, fontstack and range
-        // Format: stylename::fontstack/range.pbf (if styleName provided) or fontstack/range.pbf
-        const glyphPath = this.buildGlyphPath(fontstack, range);
-        if (styleName) {
-            return `${styleName}::${glyphPath}`;
-        }
-        // Fallback to original format for backward compatibility
-        return glyphPath;
-    }
-}
-// Export singleton instance and functions for backward compatibility
-const glyphService = new GlyphService();
-const downloadGlyphs = (glyphUrl, fontstacks, styleName, ranges, options) => glyphService.downloadGlyphs(glyphUrl, fontstacks, styleName, ranges, options);
-const loadGlyphs = (fontstack, ranges, styleName) => glyphService.loadGlyphs(fontstack, ranges, styleName);
-const getGlyphStats = () => glyphService.getGlyphStats();
-const getGlyphAnalytics = () => glyphService.getGlyphAnalytics();
-const cleanupOldGlyphs = (maxAge, options) => glyphService.cleanupOldGlyphs(maxAge, options);
-const verifyAndRepairGlyphs = () => glyphService.verifyAndRepairGlyphs();
-
-var glyphService$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    GlyphService: GlyphService,
-    cleanupOldGlyphs: cleanupOldGlyphs,
-    downloadGlyphs: downloadGlyphs,
-    getGlyphAnalytics: getGlyphAnalytics,
-    getGlyphStats: getGlyphStats,
-    glyphService: glyphService,
-    loadGlyphs: loadGlyphs,
-    verifyAndRepairGlyphs: verifyAndRepairGlyphs
-});
-
-const modelLogger = logger.scope('ModelService');
-/**
- * Build the storage key for a model. Kept consistent with sprite/glyph
- * conventions: `{styleId}::model::{modelName}`.
- */
-function modelKey(styleId, modelName) {
-    return `${styleId}::model::${modelName}`;
-}
-/** True when the given key belongs to the given styleId's model store prefix. */
-function modelKeyBelongsToStyle(key, styleId) {
-    return key.startsWith(`${styleId}::model::`);
-}
-/**
- * Service for downloading, storing, and serving Mapbox 3D model (.glb) files.
- *
- * Mapbox Standard declares 32 models at the top of `style.models`:
- *
- * ```json
- * {
- *   "maple1-lod1": "mapbox://models/mapbox/maple1-v4-lod1.glb",
- *   ...
- * }
- * ```
- *
- * `model` layers (e.g. `trees`, `wind-turbine-towers`) pick one by name at
- * render time. For offline use each referenced URL is fetched and stored
- * here, and `patchStyleForOffline` rewrites the dictionary entries to
- * `idb://{styleId}/model/{name}` URLs.
- */
-class ModelService {
-    db = dbPromise;
-    /**
-     * Download the set of models referenced by `style.models` for one style.
-     *
-     * @param models   `{ modelName: resolvedHttpUrl }` — URLs must already be
-     *                 resolved (mapbox:// URLs should be resolved by the caller).
-     * @param styleId  The owning style's key.
-     */
-    async downloadModels(models, styleId, options = {}) {
-        const db = await this.db;
-        const { onProgress, batchSize = 4, maxRetries = 3, skipExisting = true, timeoutMs = 30000, } = options;
-        const entries = Object.entries(models);
-        const progressTracker = createProgressTracker(entries.length);
-        const result = {
-            totalModels: entries.length,
-            downloadedModels: 0,
-            skippedModels: 0,
-            failedModels: 0,
-            totalSize: 0,
-            errors: [],
-        };
-        const emit = () => onProgress?.(progressTracker.getProgress());
-        emit();
-        if (entries.length === 0)
-            return result;
-        // Pre-compute existing keys for skipExisting
-        const existingKeys = new Set();
-        if (skipExisting) {
-            const tx = db.transaction('models', 'readonly');
-            for await (const cursor of tx.store) {
-                existingKeys.add(cursor.value.key);
-            }
-        }
-        await processBatch(entries, async ([modelName, url]) => {
-            const key = modelKey(styleId, modelName);
-            const label = `${styleId}::${modelName}`;
-            if (skipExisting && existingKeys.has(key)) {
-                result.skippedModels++;
-                progressTracker.update(1, label);
-                emit();
-                return;
-            }
-            try {
-                const response = await fetchResourceWithRetry(url, {
-                    retries: maxRetries,
-                    timeout: timeoutMs,
-                    proxyType: 'tiles',
-                });
-                if (response.type === 'json') {
-                    throw new Error('Unexpected JSON response for model');
-                }
-                const data = response.data;
-                const contentType = ('contentType' in response && response.contentType) || 'model/gltf-binary';
-                const entry = {
-                    key,
-                    data,
-                    contentType,
-                    size: data.byteLength,
-                    url,
-                    styleId,
-                    modelName,
-                    lastModified: Date.now(),
-                    downloadedAt: new Date().toISOString(),
-                    expires: response.expires,
-                };
-                await db.put('models', entry);
-                result.downloadedModels++;
-                result.totalSize += data.byteLength;
-                progressTracker.update(1, label);
-            }
-            catch (err) {
-                const message = err instanceof Error ? err.message : String(err);
-                result.failedModels++;
-                result.errors.push({ url, error: message });
-                modelLogger.warn(`Failed to download model "${modelName}" from ${url}:`, err);
-                progressTracker.update(1, label, message);
-            }
-            emit();
-        }, { batchSize });
-        modelLogger.info(`Models downloaded for style ${styleId}: ${result.downloadedModels} new, ${result.skippedModels} skipped, ${result.failedModels} failed`);
-        return result;
-    }
-    /** Retrieve a single model by `{styleId, modelName}`. */
-    async getModel(styleId, modelName) {
-        const db = await this.db;
-        return db.get('models', modelKey(styleId, modelName));
-    }
-    /** Aggregate stats across all stored models. */
-    async getModelStats() {
-        const db = await this.db;
-        const stats = {
-            count: 0,
-            totalSize: 0,
-            averageSize: 0,
-            models: [],
-            modelsByStyle: {},
+                oldestGlyph: stats.oldestGlyph,
+                newestGlyph: stats.newestGlyph,
+                ageSpan: stats.oldestGlyph && stats.newestGlyph
+                    ? stats.newestGlyph.lastModified - stats.oldestGlyph.lastModified
+                    : 0,
+            },
         };
-        const tx = db.transaction('models', 'readonly');
-        for await (const cursor of tx.store) {
-            const m = cursor.value;
-            stats.count++;
-            stats.totalSize += m.size;
-            stats.models.push({ name: m.modelName, size: m.size, lastModified: m.lastModified });
-            stats.modelsByStyle[m.styleId] = (stats.modelsByStyle[m.styleId] ?? 0) + 1;
-        }
-        stats.averageSize = stats.count > 0 ? stats.totalSize / stats.count : 0;
-        return stats;
     }
     /**
-     * Delete models older than `maxAge` days. Defaults to 30.
+     * Remove glyphs older than the specified age. When `options.styleId` is
+     * provided, only glyphs belonging to that style (per
+     * `resourceKeyBelongsToStyle`) are eligible.
      */
-    async cleanupOldModels(maxAge = 30) {
+    async cleanupOldGlyphs(maxAge = 30, options = {}) {
         const db = await this.db;
-        const cutoff = Date.now() - maxAge * 24 * 60 * 60 * 1000;
-        let deleted = 0;
-        const tx = db.transaction('models', 'readwrite');
+        const cutoffTime = Date.now() - maxAge * 24 * 60 * 60 * 1000;
+        const { styleId } = options;
+        let deletedCount = 0;
+        const tx = db.transaction('glyphs', 'readwrite');
         for await (const cursor of tx.store) {
-            if (cursor.value.lastModified < cutoff) {
+            const glyphEntry = cursor.value;
+            const belongs = !styleId || resourceKeyBelongsToStyle(glyphEntry.key, styleId);
+            if (belongs && glyphEntry.lastModified < cutoffTime) {
                 await cursor.delete();
-                deleted++;
+                deletedCount++;
             }
         }
-        return deleted;
+        return deletedCount;
     }
-    /**
-     * Basic integrity check: remove entries with empty/missing data.
-     */
-    async verifyAndRepairModels() {
+    async verifyAndRepairGlyphs() {
         const db = await this.db;
         let verified = 0;
+        // eslint-disable-next-line prefer-const -- will be incremented when repair logic is added
+        let repaired = 0;
         let removed = 0;
-        const tx = db.transaction('models', 'readwrite');
+        const tx = db.transaction('glyphs', 'readwrite');
         for await (const cursor of tx.store) {
-            const m = cursor.value;
-            if (!m.data || m.data.byteLength === 0) {
+            const glyphEntry = cursor.value;
+            try {
+                // Basic validation
+                if (!glyphEntry.data || glyphEntry.size === 0) {
+                    await cursor.delete();
+                    removed++;
+                }
+                else {
+                    this.validateGlyphData(glyphEntry.data);
+                    verified++;
+                }
+            }
+            catch {
+                // Remove corrupted glyphs (they can be re-downloaded)
                 await cursor.delete();
                 removed++;
             }
-            else {
-                verified++;
+        }
+        return { verified, repaired, removed };
+    }
+    validateGlyphData(data) {
+        if (data.byteLength < 10) {
+            throw new Error('Glyph data too short');
+        }
+        // Basic Protocol Buffer validation
+        const view = new Uint8Array(data);
+        // Check for valid protobuf structure (basic check)
+        if (view[0] === 0x00 && view[1] === 0x00 && view[2] === 0x00 && view[3] === 0x00) {
+            throw new Error('Invalid glyph data - appears to be empty');
+        }
+    }
+    normalizeFontstack(fontstack) {
+        try {
+            return decodeURIComponent(fontstack);
+        }
+        catch {
+            return fontstack;
+        }
+    }
+    buildGlyphPath(fontstack, range) {
+        const normalizedFontstack = this.normalizeFontstack(fontstack);
+        return `${normalizedFontstack}/${range}.pbf`;
+    }
+    parseGlyphKey(key) {
+        let remaining = key;
+        let styleId;
+        if (remaining.includes('::')) {
+            const [prefix, ...rest] = remaining.split('::');
+            styleId = prefix;
+            remaining = rest.join('::');
+        }
+        else if (remaining.includes(':') && !remaining.includes('/')) {
+            const [prefix, rest] = remaining.split(':');
+            styleId = styleId ?? prefix;
+            remaining = rest;
+        }
+        const trimmed = remaining.endsWith('.pbf') ? remaining.slice(0, -4) : remaining;
+        if (trimmed.includes('/')) {
+            const [fontstack, range] = trimmed.split('/');
+            if (fontstack && range) {
+                return { styleId, fontstack, range };
             }
         }
-        return { verified, repaired: 0, removed };
+        if (trimmed.includes('_')) {
+            const [fontstack, range] = trimmed.split('_');
+            if (fontstack && range) {
+                return { styleId, fontstack, range };
+            }
+        }
+        return { styleId, fontstack: trimmed, range: '' };
+    }
+    createGlyphKey(fontstack, range, styleName) {
+        // Create a consistent key from the style name, fontstack and range
+        // Format: stylename::fontstack/range.pbf (if styleName provided) or fontstack/range.pbf
+        const glyphPath = this.buildGlyphPath(fontstack, range);
+        if (styleName) {
+            return `${styleName}::${glyphPath}`;
+        }
+        // Fallback to original format for backward compatibility
+        return glyphPath;
     }
 }
-// Singleton + convenience exports, matching other service modules.
-const modelService = new ModelService();
-const downloadModels = (models, styleId, options) => modelService.downloadModels(models, styleId, options);
-const getModel = (styleId, modelName) => modelService.getModel(styleId, modelName);
-const getModelStats = () => modelService.getModelStats();
-const cleanupOldModels = (maxAge) => modelService.cleanupOldModels(maxAge);
-const verifyAndRepairModels = () => modelService.verifyAndRepairModels();
+// Export singleton instance and functions for backward compatibility
+const glyphService = new GlyphService();
+const downloadGlyphs = (glyphUrl, fontstacks, styleName, ranges, options) => glyphService.downloadGlyphs(glyphUrl, fontstacks, styleName, ranges, options);
+const loadGlyphs = (fontstack, ranges, styleName) => glyphService.loadGlyphs(fontstack, ranges, styleName);
+const getGlyphStats = () => glyphService.getGlyphStats();
+const getGlyphAnalytics = () => glyphService.getGlyphAnalytics();
+const cleanupOldGlyphs = (maxAge, options) => glyphService.cleanupOldGlyphs(maxAge, options);
+const verifyAndRepairGlyphs = () => glyphService.verifyAndRepairGlyphs();
 
-var modelService$1 = /*#__PURE__*/Object.freeze({
+var glyphService$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ModelService: ModelService,
-    cleanupOldModels: cleanupOldModels,
-    downloadModels: downloadModels,
-    getModel: getModel,
-    getModelStats: getModelStats,
-    modelKeyBelongsToStyle: modelKeyBelongsToStyle,
-    modelService: modelService,
-    verifyAndRepairModels: verifyAndRepairModels
+    GlyphService: GlyphService,
+    cleanupOldGlyphs: cleanupOldGlyphs,
+    downloadGlyphs: downloadGlyphs,
+    getGlyphAnalytics: getGlyphAnalytics,
+    getGlyphStats: getGlyphStats,
+    glyphService: glyphService,
+    loadGlyphs: loadGlyphs,
+    verifyAndRepairGlyphs: verifyAndRepairGlyphs
 });
 
 class ResourceService {
@@ -7817,23 +8727,26 @@ class AnalyticsService {
         return getGlyphStats();
     }
     async getComprehensiveStorageAnalytics(getRegionAnalytics) {
-        const [tileStats, fontStats, spriteStats, glyphStats, regionAnalytics] = await Promise.all([
+        const [tileStats, fontStats, spriteStats, glyphStats, modelStats, styleStats, regionAnalytics] = await Promise.all([
             this.getAllTileStats(),
             this.getAllFontStats(),
             this.getAllSpriteStats(),
             this.getAllGlyphStats(),
+            getModelStats(),
+            getStyleStats(),
             getRegionAnalytics(),
         ]);
-        const totalStorageSize = (tileStats.totalSize || 0) +
-            (fontStats.totalSize || 0) +
-            (spriteStats.totalSize || 0) +
-            (glyphStats.totalSize || 0);
         const storageByType = {
+            // The style documents themselves, which the panel's per-style totals include.
+            styles: styleStats.totalSize || 0,
             tiles: tileStats.totalSize || 0,
             fonts: fontStats.totalSize || 0,
             sprites: spriteStats.totalSize || 0,
             glyphs: glyphStats.totalSize || 0,
+            // Mapbox Standard 3D models (.glb) — often several MB each.
+            models: modelStats.totalSize || 0,
         };
+        const totalStorageSize = Object.values(storageByType).reduce((sum, size) => sum + size, 0);
         const recommendations = this.generateStorageRecommendations({
             tiles: tileStats,
             fonts: fontStats,
@@ -7847,6 +8760,7 @@ class AnalyticsService {
             fonts: fontStats,
             sprites: spriteStats,
             glyphs: glyphStats,
+            models: modelStats,
             regions: regionAnalytics,
             totalStorageSize,
             storageByType,
@@ -7978,6 +8892,53 @@ function buildVectorJsonMetadata(style, sourceIds) {
     return JSON.stringify({ vector_layers: merged });
 }
 const serviceLogger = logger.scope('ImportExportService');
+/** Map stored tile extensions to MBTiles 1.3 `format` values (`pbf`, `jpg`, ...). */
+function normalizeMBTilesFormat(ext) {
+    const lower = ext.toLowerCase();
+    if (lower === 'mvt')
+        return 'pbf';
+    if (lower === 'jpeg')
+        return 'jpg';
+    return lower;
+}
+/**
+ * MBTiles holds one tile per z/x/y, so tiles from several style sources can't
+ * share a file — they'd overwrite each other at every shared coordinate.
+ * Keep only `sourceId` when given, otherwise the source with the most tiles
+ * (the basemap in practice), and warn about what was left out.
+ */
+function selectSingleSource(tiles, sourceId) {
+    const bySource = new Map();
+    for (const tile of tiles) {
+        const group = bySource.get(tile.sourceId);
+        if (group)
+            group.push(tile);
+        else
+            bySource.set(tile.sourceId, [tile]);
+    }
+    if (sourceId !== undefined) {
+        const selected = bySource.get(sourceId);
+        if (!selected) {
+            const available = [...bySource.keys()].join(', ') || 'none';
+            throw new Error(`Source "${sourceId}" has no tiles in this region (available: ${available})`);
+        }
+        return selected;
+    }
+    if (bySource.size <= 1)
+        return tiles;
+    let chosen = '';
+    let chosenTiles = [];
+    for (const [id, group] of bySource) {
+        if (group.length > chosenTiles.length) {
+            chosen = id;
+            chosenTiles = group;
+        }
+    }
+    const skipped = [...bySource.keys()].filter(id => id !== chosen);
+    serviceLogger.warn(`Region has tiles from ${bySource.size} sources; MBTiles holds one. Exporting "${chosen}", ` +
+        `skipping ${skipped.join(', ')}. Pass { sourceId } to choose another.`);
+    return chosenTiles;
+}
 class ImportExportService {
     db = dbPromise;
     constructor() {
@@ -8002,10 +8963,11 @@ class ImportExportService {
             if (!region) {
                 throw new Error(`Region ${regionId} not found`);
             }
-            const tiles = await this.exportTiles(regionId, onProgress);
-            // Pick format: caller override → region.tileExtension → default pbf.
-            // Drives both the metadata row and whether tile bytes get gzipped.
-            const format = String(options.format || region.tileExtension || 'pbf').toLowerCase();
+            const regionTiles = await this.exportTiles(region, onProgress);
+            const tiles = selectSingleSource(regionTiles, options.sourceId);
+            // Pick format: caller override → stored tile extension → region.tileExtension
+            // → default pbf. Drives both the metadata row and whether tile bytes get gzipped.
+            const format = normalizeMBTilesFormat(String(options.format || tiles[0]?.format || region.tileExtension || 'pbf'));
             const isVector = VECTOR_FORMATS.has(format);
             onProgress({
                 stage: 'processing',
@@ -8230,11 +9192,19 @@ class ImportExportService {
     /**
      * Export tiles data
      */
-    async exportTiles(regionId, onProgress) {
+    async exportTiles(region, onProgress) {
         const db = await this.db;
-        // First, find the styleId for this region
-        const region = await this.getRegionMetadata(regionId);
-        const styleId = region?.styleId || regionId;
+        const styleId = region.styleId || region.id;
+        // Tiles are stored per style, not per region. When the style holds other
+        // regions too, keep only tiles inside this region's bounds and the zooms
+        // the download pipeline fetches for each source (which can fall outside
+        // the region's own range — see sourceZoomRange), or sibling regions' tiles
+        // leak into the export. A sole region owns all of its style's tiles — and
+        // an imported region's bounds come from MBTiles metadata, which can be
+        // tighter than the tiles — so don't filter then.
+        const styleEntry = await db.get('styles', styleId);
+        const sharesStyle = (styleEntry?.regions?.length ?? 0) > 1;
+        const styleSources = (styleEntry?.style?.sources ?? {});
         const transaction = db.transaction(['tiles'], 'readonly');
         const store = transaction.objectStore('tiles');
         const tiles = [];
@@ -8243,22 +9213,31 @@ class ImportExportService {
             let processed = 0;
             while (cursor) {
                 const tile = cursor.value;
-                // Filter tiles by the region's styleId
-                if (tile.styleId === styleId) {
+                const parsed = parseTileKey(String(tile.key));
+                const z = tile.z ?? parsed?.z;
+                const x = tile.x ?? parsed?.x;
+                const y = tile.y ?? parsed?.y;
+                if (tile.styleId === styleId &&
+                    z !== undefined &&
+                    x !== undefined &&
+                    y !== undefined &&
+                    (!sharesStyle ||
+                        tileBelongsToRegion({ sourceId: tile.sourceId ?? parsed?.sourceId, z, x, y }, region, styleSources))) {
                     tiles.push({
-                        z: tile.z ?? 0, // Handle optional z
-                        x: tile.x ?? 0, // Handle optional x
-                        y: tile.y ?? 0, // Handle optional y
+                        z,
+                        x,
+                        y,
                         data: tile.data,
-                        format: 'pbf', // TileEntry doesn't have format, use default
-                        sourceId: tile.sourceId ?? 'default', // Handle optional sourceId
+                        format: (parsed?.ext || 'pbf').toLowerCase(),
+                        sourceId: tile.sourceId ?? parsed?.sourceId ?? 'default',
                     });
                 }
                 processed++;
                 if (onProgress && processed % 100 === 0) {
                     onProgress({
                         stage: 'exporting',
-                        percentage: 30 + (processed / 1000) * 40, // Rough estimation
+                        // Total is unknown while walking the cursor; approach 70% asymptotically.
+                        percentage: 30 + 40 * (1 - 1 / (1 + processed / 1000)),
                         message: `Exported ${processed} tiles...`,
                         currentItem: `${tile.z ?? 0}/${tile.x ?? 0}/${tile.y ?? 0}`,
                         completedItems: processed,
@@ -8439,7 +9418,7 @@ class ImportExportService {
                         sourceId,
                         downloadedAt: new Date().toISOString(),
                         size: tile.data instanceof ArrayBuffer ? tile.data.byteLength : 0,
-                        type: 'vector',
+                        type: VECTOR_FORMATS.has(ext) ? 'vector' : 'raster',
                         url: `tile://${tile.z}/${tile.x}/${tile.y}`,
                         lastModified: Date.now(),
                     });
@@ -8483,7 +9462,7 @@ const createRegionManagement = (services) => ({
     addRegion: async (region) => services.regionService.addRegion(region),
     downloadRegion: async (region, options) => services.regionService.downloadRegion(region, options),
     loadRegion: async (region, options) => services.regionService.loadRegion(region, options),
-    deleteRegion: async (regionId) => services.regionService.deleteRegion(regionId),
+    deleteRegion: async (regionId, styleId) => services.regionService.deleteRegion(regionId, styleId),
     listRegions: async () => services.regionService.listRegions(),
     listStoredRegions: async () => services.regionService.listStoredRegions(),
     getStoredRegion: async (regionId) => {
@@ -8505,7 +9484,7 @@ const createCleanupManagement = (services) => ({
         let deletedCount = 0;
         for (const region of allRegions) {
             if (region.expiry && region.expiry < now) {
-                await services.regionService.deleteRegion(region.id);
+                await services.regionService.deleteRegion(region.id, region.styleId);
                 deletedCount++;
             }
         }
@@ -8956,7 +9935,7 @@ const en = {
     'language.ar': 'Arabic',
     // Header
     'header.title': 'Offline Manager',
-    'header.subtitle': '{{count}} regions • {{size}} total',
+    'header.subtitle': '{{regions}} • {{size}} total',
     // Actions
     'actions.addRegion': 'Add Region',
     'actions.refresh': 'Refresh',
@@ -8972,6 +9951,8 @@ const en = {
     'regionForm.namePlaceholder': 'e.g., Downtown District',
     'regionForm.minZoom': 'Min Zoom',
     'regionForm.maxZoom': 'Max Zoom',
+    'regionForm.buildingsHint': "Mapbox Standard's buildings start at zoom 15. Set Max Zoom to 15 or more to include them.",
+    'regionForm.zoomRangeError': 'Max Zoom must be at least Min Zoom.',
     'regionForm.styleUrl': 'Style URL',
     'regionForm.provider': 'Style Provider',
     'regionForm.providerAuto': 'Auto-detect',
@@ -9001,7 +9982,10 @@ const en = {
     'regionList.downloaded': 'Downloaded',
     'regionList.size': 'Size',
     'regionList.tiles': 'Tiles',
+    'regionList.resources': 'Fonts, icons and models',
     'regionList.styleData': 'Style',
+    'regionList.regionCountOne': '1 region',
+    'regionList.regionCount': '{{count}} regions',
     'regionList.totalSize': 'Total',
     'regionList.styleId': 'Style ID',
     // Region Details
@@ -9087,6 +10071,14 @@ const en = {
     'mbtiles.importFailed': 'Import failed. Please try again.',
     // Active Downloads
     'download.activeCount': 'Active Downloads ({{count}})',
+    'download.status.style': 'Preparing style',
+    'download.status.sprites': 'Sprites: {{completed}} of {{total}}',
+    'download.status.glyphs': 'Fonts: {{completed}} of {{total}}',
+    'download.status.models': '3D models: {{completed}} of {{total}}',
+    'download.status.tiles': 'Tiles: {{completed}} of {{total}}',
+    'download.status.planning': 'Planning tiles',
+    'download.cancelRegion': 'Cancel downloading {{name}}',
+    'download.status.saving': 'Saving region',
     // Panel Manager additional strings
     'panel.downloadedRegions': 'Downloaded Regions',
     'panel.noExpiry': 'No expiry',
@@ -9108,6 +10100,8 @@ const en = {
     'control.saveSelectedRegion': 'Save Selected Region',
     // Alerts/Messages
     'alert.unknownError': 'Unknown error occurred',
+    'alert.downloadFailed': 'Download failed',
+    'alert.needsMapboxGl': 'This style uses Mapbox GL JS features, such as 3D models or style config, so only a Mapbox GL map can show it.',
     'alert.downloadNotImplemented': 'Download feature not implemented in this refactored version',
     'alert.mapNotAvailable': 'Map not available',
     'alert.invalidBounds': 'Invalid bounds for region',
@@ -9164,7 +10158,7 @@ const ar = {
     'language.ar': 'العربية',
     // Header - الرأس
     'header.title': 'مدير الخرائط غير المتصلة',
-    'header.subtitle': '{{count}} منطقة • {{size}} إجمالي',
+    'header.subtitle': '{{regions}} • {{size}} إجمالي',
     // Actions - الإجراءات
     'actions.addRegion': 'إضافة منطقة',
     'actions.refresh': 'تحديث',
@@ -9180,6 +10174,8 @@ const ar = {
     'regionForm.namePlaceholder': 'مثال: وسط المدينة',
     'regionForm.minZoom': 'أدنى تكبير',
     'regionForm.maxZoom': 'أقصى تكبير',
+    'regionForm.buildingsHint': 'تبدأ مباني Mapbox Standard عند مستوى التكبير 15. اضبط أقصى تكبير على 15 أو أكثر لتضمينها.',
+    'regionForm.zoomRangeError': 'يجب ألا يقل أقصى تكبير عن أدنى تكبير.',
     'regionForm.styleUrl': 'رابط النمط',
     'regionForm.provider': 'مزود النمط',
     'regionForm.providerAuto': 'اكتشاف تلقائي',
@@ -9209,7 +10205,10 @@ const ar = {
     'regionList.downloaded': 'تم التحميل',
     'regionList.size': 'الحجم',
     'regionList.tiles': 'البلاطات',
+    'regionList.resources': 'الخطوط والرموز والنماذج',
     'regionList.styleData': 'النمط',
+    'regionList.regionCountOne': 'منطقة واحدة',
+    'regionList.regionCount': '{{count}} منطقة',
     'regionList.totalSize': 'الإجمالي',
     'regionList.styleId': 'معرف النمط',
     // Region Details - تفاصيل المنطقة
@@ -9295,6 +10294,14 @@ const ar = {
     'mbtiles.importFailed': 'فشل الاستيراد. يرجى المحاولة مرة أخرى.',
     // Active Downloads - التحميلات النشطة
     'download.activeCount': 'التحميلات النشطة ({{count}})',
+    'download.status.style': 'جارٍ تجهيز النمط',
+    'download.status.sprites': 'الرموز: {{completed}} من {{total}}',
+    'download.status.glyphs': 'الخطوط: {{completed}} من {{total}}',
+    'download.status.models': 'النماذج ثلاثية الأبعاد: {{completed}} من {{total}}',
+    'download.status.tiles': 'البلاطات: {{completed}} من {{total}}',
+    'download.status.planning': 'جارٍ تخطيط البلاطات',
+    'download.cancelRegion': 'إلغاء تحميل {{name}}',
+    'download.status.saving': 'جارٍ حفظ المنطقة',
     // Panel Manager additional strings - سلاسل إضافية للوحة
     'panel.downloadedRegions': 'المناطق المحملة',
     'panel.noExpiry': 'بدون انتهاء',
@@ -9316,6 +10323,8 @@ const ar = {
     'control.saveSelectedRegion': 'حفظ المنطقة المحددة',
     // Alerts/Messages - التنبيهات/الرسائل
     'alert.unknownError': 'حدث خطأ غير معروف',
+    'alert.downloadFailed': 'فشل التحميل',
+    'alert.needsMapboxGl': 'يستخدم هذا النمط ميزات Mapbox GL JS، مثل النماذج ثلاثية الأبعاد أو إعدادات النمط، لذا لا يمكن عرضه إلا على خريطة Mapbox GL.',
     'alert.downloadNotImplemented': 'ميزة التحميل غير مطبقة في هذه النسخة',
     'alert.mapNotAvailable': 'الخريطة غير متاحة',
     'alert.invalidBounds': 'حدود غير صالحة للمنطقة',
@@ -9450,6 +10459,9 @@ const i18n = new I18nManager();
 const t = (key, replacements) => {
     return i18n.t(key, replacements);
 };
+// Re-export i18next for advanced usage
+/** "1 region" or "3 regions", in the current language. */
+const regionCountLabel = (count) => count === 1 ? t('regionList.regionCountOne') : t('regionList.regionCount', { count });
 
 /**
  * Base Component Class
@@ -9670,7 +10682,7 @@ class Button extends BaseComponent {
     createProgressBadge() {
         this.progressBadge = document.createElement('span');
         this.progressBadge.className =
-            'absolute -top-1 -right-1 bg-blue-500 text-white rounded-full px-2 py-1 text-xs font-bold hidden min-w-4 text-center shadow-md';
+            'progress-badge absolute top-1/2 right-full mr-1.5 -translate-y-1/2 whitespace-nowrap bg-blue-600 text-white rounded-md px-1.5 py-0.5 text-xs font-semibold shadow-md pointer-events-none hidden';
         // Accessibility: badge ID for aria-describedby
         const badgeId = `btn-badge-${Date.now()}`;
         this.progressBadge.id = badgeId;
@@ -9687,6 +10699,20 @@ class Button extends BaseComponent {
         else {
             this.element.textContent = text;
         }
+        this.restoreProgressBadge();
+    }
+    /**
+     * Replace the button's content, keeping its progress badge.
+     */
+    setContent(html) {
+        this.element.innerHTML = html;
+        this.restoreProgressBadge();
+    }
+    /** Replacing the button's content removes the badge, so put it back. */
+    restoreProgressBadge() {
+        if (this.progressBadge) {
+            this.element.appendChild(this.progressBadge);
+        }
     }
     /**
      * Update button state
@@ -9782,7 +10808,7 @@ class ButtonManager {
      * Reset button to default state
      */
     resetToDefault() {
-        this.button.getElement().innerHTML = icons.cloud({ size: 20, color: 'black' });
+        this.button.setContent(icons.cloud({ size: 20, color: 'black' }));
         this.button.setDisabled(false);
         this.button.getElement().title = 'Offline Map Manager';
         this.button.hideProgressBadge();
@@ -9895,8 +10921,7 @@ class Modal extends BaseComponent {
         titleSection.className = 'flex flex-col';
         if (this.config.title) {
             const title = document.createElement('h2');
-            title.className =
-                'text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300';
+            title.className = 'text-xl font-semibold text-gray-900 dark:text-white';
             title.textContent = this.config.title;
             titleSection.appendChild(title);
         }
@@ -10075,14 +11100,14 @@ class RegionDetailsModal {
         }
         content.innerHTML = `
       <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/50 dark:bg-gray-800/50">
-        <h3 class="m-0 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300">
+        <h3 class="m-0 text-xl font-semibold text-gray-900 dark:text-white">
           ${region.name}
         </h3>
       </div>
 
       <div class="grid grid-cols-2 gap-4">
         <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/30 dark:bg-gray-800/30">
-          <label class="block mb-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          <label class="block mb-1.5 text-sm font-semibold text-gray-500 dark:text-gray-400">
             ${t('regionDetails.bounds')}
           </label>
           <div class="text-sm font-mono text-gray-700 dark:text-gray-300 leading-relaxed">
@@ -10092,7 +11117,7 @@ class RegionDetailsModal {
         </div>
 
         <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/30 dark:bg-gray-800/30">
-          <label class="block mb-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          <label class="block mb-1.5 text-sm font-semibold text-gray-500 dark:text-gray-400">
             ${t('regionDetails.zoomRange')}
           </label>
           <div class="text-lg font-semibold text-gray-900 dark:text-white">
@@ -10104,7 +11129,7 @@ class RegionDetailsModal {
       ${region.created
             ? `
         <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/30 dark:bg-gray-800/30">
-          <label class="block mb-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          <label class="block mb-1.5 text-sm font-semibold text-gray-500 dark:text-gray-400">
             ${t('regionDetails.created')}
           </label>
           <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -10859,11 +11884,13 @@ class PanelRenderer extends BaseComponent {
     headerContainer;
     actionButtonsContainer;
     regionsList;
+    awaitingProgressRender = false;
     downloadProgressContainer;
     languageSelector;
     // Debounce mechanism
     refreshTimeout;
     isRefreshing = false;
+    refreshQueued = false;
     // Language change unsubscribe function
     unsubscribeLanguage;
     // Stored event handler for cleanup
@@ -10932,7 +11959,7 @@ class PanelRenderer extends BaseComponent {
         titleSection.innerHTML = `
       <h2 class="text-xl font-semibold text-gray-900 dark:text-white">${t('header.title')}</h2>
       <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-        ${t('header.subtitle', { count: regions.length, size: formatBytes(analytics.totalStorageSize) })}
+        ${t('header.subtitle', { regions: regionCountLabel(regions.length), size: formatBytes(analytics.totalStorageSize) })}
       </p>
     `;
         // Actions section
@@ -11006,6 +12033,7 @@ class PanelRenderer extends BaseComponent {
             this.element.removeChild(this.downloadProgressContainer);
             this.downloadProgressContainer = undefined;
         }
+        this.awaitingProgressRender = false;
         // Only show if there are active downloads
         if (this.downloadManager?.hasActiveDownloads()) {
             this.downloadProgressContainer = document.createElement('div');
@@ -11014,6 +12042,15 @@ class PanelRenderer extends BaseComponent {
             const downloads = this.downloadManager.getCurrentDownloads();
             const progressHTML = this.createDownloadProgressHTML(downloads);
             this.downloadProgressContainer.innerHTML = progressHTML;
+            // The rows are redrawn on every update, so listen on the container.
+            this.downloadProgressContainer.addEventListener('click', event => {
+                const button = event.target.closest('[data-action="cancel-download"]');
+                const regionId = button?.dataset.regionId;
+                if (!regionId)
+                    return;
+                this.downloadManager.cancelDownload(regionId);
+                void this.refresh();
+            });
             this.element.appendChild(this.downloadProgressContainer);
         }
     }
@@ -11028,9 +12065,10 @@ class PanelRenderer extends BaseComponent {
         }
         try {
             // Load styles from IndexedDB and get stats
-            const { loadStyles, getStyleStats } = await Promise.resolve().then(function () { return styleService; });
+            const { loadStyles, getStyleStats, getStyleStorageSizes } = await Promise.resolve().then(function () { return styleService; });
             const styles = await loadStyles();
             const statsResult = await getStyleStats();
+            const storageSizes = await getStyleStorageSizes();
             panelLogger.debug('Loaded styles:', styles);
             panelLogger.debug('Style stats:', statsResult);
             // Build style size map from stats
@@ -11053,12 +12091,14 @@ class PanelRenderer extends BaseComponent {
                 for (const style of styles) {
                     const styleRegions = regionsByStyle[style.key] || [];
                     const styleJsonSize = styleSizeMap[style.key] || 0;
-                    const regionTilesSize = styleRegions.reduce((sum, r) => sum + (r.tileSize || 0), 0);
-                    const totalSize = styleJsonSize + regionTilesSize;
+                    const regionTilesSize = storageSizes[style.key]?.tiles ?? 0;
+                    const resourcesSize = storageSizes[style.key]?.resources ?? 0;
+                    const totalSize = styleJsonSize + regionTilesSize + resourcesSize;
                     // Add style item with computed sizes
                     const styleWithSizes = {
                         ...style,
                         styleJsonSize,
+                        resourcesSize,
                         regionTilesSize,
                         totalSize,
                     };
@@ -11174,7 +12214,7 @@ class PanelRenderer extends BaseComponent {
             <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">
               ${region.bounds ? `<span class="font-medium">SW:</span> ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)} <span class="mx-1">→</span> <span class="font-medium">NE:</span> ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}` : t('panel.noBounds')}
             </div>
-            <div class="flex items-center gap-4 text-xs text-slate-400 dark:text-slate-500 mt-2">
+            <div class="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400 mt-2">
               <span>${t('regionList.zoom')}: ${region.minZoom}-${region.maxZoom}</span>
               ${region.downloadedAt ? `<span>${t('regionList.downloaded')}: ${new Date(region.downloadedAt).toLocaleDateString()}</span>` : ''}
               ${region.size ? `<span>${t('regionList.size')}: ${formatBytes(region.size)}</span>` : ''}
@@ -11197,16 +12237,16 @@ class PanelRenderer extends BaseComponent {
           <div class="flex items-center justify-between">
             <div class="flex-1">
               <h3 class="font-semibold text-slate-800 dark:text-slate-100 text-base">
-                ${escapeHtml$1(style.style?.name || style.key || t('style.unnamedStyle'))}
+                ${escapeHtml$1(styleDisplayName(style))}
               </h3>
               <p class="text-sm text-slate-600 dark:text-slate-300 mt-1">
                 ${t('regionList.styleId')}: ${escapeHtml$1(style.key)}
               </p>
               <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
-                ${regionCount} region${regionCount === 1 ? '' : 's'} • ${t('regionList.totalSize')}: ${formatBytes(style.totalSize)}
+                ${regionCountLabel(regionCount)} • ${t('regionList.totalSize')}: ${formatBytes(style.totalSize)}
               </p>
-              <p class="text-xs text-slate-400 dark:text-slate-500 mt-1">
-                ${t('regionList.tiles')}: ${formatBytes(style.regionTilesSize)} • ${t('regionList.styleData')}: ${formatBytes(style.styleJsonSize)}
+              <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                ${t('regionList.tiles')}: ${formatBytes(style.regionTilesSize)} • ${t('regionList.resources')}: ${formatBytes(style.resourcesSize)} • ${t('regionList.styleData')}: ${formatBytes(style.styleJsonSize)}
               </p>
             </div>
             <div class="flex items-center gap-2">
@@ -11240,7 +12280,7 @@ class PanelRenderer extends BaseComponent {
             <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">
               ${region.bounds ? `<span class="font-medium">SW:</span> ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)} <span class="mx-1">→</span> <span class="font-medium">NE:</span> ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}` : t('panel.noBounds')}
             </div>
-            <div class="flex items-center gap-4 text-xs text-slate-400 dark:text-slate-500 mt-2">
+            <div class="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400 mt-2">
               <span>${t('regionList.zoom')}: ${region.minZoom}-${region.maxZoom}</span>
               ${region.downloadedAt ? `<span>${t('regionList.downloaded')}: ${new Date(region.downloadedAt).toLocaleDateString()}</span>` : ''}
               ${region.tileSize ? `<span>${t('regionList.tiles')}: ${formatBytes(region.tileSize)}</span>` : ''}
@@ -11279,16 +12319,16 @@ class PanelRenderer extends BaseComponent {
           <div class="flex items-center justify-between">
             <div class="flex-1">
               <h3 class="font-semibold text-blue-900 dark:text-blue-100 text-base">
-                ${escapeHtml$1(style.style?.name || style.key || t('style.unnamedStyle'))}
+                ${escapeHtml$1(styleDisplayName(style))}
               </h3>
               <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                 ${t('regionList.styleId')}: ${escapeHtml$1(style.key)}
               </p>
               <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">
-                ${regionCount} region${regionCount === 1 ? '' : 's'} • ${t('regionList.totalSize')}: ${formatBytes(style.totalSize)}
+                ${regionCountLabel(regionCount)} • ${t('regionList.totalSize')}: ${formatBytes(style.totalSize)}
               </p>
               <p class="text-xs text-blue-500 dark:text-blue-500 mt-1">
-                ${t('regionList.tiles')}: ${formatBytes(style.regionTilesSize)} • ${t('regionList.styleData')}: ${formatBytes(style.styleJsonSize)}
+                ${t('regionList.tiles')}: ${formatBytes(style.regionTilesSize)} • ${t('regionList.resources')}: ${formatBytes(style.resourcesSize)} • ${t('regionList.styleData')}: ${formatBytes(style.styleJsonSize)}
               </p>
             </div>
             <div class="flex items-center gap-2">
@@ -11328,6 +12368,39 @@ class PanelRenderer extends BaseComponent {
       </div>
     `;
     }
+    /**
+     * Show the latest download progress. Called on every update, so it only
+     * redraws the progress section rather than the whole panel.
+     */
+    updateDownloadProgress(downloads) {
+        if (downloads.size === 0)
+            return;
+        const container = this.downloadProgressContainer;
+        if (container?.isConnected) {
+            container.innerHTML = this.createDownloadProgressHTML(downloads);
+            return;
+        }
+        // The download started while the panel was open, so it has no section yet.
+        if (this.element.isConnected && !this.awaitingProgressRender) {
+            this.awaitingProgressRender = true;
+            void this.refresh();
+        }
+    }
+    /** What the current phase is doing, such as "Tiles: 64 of 128". */
+    describeDownloadPhase(download) {
+        const phase = download.phase;
+        if (phase === 'style')
+            return t('download.status.style');
+        if (phase === 'tiles' && !download.total)
+            return t('download.status.planning');
+        if (phase === 'sprites' || phase === 'glyphs' || phase === 'models' || phase === 'tiles') {
+            return t(`download.status.${phase}`, {
+                completed: Number(download.completed) || 0,
+                total: Number(download.total) || 0,
+            });
+        }
+        return t('download.status.saving');
+    }
     /**
      * Create download progress HTML
      */
@@ -11341,13 +12414,17 @@ class PanelRenderer extends BaseComponent {
         <div class="space-y-2">
           ${downloadArray
             .map(download => `
-            <div class="flex items-center justify-between text-sm">
-              <span class="text-blue-800 dark:text-blue-200">${escapeHtml$1(download.regionName || download.regionId)}</span>
-              <div class="flex items-center gap-2">
-                <div class="w-24 h-2 bg-blue-200 dark:bg-blue-800 rounded-full overflow-hidden">
-                  <div class="h-full bg-blue-600 transition-all duration-300" style="width: ${download.percentage || 0}%"></div>
+            <div class="flex items-center justify-between gap-4 text-sm">
+              <div class="min-w-0">
+                <div class="truncate text-blue-800 dark:text-blue-200">${escapeHtml$1(download.regionName || download.regionId)}</div>
+                <div class="text-xs text-gray-600 dark:text-gray-300">${escapeHtml$1(this.describeDownloadPhase(download))}</div>
+              </div>
+              <div class="flex shrink-0 items-center gap-2">
+                <div class="w-24 h-2 bg-blue-200 dark:bg-blue-800 rounded-full overflow-hidden" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.round(download.percentage || 0)}">
+                  <div class="h-full bg-blue-600" style="width: ${download.percentage || 0}%"></div>
                 </div>
                 <span class="text-blue-700 dark:text-blue-300 min-w-12">${Math.round(download.percentage || 0)}%</span>
+                <button type="button" class="px-2 py-1 rounded-md text-xs font-medium cursor-pointer text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-action="cancel-download" data-region-id="${escapeHtml$1(download.regionId)}" aria-label="${t('download.cancelRegion', { name: String(download.regionName || download.regionId) })}">${t('app.cancel')}</button>
               </div>
             </div>
           `)
@@ -11422,7 +12499,15 @@ class PanelRenderer extends BaseComponent {
                 cancelText: t('app.cancel'),
                 onConfirm: async () => {
                     try {
-                        await this.offlineManager.deleteRegion(regionId);
+                        // Deleting a style's last region deletes the style too.
+                        const { loadStyleById } = await Promise.resolve().then(function () { return styleService; });
+                        const shownEntry = this.isStyleShown(region.styleId)
+                            ? await loadStyleById(region.styleId)
+                            : null;
+                        await this.offlineManager.deleteRegion(regionId, region.styleId);
+                        if (shownEntry && !(await loadStyleById(region.styleId))) {
+                            this.showOnlineStyle(shownEntry);
+                        }
                         this.modalManager.close();
                         // Refresh the panel to show updated regions
                         await this.refresh();
@@ -11475,7 +12560,7 @@ class PanelRenderer extends BaseComponent {
                         }
                         // Delete the existing region (and its tiles/resources)
                         panelLogger.debug('Deleting region before re-download:', regionId);
-                        await this.offlineManager.deleteRegion(regionId);
+                        await this.offlineManager.deleteRegion(regionId, region.styleId);
                         // Prepare form data for re-download
                         const formData = {
                             name: region.name,
@@ -11696,7 +12781,8 @@ class PanelRenderer extends BaseComponent {
             clearTimeout(this.refreshTimeout);
         }
         if (this.isRefreshing) {
-            panelLogger.debug('Refresh already in progress, skipping...');
+            // Run again once this one finishes, or the panel misses what changed meanwhile.
+            this.refreshQueued = true;
             return;
         }
         this.refreshTimeout = setTimeout(async () => {
@@ -11740,6 +12826,10 @@ class PanelRenderer extends BaseComponent {
         }
         finally {
             this.isRefreshing = false;
+            if (this.refreshQueued) {
+                this.refreshQueued = false;
+                void this.refresh();
+            }
         }
     }
     /**
@@ -11877,6 +12967,20 @@ class PanelRenderer extends BaseComponent {
     /**
      * Handle loading a style to the map
      */
+    /** Whether the map is drawing this stored style, through `idb://` or the Service Worker. */
+    isStyleShown(styleKey) {
+        const shown = this.map?.getStyle?.();
+        if (!shown)
+            return false;
+        const text = JSON.stringify(shown);
+        return text.includes(`idb://${styleKey}/`) || text.includes(`/__offline__/${styleKey}/`);
+    }
+    /** After its stored copy is deleted, show a style from its original URL, not a blank map. */
+    showOnlineStyle(entry) {
+        if (!entry.originalUrl)
+            return;
+        this.map?.setStyle?.(entry.originalUrl);
+    }
     async handleLoadStyle(styleData) {
         if (!this.map) {
             panelLogger.warn('Map not available for loading style');
@@ -11895,6 +12999,10 @@ class PanelRenderer extends BaseComponent {
                 alert(t('error.invalidStyleData'));
                 return;
             }
+            if (needsMapboxGl(styleEntry.style) && !isMapboxGlMap(this.map)) {
+                alert(t('alert.needsMapboxGl'));
+                return;
+            }
             panelLogger.debug('Loading style from IndexedDB:', {
                 key: styleEntry.key,
                 provider: styleEntry.provider,
@@ -12079,13 +13187,16 @@ class PanelRenderer extends BaseComponent {
             const style = styleData;
             const confirmModal = new ConfirmationModal({
                 title: t('delete.styleTitle'),
-                message: t('delete.styleMessage', { name: style.style?.name || style.key }),
+                message: t('delete.styleMessage', { name: styleDisplayName(style) }),
                 confirmText: t('actions.deleteStyle'),
                 cancelText: t('app.cancel'),
                 onConfirm: async () => {
                     try {
                         const { deleteStyleById } = await Promise.resolve().then(function () { return styleService; });
+                        const wasShown = this.isStyleShown(style.key);
                         await deleteStyleById(style.key);
+                        if (wasShown)
+                            this.showOnlineStyle(styleData);
                         this.modalManager.close();
                         // Refresh the panel
                         await this.refresh();
@@ -12190,7 +13301,7 @@ class PolygonControl {
         this.saveButton = document.createElement('button');
         this.saveButton.type = 'button';
         const prefix = this.options.cssPrefix || 'maplibregl';
-        this.saveButton.className = `${prefix}-ctrl-icon offline-manager-control mt-0.5 bg-gradient-to-br from-green-600 to-green-700 border border-green-700 rounded-sm cursor-pointer relative w-[29px] h-[29px] flex items-center justify-center hover:from-green-700 hover:to-green-800 transition-all duration-200`;
+        this.saveButton.className = `${prefix}-ctrl-icon offline-manager-control mt-0.5 !bg-green-600 border border-green-700 rounded-sm cursor-pointer relative w-[29px] h-[29px] flex items-center justify-center hover:!bg-green-700 transition-all duration-200`;
         this.saveButton.innerHTML = icons.check({ size: 16, color: 'white' });
         this.saveButton.title = 'Save Selected Region';
         this.saveButton.addEventListener('click', () => this.handleSave());
@@ -12257,6 +13368,33 @@ class PolygonControl {
     handleMapMove = () => {
         this.updateVisualization();
     };
+    /**
+     * The area to select: the middle of what's on screen. On a tilted or rotated map
+     * `getBounds()` reaches far past the view, so insetting it would miss the part
+     * nearest the camera. There, measure from the map's centre to the screen's edges.
+     */
+    getSelectionBbox(minLng, minLat, maxLng, maxLat) {
+        if (!this.map.getPitch() && !this.map.getBearing()) {
+            const lngInset = (maxLng - minLng) * 0.2;
+            const latInset = (maxLat - minLat) * 0.2;
+            return [minLng + lngInset, minLat + latInset, maxLng - lngInset, maxLat - latInset];
+        }
+        const center = this.map.getCenter();
+        const { clientWidth, clientHeight } = this.map.getContainer();
+        const lngScale = Math.cos((center.lat * Math.PI) / 180);
+        const degreesFromCenter = (point) => {
+            const { lng, lat } = this.map.unproject(point);
+            return Math.hypot((lng - center.lng) * lngScale, lat - center.lat);
+        };
+        const halfSize = 0.6 *
+            Math.min(degreesFromCenter([0, clientHeight / 2]), degreesFromCenter([clientWidth / 2, clientHeight]));
+        return [
+            center.lng - halfSize / lngScale,
+            center.lat - halfSize,
+            center.lng + halfSize / lngScale,
+            center.lat + halfSize,
+        ];
+    }
     /**
      * Update polygon visualization based on current map bounds
      */
@@ -12266,9 +13404,7 @@ class PolygonControl {
             return;
         const [minLng, minLat] = bboxArray[0];
         const [maxLng, maxLat] = bboxArray[1];
-        const lngDiff = (maxLng - minLng) * 0.2;
-        const latDiff = (maxLat - minLat) * 0.2;
-        const clippedBbox = [minLng + lngDiff, minLat + latDiff, maxLng - lngDiff, maxLat - latDiff];
+        const clippedBbox = this.getSelectionBbox(minLng, minLat, maxLng, maxLat);
         // Store current bounds for later use
         this.currentBounds = clippedBbox;
         const clippedPolygon = bboxPolygon.bboxPolygon([
@@ -12335,7 +13471,7 @@ class PolygonControl {
                 source: 'selectionPolygon',
                 layout: {},
                 paint: {
-                    'line-color': '#8B5CF6', // Primary purple color
+                    'line-color': '#A8116F', // Revision magenta, the UI's accent
                     'line-width': 3,
                     'line-dasharray': [2, 2],
                 },
@@ -12369,6 +13505,30 @@ class PolygonControl {
  */
 // import { MaplibreMap } from 'maplibre-gl';
 const formLogger = logger.scope('RegionFormModal');
+/** Mapbox Standard's buildings start at this zoom. */
+const STANDARD_BUILDINGS_MIN_ZOOM = 15;
+let fieldCount = 0;
+/**
+ * Point each label at the one field beside it, so screen readers name the field
+ * and clicking the label focuses it. Groups with several fields are left alone.
+ */
+function linkLabelsToFields(form) {
+    for (const label of Array.from(form.querySelectorAll('label'))) {
+        const fields = label.parentElement?.querySelectorAll('input, select, textarea');
+        if (label.htmlFor || fields?.length !== 1)
+            continue;
+        const field = fields[0];
+        field.id ||= `map-gl-offline-field-${++fieldCount}`;
+        label.htmlFor = field.id;
+    }
+}
+/**
+ * True when a region of Mapbox Standard stops below the zoom where its buildings
+ * start. Standard Satellite has no buildings, so it doesn't count.
+ */
+function regionMissesBuildings(styleUrl, maxZoom) {
+    return /mapbox\/standard(?![\w-])/.test(styleUrl) && maxZoom < STANDARD_BUILDINGS_MIN_ZOOM;
+}
 class RegionFormModal {
     options;
     modal;
@@ -12376,6 +13536,7 @@ class RegionFormModal {
     minZoomInput;
     maxZoomInput;
     styleUrlInput;
+    buildingsHint;
     // Enhanced Mapbox GL support
     providerSelect;
     accessTokenInput;
@@ -12426,13 +13587,13 @@ class RegionFormModal {
             'grid grid-cols-2 gap-4 p-4 rounded-xl glass-input border border-gray-100/50 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/50';
         infoGroup.innerHTML = `
       <div class="flex flex-col justify-center">
-        <strong class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">${t('regionForm.area')}</strong>
-        <div class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300">
+        <strong class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-1">${t('regionForm.area')}</strong>
+        <div class="text-xl font-semibold text-gray-900 dark:text-white">
           ${area.toLocaleString()} <span class="text-sm font-medium text-gray-500">km²</span>
         </div>
       </div>
       <div>
-        <strong class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">${t('regionForm.bounds')}</strong>
+        <strong class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-1">${t('regionForm.bounds')}</strong>
         <div class="text-xs font-mono text-gray-600 dark:text-gray-300 leading-relaxed bg-white/50 dark:bg-black/20 p-2 rounded-lg">
           ${west.toFixed(4)}, ${south.toFixed(4)}<br>
           ${east.toFixed(4)}, ${north.toFixed(4)}
@@ -12488,6 +13649,12 @@ class RegionFormModal {
         zoomGroup.appendChild(minZoomDiv);
         zoomGroup.appendChild(maxZoomDiv);
         form.appendChild(zoomGroup);
+        this.buildingsHint = document.createElement('p');
+        this.buildingsHint.className = 'm-0 text-sm text-amber-700 dark:text-amber-400 hidden';
+        this.buildingsHint.setAttribute('role', 'status');
+        this.buildingsHint.textContent = t('regionForm.buildingsHint');
+        form.appendChild(this.buildingsHint);
+        this.maxZoomInput.addEventListener('input', () => this.updateBuildingsHint());
         // Style URL input
         const styleGroup = document.createElement('div');
         styleGroup.innerHTML = `
@@ -12500,9 +13667,13 @@ class RegionFormModal {
         this.styleUrlInput.value = styleUrl;
         this.styleUrlInput.className =
             'w-full px-4 py-3 rounded-xl text-base glass-input text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-all shadow-sm';
-        this.styleUrlInput.addEventListener('input', () => this.handleStyleUrlChange());
+        this.styleUrlInput.addEventListener('input', () => {
+            this.handleStyleUrlChange();
+            this.updateBuildingsHint();
+        });
         styleGroup.appendChild(this.styleUrlInput);
         form.appendChild(styleGroup);
+        this.updateBuildingsHint();
         // Provider selection
         const providerGroup = document.createElement('div');
         providerGroup.innerHTML = `
@@ -12560,6 +13731,7 @@ class RegionFormModal {
         }
         // Initialize provider detection
         this.detectProviderFromUrl();
+        linkLabelsToFields(form);
         return form;
     }
     /**
@@ -12674,6 +13846,11 @@ class RegionFormModal {
     /**
      * Handle style URL changes to auto-detect provider
      */
+    /** Warn when a region would be saved without the style's buildings. */
+    updateBuildingsHint() {
+        const missesBuildings = regionMissesBuildings(this.styleUrlInput?.value ?? '', Number(this.maxZoomInput?.value));
+        this.buildingsHint?.classList.toggle('hidden', !missesBuildings);
+    }
     handleStyleUrlChange() {
         this.detectProviderFromUrl();
     }
@@ -12750,10 +13927,21 @@ class RegionFormModal {
         footer.appendChild(saveButton.getElement());
         return footer;
     }
+    /** Check the zoom fields, showing the browser's message on the first bad one. */
+    zoomRangeIsValid() {
+        const { minZoomInput: min, maxZoomInput: max } = this;
+        if (!min || !max)
+            return true;
+        const reversed = min.value !== '' && max.value !== '' && Number(min.value) > Number(max.value);
+        max.setCustomValidity(reversed ? t('regionForm.zoomRangeError') : '');
+        return min.reportValidity() && max.reportValidity();
+    }
     /**
      * Handle form save
      */
     async handleSave() {
+        if (!this.zoomRangeIsValid())
+            return;
         try {
             const selectedSources = this.getSelectedExtraSources();
             const formData = {
@@ -12870,14 +14058,14 @@ class RegionControl {
         this.cancelButton = document.createElement('button');
         this.cancelButton.type = 'button';
         const prefix = this.options.cssPrefix || 'maplibregl';
-        this.cancelButton.className = `${prefix}-ctrl-icon offline-manager-control mt-0.5 bg-gradient-to-br from-red-600 to-red-700 border border-red-700 rounded-sm cursor-pointer relative w-[29px] h-[29px] flex items-center justify-center hover:from-red-700 hover:to-red-800 transition-all duration-200`;
+        this.cancelButton.className = `${prefix}-ctrl-icon offline-manager-control mt-0.5 !bg-red-600 border border-red-700 rounded-sm cursor-pointer relative w-[29px] h-[29px] flex items-center justify-center hover:!bg-red-700 transition-all duration-200`;
         this.cancelButton.innerHTML = icons.x({ size: 16, color: 'white' });
         this.cancelButton.title = 'Cancel Selection';
         this.cancelButton.addEventListener('click', () => this.cancelSelection());
         // Create save button (green checkmark)
         this.saveButton = document.createElement('button');
         this.saveButton.type = 'button';
-        this.saveButton.className = `${prefix}-ctrl-icon offline-manager-control mt-0.5 bg-gradient-to-br from-green-600 to-green-700 border border-green-700 rounded-sm cursor-pointer relative w-[29px] h-[29px] flex items-center justify-center hover:from-green-700 hover:to-green-800 transition-all duration-200`;
+        this.saveButton.className = `${prefix}-ctrl-icon offline-manager-control mt-0.5 !bg-green-600 border border-green-700 rounded-sm cursor-pointer relative w-[29px] h-[29px] flex items-center justify-center hover:!bg-green-700 transition-all duration-200`;
         this.saveButton.innerHTML = icons.check({ size: 16, color: 'white' });
         this.saveButton.title = 'Save Selected Region';
         this.saveButton.addEventListener('click', () => this.handleSaveClick());
@@ -13107,6 +14295,8 @@ class DownloadManager {
     offlineManager;
     /** Map of region IDs to their download progress */
     currentDownloads = new Map();
+    /** Aborts each running download, by region id. */
+    controllers = new Map();
     options;
     /**
      * Create a new DownloadManager instance.
@@ -13121,14 +14311,16 @@ class DownloadManager {
      * Calculates percentage and notifies listeners via the onProgressUpdate callback.
      * @internal
      */
-    updateProgress(regionId, regionName, phase, completed, total, currentResource) {
-        const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+    updateProgress(regionId, regionName, phase, completed, total, currentResource, overallPercentage) {
+        const percentage = Math.round(overallPercentage);
+        const phasePercentage = total > 0 ? Math.round((completed / total) * 100) : 0;
         this.currentDownloads.set(regionId, {
             regionId,
             regionName,
             completed,
             total,
             percentage,
+            phasePercentage,
             currentResource,
             phase,
         });
@@ -13163,14 +14355,20 @@ class DownloadManager {
             extraSources: formData.extraSources,
         };
         const regionId = regionConfig.id;
+        const controller = new AbortController();
+        this.controllers.set(regionId, controller);
         this.updateUIForDownloadStart();
         try {
             await this.offlineManager.downloadRegion(regionConfig, {
                 provider: formData.provider || 'auto',
                 accessToken: formData.accessToken,
+                signal: controller.signal,
                 onProgress: progress => {
+                    // A cancelled download keeps reporting until it stops; don't show it again.
+                    if (controller.signal.aborted)
+                        return;
                     const uiPhase = progress.phase === 'metadata' ? undefined : progress.phase;
-                    this.updateProgress(regionId, regionConfig.name, uiPhase, progress.completed, progress.total, progress.message ?? `Downloading ${progress.phase}`);
+                    this.updateProgress(regionId, regionConfig.name, uiPhase, progress.completed, progress.total, progress.message ?? `Downloading ${progress.phase}`, progress.overallPercentage);
                 },
                 tileOptions: {
                     maxConcurrency: 10,
@@ -13179,8 +14377,16 @@ class DownloadManager {
             this.handleDownloadComplete(regionId);
         }
         catch (error) {
-            downloadLogger.error('Error downloading region:', error);
-            this.handleDownloadError(regionId, error);
+            if (controller.signal.aborted) {
+                downloadLogger.debug(`Download of ${regionId} was cancelled`);
+            }
+            else {
+                downloadLogger.error('Error downloading region:', error);
+                this.handleDownloadError(regionId, error);
+            }
+        }
+        finally {
+            this.controllers.delete(regionId);
         }
     }
     /**
@@ -13203,6 +14409,8 @@ class DownloadManager {
      * @param regionId - The ID of the region download to cancel
      */
     cancelDownload(regionId) {
+        // Stops the download; downloadRegion then saves nothing and removes its partial tiles.
+        this.controllers.get(regionId)?.abort();
         this.currentDownloads.delete(regionId);
         if (this.currentDownloads.size === 0) {
             this.resetUI();
@@ -13214,6 +14422,8 @@ class DownloadManager {
      * Clears all download tracking and resets the UI.
      */
     cancelAllDownloads() {
+        for (const controller of this.controllers.values())
+            controller.abort();
         this.currentDownloads.clear();
         this.resetUI();
         this.options.onProgressUpdate?.(this.currentDownloads);
@@ -13363,6 +14573,9 @@ class OfflineManagerControl {
     regionControl;
     downloadManager;
     modalManager = new ModalManager();
+    /** Percentages of this batch's downloads, finished ones at 100, for the badge. */
+    badgeBatch = new Map();
+    badgePercentage = 0;
     /** Whether the bounding box visualization layer has been added to the map */
     bboxLayerAdded = false;
     /** Map library module for protocol registration (null if not provided) */
@@ -13417,8 +14630,11 @@ class OfflineManagerControl {
             this.mapLib.addProtocol('idb', async (params) => {
                 const response = await idbFetchHandler(params.url);
                 if (!response.ok) {
-                    controlLogger.warn(`addProtocol: IDB fetch failed for ${params.url} (type=${params.type})`);
-                    throw new Error(`IDB fetch failed: ${response.statusText}`);
+                    // MapLibre treats a 404 as "no tile here", which is normal once the map
+                    // moves outside a saved region. Any other error gets logged for every tile.
+                    throw Object.assign(new Error(`IDB fetch failed (${response.status}): ${params.url}`), {
+                        status: response.status,
+                    });
                 }
                 // MapLibre's makeRequest bypasses JSON parsing for protocol handlers,
                 // so we must parse JSON responses ourselves (e.g. sprite atlas, TileJSON).
@@ -13674,43 +14890,27 @@ class OfflineManagerControl {
      * Handle progress updates from download manager
      */
     handleProgressUpdate(downloads) {
-        // Update the progress badge with the current download percentage
-        if (downloads.size > 0) {
-            // Get the first download's info (or average percentage if multiple)
-            const firstDownload = downloads.values().next().value;
-            let displayText = '';
-            if (downloads.size === 1 && firstDownload) {
-                // Show phase-specific progress for single download
-                const phase = firstDownload.phase;
-                const percentage = firstDownload.percentage;
-                switch (phase) {
-                    case 'style':
-                        displayText = 'Style';
-                        break;
-                    case 'sprites':
-                        displayText = `Spr ${percentage}%`;
-                        break;
-                    case 'glyphs':
-                        displayText = `Gly ${percentage}%`;
-                        break;
-                    case 'tiles':
-                        displayText = `${percentage}%`;
-                        break;
-                    default:
-                        displayText = `${percentage}%`;
-                }
-            }
-            else {
-                // Multiple downloads - show average
-                let totalPercentage = 0;
-                for (const download of downloads.values()) {
-                    totalPercentage += download.percentage;
-                }
-                const avgPercentage = Math.round(totalPercentage / downloads.size);
-                displayText = `${avgPercentage}%`;
-            }
-            this.updateProgressBadge(displayText, true);
+        // The panel has the detail for each phase; the badge only has room for one
+        // figure. With several downloads it averages all of this batch's, counting
+        // finished ones as 100, so one finishing doesn't drop the figure, and never
+        // goes back: a download added mid-batch holds it until the average catches up.
+        for (const [regionId, download] of downloads) {
+            this.badgeBatch.set(regionId, download.percentage);
+        }
+        for (const regionId of this.badgeBatch.keys()) {
+            if (!downloads.has(regionId))
+                this.badgeBatch.set(regionId, 100);
+        }
+        if (downloads.size === 0) {
+            this.badgeBatch.clear();
+            this.badgePercentage = 0;
+        }
+        else {
+            const total = [...this.badgeBatch.values()].reduce((sum, value) => sum + value, 0);
+            this.badgePercentage = Math.max(this.badgePercentage, Math.round(total / this.badgeBatch.size));
+            this.updateProgressBadge(`${this.badgePercentage}%`, true);
         }
+        this.panelRenderer?.updateDownloadProgress(downloads);
     }
     /**
      * Handle download completion
@@ -13726,6 +14926,7 @@ class OfflineManagerControl {
      */
     handleDownloadError(regionId, error) {
         controlLogger.error(`Download error for region ${regionId}:`, error);
+        alert(`${t('alert.downloadFailed')}: ${error instanceof Error ? error.message : t('alert.unknownError')}`);
         // Use the panel's refresh method instead of renderPanel to avoid conflicts
         if (this.panelRenderer) {
             this.panelRenderer.refresh();
@@ -13869,7 +15070,7 @@ class OfflineManagerControl {
                 type: 'line',
                 source: sourceId,
                 paint: {
-                    'line-color': '#3B82F6', // Blue color
+                    'line-color': '#A8116F', // Revision magenta, the UI's accent
                     'line-width': 3,
                     'line-opacity': 0.8,
                 },
@@ -13922,6 +15123,10 @@ class OfflineManagerControl {
                 controlLogger.error(`Style ${styleId} not found in IndexedDB`);
                 return;
             }
+            if (needsMapboxGl(styleEntry.style) && !isMapboxGlMap(this.map)) {
+                controlLogger.error(`Style ${styleId} needs Mapbox GL JS, so this map can't show it`);
+                return;
+            }
             // The style is already patched with idb:// URLs by addRegion() in regionService.
             // DO NOT call patchStyleForOffline() again — double-patching rewrites the downloadId
             // in URLs and can break tile/glyph lookups.
@@ -13980,9 +15185,9 @@ class OfflineManagerControl {
           ${styles
             .map(style => `
             <button class="w-full p-3 text-left border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-style-id="${escapeHtml$1(style.key)}">
-              <div class="font-medium text-gray-900 dark:text-white">${escapeHtml$1(style.style.name || style.key)}</div>
+              <div class="font-medium text-gray-900 dark:text-white">${escapeHtml$1(styleDisplayName(style))}</div>
               <div class="text-sm text-gray-500 dark:text-gray-400">
-                ${style.regions?.length || 0} regions •
+                ${regionCountLabel(style.regions?.length || 0)} •
                 ${Object.keys(style.style.sources || {}).length} sources
               </div>
             </button>
@@ -14080,6 +15285,52 @@ class OfflineManagerControl {
     }
 }
 
+const assetLogger = logger.scope('RuntimeAssets');
+const ASSET_TIMEOUT_MS = 30000;
+/**
+ * Cache the code Mapbox GL fetches from api.mapbox.com while rendering: the
+ * Draco and meshopt decoders 3D models need, plus the RTL text and procedural
+ * building modules. The Service Worker serves them back from this cache. They
+ * live in the Cache API rather than IndexedDB because they belong to the
+ * renderer, not to any style or region.
+ *
+ * Failures only log: the rest of a region is still usable without these.
+ *
+ * @returns how many assets are now cached
+ */
+async function cacheMapboxRuntimeAssets() {
+    if (typeof caches === 'undefined')
+        return 0;
+    let cache;
+    try {
+        cache = await caches.open(MAPBOX_RUNTIME_CACHE);
+    }
+    catch (error) {
+        assetLogger.warn('Cache API unavailable, skipping runtime assets:', error);
+        return 0;
+    }
+    const results = await Promise.all(MAPBOX_RUNTIME_ASSETS.map(async (path) => {
+        const url = `${MAPBOX_RUNTIME_ORIGIN}${path}`;
+        try {
+            if (await cache.match(url))
+                return true;
+            const response = await fetchWithRetry(url, { retries: 0, timeout: ASSET_TIMEOUT_MS });
+            await cache.put(url, response);
+            return true;
+        }
+        catch (error) {
+            assetLogger.warn(`Failed to cache ${url}:`, error);
+            return false;
+        }
+    }));
+    return results.filter(Boolean).length;
+}
+
+var runtimeAssetService = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    cacheMapboxRuntimeAssets: cacheMapboxRuntimeAssets
+});
+
 exports.AnalyticsService = AnalyticsService;
 exports.CONTENT_TYPES = CONTENT_TYPES;
 exports.CategorizedError = CategorizedError;
@@ -14175,6 +15426,7 @@ exports.getSpriteAnalytics = getSpriteAnalytics;
 exports.getSpriteStats = getSpriteStats;
 exports.getSqlJs = getSqlJs;
 exports.getStyleStats = getStyleStats;
+exports.getStyleStorageSizes = getStyleStorageSizes;
 exports.getTileAnalytics = getTileAnalytics;
 exports.getTileStats = getTileStats;
 exports.getUrlHostname = getUrlHostname;
@@ -14185,6 +15437,8 @@ exports.hostMatches = hostMatches;
 exports.i18n = i18n;
 exports.icons = icons;
 exports.idbFetchHandler = idbFetchHandler;
+exports.injectExtraSources = injectExtraSources;
+exports.isMapboxGlMap = isMapboxGlMap;
 exports.isMapboxHost = isMapboxHost;
 exports.isMapboxProtocol = isMapboxProtocol;
 exports.isStyleDownloaded = isStyleDownloaded;
@@ -14195,6 +15449,7 @@ exports.loadStyles = loadStyles;
 exports.logger = logger;
 exports.modelKeyBelongsToStyle = modelKeyBelongsToStyle;
 exports.modelService = modelService;
+exports.needsMapboxGl = needsMapboxGl;
 exports.normalizeSpriteProperty = normalizeSpriteProperty;
 exports.normalizeStyleUrl = normalizeStyleUrl;
 exports.optimizeStorage = optimizeStorage;
@@ -14209,12 +15464,17 @@ exports.resetOfflineMapDB = resetOfflineMapDB;
 exports.resolveImports = resolveImports;
 exports.resolveMapboxUrl = resolveMapboxUrl;
 exports.resourceKeyBelongsToStyle = resourceKeyBelongsToStyle;
+exports.restoreUnstoredModels = restoreUnstoredModels;
 exports.rewriteMapboxCdnTileUrl = rewriteMapboxCdnTileUrl;
 exports.safeExecute = safeExecute;
 exports.sanitizeIndoorExpressions = sanitizeIndoorExpressions;
+exports.selectTileJsonVariant = selectTileJsonVariant;
 exports.setupAutoCleanup = setupAutoCleanup;
 exports.spriteService = spriteService;
+exports.stashOriginalModels = stashOriginalModels;
 exports.stopAutoCleanup = stopAutoCleanup;
+exports.storedModelNames = storedModelNames;
+exports.styleDisplayName = styleDisplayName;
 exports.t = t;
 exports.tileService = tileService;
 exports.unregisterOfflineServiceWorker = unregisterOfflineServiceWorker;