map-gl-offline 0.7.0 → 0.8.2

package/dist/index.js

@@ -1190,6 +1190,22 @@ function parseTileKey(key) {
     }
     return { styleId, sourceId, z, x, y, ext };
 }
+/**
+ * Extract the extension (the last dotted segment before `?`, `#`, or end) from
+ * a tile URL or tile URL template. Defaults to `"pbf"` when no extension can
+ * be parsed. For multi-extension URLs like Mapbox v4's `{y}.vector.pbf` this
+ * returns `"pbf"`, matching the key used when the tile is stored.
+ *
+ * Keeping extraction logic in one place ensures patchStyleForOffline (which
+ * rewrites tile URLs to `idb://` at load time) derives the same extension
+ * that tileService.extractExtension used at store time — otherwise the
+ * first-try lookup in idbFetchHandler misses and has to fall through its
+ * pbf/mvt/png/jpg/webp fallback loop.
+ */
+function extractTileExtensionFromUrl(url) {
+    const match = url.match(/\.([\w]+)(?:[?#]|$)/i);
+    return match ? match[1] : 'pbf';
+}
 /**
  * Derive tile extension from tile URL templates
  */
@@ -1197,15 +1213,210 @@ function deriveTileExtension(tiles) {
     if (Array.isArray(tiles) && tiles.length > 0) {
         const firstTile = tiles[0];
         if (typeof firstTile === 'string') {
-            const match = firstTile.match(/\.([\w]+)(?:\?|$)/i);
-            if (match) {
-                return match[1];
-            }
+            return extractTileExtensionFromUrl(firstTile);
         }
     }
     return 'pbf';
 }
 
+/**
+ * Pure helpers shared between the main-thread offline fetch handler
+ * (`src/utils/idbFetchHandler.ts`) and the offline Service Worker
+ * (`src/sw/offline-sw.ts`, compiled to `public/idb-offline-sw.js`).
+ *
+ * Keeping these in one place means the SW and the main-thread handler
+ * can't drift — adding a new `model` handler, changing the fallback
+ * order, or tweaking the tilejson-source matcher happens once.
+ *
+ * Nothing in here touches IndexedDB directly. Each helper takes already-
+ * resolved inputs and returns the list of candidate keys (or the
+ * resolved output) that the caller feeds into its own IDB lookup.
+ *
+ * The corresponding IDB access layer is:
+ *   - main thread: `idb` library via `dbPromise`
+ *   - service worker: raw `indexedDB.open` (see `offline-sw.ts`)
+ *
+ * They have different shapes so cannot be shared; the key computation
+ * can be and is.
+ */
+/**
+ * Extensions to try in order when the requested extension misses. `glb` is
+ * last so batched-model sources (Mapbox Standard 3D buildings) resolve when
+ * their source URL template ended in `.vector` or similar and the actual
+ * tile body was stored as glb.
+ */
+const TILE_FALLBACK_EXTENSIONS = ['pbf', 'mvt', 'png', 'jpg', 'webp', 'glb'];
+/** Extensions minus the one the caller already tried. */
+function tileFallbackExtensions(requested) {
+    return TILE_FALLBACK_EXTENSIONS.filter(e => e !== requested);
+}
+// ---------------------------------------------------------------------------
+// Region → style lookup
+// ---------------------------------------------------------------------------
+/**
+ * Given an already-fetched list of style entries, find the first one whose
+ * `regions` array contains the given ID. Pure — the caller is responsible for
+ * loading the entries and for caching. Used by both `findStyleByRegionId`
+ * implementations to keep the match rule identical.
+ */
+function findStyleByRegionIdIn(styles, regionId) {
+    for (const entry of styles) {
+        const regions = entry.regions;
+        if (!Array.isArray(regions))
+            continue;
+        for (const r of regions) {
+            if (r?.regionId === regionId || r?.id === regionId) {
+                return entry;
+            }
+        }
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// 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.
+ */
+function parseGlyphPath(decodedPath) {
+    const pathParts = decodedPath.split('/');
+    const fontstackPart = pathParts[0] ?? '';
+    const rangePart = pathParts[1] || '0-255.pbf';
+    const fontstacks = fontstackPart
+        .split(',')
+        .map(f => f.trim())
+        .filter(Boolean);
+    return { fontstacks, rangePart };
+}
+/**
+ * Build the list of keys to try for a single (fontstack, range) pair.
+ * Order: actualStyleId variants first (most common), then downloadId,
+ * then the bare path. Normalized and raw `.pbf`-less forms are both tried
+ * to cover stored-key variants from older versions.
+ */
+function glyphCandidateKeys(actualStyleId, downloadId, fontstack, rangePart) {
+    const glyphPath = `${fontstack}/${rangePart}`;
+    const normalizedPath = glyphPath.endsWith('.pbf') ? glyphPath : `${glyphPath}.pbf`;
+    return dedupe([
+        `${actualStyleId}::${normalizedPath}`,
+        `${actualStyleId}::${glyphPath}`,
+        `${downloadId}::${normalizedPath}`,
+        `${downloadId}::${glyphPath}`,
+        normalizedPath,
+        glyphPath,
+    ]);
+}
+// ---------------------------------------------------------------------------
+// Sprite candidate keys
+// ---------------------------------------------------------------------------
+/**
+ * Sprite keys have historically used both `::` and `:` as the separator, and
+ * both the full filename (`sprite.json`) and the bare name (`sprite`). Return
+ * every variant in priority order; the caller stops at the first hit.
+ */
+function spriteCandidateKeys(actualStyleId, downloadId, decodedPath) {
+    const stripExt = decodedPath.replace(/\.(json|png)$/i, '');
+    return dedupe([
+        `${actualStyleId}::${decodedPath}`,
+        `${actualStyleId}:${decodedPath}`,
+        `${actualStyleId}::${stripExt}`,
+        `${actualStyleId}:${stripExt}`,
+        `${downloadId}::${decodedPath}`,
+        `${downloadId}:${decodedPath}`,
+        `${downloadId}::${stripExt}`,
+        `${downloadId}:${stripExt}`,
+        decodedPath,
+    ]);
+}
+// ---------------------------------------------------------------------------
+// Model candidate keys
+// ---------------------------------------------------------------------------
+/**
+ * Model keys are `{styleId}::model::{name}`. Try the resolved style id first,
+ * then the bare downloadId in case the request came through the region-scoped
+ * URL form (`idb://{regionId}/model/{name}`).
+ */
+function modelCandidateKeys(actualStyleId, downloadId, decodedPath) {
+    return dedupe([
+        `${actualStyleId}::model::${decodedPath}`,
+        `${downloadId}::model::${decodedPath}`,
+    ]);
+}
+// ---------------------------------------------------------------------------
+// TileJSON source matching
+// ---------------------------------------------------------------------------
+/**
+ * Mapbox GL requests tilejson via `idb://{downloadId}/tilesjson/{path}` where
+ * `{path}` may be the source id, the original TileJSON URL, or the URL we
+ * stashed under `__originalTilesetUrl` when patching for offline. Try all
+ * three; return the matching source id + its config, or null.
+ */
+function matchTileJsonSource(sources, decodedPath) {
+    const asConfig = (v) => v && typeof v === 'object' ? v : null;
+    if (decodedPath in sources) {
+        const config = asConfig(sources[decodedPath]);
+        if (config)
+            return { sourceId: decodedPath, config };
+    }
+    for (const [sourceId, raw] of Object.entries(sources)) {
+        const config = asConfig(raw);
+        if (!config)
+            continue;
+        const url = typeof config.url === 'string' ? config.url : undefined;
+        const original = typeof config.__originalTilesetUrl === 'string'
+            ? config.__originalTilesetUrl
+            : undefined;
+        if (url === decodedPath || original === decodedPath) {
+            return { sourceId, config };
+        }
+    }
+    return null;
+}
+/**
+ * Build the offline TileJSON payload that replaces the one Mapbox would
+ * have fetched from the network. `tiles` is rewritten to serve from the SW
+ * (the caller supplies the scheme via `tileUrlScheme`); copyable TileJSON
+ * fields are preserved.
+ */
+function buildOfflineTileJson(sourceConfig, downloadId, sourceId, extension, tileUrlScheme, origin) {
+    const base = `idb://${downloadId}/tile/${sourceId}/{z}/{x}/{y}.${extension}`
+        ;
+    const tileJson = {
+        tilejson: typeof sourceConfig.tilejson === 'string' ? sourceConfig.tilejson : '2.2.0',
+        name: sourceConfig.name ?? sourceId,
+        tiles: [base],
+        minzoom: typeof sourceConfig.minzoom === 'number' ? sourceConfig.minzoom : 0,
+        maxzoom: typeof sourceConfig.maxzoom === 'number' ? sourceConfig.maxzoom : 22,
+    };
+    const copyable = [
+        'bounds',
+        'center',
+        'vector_layers',
+        'scheme',
+        'attribution',
+        'encoding',
+        'format',
+        'grids',
+        'data',
+        'template',
+        'version',
+    ];
+    for (const field of copyable) {
+        if (field in sourceConfig && sourceConfig[field] !== undefined) {
+            tileJson[field] = sourceConfig[field];
+        }
+    }
+    return tileJson;
+}
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+function dedupe(values) {
+    return Array.from(new Set(values));
+}
+
 // idbFetchHandler.ts
 // Intercepts idb:// URLs and serves resources from IndexedDB for MapLibre GL offline mode
 const idbLogger = logger.scope('IDBFetch');
@@ -1262,16 +1473,11 @@ async function findStyleByRegionId(db, regionId) {
     }
     try {
         const allStyles = await db.getAll('styles');
-        for (const styleEntry of allStyles) {
-            if (styleEntry.regions && Array.isArray(styleEntry.regions)) {
-                const hasRegion = styleEntry.regions.some((r) => r.regionId === regionId || r.id === regionId);
-                if (hasRegion) {
-                    idbLogger.debug(`Found style "${styleEntry.key}" containing region: ${regionId}`);
-                    // Cache the result
-                    regionToStyleCache.set(regionId, { styleEntry, timestamp: Date.now() });
-                    return styleEntry;
-                }
-            }
+        const hit = findStyleByRegionIdIn(allStyles, regionId);
+        if (hit) {
+            idbLogger.debug(`Found style "${hit.key}" containing region: ${regionId}`);
+            regionToStyleCache.set(regionId, { styleEntry: hit, timestamp: Date.now() });
+            return hit;
         }
         idbLogger.debug(`No style found containing region: ${regionId}`);
         // Don't cache negative results — the region may be stored moments later
@@ -1283,36 +1489,6 @@ async function findStyleByRegionId(db, regionId) {
         return null;
     }
 }
-function buildOfflineTileJson(sourceConfig, downloadId, sourceId) {
-    const extension = deriveTileExtension(sourceConfig.tiles);
-    const offlineTiles = [`idb://${downloadId}/tile/${sourceId}/{z}/{x}/{y}.${extension}`];
-    const tileJson = {
-        tilejson: typeof sourceConfig.tilejson === 'string' ? sourceConfig.tilejson : '2.2.0',
-        name: sourceConfig.name ?? sourceId,
-        tiles: offlineTiles,
-        minzoom: typeof sourceConfig.minzoom === 'number' ? sourceConfig.minzoom : 0,
-        maxzoom: typeof sourceConfig.maxzoom === 'number' ? sourceConfig.maxzoom : 22,
-    };
-    const fieldsToCopy = [
-        'bounds',
-        'center',
-        'vector_layers',
-        'scheme',
-        'attribution',
-        'encoding',
-        'format',
-        'grids',
-        'data',
-        'template',
-        'version',
-    ];
-    for (const field of fieldsToCopy) {
-        if (field in sourceConfig && sourceConfig[field] !== undefined) {
-            tileJson[field] = sourceConfig[field];
-        }
-    }
-    return tileJson;
-}
 async function createTileResponse(resource) {
     const headers = {};
     // Set proper content type for vector tiles (PBF/MVT format)
@@ -1407,7 +1583,7 @@ async function idbFetchHandler(url, init) {
                     // 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 yMatch = yExt.match(/(\d+)\.(\w+)/);
+                    const yMatch = yExt.match(/^(\d+)\.(\w+)$/);
                     if (yMatch) {
                         const y = parseInt(yMatch[1]);
                         const requestedExt = yMatch[2]; // Extension from URL (for logging only)
@@ -1422,7 +1598,7 @@ async function idbFetchHandler(url, init) {
                         }
                         idbLogger.debug(`Tile not found: ${tileKey}`);
                         // Fallback: try common alternative extensions
-                        const fallbackExtensions = ['pbf', 'mvt', 'png', 'jpg', 'webp', 'glb'].filter(ext => ext !== requestedExt);
+                        const fallbackExtensions = tileFallbackExtensions(requestedExt);
                         for (const fallbackExt of fallbackExtensions) {
                             const fallbackKey = createTileKey(x, y, z, actualStyleId, sourceKey, fallbackExt);
                             const fallbackResource = await db.get('tiles', fallbackKey);
@@ -1464,7 +1640,7 @@ async function idbFetchHandler(url, init) {
                                 return await createTileResponse(resource);
                             }
                             // Try alternative extensions
-                            const fallbackExts = ['pbf', 'mvt', 'png', 'jpg', 'webp'].filter(e => e !== ext);
+                            const fallbackExts = tileFallbackExtensions(ext);
                             for (const fallbackExt of fallbackExts) {
                                 const fallbackKey = createTileKey(parseInt(x), parseInt(y), parseInt(z), actualStyleId, fallbackSourceKey, fallbackExt);
                                 const fallbackResource = await db.get('tiles', fallbackKey);
@@ -1484,46 +1660,19 @@ async function idbFetchHandler(url, init) {
             }
             case 'glyph': {
                 idbLogger.debug(`Looking for glyph with key: ${key}`);
-                // Find which style this region belongs to
                 const styleEntry = await findStyleByRegionId(db, downloadId);
                 const actualStyleId = styleEntry?.key || downloadId;
-                if (styleEntry && downloadId !== actualStyleId) {
-                    idbLogger.debug(`Region "${downloadId}" belongs to style "${actualStyleId}", searching with style key`);
-                }
-                // Parse the resource path: "FontA,FontB,FontC/0-255.pbf"
-                // MapLibre requests glyphs with comma-separated fallback fonts
-                // but glyphs are stored individually per font
-                const pathParts = decodedResourcePath.split('/');
-                const fontstackPart = pathParts[0]; // "FontA,FontB,FontC"
-                const rangePart = pathParts[1] || '0-255.pbf'; // "0-255.pbf"
-                // Split comma-separated fonts
-                const fontstacks = fontstackPart.split(',').map(f => f.trim());
+                const { fontstacks, rangePart } = parseGlyphPath(decodedResourcePath);
                 idbLogger.debug(`Trying ${fontstacks.length} fonts in fallback order: ${fontstacks.join(', ')}`);
-                // Try each font in order (this is how font fallbacks work)
                 for (const fontstack of fontstacks) {
-                    const glyphPath = `${fontstack}/${rangePart}`;
-                    const normalizedPath = glyphPath.endsWith('.pbf') ? glyphPath : `${glyphPath}.pbf`;
-                    const glyphCandidateKeys = [
-                        // Try with actual style ID first
-                        `${actualStyleId}::${normalizedPath}`,
-                        `${actualStyleId}::${glyphPath}`,
-                        // Then try with download ID
-                        `${downloadId}::${normalizedPath}`,
-                        `${downloadId}::${glyphPath}`,
-                        // Just paths
-                        normalizedPath,
-                        glyphPath,
-                    ];
-                    idbLogger.debug(`Trying keys for font "${fontstack}":`, glyphCandidateKeys);
-                    for (const candidateKey of glyphCandidateKeys) {
+                    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',
-                                },
+                                headers: { 'Content-Type': 'application/x-protobuf' },
                             });
                         }
                     }
@@ -1533,33 +1682,11 @@ async function idbFetchHandler(url, init) {
             }
             case 'sprite': {
                 idbLogger.debug(`Looking for sprite with key: ${key}`);
-                // Find which style this region belongs to
                 const styleEntry = await findStyleByRegionId(db, downloadId);
                 const actualStyleId = styleEntry?.key || downloadId;
-                if (styleEntry && downloadId !== actualStyleId) {
-                    idbLogger.debug(`Region "${downloadId}" belongs to style "${actualStyleId}", searching with style key`);
-                }
-                // The sprite service stores sprites with keys like: "voyager::sprite.json", "voyager::sprite@2x.json"
-                // MapLibre requests sprites as: "idb://region_XXX/sprite/sprite@2x.json"
-                // So we need to map the region ID to the style ID
-                const spriteCandidateKeys = Array.from(new Set([
-                    // Try with actual style ID first (most likely to work)
-                    `${actualStyleId}::${decodedResourcePath}`,
-                    `${actualStyleId}:${decodedResourcePath}`,
-                    `${actualStyleId}::${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-                    `${actualStyleId}:${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-                    // Then try with download ID (in case it's a direct style download)
-                    `${downloadId}::${decodedResourcePath}`,
-                    `${downloadId}:${decodedResourcePath}`,
-                    `${downloadId}::${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-                    `${downloadId}:${decodedResourcePath.replace(/\.(json|png)$/i, '')}`,
-                    // Just the path itself
-                    decodedResourcePath,
-                    // Original key format
-                    key,
-                ]));
-                idbLogger.debug(`Sprite candidates for "${decodedResourcePath}":`, spriteCandidateKeys);
-                for (const candidateKey of spriteCandidateKeys) {
+                const candidates = spriteCandidateKeys(actualStyleId, downloadId, decodedResourcePath);
+                idbLogger.debug(`Sprite candidates for "${decodedResourcePath}":`, candidates);
+                for (const candidateKey of candidates) {
                     const resource = await db.get('sprites', candidateKey);
                     if (resource?.data) {
                         idbLogger.debug(`Found sprite using key: ${candidateKey}`);
@@ -1569,7 +1696,7 @@ async function idbFetchHandler(url, init) {
                         });
                     }
                 }
-                idbLogger.warn(`Sprite not found, tried keys: ${spriteCandidateKeys.join(', ')}`);
+                idbLogger.warn(`Sprite not found, tried keys: ${candidates.join(', ')}`);
                 break;
             }
             case 'font': {
@@ -1585,18 +1712,12 @@ async function idbFetchHandler(url, init) {
                 break;
             }
             case 'model': {
-                // Model URLs are rewritten by patchStyleForOffline to:
+                // Model URLs are rewritten by patchStyleForOffline to
                 //   idb://{styleId}/model/{modelName}
                 // Models are keyed by {styleId}::model::{modelName} in the store.
-                // Mirror the sprite resolution fallback: try the style ID first,
-                // then the download/region ID (in case the request came through a
-                // region-scoped URL).
                 const styleEntry = await findStyleByRegionId(db, downloadId);
                 const actualStyleId = styleEntry?.key || downloadId;
-                const candidates = Array.from(new Set([
-                    `${actualStyleId}::model::${decodedResourcePath}`,
-                    `${downloadId}::model::${decodedResourcePath}`,
-                ]));
+                const candidates = modelCandidateKeys(actualStyleId, downloadId, decodedResourcePath);
                 idbLogger.debug(`Model candidates for "${decodedResourcePath}":`, candidates);
                 for (const candidateKey of candidates) {
                     const resource = await db.get('models', candidateKey);
@@ -1613,9 +1734,9 @@ async function idbFetchHandler(url, init) {
             }
             case 'tilesjson': {
                 idbLogger.debug(`Looking for tilejson with downloadId: ${downloadId}, resourcePath: ${decodedResourcePath}`);
-                // First try direct lookup (for style-level downloads)
+                // First try direct lookup (for style-level downloads), then fall back
+                // to searching by region ID (for region-level downloads).
                 let styleEntry = await db.get('styles', downloadId);
-                // If not found, search by region ID (for region-level downloads)
                 if (!styleEntry || !styleEntry.style?.sources) {
                     idbLogger.debug(`Style not found with key "${downloadId}", searching by region ID...`);
                     const foundStyle = await findStyleByRegionId(db, downloadId);
@@ -1623,41 +1744,23 @@ async function idbFetchHandler(url, init) {
                         styleEntry = foundStyle;
                     }
                 }
-                if (styleEntry?.style?.sources) {
-                    const sources = styleEntry.style.sources;
-                    let matchedSourceId;
-                    let matchedSourceConfig;
-                    if (decodedResourcePath in sources) {
-                        matchedSourceId = decodedResourcePath;
-                        matchedSourceConfig = sources[decodedResourcePath];
-                    }
-                    else {
-                        for (const [sourceId, sourceValue] of Object.entries(sources)) {
-                            const sourceUrl = typeof sourceValue.url === 'string' ? sourceValue.url : undefined;
-                            const originalUrl = typeof sourceValue.__originalTilesetUrl === 'string'
-                                ? sourceValue.__originalTilesetUrl
-                                : undefined;
-                            if (sourceUrl === decodedResourcePath || originalUrl === decodedResourcePath) {
-                                matchedSourceId = sourceId;
-                                matchedSourceConfig = sourceValue;
-                                break;
-                            }
-                        }
-                    }
-                    if (matchedSourceId && matchedSourceConfig) {
-                        const tileJson = buildOfflineTileJson(matchedSourceConfig, downloadId, matchedSourceId);
-                        idbLogger.debug(`Serving offline tilejson for source: ${matchedSourceId}`);
-                        return new Response(JSON.stringify(tileJson), {
-                            status: 200,
-                            headers: { 'Content-Type': 'application/json' },
-                        });
-                    }
-                    idbLogger.warn(`No matching source found for tilejson: ${decodedResourcePath}`);
-                }
-                else {
+                if (!styleEntry?.style?.sources) {
                     idbLogger.warn(`Style not found or missing sources for downloadId: ${downloadId}`);
+                    break;
                 }
-                break;
+                const sources = styleEntry.style.sources;
+                const matched = matchTileJsonSource(sources, decodedResourcePath);
+                if (!matched) {
+                    idbLogger.warn(`No matching source found for tilejson: ${decodedResourcePath}`);
+                    break;
+                }
+                const extension = deriveTileExtension(matched.config.tiles);
+                const tileJson = buildOfflineTileJson(matched.config, downloadId, matched.sourceId, extension, 'idb');
+                idbLogger.debug(`Serving offline tilejson for source: ${matched.sourceId}`);
+                return new Response(JSON.stringify(tileJson), {
+                    status: 200,
+                    headers: { 'Content-Type': 'application/json' },
+                });
             }
             default:
                 idbLogger.warn(`Unknown resource type: ${type}`);
@@ -1681,6 +1784,37 @@ async function idbFetchHandler(url, init) {
 function isMapboxProtocol(url) {
     return url.startsWith(MAPBOX_API.PROTOCOL);
 }
+/**
+ * Parse a URL and return its hostname, or null if the URL is malformed.
+ * Accepts relative URLs when `base` is provided.
+ */
+function getUrlHostname(url, base) {
+    try {
+        return new URL(url, base).hostname.toLowerCase();
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * True if `url`'s hostname equals `host` or is a subdomain of `host`.
+ * Uses URL parsing (not substring matching) to avoid false positives like
+ * `https://evil.com/?x=mapbox.com` matching `mapbox.com`.
+ */
+function hostMatches(url, host, base) {
+    const hostname = getUrlHostname(url, base);
+    if (hostname === null)
+        return false;
+    const target = host.toLowerCase();
+    return hostname === target || hostname.endsWith('.' + target);
+}
+/**
+ * True for any host under the mapbox.com domain (including api.mapbox.com,
+ * *.tiles.mapbox.com, etc.). Used by provider detection.
+ */
+function isMapboxHost(url, base) {
+    return hostMatches(url, 'mapbox.com', base);
+}
 /**
  * Resolve a mapbox:// URL to its HTTPS API equivalent
  *
@@ -1754,9 +1888,7 @@ function rewriteMapboxCdnTileUrl(tileUrl) {
  */
 function detectStyleProvider(styleUrl, style) {
     // Check URL patterns
-    if (isMapboxProtocol(styleUrl) ||
-        styleUrl.includes('mapbox.com') ||
-        styleUrl.includes('api.mapbox.com')) {
+    if (isMapboxProtocol(styleUrl) || isMapboxHost(styleUrl)) {
         return 'mapbox';
     }
     if (styleUrl.includes('maplibre') ||
@@ -1775,7 +1907,7 @@ function detectStyleProvider(styleUrl, style) {
         const sources = style.sources || {};
         for (const [, sourceConfig] of Object.entries(sources)) {
             const source = sourceConfig;
-            if (source.url && (source.url.includes('mapbox.com') || isMapboxProtocol(source.url))) {
+            if (source.url && (isMapboxProtocol(source.url) || isMapboxHost(source.url))) {
                 return 'mapbox';
             }
         }
@@ -1867,7 +1999,7 @@ function processStyleSources(style, provider, accessToken) {
                 if (isMapboxProtocol(tileUrl) && accessToken) {
                     return resolveMapboxUrl(tileUrl, accessToken);
                 }
-                if (provider === 'mapbox' && accessToken && tileUrl.includes('mapbox.com')) {
+                if (provider === 'mapbox' && accessToken && isMapboxHost(tileUrl)) {
                     return normalizeStyleUrl(tileUrl, accessToken);
                 }
                 return tileUrl;
@@ -1882,7 +2014,7 @@ function processStyleSources(style, provider, accessToken) {
             if (isMapboxProtocol(processedStyle.sprite)) {
                 processedStyle.sprite = resolveMapboxUrl(processedStyle.sprite, accessToken);
             }
-            else if (provider === 'mapbox' && processedStyle.sprite.includes('mapbox.com')) {
+            else if (provider === 'mapbox' && isMapboxHost(processedStyle.sprite)) {
                 processedStyle.sprite = normalizeStyleUrl(processedStyle.sprite, accessToken);
             }
         }
@@ -1893,7 +2025,7 @@ function processStyleSources(style, provider, accessToken) {
                     if (isMapboxProtocol(entry.url)) {
                         return { ...entry, url: resolveMapboxUrl(entry.url, accessToken) };
                     }
-                    else if (provider === 'mapbox' && entry.url.includes('mapbox.com')) {
+                    else if (provider === 'mapbox' && isMapboxHost(entry.url)) {
                         return { ...entry, url: normalizeStyleUrl(entry.url, accessToken) };
                     }
                 }
@@ -1906,7 +2038,7 @@ function processStyleSources(style, provider, accessToken) {
         if (isMapboxProtocol(processedStyle.glyphs)) {
             processedStyle.glyphs = resolveMapboxUrl(processedStyle.glyphs, accessToken);
         }
-        else if (provider === 'mapbox' && processedStyle.glyphs.includes('mapbox.com')) {
+        else if (provider === 'mapbox' && isMapboxHost(processedStyle.glyphs)) {
             processedStyle.glyphs = normalizeStyleUrl(processedStyle.glyphs, accessToken);
         }
     }
@@ -1946,13 +2078,20 @@ function validateStyleForProvider(style, provider) {
         // Check for Mapbox-specific requirements
         const hasMapboxSources = Object.values(style.sources || {}).some((source) => {
             const s = source;
-            return s.url && s.url.includes('mapbox.com');
+            return !!s.url && isMapboxHost(s.url);
         });
         if (hasMapboxSources) {
             // Check if access token might be needed
             const hasAccessToken = Object.values(style.sources || {}).some((source) => {
                 const s = source;
-                return s.url && s.url.includes('access_token');
+                if (!s.url)
+                    return false;
+                try {
+                    return new URL(s.url).searchParams.has('access_token');
+                }
+                catch {
+                    return false;
+                }
             });
             if (!hasAccessToken) {
                 warnings.push('Mapbox sources detected but no access token found - authentication may be required');
@@ -1986,14 +2125,15 @@ function patchStyleForOffline(style, downloadId, maxZoom, tileExtension, styleId
         styleLogger.debug(`Patching source: ${sourceKey}`, source);
         if (source.tiles) {
             const originalTiles = [...source.tiles];
-            // Patch to idb://{downloadId}/tile/{sourceKey}/{z}/{x}/{y}.ext
+            // 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
+            // storing — otherwise Mapbox v4 tile URLs (`{y}.vector.pbf`) produced a
+            // 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) => {
-                // Use stored tileExtension if available, otherwise try to extract from URL
-                let ext = tileExtension;
-                if (!ext) {
-                    const extMatch = url.match(/\{z\}\/\{x\}\/\{y\}\.(\w+)/);
-                    ext = extMatch ? extMatch[1] : 'pbf';
-                }
+                const ext = tileExtension ?? extractTileExtensionFromUrl(url);
                 return `idb://${downloadId}/tile/${sourceKey}/{z}/{x}/{y}.${ext}`;
             });
             styleLogger.debug(`Patched tiles for ${sourceKey} with extension .${tileExtension || 'pbf'}:`, {
@@ -2871,10 +3011,8 @@ async function resolveImportsRecursive(style, accessToken, visited, depth, maxRe
                 if (typeof prefixedLayer.source === 'string') {
                     prefixedLayer.source = `${importId}/${prefixedLayer.source}`;
                 }
-                // Resolve ["config", "key"] expressions using schema defaults and import overrides
-                if (Object.keys(configValues).length > 0) {
-                    resolveConfigExpressions(prefixedLayer, configValues);
-                }
+                // Resolve ["config", "key"] expressions using schema defaults and import overrides.
+                resolveConfigExpressions(prefixedLayer, configValues);
                 flattenedLayers.push(prefixedLayer);
             }
         }
@@ -2912,8 +3050,48 @@ async function resolveImportsRecursive(style, accessToken, visited, depth, maxRe
     if (!style.models && importedModels) {
         style.models = importedModels;
     }
+    // Rewrite indoor-only expressions so the flattened style validates without
+    // the `imports` wrapper at render time — see sanitizeIndoorExpressions.
+    sanitizeIndoorExpressions(style);
     return style;
 }
+/**
+ * Rewrite indoor-only expressions in a style's layers to their outdoor no-op
+ * constants. See the in-line comment in `resolveValue` for why this is needed
+ * for Mapbox Standard when the `imports` wrapper is stripped.
+ *
+ * Safe to call multiple times and on already-downloaded stored styles — the
+ * rewrites are idempotent (after the first pass there are no more
+ * `is-active-floor` / `floor-level` expressions to rewrite).
+ */
+function sanitizeIndoorExpressions(style) {
+    const layers = style.layers;
+    if (!Array.isArray(layers))
+        return;
+    for (const layer of layers) {
+        if (layer && typeof layer === 'object') {
+            rewriteIndoor(layer);
+        }
+    }
+}
+function rewriteIndoor(obj) {
+    for (const key of Object.keys(obj)) {
+        obj[key] = rewriteIndoorValue(obj[key]);
+    }
+}
+function rewriteIndoorValue(value) {
+    if (!Array.isArray(value)) {
+        if (value && typeof value === 'object' && !ArrayBuffer.isView(value)) {
+            rewriteIndoor(value);
+        }
+        return value;
+    }
+    if (value[0] === 'is-active-floor')
+        return false;
+    if (value[0] === 'floor-level' && value.length === 1)
+        return 0;
+    return value.map(rewriteIndoorValue);
+}
 /**
  * Deep clone a plain object/array (JSON-safe values only).
  */
@@ -3079,6 +3257,40 @@ function mergeSprites(outer, imported) {
     return result;
 }
 
+const DEFAULT_WASM_URL = 'https://cdn.jsdelivr.net/npm/sql.js@1.14.1/dist/';
+let currentConfig = {};
+let sqlJsPromise = null;
+/**
+ * Override how `sql.js` loads its WebAssembly. Call once before any MBTiles
+ * import/export is invoked. Resets any cached init.
+ */
+function configureSqlJs(config) {
+    currentConfig = { ...config };
+    sqlJsPromise = null;
+}
+/**
+ * Lazily initialise `sql.js`. The underlying module is loaded via dynamic
+ * `import()` so it only ships with bundles that actually call MBTiles code.
+ */
+async function getSqlJs() {
+    if (sqlJsPromise)
+        return sqlJsPromise;
+    sqlJsPromise = (async () => {
+        const mod = (await import('sql.js'));
+        const initSqlJs = mod.default;
+        const options = {};
+        if (currentConfig.wasmBinary) {
+            options.wasmBinary = currentConfig.wasmBinary;
+        }
+        else {
+            const base = currentConfig.wasmUrl ?? DEFAULT_WASM_URL;
+            options.locateFile = (file) => base.endsWith('/') ? `${base}${file}` : `${base}/${file}`;
+        }
+        return initSqlJs(options);
+    })();
+    return sqlJsPromise;
+}
+
 const fontLogger = logger.scope('FontService');
 class FontService {
     db = dbPromise;
@@ -3262,15 +3474,23 @@ class FontService {
             },
         };
     }
-    async cleanupOldFonts(maxAge = 30) {
+    /**
+     * Delete fonts older than `maxAge` days. When `options.styleId` is
+     * provided, only fonts belonging to that style (per the delimiter-aware
+     * `resourceKeyBelongsToStyle` match) are eligible — callers relying on
+     * a styleId filter previously got a silent full-store wipe.
+     */
+    async cleanupOldFonts(maxAge = 30, options = {}) {
         const db = await this.db;
         const cutoffTime = Date.now() - maxAge * 24 * 60 * 60 * 1000;
+        const { styleId } = options;
         const tx = db.transaction(['fonts'], 'readwrite');
         let deletedCount = 0;
         let cursor = await tx.objectStore('fonts').openCursor();
         while (cursor) {
             const fontEntry = cursor.value;
-            if (fontEntry.lastModified < cutoffTime) {
+            const belongs = !styleId || resourceKeyBelongsToStyle(fontEntry.key, styleId);
+            if (belongs && fontEntry.lastModified < cutoffTime) {
                 await cursor.delete();
                 deletedCount++;
             }
@@ -3436,7 +3656,7 @@ const fontService = new FontService();
 const downloadFonts = (fontUrls, styleName, options) => fontService.downloadFonts(fontUrls, styleName, options);
 const getFontStats = () => fontService.getFontStats();
 const getFontAnalytics = () => fontService.getFontAnalytics();
-const cleanupOldFonts = (maxAge) => fontService.cleanupOldFonts(maxAge);
+const cleanupOldFonts = (maxAge, options) => fontService.cleanupOldFonts(maxAge, options);
 const verifyAndRepairFonts = () => fontService.verifyAndRepairFonts();
 
 const spriteLogger = logger.scope('SpriteService');
@@ -3747,19 +3967,24 @@ class SpriteService {
         };
     }
     /**
-     * Removes sprites older than the specified age
+     * Remove sprites older than the specified age. When `options.styleId` is
+     * provided, only sprites belonging to that style (per
+     * `resourceKeyBelongsToStyle`) are eligible.
      * @param maxAge - Maximum age in days (default: 30)
+     * @param options.styleId - Optional style filter; omit to scan all styles
      * @returns Promise resolving to number of deleted sprites
      */
-    async cleanupOldSprites(maxAge = 30) {
+    async cleanupOldSprites(maxAge = 30, options = {}) {
         const db = await this.db;
         const cutoffTime = Date.now() - maxAge * 24 * 60 * 60 * 1000;
+        const { styleId } = options;
         const tx = db.transaction(['sprites'], 'readwrite');
         let deletedCount = 0;
         let cursor = await tx.objectStore('sprites').openCursor();
         while (cursor) {
             const spriteEntry = cursor.value;
-            if (spriteEntry.lastModified < cutoffTime) {
+            const belongs = !styleId || resourceKeyBelongsToStyle(spriteEntry.key, styleId);
+            if (belongs && spriteEntry.lastModified < cutoffTime) {
                 await cursor.delete();
                 deletedCount++;
             }
@@ -3913,7 +4138,7 @@ const spriteService = new SpriteService();
 const downloadSprites = (spriteUrls, styleName, options) => spriteService.downloadSprites(spriteUrls, styleName, options);
 const getSpriteStats = () => spriteService.getSpriteStats();
 const getSpriteAnalytics = () => spriteService.getSpriteAnalytics();
-const cleanupOldSprites = (maxAge) => spriteService.cleanupOldSprites(maxAge);
+const cleanupOldSprites = (maxAge, options) => spriteService.cleanupOldSprites(maxAge, options);
 const verifyAndRepairSprites = () => spriteService.verifyAndRepairSprites();
 
 var spriteService$1 = /*#__PURE__*/Object.freeze({
@@ -5184,7 +5409,17 @@ 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;
-                    const isMapboxStandardSprite = /api\.mapbox\.com\/styles\/v1\/.+\/sprite$/.test(pathWithoutQuery);
+                    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) {
                         // The path-rewrite suffix replaces the trailing `sprite` segment.
                         suffixes.push('__ICONSET__');
@@ -6680,8 +6915,7 @@ class TileService {
         }
     }
     extractExtension(template) {
-        const extMatch = template.match(/\.([\w]+)(?:\?|$)/i);
-        return extMatch ? extMatch[1] : 'pbf';
+        return extractTileExtensionFromUrl(template);
     }
     selectTileTemplate(templates, coord) {
         if (templates.length === 1) {
@@ -7063,14 +7297,21 @@ class GlyphService {
             },
         };
     }
-    async cleanupOldGlyphs(maxAge = 30) {
+    /**
+     * 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;
-            if (glyphEntry.lastModified < cutoffTime) {
+            const belongs = !styleId || resourceKeyBelongsToStyle(glyphEntry.key, styleId);
+            if (belongs && glyphEntry.lastModified < cutoffTime) {
                 await cursor.delete();
                 deletedCount++;
             }
@@ -7173,7 +7414,7 @@ const downloadGlyphs = (glyphUrl, fontstacks, styleName, ranges, options) => gly
 const loadGlyphs = (fontstack, ranges, styleName) => glyphService.loadGlyphs(fontstack, ranges, styleName);
 const getGlyphStats = () => glyphService.getGlyphStats();
 const getGlyphAnalytics = () => glyphService.getGlyphAnalytics();
-const cleanupOldGlyphs = (maxAge) => glyphService.cleanupOldGlyphs(maxAge);
+const cleanupOldGlyphs = (maxAge, options) => glyphService.cleanupOldGlyphs(maxAge, options);
 const verifyAndRepairGlyphs = () => glyphService.verifyAndRepairGlyphs();
 
 var glyphService$1 = /*#__PURE__*/Object.freeze({
@@ -7408,8 +7649,7 @@ class ResourceService {
         return getFontAnalytics();
     }
     async cleanupOldFonts(styleId, options) {
-        const maxAge = options?.maxAge;
-        return cleanupOldFonts(maxAge);
+        return cleanupOldFonts(options?.maxAge, { styleId });
     }
     async verifyAndRepairFonts() {
         return verifyAndRepairFonts();
@@ -7425,8 +7665,7 @@ class ResourceService {
         return getSpriteAnalytics();
     }
     async cleanupOldSprites(styleId, options) {
-        const maxAge = options?.maxAge;
-        return cleanupOldSprites(maxAge);
+        return cleanupOldSprites(options?.maxAge, { styleId });
     }
     async verifyAndRepairSprites() {
         return verifyAndRepairSprites();
@@ -7445,8 +7684,7 @@ class ResourceService {
         return loadGlyphs(fontstack, ranges, styleId);
     }
     async cleanupOldGlyphs(styleId, options) {
-        const maxAge = options?.maxAge;
-        return cleanupOldGlyphs(maxAge);
+        return cleanupOldGlyphs(options?.maxAge, { styleId });
     }
     async verifyAndRepairGlyphs() {
         return verifyAndRepairGlyphs();
@@ -7561,6 +7799,88 @@ class AnalyticsService {
     }
 }
 
+/**
+ * MBTiles uses TMS tile_row ordering; our storage uses XYZ y. Flip across
+ * either direction with the same formula.
+ */
+function flipY(y, z) {
+    return (1 << z) - 1 - y;
+}
+/** Vector tile formats that downstream consumers (QGIS, maplibre-native) expect gzipped. */
+const VECTOR_FORMATS = new Set(['pbf', 'mvt']);
+function hasGzipMagic(bytes) {
+    return bytes.length >= 2 && bytes[0] === 0x1f && bytes[1] === 0x8b;
+}
+async function drainReadable(readable) {
+    const reader = readable.getReader();
+    const chunks = [];
+    let total = 0;
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        if (value) {
+            chunks.push(value);
+            total += value.byteLength;
+        }
+    }
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const chunk of chunks) {
+        out.set(chunk, offset);
+        offset += chunk.byteLength;
+    }
+    return out;
+}
+async function transformBytes(bytes, transform) {
+    const writer = transform.writable.getWriter();
+    // Don't await — the read loop below drives the pipe and we only want
+    // the final bytes, not back-pressure handling for a single chunk.
+    void writer.write(bytes);
+    void writer.close();
+    return drainReadable(transform.readable);
+}
+async function gzipBytes(bytes) {
+    return transformBytes(bytes, new CompressionStream('gzip'));
+}
+async function gunzipBytes(bytes) {
+    return transformBytes(bytes, new DecompressionStream('gzip'));
+}
+/**
+ * Build the MBTiles `json` metadata payload. For vector tiles this is
+ * mandatory for tippecanoe/QGIS/maplibre-native to render — they read
+ * `vector_layers` from here.
+ *
+ * `vector_layers` is inferred from the offline style's vector sources
+ * (populated by the TileJSON expansion step in styleService). Multiple
+ * vector sources are merged; duplicates de-duped by id, first wins.
+ */
+function buildVectorJsonMetadata(style, sourceIds) {
+    if (!style || typeof style !== 'object')
+        return null;
+    const sources = style.sources;
+    if (!sources)
+        return null;
+    const merged = [];
+    const seen = new Set();
+    for (const [id, src] of Object.entries(sources)) {
+        if (sourceIds.size > 0 && !sourceIds.has(id))
+            continue;
+        const layers = src?.vector_layers;
+        if (!Array.isArray(layers))
+            continue;
+        for (const layer of layers) {
+            const layerId = typeof layer?.id === 'string' ? layer.id : null;
+            if (!layerId || seen.has(layerId))
+                continue;
+            seen.add(layerId);
+            merged.push(layer);
+        }
+    }
+    if (merged.length === 0)
+        return null;
+    return JSON.stringify({ vector_layers: merged });
+}
 const serviceLogger = logger.scope('ImportExportService');
 class ImportExportService {
     db = dbPromise;
@@ -7568,270 +7888,173 @@ class ImportExportService {
         // No need for initialization since dbPromise is already available
     }
     /**
-     * Export a region to JSON format
+     * Export region as a real binary MBTiles SQLite file.
+     *
+     * Produces a v1.3-compliant MBTiles archive: `metadata` + `tiles` tables,
+     * with `tile_row` flipped to TMS ordering. The resulting blob can be read
+     * by tippecanoe, QGIS, maplibre-native, etc.
      */
-    async exportRegionAsJSON(regionId, options = {}) {
+    async exportRegionAsMBTiles(regionId, options = {}) {
         const onProgress = options.onProgress || (() => { });
         try {
             onProgress({
                 stage: 'preparing',
                 percentage: 0,
-                message: 'Preparing export...',
+                message: 'Preparing MBTiles export...',
             });
-            // Get region metadata
             const region = await this.getRegionMetadata(regionId);
             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 isVector = VECTOR_FORMATS.has(format);
             onProgress({
-                stage: 'exporting',
-                percentage: 10,
-                message: 'Collecting region data...',
+                stage: 'processing',
+                percentage: 75,
+                message: isVector ? 'Compressing vector tiles...' : 'Packing SQLite database...',
             });
-            const exportData = {
-                metadata: {
-                    id: region.id,
-                    name: region.name || region.id,
-                    description: region.name || region.id, // StoredRegion doesn't have description, use name instead
-                    bounds: region.bounds,
-                    minZoom: region.minZoom,
-                    maxZoom: region.maxZoom,
-                    styleUrl: region.styleUrl || '',
-                    createdAt: region.created, // StoredRegion uses 'created' not 'createdAt'
-                    exportedAt: Date.now(),
-                    version: '1.0.0',
-                    format: 'json',
-                },
-                style: {},
-                tiles: [],
-                sprites: [],
-                fonts: [],
-            };
-            // Export style if requested
-            if (options.includeStyle !== false) {
-                onProgress({
-                    stage: 'exporting',
-                    percentage: 20,
-                    message: 'Exporting style data...',
-                });
-                exportData.style = await this.exportStyle(regionId);
+            // Gzip vector tiles. Idempotent: skip tiles already gzipped (downloaded
+            // with their original gzip wrapper intact).
+            const packedTiles = [];
+            for (const tile of tiles) {
+                const raw = tile.data instanceof ArrayBuffer
+                    ? new Uint8Array(tile.data)
+                    : new Uint8Array(tile.data);
+                const data = isVector && !hasGzipMagic(raw) ? await gzipBytes(raw) : raw;
+                packedTiles.push({ z: tile.z, x: tile.x, y: tile.y, data });
             }
-            // Export tiles if requested
-            if (options.includeTiles !== false) {
-                onProgress({
-                    stage: 'exporting',
-                    percentage: 30,
-                    message: 'Exporting tiles...',
+            onProgress({
+                stage: 'processing',
+                percentage: 85,
+                message: 'Packing SQLite database...',
+            });
+            const SQL = await getSqlJs();
+            const db = new SQL.Database();
+            try {
+                db.run(`
+          CREATE TABLE metadata (name TEXT, value TEXT);
+          CREATE TABLE tiles (
+            zoom_level  INTEGER NOT NULL,
+            tile_column INTEGER NOT NULL,
+            tile_row    INTEGER NOT NULL,
+            tile_data   BLOB
+          );
+          CREATE UNIQUE INDEX tile_index ON tiles (zoom_level, tile_column, tile_row);
+          CREATE UNIQUE INDEX name ON metadata (name);
+        `);
+                const [[west, south], [east, north]] = region.bounds;
+                const centerLon = (west + east) / 2;
+                const centerLat = (south + north) / 2;
+                const centerZoom = Math.max(region.minZoom, Math.min(region.maxZoom, Math.round((region.minZoom + region.maxZoom) / 2)));
+                const metadataRows = {
+                    name: region.name || region.id,
+                    // MBTiles 1.3 type: 'overlay' or 'baselayer'. Baselayer matches how
+                    // QGIS treats the dataset (full-coverage map rather than overlay).
+                    type: isVector ? 'baselayer' : 'overlay',
+                    version: '1.0',
+                    description: region.name || region.id,
+                    format,
+                    bounds: `${west},${south},${east},${north}`,
+                    center: `${centerLon},${centerLat},${centerZoom}`,
+                    minzoom: String(region.minZoom),
+                    maxzoom: String(region.maxZoom),
+                };
+                // For vector tiles, the `json` field with `vector_layers` is required
+                // by the MBTiles 1.3 spec and by every vector tile consumer worth
+                // opening the file in. Derive it from the offline style.
+                if (isVector) {
+                    const style = await this.exportStyle(regionId);
+                    const sourceIds = new Set(tiles.map(t => t.sourceId).filter(Boolean));
+                    const json = buildVectorJsonMetadata(style.style ?? style, sourceIds);
+                    if (json)
+                        metadataRows.json = json;
+                }
+                for (const [k, v] of Object.entries(options.metadata || {})) {
+                    metadataRows[k] = typeof v === 'string' ? v : JSON.stringify(v);
+                }
+                const insertMeta = db.prepare(`INSERT INTO metadata (name, value) VALUES (?, ?)`);
+                try {
+                    for (const [name, value] of Object.entries(metadataRows)) {
+                        insertMeta.run([name, value]);
+                    }
+                }
+                finally {
+                    insertMeta.free();
+                }
+                const insertTile = db.prepare(`INSERT OR REPLACE INTO tiles (zoom_level, tile_column, tile_row, tile_data)
+           VALUES (?, ?, ?, ?)`);
+                try {
+                    db.run('BEGIN');
+                    for (const tile of packedTiles) {
+                        insertTile.run([tile.z, tile.x, flipY(tile.y, tile.z), tile.data]);
+                    }
+                    db.run('COMMIT');
+                }
+                finally {
+                    insertTile.free();
+                }
+                const binary = db.export();
+                const blob = new Blob([binary.buffer], {
+                    type: 'application/x-sqlite3',
                 });
-                exportData.tiles = await this.exportTiles(regionId, onProgress);
-            }
-            // Export sprites if requested
-            if (options.includeSprites !== false) {
                 onProgress({
-                    stage: 'exporting',
-                    percentage: 70,
-                    message: 'Exporting sprites...',
+                    stage: 'complete',
+                    percentage: 100,
+                    message: 'MBTiles export complete!',
                 });
-                exportData.sprites = await this.exportSprites(regionId);
+                return {
+                    success: true,
+                    format: 'mbtiles',
+                    filename: `${region.name || region.id}.mbtiles`,
+                    blob,
+                    size: blob.size,
+                    statistics: {
+                        tilesExported: tiles.length,
+                        spritesExported: 0,
+                        fontsExported: 0,
+                    },
+                };
             }
-            // Export fonts if requested
-            if (options.includeFonts !== false) {
-                onProgress({
-                    stage: 'exporting',
-                    percentage: 85,
-                    message: 'Exporting fonts...',
-                });
-                exportData.fonts = await this.exportFonts(regionId);
+            finally {
+                db.close();
             }
-            onProgress({
-                stage: 'processing',
-                percentage: 95,
-                message: 'Creating export file...',
-            });
-            // Create JSON blob
-            const jsonString = JSON.stringify(exportData, null, 2);
-            const blob = new Blob([jsonString], { type: 'application/json' });
-            onProgress({
-                stage: 'complete',
-                percentage: 100,
-                message: 'Export complete!',
-            });
-            return {
-                success: true,
-                format: 'json',
-                filename: `${region.name || region.id}_export.json`,
-                blob,
-                size: blob.size,
-                statistics: {
-                    tilesExported: exportData.tiles.length,
-                    spritesExported: exportData.sprites.length,
-                    fontsExported: exportData.fonts.length,
-                },
-            };
         }
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-            throw new Error(`Export failed: ${errorMessage}`);
+            throw new Error(`MBTiles export failed: ${errorMessage}`);
         }
     }
     /**
-     * Export region as PMTiles format
+     * Import region from a binary MBTiles (SQLite) file.
      */
-    async exportRegionAsPMTiles(regionId, options = {}) {
-        const onProgress = options.onProgress || (() => { });
+    async importRegion(importData) {
+        const onProgress = importData.onProgress || (() => { });
         try {
             onProgress({
                 stage: 'preparing',
                 percentage: 0,
-                message: 'Preparing PMTiles export...',
+                message: 'Reading file...',
             });
-            // Note: This is a simplified implementation
-            // In a real implementation, you would use the PMTiles library
-            // to create a proper PMTiles file format
-            const region = await this.getRegionMetadata(regionId);
-            if (!region) {
-                throw new Error(`Region ${regionId} not found`);
+            if (importData.format !== 'mbtiles') {
+                throw new Error(`Unsupported format: ${importData.format}`);
             }
-            // Get tiles data
-            const tiles = await this.exportTiles(regionId, onProgress);
-            // Create PMTiles header and data structure
-            const pmtilesData = {
-                header: {
-                    version: 3,
-                    type: 'mvt',
-                    compression: options.compression || 'gzip',
-                    bounds: region.bounds,
-                    minZoom: region.minZoom,
-                    maxZoom: region.maxZoom,
-                    metadata: {
-                        name: region.name,
-                        description: region.name || region.id, // StoredRegion doesn't have description, use name instead
-                        ...options.metadata,
-                    },
-                },
-                tiles: tiles,
-            };
-            // Convert to binary format (simplified)
-            const jsonString = JSON.stringify(pmtilesData);
-            const blob = new Blob([jsonString], { type: 'application/octet-stream' });
-            onProgress({
-                stage: 'complete',
-                percentage: 100,
-                message: 'PMTiles export complete!',
-            });
-            return {
-                success: true,
-                format: 'pmtiles',
-                filename: `${region.name || region.id}.pmtiles`,
-                blob,
-                size: blob.size,
-                statistics: {
-                    tilesExported: tiles.length,
-                    spritesExported: 0,
-                    fontsExported: 0,
-                },
-            };
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-            throw new Error(`PMTiles export failed: ${errorMessage}`);
-        }
-    }
-    /**
-     * Export region as MBTiles format
-     */
-    async exportRegionAsMBTiles(regionId, options = {}) {
-        const onProgress = options.onProgress || (() => { });
-        try {
+            const buffer = await this.readFileAsArrayBuffer(importData.file);
+            onProgress({ stage: 'importing', percentage: 40, message: 'Parsing MBTiles...' });
+            const regionData = await this.parseMBTiles(buffer);
             onProgress({
-                stage: 'preparing',
-                percentage: 0,
-                message: 'Preparing MBTiles export...',
+                stage: 'importing',
+                percentage: 70,
+                message: `Importing ${regionData.tiles?.length ?? 0} tiles...`,
             });
-            // Note: This is a simplified implementation
-            // In a real implementation, you would use SQLite/SQL.js
-            // to create a proper MBTiles SQLite database
-            const region = await this.getRegionMetadata(regionId);
-            if (!region) {
-                throw new Error(`Region ${regionId} not found`);
-            }
-            // Get tiles data
-            const tiles = await this.exportTiles(regionId, onProgress);
-            // Create MBTiles structure (simplified as JSON for now)
-            const mbtilesData = {
-                metadata: {
-                    name: region.name,
-                    type: 'overlay',
-                    version: '1.0',
-                    description: region.name || region.id, // StoredRegion doesn't have description, use name instead
-                    format: options.format || 'pbf',
-                    bounds: region.bounds.flat().join(','),
-                    minzoom: region.minZoom,
-                    maxzoom: region.maxZoom,
-                    ...options.metadata,
-                },
-                tiles: tiles.map(tile => ({
-                    zoom_level: tile.z,
-                    tile_column: tile.x,
-                    tile_row: tile.y,
-                    tile_data: tile.data,
-                })),
-            };
-            // Convert to binary format (simplified)
-            const jsonString = JSON.stringify(mbtilesData);
-            const blob = new Blob([jsonString], { type: 'application/octet-stream' });
+            const result = await this.importRegionData(regionData, importData);
             onProgress({
                 stage: 'complete',
                 percentage: 100,
-                message: 'MBTiles export complete!',
+                message: result.success ? 'Import complete!' : result.message,
             });
-            return {
-                success: true,
-                format: 'mbtiles',
-                filename: `${region.name || region.id}.mbtiles`,
-                blob,
-                size: blob.size,
-                statistics: {
-                    tilesExported: tiles.length,
-                    spritesExported: 0,
-                    fontsExported: 0,
-                },
-            };
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-            throw new Error(`MBTiles export failed: ${errorMessage}`);
-        }
-    }
-    /**
-     * Import region from file
-     */
-    async importRegion(importData) {
-        try {
-            let regionData;
-            switch (importData.format) {
-                case 'json': {
-                    const textContent = await this.readFileAsText(importData.file);
-                    regionData = JSON.parse(textContent);
-                    break;
-                }
-                case 'pmtiles': {
-                    // PMTiles is a binary format; currently parsed as JSON (simplified impl)
-                    const textContent = await this.readFileAsText(importData.file);
-                    regionData = await this.parsePMTiles(textContent);
-                    break;
-                }
-                case 'mbtiles': {
-                    // MBTiles is a binary format; currently parsed as JSON (simplified impl)
-                    const textContent = await this.readFileAsText(importData.file);
-                    regionData = await this.parseMBTiles(textContent);
-                    break;
-                }
-                default:
-                    throw new Error(`Unsupported format: ${importData.format}`);
-            }
-            // Import the region data
-            const result = await this.importRegionData(regionData, importData);
             return result;
         }
         catch (error) {
@@ -7955,151 +8178,113 @@ class ImportExportService {
         }
     }
     /**
-     * Export sprites data
-     */
-    async exportSprites(_regionId) {
-        const db = await this.db;
-        const transaction = db.transaction(['sprites'], 'readonly');
-        const store = transaction.objectStore('sprites');
-        const sprites = [];
-        try {
-            let cursor = await store.openCursor();
-            while (cursor) {
-                const sprite = cursor.value;
-                // Include sprites that match the styleId, or all sprites if keys don't contain styleId
-                // (sprite keys may or may not be prefixed with styleId depending on how they were stored)
-                sprites.push({
-                    url: sprite.url,
-                    data: sprite.data,
-                    type: sprite.url.endsWith('.json') ? 'json' : 'png',
-                    resolution: sprite.url.includes('@2x') ? '2x' : '1x',
-                });
-                cursor = await cursor.continue();
-            }
-            return sprites;
-        }
-        catch (error) {
-            serviceLogger.error('Error exporting sprites:', error);
-            return [];
-        }
-    }
-    /**
-     * Export fonts data
+     * Read file content as ArrayBuffer (for the binary MBTiles file).
      */
-    async exportFonts(_regionId) {
-        const db = await this.db;
-        const transaction = db.transaction(['fonts'], 'readonly');
-        const store = transaction.objectStore('fonts');
-        const fonts = [];
-        try {
-            let cursor = await store.openCursor();
-            while (cursor) {
-                const font = cursor.value;
-                // Include fonts that match the styleId, or all fonts if keys don't contain styleId
-                // (font keys may or may not be prefixed with styleId depending on how they were stored)
-                fonts.push({
-                    fontStack: font.key, // Use key as fontstack identifier
-                    range: '0-255', // Default range since FontEntry doesn't store this
-                    data: font.data,
-                });
-                cursor = await cursor.continue();
-            }
-            return fonts;
-        }
-        catch (error) {
-            serviceLogger.error('Error exporting fonts:', error);
-            return [];
-        }
-    }
-    /**
-     * Read file content as text (for JSON files)
-     */
-    async readFileAsText(file) {
+    async readFileAsArrayBuffer(file) {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
             reader.onload = () => resolve(reader.result);
             reader.onerror = () => reject(new Error('Failed to read file'));
-            reader.readAsText(file);
+            reader.readAsArrayBuffer(file);
         });
     }
     /**
-     * Parse PMTiles file (simplified)
+     * Parse a real binary MBTiles (SQLite) file into our import-data shape.
+     * Un-flips the TMS tile_row back to XYZ y.
      */
-    async parsePMTiles(content) {
-        // This is a simplified implementation
-        // In reality, you would use the PMTiles library to parse the binary format
-        const data = JSON.parse(content);
-        const header = data?.header || {};
-        const metadata = header?.metadata || {};
-        return {
-            metadata: {
-                id: metadata.name || 'imported-region',
-                name: metadata.name || 'Imported Region',
-                description: metadata.description || '',
-                bounds: header.bounds || [
-                    [0, 0],
-                    [0, 0],
-                ],
-                minZoom: header.minZoom || 0,
-                maxZoom: header.maxZoom || 14,
-                styleUrl: '',
-                createdAt: Date.now(),
-                exportedAt: Date.now(),
-                version: '1.0.0',
-                format: 'pmtiles',
-            },
-            style: {},
-            tiles: data.tiles || [],
-            sprites: [],
-            fonts: [],
-        };
-    }
-    /**
-     * Parse MBTiles file (simplified)
-     */
-    async parseMBTiles(content) {
-        // This is a simplified implementation
-        // In reality, you would use SQL.js to parse the SQLite database
-        const data = JSON.parse(content);
-        const rawBounds = data.metadata?.bounds
-            ? data.metadata.bounds.split(',').map(Number)
-            : [0, 0, 0, 0];
-        // Ensure we have exactly 4 valid numbers
-        const bounds = [
-            isFinite(rawBounds[0]) ? rawBounds[0] : 0,
-            isFinite(rawBounds[1]) ? rawBounds[1] : 0,
-            isFinite(rawBounds[2]) ? rawBounds[2] : 0,
-            isFinite(rawBounds[3]) ? rawBounds[3] : 0,
-        ];
-        return {
-            metadata: {
-                id: data.metadata.name || 'imported-region',
-                name: data.metadata.name || 'Imported Region',
-                description: data.metadata.description,
-                bounds: [
-                    [bounds[0], bounds[1]],
-                    [bounds[2], bounds[3]],
-                ],
-                minZoom: data.metadata.minzoom || 0,
-                maxZoom: data.metadata.maxzoom || 14,
-                styleUrl: '',
-                createdAt: Date.now(),
-                exportedAt: Date.now(),
-                version: '1.0.0',
-                format: 'mbtiles',
-            },
-            style: {},
-            tiles: data.tiles.map((tile) => ({
-                z: tile.zoom_level,
-                x: tile.tile_column,
-                y: tile.tile_row,
-                data: tile.tile_data,
-                format: 'pbf',
-                sourceId: 'imported',
-            })) || [],
-            sprites: [],
-            fonts: [],
-        };
+    async parseMBTiles(buffer) {
+        const bytes = new Uint8Array(buffer);
+        // SQLite header: "SQLite format 3\0" (16 bytes). Validate up front so
+        // non-MBTiles files (e.g. a JSON renamed to .mbtiles) surface a clear
+        // error instead of the opaque "file is not a database" from sql.js.
+        if (bytes.byteLength < 16) {
+            throw new Error('Not a valid MBTiles file: file is too small');
+        }
+        const magic = String.fromCharCode(...bytes.slice(0, 15));
+        if (magic !== 'SQLite format 3') {
+            throw new Error('Not a valid MBTiles file: missing SQLite header');
+        }
+        const SQL = await getSqlJs();
+        const db = new SQL.Database(bytes);
+        try {
+            const tablesResult = db.exec("SELECT name FROM sqlite_master WHERE type='table' AND name IN ('metadata', 'tiles')");
+            const tableNames = (tablesResult[0]?.values || []).map(r => r[0]);
+            if (!tableNames.includes('metadata') || !tableNames.includes('tiles')) {
+                throw new Error('Not a valid MBTiles file: missing required metadata/tiles tables');
+            }
+            const metadata = {};
+            const metaStmt = db.prepare('SELECT name, value FROM metadata');
+            try {
+                while (metaStmt.step()) {
+                    const row = metaStmt.get();
+                    metadata[row[0]] = row[1];
+                }
+            }
+            finally {
+                metaStmt.free();
+            }
+            const rawBounds = metadata.bounds ? metadata.bounds.split(',').map(Number) : [0, 0, 0, 0];
+            const bounds = [
+                isFinite(rawBounds[0]) ? rawBounds[0] : 0,
+                isFinite(rawBounds[1]) ? rawBounds[1] : 0,
+                isFinite(rawBounds[2]) ? rawBounds[2] : 0,
+                isFinite(rawBounds[3]) ? rawBounds[3] : 0,
+            ];
+            const format = (metadata.format || 'pbf');
+            const isVector = VECTOR_FORMATS.has(format);
+            const tiles = [];
+            const tilesStmt = db.prepare('SELECT zoom_level, tile_column, tile_row, tile_data FROM tiles');
+            try {
+                while (tilesStmt.step()) {
+                    const row = tilesStmt.get();
+                    const [z, x, tmsRow, data] = row;
+                    // Sliced copy so the buffer is detached from sql.js's heap.
+                    const copy = new Uint8Array(data.byteLength);
+                    copy.set(data);
+                    // Our IndexedDB stores vector tiles decompressed (tileService
+                    // inflates on download). MBTiles vector tiles are gzipped by
+                    // convention — un-gzip on the way in so the stored tile matches
+                    // what the fetch handler expects to serve.
+                    const storedBytes = isVector && hasGzipMagic(copy) ? await gunzipBytes(copy) : copy;
+                    tiles.push({
+                        z,
+                        x,
+                        y: flipY(tmsRow, z),
+                        data: storedBytes.buffer,
+                        format,
+                        sourceId: 'imported',
+                    });
+                }
+            }
+            finally {
+                tilesStmt.free();
+            }
+            const minZoom = metadata.minzoom !== undefined ? Number(metadata.minzoom) : 0;
+            const maxZoom = metadata.maxzoom !== undefined ? Number(metadata.maxzoom) : 14;
+            return {
+                metadata: {
+                    id: metadata.name || 'imported-region',
+                    name: metadata.name || 'Imported Region',
+                    description: metadata.description,
+                    bounds: [
+                        [bounds[0], bounds[1]],
+                        [bounds[2], bounds[3]],
+                    ],
+                    minZoom,
+                    maxZoom,
+                    styleUrl: '',
+                    createdAt: Date.now(),
+                    exportedAt: Date.now(),
+                    version: '1.0.0',
+                    format: 'mbtiles',
+                },
+                style: {},
+                tiles,
+            };
+        }
+        finally {
+            db.close();
+        }
     }
     /**
      * Import region data to database
@@ -8164,16 +8349,15 @@ class ImportExportService {
                     });
                 }
             }
-            // Import sprites and fonts similarly...
             return {
                 success: true,
                 regionId,
                 message: 'Region imported successfully',
                 statistics: {
                     tilesImported: regionData.tiles?.length || 0,
-                    spritesImported: regionData.sprites?.length || 0,
-                    fontsImported: regionData.fonts?.length || 0,
-                    totalSize: 0, // Calculate if needed
+                    spritesImported: 0,
+                    fontsImported: 0,
+                    totalSize: 0,
                 },
             };
         }
@@ -8402,8 +8586,6 @@ const createMaintenanceManagement = (services, deps) => {
 };
 
 const createImportExportManagement = (services) => ({
-    exportRegionAsJSON: async (regionId, options = {}) => services.importExportService.exportRegionAsJSON(regionId, options),
-    exportRegionAsPMTiles: async (regionId, options = {}) => services.importExportService.exportRegionAsPMTiles(regionId, options),
     exportRegionAsMBTiles: async (regionId, options = {}) => services.importExportService.exportRegionAsMBTiles(regionId, options),
     importRegion: async (importData) => services.importExportService.importRegion(importData),
     downloadExportedRegion: (exportResult) => {
@@ -8759,10 +8941,6 @@ const en = {
     'styleSelection.title': 'Select Offline Style',
     'styleSelection.message': 'Choose which offline style to load:',
     'styleSelection.sources': 'sources',
-    // Import/Export
-    'importExport.title': 'Import/Export',
-    'importExport.export': 'Export',
-    'importExport.import': 'Import',
     // Errors
     'error.loadingContent': 'Error loading content',
     'error.tryAgain': 'Please try again',
@@ -8787,41 +8965,30 @@ const en = {
     'regionDetails.bounds': 'Bounds',
     'regionDetails.zoomRange': 'Zoom Range',
     'regionDetails.created': 'Created',
-    // Import/Export Modal
-    'importExport.regionTitle': 'Import/Export Region',
-    'importExport.regionInfo': 'Region Information',
-    'importExport.id': 'ID',
-    'importExport.name': 'Name',
-    'importExport.unnamed': 'Unnamed',
-    'importExport.zoom': 'Zoom',
-    'importExport.created': 'Created',
-    'importExport.exportRegion': 'Export Region',
-    'importExport.exportFormat': 'Export Format',
-    'importExport.formatJson': 'JSON - Complete data (recommended)',
-    'importExport.formatPmtiles': 'PMTiles - Web optimized tiles',
-    'importExport.formatMbtiles': 'MBTiles - Industry standard',
-    'importExport.formatHint': 'Choose format based on your use case',
-    'importExport.includeComponents': 'Include Components',
-    'importExport.styleConfig': 'Style Configuration',
-    'importExport.mapTiles': 'Map Tiles',
-    'importExport.spritesIcons': 'Sprites & Icons',
-    'importExport.fontsGlyphs': 'Fonts & Glyphs',
-    'importExport.preparingExport': 'Preparing export...',
-    'importExport.exportComplete': 'Export complete!',
-    'importExport.exportFailed': 'Export failed. Please try again.',
-    'importExport.importRegion': 'Import Region',
-    'importExport.selectFile': 'Select File',
-    'importExport.fileFormatsHint': 'Supports JSON, PMTiles, and MBTiles formats',
-    'importExport.newRegionName': 'New Region Name (Optional)',
-    'importExport.newRegionNamePlaceholder': 'Leave empty to use original name',
-    'importExport.overwriteIfExists': 'Overwrite if region exists',
-    'importExport.preparingImport': 'Preparing import...',
-    'importExport.importComplete': 'Import complete!',
-    'importExport.importFailed': 'Import failed. Please try again.',
-    'importExport.formatGuide': 'Format Guide',
-    'importExport.jsonDesc': 'Complete data, human-readable, best for development',
-    'importExport.pmtilesDesc': 'Web-optimized, efficient serving, cloud-friendly',
-    'importExport.mbtilesDesc': 'Industry standard, SQLite-based, cross-platform',
+    // MBTiles Modal
+    'mbtiles.title': 'MBTiles Import / Export',
+    'mbtiles.regionInfo': 'Region Information',
+    'mbtiles.id': 'ID',
+    'mbtiles.name': 'Name',
+    'mbtiles.unnamed': 'Unnamed',
+    'mbtiles.zoom': 'Zoom',
+    'mbtiles.created': 'Created',
+    'mbtiles.exportTitle': 'Export as MBTiles',
+    'mbtiles.exportHint': 'Package the tiles in this region into a standard SQLite MBTiles archive that opens in QGIS, tippecanoe, and other tools.',
+    'mbtiles.exportButton': 'Download .mbtiles',
+    'mbtiles.preparingExport': 'Preparing export...',
+    'mbtiles.exportComplete': 'Export complete!',
+    'mbtiles.exportFailed': 'Export failed. Please try again.',
+    'mbtiles.importTitle': 'Import from MBTiles',
+    'mbtiles.selectFile': 'Select an .mbtiles file',
+    'mbtiles.fileHint': 'Only SQLite-format .mbtiles files are supported.',
+    'mbtiles.newRegionName': 'New Region Name (optional)',
+    'mbtiles.newRegionNamePlaceholder': 'Leave empty to use the name from the file',
+    'mbtiles.overwriteIfExists': 'Overwrite if a region with the same id exists',
+    'mbtiles.importButton': 'Import .mbtiles',
+    'mbtiles.preparingImport': 'Preparing import...',
+    'mbtiles.importComplete': 'Import complete!',
+    'mbtiles.importFailed': 'Import failed. Please try again.',
     // Active Downloads
     'download.activeCount': 'Active Downloads ({{count}})',
     // Panel Manager additional strings
@@ -8982,10 +9149,6 @@ const ar = {
     'styleSelection.title': 'اختر نمط غير متصل',
     'styleSelection.message': 'اختر النمط غير المتصل الذي تريد تحميله:',
     'styleSelection.sources': 'مصادر',
-    // Import/Export - استيراد/تصدير
-    'importExport.title': 'استيراد/تصدير',
-    'importExport.export': 'تصدير',
-    'importExport.import': 'استيراد',
     // Errors - الأخطاء
     'error.loadingContent': 'خطأ في تحميل المحتوى',
     'error.tryAgain': 'يرجى المحاولة مرة أخرى',
@@ -9010,41 +9173,30 @@ const ar = {
     'regionDetails.bounds': 'الحدود',
     'regionDetails.zoomRange': 'نطاق التكبير',
     'regionDetails.created': 'تاريخ الإنشاء',
-    // Import/Export Modal - نافذة الاستيراد/التصدير
-    'importExport.regionTitle': 'استيراد/تصدير المنطقة',
-    'importExport.regionInfo': 'معلومات المنطقة',
-    'importExport.id': 'المعرف',
-    'importExport.name': 'الاسم',
-    'importExport.unnamed': 'بدون اسم',
-    'importExport.zoom': 'التكبير',
-    'importExport.created': 'تاريخ الإنشاء',
-    'importExport.exportRegion': 'تصدير المنطقة',
-    'importExport.exportFormat': 'تنسيق التصدير',
-    'importExport.formatJson': 'JSON - بيانات كاملة (موصى به)',
-    'importExport.formatPmtiles': 'PMTiles - بلاطات محسنة للويب',
-    'importExport.formatMbtiles': 'MBTiles - معيار الصناعة',
-    'importExport.formatHint': 'اختر التنسيق بناءً على حالة استخدامك',
-    'importExport.includeComponents': 'تضمين المكونات',
-    'importExport.styleConfig': 'إعدادات النمط',
-    'importExport.mapTiles': 'بلاطات الخريطة',
-    'importExport.spritesIcons': 'الرموز والأيقونات',
-    'importExport.fontsGlyphs': 'الخطوط والحروف',
-    'importExport.preparingExport': 'جاري تجهيز التصدير...',
-    'importExport.exportComplete': 'اكتمل التصدير!',
-    'importExport.exportFailed': 'فشل التصدير. يرجى المحاولة مرة أخرى.',
-    'importExport.importRegion': 'استيراد المنطقة',
-    'importExport.selectFile': 'اختر ملف',
-    'importExport.fileFormatsHint': 'يدعم تنسيقات JSON و PMTiles و MBTiles',
-    'importExport.newRegionName': 'اسم المنطقة الجديد (اختياري)',
-    'importExport.newRegionNamePlaceholder': 'اتركه فارغاً لاستخدام الاسم الأصلي',
-    'importExport.overwriteIfExists': 'الكتابة فوق المنطقة الموجودة',
-    'importExport.preparingImport': 'جاري تجهيز الاستيراد...',
-    'importExport.importComplete': 'اكتمل الاستيراد!',
-    'importExport.importFailed': 'فشل الاستيراد. يرجى المحاولة مرة أخرى.',
-    'importExport.formatGuide': 'دليل التنسيقات',
-    'importExport.jsonDesc': 'بيانات كاملة، قابلة للقراءة، الأفضل للتطوير',
-    'importExport.pmtilesDesc': 'محسن للويب، خدمة فعالة، متوافق مع السحابة',
-    'importExport.mbtilesDesc': 'معيار الصناعة، قائم على SQLite، متعدد المنصات',
+    // MBTiles Modal - نافذة MBTiles
+    'mbtiles.title': 'استيراد / تصدير MBTiles',
+    'mbtiles.regionInfo': 'معلومات المنطقة',
+    'mbtiles.id': 'المعرف',
+    'mbtiles.name': 'الاسم',
+    'mbtiles.unnamed': 'بدون اسم',
+    'mbtiles.zoom': 'التكبير',
+    'mbtiles.created': 'تاريخ الإنشاء',
+    'mbtiles.exportTitle': 'التصدير كـ MBTiles',
+    'mbtiles.exportHint': 'احزم بلاطات هذه المنطقة داخل أرشيف MBTiles (SQLite) يمكن فتحه في QGIS و tippecanoe وأدوات أخرى.',
+    'mbtiles.exportButton': 'تنزيل ملف mbtiles.',
+    'mbtiles.preparingExport': 'جاري تجهيز التصدير...',
+    'mbtiles.exportComplete': 'اكتمل التصدير!',
+    'mbtiles.exportFailed': 'فشل التصدير. يرجى المحاولة مرة أخرى.',
+    'mbtiles.importTitle': 'الاستيراد من MBTiles',
+    'mbtiles.selectFile': 'اختر ملف mbtiles.',
+    'mbtiles.fileHint': 'تُدعم ملفات mbtiles. بتنسيق SQLite فقط.',
+    'mbtiles.newRegionName': 'اسم المنطقة الجديد (اختياري)',
+    'mbtiles.newRegionNamePlaceholder': 'اتركه فارغًا لاستخدام الاسم من الملف',
+    'mbtiles.overwriteIfExists': 'الكتابة فوق المنطقة إذا كان المعرف موجودًا',
+    'mbtiles.importButton': 'استيراد ملف mbtiles.',
+    'mbtiles.preparingImport': 'جاري تجهيز الاستيراد...',
+    'mbtiles.importComplete': 'اكتمل الاستيراد!',
+    'mbtiles.importFailed': 'فشل الاستيراد. يرجى المحاولة مرة أخرى.',
     // Active Downloads - التحميلات النشطة
     'download.activeCount': 'التحميلات النشطة ({{count}})',
     // Panel Manager additional strings - سلاسل إضافية للوحة
@@ -9983,49 +10135,42 @@ class ConfirmationModal {
 }
 
 /**
- * Import/Export Modal Component
- * Handles import/export operations for regions
- * Refactored to use modular Modal component for consistency
+ * MBTiles Import/Export Modal
+ *
+ * Focused modal for exchanging regions as binary SQLite MBTiles archives.
+ * Replaces the previous multi-format import/export modal.
  */
-const modalLogger = logger.scope('ImportExportModal');
-class ImportExportModal {
+const modalLogger = logger.scope('MBTilesModal');
+class MBTilesModal {
     modal;
     options;
     isExporting = false;
     isImporting = false;
-    // Form elements
-    exportFormatSelect;
-    includeStyleCheckbox;
-    includeTilesCheckbox;
-    includeSpritesCheckbox;
-    includeFontsCheckbox;
     exportProgressBar;
     exportProgressText;
+    exportProgressContainer;
     exportButton;
     importFileInput;
     importNameInput;
     importOverwriteCheckbox;
     importProgressBar;
     importProgressText;
+    importProgressContainer;
     importButton;
     constructor(options) {
         this.options = options;
     }
     show() {
         const modalConfig = {
-            title: t('importExport.regionTitle'),
+            title: t('mbtiles.title'),
             subtitle: this.options.region.name || this.options.region.id,
             size: 'md',
             closable: true,
             onClose: () => this.hide(),
         };
         this.modal = new Modal(modalConfig);
-        // Create content
-        const content = this.createContent();
-        this.modal.setContent(content);
-        // Create footer with close button
-        const footer = this.createFooter();
-        this.modal.setFooter(footer);
+        this.modal.setContent(this.createContent());
+        this.modal.setFooter(this.createFooter());
         this.modal.show();
         this.attachEventListeners();
         return this.modal.getElement();
@@ -10034,217 +10179,96 @@ class ImportExportModal {
         this.modal?.hide();
         this.options.onClose();
     }
+    destroy() {
+        this.modal?.destroy();
+    }
     createContent() {
         const content = document.createElement('div');
-        content.className = 'flex flex-col gap-6';
+        content.className = 'flex flex-col gap-6 py-2';
         if (i18n.isRTL()) {
             content.setAttribute('dir', 'rtl');
         }
-        // Region Info Card
-        const infoCard = this.createRegionInfoCard();
-        content.appendChild(infoCard);
-        // Export/Import Grid
-        const gridContainer = document.createElement('div');
-        gridContainer.className = 'grid grid-cols-1 gap-6';
-        // Export Section
-        const exportSection = this.createExportSection();
-        gridContainer.appendChild(exportSection);
-        // Import Section
-        const importSection = this.createImportSection();
-        gridContainer.appendChild(importSection);
-        content.appendChild(gridContainer);
-        // Format Guide
-        const formatGuide = this.createFormatGuide();
-        content.appendChild(formatGuide);
+        content.appendChild(this.createRegionInfoLine());
+        content.appendChild(this.createExportSection());
+        content.appendChild(this.createImportSection());
         return content;
     }
-    createRegionInfoCard() {
-        const card = document.createElement('div');
-        card.className = 'p-5 glass-input rounded-xl border-0 bg-gray-50/50 dark:bg-gray-800/50';
-        card.innerHTML = `
-      <h4 class="text-sm font-bold uppercase tracking-wider text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-        ${icons.mapPin({ size: 16, color: 'currentColor' })}
-        ${t('importExport.regionInfo')}
-      </h4>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-        <div class="p-3 rounded-lg bg-white/40 dark:bg-black/20">
-          <span class="font-medium text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">${t('importExport.id')}</span>
-          <div class="text-gray-900 dark:text-white font-mono text-xs break-all mt-1">${escapeHtml$1(this.options.region.id)}</div>
-        </div>
-        <div class="p-3 rounded-lg bg-white/40 dark:bg-black/20">
-          <span class="font-medium text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">${t('importExport.name')}</span>
-          <div class="text-gray-900 dark:text-white font-medium mt-1">${escapeHtml$1(this.options.region.name || t('importExport.unnamed'))}</div>
-        </div>
-        <div class="p-3 rounded-lg bg-white/40 dark:bg-black/20">
-          <span class="font-medium text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">${t('importExport.zoom')}</span>
-          <div class="text-gray-900 dark:text-white font-medium mt-1">Z${escapeHtml$1(this.options.region.minZoom)}-${escapeHtml$1(this.options.region.maxZoom)}</div>
-        </div>
-        <div class="p-3 rounded-lg bg-white/40 dark:bg-black/20">
-          <span class="font-medium text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">${t('importExport.created')}</span>
-          <div class="text-gray-900 dark:text-white font-medium mt-1">${new Date(this.options.region.created).toLocaleDateString()}</div>
-        </div>
-      </div>
+    createRegionInfoLine() {
+        const { region } = this.options;
+        const line = document.createElement('div');
+        line.className =
+            'flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400';
+        line.innerHTML = `
+      <span class="flex items-center gap-1">
+        ${icons.mapPin({ size: 12, color: 'currentColor' })}
+        <span class="font-mono">${escapeHtml$1(region.id)}</span>
+      </span>
+      <span>Z${escapeHtml$1(region.minZoom)}-${escapeHtml$1(region.maxZoom)}</span>
+      <span>${new Date(region.created).toLocaleDateString()}</span>
     `;
-        return card;
+        return line;
     }
     createExportSection() {
-        const section = document.createElement('div');
-        section.className =
-            'glass-input p-6 rounded-xl border-0 bg-white/40 dark:bg-gray-800/40 relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300';
-        // Gradient accent
-        const accent = document.createElement('div');
-        accent.className = `absolute top-0 ${i18n.isRTL() ? 'right-0' : 'left-0'} w-1 h-full bg-blue-500 opacity-50`;
-        section.appendChild(accent);
-        const header = document.createElement('h3');
-        header.className =
-            'text-lg font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-2.5';
-        header.innerHTML = `
-      <div class="p-2 bg-blue-500/10 rounded-lg text-blue-600 dark:text-blue-400">
-        ${icons.upload({ size: 20, color: 'currentColor' })}
-      </div>
-      ${t('importExport.exportRegion')}
-    `;
-        section.appendChild(header);
-        const formContainer = document.createElement('div');
-        formContainer.className = 'space-y-5';
-        // Format Selection
-        const formatGroup = document.createElement('div');
-        const formatLabel = document.createElement('label');
-        formatLabel.className = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2';
-        formatLabel.textContent = t('importExport.exportFormat');
-        this.exportFormatSelect = document.createElement('select');
-        this.exportFormatSelect.className =
-            'w-full px-4 py-3 rounded-xl text-sm glass-input text-gray-900 dark:text-white bg-white/50 dark:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all';
-        this.exportFormatSelect.innerHTML = `
-      <option value="json">${t('importExport.formatJson')}</option>
-      <option value="pmtiles">${t('importExport.formatPmtiles')}</option>
-      <option value="mbtiles">${t('importExport.formatMbtiles')}</option>
-    `;
-        const formatHint = document.createElement('p');
-        formatHint.className = 'mt-2 text-xs text-gray-500 dark:text-gray-400 ml-1';
-        formatHint.textContent = t('importExport.formatHint');
-        formatGroup.appendChild(formatLabel);
-        formatGroup.appendChild(this.exportFormatSelect);
-        formatGroup.appendChild(formatHint);
-        formContainer.appendChild(formatGroup);
-        // Export Options
-        const optionsGroup = document.createElement('div');
-        const optionsLabel = document.createElement('label');
-        optionsLabel.className = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3';
-        optionsLabel.textContent = t('importExport.includeComponents');
-        const checkboxContainer = document.createElement('div');
-        checkboxContainer.className = 'grid grid-cols-1 sm:grid-cols-2 gap-3';
-        const createCheckbox = (text, checked = true) => {
-            const label = document.createElement('label');
-            label.className =
-                'flex items-center gap-3 p-3 rounded-lg bg-gray-50/50 dark:bg-gray-800/50 cursor-pointer hover:bg-gray-100/50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer';
-            const input = document.createElement('input');
-            input.type = 'checkbox';
-            input.checked = checked;
-            input.className =
-                'w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 focus:ring-2 dark:bg-gray-700';
-            const span = document.createElement('span');
-            span.className = 'text-sm text-gray-700 dark:text-gray-300 font-medium';
-            span.textContent = text;
-            label.appendChild(input);
-            label.appendChild(span);
-            return { label, input };
-        };
-        const styleCheck = createCheckbox(t('importExport.styleConfig'));
-        this.includeStyleCheckbox = styleCheck.input;
-        checkboxContainer.appendChild(styleCheck.label);
-        const tilesCheck = createCheckbox(t('importExport.mapTiles'));
-        this.includeTilesCheckbox = tilesCheck.input;
-        checkboxContainer.appendChild(tilesCheck.label);
-        const spritesCheck = createCheckbox(t('importExport.spritesIcons'));
-        this.includeSpritesCheckbox = spritesCheck.input;
-        checkboxContainer.appendChild(spritesCheck.label);
-        const fontsCheck = createCheckbox(t('importExport.fontsGlyphs'));
-        this.includeFontsCheckbox = fontsCheck.input;
-        checkboxContainer.appendChild(fontsCheck.label);
-        optionsGroup.appendChild(optionsLabel);
-        optionsGroup.appendChild(checkboxContainer);
-        formContainer.appendChild(optionsGroup);
-        // Export Progress (hidden by default)
-        const progressContainer = document.createElement('div');
-        progressContainer.className = 'hidden';
-        const progressBarContainer = document.createElement('div');
-        progressBarContainer.className =
-            'bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2 overflow-hidden';
-        this.exportProgressBar = document.createElement('div');
-        this.exportProgressBar.className = 'bg-blue-600 h-2 rounded-full transition-all duration-300';
-        this.exportProgressBar.style.width = '0%';
-        progressBarContainer.appendChild(this.exportProgressBar);
-        this.exportProgressText = document.createElement('p');
-        this.exportProgressText.className = 'text-sm text-gray-600 dark:text-gray-400';
-        this.exportProgressText.textContent = t('importExport.preparingExport');
-        progressContainer.appendChild(progressBarContainer);
-        progressContainer.appendChild(this.exportProgressText);
-        formContainer.appendChild(progressContainer);
-        // Export Button
-        const exportButton = new Button({
-            text: t('importExport.exportRegion'),
+        const section = this.createSection(t('mbtiles.exportTitle'), 'blue', icons.download({ size: 20, color: 'currentColor' }));
+        const form = document.createElement('div');
+        form.className = 'space-y-5';
+        const hint = document.createElement('p');
+        hint.className = 'text-sm text-gray-600 dark:text-gray-400';
+        hint.textContent = t('mbtiles.exportHint');
+        form.appendChild(hint);
+        // Progress (hidden by default)
+        const progress = this.createProgressBlock('blue', t('mbtiles.preparingExport'));
+        this.exportProgressContainer = progress.container;
+        this.exportProgressBar = progress.bar;
+        this.exportProgressText = progress.text;
+        form.appendChild(progress.container);
+        const exportBtn = new Button({
+            text: t('mbtiles.exportButton'),
             variant: 'primary',
             icon: icons.download({ size: 16, color: 'white' }),
-            className: 'w-full py-2.5 text-base shadow-lg shadow-blue-500/20', // Premium button styles
+            className: 'w-full py-2.5 text-base shadow-lg shadow-blue-500/20',
             onClick: () => this.handleExport(),
         });
-        this.exportButton = exportButton.getElement();
-        formContainer.appendChild(this.exportButton);
-        section.appendChild(formContainer);
+        this.exportButton = exportBtn.getElement();
+        form.appendChild(this.exportButton);
+        section.appendChild(form);
         return section;
     }
     createImportSection() {
-        const section = document.createElement('div');
-        section.className =
-            'glass-input p-6 rounded-xl border-0 bg-white/40 dark:bg-gray-800/40 relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300';
-        // Gradient accent
-        const accent = document.createElement('div');
-        accent.className = `absolute top-0 ${i18n.isRTL() ? 'right-0' : 'left-0'} w-1 h-full bg-green-500 opacity-50`;
-        section.appendChild(accent);
-        const header = document.createElement('h3');
-        header.className =
-            'text-lg font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-2.5';
-        header.innerHTML = `
-      <div class="p-2 bg-green-500/10 rounded-lg text-green-600 dark:text-green-400">
-        ${icons.upload({ size: 20, color: 'currentColor' })}
-      </div>
-      ${t('importExport.importRegion')}
-    `;
-        section.appendChild(header);
-        const formContainer = document.createElement('div');
-        formContainer.className = 'space-y-5';
-        // File Selection
+        const section = this.createSection(t('mbtiles.importTitle'), 'green', icons.upload({ size: 20, color: 'currentColor' }));
+        const form = document.createElement('div');
+        form.className = 'space-y-5';
+        // File input
         const fileGroup = document.createElement('div');
         const fileLabel = document.createElement('label');
         fileLabel.className = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2';
-        fileLabel.textContent = t('importExport.selectFile');
+        fileLabel.textContent = t('mbtiles.selectFile');
         this.importFileInput = document.createElement('input');
         this.importFileInput.type = 'file';
-        this.importFileInput.accept = '.json,.pmtiles,.mbtiles';
+        this.importFileInput.accept = '.mbtiles,application/vnd.sqlite3,application/x-sqlite3';
         this.importFileInput.className =
             'w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 dark:file:bg-primary-900/20 dark:file:text-primary-400 glass-input transition-all cursor-pointer';
         const fileHint = document.createElement('p');
         fileHint.className = 'mt-2 text-xs text-gray-500 dark:text-gray-400 ml-1';
-        fileHint.textContent = t('importExport.fileFormatsHint');
+        fileHint.textContent = t('mbtiles.fileHint');
         fileGroup.appendChild(fileLabel);
         fileGroup.appendChild(this.importFileInput);
         fileGroup.appendChild(fileHint);
-        formContainer.appendChild(fileGroup);
-        // New Name
+        form.appendChild(fileGroup);
+        // New region name
         const nameGroup = document.createElement('div');
         const nameLabel = document.createElement('label');
         nameLabel.className = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2';
-        nameLabel.textContent = t('importExport.newRegionName');
+        nameLabel.textContent = t('mbtiles.newRegionName');
         this.importNameInput = document.createElement('input');
         this.importNameInput.type = 'text';
-        this.importNameInput.placeholder = t('importExport.newRegionNamePlaceholder');
+        this.importNameInput.placeholder = t('mbtiles.newRegionNamePlaceholder');
         this.importNameInput.className =
             'w-full px-4 py-3 rounded-xl text-sm glass-input text-gray-900 dark:text-white bg-white/50 dark:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-green-500/50 transition-all';
         nameGroup.appendChild(nameLabel);
         nameGroup.appendChild(this.importNameInput);
-        formContainer.appendChild(nameGroup);
-        // Import Options
+        form.appendChild(nameGroup);
+        // Overwrite toggle
         const overwriteLabel = document.createElement('label');
         overwriteLabel.className =
             'flex items-center gap-3 p-3 rounded-lg bg-gray-50/50 dark:bg-gray-800/50 cursor-pointer hover:bg-gray-100/50 dark:hover:bg-gray-700/50 transition-colors';
@@ -10254,79 +10278,85 @@ class ImportExportModal {
             'w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 focus:ring-2 dark:bg-gray-700';
         const overwriteSpan = document.createElement('span');
         overwriteSpan.className = 'text-sm text-gray-700 dark:text-gray-300 font-medium';
-        overwriteSpan.textContent = t('importExport.overwriteIfExists');
+        overwriteSpan.textContent = t('mbtiles.overwriteIfExists');
         overwriteLabel.appendChild(this.importOverwriteCheckbox);
         overwriteLabel.appendChild(overwriteSpan);
-        formContainer.appendChild(overwriteLabel);
-        // Import Progress (hidden by default)
-        const progressContainer = document.createElement('div');
-        progressContainer.className = 'hidden';
-        const progressBarContainer = document.createElement('div');
-        progressBarContainer.className =
-            'bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2 overflow-hidden';
-        this.importProgressBar = document.createElement('div');
-        this.importProgressBar.className = 'bg-green-600 h-2 rounded-full transition-all duration-300';
-        this.importProgressBar.style.width = '0%';
-        progressBarContainer.appendChild(this.importProgressBar);
-        this.importProgressText = document.createElement('p');
-        this.importProgressText.className = 'text-sm text-gray-600 dark:text-gray-400';
-        this.importProgressText.textContent = t('importExport.preparingImport');
-        progressContainer.appendChild(progressBarContainer);
-        progressContainer.appendChild(this.importProgressText);
-        formContainer.appendChild(progressContainer);
-        // Import Button
-        const importButton = new Button({
-            text: t('importExport.importRegion'),
-            variant: 'success', // Assuming 'success' variant exists in Button component, if not might need style adjustment. Assuming it works based on previous code.
+        form.appendChild(overwriteLabel);
+        // Progress
+        const progress = this.createProgressBlock('green', t('mbtiles.preparingImport'));
+        this.importProgressContainer = progress.container;
+        this.importProgressBar = progress.bar;
+        this.importProgressText = progress.text;
+        form.appendChild(progress.container);
+        // Import button (disabled until a file is selected)
+        const importBtn = new Button({
+            text: t('mbtiles.importButton'),
+            variant: 'success',
             icon: icons.upload({ size: 16, color: 'white' }),
             className: 'w-full py-2.5 text-base shadow-lg shadow-green-500/20',
             disabled: true,
             onClick: () => this.handleImport(),
         });
-        this.importButton = importButton.getElement();
-        formContainer.appendChild(this.importButton);
-        section.appendChild(formContainer);
+        this.importButton = importBtn.getElement();
+        form.appendChild(this.importButton);
+        section.appendChild(form);
         return section;
     }
-    createFormatGuide() {
-        const guide = document.createElement('div');
-        guide.className = 'p-5 mt-4 glass-input rounded-xl border-0 bg-blue-50/40 dark:bg-blue-900/20';
-        guide.innerHTML = `
-      <h4 class="text-sm font-bold uppercase tracking-wider text-blue-900 dark:text-blue-300 mb-3 flex items-center gap-2">
-        ${icons.infoCircle({ size: 16, color: 'currentColor' })}
-        ${t('importExport.formatGuide')}
-      </h4>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
-        <div class="p-3 rounded-lg bg-white/50 dark:bg-black/20">
-          <div class="font-bold text-base text-blue-800 dark:text-blue-300 mb-1">JSON</div>
-          <div class="text-blue-700 dark:text-blue-400 leading-relaxed">${t('importExport.jsonDesc')}</div>
-        </div>
-        <div class="p-3 rounded-lg bg-white/50 dark:bg-black/20">
-          <div class="font-bold text-base text-blue-800 dark:text-blue-300 mb-1">PMTiles</div>
-          <div class="text-blue-700 dark:text-blue-400 leading-relaxed">${t('importExport.pmtilesDesc')}</div>
-        </div>
-        <div class="p-3 rounded-lg bg-white/50 dark:bg-black/20">
-          <div class="font-bold text-base text-blue-800 dark:text-blue-300 mb-1">MBTiles</div>
-          <div class="text-blue-700 dark:text-blue-400 leading-relaxed">${t('importExport.mbtilesDesc')}</div>
-        </div>
+    createSection(title, accentColor, iconHtml) {
+        const section = document.createElement('div');
+        section.className =
+            'glass-input p-6 rounded-xl border-0 bg-white/40 dark:bg-gray-800/40 relative overflow-hidden';
+        const accent = document.createElement('div');
+        accent.className = `absolute top-0 ${i18n.isRTL() ? 'right-0' : 'left-0'} w-1 h-full bg-${accentColor}-500 opacity-50`;
+        section.appendChild(accent);
+        const header = document.createElement('h3');
+        header.className =
+            'text-lg font-bold text-gray-900 dark:text-white mb-5 flex items-center gap-2.5';
+        header.innerHTML = `
+      <div class="p-2 bg-${accentColor}-500/10 rounded-lg text-${accentColor}-600 dark:text-${accentColor}-400">
+        ${iconHtml}
       </div>
+      ${title}
     `;
-        return guide;
+        section.appendChild(header);
+        return section;
+    }
+    createProgressBlock(accentColor, initialText) {
+        const container = document.createElement('div');
+        container.className = 'hidden';
+        const barWrap = document.createElement('div');
+        barWrap.className = 'bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2 overflow-hidden';
+        const bar = document.createElement('div');
+        bar.className = `bg-${accentColor}-600 h-2 rounded-full transition-all duration-300`;
+        bar.style.width = '0%';
+        barWrap.appendChild(bar);
+        const text = document.createElement('p');
+        text.className = 'text-sm text-gray-600 dark:text-gray-400';
+        text.textContent = initialText;
+        container.appendChild(barWrap);
+        container.appendChild(text);
+        return { container, bar, text };
+    }
+    createFooter() {
+        const footer = document.createElement('div');
+        footer.className = 'flex gap-3 justify-end';
+        if (i18n.isRTL()) {
+            footer.setAttribute('dir', 'rtl');
+        }
+        const close = new Button({
+            text: t('app.close'),
+            variant: 'secondary',
+            onClick: () => this.hide(),
+        });
+        footer.appendChild(close.getElement());
+        return footer;
     }
     attachEventListeners() {
-        // Enable import button when file is selected
         if (this.importFileInput && this.importButton) {
             this.importFileInput.addEventListener('change', () => {
-                if (this.importFileInput?.files && this.importFileInput.files.length > 0) {
-                    if (this.importButton) {
-                        this.importButton.disabled = false;
-                    }
-                }
-                else {
-                    if (this.importButton) {
-                        this.importButton.disabled = true;
-                    }
-                }
+                const hasFile = !!(this.importFileInput?.files && this.importFileInput.files.length > 0);
+                if (this.importButton)
+                    this.importButton.disabled = !hasFile;
             });
         }
     }
@@ -10336,34 +10366,27 @@ class ImportExportModal {
         this.isExporting = true;
         if (this.exportButton)
             this.exportButton.disabled = true;
+        this.exportProgressContainer?.classList.remove('hidden');
         try {
-            const format = this.exportFormatSelect?.value;
-            const options = {
-                includeStyle: this.includeStyleCheckbox?.checked ?? true,
-                includeTiles: this.includeTilesCheckbox?.checked ?? true,
-                includeSprites: this.includeSpritesCheckbox?.checked ?? true,
-                includeFonts: this.includeFontsCheckbox?.checked ?? true,
-            };
-            // Show progress
-            const progressContainer = this.exportProgressBar?.parentElement?.parentElement;
-            if (progressContainer) {
-                progressContainer.classList.remove('hidden');
-            }
-            const result = await this.options.exportRegion(this.options.region.id, format, options);
-            if (this.exportProgressBar) {
+            const result = await this.options.exportRegion(this.options.region.id, {
+                onProgress: p => {
+                    if (this.exportProgressBar)
+                        this.exportProgressBar.style.width = `${p.percentage}%`;
+                    if (this.exportProgressText)
+                        this.exportProgressText.textContent = p.message;
+                },
+            });
+            if (this.exportProgressBar)
                 this.exportProgressBar.style.width = '100%';
-            }
-            if (this.exportProgressText) {
-                this.exportProgressText.textContent = t('importExport.exportComplete');
-            }
+            if (this.exportProgressText)
+                this.exportProgressText.textContent = t('mbtiles.exportComplete');
             this.options.onExport?.(result);
-            // Hide modal after short delay
-            setTimeout(() => this.hide(), 1500);
+            setTimeout(() => this.hide(), 1200);
         }
         catch (error) {
             modalLogger.error('Export error:', error instanceof Error ? error.message : String(error));
             if (this.exportProgressText) {
-                this.exportProgressText.textContent = t('importExport.exportFailed');
+                this.exportProgressText.textContent = t('mbtiles.exportFailed');
                 this.exportProgressText.classList.add('text-red-600', 'dark:text-red-400');
             }
         }
@@ -10374,45 +10397,47 @@ class ImportExportModal {
         }
     }
     async handleImport() {
-        if (this.isImporting || !this.options.importRegion || !this.importFileInput?.files?.[0])
+        if (this.isImporting || !this.options.importRegion)
+            return;
+        const file = this.importFileInput?.files?.[0];
+        if (!file)
             return;
         this.isImporting = true;
         if (this.importButton)
             this.importButton.disabled = true;
+        this.importProgressContainer?.classList.remove('hidden');
         try {
-            const file = this.importFileInput.files[0];
-            const overwrite = this.importOverwriteCheckbox?.checked ?? false;
-            // Show progress
-            const progressContainer = this.importProgressBar?.parentElement?.parentElement;
-            if (progressContainer) {
-                progressContainer.classList.remove('hidden');
-            }
-            // Determine format from file extension
-            const format = file.name.endsWith('.pmtiles')
-                ? 'pmtiles'
-                : file.name.endsWith('.mbtiles')
-                    ? 'mbtiles'
-                    : 'json';
             const data = {
                 file,
-                format,
-                overwrite,
+                format: 'mbtiles',
+                overwrite: this.importOverwriteCheckbox?.checked ?? false,
+                newRegionName: this.importNameInput?.value.trim() || undefined,
+                onProgress: p => {
+                    if (this.importProgressBar)
+                        this.importProgressBar.style.width = `${p.percentage}%`;
+                    if (this.importProgressText)
+                        this.importProgressText.textContent = p.message;
+                },
             };
             const result = await this.options.importRegion(data);
-            if (this.importProgressBar) {
+            if (this.importProgressBar)
                 this.importProgressBar.style.width = '100%';
-            }
             if (this.importProgressText) {
-                this.importProgressText.textContent = t('importExport.importComplete');
+                this.importProgressText.textContent = result.success
+                    ? t('mbtiles.importComplete')
+                    : result.message;
+                if (!result.success) {
+                    this.importProgressText.classList.add('text-red-600', 'dark:text-red-400');
+                }
             }
             this.options.onImport?.(result);
-            // Hide modal after short delay
-            setTimeout(() => this.hide(), 1500);
+            if (result.success)
+                setTimeout(() => this.hide(), 1200);
         }
         catch (error) {
             modalLogger.error('Import error:', error instanceof Error ? error.message : String(error));
             if (this.importProgressText) {
-                this.importProgressText.textContent = t('importExport.importFailed');
+                this.importProgressText.textContent = t('mbtiles.importFailed');
                 this.importProgressText.classList.add('text-red-600', 'dark:text-red-400');
             }
         }
@@ -10422,23 +10447,6 @@ class ImportExportModal {
                 this.importButton.disabled = false;
         }
     }
-    createFooter() {
-        const footer = document.createElement('div');
-        footer.className = 'flex gap-3 justify-end';
-        if (i18n.isRTL()) {
-            footer.setAttribute('dir', 'rtl');
-        }
-        const closeButton = new Button({
-            text: t('app.close'),
-            variant: 'secondary',
-            onClick: () => this.hide(),
-        });
-        footer.appendChild(closeButton.getElement());
-        return footer;
-    }
-    destroy() {
-        this.modal?.destroy();
-    }
 }
 
 /**
@@ -11152,9 +11160,9 @@ class PanelRenderer extends BaseComponent {
             <button class="region-action-btn p-1.5 rounded-md cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400 transition-colors duration-150" data-action="redownload-region" data-region-id="${escapeHtml$1(region.id)}" title="${t('actions.redownload')}">
               ${icons.download({ size: 14, color: 'currentColor' })}
             </button>
-            <!-- <button class="region-action-btn p-1.5 rounded-md cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/50 text-purple-600 dark:text-purple-400 transition-colors duration-150" data-action="import-export" data-region-id="${escapeHtml$1(region.id)}" title="${t('actions.importExport')}">
+            <button class="region-action-btn p-1.5 rounded-md cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/50 text-purple-600 dark:text-purple-400 transition-colors duration-150" data-action="import-export" data-region-id="${escapeHtml$1(region.id)}" title="${t('actions.importExport')}">
               ${icons.deviceFloppy({ size: 14, color: 'currentColor' })}
-            </button> -->
+            </button>
             <button class="region-action-btn p-1.5 rounded-md cursor-pointer hover:bg-red-100 dark:hover:bg-red-900/50 text-red-600 dark:text-red-400 transition-colors duration-150" data-action="delete-region" data-region-id="${escapeHtml$1(region.id)}" title="${t('app.delete')}">
               ${icons.trash({ size: 14, color: 'currentColor' })}
             </button>
@@ -11416,7 +11424,7 @@ class PanelRenderer extends BaseComponent {
         }
     }
     /**
-     * Handle import/export functionality
+     * Show the MBTiles import/export modal for a region.
      */
     async handleImportExport(regionId, _regionData) {
         try {
@@ -11424,44 +11432,26 @@ class PanelRenderer extends BaseComponent {
             const region = regions.find((r) => r.id === regionId);
             if (!region)
                 return;
-            const importExportModal = new ImportExportModal({
+            const mbtilesModal = new MBTilesModal({
                 region,
-                onClose: () => {
-                    this.modalManager.close();
-                },
+                onClose: () => this.modalManager.close(),
                 onExport: result => {
-                    panelLogger.debug('Export completed:', result);
-                    // Handle export result - could show success message
+                    panelLogger.debug('MBTiles export completed:', result);
                     this.offlineManager.downloadExportedRegion(result);
                 },
                 onImport: result => {
-                    panelLogger.debug('Import completed:', result);
-                    // Refresh the panel to show updated regions
-                    this.refresh();
-                },
-                exportRegion: async (regionId, format, options) => {
-                    // Delegate to offline manager's export functionality
-                    switch (format) {
-                        case 'json':
-                            return await this.offlineManager.exportRegionAsJSON(regionId, options);
-                        case 'pmtiles':
-                            return await this.offlineManager.exportRegionAsPMTiles(regionId, options);
-                        case 'mbtiles':
-                            return await this.offlineManager.exportRegionAsMBTiles(regionId, options);
-                        default:
-                            throw new Error(`Unsupported export format: ${format}`);
-                    }
-                },
-                importRegion: async (data) => {
-                    // Delegate to offline manager's import functionality
-                    return await this.offlineManager.importRegion(data);
+                    panelLogger.debug('MBTiles import completed:', result);
+                    if (result.success)
+                        this.refresh();
                 },
+                exportRegion: (id, options) => this.offlineManager.exportRegionAsMBTiles(id, options),
+                importRegion: data => this.offlineManager.importRegion(data),
             });
-            const modal = importExportModal.show();
+            const modal = mbtilesModal.show();
             this.modalManager.show(modal);
         }
         catch (error) {
-            panelLogger.error('Error showing import/export modal:', error);
+            panelLogger.error('Error showing MBTiles modal:', error);
         }
     }
     /**
@@ -11860,6 +11850,9 @@ class PanelRenderer extends BaseComponent {
                 delete patchedStyle.imports;
                 panelLogger.debug('Stripped imports from offline style (already flattened)');
             }
+            // Scrub indoor-only expressions for pre-0.8.1 stored styles that were
+            // downloaded before resolveImports learned to rewrite them.
+            sanitizeIndoorExpressions(patchedStyle);
             // Enforce maxzoom for all tile sources to prevent requesting non-existent tiles
             // Find the maximum zoom level from all regions using this style
             let maxZoom = 14; // Default fallback
@@ -12601,9 +12594,7 @@ class RegionFormModal {
     detectProviderFromUrl() {
         const styleUrl = this.styleUrlInput?.value || '';
         // Simple detection logic
-        if (styleUrl.startsWith('mapbox://') ||
-            styleUrl.includes('mapbox.com') ||
-            styleUrl.includes('api.mapbox.com')) {
+        if (styleUrl.startsWith('mapbox://') || isMapboxHost(styleUrl)) {
             if (this.providerSelect)
                 this.providerSelect.value = 'mapbox';
             this.toggleAccessTokenVisibility(true);
@@ -13367,39 +13358,39 @@ class OfflineManagerControl {
             }
             // Development proxy for CORS issues (when running on localhost)
             if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
-                // Proxy Carto tile requests (tiles and TileJSON)
-                const isTileRequest = /\/\d+\/\d+\/\d+\.(pbf|mvt|png|jpg|jpeg|webp)/.test(url);
-                const isTileJsonRequest = url.includes('.json') && url.includes('basemaps.cartocdn.com');
-                if (isTileRequest && url.includes('tiles-a.basemaps.cartocdn.com')) {
-                    const proxyUrl = url.replace('https://tiles-a.basemaps.cartocdn.com', '/tiles/carto-a');
-                    return originalFetch(proxyUrl, init);
-                }
-                if (isTileRequest && url.includes('tiles-b.basemaps.cartocdn.com')) {
-                    const proxyUrl = url.replace('https://tiles-b.basemaps.cartocdn.com', '/tiles/carto-b');
-                    return originalFetch(proxyUrl, init);
+                let parsed = null;
+                try {
+                    parsed = new URL(url, location.origin);
                 }
-                if (isTileRequest && url.includes('tiles-c.basemaps.cartocdn.com')) {
-                    const proxyUrl = url.replace('https://tiles-c.basemaps.cartocdn.com', '/tiles/carto-c');
-                    return originalFetch(proxyUrl, init);
+                catch {
+                    parsed = null;
                 }
-                if (isTileRequest && url.includes('tiles-d.basemaps.cartocdn.com')) {
-                    const proxyUrl = url.replace('https://tiles-d.basemaps.cartocdn.com', '/tiles/carto-d');
-                    return originalFetch(proxyUrl, init);
+                const hostname = parsed?.hostname ?? '';
+                const pathAndQuery = parsed ? parsed.pathname + parsed.search : '';
+                // Proxy Carto tile requests (tiles and TileJSON)
+                const isTileRequest = /\/\d+\/\d+\/\d+\.(pbf|mvt|png|jpg|jpeg|webp)/.test(parsed?.pathname ?? '');
+                const isTileJsonRequest = (parsed?.pathname.endsWith('.json') ?? false) &&
+                    (hostname === 'basemaps.cartocdn.com' || hostname.endsWith('.basemaps.cartocdn.com'));
+                const cartoSubdomainProxy = {
+                    'tiles-a.basemaps.cartocdn.com': '/tiles/carto-a',
+                    'tiles-b.basemaps.cartocdn.com': '/tiles/carto-b',
+                    'tiles-c.basemaps.cartocdn.com': '/tiles/carto-c',
+                    'tiles-d.basemaps.cartocdn.com': '/tiles/carto-d',
+                };
+                if (isTileRequest && cartoSubdomainProxy[hostname]) {
+                    return originalFetch(cartoSubdomainProxy[hostname] + pathAndQuery, init);
                 }
                 // Proxy TileJSON requests from tiles.basemaps.cartocdn.com
-                if (isTileJsonRequest && url.includes('tiles.basemaps.cartocdn.com')) {
-                    const proxyUrl = url.replace('https://tiles.basemaps.cartocdn.com', '/carto-api');
-                    return originalFetch(proxyUrl, init);
+                if (isTileJsonRequest && hostname === 'tiles.basemaps.cartocdn.com') {
+                    return originalFetch('/carto-api' + pathAndQuery, init);
                 }
                 // Fallback for old format (tiles without subdomain)
-                if (isTileRequest && url.includes('tiles.basemaps.cartocdn.com')) {
-                    const proxyUrl = url.replace('https://tiles.basemaps.cartocdn.com', '/tiles/carto-a');
-                    return originalFetch(proxyUrl, init);
+                if (isTileRequest && hostname === 'tiles.basemaps.cartocdn.com') {
+                    return originalFetch('/tiles/carto-a' + pathAndQuery, init);
                 }
                 // Proxy OpenStreetMap tile requests
-                if (url.includes('tile.openstreetmap.org')) {
-                    const proxyUrl = url.replace('https://tile.openstreetmap.org', '/tiles/osm');
-                    return originalFetch(proxyUrl, init);
+                if (hostname === 'tile.openstreetmap.org') {
+                    return originalFetch('/tiles/osm' + pathAndQuery, init);
                 }
             }
             return originalFetch(input, init);
@@ -13832,6 +13823,9 @@ class OfflineManagerControl {
             if (patchedStyle.imports) {
                 delete patchedStyle.imports;
             }
+            // Scrub indoor-only expressions for pre-0.8.1 stored styles that were
+            // downloaded before resolveImports learned to rewrite them.
+            sanitizeIndoorExpressions(patchedStyle);
             // If using Service Worker (Mapbox GL JS), convert idb:// to /__offline__/ URLs
             if (this.useServiceWorker) {
                 if (this.swReadyPromise) {
@@ -14025,6 +14019,7 @@ exports.cleanupService = cleanupService;
 exports.clearAllCaches = clearAllCaches;
 exports.configureLogger = configureLogger;
 exports.configureProxy = configureProxy;
+exports.configureSqlJs = configureSqlJs;
 exports.convertStyleForServiceWorker = convertStyleForServiceWorker;
 exports.countCompressedTiles = countCompressedTiles;
 exports.createProgressTracker = createProgressTracker;
@@ -14047,6 +14042,7 @@ exports.escapeHtml = escapeHtml$1;
 exports.extractAccessToken = extractAccessToken;
 exports.extractAllFontNames = extractAllFontNames;
 exports.extractFontNamesFromTextField = extractFontNamesFromTextField;
+exports.extractTileExtensionFromUrl = extractTileExtensionFromUrl;
 exports.fetchResourceWithRetry = fetchResourceWithRetry;
 exports.fetchWithRetry = fetchWithRetry;
 exports.fontService = fontService;
@@ -14064,15 +14060,19 @@ exports.getModelStats = getModelStats;
 exports.getRegionAnalytics = getRegionAnalytics;
 exports.getSpriteAnalytics = getSpriteAnalytics;
 exports.getSpriteStats = getSpriteStats;
+exports.getSqlJs = getSqlJs;
 exports.getStyleStats = getStyleStats;
 exports.getTileAnalytics = getTileAnalytics;
 exports.getTileStats = getTileStats;
+exports.getUrlHostname = getUrlHostname;
 exports.getUserErrorMessage = getUserErrorMessage;
 exports.glyphService = glyphService;
 exports.hasImports = hasImports;
+exports.hostMatches = hostMatches;
 exports.i18n = i18n;
 exports.icons = icons;
 exports.idbFetchHandler = idbFetchHandler;
+exports.isMapboxHost = isMapboxHost;
 exports.isMapboxProtocol = isMapboxProtocol;
 exports.isStyleDownloaded = isStyleDownloaded;
 exports.loadAllStoredRegions = loadAllStoredRegions;
@@ -14098,6 +14098,7 @@ exports.resolveMapboxUrl = resolveMapboxUrl;
 exports.resourceKeyBelongsToStyle = resourceKeyBelongsToStyle;
 exports.rewriteMapboxCdnTileUrl = rewriteMapboxCdnTileUrl;
 exports.safeExecute = safeExecute;
+exports.sanitizeIndoorExpressions = sanitizeIndoorExpressions;
 exports.setupAutoCleanup = setupAutoCleanup;
 exports.spriteService = spriteService;
 exports.stopAutoCleanup = stopAutoCleanup;