@guttools/translation-tool 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,756 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LANGUAGES: () => LANGUAGES,
+  LanguageSelect: () => LanguageSelect,
+  TranslateProvider: () => TranslateProvider,
+  TranslationEngine: () => TranslationEngine,
+  useTranslate: () => useTranslate
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+
+// src/config.ts
+var DEFAULT_API_URL = "https://YOUR-DEPLOYMENT.vercel.app";
+
+// src/cache.ts
+var DB_NAME = "translationtool";
+var STORE = "dicts";
+var dbPromise = null;
+function openDb() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve) => {
+    try {
+      if (typeof indexedDB === "undefined") return resolve(null);
+      const req = indexedDB.open(DB_NAME, 1);
+      req.onupgradeneeded = () => req.result.createObjectStore(STORE);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+      req.onblocked = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+  return dbPromise;
+}
+async function loadDict(key) {
+  const db = await openDb();
+  if (!db) return {};
+  return new Promise((resolve) => {
+    try {
+      const req = db.transaction(STORE, "readonly").objectStore(STORE).get(key);
+      req.onsuccess = () => resolve(req.result ?? {});
+      req.onerror = () => resolve({});
+    } catch {
+      resolve({});
+    }
+  });
+}
+async function saveDict(key, dict) {
+  const db = await openDb();
+  if (!db) return;
+  try {
+    db.transaction(STORE, "readwrite").objectStore(STORE).put(dict, key);
+  } catch {
+  }
+}
+var LANG_KEY = "translationtool:lang";
+function readStoredLang() {
+  try {
+    return localStorage.getItem(LANG_KEY);
+  } catch {
+    return null;
+  }
+}
+function writeStoredLang(lang) {
+  try {
+    localStorage.setItem(LANG_KEY, lang);
+  } catch {
+  }
+}
+
+// src/hash.ts
+function normalizeText(text) {
+  return text.normalize("NFC").replace(/\s+/g, " ").trim();
+}
+function hashText(text) {
+  let h1 = 3735928559;
+  let h2 = 1103547991;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507) ^ Math.imul(h2 ^ h2 >>> 13, 3266489909);
+  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507) ^ Math.imul(h1 ^ h1 >>> 13, 3266489909);
+  return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36);
+}
+
+// src/template.ts
+var NUMBER = /\d+(?:[.,:]\d+)*/g;
+var PLACEHOLDER = /\{#(\d+)\}/g;
+function toTemplate(text) {
+  const values = [];
+  const template = text.replace(NUMBER, (n) => `{#${values.push(n) - 1}}`);
+  return { template, values };
+}
+function fromTemplate(translated, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let broken = false;
+  const out = translated.replace(PLACEHOLDER, (_, i) => {
+    const idx = Number(i);
+    if (idx >= values.length) {
+      broken = true;
+      return "";
+    }
+    seen.add(idx);
+    return values[idx];
+  });
+  return broken || seen.size !== values.length ? null : out;
+}
+
+// src/engine.ts
+var SKIP_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "NOSCRIPT",
+  "TEMPLATE",
+  "CODE",
+  "PRE",
+  "KBD",
+  "SAMP",
+  "VAR",
+  "TEXTAREA",
+  "IFRAME",
+  "CANVAS",
+  "SVG",
+  "MATH",
+  "META",
+  "LINK"
+]);
+var TRANSLATABLE_ATTRS = ["placeholder", "title", "alt", "aria-label"];
+var BUTTON_INPUT_TYPES = /* @__PURE__ */ new Set(["button", "submit", "reset"]);
+var HAS_LETTER = /\p{L}/u;
+var MAX_STRING_LENGTH = 1e4;
+var BATCH_SIZE = 50;
+var PARALLEL_BATCHES = 4;
+var FLUSH_DELAY_MS = 120;
+function currentPath() {
+  const p = location.pathname.replace(/\/+$/, "");
+  return p === "" ? "/" : p;
+}
+function isSkippedElement(el) {
+  return SKIP_TAGS.has(el.tagName.toUpperCase()) || el.hasAttribute("data-no-translate") || el.getAttribute("translate") === "no" || el.isContentEditable === true;
+}
+function isInsideSkipped(node) {
+  for (let el = node.parentElement; el; el = el.parentElement) {
+    if (isSkippedElement(el)) return true;
+  }
+  return false;
+}
+function attrsFor(el) {
+  if (el.tagName === "INPUT" && BUTTON_INPUT_TYPES.has(el.type)) {
+    return [...TRANSLATABLE_ATTRS, "value"];
+  }
+  return TRANSLATABLE_ATTRS;
+}
+function withOriginalWhitespace(original, translated) {
+  const lead = /^\s*/.exec(original)[0];
+  const trail = /\s*$/.exec(original)[0];
+  return lead + translated + trail;
+}
+var TranslationEngine = class {
+  constructor(opts) {
+    this.dicts = /* @__PURE__ */ new Map();
+    this.dictLoads = /* @__PURE__ */ new Map();
+    this.bundlesFetched = /* @__PURE__ */ new Set();
+    this.bundleWait = Promise.resolve();
+    this.textSlots = /* @__PURE__ */ new Map();
+    this.attrSlots = /* @__PURE__ */ new Map();
+    this.pending = /* @__PURE__ */ new Map();
+    // hash -> normalized source
+    this.inflight = /* @__PURE__ */ new Set();
+    this.failed = /* @__PURE__ */ new Set();
+    this.flushTimer = null;
+    this.saveTimer = null;
+    this.observer = null;
+    this.path = "";
+    this.generation = 0;
+    this.opts = opts;
+    this.lang = opts.sourceLang;
+  }
+  get language() {
+    return this.lang;
+  }
+  /** Switch the page to `lang`. Resolves once cached strings are applied. */
+  async setLanguage(lang) {
+    if (lang === this.lang && (lang === this.opts.sourceLang || this.observer)) return;
+    const gen = ++this.generation;
+    this.restoreAll();
+    this.lang = lang;
+    this.pending.clear();
+    this.failed.clear();
+    const root = document.documentElement;
+    if (lang === this.opts.sourceLang) {
+      this.disconnect();
+      root.removeAttribute("dir");
+      root.setAttribute("lang", this.opts.sourceLang);
+      return;
+    }
+    root.setAttribute("lang", lang);
+    root.setAttribute("dir", isRtl(lang) ? "rtl" : "ltr");
+    await this.ensureDict(lang);
+    if (gen !== this.generation) return;
+    this.path = currentPath();
+    this.bundleWait = this.fetchBundle(lang, this.path);
+    this.scan(root);
+    this.connect();
+    if (this.pending.size > 0) {
+      await this.bundleWait;
+      if (gen !== this.generation) return;
+      this.reapply();
+    }
+  }
+  /** Called on client-side navigation so the next page's bundle is fetched. */
+  onNavigate() {
+    if (this.lang === this.opts.sourceLang) return;
+    const p = currentPath();
+    if (p === this.path) return;
+    this.path = p;
+    this.bundleWait = this.fetchBundle(this.lang, p).then(() => this.reapply());
+  }
+  stop() {
+    this.generation++;
+    this.disconnect();
+    this.restoreAll();
+    if (this.flushTimer) clearTimeout(this.flushTimer);
+    this.flushTimer = null;
+    if (this.lang !== this.opts.sourceLang) {
+      document.documentElement.removeAttribute("dir");
+      document.documentElement.setAttribute("lang", this.opts.sourceLang);
+    }
+    this.lang = this.opts.sourceLang;
+  }
+  // ---- DOM ----------------------------------------------------------------
+  connect() {
+    if (this.observer) return;
+    this.observer = new MutationObserver((records) => this.onMutations(records));
+    this.observer.observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: [...TRANSLATABLE_ATTRS, "value"]
+    });
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+  onMutations(records) {
+    for (const r of records) {
+      if (r.type === "childList") {
+        r.addedNodes.forEach((n) => {
+          if (n.isConnected && !isInsideSkipped(n)) this.scan(n);
+        });
+      } else if (r.type === "characterData") {
+        const t = r.target;
+        if (t.isConnected && !isInsideSkipped(t)) this.visitText(t);
+      } else if (r.type === "attributes" && r.attributeName) {
+        const el = r.target;
+        if (!isSkippedElement(el) && !isInsideSkipped(el) && attrsFor(el).includes(r.attributeName)) {
+          this.visitAttr(el, r.attributeName);
+        }
+      }
+    }
+    if (records.length > 0 && Math.random() < 0.05) this.prune();
+  }
+  scan(root) {
+    if (root.nodeType === Node.TEXT_NODE) {
+      this.visitText(root);
+      return;
+    }
+    if (root.nodeType !== Node.ELEMENT_NODE) return;
+    const rootEl = root;
+    if (isSkippedElement(rootEl)) return;
+    this.visitAttrs(rootEl);
+    const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+      acceptNode: (n) => n.nodeType === Node.ELEMENT_NODE && isSkippedElement(n) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+    });
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      if (n.nodeType === Node.TEXT_NODE) this.visitText(n);
+      else this.visitAttrs(n);
+    }
+  }
+  visitText(node) {
+    const value = node.nodeValue ?? "";
+    let slot = this.textSlots.get(node);
+    if (slot && value === slot.applied) return;
+    if (!slot) {
+      slot = { original: value, applied: null };
+      this.textSlots.set(node, slot);
+    } else {
+      slot.original = value;
+      slot.applied = null;
+    }
+    this.applySlot(slot, (v) => {
+      node.nodeValue = v;
+    });
+  }
+  visitAttrs(el) {
+    for (const name of attrsFor(el)) {
+      if (el.hasAttribute(name)) this.visitAttr(el, name);
+    }
+  }
+  visitAttr(el, name) {
+    const value = el.getAttribute(name);
+    if (value == null) return;
+    let slots = this.attrSlots.get(el);
+    if (!slots) {
+      slots = /* @__PURE__ */ new Map();
+      this.attrSlots.set(el, slots);
+    }
+    let slot = slots.get(name);
+    if (slot && value === slot.applied) return;
+    if (!slot) {
+      slot = { original: value, applied: null };
+      slots.set(name, slot);
+    } else {
+      slot.original = value;
+      slot.applied = null;
+    }
+    this.applySlot(slot, (v) => el.setAttribute(name, v));
+  }
+  applySlot(slot, write) {
+    const norm = normalizeText(slot.original);
+    if (!norm || norm.length > MAX_STRING_LENGTH || !HAS_LETTER.test(norm)) return;
+    const { template, values } = toTemplate(norm);
+    const hash = hashText(template);
+    const translated = this.dicts.get(this.lang)?.get(hash);
+    if (translated === void 0) {
+      if (!this.inflight.has(hash) && !this.failed.has(hash)) {
+        this.pending.set(hash, template);
+        this.scheduleFlush();
+      }
+      return;
+    }
+    const filled = fromTemplate(translated, values);
+    if (filled === null) return;
+    const next = withOriginalWhitespace(slot.original, filled);
+    slot.applied = next;
+    write(next);
+  }
+  /** Re-run lookups for every slot still showing source text. */
+  reapply() {
+    this.textSlots.forEach((slot, node) => {
+      if (slot.applied === null && node.isConnected) {
+        this.applySlot(slot, (v) => {
+          node.nodeValue = v;
+        });
+      }
+    });
+    this.attrSlots.forEach((slots, el) => {
+      if (!el.isConnected) return;
+      slots.forEach((slot, name) => {
+        if (slot.applied === null) this.applySlot(slot, (v) => el.setAttribute(name, v));
+      });
+    });
+  }
+  restoreAll() {
+    const wasObserving = !!this.observer;
+    this.disconnect();
+    this.textSlots.forEach((slot, node) => {
+      if (slot.applied !== null && node.nodeValue === slot.applied) node.nodeValue = slot.original;
+    });
+    this.attrSlots.forEach((slots, el) => {
+      slots.forEach((slot, name) => {
+        if (slot.applied !== null && el.getAttribute(name) === slot.applied) {
+          el.setAttribute(name, slot.original);
+        }
+      });
+    });
+    this.textSlots.clear();
+    this.attrSlots.clear();
+    if (wasObserving && this.lang !== this.opts.sourceLang) this.connect();
+  }
+  prune() {
+    this.textSlots.forEach((_, node) => {
+      if (!node.isConnected) this.textSlots.delete(node);
+    });
+    this.attrSlots.forEach((_, el) => {
+      if (!el.isConnected) this.attrSlots.delete(el);
+    });
+  }
+  // ---- Network ------------------------------------------------------------
+  dictKey(lang) {
+    return `${this.opts.projectKey}:${lang}`;
+  }
+  ensureDict(lang) {
+    let p = this.dictLoads.get(lang);
+    if (!p) {
+      const dict = /* @__PURE__ */ new Map();
+      this.dicts.set(lang, dict);
+      p = loadDict(this.dictKey(lang)).then((stored) => {
+        for (const [h, t] of Object.entries(stored)) if (!dict.has(h)) dict.set(h, t);
+      });
+      this.dictLoads.set(lang, p);
+    }
+    return p;
+  }
+  merge(lang, entries) {
+    const dict = this.dicts.get(lang);
+    if (!dict) return;
+    let changed = false;
+    for (const [h, t] of Object.entries(entries)) {
+      if (dict.get(h) !== t) {
+        dict.set(h, t);
+        changed = true;
+      }
+    }
+    if (!changed) return;
+    if (this.saveTimer) clearTimeout(this.saveTimer);
+    this.saveTimer = setTimeout(() => {
+      void saveDict(this.dictKey(lang), Object.fromEntries(dict));
+    }, 1e3);
+  }
+  async fetchBundle(lang, path) {
+    const id = `${lang}|${path}`;
+    if (this.bundlesFetched.has(id)) return;
+    this.bundlesFetched.add(id);
+    try {
+      const url = new URL("/api/v1/bundle", this.opts.apiUrl);
+      url.searchParams.set("key", this.opts.projectKey);
+      url.searchParams.set("lang", lang);
+      url.searchParams.set("path", path);
+      const res = await fetch(url.toString());
+      if (!res.ok) return;
+      const body = await res.json();
+      if (body.translations) this.merge(lang, body.translations);
+    } catch {
+      this.bundlesFetched.delete(id);
+    }
+  }
+  scheduleFlush() {
+    if (this.flushTimer) return;
+    this.flushTimer = setTimeout(() => {
+      this.flushTimer = null;
+      void this.flush();
+    }, FLUSH_DELAY_MS);
+  }
+  async flush() {
+    await this.bundleWait;
+    const lang = this.lang;
+    if (lang === this.opts.sourceLang) return;
+    const dict = this.dicts.get(lang);
+    const batch = [];
+    this.pending.forEach((text, hash) => {
+      if (!dict?.has(hash)) batch.push([hash, text]);
+    });
+    this.pending.clear();
+    if (batch.length === 0) {
+      this.reapply();
+      return;
+    }
+    const chunks = [];
+    for (let i = 0; i < batch.length; i += BATCH_SIZE) chunks.push(batch.slice(i, i + BATCH_SIZE));
+    for (let i = 0; i < chunks.length; i += PARALLEL_BATCHES) {
+      await Promise.all(chunks.slice(i, i + PARALLEL_BATCHES).map((chunk) => this.sendBatch(lang, chunk)));
+    }
+  }
+  async sendBatch(lang, chunk) {
+    chunk.forEach(([h]) => this.inflight.add(h));
+    try {
+      const res = await fetch(new URL("/api/v1/translate", this.opts.apiUrl).toString(), {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          key: this.opts.projectKey,
+          lang,
+          path: this.path || currentPath(),
+          strings: chunk.map(([, t]) => t)
+        })
+      });
+      if (!res.ok) throw new Error(`translate failed: ${res.status}`);
+      const body = await res.json();
+      this.merge(lang, body.translations);
+      chunk.forEach(([h]) => {
+        if (!(h in body.translations)) this.failed.add(h);
+      });
+    } catch {
+      chunk.forEach(([h]) => this.failed.add(h));
+    } finally {
+      chunk.forEach(([h]) => this.inflight.delete(h));
+    }
+    if (lang === this.lang) this.reapply();
+  }
+};
+var RTL = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "ps", "sd", "yi", "dv", "ug"]);
+function isRtl(lang) {
+  return RTL.has(lang.split("-")[0]);
+}
+
+// src/languages.ts
+var LANGUAGES = [
+  { code: "en", name: "English", native: "English" },
+  { code: "es", name: "Spanish", native: "Espa\xF1ol" },
+  { code: "fr", name: "French", native: "Fran\xE7ais" },
+  { code: "de", name: "German", native: "Deutsch" },
+  { code: "it", name: "Italian", native: "Italiano" },
+  { code: "pt", name: "Portuguese", native: "Portugu\xEAs" },
+  { code: "pt-BR", name: "Brazilian Portuguese", native: "Portugu\xEAs (Brasil)" },
+  { code: "nl", name: "Dutch", native: "Nederlands" },
+  { code: "sv", name: "Swedish", native: "Svenska" },
+  { code: "no", name: "Norwegian", native: "Norsk" },
+  { code: "da", name: "Danish", native: "Dansk" },
+  { code: "fi", name: "Finnish", native: "Suomi" },
+  { code: "pl", name: "Polish", native: "Polski" },
+  { code: "cs", name: "Czech", native: "\u010Ce\u0161tina" },
+  { code: "sk", name: "Slovak", native: "Sloven\u010Dina" },
+  { code: "hu", name: "Hungarian", native: "Magyar" },
+  { code: "ro", name: "Romanian", native: "Rom\xE2n\u0103" },
+  { code: "bg", name: "Bulgarian", native: "\u0411\u044A\u043B\u0433\u0430\u0440\u0441\u043A\u0438" },
+  { code: "el", name: "Greek", native: "\u0395\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AC" },
+  { code: "tr", name: "Turkish", native: "T\xFCrk\xE7e" },
+  { code: "ru", name: "Russian", native: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439" },
+  { code: "uk", name: "Ukrainian", native: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430" },
+  { code: "ar", name: "Arabic", native: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629", rtl: true },
+  { code: "he", name: "Hebrew", native: "\u05E2\u05D1\u05E8\u05D9\u05EA", rtl: true },
+  { code: "fa", name: "Persian", native: "\u0641\u0627\u0631\u0633\u06CC", rtl: true },
+  { code: "ur", name: "Urdu", native: "\u0627\u0631\u062F\u0648", rtl: true },
+  { code: "yi", name: "Yiddish", native: "\u05D9\u05D9\u05B4\u05D3\u05D9\u05E9", rtl: true },
+  { code: "hi", name: "Hindi", native: "\u0939\u093F\u0928\u094D\u0926\u0940" },
+  { code: "bn", name: "Bengali", native: "\u09AC\u09BE\u0982\u09B2\u09BE" },
+  { code: "ta", name: "Tamil", native: "\u0BA4\u0BAE\u0BBF\u0BB4\u0BCD" },
+  { code: "th", name: "Thai", native: "\u0E44\u0E17\u0E22" },
+  { code: "vi", name: "Vietnamese", native: "Ti\u1EBFng Vi\u1EC7t" },
+  { code: "id", name: "Indonesian", native: "Bahasa Indonesia" },
+  { code: "ms", name: "Malay", native: "Bahasa Melayu" },
+  { code: "tl", name: "Filipino", native: "Filipino" },
+  { code: "zh-CN", name: "Simplified Chinese", native: "\u7B80\u4F53\u4E2D\u6587" },
+  { code: "zh-TW", name: "Traditional Chinese", native: "\u7E41\u9AD4\u4E2D\u6587" },
+  { code: "ja", name: "Japanese", native: "\u65E5\u672C\u8A9E" },
+  { code: "ko", name: "Korean", native: "\uD55C\uAD6D\uC5B4" },
+  { code: "sw", name: "Swahili", native: "Kiswahili" }
+];
+function findLanguage(code) {
+  return LANGUAGES.find((l) => l.code === code);
+}
+
+// src/usage.ts
+var FLUSH_INTERVAL_MS = 15e3;
+var NAVIGATE_EVENT = "translationtool:navigate";
+var UsageTracker = class {
+  constructor(apiUrl, projectKey, getLang) {
+    this.apiUrl = apiUrl;
+    this.projectKey = projectKey;
+    this.getLang = getLang;
+    this.counts = /* @__PURE__ */ new Map();
+    this.timer = null;
+    this.lastPath = "";
+    this.onHide = () => {
+      if (document.visibilityState === "hidden") this.flush();
+    };
+  }
+  start() {
+    this.view();
+    this.timer = setInterval(() => this.flush(), FLUSH_INTERVAL_MS);
+    document.addEventListener("visibilitychange", this.onHide);
+  }
+  stop() {
+    this.flush();
+    if (this.timer) clearInterval(this.timer);
+    document.removeEventListener("visibilitychange", this.onHide);
+  }
+  /** Record a view of the current page, ignoring repeats of the same path. */
+  view(force = false) {
+    const path = currentPath();
+    if (!force && path === this.lastPath) return;
+    this.lastPath = path;
+    const id = `${path}
+${this.getLang()}`;
+    this.counts.set(id, (this.counts.get(id) ?? 0) + 1);
+  }
+  flush() {
+    if (this.counts.size === 0) return;
+    const views = [...this.counts].map(([id, count]) => {
+      const [path, lang] = id.split("\n");
+      return { path, lang, count };
+    });
+    this.counts.clear();
+    const body = JSON.stringify({ key: this.projectKey, views });
+    const url = new URL("/api/v1/events", this.apiUrl).toString();
+    try {
+      if (navigator.sendBeacon?.(url, new Blob([body], { type: "text/plain" }))) return;
+    } catch {
+    }
+    void fetch(url, { method: "POST", body, keepalive: true, headers: { "content-type": "text/plain" } }).catch(
+      () => {
+      }
+    );
+  }
+};
+var historyPatched = false;
+function onNavigate(cb) {
+  if (!historyPatched) {
+    historyPatched = true;
+    for (const method of ["pushState", "replaceState"]) {
+      const original = history[method];
+      history[method] = function(...args) {
+        const result = original.apply(this, args);
+        window.dispatchEvent(new Event(NAVIGATE_EVENT));
+        return result;
+      };
+    }
+    window.addEventListener("popstate", () => window.dispatchEvent(new Event(NAVIGATE_EVENT)));
+  }
+  window.addEventListener(NAVIGATE_EVENT, cb);
+  return () => window.removeEventListener(NAVIGATE_EVENT, cb);
+}
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TranslateContext = (0, import_react.createContext)(null);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react.useEffect : import_react.useLayoutEffect;
+var LOADING_ATTR = "data-translationtool-loading";
+var MAX_HIDE_MS = 1500;
+function hidePage() {
+  if (!document.getElementById("translationtool-style")) {
+    const style = document.createElement("style");
+    style.id = "translationtool-style";
+    style.textContent = `html[${LOADING_ATTR}] body{opacity:0 !important}`;
+    document.head.appendChild(style);
+  }
+  document.documentElement.setAttribute(LOADING_ATTR, "");
+  const show = () => document.documentElement.removeAttribute(LOADING_ATTR);
+  const t = setTimeout(show, MAX_HIDE_MS);
+  return () => {
+    clearTimeout(t);
+    show();
+  };
+}
+function TranslateProvider({
+  projectKey,
+  sourceLang = "en",
+  languages,
+  detectBrowserLanguage = false,
+  apiUrl = DEFAULT_API_URL,
+  children
+}) {
+  const [lang, setLangState] = (0, import_react.useState)(sourceLang);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const engineRef = (0, import_react.useRef)(null);
+  const langRef = (0, import_react.useRef)(lang);
+  langRef.current = lang;
+  const available = (0, import_react.useMemo)(() => {
+    const codes = languages ?? LANGUAGES.map((l) => l.code);
+    const list = codes.map((c) => findLanguage(c) ?? { code: c, name: c, native: c });
+    if (!list.some((l) => l.code === sourceLang)) {
+      list.unshift(findLanguage(sourceLang) ?? { code: sourceLang, name: sourceLang, native: sourceLang });
+    }
+    return list;
+  }, [languages, sourceLang]);
+  useIsomorphicLayoutEffect(() => {
+    const engine = new TranslationEngine({ projectKey, apiUrl, sourceLang });
+    engineRef.current = engine;
+    const tracker = new UsageTracker(apiUrl, projectKey, () => langRef.current);
+    tracker.start();
+    const off = onNavigate(() => {
+      tracker.view();
+      engine.onNavigate();
+    });
+    return () => {
+      off();
+      tracker.stop();
+      engine.stop();
+      engineRef.current = null;
+    };
+  }, [projectKey, apiUrl, sourceLang]);
+  useIsomorphicLayoutEffect(() => {
+    let initial = readStoredLang();
+    if (!initial && detectBrowserLanguage) {
+      const nav = navigator.language;
+      initial = available.find((l) => l.code === nav)?.code ?? available.find((l) => l.code === nav.split("-")[0])?.code ?? null;
+    }
+    if (initial && initial !== sourceLang && available.some((l) => l.code === initial)) {
+      setLangState(initial);
+    }
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const engine = engineRef.current;
+    if (!engine || engine.language === lang) return;
+    const show = lang !== sourceLang ? hidePage() : () => {
+    };
+    setLoading(true);
+    let cancelled = false;
+    engine.setLanguage(lang).finally(() => {
+      show();
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+      show();
+    };
+  }, [lang, sourceLang, projectKey, apiUrl]);
+  const setLang = (0, import_react.useCallback)((code) => {
+    writeStoredLang(code);
+    setLangState(code);
+  }, []);
+  const value = (0, import_react.useMemo)(
+    () => ({ lang, sourceLang, languages: available, setLang, loading }),
+    [lang, sourceLang, available, setLang, loading]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TranslateContext.Provider, { value, children });
+}
+function useTranslate() {
+  const ctx = (0, import_react.useContext)(TranslateContext);
+  if (!ctx) throw new Error("useTranslate must be used inside <TranslateProvider>");
+  return ctx;
+}
+
+// src/LanguageSelect.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function LanguageSelect({ className, style, "aria-label": ariaLabel = "Language" }) {
+  const { lang, languages, setLang } = useTranslate();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "select",
+    {
+      "data-no-translate": true,
+      className,
+      style,
+      "aria-label": ariaLabel,
+      value: lang,
+      onChange: (e) => setLang(e.target.value),
+      children: languages.map((l) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: l.code, children: l.native }, l.code))
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LANGUAGES,
+  LanguageSelect,
+  TranslateProvider,
+  TranslationEngine,
+  useTranslate
+});