map-gl-offline 0.1.0-alpha.7 → 0.1.1

package/dist/index.esm.js

@@ -88,7 +88,7 @@ var LogLevel;
  * Main Logger class providing centralized logging functionality.
  * @internal Use the exported `logger` singleton or `configureLogger()` function.
  */
-class Logger {
+let Logger$1 = class Logger {
     level = LogLevel.ERROR; // Default to ERROR only for production
     /**
      * Configure the logger settings.
@@ -197,7 +197,7 @@ class Logger {
     scope(prefix) {
         return new ScopedLogger(prefix, this);
     }
-}
+};
 /**
  * A scoped logger that prefixes all messages with a module/component name.
  * Created using `logger.scope('PrefixName')`.
@@ -253,7 +253,7 @@ class ScopedLogger {
  * logger.error('Something went wrong', error);
  * ```
  */
-const logger = new Logger();
+const logger = new Logger$1();
 /**
  * Configure the global logger settings.
  * Call this early in your application to set logging preferences.
@@ -737,6 +737,7 @@ const TABLER_ICONS = {
     upload: '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-upload" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><polyline points="7,9 12,4 17,9" /><line x1="12" y1="4" x2="12" y2="16" /></svg>',
     infoCircle: '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11,12 12,12 12,16 13,16" /></svg>',
     deviceDesktop: '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="4" width="18" height="12" rx="1" /><line x1="7" y1="20" x2="17" y2="20" /><line x1="9" y1="16" x2="9" y2="20" /><line x1="15" y1="16" x2="15" y2="20" /></svg>',
+    language: '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5h7" /><path d="M9 3v2c0 4.418 -2.239 8 -5 8" /><path d="M5 9c0 2.144 2.952 3.908 6.7 4" /><path d="M12 20l4 -9l4 9" /><path d="M19.1 18h-6.2" /></svg>',
 };
 /**
  * Default icon configuration
@@ -817,6 +818,8 @@ const icons = {
     infoCircle: (config) => renderIcon(TABLER_ICONS.infoCircle, config),
     // System/Device icons
     deviceDesktop: (config) => renderIcon(TABLER_ICONS.deviceDesktop, config),
+    // Language icons
+    language: (config) => renderIcon(TABLER_ICONS.language, config),
 };
 /**
  * Helper function to get an icon by name
@@ -6868,155 +6871,2909 @@ async function downloadStyleWithProvider(styleUrl, options = {}) {
             },
         };
     }
-    catch (error) {
-        logger.error(`Failed to download style from ${styleUrl}:`, error);
-        return {
-            styleId: '',
-            success: false,
-            downloadTime: Date.now() - startTime,
-            styleSize: 0,
-            sourcesProcessed: 0,
-            sourcesEmbedded: 0,
-            errors: [error instanceof Error ? error.message : String(error)],
-            analytics: {
-                sourceTypes: {},
-                layerTypes: {},
-                totalLayers: 0,
-                hasGlyphs: false,
-                hasSprites: false,
-            },
+    catch (error) {
+        logger.error(`Failed to download style from ${styleUrl}:`, error);
+        return {
+            styleId: '',
+            success: false,
+            downloadTime: Date.now() - startTime,
+            styleSize: 0,
+            sourcesProcessed: 0,
+            sourcesEmbedded: 0,
+            errors: [error instanceof Error ? error.message : String(error)],
+            analytics: {
+                sourceTypes: {},
+                layerTypes: {},
+                totalLayers: 0,
+                hasGlyphs: false,
+                hasSprites: false,
+            },
+        };
+    }
+}
+
+var styleService = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    cleanupOldStyles: cleanupOldStyles,
+    deleteStyleById: deleteStyleById,
+    deleteStyles: deleteStyles,
+    downloadStyleWithProvider: downloadStyleWithProvider,
+    downloadStyles: downloadStyles,
+    getStyleStats: getStyleStats,
+    isStyleDownloaded: isStyleDownloaded,
+    loadStyleById: loadStyleById,
+    loadStyles: loadStyles
+});
+
+/**
+ * Simplified theme system for dark/light/system mode management
+ * Now that all components use Tailwind CSS, we only need basic theme switching
+ */
+const lightTheme = {
+    mode: 'light',
+    preference: 'light',
+};
+// Theme context management
+class ThemeManager {
+    currentTheme = lightTheme;
+    listeners = [];
+    constructor() {
+        // Initialize theme from localStorage or system preference
+        this.initializeTheme();
+    }
+    initializeTheme() {
+        const savedPreference = localStorage.getItem('offline-manager-theme');
+        if (savedPreference === 'system' || !savedPreference) {
+            // Use system preference
+            this.setThemePreference('system');
+        }
+        else {
+            this.setThemePreference(savedPreference);
+        }
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            if (this.currentTheme.preference === 'system') {
+                this.applyThemeMode(e.matches ? 'dark' : 'light', 'system');
+            }
+        });
+    }
+    getTheme() {
+        return this.currentTheme;
+    }
+    /**
+     * Get the effective theme mode (light or dark)
+     */
+    getEffectiveMode() {
+        return this.currentTheme.mode;
+    }
+    /**
+     * Get the user's preference (light, dark, or system)
+     */
+    getPreference() {
+        return this.currentTheme.preference;
+    }
+    applyThemeMode(mode, preference) {
+        this.currentTheme = { mode, preference };
+        // Apply theme to document for Tailwind dark mode
+        if (mode === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+        this.notifyListeners();
+    }
+    /**
+     * Set the theme preference (light, dark, or system)
+     */
+    setThemePreference(preference) {
+        localStorage.setItem('offline-manager-theme', preference);
+        if (preference === 'system') {
+            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            this.applyThemeMode(systemPrefersDark ? 'dark' : 'light', 'system');
+        }
+        else {
+            this.applyThemeMode(preference, preference);
+        }
+    }
+    /**
+     * Set the theme mode directly (for backwards compatibility)
+     * @deprecated Use setThemePreference instead
+     */
+    setTheme(mode) {
+        this.setThemePreference(mode);
+    }
+    /**
+     * Cycle through themes: light -> dark -> system -> light
+     */
+    cycleTheme() {
+        const preference = this.currentTheme.preference;
+        if (preference === 'light') {
+            this.setThemePreference('dark');
+        }
+        else if (preference === 'dark') {
+            this.setThemePreference('system');
+        }
+        else {
+            this.setThemePreference('light');
+        }
+    }
+    /**
+     * Toggle between light and dark (legacy behavior)
+     * @deprecated Use cycleTheme for light/dark/system cycling
+     */
+    toggleTheme() {
+        this.cycleTheme();
+    }
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            const index = this.listeners.indexOf(listener);
+            if (index > -1) {
+                this.listeners.splice(index, 1);
+            }
+        };
+    }
+    notifyListeners() {
+        this.listeners.forEach(listener => listener(this.currentTheme));
+    }
+}
+// Export singleton instance
+const themeManager = new ThemeManager();
+
+const isString = obj => typeof obj === 'string';
+const defer = () => {
+  let res;
+  let rej;
+  const promise = new Promise((resolve, reject) => {
+    res = resolve;
+    rej = reject;
+  });
+  promise.resolve = res;
+  promise.reject = rej;
+  return promise;
+};
+const makeString = object => {
+  if (object == null) return '';
+  return '' + object;
+};
+const copy = (a, s, t) => {
+  a.forEach(m => {
+    if (s[m]) t[m] = s[m];
+  });
+};
+const lastOfPathSeparatorRegExp = /###/g;
+const cleanKey = key => key && key.indexOf('###') > -1 ? key.replace(lastOfPathSeparatorRegExp, '.') : key;
+const canNotTraverseDeeper = object => !object || isString(object);
+const getLastOfPath = (object, path, Empty) => {
+  const stack = !isString(path) ? path : path.split('.');
+  let stackIndex = 0;
+  while (stackIndex < stack.length - 1) {
+    if (canNotTraverseDeeper(object)) return {};
+    const key = cleanKey(stack[stackIndex]);
+    if (!object[key] && Empty) object[key] = new Empty();
+    if (Object.prototype.hasOwnProperty.call(object, key)) {
+      object = object[key];
+    } else {
+      object = {};
+    }
+    ++stackIndex;
+  }
+  if (canNotTraverseDeeper(object)) return {};
+  return {
+    obj: object,
+    k: cleanKey(stack[stackIndex])
+  };
+};
+const setPath = (object, path, newValue) => {
+  const {
+    obj,
+    k
+  } = getLastOfPath(object, path, Object);
+  if (obj !== undefined || path.length === 1) {
+    obj[k] = newValue;
+    return;
+  }
+  let e = path[path.length - 1];
+  let p = path.slice(0, path.length - 1);
+  let last = getLastOfPath(object, p, Object);
+  while (last.obj === undefined && p.length) {
+    e = `${p[p.length - 1]}.${e}`;
+    p = p.slice(0, p.length - 1);
+    last = getLastOfPath(object, p, Object);
+    if (last?.obj && typeof last.obj[`${last.k}.${e}`] !== 'undefined') {
+      last.obj = undefined;
+    }
+  }
+  last.obj[`${last.k}.${e}`] = newValue;
+};
+const pushPath = (object, path, newValue, concat) => {
+  const {
+    obj,
+    k
+  } = getLastOfPath(object, path, Object);
+  obj[k] = obj[k] || [];
+  obj[k].push(newValue);
+};
+const getPath = (object, path) => {
+  const {
+    obj,
+    k
+  } = getLastOfPath(object, path);
+  if (!obj) return undefined;
+  if (!Object.prototype.hasOwnProperty.call(obj, k)) return undefined;
+  return obj[k];
+};
+const getPathWithDefaults = (data, defaultData, key) => {
+  const value = getPath(data, key);
+  if (value !== undefined) {
+    return value;
+  }
+  return getPath(defaultData, key);
+};
+const deepExtend = (target, source, overwrite) => {
+  for (const prop in source) {
+    if (prop !== '__proto__' && prop !== 'constructor') {
+      if (prop in target) {
+        if (isString(target[prop]) || target[prop] instanceof String || isString(source[prop]) || source[prop] instanceof String) {
+          if (overwrite) target[prop] = source[prop];
+        } else {
+          deepExtend(target[prop], source[prop], overwrite);
+        }
+      } else {
+        target[prop] = source[prop];
+      }
+    }
+  }
+  return target;
+};
+const regexEscape = str => str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+var _entityMap = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+  '/': '&#x2F;'
+};
+const escape = data => {
+  if (isString(data)) {
+    return data.replace(/[&<>"'\/]/g, s => _entityMap[s]);
+  }
+  return data;
+};
+class RegExpCache {
+  constructor(capacity) {
+    this.capacity = capacity;
+    this.regExpMap = new Map();
+    this.regExpQueue = [];
+  }
+  getRegExp(pattern) {
+    const regExpFromCache = this.regExpMap.get(pattern);
+    if (regExpFromCache !== undefined) {
+      return regExpFromCache;
+    }
+    const regExpNew = new RegExp(pattern);
+    if (this.regExpQueue.length === this.capacity) {
+      this.regExpMap.delete(this.regExpQueue.shift());
+    }
+    this.regExpMap.set(pattern, regExpNew);
+    this.regExpQueue.push(pattern);
+    return regExpNew;
+  }
+}
+const chars = [' ', ',', '?', '!', ';'];
+const looksLikeObjectPathRegExpCache = new RegExpCache(20);
+const looksLikeObjectPath = (key, nsSeparator, keySeparator) => {
+  nsSeparator = nsSeparator || '';
+  keySeparator = keySeparator || '';
+  const possibleChars = chars.filter(c => nsSeparator.indexOf(c) < 0 && keySeparator.indexOf(c) < 0);
+  if (possibleChars.length === 0) return true;
+  const r = looksLikeObjectPathRegExpCache.getRegExp(`(${possibleChars.map(c => c === '?' ? '\\?' : c).join('|')})`);
+  let matched = !r.test(key);
+  if (!matched) {
+    const ki = key.indexOf(keySeparator);
+    if (ki > 0 && !r.test(key.substring(0, ki))) {
+      matched = true;
+    }
+  }
+  return matched;
+};
+const deepFind = (obj, path, keySeparator = '.') => {
+  if (!obj) return undefined;
+  if (obj[path]) {
+    if (!Object.prototype.hasOwnProperty.call(obj, path)) return undefined;
+    return obj[path];
+  }
+  const tokens = path.split(keySeparator);
+  let current = obj;
+  for (let i = 0; i < tokens.length;) {
+    if (!current || typeof current !== 'object') {
+      return undefined;
+    }
+    let next;
+    let nextPath = '';
+    for (let j = i; j < tokens.length; ++j) {
+      if (j !== i) {
+        nextPath += keySeparator;
+      }
+      nextPath += tokens[j];
+      next = current[nextPath];
+      if (next !== undefined) {
+        if (['string', 'number', 'boolean'].indexOf(typeof next) > -1 && j < tokens.length - 1) {
+          continue;
+        }
+        i += j - i + 1;
+        break;
+      }
+    }
+    current = next;
+  }
+  return current;
+};
+const getCleanedCode = code => code?.replace('_', '-');
+
+const consoleLogger = {
+  type: 'logger',
+  log(args) {
+    this.output('log', args);
+  },
+  warn(args) {
+    this.output('warn', args);
+  },
+  error(args) {
+    this.output('error', args);
+  },
+  output(type, args) {
+    console?.[type]?.apply?.(console, args);
+  }
+};
+class Logger {
+  constructor(concreteLogger, options = {}) {
+    this.init(concreteLogger, options);
+  }
+  init(concreteLogger, options = {}) {
+    this.prefix = options.prefix || 'i18next:';
+    this.logger = concreteLogger || consoleLogger;
+    this.options = options;
+    this.debug = options.debug;
+  }
+  log(...args) {
+    return this.forward(args, 'log', '', true);
+  }
+  warn(...args) {
+    return this.forward(args, 'warn', '', true);
+  }
+  error(...args) {
+    return this.forward(args, 'error', '');
+  }
+  deprecate(...args) {
+    return this.forward(args, 'warn', 'WARNING DEPRECATED: ', true);
+  }
+  forward(args, lvl, prefix, debugOnly) {
+    if (debugOnly && !this.debug) return null;
+    if (isString(args[0])) args[0] = `${prefix}${this.prefix} ${args[0]}`;
+    return this.logger[lvl](args);
+  }
+  create(moduleName) {
+    return new Logger(this.logger, {
+      ...{
+        prefix: `${this.prefix}:${moduleName}:`
+      },
+      ...this.options
+    });
+  }
+  clone(options) {
+    options = options || this.options;
+    options.prefix = options.prefix || this.prefix;
+    return new Logger(this.logger, options);
+  }
+}
+var baseLogger = new Logger();
+
+class EventEmitter {
+  constructor() {
+    this.observers = {};
+  }
+  on(events, listener) {
+    events.split(' ').forEach(event => {
+      if (!this.observers[event]) this.observers[event] = new Map();
+      const numListeners = this.observers[event].get(listener) || 0;
+      this.observers[event].set(listener, numListeners + 1);
+    });
+    return this;
+  }
+  off(event, listener) {
+    if (!this.observers[event]) return;
+    if (!listener) {
+      delete this.observers[event];
+      return;
+    }
+    this.observers[event].delete(listener);
+  }
+  emit(event, ...args) {
+    if (this.observers[event]) {
+      const cloned = Array.from(this.observers[event].entries());
+      cloned.forEach(([observer, numTimesAdded]) => {
+        for (let i = 0; i < numTimesAdded; i++) {
+          observer(...args);
+        }
+      });
+    }
+    if (this.observers['*']) {
+      const cloned = Array.from(this.observers['*'].entries());
+      cloned.forEach(([observer, numTimesAdded]) => {
+        for (let i = 0; i < numTimesAdded; i++) {
+          observer.apply(observer, [event, ...args]);
+        }
+      });
+    }
+  }
+}
+
+class ResourceStore extends EventEmitter {
+  constructor(data, options = {
+    ns: ['translation'],
+    defaultNS: 'translation'
+  }) {
+    super();
+    this.data = data || {};
+    this.options = options;
+    if (this.options.keySeparator === undefined) {
+      this.options.keySeparator = '.';
+    }
+    if (this.options.ignoreJSONStructure === undefined) {
+      this.options.ignoreJSONStructure = true;
+    }
+  }
+  addNamespaces(ns) {
+    if (this.options.ns.indexOf(ns) < 0) {
+      this.options.ns.push(ns);
+    }
+  }
+  removeNamespaces(ns) {
+    const index = this.options.ns.indexOf(ns);
+    if (index > -1) {
+      this.options.ns.splice(index, 1);
+    }
+  }
+  getResource(lng, ns, key, options = {}) {
+    const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+    const ignoreJSONStructure = options.ignoreJSONStructure !== undefined ? options.ignoreJSONStructure : this.options.ignoreJSONStructure;
+    let path;
+    if (lng.indexOf('.') > -1) {
+      path = lng.split('.');
+    } else {
+      path = [lng, ns];
+      if (key) {
+        if (Array.isArray(key)) {
+          path.push(...key);
+        } else if (isString(key) && keySeparator) {
+          path.push(...key.split(keySeparator));
+        } else {
+          path.push(key);
+        }
+      }
+    }
+    const result = getPath(this.data, path);
+    if (!result && !ns && !key && lng.indexOf('.') > -1) {
+      lng = path[0];
+      ns = path[1];
+      key = path.slice(2).join('.');
+    }
+    if (result || !ignoreJSONStructure || !isString(key)) return result;
+    return deepFind(this.data?.[lng]?.[ns], key, keySeparator);
+  }
+  addResource(lng, ns, key, value, options = {
+    silent: false
+  }) {
+    const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+    let path = [lng, ns];
+    if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
+    if (lng.indexOf('.') > -1) {
+      path = lng.split('.');
+      value = ns;
+      ns = path[1];
+    }
+    this.addNamespaces(ns);
+    setPath(this.data, path, value);
+    if (!options.silent) this.emit('added', lng, ns, key, value);
+  }
+  addResources(lng, ns, resources, options = {
+    silent: false
+  }) {
+    for (const m in resources) {
+      if (isString(resources[m]) || Array.isArray(resources[m])) this.addResource(lng, ns, m, resources[m], {
+        silent: true
+      });
+    }
+    if (!options.silent) this.emit('added', lng, ns, resources);
+  }
+  addResourceBundle(lng, ns, resources, deep, overwrite, options = {
+    silent: false,
+    skipCopy: false
+  }) {
+    let path = [lng, ns];
+    if (lng.indexOf('.') > -1) {
+      path = lng.split('.');
+      deep = resources;
+      resources = ns;
+      ns = path[1];
+    }
+    this.addNamespaces(ns);
+    let pack = getPath(this.data, path) || {};
+    if (!options.skipCopy) resources = JSON.parse(JSON.stringify(resources));
+    if (deep) {
+      deepExtend(pack, resources, overwrite);
+    } else {
+      pack = {
+        ...pack,
+        ...resources
+      };
+    }
+    setPath(this.data, path, pack);
+    if (!options.silent) this.emit('added', lng, ns, resources);
+  }
+  removeResourceBundle(lng, ns) {
+    if (this.hasResourceBundle(lng, ns)) {
+      delete this.data[lng][ns];
+    }
+    this.removeNamespaces(ns);
+    this.emit('removed', lng, ns);
+  }
+  hasResourceBundle(lng, ns) {
+    return this.getResource(lng, ns) !== undefined;
+  }
+  getResourceBundle(lng, ns) {
+    if (!ns) ns = this.options.defaultNS;
+    return this.getResource(lng, ns);
+  }
+  getDataByLanguage(lng) {
+    return this.data[lng];
+  }
+  hasLanguageSomeTranslations(lng) {
+    const data = this.getDataByLanguage(lng);
+    const n = data && Object.keys(data) || [];
+    return !!n.find(v => data[v] && Object.keys(data[v]).length > 0);
+  }
+  toJSON() {
+    return this.data;
+  }
+}
+
+var postProcessor = {
+  processors: {},
+  addPostProcessor(module) {
+    this.processors[module.name] = module;
+  },
+  handle(processors, value, key, options, translator) {
+    processors.forEach(processor => {
+      value = this.processors[processor]?.process(value, key, options, translator) ?? value;
+    });
+    return value;
+  }
+};
+
+const PATH_KEY = Symbol('i18next/PATH_KEY');
+function createProxy() {
+  const state = [];
+  const handler = Object.create(null);
+  let proxy;
+  handler.get = (target, key) => {
+    proxy?.revoke?.();
+    if (key === PATH_KEY) return state;
+    state.push(key);
+    proxy = Proxy.revocable(target, handler);
+    return proxy.proxy;
+  };
+  return Proxy.revocable(Object.create(null), handler).proxy;
+}
+function keysFromSelector(selector, opts) {
+  const {
+    [PATH_KEY]: path
+  } = selector(createProxy());
+  return path.join(opts?.keySeparator ?? '.');
+}
+
+const checkedLoadedFor = {};
+const shouldHandleAsObject = res => !isString(res) && typeof res !== 'boolean' && typeof res !== 'number';
+class Translator extends EventEmitter {
+  constructor(services, options = {}) {
+    super();
+    copy(['resourceStore', 'languageUtils', 'pluralResolver', 'interpolator', 'backendConnector', 'i18nFormat', 'utils'], services, this);
+    this.options = options;
+    if (this.options.keySeparator === undefined) {
+      this.options.keySeparator = '.';
+    }
+    this.logger = baseLogger.create('translator');
+  }
+  changeLanguage(lng) {
+    if (lng) this.language = lng;
+  }
+  exists(key, o = {
+    interpolation: {}
+  }) {
+    const opt = {
+      ...o
+    };
+    if (key == null) return false;
+    const resolved = this.resolve(key, opt);
+    if (resolved?.res === undefined) return false;
+    const isObject = shouldHandleAsObject(resolved.res);
+    if (opt.returnObjects === false && isObject) {
+      return false;
+    }
+    return true;
+  }
+  extractFromKey(key, opt) {
+    let nsSeparator = opt.nsSeparator !== undefined ? opt.nsSeparator : this.options.nsSeparator;
+    if (nsSeparator === undefined) nsSeparator = ':';
+    const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
+    let namespaces = opt.ns || this.options.defaultNS || [];
+    const wouldCheckForNsInKey = nsSeparator && key.indexOf(nsSeparator) > -1;
+    const seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !opt.keySeparator && !this.options.userDefinedNsSeparator && !opt.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
+    if (wouldCheckForNsInKey && !seemsNaturalLanguage) {
+      const m = key.match(this.interpolator.nestingRegexp);
+      if (m && m.length > 0) {
+        return {
+          key,
+          namespaces: isString(namespaces) ? [namespaces] : namespaces
+        };
+      }
+      const parts = key.split(nsSeparator);
+      if (nsSeparator !== keySeparator || nsSeparator === keySeparator && this.options.ns.indexOf(parts[0]) > -1) namespaces = parts.shift();
+      key = parts.join(keySeparator);
+    }
+    return {
+      key,
+      namespaces: isString(namespaces) ? [namespaces] : namespaces
+    };
+  }
+  translate(keys, o, lastKey) {
+    let opt = typeof o === 'object' ? {
+      ...o
+    } : o;
+    if (typeof opt !== 'object' && this.options.overloadTranslationOptionHandler) {
+      opt = this.options.overloadTranslationOptionHandler(arguments);
+    }
+    if (typeof opt === 'object') opt = {
+      ...opt
+    };
+    if (!opt) opt = {};
+    if (keys == null) return '';
+    if (typeof keys === 'function') keys = keysFromSelector(keys, {
+      ...this.options,
+      ...opt
+    });
+    if (!Array.isArray(keys)) keys = [String(keys)];
+    const returnDetails = opt.returnDetails !== undefined ? opt.returnDetails : this.options.returnDetails;
+    const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
+    const {
+      key,
+      namespaces
+    } = this.extractFromKey(keys[keys.length - 1], opt);
+    const namespace = namespaces[namespaces.length - 1];
+    let nsSeparator = opt.nsSeparator !== undefined ? opt.nsSeparator : this.options.nsSeparator;
+    if (nsSeparator === undefined) nsSeparator = ':';
+    const lng = opt.lng || this.language;
+    const appendNamespaceToCIMode = opt.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
+    if (lng?.toLowerCase() === 'cimode') {
+      if (appendNamespaceToCIMode) {
+        if (returnDetails) {
+          return {
+            res: `${namespace}${nsSeparator}${key}`,
+            usedKey: key,
+            exactUsedKey: key,
+            usedLng: lng,
+            usedNS: namespace,
+            usedParams: this.getUsedParamsDetails(opt)
+          };
+        }
+        return `${namespace}${nsSeparator}${key}`;
+      }
+      if (returnDetails) {
+        return {
+          res: key,
+          usedKey: key,
+          exactUsedKey: key,
+          usedLng: lng,
+          usedNS: namespace,
+          usedParams: this.getUsedParamsDetails(opt)
+        };
+      }
+      return key;
+    }
+    const resolved = this.resolve(keys, opt);
+    let res = resolved?.res;
+    const resUsedKey = resolved?.usedKey || key;
+    const resExactUsedKey = resolved?.exactUsedKey || key;
+    const noObject = ['[object Number]', '[object Function]', '[object RegExp]'];
+    const joinArrays = opt.joinArrays !== undefined ? opt.joinArrays : this.options.joinArrays;
+    const handleAsObjectInI18nFormat = !this.i18nFormat || this.i18nFormat.handleAsObject;
+    const needsPluralHandling = opt.count !== undefined && !isString(opt.count);
+    const hasDefaultValue = Translator.hasDefaultValue(opt);
+    const defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, opt.count, opt) : '';
+    const defaultValueSuffixOrdinalFallback = opt.ordinal && needsPluralHandling ? this.pluralResolver.getSuffix(lng, opt.count, {
+      ordinal: false
+    }) : '';
+    const needsZeroSuffixLookup = needsPluralHandling && !opt.ordinal && opt.count === 0;
+    const defaultValue = needsZeroSuffixLookup && opt[`defaultValue${this.options.pluralSeparator}zero`] || opt[`defaultValue${defaultValueSuffix}`] || opt[`defaultValue${defaultValueSuffixOrdinalFallback}`] || opt.defaultValue;
+    let resForObjHndl = res;
+    if (handleAsObjectInI18nFormat && !res && hasDefaultValue) {
+      resForObjHndl = defaultValue;
+    }
+    const handleAsObject = shouldHandleAsObject(resForObjHndl);
+    const resType = Object.prototype.toString.apply(resForObjHndl);
+    if (handleAsObjectInI18nFormat && resForObjHndl && handleAsObject && noObject.indexOf(resType) < 0 && !(isString(joinArrays) && Array.isArray(resForObjHndl))) {
+      if (!opt.returnObjects && !this.options.returnObjects) {
+        if (!this.options.returnedObjectHandler) {
+          this.logger.warn('accessing an object - but returnObjects options is not enabled!');
+        }
+        const r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, resForObjHndl, {
+          ...opt,
+          ns: namespaces
+        }) : `key '${key} (${this.language})' returned an object instead of string.`;
+        if (returnDetails) {
+          resolved.res = r;
+          resolved.usedParams = this.getUsedParamsDetails(opt);
+          return resolved;
+        }
+        return r;
+      }
+      if (keySeparator) {
+        const resTypeIsArray = Array.isArray(resForObjHndl);
+        const copy = resTypeIsArray ? [] : {};
+        const newKeyToUse = resTypeIsArray ? resExactUsedKey : resUsedKey;
+        for (const m in resForObjHndl) {
+          if (Object.prototype.hasOwnProperty.call(resForObjHndl, m)) {
+            const deepKey = `${newKeyToUse}${keySeparator}${m}`;
+            if (hasDefaultValue && !res) {
+              copy[m] = this.translate(deepKey, {
+                ...opt,
+                defaultValue: shouldHandleAsObject(defaultValue) ? defaultValue[m] : undefined,
+                ...{
+                  joinArrays: false,
+                  ns: namespaces
+                }
+              });
+            } else {
+              copy[m] = this.translate(deepKey, {
+                ...opt,
+                ...{
+                  joinArrays: false,
+                  ns: namespaces
+                }
+              });
+            }
+            if (copy[m] === deepKey) copy[m] = resForObjHndl[m];
+          }
+        }
+        res = copy;
+      }
+    } else if (handleAsObjectInI18nFormat && isString(joinArrays) && Array.isArray(res)) {
+      res = res.join(joinArrays);
+      if (res) res = this.extendTranslation(res, keys, opt, lastKey);
+    } else {
+      let usedDefault = false;
+      let usedKey = false;
+      if (!this.isValidLookup(res) && hasDefaultValue) {
+        usedDefault = true;
+        res = defaultValue;
+      }
+      if (!this.isValidLookup(res)) {
+        usedKey = true;
+        res = key;
+      }
+      const missingKeyNoValueFallbackToKey = opt.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey;
+      const resForMissing = missingKeyNoValueFallbackToKey && usedKey ? undefined : res;
+      const updateMissing = hasDefaultValue && defaultValue !== res && this.options.updateMissing;
+      if (usedKey || usedDefault || updateMissing) {
+        this.logger.log(updateMissing ? 'updateKey' : 'missingKey', lng, namespace, key, updateMissing ? defaultValue : res);
+        if (keySeparator) {
+          const fk = this.resolve(key, {
+            ...opt,
+            keySeparator: false
+          });
+          if (fk && fk.res) this.logger.warn('Seems the loaded translations were in flat JSON format instead of nested. Either set keySeparator: false on init or make sure your translations are published in nested format.');
+        }
+        let lngs = [];
+        const fallbackLngs = this.languageUtils.getFallbackCodes(this.options.fallbackLng, opt.lng || this.language);
+        if (this.options.saveMissingTo === 'fallback' && fallbackLngs && fallbackLngs[0]) {
+          for (let i = 0; i < fallbackLngs.length; i++) {
+            lngs.push(fallbackLngs[i]);
+          }
+        } else if (this.options.saveMissingTo === 'all') {
+          lngs = this.languageUtils.toResolveHierarchy(opt.lng || this.language);
+        } else {
+          lngs.push(opt.lng || this.language);
+        }
+        const send = (l, k, specificDefaultValue) => {
+          const defaultForMissing = hasDefaultValue && specificDefaultValue !== res ? specificDefaultValue : resForMissing;
+          if (this.options.missingKeyHandler) {
+            this.options.missingKeyHandler(l, namespace, k, defaultForMissing, updateMissing, opt);
+          } else if (this.backendConnector?.saveMissing) {
+            this.backendConnector.saveMissing(l, namespace, k, defaultForMissing, updateMissing, opt);
+          }
+          this.emit('missingKey', l, namespace, k, res);
+        };
+        if (this.options.saveMissing) {
+          if (this.options.saveMissingPlurals && needsPluralHandling) {
+            lngs.forEach(language => {
+              const suffixes = this.pluralResolver.getSuffixes(language, opt);
+              if (needsZeroSuffixLookup && opt[`defaultValue${this.options.pluralSeparator}zero`] && suffixes.indexOf(`${this.options.pluralSeparator}zero`) < 0) {
+                suffixes.push(`${this.options.pluralSeparator}zero`);
+              }
+              suffixes.forEach(suffix => {
+                send([language], key + suffix, opt[`defaultValue${suffix}`] || defaultValue);
+              });
+            });
+          } else {
+            send(lngs, key, defaultValue);
+          }
+        }
+      }
+      res = this.extendTranslation(res, keys, opt, resolved, lastKey);
+      if (usedKey && res === key && this.options.appendNamespaceToMissingKey) {
+        res = `${namespace}${nsSeparator}${key}`;
+      }
+      if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
+        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}${nsSeparator}${key}` : key, usedDefault ? res : undefined, opt);
+      }
+    }
+    if (returnDetails) {
+      resolved.res = res;
+      resolved.usedParams = this.getUsedParamsDetails(opt);
+      return resolved;
+    }
+    return res;
+  }
+  extendTranslation(res, key, opt, resolved, lastKey) {
+    if (this.i18nFormat?.parse) {
+      res = this.i18nFormat.parse(res, {
+        ...this.options.interpolation.defaultVariables,
+        ...opt
+      }, opt.lng || this.language || resolved.usedLng, resolved.usedNS, resolved.usedKey, {
+        resolved
+      });
+    } else if (!opt.skipInterpolation) {
+      if (opt.interpolation) this.interpolator.init({
+        ...opt,
+        ...{
+          interpolation: {
+            ...this.options.interpolation,
+            ...opt.interpolation
+          }
+        }
+      });
+      const skipOnVariables = isString(res) && (opt?.interpolation?.skipOnVariables !== undefined ? opt.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
+      let nestBef;
+      if (skipOnVariables) {
+        const nb = res.match(this.interpolator.nestingRegexp);
+        nestBef = nb && nb.length;
+      }
+      let data = opt.replace && !isString(opt.replace) ? opt.replace : opt;
+      if (this.options.interpolation.defaultVariables) data = {
+        ...this.options.interpolation.defaultVariables,
+        ...data
+      };
+      res = this.interpolator.interpolate(res, data, opt.lng || this.language || resolved.usedLng, opt);
+      if (skipOnVariables) {
+        const na = res.match(this.interpolator.nestingRegexp);
+        const nestAft = na && na.length;
+        if (nestBef < nestAft) opt.nest = false;
+      }
+      if (!opt.lng && resolved && resolved.res) opt.lng = this.language || resolved.usedLng;
+      if (opt.nest !== false) res = this.interpolator.nest(res, (...args) => {
+        if (lastKey?.[0] === args[0] && !opt.context) {
+          this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
+          return null;
+        }
+        return this.translate(...args, key);
+      }, opt);
+      if (opt.interpolation) this.interpolator.reset();
+    }
+    const postProcess = opt.postProcess || this.options.postProcess;
+    const postProcessorNames = isString(postProcess) ? [postProcess] : postProcess;
+    if (res != null && postProcessorNames?.length && opt.applyPostProcessor !== false) {
+      res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? {
+        i18nResolved: {
+          ...resolved,
+          usedParams: this.getUsedParamsDetails(opt)
+        },
+        ...opt
+      } : opt, this);
+    }
+    return res;
+  }
+  resolve(keys, opt = {}) {
+    let found;
+    let usedKey;
+    let exactUsedKey;
+    let usedLng;
+    let usedNS;
+    if (isString(keys)) keys = [keys];
+    keys.forEach(k => {
+      if (this.isValidLookup(found)) return;
+      const extracted = this.extractFromKey(k, opt);
+      const key = extracted.key;
+      usedKey = key;
+      let namespaces = extracted.namespaces;
+      if (this.options.fallbackNS) namespaces = namespaces.concat(this.options.fallbackNS);
+      const needsPluralHandling = opt.count !== undefined && !isString(opt.count);
+      const needsZeroSuffixLookup = needsPluralHandling && !opt.ordinal && opt.count === 0;
+      const needsContextHandling = opt.context !== undefined && (isString(opt.context) || typeof opt.context === 'number') && opt.context !== '';
+      const codes = opt.lngs ? opt.lngs : this.languageUtils.toResolveHierarchy(opt.lng || this.language, opt.fallbackLng);
+      namespaces.forEach(ns => {
+        if (this.isValidLookup(found)) return;
+        usedNS = ns;
+        if (!checkedLoadedFor[`${codes[0]}-${ns}`] && this.utils?.hasLoadedNamespace && !this.utils?.hasLoadedNamespace(usedNS)) {
+          checkedLoadedFor[`${codes[0]}-${ns}`] = true;
+          this.logger.warn(`key "${usedKey}" for languages "${codes.join(', ')}" won't get resolved as namespace "${usedNS}" was not yet loaded`, 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
+        }
+        codes.forEach(code => {
+          if (this.isValidLookup(found)) return;
+          usedLng = code;
+          const finalKeys = [key];
+          if (this.i18nFormat?.addLookupKeys) {
+            this.i18nFormat.addLookupKeys(finalKeys, key, code, ns, opt);
+          } else {
+            let pluralSuffix;
+            if (needsPluralHandling) pluralSuffix = this.pluralResolver.getSuffix(code, opt.count, opt);
+            const zeroSuffix = `${this.options.pluralSeparator}zero`;
+            const ordinalPrefix = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
+            if (needsPluralHandling) {
+              if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+                finalKeys.push(key + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
+              }
+              finalKeys.push(key + pluralSuffix);
+              if (needsZeroSuffixLookup) {
+                finalKeys.push(key + zeroSuffix);
+              }
+            }
+            if (needsContextHandling) {
+              const contextKey = `${key}${this.options.contextSeparator || '_'}${opt.context}`;
+              finalKeys.push(contextKey);
+              if (needsPluralHandling) {
+                if (opt.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+                  finalKeys.push(contextKey + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
+                }
+                finalKeys.push(contextKey + pluralSuffix);
+                if (needsZeroSuffixLookup) {
+                  finalKeys.push(contextKey + zeroSuffix);
+                }
+              }
+            }
+          }
+          let possibleKey;
+          while (possibleKey = finalKeys.pop()) {
+            if (!this.isValidLookup(found)) {
+              exactUsedKey = possibleKey;
+              found = this.getResource(code, ns, possibleKey, opt);
+            }
+          }
+        });
+      });
+    });
+    return {
+      res: found,
+      usedKey,
+      exactUsedKey,
+      usedLng,
+      usedNS
+    };
+  }
+  isValidLookup(res) {
+    return res !== undefined && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === '');
+  }
+  getResource(code, ns, key, options = {}) {
+    if (this.i18nFormat?.getResource) return this.i18nFormat.getResource(code, ns, key, options);
+    return this.resourceStore.getResource(code, ns, key, options);
+  }
+  getUsedParamsDetails(options = {}) {
+    const optionsKeys = ['defaultValue', 'ordinal', 'context', 'replace', 'lng', 'lngs', 'fallbackLng', 'ns', 'keySeparator', 'nsSeparator', 'returnObjects', 'returnDetails', 'joinArrays', 'postProcess', 'interpolation'];
+    const useOptionsReplaceForData = options.replace && !isString(options.replace);
+    let data = useOptionsReplaceForData ? options.replace : options;
+    if (useOptionsReplaceForData && typeof options.count !== 'undefined') {
+      data.count = options.count;
+    }
+    if (this.options.interpolation.defaultVariables) {
+      data = {
+        ...this.options.interpolation.defaultVariables,
+        ...data
+      };
+    }
+    if (!useOptionsReplaceForData) {
+      data = {
+        ...data
+      };
+      for (const key of optionsKeys) {
+        delete data[key];
+      }
+    }
+    return data;
+  }
+  static hasDefaultValue(options) {
+    const prefix = 'defaultValue';
+    for (const option in options) {
+      if (Object.prototype.hasOwnProperty.call(options, option) && prefix === option.substring(0, prefix.length) && undefined !== options[option]) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+class LanguageUtil {
+  constructor(options) {
+    this.options = options;
+    this.supportedLngs = this.options.supportedLngs || false;
+    this.logger = baseLogger.create('languageUtils');
+  }
+  getScriptPartFromCode(code) {
+    code = getCleanedCode(code);
+    if (!code || code.indexOf('-') < 0) return null;
+    const p = code.split('-');
+    if (p.length === 2) return null;
+    p.pop();
+    if (p[p.length - 1].toLowerCase() === 'x') return null;
+    return this.formatLanguageCode(p.join('-'));
+  }
+  getLanguagePartFromCode(code) {
+    code = getCleanedCode(code);
+    if (!code || code.indexOf('-') < 0) return code;
+    const p = code.split('-');
+    return this.formatLanguageCode(p[0]);
+  }
+  formatLanguageCode(code) {
+    if (isString(code) && code.indexOf('-') > -1) {
+      let formattedCode;
+      try {
+        formattedCode = Intl.getCanonicalLocales(code)[0];
+      } catch (e) {}
+      if (formattedCode && this.options.lowerCaseLng) {
+        formattedCode = formattedCode.toLowerCase();
+      }
+      if (formattedCode) return formattedCode;
+      if (this.options.lowerCaseLng) {
+        return code.toLowerCase();
+      }
+      return code;
+    }
+    return this.options.cleanCode || this.options.lowerCaseLng ? code.toLowerCase() : code;
+  }
+  isSupportedCode(code) {
+    if (this.options.load === 'languageOnly' || this.options.nonExplicitSupportedLngs) {
+      code = this.getLanguagePartFromCode(code);
+    }
+    return !this.supportedLngs || !this.supportedLngs.length || this.supportedLngs.indexOf(code) > -1;
+  }
+  getBestMatchFromCodes(codes) {
+    if (!codes) return null;
+    let found;
+    codes.forEach(code => {
+      if (found) return;
+      const cleanedLng = this.formatLanguageCode(code);
+      if (!this.options.supportedLngs || this.isSupportedCode(cleanedLng)) found = cleanedLng;
+    });
+    if (!found && this.options.supportedLngs) {
+      codes.forEach(code => {
+        if (found) return;
+        const lngScOnly = this.getScriptPartFromCode(code);
+        if (this.isSupportedCode(lngScOnly)) return found = lngScOnly;
+        const lngOnly = this.getLanguagePartFromCode(code);
+        if (this.isSupportedCode(lngOnly)) return found = lngOnly;
+        found = this.options.supportedLngs.find(supportedLng => {
+          if (supportedLng === lngOnly) return supportedLng;
+          if (supportedLng.indexOf('-') < 0 && lngOnly.indexOf('-') < 0) return;
+          if (supportedLng.indexOf('-') > 0 && lngOnly.indexOf('-') < 0 && supportedLng.substring(0, supportedLng.indexOf('-')) === lngOnly) return supportedLng;
+          if (supportedLng.indexOf(lngOnly) === 0 && lngOnly.length > 1) return supportedLng;
+        });
+      });
+    }
+    if (!found) found = this.getFallbackCodes(this.options.fallbackLng)[0];
+    return found;
+  }
+  getFallbackCodes(fallbacks, code) {
+    if (!fallbacks) return [];
+    if (typeof fallbacks === 'function') fallbacks = fallbacks(code);
+    if (isString(fallbacks)) fallbacks = [fallbacks];
+    if (Array.isArray(fallbacks)) return fallbacks;
+    if (!code) return fallbacks.default || [];
+    let found = fallbacks[code];
+    if (!found) found = fallbacks[this.getScriptPartFromCode(code)];
+    if (!found) found = fallbacks[this.formatLanguageCode(code)];
+    if (!found) found = fallbacks[this.getLanguagePartFromCode(code)];
+    if (!found) found = fallbacks.default;
+    return found || [];
+  }
+  toResolveHierarchy(code, fallbackCode) {
+    const fallbackCodes = this.getFallbackCodes((fallbackCode === false ? [] : fallbackCode) || this.options.fallbackLng || [], code);
+    const codes = [];
+    const addCode = c => {
+      if (!c) return;
+      if (this.isSupportedCode(c)) {
+        codes.push(c);
+      } else {
+        this.logger.warn(`rejecting language code not found in supportedLngs: ${c}`);
+      }
+    };
+    if (isString(code) && (code.indexOf('-') > -1 || code.indexOf('_') > -1)) {
+      if (this.options.load !== 'languageOnly') addCode(this.formatLanguageCode(code));
+      if (this.options.load !== 'languageOnly' && this.options.load !== 'currentOnly') addCode(this.getScriptPartFromCode(code));
+      if (this.options.load !== 'currentOnly') addCode(this.getLanguagePartFromCode(code));
+    } else if (isString(code)) {
+      addCode(this.formatLanguageCode(code));
+    }
+    fallbackCodes.forEach(fc => {
+      if (codes.indexOf(fc) < 0) addCode(this.formatLanguageCode(fc));
+    });
+    return codes;
+  }
+}
+
+const suffixesOrder = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 4,
+  other: 5
+};
+const dummyRule = {
+  select: count => count === 1 ? 'one' : 'other',
+  resolvedOptions: () => ({
+    pluralCategories: ['one', 'other']
+  })
+};
+class PluralResolver {
+  constructor(languageUtils, options = {}) {
+    this.languageUtils = languageUtils;
+    this.options = options;
+    this.logger = baseLogger.create('pluralResolver');
+    this.pluralRulesCache = {};
+  }
+  clearCache() {
+    this.pluralRulesCache = {};
+  }
+  getRule(code, options = {}) {
+    const cleanedCode = getCleanedCode(code === 'dev' ? 'en' : code);
+    const type = options.ordinal ? 'ordinal' : 'cardinal';
+    const cacheKey = JSON.stringify({
+      cleanedCode,
+      type
+    });
+    if (cacheKey in this.pluralRulesCache) {
+      return this.pluralRulesCache[cacheKey];
+    }
+    let rule;
+    try {
+      rule = new Intl.PluralRules(cleanedCode, {
+        type
+      });
+    } catch (err) {
+      if (!Intl) {
+        this.logger.error('No Intl support, please use an Intl polyfill!');
+        return dummyRule;
+      }
+      if (!code.match(/-|_/)) return dummyRule;
+      const lngPart = this.languageUtils.getLanguagePartFromCode(code);
+      rule = this.getRule(lngPart, options);
+    }
+    this.pluralRulesCache[cacheKey] = rule;
+    return rule;
+  }
+  needsPlural(code, options = {}) {
+    let rule = this.getRule(code, options);
+    if (!rule) rule = this.getRule('dev', options);
+    return rule?.resolvedOptions().pluralCategories.length > 1;
+  }
+  getPluralFormsOfKey(code, key, options = {}) {
+    return this.getSuffixes(code, options).map(suffix => `${key}${suffix}`);
+  }
+  getSuffixes(code, options = {}) {
+    let rule = this.getRule(code, options);
+    if (!rule) rule = this.getRule('dev', options);
+    if (!rule) return [];
+    return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map(pluralCategory => `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${pluralCategory}`);
+  }
+  getSuffix(code, count, options = {}) {
+    const rule = this.getRule(code, options);
+    if (rule) {
+      return `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${rule.select(count)}`;
+    }
+    this.logger.warn(`no plural rule found for: ${code}`);
+    return this.getSuffix('dev', count, options);
+  }
+}
+
+const deepFindWithDefaults = (data, defaultData, key, keySeparator = '.', ignoreJSONStructure = true) => {
+  let path = getPathWithDefaults(data, defaultData, key);
+  if (!path && ignoreJSONStructure && isString(key)) {
+    path = deepFind(data, key, keySeparator);
+    if (path === undefined) path = deepFind(defaultData, key, keySeparator);
+  }
+  return path;
+};
+const regexSafe = val => val.replace(/\$/g, '$$$$');
+class Interpolator {
+  constructor(options = {}) {
+    this.logger = baseLogger.create('interpolator');
+    this.options = options;
+    this.format = options?.interpolation?.format || (value => value);
+    this.init(options);
+  }
+  init(options = {}) {
+    if (!options.interpolation) options.interpolation = {
+      escapeValue: true
+    };
+    const {
+      escape: escape$1,
+      escapeValue,
+      useRawValueToEscape,
+      prefix,
+      prefixEscaped,
+      suffix,
+      suffixEscaped,
+      formatSeparator,
+      unescapeSuffix,
+      unescapePrefix,
+      nestingPrefix,
+      nestingPrefixEscaped,
+      nestingSuffix,
+      nestingSuffixEscaped,
+      nestingOptionsSeparator,
+      maxReplaces,
+      alwaysFormat
+    } = options.interpolation;
+    this.escape = escape$1 !== undefined ? escape$1 : escape;
+    this.escapeValue = escapeValue !== undefined ? escapeValue : true;
+    this.useRawValueToEscape = useRawValueToEscape !== undefined ? useRawValueToEscape : false;
+    this.prefix = prefix ? regexEscape(prefix) : prefixEscaped || '{{';
+    this.suffix = suffix ? regexEscape(suffix) : suffixEscaped || '}}';
+    this.formatSeparator = formatSeparator || ',';
+    this.unescapePrefix = unescapeSuffix ? '' : unescapePrefix || '-';
+    this.unescapeSuffix = this.unescapePrefix ? '' : unescapeSuffix || '';
+    this.nestingPrefix = nestingPrefix ? regexEscape(nestingPrefix) : nestingPrefixEscaped || regexEscape('$t(');
+    this.nestingSuffix = nestingSuffix ? regexEscape(nestingSuffix) : nestingSuffixEscaped || regexEscape(')');
+    this.nestingOptionsSeparator = nestingOptionsSeparator || ',';
+    this.maxReplaces = maxReplaces || 1000;
+    this.alwaysFormat = alwaysFormat !== undefined ? alwaysFormat : false;
+    this.resetRegExp();
+  }
+  reset() {
+    if (this.options) this.init(this.options);
+  }
+  resetRegExp() {
+    const getOrResetRegExp = (existingRegExp, pattern) => {
+      if (existingRegExp?.source === pattern) {
+        existingRegExp.lastIndex = 0;
+        return existingRegExp;
+      }
+      return new RegExp(pattern, 'g');
+    };
+    this.regexp = getOrResetRegExp(this.regexp, `${this.prefix}(.+?)${this.suffix}`);
+    this.regexpUnescape = getOrResetRegExp(this.regexpUnescape, `${this.prefix}${this.unescapePrefix}(.+?)${this.unescapeSuffix}${this.suffix}`);
+    this.nestingRegexp = getOrResetRegExp(this.nestingRegexp, `${this.nestingPrefix}((?:[^()"']+|"[^"]*"|'[^']*'|\\((?:[^()]|"[^"]*"|'[^']*')*\\))*?)${this.nestingSuffix}`);
+  }
+  interpolate(str, data, lng, options) {
+    let match;
+    let value;
+    let replaces;
+    const defaultData = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {};
+    const handleFormat = key => {
+      if (key.indexOf(this.formatSeparator) < 0) {
+        const path = deepFindWithDefaults(data, defaultData, key, this.options.keySeparator, this.options.ignoreJSONStructure);
+        return this.alwaysFormat ? this.format(path, undefined, lng, {
+          ...options,
+          ...data,
+          interpolationkey: key
+        }) : path;
+      }
+      const p = key.split(this.formatSeparator);
+      const k = p.shift().trim();
+      const f = p.join(this.formatSeparator).trim();
+      return this.format(deepFindWithDefaults(data, defaultData, k, this.options.keySeparator, this.options.ignoreJSONStructure), f, lng, {
+        ...options,
+        ...data,
+        interpolationkey: k
+      });
+    };
+    this.resetRegExp();
+    const missingInterpolationHandler = options?.missingInterpolationHandler || this.options.missingInterpolationHandler;
+    const skipOnVariables = options?.interpolation?.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
+    const todos = [{
+      regex: this.regexpUnescape,
+      safeValue: val => regexSafe(val)
+    }, {
+      regex: this.regexp,
+      safeValue: val => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+    }];
+    todos.forEach(todo => {
+      replaces = 0;
+      while (match = todo.regex.exec(str)) {
+        const matchedVar = match[1].trim();
+        value = handleFormat(matchedVar);
+        if (value === undefined) {
+          if (typeof missingInterpolationHandler === 'function') {
+            const temp = missingInterpolationHandler(str, match, options);
+            value = isString(temp) ? temp : '';
+          } else if (options && Object.prototype.hasOwnProperty.call(options, matchedVar)) {
+            value = '';
+          } else if (skipOnVariables) {
+            value = match[0];
+            continue;
+          } else {
+            this.logger.warn(`missed to pass in variable ${matchedVar} for interpolating ${str}`);
+            value = '';
+          }
+        } else if (!isString(value) && !this.useRawValueToEscape) {
+          value = makeString(value);
+        }
+        const safeValue = todo.safeValue(value);
+        str = str.replace(match[0], safeValue);
+        if (skipOnVariables) {
+          todo.regex.lastIndex += value.length;
+          todo.regex.lastIndex -= match[0].length;
+        } else {
+          todo.regex.lastIndex = 0;
+        }
+        replaces++;
+        if (replaces >= this.maxReplaces) {
+          break;
+        }
+      }
+    });
+    return str;
+  }
+  nest(str, fc, options = {}) {
+    let match;
+    let value;
+    let clonedOptions;
+    const handleHasOptions = (key, inheritedOptions) => {
+      const sep = this.nestingOptionsSeparator;
+      if (key.indexOf(sep) < 0) return key;
+      const c = key.split(new RegExp(`${sep}[ ]*{`));
+      let optionsString = `{${c[1]}`;
+      key = c[0];
+      optionsString = this.interpolate(optionsString, clonedOptions);
+      const matchedSingleQuotes = optionsString.match(/'/g);
+      const matchedDoubleQuotes = optionsString.match(/"/g);
+      if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || matchedDoubleQuotes.length % 2 !== 0) {
+        optionsString = optionsString.replace(/'/g, '"');
+      }
+      try {
+        clonedOptions = JSON.parse(optionsString);
+        if (inheritedOptions) clonedOptions = {
+          ...inheritedOptions,
+          ...clonedOptions
+        };
+      } catch (e) {
+        this.logger.warn(`failed parsing options string in nesting for key ${key}`, e);
+        return `${key}${sep}${optionsString}`;
+      }
+      if (clonedOptions.defaultValue && clonedOptions.defaultValue.indexOf(this.prefix) > -1) delete clonedOptions.defaultValue;
+      return key;
+    };
+    while (match = this.nestingRegexp.exec(str)) {
+      let formatters = [];
+      clonedOptions = {
+        ...options
+      };
+      clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
+      clonedOptions.applyPostProcessor = false;
+      delete clonedOptions.defaultValue;
+      const keyEndIndex = /{.*}/.test(match[1]) ? match[1].lastIndexOf('}') + 1 : match[1].indexOf(this.formatSeparator);
+      if (keyEndIndex !== -1) {
+        formatters = match[1].slice(keyEndIndex).split(this.formatSeparator).map(elem => elem.trim()).filter(Boolean);
+        match[1] = match[1].slice(0, keyEndIndex);
+      }
+      value = fc(handleHasOptions.call(this, match[1].trim(), clonedOptions), clonedOptions);
+      if (value && match[0] === str && !isString(value)) return value;
+      if (!isString(value)) value = makeString(value);
+      if (!value) {
+        this.logger.warn(`missed to resolve ${match[1]} for nesting ${str}`);
+        value = '';
+      }
+      if (formatters.length) {
+        value = formatters.reduce((v, f) => this.format(v, f, options.lng, {
+          ...options,
+          interpolationkey: match[1].trim()
+        }), value.trim());
+      }
+      str = str.replace(match[0], value);
+      this.regexp.lastIndex = 0;
+    }
+    return str;
+  }
+}
+
+const parseFormatStr = formatStr => {
+  let formatName = formatStr.toLowerCase().trim();
+  const formatOptions = {};
+  if (formatStr.indexOf('(') > -1) {
+    const p = formatStr.split('(');
+    formatName = p[0].toLowerCase().trim();
+    const optStr = p[1].substring(0, p[1].length - 1);
+    if (formatName === 'currency' && optStr.indexOf(':') < 0) {
+      if (!formatOptions.currency) formatOptions.currency = optStr.trim();
+    } else if (formatName === 'relativetime' && optStr.indexOf(':') < 0) {
+      if (!formatOptions.range) formatOptions.range = optStr.trim();
+    } else {
+      const opts = optStr.split(';');
+      opts.forEach(opt => {
+        if (opt) {
+          const [key, ...rest] = opt.split(':');
+          const val = rest.join(':').trim().replace(/^'+|'+$/g, '');
+          const trimmedKey = key.trim();
+          if (!formatOptions[trimmedKey]) formatOptions[trimmedKey] = val;
+          if (val === 'false') formatOptions[trimmedKey] = false;
+          if (val === 'true') formatOptions[trimmedKey] = true;
+          if (!isNaN(val)) formatOptions[trimmedKey] = parseInt(val, 10);
+        }
+      });
+    }
+  }
+  return {
+    formatName,
+    formatOptions
+  };
+};
+const createCachedFormatter = fn => {
+  const cache = {};
+  return (v, l, o) => {
+    let optForCache = o;
+    if (o && o.interpolationkey && o.formatParams && o.formatParams[o.interpolationkey] && o[o.interpolationkey]) {
+      optForCache = {
+        ...optForCache,
+        [o.interpolationkey]: undefined
+      };
+    }
+    const key = l + JSON.stringify(optForCache);
+    let frm = cache[key];
+    if (!frm) {
+      frm = fn(getCleanedCode(l), o);
+      cache[key] = frm;
+    }
+    return frm(v);
+  };
+};
+const createNonCachedFormatter = fn => (v, l, o) => fn(getCleanedCode(l), o)(v);
+class Formatter {
+  constructor(options = {}) {
+    this.logger = baseLogger.create('formatter');
+    this.options = options;
+    this.init(options);
+  }
+  init(services, options = {
+    interpolation: {}
+  }) {
+    this.formatSeparator = options.interpolation.formatSeparator || ',';
+    const cf = options.cacheInBuiltFormats ? createCachedFormatter : createNonCachedFormatter;
+    this.formats = {
+      number: cf((lng, opt) => {
+        const formatter = new Intl.NumberFormat(lng, {
+          ...opt
+        });
+        return val => formatter.format(val);
+      }),
+      currency: cf((lng, opt) => {
+        const formatter = new Intl.NumberFormat(lng, {
+          ...opt,
+          style: 'currency'
+        });
+        return val => formatter.format(val);
+      }),
+      datetime: cf((lng, opt) => {
+        const formatter = new Intl.DateTimeFormat(lng, {
+          ...opt
+        });
+        return val => formatter.format(val);
+      }),
+      relativetime: cf((lng, opt) => {
+        const formatter = new Intl.RelativeTimeFormat(lng, {
+          ...opt
+        });
+        return val => formatter.format(val, opt.range || 'day');
+      }),
+      list: cf((lng, opt) => {
+        const formatter = new Intl.ListFormat(lng, {
+          ...opt
+        });
+        return val => formatter.format(val);
+      })
+    };
+  }
+  add(name, fc) {
+    this.formats[name.toLowerCase().trim()] = fc;
+  }
+  addCached(name, fc) {
+    this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
+  }
+  format(value, format, lng, options = {}) {
+    const formats = format.split(this.formatSeparator);
+    if (formats.length > 1 && formats[0].indexOf('(') > 1 && formats[0].indexOf(')') < 0 && formats.find(f => f.indexOf(')') > -1)) {
+      const lastIndex = formats.findIndex(f => f.indexOf(')') > -1);
+      formats[0] = [formats[0], ...formats.splice(1, lastIndex)].join(this.formatSeparator);
+    }
+    const result = formats.reduce((mem, f) => {
+      const {
+        formatName,
+        formatOptions
+      } = parseFormatStr(f);
+      if (this.formats[formatName]) {
+        let formatted = mem;
+        try {
+          const valOptions = options?.formatParams?.[options.interpolationkey] || {};
+          const l = valOptions.locale || valOptions.lng || options.locale || options.lng || lng;
+          formatted = this.formats[formatName](mem, l, {
+            ...formatOptions,
+            ...options,
+            ...valOptions
+          });
+        } catch (error) {
+          this.logger.warn(error);
+        }
+        return formatted;
+      } else {
+        this.logger.warn(`there was no format function for ${formatName}`);
+      }
+      return mem;
+    }, value);
+    return result;
+  }
+}
+
+const removePending = (q, name) => {
+  if (q.pending[name] !== undefined) {
+    delete q.pending[name];
+    q.pendingCount--;
+  }
+};
+class Connector extends EventEmitter {
+  constructor(backend, store, services, options = {}) {
+    super();
+    this.backend = backend;
+    this.store = store;
+    this.services = services;
+    this.languageUtils = services.languageUtils;
+    this.options = options;
+    this.logger = baseLogger.create('backendConnector');
+    this.waitingReads = [];
+    this.maxParallelReads = options.maxParallelReads || 10;
+    this.readingCalls = 0;
+    this.maxRetries = options.maxRetries >= 0 ? options.maxRetries : 5;
+    this.retryTimeout = options.retryTimeout >= 1 ? options.retryTimeout : 350;
+    this.state = {};
+    this.queue = [];
+    this.backend?.init?.(services, options.backend, options);
+  }
+  queueLoad(languages, namespaces, options, callback) {
+    const toLoad = {};
+    const pending = {};
+    const toLoadLanguages = {};
+    const toLoadNamespaces = {};
+    languages.forEach(lng => {
+      let hasAllNamespaces = true;
+      namespaces.forEach(ns => {
+        const name = `${lng}|${ns}`;
+        if (!options.reload && this.store.hasResourceBundle(lng, ns)) {
+          this.state[name] = 2;
+        } else if (this.state[name] < 0) ; else if (this.state[name] === 1) {
+          if (pending[name] === undefined) pending[name] = true;
+        } else {
+          this.state[name] = 1;
+          hasAllNamespaces = false;
+          if (pending[name] === undefined) pending[name] = true;
+          if (toLoad[name] === undefined) toLoad[name] = true;
+          if (toLoadNamespaces[ns] === undefined) toLoadNamespaces[ns] = true;
+        }
+      });
+      if (!hasAllNamespaces) toLoadLanguages[lng] = true;
+    });
+    if (Object.keys(toLoad).length || Object.keys(pending).length) {
+      this.queue.push({
+        pending,
+        pendingCount: Object.keys(pending).length,
+        loaded: {},
+        errors: [],
+        callback
+      });
+    }
+    return {
+      toLoad: Object.keys(toLoad),
+      pending: Object.keys(pending),
+      toLoadLanguages: Object.keys(toLoadLanguages),
+      toLoadNamespaces: Object.keys(toLoadNamespaces)
+    };
+  }
+  loaded(name, err, data) {
+    const s = name.split('|');
+    const lng = s[0];
+    const ns = s[1];
+    if (err) this.emit('failedLoading', lng, ns, err);
+    if (!err && data) {
+      this.store.addResourceBundle(lng, ns, data, undefined, undefined, {
+        skipCopy: true
+      });
+    }
+    this.state[name] = err ? -1 : 2;
+    if (err && data) this.state[name] = 0;
+    const loaded = {};
+    this.queue.forEach(q => {
+      pushPath(q.loaded, [lng], ns);
+      removePending(q, name);
+      if (err) q.errors.push(err);
+      if (q.pendingCount === 0 && !q.done) {
+        Object.keys(q.loaded).forEach(l => {
+          if (!loaded[l]) loaded[l] = {};
+          const loadedKeys = q.loaded[l];
+          if (loadedKeys.length) {
+            loadedKeys.forEach(n => {
+              if (loaded[l][n] === undefined) loaded[l][n] = true;
+            });
+          }
+        });
+        q.done = true;
+        if (q.errors.length) {
+          q.callback(q.errors);
+        } else {
+          q.callback();
+        }
+      }
+    });
+    this.emit('loaded', loaded);
+    this.queue = this.queue.filter(q => !q.done);
+  }
+  read(lng, ns, fcName, tried = 0, wait = this.retryTimeout, callback) {
+    if (!lng.length) return callback(null, {});
+    if (this.readingCalls >= this.maxParallelReads) {
+      this.waitingReads.push({
+        lng,
+        ns,
+        fcName,
+        tried,
+        wait,
+        callback
+      });
+      return;
+    }
+    this.readingCalls++;
+    const resolver = (err, data) => {
+      this.readingCalls--;
+      if (this.waitingReads.length > 0) {
+        const next = this.waitingReads.shift();
+        this.read(next.lng, next.ns, next.fcName, next.tried, next.wait, next.callback);
+      }
+      if (err && data && tried < this.maxRetries) {
+        setTimeout(() => {
+          this.read.call(this, lng, ns, fcName, tried + 1, wait * 2, callback);
+        }, wait);
+        return;
+      }
+      callback(err, data);
+    };
+    const fc = this.backend[fcName].bind(this.backend);
+    if (fc.length === 2) {
+      try {
+        const r = fc(lng, ns);
+        if (r && typeof r.then === 'function') {
+          r.then(data => resolver(null, data)).catch(resolver);
+        } else {
+          resolver(null, r);
+        }
+      } catch (err) {
+        resolver(err);
+      }
+      return;
+    }
+    return fc(lng, ns, resolver);
+  }
+  prepareLoading(languages, namespaces, options = {}, callback) {
+    if (!this.backend) {
+      this.logger.warn('No backend was added via i18next.use. Will not load resources.');
+      return callback && callback();
+    }
+    if (isString(languages)) languages = this.languageUtils.toResolveHierarchy(languages);
+    if (isString(namespaces)) namespaces = [namespaces];
+    const toLoad = this.queueLoad(languages, namespaces, options, callback);
+    if (!toLoad.toLoad.length) {
+      if (!toLoad.pending.length) callback();
+      return null;
+    }
+    toLoad.toLoad.forEach(name => {
+      this.loadOne(name);
+    });
+  }
+  load(languages, namespaces, callback) {
+    this.prepareLoading(languages, namespaces, {}, callback);
+  }
+  reload(languages, namespaces, callback) {
+    this.prepareLoading(languages, namespaces, {
+      reload: true
+    }, callback);
+  }
+  loadOne(name, prefix = '') {
+    const s = name.split('|');
+    const lng = s[0];
+    const ns = s[1];
+    this.read(lng, ns, 'read', undefined, undefined, (err, data) => {
+      if (err) this.logger.warn(`${prefix}loading namespace ${ns} for language ${lng} failed`, err);
+      if (!err && data) this.logger.log(`${prefix}loaded namespace ${ns} for language ${lng}`, data);
+      this.loaded(name, err, data);
+    });
+  }
+  saveMissing(languages, namespace, key, fallbackValue, isUpdate, options = {}, clb = () => {}) {
+    if (this.services?.utils?.hasLoadedNamespace && !this.services?.utils?.hasLoadedNamespace(namespace)) {
+      this.logger.warn(`did not save key "${key}" as the namespace "${namespace}" was not yet loaded`, 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
+      return;
+    }
+    if (key === undefined || key === null || key === '') return;
+    if (this.backend?.create) {
+      const opts = {
+        ...options,
+        isUpdate
+      };
+      const fc = this.backend.create.bind(this.backend);
+      if (fc.length < 6) {
+        try {
+          let r;
+          if (fc.length === 5) {
+            r = fc(languages, namespace, key, fallbackValue, opts);
+          } else {
+            r = fc(languages, namespace, key, fallbackValue);
+          }
+          if (r && typeof r.then === 'function') {
+            r.then(data => clb(null, data)).catch(clb);
+          } else {
+            clb(null, r);
+          }
+        } catch (err) {
+          clb(err);
+        }
+      } else {
+        fc(languages, namespace, key, fallbackValue, clb, opts);
+      }
+    }
+    if (!languages || !languages[0]) return;
+    this.store.addResource(languages[0], namespace, key, fallbackValue);
+  }
+}
+
+const get = () => ({
+  debug: false,
+  initAsync: true,
+  ns: ['translation'],
+  defaultNS: ['translation'],
+  fallbackLng: ['dev'],
+  fallbackNS: false,
+  supportedLngs: false,
+  nonExplicitSupportedLngs: false,
+  load: 'all',
+  preload: false,
+  simplifyPluralSuffix: true,
+  keySeparator: '.',
+  nsSeparator: ':',
+  pluralSeparator: '_',
+  contextSeparator: '_',
+  partialBundledLanguages: false,
+  saveMissing: false,
+  updateMissing: false,
+  saveMissingTo: 'fallback',
+  saveMissingPlurals: true,
+  missingKeyHandler: false,
+  missingInterpolationHandler: false,
+  postProcess: false,
+  postProcessPassResolved: false,
+  returnNull: false,
+  returnEmptyString: true,
+  returnObjects: false,
+  joinArrays: false,
+  returnedObjectHandler: false,
+  parseMissingKeyHandler: false,
+  appendNamespaceToMissingKey: false,
+  appendNamespaceToCIMode: false,
+  overloadTranslationOptionHandler: args => {
+    let ret = {};
+    if (typeof args[1] === 'object') ret = args[1];
+    if (isString(args[1])) ret.defaultValue = args[1];
+    if (isString(args[2])) ret.tDescription = args[2];
+    if (typeof args[2] === 'object' || typeof args[3] === 'object') {
+      const options = args[3] || args[2];
+      Object.keys(options).forEach(key => {
+        ret[key] = options[key];
+      });
+    }
+    return ret;
+  },
+  interpolation: {
+    escapeValue: true,
+    format: value => value,
+    prefix: '{{',
+    suffix: '}}',
+    formatSeparator: ',',
+    unescapePrefix: '-',
+    nestingPrefix: '$t(',
+    nestingSuffix: ')',
+    nestingOptionsSeparator: ',',
+    maxReplaces: 1000,
+    skipOnVariables: true
+  },
+  cacheInBuiltFormats: true
+});
+const transformOptions = options => {
+  if (isString(options.ns)) options.ns = [options.ns];
+  if (isString(options.fallbackLng)) options.fallbackLng = [options.fallbackLng];
+  if (isString(options.fallbackNS)) options.fallbackNS = [options.fallbackNS];
+  if (options.supportedLngs?.indexOf?.('cimode') < 0) {
+    options.supportedLngs = options.supportedLngs.concat(['cimode']);
+  }
+  if (typeof options.initImmediate === 'boolean') options.initAsync = options.initImmediate;
+  return options;
+};
+
+const noop = () => {};
+const bindMemberFunctions = inst => {
+  const mems = Object.getOwnPropertyNames(Object.getPrototypeOf(inst));
+  mems.forEach(mem => {
+    if (typeof inst[mem] === 'function') {
+      inst[mem] = inst[mem].bind(inst);
+    }
+  });
+};
+class I18n extends EventEmitter {
+  constructor(options = {}, callback) {
+    super();
+    this.options = transformOptions(options);
+    this.services = {};
+    this.logger = baseLogger;
+    this.modules = {
+      external: []
+    };
+    bindMemberFunctions(this);
+    if (callback && !this.isInitialized && !options.isClone) {
+      if (!this.options.initAsync) {
+        this.init(options, callback);
+        return this;
+      }
+      setTimeout(() => {
+        this.init(options, callback);
+      }, 0);
+    }
+  }
+  init(options = {}, callback) {
+    this.isInitializing = true;
+    if (typeof options === 'function') {
+      callback = options;
+      options = {};
+    }
+    if (options.defaultNS == null && options.ns) {
+      if (isString(options.ns)) {
+        options.defaultNS = options.ns;
+      } else if (options.ns.indexOf('translation') < 0) {
+        options.defaultNS = options.ns[0];
+      }
+    }
+    const defOpts = get();
+    this.options = {
+      ...defOpts,
+      ...this.options,
+      ...transformOptions(options)
+    };
+    this.options.interpolation = {
+      ...defOpts.interpolation,
+      ...this.options.interpolation
+    };
+    if (options.keySeparator !== undefined) {
+      this.options.userDefinedKeySeparator = options.keySeparator;
+    }
+    if (options.nsSeparator !== undefined) {
+      this.options.userDefinedNsSeparator = options.nsSeparator;
+    }
+    if (typeof this.options.overloadTranslationOptionHandler !== 'function') {
+      this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
+    }
+    if (this.options.debug === true) {
+      if (typeof console !== 'undefined') console.warn('i18next is maintained with support from locize.com — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com');
+    }
+    const createClassOnDemand = ClassOrObject => {
+      if (!ClassOrObject) return null;
+      if (typeof ClassOrObject === 'function') return new ClassOrObject();
+      return ClassOrObject;
+    };
+    if (!this.options.isClone) {
+      if (this.modules.logger) {
+        baseLogger.init(createClassOnDemand(this.modules.logger), this.options);
+      } else {
+        baseLogger.init(null, this.options);
+      }
+      let formatter;
+      if (this.modules.formatter) {
+        formatter = this.modules.formatter;
+      } else {
+        formatter = Formatter;
+      }
+      const lu = new LanguageUtil(this.options);
+      this.store = new ResourceStore(this.options.resources, this.options);
+      const s = this.services;
+      s.logger = baseLogger;
+      s.resourceStore = this.store;
+      s.languageUtils = lu;
+      s.pluralResolver = new PluralResolver(lu, {
+        prepend: this.options.pluralSeparator,
+        simplifyPluralSuffix: this.options.simplifyPluralSuffix
+      });
+      const usingLegacyFormatFunction = this.options.interpolation.format && this.options.interpolation.format !== defOpts.interpolation.format;
+      if (usingLegacyFormatFunction) {
+        this.logger.deprecate(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
+      }
+      if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
+        s.formatter = createClassOnDemand(formatter);
+        if (s.formatter.init) s.formatter.init(s, this.options);
+        this.options.interpolation.format = s.formatter.format.bind(s.formatter);
+      }
+      s.interpolator = new Interpolator(this.options);
+      s.utils = {
+        hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
+      };
+      s.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s.resourceStore, s, this.options);
+      s.backendConnector.on('*', (event, ...args) => {
+        this.emit(event, ...args);
+      });
+      if (this.modules.languageDetector) {
+        s.languageDetector = createClassOnDemand(this.modules.languageDetector);
+        if (s.languageDetector.init) s.languageDetector.init(s, this.options.detection, this.options);
+      }
+      if (this.modules.i18nFormat) {
+        s.i18nFormat = createClassOnDemand(this.modules.i18nFormat);
+        if (s.i18nFormat.init) s.i18nFormat.init(this);
+      }
+      this.translator = new Translator(this.services, this.options);
+      this.translator.on('*', (event, ...args) => {
+        this.emit(event, ...args);
+      });
+      this.modules.external.forEach(m => {
+        if (m.init) m.init(this);
+      });
+    }
+    this.format = this.options.interpolation.format;
+    if (!callback) callback = noop;
+    if (this.options.fallbackLng && !this.services.languageDetector && !this.options.lng) {
+      const codes = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
+      if (codes.length > 0 && codes[0] !== 'dev') this.options.lng = codes[0];
+    }
+    if (!this.services.languageDetector && !this.options.lng) {
+      this.logger.warn('init: no languageDetector is used and no lng is defined');
+    }
+    const storeApi = ['getResource', 'hasResourceBundle', 'getResourceBundle', 'getDataByLanguage'];
+    storeApi.forEach(fcName => {
+      this[fcName] = (...args) => this.store[fcName](...args);
+    });
+    const storeApiChained = ['addResource', 'addResources', 'addResourceBundle', 'removeResourceBundle'];
+    storeApiChained.forEach(fcName => {
+      this[fcName] = (...args) => {
+        this.store[fcName](...args);
+        return this;
+      };
+    });
+    const deferred = defer();
+    const load = () => {
+      const finish = (err, t) => {
+        this.isInitializing = false;
+        if (this.isInitialized && !this.initializedStoreOnce) this.logger.warn('init: i18next is already initialized. You should call init just once!');
+        this.isInitialized = true;
+        if (!this.options.isClone) this.logger.log('initialized', this.options);
+        this.emit('initialized', this.options);
+        deferred.resolve(t);
+        callback(err, t);
+      };
+      if (this.languages && !this.isInitialized) return finish(null, this.t.bind(this));
+      this.changeLanguage(this.options.lng, finish);
+    };
+    if (this.options.resources || !this.options.initAsync) {
+      load();
+    } else {
+      setTimeout(load, 0);
+    }
+    return deferred;
+  }
+  loadResources(language, callback = noop) {
+    let usedCallback = callback;
+    const usedLng = isString(language) ? language : this.language;
+    if (typeof language === 'function') usedCallback = language;
+    if (!this.options.resources || this.options.partialBundledLanguages) {
+      if (usedLng?.toLowerCase() === 'cimode' && (!this.options.preload || this.options.preload.length === 0)) return usedCallback();
+      const toLoad = [];
+      const append = lng => {
+        if (!lng) return;
+        if (lng === 'cimode') return;
+        const lngs = this.services.languageUtils.toResolveHierarchy(lng);
+        lngs.forEach(l => {
+          if (l === 'cimode') return;
+          if (toLoad.indexOf(l) < 0) toLoad.push(l);
+        });
+      };
+      if (!usedLng) {
+        const fallbacks = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
+        fallbacks.forEach(l => append(l));
+      } else {
+        append(usedLng);
+      }
+      this.options.preload?.forEach?.(l => append(l));
+      this.services.backendConnector.load(toLoad, this.options.ns, e => {
+        if (!e && !this.resolvedLanguage && this.language) this.setResolvedLanguage(this.language);
+        usedCallback(e);
+      });
+    } else {
+      usedCallback(null);
+    }
+  }
+  reloadResources(lngs, ns, callback) {
+    const deferred = defer();
+    if (typeof lngs === 'function') {
+      callback = lngs;
+      lngs = undefined;
+    }
+    if (typeof ns === 'function') {
+      callback = ns;
+      ns = undefined;
+    }
+    if (!lngs) lngs = this.languages;
+    if (!ns) ns = this.options.ns;
+    if (!callback) callback = noop;
+    this.services.backendConnector.reload(lngs, ns, err => {
+      deferred.resolve();
+      callback(err);
+    });
+    return deferred;
+  }
+  use(module) {
+    if (!module) throw new Error('You are passing an undefined module! Please check the object you are passing to i18next.use()');
+    if (!module.type) throw new Error('You are passing a wrong module! Please check the object you are passing to i18next.use()');
+    if (module.type === 'backend') {
+      this.modules.backend = module;
+    }
+    if (module.type === 'logger' || module.log && module.warn && module.error) {
+      this.modules.logger = module;
+    }
+    if (module.type === 'languageDetector') {
+      this.modules.languageDetector = module;
+    }
+    if (module.type === 'i18nFormat') {
+      this.modules.i18nFormat = module;
+    }
+    if (module.type === 'postProcessor') {
+      postProcessor.addPostProcessor(module);
+    }
+    if (module.type === 'formatter') {
+      this.modules.formatter = module;
+    }
+    if (module.type === '3rdParty') {
+      this.modules.external.push(module);
+    }
+    return this;
+  }
+  setResolvedLanguage(l) {
+    if (!l || !this.languages) return;
+    if (['cimode', 'dev'].indexOf(l) > -1) return;
+    for (let li = 0; li < this.languages.length; li++) {
+      const lngInLngs = this.languages[li];
+      if (['cimode', 'dev'].indexOf(lngInLngs) > -1) continue;
+      if (this.store.hasLanguageSomeTranslations(lngInLngs)) {
+        this.resolvedLanguage = lngInLngs;
+        break;
+      }
+    }
+    if (!this.resolvedLanguage && this.languages.indexOf(l) < 0 && this.store.hasLanguageSomeTranslations(l)) {
+      this.resolvedLanguage = l;
+      this.languages.unshift(l);
+    }
+  }
+  changeLanguage(lng, callback) {
+    this.isLanguageChangingTo = lng;
+    const deferred = defer();
+    this.emit('languageChanging', lng);
+    const setLngProps = l => {
+      this.language = l;
+      this.languages = this.services.languageUtils.toResolveHierarchy(l);
+      this.resolvedLanguage = undefined;
+      this.setResolvedLanguage(l);
+    };
+    const done = (err, l) => {
+      if (l) {
+        if (this.isLanguageChangingTo === lng) {
+          setLngProps(l);
+          this.translator.changeLanguage(l);
+          this.isLanguageChangingTo = undefined;
+          this.emit('languageChanged', l);
+          this.logger.log('languageChanged', l);
+        }
+      } else {
+        this.isLanguageChangingTo = undefined;
+      }
+      deferred.resolve((...args) => this.t(...args));
+      if (callback) callback(err, (...args) => this.t(...args));
+    };
+    const setLng = lngs => {
+      if (!lng && !lngs && this.services.languageDetector) lngs = [];
+      const fl = isString(lngs) ? lngs : lngs && lngs[0];
+      const l = this.store.hasLanguageSomeTranslations(fl) ? fl : this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
+      if (l) {
+        if (!this.language) {
+          setLngProps(l);
+        }
+        if (!this.translator.language) this.translator.changeLanguage(l);
+        this.services.languageDetector?.cacheUserLanguage?.(l);
+      }
+      this.loadResources(l, err => {
+        done(err, l);
+      });
+    };
+    if (!lng && this.services.languageDetector && !this.services.languageDetector.async) {
+      setLng(this.services.languageDetector.detect());
+    } else if (!lng && this.services.languageDetector && this.services.languageDetector.async) {
+      if (this.services.languageDetector.detect.length === 0) {
+        this.services.languageDetector.detect().then(setLng);
+      } else {
+        this.services.languageDetector.detect(setLng);
+      }
+    } else {
+      setLng(lng);
+    }
+    return deferred;
+  }
+  getFixedT(lng, ns, keyPrefix) {
+    const fixedT = (key, opts, ...rest) => {
+      let o;
+      if (typeof opts !== 'object') {
+        o = this.options.overloadTranslationOptionHandler([key, opts].concat(rest));
+      } else {
+        o = {
+          ...opts
+        };
+      }
+      o.lng = o.lng || fixedT.lng;
+      o.lngs = o.lngs || fixedT.lngs;
+      o.ns = o.ns || fixedT.ns;
+      if (o.keyPrefix !== '') o.keyPrefix = o.keyPrefix || keyPrefix || fixedT.keyPrefix;
+      const keySeparator = this.options.keySeparator || '.';
+      let resultKey;
+      if (o.keyPrefix && Array.isArray(key)) {
+        resultKey = key.map(k => {
+          if (typeof k === 'function') k = keysFromSelector(k, {
+            ...this.options,
+            ...opts
+          });
+          return `${o.keyPrefix}${keySeparator}${k}`;
+        });
+      } else {
+        if (typeof key === 'function') key = keysFromSelector(key, {
+          ...this.options,
+          ...opts
+        });
+        resultKey = o.keyPrefix ? `${o.keyPrefix}${keySeparator}${key}` : key;
+      }
+      return this.t(resultKey, o);
+    };
+    if (isString(lng)) {
+      fixedT.lng = lng;
+    } else {
+      fixedT.lngs = lng;
+    }
+    fixedT.ns = ns;
+    fixedT.keyPrefix = keyPrefix;
+    return fixedT;
+  }
+  t(...args) {
+    return this.translator?.translate(...args);
+  }
+  exists(...args) {
+    return this.translator?.exists(...args);
+  }
+  setDefaultNamespace(ns) {
+    this.options.defaultNS = ns;
+  }
+  hasLoadedNamespace(ns, options = {}) {
+    if (!this.isInitialized) {
+      this.logger.warn('hasLoadedNamespace: i18next was not initialized', this.languages);
+      return false;
+    }
+    if (!this.languages || !this.languages.length) {
+      this.logger.warn('hasLoadedNamespace: i18n.languages were undefined or empty', this.languages);
+      return false;
+    }
+    const lng = options.lng || this.resolvedLanguage || this.languages[0];
+    const fallbackLng = this.options ? this.options.fallbackLng : false;
+    const lastLng = this.languages[this.languages.length - 1];
+    if (lng.toLowerCase() === 'cimode') return true;
+    const loadNotPending = (l, n) => {
+      const loadState = this.services.backendConnector.state[`${l}|${n}`];
+      return loadState === -1 || loadState === 0 || loadState === 2;
+    };
+    if (options.precheck) {
+      const preResult = options.precheck(this, loadNotPending);
+      if (preResult !== undefined) return preResult;
+    }
+    if (this.hasResourceBundle(lng, ns)) return true;
+    if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
+    if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+    return false;
+  }
+  loadNamespaces(ns, callback) {
+    const deferred = defer();
+    if (!this.options.ns) {
+      if (callback) callback();
+      return Promise.resolve();
+    }
+    if (isString(ns)) ns = [ns];
+    ns.forEach(n => {
+      if (this.options.ns.indexOf(n) < 0) this.options.ns.push(n);
+    });
+    this.loadResources(err => {
+      deferred.resolve();
+      if (callback) callback(err);
+    });
+    return deferred;
+  }
+  loadLanguages(lngs, callback) {
+    const deferred = defer();
+    if (isString(lngs)) lngs = [lngs];
+    const preloaded = this.options.preload || [];
+    const newLngs = lngs.filter(lng => preloaded.indexOf(lng) < 0 && this.services.languageUtils.isSupportedCode(lng));
+    if (!newLngs.length) {
+      if (callback) callback();
+      return Promise.resolve();
+    }
+    this.options.preload = preloaded.concat(newLngs);
+    this.loadResources(err => {
+      deferred.resolve();
+      if (callback) callback(err);
+    });
+    return deferred;
+  }
+  dir(lng) {
+    if (!lng) lng = this.resolvedLanguage || (this.languages?.length > 0 ? this.languages[0] : this.language);
+    if (!lng) return 'rtl';
+    try {
+      const l = new Intl.Locale(lng);
+      if (l && l.getTextInfo) {
+        const ti = l.getTextInfo();
+        if (ti && ti.direction) return ti.direction;
+      }
+    } catch (e) {}
+    const rtlLngs = ['ar', 'shu', 'sqr', 'ssh', 'xaa', 'yhd', 'yud', 'aao', 'abh', 'abv', 'acm', 'acq', 'acw', 'acx', 'acy', 'adf', 'ads', 'aeb', 'aec', 'afb', 'ajp', 'apc', 'apd', 'arb', 'arq', 'ars', 'ary', 'arz', 'auz', 'avl', 'ayh', 'ayl', 'ayn', 'ayp', 'bbz', 'pga', 'he', 'iw', 'ps', 'pbt', 'pbu', 'pst', 'prp', 'prd', 'ug', 'ur', 'ydd', 'yds', 'yih', 'ji', 'yi', 'hbo', 'men', 'xmn', 'fa', 'jpr', 'peo', 'pes', 'prs', 'dv', 'sam', 'ckb'];
+    const languageUtils = this.services?.languageUtils || new LanguageUtil(get());
+    if (lng.toLowerCase().indexOf('-latn') > 1) return 'ltr';
+    return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
+  }
+  static createInstance(options = {}, callback) {
+    const instance = new I18n(options, callback);
+    instance.createInstance = I18n.createInstance;
+    return instance;
+  }
+  cloneInstance(options = {}, callback = noop) {
+    const forkResourceStore = options.forkResourceStore;
+    if (forkResourceStore) delete options.forkResourceStore;
+    const mergedOptions = {
+      ...this.options,
+      ...options,
+      ...{
+        isClone: true
+      }
+    };
+    const clone = new I18n(mergedOptions);
+    if (options.debug !== undefined || options.prefix !== undefined) {
+      clone.logger = clone.logger.clone(options);
+    }
+    const membersToCopy = ['store', 'services', 'language'];
+    membersToCopy.forEach(m => {
+      clone[m] = this[m];
+    });
+    clone.services = {
+      ...this.services
+    };
+    clone.services.utils = {
+      hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+    };
+    if (forkResourceStore) {
+      const clonedData = Object.keys(this.store.data).reduce((prev, l) => {
+        prev[l] = {
+          ...this.store.data[l]
         };
+        prev[l] = Object.keys(prev[l]).reduce((acc, n) => {
+          acc[n] = {
+            ...prev[l][n]
+          };
+          return acc;
+        }, prev[l]);
+        return prev;
+      }, {});
+      clone.store = new ResourceStore(clonedData, mergedOptions);
+      clone.services.resourceStore = clone.store;
+    }
+    if (options.interpolation) {
+      const defOpts = get();
+      const mergedInterpolation = {
+        ...defOpts.interpolation,
+        ...this.options.interpolation,
+        ...options.interpolation
+      };
+      const mergedForInterpolator = {
+        ...mergedOptions,
+        interpolation: mergedInterpolation
+      };
+      clone.services.interpolator = new Interpolator(mergedForInterpolator);
     }
+    clone.translator = new Translator(clone.services, mergedOptions);
+    clone.translator.on('*', (event, ...args) => {
+      clone.emit(event, ...args);
+    });
+    clone.init(mergedOptions, callback);
+    clone.translator.options = mergedOptions;
+    clone.translator.backendConnector.services.utils = {
+      hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+    };
+    return clone;
+  }
+  toJSON() {
+    return {
+      options: this.options,
+      store: this.store,
+      language: this.language,
+      languages: this.languages,
+      resolvedLanguage: this.resolvedLanguage
+    };
+  }
 }
+const instance = I18n.createInstance();
 
-var styleService = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    cleanupOldStyles: cleanupOldStyles,
-    deleteStyleById: deleteStyleById,
-    deleteStyles: deleteStyles,
-    downloadStyleWithProvider: downloadStyleWithProvider,
-    downloadStyles: downloadStyles,
-    getStyleStats: getStyleStats,
-    isStyleDownloaded: isStyleDownloaded,
-    loadStyleById: loadStyleById,
-    loadStyles: loadStyles
-});
+instance.createInstance;
+instance.dir;
+instance.init;
+instance.loadResources;
+instance.reloadResources;
+instance.use;
+instance.changeLanguage;
+instance.getFixedT;
+instance.t;
+instance.exists;
+instance.setDefaultNamespace;
+instance.hasLoadedNamespace;
+instance.loadNamespaces;
+instance.loadLanguages;
 
 /**
- * Simplified theme system for dark/light/system mode management
- * Now that all components use Tailwind CSS, we only need basic theme switching
+ * English translations for map-gl-offline
  */
-const lightTheme = {
-    mode: 'light',
-    preference: 'light',
+const en = {
+    // General
+    'app.title': 'Offline Manager',
+    'app.close': 'Close',
+    'app.cancel': 'Cancel',
+    'app.save': 'Save',
+    'app.delete': 'Delete',
+    'app.confirm': 'Confirm',
+    'app.ok': 'OK',
+    'app.loading': 'Loading...',
+    'app.error': 'Error',
+    'app.success': 'Success',
+    'app.warning': 'Warning',
+    'app.refresh': 'Refresh',
+    'app.details': 'Details',
+    'app.focus': 'Focus',
+    // Theme
+    'theme.toggle': 'Toggle theme',
+    'theme.light': 'Light',
+    'theme.dark': 'Dark',
+    // Language
+    'language.select': 'Select language',
+    'language.en': 'English',
+    'language.ar': 'Arabic',
+    // Header
+    'header.title': 'Offline Manager',
+    'header.subtitle': '{{count}} regions • {{size}} total',
+    // Actions
+    'actions.addRegion': 'Add Region',
+    'actions.refresh': 'Refresh',
+    'actions.loadStyle': 'Load Style',
+    'actions.fixTiles': 'Fix Tiles',
+    'actions.deleteStyle': 'Delete Style',
+    'actions.redownload': 'Re-download',
+    'actions.importExport': 'Import/Export',
+    // Region Form
+    'regionForm.title': 'Download Offline Region',
+    'regionForm.subtitle': 'Selected area: {{area}} km²',
+    'regionForm.name': 'Region Name',
+    'regionForm.namePlaceholder': 'e.g., Downtown District',
+    'regionForm.minZoom': 'Min Zoom',
+    'regionForm.maxZoom': 'Max Zoom',
+    'regionForm.styleUrl': 'Style URL',
+    'regionForm.provider': 'Style Provider',
+    'regionForm.providerAuto': 'Auto-detect',
+    'regionForm.providerMapbox': 'Mapbox GL (requires access token)',
+    'regionForm.providerMaplibre': 'MapLibre GL (open source)',
+    'regionForm.providerInfo': 'Auto-detect will analyze the style URL to determine the provider',
+    'regionForm.accessToken': 'Mapbox Access Token',
+    'regionForm.accessTokenRequired': 'Required',
+    'regionForm.accessTokenHelp': 'Get your access token from',
+    'regionForm.downloadRegion': 'Download Region',
+    'regionForm.area': 'Area',
+    'regionForm.bounds': 'Bounds',
+    // Region List
+    'regionList.empty': 'No offline styles or regions found. Click "Add Region" to get started.',
+    'regionList.emptyFallback': 'No offline regions found. Click "Add Region" to get started.',
+    'regionList.orphanedHeader': 'Regions without Style',
+    'regionList.orphanedDescription': '{{count}} region(s) not associated with any style',
+    'regionList.zoom': 'Zoom',
+    'regionList.downloaded': 'Downloaded',
+    'regionList.size': 'Size',
+    'regionList.styleId': 'Style ID',
+    'regionList.storedStyleSize': 'Stored Style Size',
+    // Region Details
+    'regionDetails.title': 'Region Details',
+    'regionDetails.focusOnMap': 'Focus on Map',
+    // Style
+    'style.unnamedStyle': 'Unnamed Style',
+    'style.regions': '{{count}} region(s)',
+    // Delete Confirmation
+    'delete.regionTitle': 'Delete Region',
+    'delete.regionMessage': 'Are you sure you want to delete the region "{{name}}"? This action cannot be undone.',
+    'delete.styleTitle': 'Delete Style',
+    'delete.styleMessage': 'Are you sure you want to delete the style "{{name}}"? This action cannot be undone and will affect associated regions.',
+    // Re-download
+    'redownload.title': 'Re-download Region',
+    'redownload.message': 'Re-download "{{name}}"?\n\nThis will:\n• Delete existing tiles and resources\n• Re-download all data with current settings\n• Fix any corrupted or outdated resources',
+    'redownload.button': 'Re-download',
+    // Fix Tiles
+    'fixTiles.noIssuesTitle': 'No Issues Found',
+    'fixTiles.noIssuesMessage': 'No compressed tiles detected. Your tiles are already in the correct format!',
+    'fixTiles.title': 'Fix Compressed Tiles',
+    'fixTiles.message': "Found {{count}} compressed tiles that may cause rendering errors.\n\nThis will:\n1. Remove all compressed tiles ({{count}} tiles)\n2. You'll need to re-download regions to get properly decompressed tiles\n\nContinue?",
+    'fixTiles.button': 'Fix Tiles',
+    'fixTiles.completeTitle': 'Cleanup Complete',
+    'fixTiles.completeMessage': 'Successfully removed {{count}} compressed tiles.\n\nPlease re-download your regions to get the fixed tiles.',
+    // Download Progress
+    'download.active': 'Active Downloads',
+    'download.phase.style': 'Style',
+    'download.phase.sprites': 'Sprites',
+    'download.phase.glyphs': 'Glyphs',
+    'download.phase.tiles': 'Tiles',
+    // Style Selection
+    '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',
+    'error.mapNotInitialized': 'Map is not initialized. Please ensure the map is loaded before loading a style.',
+    'error.invalidStyleData': 'Invalid style data. The style may be corrupted.',
+    'error.styleMissingSources': 'Style has no sources defined. The style may be incomplete.',
+    'error.styleMissingLayers': 'Style has no layers defined. The style may be incomplete.',
+    'error.regionNotFound': 'Region not found',
+    'error.downloadFailed': 'Download failed',
+    'error.deleteFailed': 'Failed to delete',
+    'error.loadStyleFailed': 'Failed to load style',
+    // Warnings
+    'warning.compressedTiles': 'Found {{count}} compressed tiles that may cause rendering issues.',
+    'warning.compressedTilesRecommendation': 'Recommended: Use the "Re-download" button to fix this issue.',
+    'warning.continueAnyway': 'Do you want to continue loading the style anyway?',
+    // Drawing Tool
+    'drawing.instructions': 'Click and drag to draw a region',
+    'drawing.cancel': 'Press ESC to cancel',
+    // Offline Maps Button
+    'button.offlineMaps': 'Offline Maps',
+    // Region Details Modal
+    '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',
+    // Active Downloads
+    'download.activeCount': 'Active Downloads ({{count}})',
+    // Panel Manager additional strings
+    'panel.downloadedRegions': 'Downloaded Regions',
+    'panel.noExpiry': 'No expiry',
+    'panel.noBounds': 'No bounds',
+    'panel.sources': 'sources',
+    // Empty/Error States
+    'emptyState.title': 'No items',
+    'emptyState.message': 'There are no items to display',
+    'errorState.message': 'Something went wrong',
+    'errorState.retry': 'Try Again',
+    // List
+    'list.empty': 'No items to display',
+    'list.noItemsFound': 'No items found',
+    // Toast
+    'toast.dismiss': 'Dismiss notification',
+    // Control Buttons
+    'control.offlineMapManager': 'Offline Map Manager',
+    'control.cancelSelection': 'Cancel Selection',
+    'control.saveSelectedRegion': 'Save Selected Region',
+    // Alerts/Messages
+    'alert.unknownError': 'Unknown error occurred',
+    'alert.downloadNotImplemented': 'Download feature not implemented in this refactored version',
+    'alert.mapNotAvailable': 'Map not available',
+    'alert.invalidBounds': 'Invalid bounds for region',
+    'alert.styleNotFound': 'Style not found',
+    'alert.noStylesFound': 'No styles found in IndexedDB',
+    'alert.failedToApplyStyle': 'Failed to apply style to map',
+    'alert.failedToLoadStyle': 'Failed to load style',
+    'alert.failedToRedownload': 'Failed to re-download region',
+    'alert.downloadManagerNotAvailable': 'Download manager not available',
+    // Download Manager
+    'downloadManager.downloadingStyle': 'Downloading style',
+    'downloadManager.downloadingSprites': 'Downloading sprites',
+    'downloadManager.downloadingGlyphs': 'Downloading glyphs',
+    'downloadManager.downloadingTiles': 'Downloading tiles',
+    'downloadManager.styleExistsNotFound': 'Style exists but could not be found',
+    'downloadManager.styleNotFoundForResources': 'Style not found for resource download',
+    'downloadManager.styleNotFoundForTiles': 'Style not found for tile download',
+    'downloadManager.styleNoSources': 'Style does not contain any sources for tile download',
+    // Form Validation
+    'validation.required': 'This field is required',
+    'validation.invalidFormat': 'Invalid format',
+    'validation.mustBeNumber': 'Must be a number',
+    'validation.mustBeWholeNumber': 'Must be a whole number',
+    'validation.invalidUrl': 'Invalid URL format',
 };
-// Theme context management
-class ThemeManager {
-    currentTheme = lightTheme;
-    listeners = [];
-    constructor() {
-        // Initialize theme from localStorage or system preference
-        this.initializeTheme();
-    }
-    initializeTheme() {
-        const savedPreference = localStorage.getItem('offline-manager-theme');
-        if (savedPreference === 'system' || !savedPreference) {
-            // Use system preference
-            this.setThemePreference('system');
-        }
-        else {
-            this.setThemePreference(savedPreference);
-        }
-        // Listen for system theme changes
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (this.currentTheme.preference === 'system') {
-                this.applyThemeMode(e.matches ? 'dark' : 'light', 'system');
-            }
-        });
-    }
-    getTheme() {
-        return this.currentTheme;
-    }
+
+/**
+ * Arabic translations for map-gl-offline
+ * الترجمة العربية لـ map-gl-offline
+ */
+const ar = {
+    // General - عام
+    'app.title': 'مدير الخرائط غير المتصلة',
+    'app.close': 'إغلاق',
+    'app.cancel': 'إلغاء',
+    'app.save': 'حفظ',
+    'app.delete': 'حذف',
+    'app.confirm': 'تأكيد',
+    'app.ok': 'موافق',
+    'app.loading': 'جاري التحميل...',
+    'app.error': 'خطأ',
+    'app.success': 'نجاح',
+    'app.warning': 'تحذير',
+    'app.refresh': 'تحديث',
+    'app.details': 'التفاصيل',
+    'app.focus': 'التركيز',
+    // Theme - السمة
+    'theme.toggle': 'تبديل السمة',
+    'theme.light': 'فاتح',
+    'theme.dark': 'داكن',
+    // Language - اللغة
+    'language.select': 'اختر اللغة',
+    'language.en': 'الإنجليزية',
+    'language.ar': 'العربية',
+    // Header - الرأس
+    'header.title': 'مدير الخرائط غير المتصلة',
+    'header.subtitle': '{{count}} منطقة • {{size}} إجمالي',
+    // Actions - الإجراءات
+    'actions.addRegion': 'إضافة منطقة',
+    'actions.refresh': 'تحديث',
+    'actions.loadStyle': 'تحميل النمط',
+    'actions.fixTiles': 'إصلاح البلاطات',
+    'actions.deleteStyle': 'حذف النمط',
+    'actions.redownload': 'إعادة التحميل',
+    'actions.importExport': 'استيراد/تصدير',
+    // Region Form - نموذج المنطقة
+    'regionForm.title': 'تحميل منطقة غير متصلة',
+    'regionForm.subtitle': 'المساحة المحددة: {{area}} كم²',
+    'regionForm.name': 'اسم المنطقة',
+    'regionForm.namePlaceholder': 'مثال: وسط المدينة',
+    'regionForm.minZoom': 'أدنى تكبير',
+    'regionForm.maxZoom': 'أقصى تكبير',
+    'regionForm.styleUrl': 'رابط النمط',
+    'regionForm.provider': 'مزود النمط',
+    'regionForm.providerAuto': 'اكتشاف تلقائي',
+    'regionForm.providerMapbox': 'Mapbox GL (يتطلب رمز الوصول)',
+    'regionForm.providerMaplibre': 'MapLibre GL (مفتوح المصدر)',
+    'regionForm.providerInfo': 'سيقوم الاكتشاف التلقائي بتحليل رابط النمط لتحديد المزود',
+    'regionForm.accessToken': 'رمز وصول Mapbox',
+    'regionForm.accessTokenRequired': 'مطلوب',
+    'regionForm.accessTokenHelp': 'احصل على رمز الوصول من',
+    'regionForm.downloadRegion': 'تحميل المنطقة',
+    'regionForm.area': 'المساحة',
+    'regionForm.bounds': 'الحدود',
+    // Region List - قائمة المناطق
+    'regionList.empty': 'لم يتم العثور على أنماط أو مناطق غير متصلة. انقر على "إضافة منطقة" للبدء.',
+    'regionList.emptyFallback': 'لم يتم العثور على مناطق غير متصلة. انقر على "إضافة منطقة" للبدء.',
+    'regionList.orphanedHeader': 'مناطق بدون نمط',
+    'regionList.orphanedDescription': '{{count}} منطقة غير مرتبطة بأي نمط',
+    'regionList.zoom': 'التكبير',
+    'regionList.downloaded': 'تم التحميل',
+    'regionList.size': 'الحجم',
+    'regionList.styleId': 'معرف النمط',
+    'regionList.storedStyleSize': 'حجم النمط المخزن',
+    // Region Details - تفاصيل المنطقة
+    'regionDetails.title': 'تفاصيل المنطقة',
+    'regionDetails.focusOnMap': 'التركيز على الخريطة',
+    // Style - النمط
+    'style.unnamedStyle': 'نمط بدون اسم',
+    'style.regions': '{{count}} منطقة',
+    // Delete Confirmation - تأكيد الحذف
+    'delete.regionTitle': 'حذف المنطقة',
+    'delete.regionMessage': 'هل أنت متأكد من حذف المنطقة "{{name}}"؟ لا يمكن التراجع عن هذا الإجراء.',
+    'delete.styleTitle': 'حذف النمط',
+    'delete.styleMessage': 'هل أنت متأكد من حذف النمط "{{name}}"؟ لا يمكن التراجع عن هذا الإجراء وسيؤثر على المناطق المرتبطة.',
+    // Re-download - إعادة التحميل
+    'redownload.title': 'إعادة تحميل المنطقة',
+    'redownload.message': 'إعادة تحميل "{{name}}"؟\n\nسيتم:\n• حذف البلاطات والموارد الحالية\n• إعادة تحميل جميع البيانات بالإعدادات الحالية\n• إصلاح أي موارد تالفة أو قديمة',
+    'redownload.button': 'إعادة التحميل',
+    // Fix Tiles - إصلاح البلاطات
+    'fixTiles.noIssuesTitle': 'لم يتم العثور على مشاكل',
+    'fixTiles.noIssuesMessage': 'لم يتم اكتشاف بلاطات مضغوطة. البلاطات بالتنسيق الصحيح!',
+    'fixTiles.title': 'إصلاح البلاطات المضغوطة',
+    'fixTiles.message': 'تم العثور على {{count}} بلاطة مضغوطة قد تسبب أخطاء في العرض.\n\nسيتم:\n1. إزالة جميع البلاطات المضغوطة ({{count}} بلاطة)\n2. ستحتاج إلى إعادة تحميل المناطق للحصول على بلاطات مفكوكة الضغط\n\nهل تريد المتابعة؟',
+    'fixTiles.button': 'إصلاح البلاطات',
+    'fixTiles.completeTitle': 'اكتمل التنظيف',
+    'fixTiles.completeMessage': 'تم إزالة {{count}} بلاطة مضغوطة بنجاح.\n\nيرجى إعادة تحميل مناطقك للحصول على البلاطات المصححة.',
+    // Download Progress - تقدم التحميل
+    'download.active': 'التحميلات النشطة',
+    'download.phase.style': 'النمط',
+    'download.phase.sprites': 'الرموز',
+    'download.phase.glyphs': 'الخطوط',
+    'download.phase.tiles': 'البلاطات',
+    // Style Selection - اختيار النمط
+    'styleSelection.title': 'اختر نمط غير متصل',
+    'styleSelection.message': 'اختر النمط غير المتصل الذي تريد تحميله:',
+    'styleSelection.sources': 'مصادر',
+    // Import/Export - استيراد/تصدير
+    'importExport.title': 'استيراد/تصدير',
+    'importExport.export': 'تصدير',
+    'importExport.import': 'استيراد',
+    // Errors - الأخطاء
+    'error.loadingContent': 'خطأ في تحميل المحتوى',
+    'error.tryAgain': 'يرجى المحاولة مرة أخرى',
+    'error.mapNotInitialized': 'الخريطة غير مهيأة. يرجى التأكد من تحميل الخريطة قبل تحميل النمط.',
+    'error.invalidStyleData': 'بيانات نمط غير صالحة. قد يكون النمط تالفاً.',
+    'error.styleMissingSources': 'النمط لا يحتوي على مصادر. قد يكون النمط غير مكتمل.',
+    'error.styleMissingLayers': 'النمط لا يحتوي على طبقات. قد يكون النمط غير مكتمل.',
+    'error.regionNotFound': 'المنطقة غير موجودة',
+    'error.downloadFailed': 'فشل التحميل',
+    'error.deleteFailed': 'فشل الحذف',
+    'error.loadStyleFailed': 'فشل تحميل النمط',
+    // Warnings - التحذيرات
+    'warning.compressedTiles': 'تم العثور على {{count}} بلاطة مضغوطة قد تسبب مشاكل في العرض.',
+    'warning.compressedTilesRecommendation': 'موصى به: استخدم زر "إعادة التحميل" لإصلاح هذه المشكلة.',
+    'warning.continueAnyway': 'هل تريد الاستمرار في تحميل النمط على أي حال؟',
+    // Drawing Tool - أداة الرسم
+    'drawing.instructions': 'انقر واسحب لرسم منطقة',
+    'drawing.cancel': 'اضغط ESC للإلغاء',
+    // Offline Maps Button - زر الخرائط غير المتصلة
+    'button.offlineMaps': 'خرائط غير متصلة',
+    // Region Details Modal - نافذة تفاصيل المنطقة
+    '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، متعدد المنصات',
+    // Active Downloads - التحميلات النشطة
+    'download.activeCount': 'التحميلات النشطة ({{count}})',
+    // Panel Manager additional strings - سلاسل إضافية للوحة
+    'panel.downloadedRegions': 'المناطق المحملة',
+    'panel.noExpiry': 'بدون انتهاء',
+    'panel.noBounds': 'بدون حدود',
+    'panel.sources': 'مصادر',
+    // Empty/Error States - حالات الفراغ/الخطأ
+    'emptyState.title': 'لا توجد عناصر',
+    'emptyState.message': 'لا توجد عناصر للعرض',
+    'errorState.message': 'حدث خطأ ما',
+    'errorState.retry': 'حاول مرة أخرى',
+    // List - القائمة
+    'list.empty': 'لا توجد عناصر للعرض',
+    'list.noItemsFound': 'لم يتم العثور على عناصر',
+    // Toast - الإشعارات
+    'toast.dismiss': 'إغلاق الإشعار',
+    // Control Buttons - أزرار التحكم
+    'control.offlineMapManager': 'مدير الخرائط غير المتصلة',
+    'control.cancelSelection': 'إلغاء التحديد',
+    'control.saveSelectedRegion': 'حفظ المنطقة المحددة',
+    // Alerts/Messages - التنبيهات/الرسائل
+    'alert.unknownError': 'حدث خطأ غير معروف',
+    'alert.downloadNotImplemented': 'ميزة التحميل غير مطبقة في هذه النسخة',
+    'alert.mapNotAvailable': 'الخريطة غير متاحة',
+    'alert.invalidBounds': 'حدود غير صالحة للمنطقة',
+    'alert.styleNotFound': 'النمط غير موجود',
+    'alert.noStylesFound': 'لم يتم العثور على أنماط في IndexedDB',
+    'alert.failedToApplyStyle': 'فشل تطبيق النمط على الخريطة',
+    'alert.failedToLoadStyle': 'فشل تحميل النمط',
+    'alert.failedToRedownload': 'فشل إعادة تحميل المنطقة',
+    'alert.downloadManagerNotAvailable': 'مدير التحميل غير متاح',
+    // Download Manager - مدير التحميل
+    'downloadManager.downloadingStyle': 'جاري تحميل النمط',
+    'downloadManager.downloadingSprites': 'جاري تحميل الرموز',
+    'downloadManager.downloadingGlyphs': 'جاري تحميل الخطوط',
+    'downloadManager.downloadingTiles': 'جاري تحميل البلاطات',
+    'downloadManager.styleExistsNotFound': 'النمط موجود لكن لم يتم العثور عليه',
+    'downloadManager.styleNotFoundForResources': 'لم يتم العثور على النمط لتحميل الموارد',
+    'downloadManager.styleNotFoundForTiles': 'لم يتم العثور على النمط لتحميل البلاطات',
+    'downloadManager.styleNoSources': 'النمط لا يحتوي على مصادر لتحميل البلاطات',
+    // Form Validation - التحقق من النموذج
+    'validation.required': 'هذا الحقل مطلوب',
+    'validation.invalidFormat': 'تنسيق غير صالح',
+    'validation.mustBeNumber': 'يجب أن يكون رقماً',
+    'validation.mustBeWholeNumber': 'يجب أن يكون رقماً صحيحاً',
+    'validation.invalidUrl': 'تنسيق رابط غير صالح',
+};
+
+/**
+ * Internationalization (i18n) module for map-gl-offline
+ * Uses i18next for multi-language support
+ *
+ * Currently supports: English (en), Arabic (ar)
+ */
+// RTL languages
+const rtlLanguages = ['ar'];
+// Initialize i18next
+instance.init({
+    lng: localStorage.getItem('offline-manager-language') || 'en',
+    fallbackLng: 'en',
+    debug: false,
+    interpolation: {
+        escapeValue: false, // Not needed for non-HTML contexts
+        prefix: '{{',
+        suffix: '}}',
+    },
+    resources: {
+        en: { translation: en },
+        ar: { translation: ar },
+    },
+});
+/**
+ * I18n Manager wrapper for i18next with additional functionality
+ */
+class I18nManager {
+    listeners = new Set();
     /**
-     * Get the effective theme mode (light or dark)
+     * Get the current language
      */
-    getEffectiveMode() {
-        return this.currentTheme.mode;
+    getLanguage() {
+        return instance.language;
     }
     /**
-     * Get the user's preference (light, dark, or system)
+     * Set the current language
      */
-    getPreference() {
-        return this.currentTheme.preference;
-    }
-    applyThemeMode(mode, preference) {
-        this.currentTheme = { mode, preference };
-        // Apply theme to document for Tailwind dark mode
-        if (mode === 'dark') {
-            document.documentElement.classList.add('dark');
-        }
-        else {
-            document.documentElement.classList.remove('dark');
-        }
+    setLanguage(lang) {
+        instance.changeLanguage(lang);
+        localStorage.setItem('offline-manager-language', lang);
+        // Update document direction for RTL languages
+        this.updateDocumentDirection();
+        // Notify listeners
         this.notifyListeners();
     }
     /**
-     * Set the theme preference (light, dark, or system)
+     * Check if current language is RTL
      */
-    setThemePreference(preference) {
-        localStorage.setItem('offline-manager-theme', preference);
-        if (preference === 'system') {
-            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            this.applyThemeMode(systemPrefersDark ? 'dark' : 'light', 'system');
-        }
-        else {
-            this.applyThemeMode(preference, preference);
-        }
+    isRTL() {
+        return rtlLanguages.includes(this.getLanguage());
     }
     /**
-     * Set the theme mode directly (for backwards compatibility)
-     * @deprecated Use setThemePreference instead
+     * Update document direction based on current language
      */
-    setTheme(mode) {
-        this.setThemePreference(mode);
+    updateDocumentDirection() {
+        const offlineManagerElements = document.querySelectorAll('.offline-manager-control');
+        offlineManagerElements.forEach(el => {
+            if (this.isRTL()) {
+                el.setAttribute('dir', 'rtl');
+                el.classList.add('rtl');
+            }
+            else {
+                el.setAttribute('dir', 'ltr');
+                el.classList.remove('rtl');
+            }
+        });
     }
     /**
-     * Cycle through themes: light -> dark -> system -> light
+     * Get a translated string using i18next
      */
-    cycleTheme() {
-        const preference = this.currentTheme.preference;
-        if (preference === 'light') {
-            this.setThemePreference('dark');
-        }
-        else if (preference === 'dark') {
-            this.setThemePreference('system');
-        }
-        else {
-            this.setThemePreference('light');
-        }
+    t(key, replacements) {
+        return instance.t(key, replacements);
     }
     /**
-     * Toggle between light and dark (legacy behavior)
-     * @deprecated Use cycleTheme for light/dark/system cycling
+     * Get all available languages
      */
-    toggleTheme() {
-        this.cycleTheme();
+    getAvailableLanguages() {
+        return [
+            { code: 'en', name: 'English', nativeName: 'English' },
+            { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
+        ];
     }
-    subscribe(listener) {
-        this.listeners.push(listener);
-        return () => {
-            const index = this.listeners.indexOf(listener);
-            if (index > -1) {
-                this.listeners.splice(index, 1);
-            }
-        };
+    /**
+     * Subscribe to language changes
+     */
+    subscribe(callback) {
+        this.listeners.add(callback);
+        return () => this.listeners.delete(callback);
     }
+    /**
+     * Notify all listeners of language change
+     */
     notifyListeners() {
-        this.listeners.forEach(listener => listener(this.currentTheme));
+        this.listeners.forEach(callback => callback());
+    }
+    /**
+     * Get the i18next instance for advanced usage
+     */
+    getInstance() {
+        return instance;
     }
 }
-// Export singleton instance
-const themeManager = new ThemeManager();
+// Singleton instance
+const i18n = new I18nManager();
+// Convenience function for translations
+const t = (key, replacements) => {
+    return i18n.t(key, replacements);
+};
 
 /**
  * Base Component Class
@@ -7368,7 +10125,7 @@ class ButtonManager {
         const buttonConfig = {
             className: 'maplibregl-ctrl-icon relative',
             icon: icons.cloud({ size: 20, color: 'black' }),
-            title: 'Offline Map Manager',
+            title: t('control.offlineMapManager'),
             showProgressBadge: true,
             onClick: this.options.onTogglePanel,
         };
@@ -7476,13 +10233,13 @@ class Modal extends BaseComponent {
         actions.className = 'flex items-center gap-2';
         // Theme toggle button
         if (this.config.showThemeToggle && this.config.onThemeToggle) {
-            const themeButton = this.createIconButton(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`, 'Toggle theme');
+            const themeButton = this.createIconButton(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`, t('theme.toggle'));
             themeButton.addEventListener('click', this.config.onThemeToggle);
             actions.appendChild(themeButton);
         }
         // Close button
         if (this.config.closable && this.config.onClose) {
-            const closeButton = this.createIconButton(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`, 'Close');
+            const closeButton = this.createIconButton(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`, t('app.close'));
             closeButton.addEventListener('click', this.config.onClose);
             actions.appendChild(closeButton);
         }
@@ -7598,7 +10355,7 @@ class RegionDetailsModal {
     show() {
         const { region } = this.options;
         const modalConfig = {
-            title: 'Region Details',
+            title: t('regionDetails.title'),
             size: 'sm',
             closable: true,
             showThemeToggle: false,
@@ -7621,39 +10378,42 @@ class RegionDetailsModal {
     createContent(region) {
         const content = document.createElement('div');
         content.className = 'flex flex-col gap-5';
+        if (i18n.isRTL()) {
+            content.setAttribute('dir', 'rtl');
+        }
         content.innerHTML = `
       <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/50 dark:bg-gray-800/50">
         <h3 class="m-0 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300">
           ${region.name}
         </h3>
       </div>
-      
+
       <div class="grid grid-cols-2 gap-4">
         <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/30 dark:bg-gray-800/30">
           <label class="block mb-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-            Bounds
+            ${t('regionDetails.bounds')}
           </label>
           <div class="text-sm font-mono text-gray-700 dark:text-gray-300 leading-relaxed">
             ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)}<br>
             ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}
           </div>
         </div>
-        
+
         <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/30 dark:bg-gray-800/30">
           <label class="block mb-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-            Zoom Range
+            ${t('regionDetails.zoomRange')}
           </label>
           <div class="text-lg font-semibold text-gray-900 dark:text-white">
             ${region.minZoom} - ${region.maxZoom}
           </div>
         </div>
       </div>
-      
+
       ${region.created
             ? `
         <div class="glass-input p-4 rounded-xl border-0 bg-gray-50/30 dark:bg-gray-800/30">
           <label class="block mb-1.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-            Created
+            ${t('regionDetails.created')}
           </label>
           <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
             ${formatDate(region.created)}
@@ -7670,16 +10430,19 @@ class RegionDetailsModal {
     createFooter() {
         const footer = document.createElement('div');
         footer.className = 'flex gap-2 justify-end';
+        if (i18n.isRTL()) {
+            footer.setAttribute('dir', 'rtl');
+        }
         // Focus button
         const focusButton = new Button({
-            text: 'Focus on Map',
+            text: t('regionDetails.focusOnMap'),
             variant: 'secondary',
             icon: icons.focus({ size: 16, color: 'currentColor' }),
             onClick: () => this.focusRegion(),
         });
         // Close button
         const closeButton = new Button({
-            text: 'Close',
+            text: t('app.close'),
             variant: 'primary',
             onClick: () => this.close(),
         });
@@ -7806,7 +10569,7 @@ class ImportExportModal {
     }
     show() {
         const modalConfig = {
-            title: 'Import/Export Region',
+            title: t('importExport.regionTitle'),
             subtitle: this.options.region.name || this.options.region.id,
             size: 'md',
             closable: true,
@@ -7830,6 +10593,9 @@ class ImportExportModal {
     createContent() {
         const content = document.createElement('div');
         content.className = 'flex flex-col gap-6';
+        if (i18n.isRTL()) {
+            content.setAttribute('dir', 'rtl');
+        }
         // Region Info Card
         const infoCard = this.createRegionInfoCard();
         content.appendChild(infoCard);
@@ -7854,23 +10620,23 @@ class ImportExportModal {
         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' })}
-        Region Information
+        ${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">ID</span>
+          <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">${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">Name</span>
-          <div class="text-gray-900 dark:text-white font-medium mt-1">${this.options.region.name || 'Unnamed'}</div>
+          <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">${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">Zoom</span>
+          <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${this.options.region.minZoom}-${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">Created</span>
+          <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>
@@ -7883,7 +10649,7 @@ class ImportExportModal {
             '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 left-0 w-1 h-full bg-blue-500 opacity-50';
+        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 =
@@ -7892,7 +10658,7 @@ class ImportExportModal {
       <div class="p-2 bg-blue-500/10 rounded-lg text-blue-600 dark:text-blue-400">
         ${icons.upload({ size: 20, color: 'currentColor' })}
       </div>
-      Export Region
+      ${t('importExport.exportRegion')}
     `;
         section.appendChild(header);
         const formContainer = document.createElement('div');
@@ -7901,18 +10667,18 @@ class ImportExportModal {
         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 = 'Export Format';
+        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">JSON - Complete data (recommended)</option>
-      <option value="pmtiles">PMTiles - Web optimized tiles</option>
-      <option value="mbtiles">MBTiles - Industry standard</option>
+      <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 = 'Choose format based on your use case';
+        formatHint.textContent = t('importExport.formatHint');
         formatGroup.appendChild(formatLabel);
         formatGroup.appendChild(this.exportFormatSelect);
         formatGroup.appendChild(formatHint);
@@ -7921,7 +10687,7 @@ class ImportExportModal {
         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 = 'Include Components';
+        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) => {
@@ -7940,16 +10706,16 @@ class ImportExportModal {
             label.appendChild(span);
             return { label, input };
         };
-        const styleCheck = createCheckbox('Style Configuration');
+        const styleCheck = createCheckbox(t('importExport.styleConfig'));
         this.includeStyleCheckbox = styleCheck.input;
         checkboxContainer.appendChild(styleCheck.label);
-        const tilesCheck = createCheckbox('Map Tiles');
+        const tilesCheck = createCheckbox(t('importExport.mapTiles'));
         this.includeTilesCheckbox = tilesCheck.input;
         checkboxContainer.appendChild(tilesCheck.label);
-        const spritesCheck = createCheckbox('Sprites & Icons');
+        const spritesCheck = createCheckbox(t('importExport.spritesIcons'));
         this.includeSpritesCheckbox = spritesCheck.input;
         checkboxContainer.appendChild(spritesCheck.label);
-        const fontsCheck = createCheckbox('Fonts & Glyphs');
+        const fontsCheck = createCheckbox(t('importExport.fontsGlyphs'));
         this.includeFontsCheckbox = fontsCheck.input;
         checkboxContainer.appendChild(fontsCheck.label);
         optionsGroup.appendChild(optionsLabel);
@@ -7967,13 +10733,13 @@ class ImportExportModal {
         progressBarContainer.appendChild(this.exportProgressBar);
         this.exportProgressText = document.createElement('p');
         this.exportProgressText.className = 'text-sm text-gray-600 dark:text-gray-400';
-        this.exportProgressText.textContent = 'Preparing export...';
+        this.exportProgressText.textContent = t('importExport.preparingExport');
         progressContainer.appendChild(progressBarContainer);
         progressContainer.appendChild(this.exportProgressText);
         formContainer.appendChild(progressContainer);
         // Export Button
         const exportButton = new Button({
-            text: 'Export Region',
+            text: t('importExport.exportRegion'),
             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
@@ -7990,7 +10756,7 @@ class ImportExportModal {
             '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 left-0 w-1 h-full bg-green-500 opacity-50';
+        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 =
@@ -7999,7 +10765,7 @@ class ImportExportModal {
       <div class="p-2 bg-green-500/10 rounded-lg text-green-600 dark:text-green-400">
         ${icons.upload({ size: 20, color: 'currentColor' })}
       </div>
-      Import Region
+      ${t('importExport.importRegion')}
     `;
         section.appendChild(header);
         const formContainer = document.createElement('div');
@@ -8008,7 +10774,7 @@ class ImportExportModal {
         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 = 'Select File';
+        fileLabel.textContent = t('importExport.selectFile');
         this.importFileInput = document.createElement('input');
         this.importFileInput.type = 'file';
         this.importFileInput.accept = '.json,.pmtiles,.mbtiles';
@@ -8016,7 +10782,7 @@ class ImportExportModal {
             '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 = 'Supports JSON, PMTiles, and MBTiles formats';
+        fileHint.textContent = t('importExport.fileFormatsHint');
         fileGroup.appendChild(fileLabel);
         fileGroup.appendChild(this.importFileInput);
         fileGroup.appendChild(fileHint);
@@ -8025,10 +10791,10 @@ class ImportExportModal {
         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 = 'New Region Name (Optional)';
+        nameLabel.textContent = t('importExport.newRegionName');
         this.importNameInput = document.createElement('input');
         this.importNameInput.type = 'text';
-        this.importNameInput.placeholder = 'Leave empty to use original name';
+        this.importNameInput.placeholder = t('importExport.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);
@@ -8044,7 +10810,7 @@ class ImportExportModal {
             'w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 focus:ring-2 dark:bg-gray-700';
         const overwriteSpan = document.createElement('span');
         overwriteSpan.className = 'text-sm text-gray-700 dark:text-gray-300 font-medium';
-        overwriteSpan.textContent = 'Overwrite if region exists';
+        overwriteSpan.textContent = t('importExport.overwriteIfExists');
         overwriteLabel.appendChild(this.importOverwriteCheckbox);
         overwriteLabel.appendChild(overwriteSpan);
         formContainer.appendChild(overwriteLabel);
@@ -8060,13 +10826,13 @@ class ImportExportModal {
         progressBarContainer.appendChild(this.importProgressBar);
         this.importProgressText = document.createElement('p');
         this.importProgressText.className = 'text-sm text-gray-600 dark:text-gray-400';
-        this.importProgressText.textContent = 'Preparing import...';
+        this.importProgressText.textContent = t('importExport.preparingImport');
         progressContainer.appendChild(progressBarContainer);
         progressContainer.appendChild(this.importProgressText);
         formContainer.appendChild(progressContainer);
         // Import Button
         const importButton = new Button({
-            text: 'Import Region',
+            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.
             icon: icons.upload({ size: 16, color: 'white' }),
             className: 'w-full py-2.5 text-base shadow-lg shadow-green-500/20',
@@ -8084,20 +10850,20 @@ class ImportExportModal {
         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' })}
-        Format Guide
+        ${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">Complete data, human-readable, best for development</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">Web-optimized, efficient serving, cloud-friendly</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">Industry standard, SQLite-based, cross-platform</div>
+          <div class="text-blue-700 dark:text-blue-400 leading-relaxed">${t('importExport.mbtilesDesc')}</div>
         </div>
       </div>
     `;
@@ -8144,7 +10910,7 @@ class ImportExportModal {
                 this.exportProgressBar.style.width = '100%';
             }
             if (this.exportProgressText) {
-                this.exportProgressText.textContent = 'Export complete!';
+                this.exportProgressText.textContent = t('importExport.exportComplete');
             }
             this.options.onExport?.(result);
             // Hide modal after short delay
@@ -8153,7 +10919,7 @@ class ImportExportModal {
         catch (error) {
             modalLogger.error('Export error:', error instanceof Error ? error.message : String(error));
             if (this.exportProgressText) {
-                this.exportProgressText.textContent = 'Export failed. Please try again.';
+                this.exportProgressText.textContent = t('importExport.exportFailed');
                 this.exportProgressText.classList.add('text-red-600', 'dark:text-red-400');
             }
         }
@@ -8193,7 +10959,7 @@ class ImportExportModal {
                 this.importProgressBar.style.width = '100%';
             }
             if (this.importProgressText) {
-                this.importProgressText.textContent = 'Import complete!';
+                this.importProgressText.textContent = t('importExport.importComplete');
             }
             this.options.onImport?.(result);
             // Hide modal after short delay
@@ -8202,7 +10968,7 @@ class ImportExportModal {
         catch (error) {
             modalLogger.error('Import error:', error instanceof Error ? error.message : String(error));
             if (this.importProgressText) {
-                this.importProgressText.textContent = 'Import failed. Please try again.';
+                this.importProgressText.textContent = t('importExport.importFailed');
                 this.importProgressText.classList.add('text-red-600', 'dark:text-red-400');
             }
         }
@@ -8215,8 +10981,11 @@ class ImportExportModal {
     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: 'Close',
+            text: t('app.close'),
             variant: 'secondary',
             onClick: () => this.hide(),
         });
@@ -8238,7 +11007,7 @@ class List extends BaseComponent {
     constructor(config = {}) {
         super(config);
         this.config = {
-            emptyText: 'No items to display',
+            emptyText: t('list.empty'),
             ...config,
         };
         this.createListStructure();
@@ -8270,7 +11039,7 @@ class List extends BaseComponent {
     renderEmptyState() {
         const emptyElement = document.createElement('div');
         emptyElement.className = 'text-center py-8 text-gray-500 dark:text-gray-400';
-        emptyElement.textContent = this.config.emptyText || 'No items found';
+        emptyElement.textContent = this.config.emptyText || t('list.noItemsFound');
         this.listContainer?.appendChild(emptyElement);
     }
     createItemElement(item) {
@@ -8416,6 +11185,102 @@ class List extends BaseComponent {
     }
 }
 
+/**
+ * Language Selector Component
+ * Provides a dropdown to switch between available languages
+ */
+class LanguageSelector extends BaseComponent {
+    options;
+    dropdown;
+    isOpen = false;
+    constructor(options = {}) {
+        super({});
+        this.options = options;
+        this.render();
+        // Subscribe to language changes
+        i18n.subscribe(() => this.render());
+    }
+    createElement() {
+        const container = document.createElement('div');
+        container.className = 'relative';
+        return container;
+    }
+    render() {
+        const currentLang = i18n.getLanguage();
+        const languages = i18n.getAvailableLanguages();
+        const currentLangInfo = languages.find(l => l.code === currentLang);
+        this.element.innerHTML = '';
+        // Create button
+        const button = document.createElement('button');
+        button.className =
+            'p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full flex items-center gap-1 transition-colors';
+        button.title = i18n.t('language.select');
+        button.innerHTML = `
+      ${icons.language({ size: 16, color: 'currentColor' })}
+      <span class="text-xs font-medium">${currentLangInfo?.code.toUpperCase() || 'EN'}</span>
+    `;
+        button.addEventListener('click', e => {
+            e.stopPropagation();
+            this.toggleDropdown();
+        });
+        this.element.appendChild(button);
+        // Create dropdown
+        this.dropdown = document.createElement('div');
+        this.dropdown.className = `
+      absolute top-full ${i18n.isRTL() ? 'left-0' : 'right-0'} mt-1
+      bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
+      rounded-lg shadow-lg overflow-hidden z-50
+      ${this.isOpen ? 'block' : 'hidden'}
+    `;
+        languages.forEach(lang => {
+            const item = document.createElement('button');
+            item.className = `
+        w-full px-4 py-2 text-left text-sm flex items-center justify-between gap-4
+        ${lang.code === currentLang ? 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300' : 'text-gray-700 dark:text-gray-300'}
+        hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
+      `;
+            item.innerHTML = `
+        <span class="font-medium">${lang.nativeName}</span>
+        <span class="text-xs text-gray-500 dark:text-gray-400">${lang.name}</span>
+      `;
+            item.addEventListener('click', e => {
+                e.stopPropagation();
+                this.selectLanguage(lang.code);
+            });
+            this.dropdown.appendChild(item);
+        });
+        this.element.appendChild(this.dropdown);
+        // Close dropdown on outside click
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    handleOutsideClick = () => {
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+    };
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+        if (this.dropdown) {
+            this.dropdown.classList.toggle('hidden', !this.isOpen);
+        }
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        if (this.dropdown) {
+            this.dropdown.classList.add('hidden');
+        }
+    }
+    selectLanguage(code) {
+        i18n.setLanguage(code);
+        this.closeDropdown();
+        this.options.onChange?.(code);
+    }
+    destroy() {
+        document.removeEventListener('click', this.handleOutsideClick);
+        super.destroy();
+    }
+}
+
 /**
  * Panel Renderer Component
  * Handles rendering of the main offline manager panel
@@ -8433,9 +11298,12 @@ class PanelRenderer extends BaseComponent {
     actionButtonsContainer;
     regionsList;
     downloadProgressContainer;
+    languageSelector;
     // Debounce mechanism
     refreshTimeout;
     isRefreshing = false;
+    // Language change unsubscribe function
+    unsubscribeLanguage;
     constructor(options) {
         super({});
         this.offlineManager = options.offlineManager;
@@ -8443,6 +11311,10 @@ class PanelRenderer extends BaseComponent {
         this.modalManager = options.modalManager;
         this.options = options;
         this.map = options.map;
+        // Subscribe to language changes
+        this.unsubscribeLanguage = i18n.subscribe(() => {
+            this.refresh();
+        });
     }
     createElement() {
         const container = document.createElement('div');
@@ -8487,31 +11359,42 @@ class PanelRenderer extends BaseComponent {
         this.headerContainer = document.createElement('div');
         this.headerContainer.className =
             'flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700';
+        // Apply RTL direction if needed
+        if (i18n.isRTL()) {
+            this.headerContainer.setAttribute('dir', 'rtl');
+        }
         // Title section
         const titleSection = document.createElement('div');
         titleSection.innerHTML = `
-      <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Offline Manager</h2>
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white">${t('header.title')}</h2>
       <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-        ${regions.length} regions • ${formatBytes(analytics.totalStorageSize)} total
+        ${t('header.subtitle', { count: regions.length, size: formatBytes(analytics.totalStorageSize) })}
       </p>
     `;
         // Actions section
         const actionsSection = document.createElement('div');
         actionsSection.className = 'flex items-center gap-2';
+        // Language selector
+        this.languageSelector = new LanguageSelector({
+            onChange: () => {
+                // Language change is handled by subscription in constructor
+            },
+        });
         // Theme toggle button
         const themeButton = new Button({
             className: 'p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full',
             icon: this.getThemeIcon(),
-            title: 'Toggle theme',
+            title: t('theme.toggle'),
             onClick: () => this.handleThemeToggle(),
         });
         // Close button
         const closeButton = new Button({
             className: 'p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full',
             icon: icons.x({ size: 16, color: 'currentColor' }),
-            title: 'Close',
+            title: t('app.close'),
             onClick: this.options.onClose,
         });
+        actionsSection.appendChild(this.languageSelector.getElement());
         actionsSection.appendChild(themeButton.getElement());
         actionsSection.appendChild(closeButton.getElement());
         this.headerContainer.appendChild(titleSection);
@@ -8528,16 +11411,20 @@ class PanelRenderer extends BaseComponent {
         this.actionButtonsContainer = document.createElement('div');
         this.actionButtonsContainer.className =
             'flex gap-3 px-6 py-4 border-b border-gray-200 dark:border-gray-700';
+        // Apply RTL direction if needed
+        if (i18n.isRTL()) {
+            this.actionButtonsContainer.setAttribute('dir', 'rtl');
+        }
         // Add Region button
         const addRegionButton = new Button({
-            text: 'Add Region',
+            text: t('actions.addRegion'),
             variant: 'primary',
             icon: icons.plus({ size: 16, color: 'white' }),
             onClick: this.options.onAddRegion,
         });
         // Refresh button
         const refreshButton = new Button({
-            text: 'Refresh',
+            text: t('actions.refresh'),
             variant: 'secondary',
             icon: icons.refresh({ size: 16, color: 'currentColor' }),
             onClick: () => this.refresh(),
@@ -8609,18 +11496,18 @@ class PanelRenderer extends BaseComponent {
                         template: this.createCompleteStyleTemplate(styleWithSize, styleRegions),
                         actions: [
                             {
-                                label: 'Load Style',
+                                label: t('actions.loadStyle'),
                                 action: 'load-style',
                                 icon: icons.cloud({ size: 12, color: 'currentColor' }),
                             },
                             {
-                                label: 'Fix Tiles',
+                                label: t('actions.fixTiles'),
                                 action: 'fix-compressed-tiles',
                                 variant: 'secondary',
                                 icon: icons.settings({ size: 12, color: 'currentColor' }),
                             },
                             {
-                                label: 'Delete Style',
+                                label: t('actions.deleteStyle'),
                                 action: 'delete-style',
                                 variant: 'danger',
                                 icon: icons.trash({ size: 12, color: 'currentColor' }),
@@ -8647,12 +11534,12 @@ class PanelRenderer extends BaseComponent {
                         template: this.createRegionItemTemplate(region, false),
                         actions: [
                             {
-                                label: 'Details',
+                                label: t('app.details'),
                                 action: 'show-details',
                                 icon: icons.infoCircle({ size: 12, color: 'currentColor' }),
                             },
                             {
-                                label: 'Focus',
+                                label: t('app.focus'),
                                 action: 'focus-region',
                                 icon: icons.focus({ size: 12, color: 'currentColor' }),
                             },
@@ -8662,7 +11549,7 @@ class PanelRenderer extends BaseComponent {
                             //   icon: icons.deviceFloppy({ size: 12, color: 'currentColor' })
                             // },
                             {
-                                label: 'Delete',
+                                label: t('app.delete'),
                                 action: 'delete-region',
                                 variant: 'danger',
                                 icon: icons.trash({ size: 12, color: 'currentColor' }),
@@ -8675,7 +11562,7 @@ class PanelRenderer extends BaseComponent {
             this.regionsList = new List({
                 className: 'flex-1 px-6 py-4 overflow-y-auto',
                 items: listItems,
-                emptyText: 'No offline styles or regions found. Click "Add Region" to get started.',
+                emptyText: t('regionList.empty'),
                 onItemAction: this.handleItemAction.bind(this),
                 onItemClick: (itemId, item) => {
                     const itemObj = item;
@@ -8713,12 +11600,12 @@ class PanelRenderer extends BaseComponent {
               ${region.name}
             </h4>
             <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">
-              ${region.bounds ? `<span class="font-medium">SW:</span> ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)} <span class="mx-1">→</span> <span class="font-medium">NE:</span> ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}` : 'No bounds'}
+              ${region.bounds ? `<span class="font-medium">SW:</span> ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)} <span class="mx-1">→</span> <span class="font-medium">NE:</span> ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}` : t('panel.noBounds')}
             </div>
             <div class="flex items-center gap-4 text-xs text-slate-400 dark:text-slate-500 mt-2">
-              <span>Zoom: ${region.minZoom}-${region.maxZoom}</span>
-              ${region.downloadedAt ? `<span>Downloaded: ${new Date(region.downloadedAt).toLocaleDateString()}</span>` : ''}
-              ${region.size ? `<span>Size: ${formatBytes(region.size)}</span>` : ''}
+              <span>${t('regionList.zoom')}: ${region.minZoom}-${region.maxZoom}</span>
+              ${region.downloadedAt ? `<span>${t('regionList.downloaded')}: ${new Date(region.downloadedAt).toLocaleDateString()}</span>` : ''}
+              ${region.size ? `<span>${t('regionList.size')}: ${formatBytes(region.size)}</span>` : ''}
             </div>
           </div>
         </div>
@@ -8739,16 +11626,16 @@ class PanelRenderer extends BaseComponent {
           <div class="flex items-center justify-between">
             <div class="flex-1">
               <h3 class="font-semibold text-slate-800 dark:text-slate-100 text-base">
-                ${style.style?.name || style.key || 'Unnamed Style'}
+                ${style.style?.name || style.key || t('style.unnamedStyle')}
               </h3>
               <p class="text-sm text-slate-600 dark:text-slate-300 mt-1">
-                Style ID: ${style.key}
+                ${t('regionList.styleId')}: ${style.key}
               </p>
               <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                 ${regionCount} region${regionCount === 1 ? '' : 's'} • ${formatBytes(totalSize)}
               </p>
               <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
-                Stored Style Size: ${formatBytes(style.dbSize || 0)}
+                ${t('regionList.storedStyleSize')}: ${formatBytes(style.dbSize || 0)}
               </p>
             </div>
             <div class="flex items-center gap-2">
@@ -8780,28 +11667,28 @@ class PanelRenderer extends BaseComponent {
               ${region.name}
             </h4>
             <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">
-              ${region.bounds ? `<span class="font-medium">SW:</span> ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)} <span class="mx-1">→</span> <span class="font-medium">NE:</span> ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}` : 'No bounds'}
+              ${region.bounds ? `<span class="font-medium">SW:</span> ${region.bounds[0][1].toFixed(4)}, ${region.bounds[0][0].toFixed(4)} <span class="mx-1">→</span> <span class="font-medium">NE:</span> ${region.bounds[1][1].toFixed(4)}, ${region.bounds[1][0].toFixed(4)}` : t('panel.noBounds')}
             </div>
             <div class="flex items-center gap-4 text-xs text-slate-400 dark:text-slate-500 mt-2">
-              <span>Zoom: ${region.minZoom}-${region.maxZoom}</span>
-              ${region.downloadedAt ? `<span>Downloaded: ${new Date(region.downloadedAt).toLocaleDateString()}</span>` : ''}
-              ${region.size ? `<span>Size: ${formatBytes(region.size)}</span>` : ''}
+              <span>${t('regionList.zoom')}: ${region.minZoom}-${region.maxZoom}</span>
+              ${region.downloadedAt ? `<span>${t('regionList.downloaded')}: ${new Date(region.downloadedAt).toLocaleDateString()}</span>` : ''}
+              ${region.size ? `<span>${t('regionList.size')}: ${formatBytes(region.size)}</span>` : ''}
             </div>
           </div>
           <div class="flex items-center gap-1 ml-2">
-            <button class="region-action-btn p-1.5 rounded-md hover:bg-indigo-100 dark:hover:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 transition-colors duration-150" data-action="show-details" data-region-id="${region.id}" title="Details">
+            <button class="region-action-btn p-1.5 rounded-md hover:bg-indigo-100 dark:hover:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 transition-colors duration-150" data-action="show-details" data-region-id="${region.id}" title="${t('app.details')}">
               ${icons.infoCircle({ size: 14, color: 'currentColor' })}
             </button>
-            <button class="region-action-btn p-1.5 rounded-md hover:bg-emerald-100 dark:hover:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 transition-colors duration-150" data-action="focus-region" data-region-id="${region.id}" title="Focus">
+            <button class="region-action-btn p-1.5 rounded-md hover:bg-emerald-100 dark:hover:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400 transition-colors duration-150" data-action="focus-region" data-region-id="${region.id}" title="${t('app.focus')}">
               ${icons.focus({ size: 14, color: 'currentColor' })}
             </button>
-            <button class="region-action-btn p-1.5 rounded-md 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="${region.id}" title="Re-download">
+            <button class="region-action-btn p-1.5 rounded-md 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="${region.id}" title="${t('actions.redownload')}">
               ${icons.download({ size: 14, color: 'currentColor' })}
             </button>
-            <!-- <button class="region-action-btn p-1.5 rounded-md 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="${region.id}" title="Import/Export">
+            <!-- <button class="region-action-btn p-1.5 rounded-md 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="${region.id}" title="${t('actions.importExport')}">
               ${icons.deviceFloppy({ size: 14, color: 'currentColor' })}
             </button> -->
-            <button class="region-action-btn p-1.5 rounded-md 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="${region.id}" title="Delete">
+            <button class="region-action-btn p-1.5 rounded-md 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="${region.id}" title="${t('app.delete')}">
               ${icons.trash({ size: 14, color: 'currentColor' })}
             </button>
           </div>
@@ -8822,10 +11709,10 @@ class PanelRenderer extends BaseComponent {
           <div class="flex items-center justify-between">
             <div class="flex-1">
               <h3 class="font-semibold text-blue-900 dark:text-blue-100 text-base">
-                ${style.style?.name || style.key || 'Unnamed Style'}
+                ${style.style?.name || style.key || t('style.unnamedStyle')}
               </h3>
               <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
-                Style ID: ${style.key}
+                ${t('regionList.styleId')}: ${style.key}
               </p>
               <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">
                 ${regionCount} region${regionCount === 1 ? '' : 's'} • ${formatBytes(totalSize)}
@@ -8855,10 +11742,10 @@ class PanelRenderer extends BaseComponent {
         <div class="flex items-center justify-between">
           <div>
             <h3 class="font-semibold text-amber-800 dark:text-amber-200 text-sm">
-              Regions without Style
+              ${t('regionList.orphanedHeader')}
             </h3>
             <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
-              ${regions.length} region${regions.length === 1 ? '' : 's'} not associated with any style
+              ${t('regionList.orphanedDescription', { count: regions.length })}
             </p>
           </div>
           <div class="text-amber-500 dark:text-amber-400">
@@ -8876,7 +11763,7 @@ class PanelRenderer extends BaseComponent {
         return `
       <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
         <h3 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">
-          Active Downloads (${downloadArray.length})
+          ${t('download.activeCount', { count: downloadArray.length })}
         </h3>
         <div class="space-y-2">
           ${downloadArray
@@ -8956,10 +11843,10 @@ class PanelRenderer extends BaseComponent {
             if (!region)
                 return;
             const confirmModal = new ConfirmationModal({
-                title: 'Delete Region',
-                message: `Are you sure you want to delete the region "${region.name}"? This action cannot be undone.`,
-                confirmText: 'Delete',
-                cancelText: 'Cancel',
+                title: t('delete.regionTitle'),
+                message: t('delete.regionMessage', { name: region.name }),
+                confirmText: t('app.delete'),
+                cancelText: t('app.cancel'),
                 onConfirm: async () => {
                     try {
                         await this.offlineManager.deleteRegion(regionId);
@@ -8995,10 +11882,10 @@ class PanelRenderer extends BaseComponent {
                 return;
             }
             const confirmModal = new ConfirmationModal({
-                title: 'Re-download Region',
-                message: `Re-download "${region.name}"?\n\nThis will:\n• Delete existing tiles and resources\n• Re-download all data with current settings\n• Fix any corrupted or outdated resources`,
-                confirmText: 'Re-download',
-                cancelText: 'Cancel',
+                title: t('redownload.title'),
+                message: t('redownload.message', { name: region.name }),
+                confirmText: t('redownload.button'),
+                cancelText: t('app.cancel'),
                 onConfirm: async () => {
                     try {
                         this.modalManager.close();
@@ -9026,14 +11913,14 @@ class PanelRenderer extends BaseComponent {
                         }
                         else {
                             panelLogger.error('Download manager not available');
-                            alert('Download manager not available. Please try again.');
+                            alert(t('alert.downloadManagerNotAvailable'));
                         }
                         // Refresh the panel to show the new region
                         await this.refresh();
                     }
                     catch (error) {
                         panelLogger.error('Failed to re-download region:', error);
-                        alert(`Failed to re-download region: ${error instanceof Error ? error.message : 'Unknown error'}`);
+                        alert(`${t('alert.failedToRedownload')}: ${error instanceof Error ? error.message : t('alert.unknownError')}`);
                     }
                 },
                 onCancel: () => {
@@ -9123,10 +12010,10 @@ class PanelRenderer extends BaseComponent {
      */
     renderErrorState(panelElement) {
         panelElement.innerHTML = `
-      <div class="flex items-center justify-center h-full text-red-600 dark:text-red-400">
+      <div class="flex items-center justify-center h-full text-red-600 dark:text-red-400" ${i18n.isRTL() ? 'dir="rtl"' : ''}>
         <div class="text-center">
-          <p class="text-lg font-medium">Error loading content</p>
-          <p class="text-sm mt-2">Please try again</p>
+          <p class="text-lg font-medium">${t('error.loadingContent')}</p>
+          <p class="text-sm mt-2">${t('error.tryAgain')}</p>
         </div>
       </div>
     `;
@@ -9194,12 +12081,12 @@ class PanelRenderer extends BaseComponent {
             template: this.createRegionItemTemplate(region, false),
             actions: [
                 {
-                    label: 'Details',
+                    label: t('app.details'),
                     action: 'show-details',
                     icon: icons.infoCircle({ size: 12, color: 'currentColor' }),
                 },
                 {
-                    label: 'Focus',
+                    label: t('app.focus'),
                     action: 'focus-region',
                     icon: icons.focus({ size: 12, color: 'currentColor' }),
                 },
@@ -9209,7 +12096,7 @@ class PanelRenderer extends BaseComponent {
                 //   icon: icons.deviceFloppy({ size: 12, color: 'currentColor' })
                 // },
                 {
-                    label: 'Delete',
+                    label: t('app.delete'),
                     action: 'delete-region',
                     variant: 'danger',
                     icon: icons.trash({ size: 12, color: 'currentColor' }),
@@ -9220,7 +12107,7 @@ class PanelRenderer extends BaseComponent {
         this.regionsList = new List({
             className: 'flex-1 px-6 py-4 overflow-y-auto',
             items: listItems,
-            emptyText: 'No offline regions found. Click "Add Region" to get started.',
+            emptyText: t('regionList.emptyFallback'),
             onItemAction: this.handleItemAction.bind(this),
             onItemClick: (itemId, _item) => {
                 this.handleShowRegionDetails(itemId);
@@ -9290,6 +12177,12 @@ class PanelRenderer extends BaseComponent {
         if (this.regionsList) {
             this.regionsList.destroy();
         }
+        if (this.languageSelector) {
+            this.languageSelector.destroy();
+        }
+        if (this.unsubscribeLanguage) {
+            this.unsubscribeLanguage();
+        }
         super.destroy();
     }
     /**
@@ -9346,9 +12239,9 @@ class PanelRenderer extends BaseComponent {
             const stats = await countCompressedTiles();
             if (stats.gzipped === 0) {
                 const confirmModal = new ConfirmationModal({
-                    title: 'No Issues Found',
-                    message: `No compressed tiles detected. Your tiles are already in the correct format!`,
-                    confirmText: 'OK',
+                    title: t('fixTiles.noIssuesTitle'),
+                    message: t('fixTiles.noIssuesMessage'),
+                    confirmText: t('app.ok'),
                     cancelText: '',
                     onConfirm: () => {
                         this.modalManager.close();
@@ -9362,10 +12255,10 @@ class PanelRenderer extends BaseComponent {
                 return;
             }
             const confirmModal = new ConfirmationModal({
-                title: 'Fix Compressed Tiles',
-                message: `Found ${stats.gzipped} compressed tiles that may cause rendering errors.\n\nThis will:\n1. Remove all compressed tiles (${stats.gzipped} tiles)\n2. You'll need to re-download regions to get properly decompressed tiles\n\nContinue?`,
-                confirmText: 'Fix Tiles',
-                cancelText: 'Cancel',
+                title: t('fixTiles.title'),
+                message: t('fixTiles.message', { count: stats.gzipped }),
+                confirmText: t('fixTiles.button'),
+                cancelText: t('app.cancel'),
                 onConfirm: async () => {
                     try {
                         panelLogger.debug('Cleaning up compressed tiles...');
@@ -9374,9 +12267,9 @@ class PanelRenderer extends BaseComponent {
                         this.modalManager.close();
                         // Show success message
                         const successModal = new ConfirmationModal({
-                            title: 'Cleanup Complete',
-                            message: `Successfully removed ${result.removed} compressed tiles.\n\nPlease re-download your regions to get the fixed tiles.`,
-                            confirmText: 'OK',
+                            title: t('fixTiles.completeTitle'),
+                            message: t('fixTiles.completeMessage', { count: result.removed }),
+                            confirmText: t('app.ok'),
                             cancelText: '',
                             onConfirm: () => {
                                 this.modalManager.close();
@@ -9412,19 +12305,19 @@ class PanelRenderer extends BaseComponent {
     async handleLoadStyle(styleData) {
         if (!this.map) {
             panelLogger.warn('Map not available for loading style');
-            alert('Map is not initialized. Please ensure the map is loaded before loading a style.');
+            alert(t('error.mapNotInitialized'));
             return;
         }
         try {
             const styleEntry = styleData;
             if (!styleEntry || !styleEntry.style) {
                 panelLogger.error('Invalid style data - missing style property');
-                alert('Invalid style data. The style may be corrupted.');
+                alert(t('error.invalidStyleData'));
                 return;
             }
             if (!styleEntry.key) {
                 panelLogger.error('Invalid style data - missing key property');
-                alert('Invalid style data. The style key is missing.');
+                alert(t('error.invalidStyleData'));
                 return;
             }
             panelLogger.debug('Loading style from IndexedDB:', {
@@ -9440,12 +12333,12 @@ class PanelRenderer extends BaseComponent {
             // Validate style structure
             if (!styleEntry.style.sources || Object.keys(styleEntry.style.sources).length === 0) {
                 panelLogger.error('Style is missing sources');
-                alert('Style has no sources defined. The style may be incomplete.');
+                alert(t('error.styleMissingSources'));
                 return;
             }
             if (!styleEntry.style.layers || styleEntry.style.layers.length === 0) {
                 panelLogger.error('Style is missing layers');
-                alert('Style has no layers defined. The style may be incomplete.');
+                alert(t('error.styleMissingLayers'));
                 return;
             }
             // Check for compressed tiles
@@ -9454,9 +12347,9 @@ class PanelRenderer extends BaseComponent {
                 const compressed = await countCompressedTiles();
                 if (compressed.gzipped > 0) {
                     panelLogger.warn(`Found ${compressed.gzipped} compressed tiles that may cause rendering issues`);
-                    const shouldContinue = confirm(`Warning: Found ${compressed.gzipped} compressed tiles that may cause rendering issues.\n\n` +
-                        `Recommended: Use the "Re-download" button to fix this issue.\n\n` +
-                        `Do you want to continue loading the style anyway?`);
+                    const shouldContinue = confirm(`${t('warning.compressedTiles', { count: compressed.gzipped })}\n\n` +
+                        `${t('warning.compressedTilesRecommendation')}\n\n` +
+                        `${t('warning.continueAnyway')}`);
                     if (!shouldContinue) {
                         return;
                     }
@@ -9525,7 +12418,7 @@ class PanelRenderer extends BaseComponent {
             }
             catch (setStyleError) {
                 panelLogger.error('Error calling setStyle:', setStyleError);
-                alert(`Failed to apply style to map: ${setStyleError instanceof Error ? setStyleError.message : 'Unknown error'}`);
+                alert(`${t('alert.failedToApplyStyle')}: ${setStyleError instanceof Error ? setStyleError.message : t('alert.unknownError')}`);
                 return;
             }
         }
@@ -9535,7 +12428,7 @@ class PanelRenderer extends BaseComponent {
                 message: error instanceof Error ? error.message : String(error),
                 stack: error instanceof Error ? error.stack : undefined,
             });
-            alert(`Failed to load style: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            alert(`${t('alert.failedToLoadStyle')}: ${error instanceof Error ? error.message : t('alert.unknownError')}`);
         }
     }
     /**
@@ -9545,10 +12438,10 @@ class PanelRenderer extends BaseComponent {
         try {
             const style = styleData;
             const confirmModal = new ConfirmationModal({
-                title: 'Delete Style',
-                message: `Are you sure you want to delete the style "${style.style?.name || style.key}"? This action cannot be undone and will affect associated regions.`,
-                confirmText: 'Delete Style',
-                cancelText: 'Cancel',
+                title: t('delete.styleTitle'),
+                message: t('delete.styleMessage', { name: style.style?.name || style.key }),
+                confirmText: t('actions.deleteStyle'),
+                cancelText: t('app.cancel'),
                 onConfirm: async () => {
                     try {
                         const { deleteStyleById } = await Promise.resolve().then(function () { return styleService; });
@@ -14628,8 +17521,8 @@ class RegionFormModal {
     show() {
         const { bounds, area } = this.options;
         const modalConfig = {
-            title: 'Download Offline Region',
-            subtitle: `Selected area: ${area} km²`,
+            title: t('regionForm.title'),
+            subtitle: t('regionForm.subtitle', { area: area.toString() }),
             size: 'md',
             closable: true,
             showThemeToggle: true,
@@ -14654,19 +17547,22 @@ class RegionFormModal {
         const styleUrl = this.options.styleUrl;
         const form = document.createElement('div');
         form.className = 'flex flex-col gap-6 py-2';
+        if (i18n.isRTL()) {
+            form.setAttribute('dir', 'rtl');
+        }
         // Region info display (Moved to top for better context)
         const infoGroup = document.createElement('div');
         infoGroup.className =
             'grid grid-cols-2 gap-4 p-4 rounded-xl glass-input border border-gray-100/50 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/50';
         infoGroup.innerHTML = `
       <div class="flex flex-col justify-center">
-        <strong class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">Area</strong>
+        <strong class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">${t('regionForm.area')}</strong>
         <div class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300">
           ${area.toLocaleString()} <span class="text-sm font-medium text-gray-500">km²</span>
         </div>
       </div>
       <div>
-        <strong class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">Bounds</strong>
+        <strong class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">${t('regionForm.bounds')}</strong>
         <div class="text-xs font-mono text-gray-600 dark:text-gray-300 leading-relaxed bg-white/50 dark:bg-black/20 p-2 rounded-lg">
           ${west.toFixed(4)}, ${south.toFixed(4)}<br>
           ${east.toFixed(4)}, ${north.toFixed(4)}
@@ -14678,12 +17574,12 @@ class RegionFormModal {
         const nameGroup = document.createElement('div');
         nameGroup.innerHTML = `
       <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-        Region Name
+        ${t('regionForm.name')}
       </label>
     `;
         this.nameInput = document.createElement('input');
         this.nameInput.type = 'text';
-        this.nameInput.placeholder = 'e.g., Downtown District';
+        this.nameInput.placeholder = t('regionForm.namePlaceholder');
         this.nameInput.className =
             'w-full px-4 py-3 rounded-xl text-base glass-input text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-all shadow-sm';
         nameGroup.appendChild(this.nameInput);
@@ -14694,7 +17590,7 @@ class RegionFormModal {
         const minZoomDiv = document.createElement('div');
         minZoomDiv.innerHTML = `
       <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-        Min Zoom
+        ${t('regionForm.minZoom')}
       </label>
     `;
         this.minZoomInput = document.createElement('input');
@@ -14708,7 +17604,7 @@ class RegionFormModal {
         const maxZoomDiv = document.createElement('div');
         maxZoomDiv.innerHTML = `
       <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-        Max Zoom
+        ${t('regionForm.maxZoom')}
       </label>
     `;
         this.maxZoomInput = document.createElement('input');
@@ -14726,7 +17622,7 @@ class RegionFormModal {
         const styleGroup = document.createElement('div');
         styleGroup.innerHTML = `
       <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-        Style URL
+        ${t('regionForm.styleUrl')}
       </label>
     `;
         this.styleUrlInput = document.createElement('input');
@@ -14741,16 +17637,16 @@ class RegionFormModal {
         const providerGroup = document.createElement('div');
         providerGroup.innerHTML = `
       <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-        Style Provider
+        ${t('regionForm.provider')}
       </label>
     `;
         this.providerSelect = document.createElement('select');
         this.providerSelect.className =
             'w-full px-4 py-3 rounded-xl text-base glass-input text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-all appearance-none cursor-pointer shadow-sm';
         this.providerSelect.innerHTML = `
-      <option value="auto">Auto-detect</option>
-      <option value="mapbox">Mapbox GL (requires access token)</option>
-      <option value="maplibre">MapLibre GL (open source)</option>
+      <option value="auto">${t('regionForm.providerAuto')}</option>
+      <option value="mapbox">${t('regionForm.providerMapbox')}</option>
+      <option value="maplibre">${t('regionForm.providerMaplibre')}</option>
     `;
         this.providerSelect.addEventListener('change', () => this.handleProviderChange());
         providerGroup.appendChild(this.providerSelect);
@@ -14758,7 +17654,7 @@ class RegionFormModal {
         const providerInfo = document.createElement('div');
         providerInfo.className =
             'text-xs text-gray-500 dark:text-gray-400 mt-2 ml-1 flex items-center gap-1';
-        providerInfo.innerHTML = `${icons.infoCircle({ size: 12 })} Auto-detect will analyze the style URL to determine the provider`;
+        providerInfo.innerHTML = `${icons.infoCircle({ size: 12 })} ${t('regionForm.providerInfo')}`;
         providerGroup.appendChild(providerInfo);
         form.appendChild(providerGroup);
         // Access Token input
@@ -14766,8 +17662,8 @@ class RegionFormModal {
         this.accessTokenGroup.className = 'hidden';
         this.accessTokenGroup.innerHTML = `
       <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-        Mapbox Access Token
-        <span class="ml-2 text-xs font-normal text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-full border border-amber-200 dark:border-amber-800">Required</span>
+        ${t('regionForm.accessToken')}
+        <span class="ml-2 text-xs font-normal text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-full border border-amber-200 dark:border-amber-800">${t('regionForm.accessTokenRequired')}</span>
       </label>
     `;
         this.accessTokenInput = document.createElement('input');
@@ -14780,7 +17676,7 @@ class RegionFormModal {
         const tokenHelp = document.createElement('div');
         tokenHelp.className = 'text-xs text-gray-500 dark:text-gray-400 mt-2 ml-1';
         tokenHelp.innerHTML = `
-      Get your access token from <a href="https://account.mapbox.com/access-tokens/" target="_blank" rel="noopener noreferrer" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">Mapbox Account</a>
+      ${t('regionForm.accessTokenHelp')} <a href="https://account.mapbox.com/access-tokens/" target="_blank" rel="noopener noreferrer" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">Mapbox Account</a>
     `;
         this.accessTokenGroup.appendChild(tokenHelp);
         form.appendChild(this.accessTokenGroup);
@@ -14844,9 +17740,12 @@ class RegionFormModal {
     createFooter() {
         const footer = document.createElement('div');
         footer.className = 'flex gap-2 justify-end';
+        if (i18n.isRTL()) {
+            footer.setAttribute('dir', 'rtl');
+        }
         // Cancel button
         const cancelButton = new Button({
-            text: 'Cancel',
+            text: t('app.cancel'),
             variant: 'secondary',
             onClick: () => {
                 this.modal?.hide();
@@ -14855,7 +17754,7 @@ class RegionFormModal {
         });
         // Save button
         const saveButton = new Button({
-            text: 'Download Region',
+            text: t('regionForm.downloadRegion'),
             variant: 'primary',
             icon: icons.download({ size: 16, color: 'white' }),
             onClick: () => this.handleSave(),
@@ -15836,6 +18735,15 @@ class OfflineManagerControl {
                 if (this.regionControl?.isSelectionActive()) {
                     this.regionControl.cancelSelection();
                 }
+                // Apply RTL direction if needed
+                if (i18n.isRTL()) {
+                    this.panel.setAttribute('dir', 'rtl');
+                    this.panel.classList.add('rtl');
+                }
+                else {
+                    this.panel.setAttribute('dir', 'ltr');
+                    this.panel.classList.remove('rtl');
+                }
                 this.panel.classList.remove('hidden');
                 this.renderPanel();
             }
@@ -16289,5 +19197,5 @@ class OfflineManagerControl {
     }
 }
 
-export { AnalyticsService, CONTENT_TYPES, CategorizedError, CleanupService, DB_NAME, DB_VERSION, DOWNLOAD_DEFAULTS, ERROR_MESSAGES, ErrorType, FontService, GLYPH_CONFIG, GZIP_MAGIC_BYTES, GlyphService, ImportExportService, LogLevel, MAP_PROVIDERS, MaintenanceService, OfflineManagerControl, OfflineMapManager, RESOURCE_TYPES, RegionService, ResourceService, STORAGE_CONFIG, STORE_NAMES, STYLE_CONFIG, SUCCESS_MESSAGES, ScopedLogger, SpriteService, TILE_CONFIG, TileService, URL_SCHEMES, VALIDATION_PATTERNS, aggregateErrors, applyProxy, calculateBBoxArea, categorizeError, cleanupCompressedTiles, cleanupOldFonts, cleanupOldGlyphs, cleanupOldSprites, cleanupOldStyles, cleanupOldTiles, cleanupService, clearAllCaches, clearRegionStyleCache, configureLogger, configureProxy, countCompressedTiles, createProgressTracker, createTileKey, dbPromise, OfflineMapManager as default, deleteStyleById, deleteStyles, deriveTileExtension, detectStyleProvider, downloadFonts, downloadGlyphs, downloadSprites, downloadStyleWithProvider, downloadStyles, downloadTiles, estimateTileCount, extractAccessToken, extractTileKey, fetchResource, fetchResourceWithRetry, fetchWithRetry, fontService, formatBytes, formatDate, formatDateTime, formatDuration, formatNumber, formatPercentage, generateGlyphUrlsFromStyle, getDefaultStyleConfig, getFontAnalytics, getFontStats, getGlyphAnalytics, getGlyphStats, getIcon, getProxyConfig, getRegionAnalytics, getSpriteAnalytics, getSpriteStats, getStyleStats, getTileAnalytics, getTileStats, getUserErrorMessage, glyphService, icons, idbFetchHandler, isCorsError, isRetryableError, isStyleDownloaded, listTileKeysInIDB, loadGlyphs, loadStyleById, loadStyles, logError, logger, normalizeStyleUrl, optimizeStorage, parseTileKey, patchStyleForOffline, performCleanup, processBatch, processStyleSources, requiresAuthentication, resetProxyConfig, safeExecute, safeValidate, setupAutoCleanup, shouldProxy, spriteService, stopAutoCleanup, tileService, validateBatchSize, validateBounds, validateRegion, validateRegionId, validateRegionOptions, validateResource, validateStyleForProvider, validateStyleUrl, validateTimeout, validateZoomLevels, verifyAndRepairFonts, verifyAndRepairGlyphs, verifyAndRepairSprites };
+export { AnalyticsService, CONTENT_TYPES, CategorizedError, CleanupService, DB_NAME, DB_VERSION, DOWNLOAD_DEFAULTS, ERROR_MESSAGES, ErrorType, FontService, GLYPH_CONFIG, GZIP_MAGIC_BYTES, GlyphService, ImportExportService, LogLevel, MAP_PROVIDERS, MaintenanceService, OfflineManagerControl, OfflineMapManager, RESOURCE_TYPES, RegionService, ResourceService, STORAGE_CONFIG, STORE_NAMES, STYLE_CONFIG, SUCCESS_MESSAGES, ScopedLogger, SpriteService, TILE_CONFIG, TileService, URL_SCHEMES, VALIDATION_PATTERNS, aggregateErrors, applyProxy, calculateBBoxArea, categorizeError, cleanupCompressedTiles, cleanupOldFonts, cleanupOldGlyphs, cleanupOldSprites, cleanupOldStyles, cleanupOldTiles, cleanupService, clearAllCaches, clearRegionStyleCache, configureLogger, configureProxy, countCompressedTiles, createProgressTracker, createTileKey, dbPromise, OfflineMapManager as default, deleteStyleById, deleteStyles, deriveTileExtension, detectStyleProvider, downloadFonts, downloadGlyphs, downloadSprites, downloadStyleWithProvider, downloadStyles, downloadTiles, estimateTileCount, extractAccessToken, extractTileKey, fetchResource, fetchResourceWithRetry, fetchWithRetry, fontService, formatBytes, formatDate, formatDateTime, formatDuration, formatNumber, formatPercentage, generateGlyphUrlsFromStyle, getDefaultStyleConfig, getFontAnalytics, getFontStats, getGlyphAnalytics, getGlyphStats, getIcon, getProxyConfig, getRegionAnalytics, getSpriteAnalytics, getSpriteStats, getStyleStats, getTileAnalytics, getTileStats, getUserErrorMessage, glyphService, i18n, icons, idbFetchHandler, isCorsError, isRetryableError, isStyleDownloaded, listTileKeysInIDB, loadGlyphs, loadStyleById, loadStyles, logError, logger, normalizeStyleUrl, optimizeStorage, parseTileKey, patchStyleForOffline, performCleanup, processBatch, processStyleSources, requiresAuthentication, resetProxyConfig, safeExecute, safeValidate, setupAutoCleanup, shouldProxy, spriteService, stopAutoCleanup, t, tileService, validateBatchSize, validateBounds, validateRegion, validateRegionId, validateRegionOptions, validateResource, validateStyleForProvider, validateStyleUrl, validateTimeout, validateZoomLevels, verifyAndRepairFonts, verifyAndRepairGlyphs, verifyAndRepairSprites };
 //# sourceMappingURL=index.esm.js.map