map-gl-offline 0.7.0 → 0.8.2

package/dist/index.umd.js

@@ -1184,6 +1184,22 @@
         }
         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
      */
@@ -1191,15 +1207,210 @@
         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');
@@ -1256,16 +1467,11 @@
         }
         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
@@ -1277,36 +1483,6 @@
             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)
@@ -1401,7 +1577,7 @@
                         // 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)
@@ -1416,7 +1592,7 @@
                             }
                             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);
@@ -1458,7 +1634,7 @@
                                     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);
@@ -1478,46 +1654,19 @@
                 }
                 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' },
                                 });
                             }
                         }
@@ -1527,33 +1676,11 @@
                 }
                 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}`);
@@ -1563,7 +1690,7 @@
                             });
                         }
                     }
-                    idbLogger.warn(`Sprite not found, tried keys: ${spriteCandidateKeys.join(', ')}`);
+                    idbLogger.warn(`Sprite not found, tried keys: ${candidates.join(', ')}`);
                     break;
                 }
                 case 'font': {
@@ -1579,18 +1706,12 @@
                     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);
@@ -1607,9 +1728,9 @@
                 }
                 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);
@@ -1617,41 +1738,23 @@
                             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}`);
@@ -1675,6 +1778,37 @@
     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
      *
@@ -1748,9 +1882,7 @@
      */
     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') ||
@@ -1769,7 +1901,7 @@
             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';
                 }
             }
@@ -1861,7 +1993,7 @@
                     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;
@@ -1876,7 +2008,7 @@
                 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);
                 }
             }
@@ -1887,7 +2019,7 @@
                         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) };
                         }
                     }
@@ -1900,7 +2032,7 @@
             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);
             }
         }
@@ -1940,13 +2072,20 @@
             // 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');
@@ -1980,14 +2119,15 @@
             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'}:`, {
@@ -2865,10 +3005,8 @@
                     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);
                 }
             }
@@ -2906,8 +3044,48 @@
         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).
      */
@@ -3073,6 +3251,40 @@
         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;
@@ -3256,15 +3468,23 @@
                 },
             };
         }
-        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++;
                 }
@@ -3430,7 +3650,7 @@
     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');
@@ -3741,19 +3961,24 @@
             };
         }
         /**
-         * 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++;
                 }
@@ -3907,7 +4132,7 @@
     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({
@@ -5178,7 +5403,17 @@
                         // /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__');
@@ -6674,8 +6909,7 @@
             }
         }
         extractExtension(template) {
-            const extMatch = template.match(/\.([\w]+)(?:\?|$)/i);
-            return extMatch ? extMatch[1] : 'pbf';
+            return extractTileExtensionFromUrl(template);
         }
         selectTileTemplate(templates, coord) {
             if (templates.length === 1) {
@@ -7057,14 +7291,21 @@
                 },
             };
         }
-        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++;
                 }
@@ -7167,7 +7408,7 @@
     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({
@@ -7402,8 +7643,7 @@
             return getFontAnalytics();
         }
         async cleanupOldFonts(styleId, options) {
-            const maxAge = options?.maxAge;
-            return cleanupOldFonts(maxAge);
+            return cleanupOldFonts(options?.maxAge, { styleId });
         }
         async verifyAndRepairFonts() {
             return verifyAndRepairFonts();
@@ -7419,8 +7659,7 @@
             return getSpriteAnalytics();
         }
         async cleanupOldSprites(styleId, options) {
-            const maxAge = options?.maxAge;
-            return cleanupOldSprites(maxAge);
+            return cleanupOldSprites(options?.maxAge, { styleId });
         }
         async verifyAndRepairSprites() {
             return verifyAndRepairSprites();
@@ -7439,8 +7678,7 @@
             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();
@@ -7555,6 +7793,88 @@
         }
     }
 
+    /**
+     * 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;
@@ -7562,270 +7882,173 @@
             // 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) {
@@ -7949,151 +8172,113 @@
             }
         }
         /**
-         * 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
@@ -8158,16 +8343,15 @@
                         });
                     }
                 }
-                // 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,
                     },
                 };
             }
@@ -8396,8 +8580,6 @@
     };
 
     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) => {
@@ -8753,10 +8935,6 @@
         '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',
@@ -8781,41 +8959,30 @@
         '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
@@ -8976,10 +9143,6 @@
         'styleSelection.title': 'اختر نمط غير متصل',
         'styleSelection.message': 'اختر النمط غير المتصل الذي تريد تحميله:',
         'styleSelection.sources': 'مصادر',
-        // Import/Export - استيراد/تصدير
-        'importExport.title': 'استيراد/تصدير',
-        'importExport.export': 'تصدير',
-        'importExport.import': 'استيراد',
         // Errors - الأخطاء
         'error.loadingContent': 'خطأ في تحميل المحتوى',
         'error.tryAgain': 'يرجى المحاولة مرة أخرى',
@@ -9004,41 +9167,30 @@
         '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 - سلاسل إضافية للوحة
@@ -9977,49 +10129,42 @@
     }
 
     /**
-     * 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();
@@ -10028,217 +10173,96 @@
             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';
@@ -10248,79 +10272,85 @@
                 '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;
                 });
             }
         }
@@ -10330,34 +10360,27 @@
             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');
                 }
             }
@@ -10368,45 +10391,47 @@
             }
         }
         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');
                 }
             }
@@ -10416,23 +10441,6 @@
                     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();
-        }
     }
 
     /**
@@ -11146,9 +11154,9 @@
             <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>
@@ -11410,7 +11418,7 @@
             }
         }
         /**
-         * Handle import/export functionality
+         * Show the MBTiles import/export modal for a region.
          */
         async handleImportExport(regionId, _regionData) {
             try {
@@ -11418,44 +11426,26 @@
                 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);
             }
         }
         /**
@@ -11854,6 +11844,9 @@
                     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
@@ -12595,9 +12588,7 @@
         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);
@@ -13361,39 +13352,39 @@
                 }
                 // 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);
@@ -13826,6 +13817,9 @@
                 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) {
@@ -14019,6 +14013,7 @@
     exports.clearAllCaches = clearAllCaches;
     exports.configureLogger = configureLogger;
     exports.configureProxy = configureProxy;
+    exports.configureSqlJs = configureSqlJs;
     exports.convertStyleForServiceWorker = convertStyleForServiceWorker;
     exports.countCompressedTiles = countCompressedTiles;
     exports.createProgressTracker = createProgressTracker;
@@ -14041,6 +14036,7 @@
     exports.extractAccessToken = extractAccessToken;
     exports.extractAllFontNames = extractAllFontNames;
     exports.extractFontNamesFromTextField = extractFontNamesFromTextField;
+    exports.extractTileExtensionFromUrl = extractTileExtensionFromUrl;
     exports.fetchResourceWithRetry = fetchResourceWithRetry;
     exports.fetchWithRetry = fetchWithRetry;
     exports.fontService = fontService;
@@ -14058,15 +14054,19 @@
     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;
@@ -14092,6 +14092,7 @@
     exports.resourceKeyBelongsToStyle = resourceKeyBelongsToStyle;
     exports.rewriteMapboxCdnTileUrl = rewriteMapboxCdnTileUrl;
     exports.safeExecute = safeExecute;
+    exports.sanitizeIndoorExpressions = sanitizeIndoorExpressions;
     exports.setupAutoCleanup = setupAutoCleanup;
     exports.spriteService = spriteService;
     exports.stopAutoCleanup = stopAutoCleanup;