@stringpush/sdk 0.1.0

package/dist/overlay-MLOXYRPA.umd.cjs

@@ -0,0 +1,1039 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/overlay/constants.ts
+var OVERLAY_ROOT_ID = "translation-overlay-root";
+var EDIT_PANEL_HOST_ID = "translation-edit-panel-host";
+var OVERLAY_CHUNK_MARKER = "translation-overlay-chunk-v1";
+
+// src/overlay/overlay-api.ts
+var _runtimecore = require('@stringpush/runtime-core');
+var OverlayApiError = class extends Error {
+  constructor(message, status, body) {
+    super(message);
+    this.status = status;
+    this.body = body;
+    this.name = "OverlayApiError";
+  }
+  
+  
+  get isVersionConflict() {
+    return this.status === 409 && typeof this.body === "object" && this.body !== null && "error" in this.body && _optionalChain([this, 'access', _ => _.body, 'access', _2 => _2.error, 'optionalAccess', _3 => _3.code]) === "VERSION_CONFLICT";
+  }
+  get isKeyNotFound() {
+    return this.status === 404 && typeof this.body === "object" && this.body !== null && "error" in this.body && _optionalChain([this, 'access', _4 => _4.body, 'access', _5 => _5.error, 'optionalAccess', _6 => _6.code]) === "NOT_FOUND";
+  }
+};
+function overlayHeaders(config) {
+  const headers = {
+    Authorization: `Bearer ${config.editToken}`,
+    Accept: "application/json",
+    "Content-Type": "application/json"
+  };
+  const origin = _runtimecore.resolveRequestOrigin.call(void 0, config.origin);
+  if (origin) {
+    headers.Origin = origin;
+  }
+  return headers;
+}
+async function overlayFetch(config, path, init = {}) {
+  const fetchFn = _nullishCoalesce(config.fetch, () => ( globalThis.fetch.bind(globalThis)));
+  const url = `${config.apiBaseUrl.replace(/\/$/, "")}${path}`;
+  return fetchFn(url, {
+    ...init,
+    headers: {
+      ...overlayHeaders(config),
+      ...init.headers
+    }
+  });
+}
+async function parseJson(response) {
+  return await response.json();
+}
+async function fetchOverlayLocales(config) {
+  const response = await overlayFetch(config, "/v1/overlay/locales");
+  const body = await parseJson(
+    response
+  );
+  if (!response.ok) {
+    throw new OverlayApiError(
+      `Failed to load locales (HTTP ${response.status})`,
+      response.status,
+      body
+    );
+  }
+  return body.data.map((row) => ({
+    id: row.id,
+    code: row.code
+  }));
+}
+async function fetchOverlayKeyValues(config, keyPath) {
+  const params = new URLSearchParams({ key: keyPath });
+  const response = await overlayFetch(config, `/v1/overlay/keys/values?${params}`);
+  const body = await parseJson(response);
+  if (!response.ok) {
+    throw new OverlayApiError(
+      `Failed to load key values (HTTP ${response.status})`,
+      response.status,
+      body
+    );
+  }
+  return body;
+}
+async function createOverlayKey(config, input) {
+  const response = await overlayFetch(config, "/v1/overlay/keys", {
+    method: "POST",
+    body: JSON.stringify({
+      keyPath: input.keyPath,
+      defaultMessage: _nullishCoalesce(input.defaultMessage, () => ( null))
+    })
+  });
+  const body = await parseJson(response);
+  if (!response.ok) {
+    throw new OverlayApiError(
+      `Failed to create translation key (HTTP ${response.status})`,
+      response.status,
+      body
+    );
+  }
+  const record = body;
+  const keyPath = record.namespace ? `${record.namespace}.${record.key}` : record.key;
+  return { id: record.id, keyPath };
+}
+async function patchOverlayValue(config, input) {
+  const headers = {};
+  if (input.version !== null) {
+    headers["If-Match"] = String(input.version);
+  }
+  const response = await overlayFetch(config, "/v1/overlay/values", {
+    method: "PATCH",
+    headers,
+    body: JSON.stringify({
+      keyId: input.keyId,
+      localeId: input.localeId,
+      value: input.value
+    })
+  });
+  const body = await parseJson(response);
+  if (!response.ok) {
+    throw new OverlayApiError(
+      `Failed to save translation (HTTP ${response.status})`,
+      response.status,
+      body
+    );
+  }
+  return body;
+}
+
+// src/overlay/locale-display.ts
+var LOCALE_FLAGS = {
+  en: "\u{1F1FA}\u{1F1F8}",
+  fr: "\u{1F1EB}\u{1F1F7}",
+  de: "\u{1F1E9}\u{1F1EA}",
+  "de-DE": "\u{1F1E9}\u{1F1EA}",
+  es: "\u{1F1EA}\u{1F1F8}"
+};
+var LOCALE_NAMES = {
+  en: "English",
+  fr: "French",
+  de: "German",
+  "de-DE": "German",
+  es: "Spanish"
+};
+function overlayLocaleFlag(code) {
+  return _nullishCoalesce(LOCALE_FLAGS[code], () => ( "\u{1F310}"));
+}
+function overlayLocaleLabel(code) {
+  const name = _nullishCoalesce(LOCALE_NAMES[code], () => ( code.toUpperCase()));
+  return `${name} (${code})`;
+}
+
+// src/overlay/edit-panel.ts
+
+
+// src/overlay/edit-panel-remote.ts
+var activeHandler = null;
+function registerEditPanelRemoteHandler(handler) {
+  activeHandler = handler;
+}
+function notifyEditPanelRemoteUpdate(update) {
+  if (!activeHandler || activeHandler.keyPath !== update.keyPath) {
+    return false;
+  }
+  return activeHandler.applyRemoteUpdate(update);
+}
+
+// src/overlay/edit-panel.ts
+var PANEL_STYLES = `
+:host {
+  all: initial;
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+  --sp-bg: #ffffff;
+  --sp-text: #0f172a;
+  --sp-muted: #64748b;
+  --sp-border: #e2e8f0;
+  --sp-accent: #4338ca;
+  --sp-accent-hover: #3730a3;
+  --sp-warning-bg: #fef3c7;
+  --sp-warning-text: #92400e;
+  --sp-warning-border: #fcd34d;
+  --sp-badge-draft-bg: #fef3c6;
+  --sp-badge-draft-text: #973c00;
+  --sp-badge-default-bg: #f1f5f9;
+  --sp-badge-default-text: #475569;
+}
+.panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 400px;
+  max-width: 100vw;
+  height: 100vh;
+  background: var(--sp-bg);
+  color: var(--sp-text);
+  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
+  display: flex;
+  flex-direction: column;
+  z-index: 2147483647;
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid var(--sp-border);
+}
+.header-main {
+  min-width: 0;
+}
+.brand {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--sp-accent);
+}
+.title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.key-path {
+  margin: 4px 0 0;
+  font: 12px/1.4 ui-monospace, Menlo, monospace;
+  color: var(--sp-muted);
+  word-break: break-all;
+}
+.close-btn {
+  border: none;
+  background: transparent;
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--sp-muted);
+  padding: 2px 4px;
+}
+.body {
+  flex: 1;
+  overflow: auto;
+  padding: 12px 16px;
+}
+.locale-row {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--sp-border);
+}
+.locale-row:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.locale-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.locale-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--sp-text);
+}
+.locale-flag {
+  font-size: 15px;
+  line-height: 1;
+}
+.locale-badges {
+  display: inline-flex;
+  gap: 4px;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.badge-default {
+  background: var(--sp-badge-default-bg);
+  color: var(--sp-badge-default-text);
+}
+.badge-draft {
+  background: var(--sp-badge-draft-bg);
+  color: var(--sp-badge-draft-text);
+}
+.locale-row textarea {
+  width: 100%;
+  min-height: 80px;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font: 14px/1.45 inherit;
+  resize: vertical;
+  color: var(--sp-text);
+}
+.locale-row textarea:focus-visible {
+  outline: 2px solid var(--sp-accent);
+  outline-offset: 1px;
+  border-color: var(--sp-accent);
+}
+.banner {
+  margin: 0 16px 12px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--sp-warning-border);
+  background: var(--sp-warning-bg);
+  color: var(--sp-warning-text);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.banner p {
+  margin: 0;
+}
+.banner button {
+  margin-top: 10px;
+  border: 1px solid #d97706;
+  background: #fff;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sp-warning-text);
+}
+.footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 12px 16px 16px;
+  border-top: 1px solid var(--sp-border);
+}
+.footer button {
+  border-radius: 8px;
+  padding: 9px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.footer .secondary {
+  border: 1px solid #cbd5e1;
+  background: #fff;
+  color: #334155;
+}
+.footer .primary {
+  border: none;
+  background: var(--sp-accent);
+  color: #fff;
+}
+.footer .primary:hover:not(:disabled) {
+  background: var(--sp-accent-hover);
+}
+.footer .primary::before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.667 3.5 5.25 9.917 2.333 7' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+}
+.status {
+  padding: 24px 16px;
+  color: var(--sp-muted);
+  font-size: 14px;
+}
+.create-panel {
+  padding: 8px 0;
+}
+.create-panel p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: #334155;
+  line-height: 1.5;
+}
+.create-panel label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
+  margin-bottom: 6px;
+}
+.create-panel input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font: 14px/1.4 inherit;
+  margin-bottom: 12px;
+}
+.create-panel .create-btn {
+  border: none;
+  border-radius: 8px;
+  padding: 9px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--sp-accent);
+  color: #fff;
+}
+.create-panel .error {
+  margin: 0 0 12px;
+  color: #b91c1c;
+  font-size: 13px;
+}
+`;
+function openEditPanel(keyPath, context) {
+  if (typeof document === "undefined") {
+    return { destroy: () => {
+    } };
+  }
+  closeEditPanel();
+  const host = document.createElement("div");
+  host.id = EDIT_PANEL_HOST_ID;
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = PANEL_STYLES;
+  const panel = document.createElement("div");
+  panel.className = "panel";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", "Edit translation");
+  const header = document.createElement("header");
+  header.className = "header";
+  const headerMain = document.createElement("div");
+  headerMain.className = "header-main";
+  const brand = document.createElement("p");
+  brand.className = "brand";
+  brand.textContent = "StringPush";
+  const title = document.createElement("h2");
+  title.className = "title";
+  title.textContent = "Edit translation";
+  const keyEl = document.createElement("p");
+  keyEl.className = "key-path";
+  keyEl.textContent = keyPath;
+  headerMain.append(brand, title, keyEl);
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "close-btn";
+  closeBtn.type = "button";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.textContent = "\xD7";
+  header.append(headerMain, closeBtn);
+  const bodyEl = document.createElement("div");
+  bodyEl.className = "body";
+  const status = document.createElement("div");
+  status.className = "status";
+  status.textContent = "Loading\u2026";
+  bodyEl.append(status);
+  const banner = document.createElement("div");
+  banner.className = "banner";
+  banner.hidden = true;
+  const footer = document.createElement("footer");
+  footer.className = "footer";
+  const cancelBtn = document.createElement("button");
+  cancelBtn.type = "button";
+  cancelBtn.className = "secondary";
+  cancelBtn.textContent = "Cancel";
+  const saveBtn = document.createElement("button");
+  saveBtn.type = "button";
+  saveBtn.className = "primary";
+  saveBtn.textContent = "Save draft";
+  saveBtn.disabled = true;
+  footer.append(cancelBtn, saveBtn);
+  panel.append(header, banner, bodyEl, footer);
+  shadow.append(style, panel);
+  document.body.append(host);
+  let destroyed = false;
+  let rows = [];
+  let keyId = "";
+  const destroy = () => {
+    if (destroyed) {
+      return;
+    }
+    destroyed = true;
+    registerEditPanelRemoteHandler(null);
+    host.remove();
+  };
+  function applyRemoteUpdate(update) {
+    if (!_runtimecore.shouldApplyTranslationUpdate.call(void 0, update.keyPath, update.localeCode, update.version)) {
+      return false;
+    }
+    const row = rows.find((entry) => entry.localeCode === update.localeCode);
+    if (!row) {
+      return false;
+    }
+    if ((_nullishCoalesce(row.version, () => ( 0))) > update.version) {
+      return false;
+    }
+    if (row.draftValue !== row.value) {
+      showConflict(
+        `${update.localeCode} was updated in another tab. Reload to merge your changes.`
+      );
+      return true;
+    }
+    row.value = update.value;
+    row.draftValue = update.value;
+    row.version = update.version;
+    _runtimecore.recordTranslationVersion.call(void 0, update.keyPath, update.localeCode, update.version);
+    renderRows();
+    return true;
+  }
+  closeBtn.addEventListener("click", destroy);
+  cancelBtn.addEventListener("click", destroy);
+  function renderRows() {
+    bodyEl.replaceChildren();
+    for (const row of rows) {
+      const wrap = document.createElement("div");
+      wrap.className = "locale-row";
+      const localeHeader = document.createElement("div");
+      localeHeader.className = "locale-header";
+      const label = document.createElement("span");
+      label.className = "locale-label";
+      const flag = document.createElement("span");
+      flag.className = "locale-flag";
+      flag.textContent = overlayLocaleFlag(row.localeCode);
+      flag.setAttribute("aria-hidden", "true");
+      label.append(flag, document.createTextNode(overlayLocaleLabel(row.localeCode)));
+      const badges = document.createElement("span");
+      badges.className = "locale-badges";
+      if (row.localeCode === context.activeLocaleCode) {
+        const defaultBadge = document.createElement("span");
+        defaultBadge.className = "badge badge-default";
+        defaultBadge.textContent = "Default";
+        badges.append(defaultBadge);
+      }
+      const draftBadge = document.createElement("span");
+      draftBadge.className = "badge badge-draft";
+      draftBadge.textContent = row.draftValue !== row.value ? "Unsaved" : "Draft";
+      badges.append(draftBadge);
+      localeHeader.append(label, badges);
+      const textarea = document.createElement("textarea");
+      textarea.id = `locale-${row.localeId}`;
+      textarea.setAttribute("aria-label", `${row.localeCode} translation`);
+      textarea.value = row.draftValue;
+      textarea.addEventListener("input", () => {
+        row.draftValue = textarea.value;
+        draftBadge.textContent = row.draftValue !== row.value ? "Unsaved" : "Draft";
+      });
+      wrap.append(localeHeader, textarea);
+      bodyEl.append(wrap);
+    }
+    saveBtn.disabled = false;
+  }
+  async function load() {
+    try {
+      const [locales, keyValues] = await Promise.all([
+        fetchOverlayLocales(context),
+        fetchOverlayKeyValues(context, keyPath)
+      ]);
+      if (destroyed) {
+        return;
+      }
+      keyId = keyValues.keyId;
+      const localeCodes = new Set(locales.map((l) => l.code));
+      rows = keyValues.entries.filter((entry) => localeCodes.has(entry.localeCode)).map((entry) => ({
+        ...entry,
+        draftValue: entry.value
+      }));
+      for (const row of rows) {
+        if (row.version !== null) {
+          _runtimecore.recordTranslationVersion.call(void 0, keyPath, row.localeCode, row.version);
+        }
+      }
+      banner.hidden = true;
+      footer.hidden = false;
+      renderRows();
+    } catch (error) {
+      if (error instanceof OverlayApiError && error.isKeyNotFound) {
+        showCreateKeyPrompt();
+        return;
+      }
+      status.textContent = error instanceof Error ? error.message : "Failed to load translations";
+    }
+  }
+  function showCreateKeyPrompt() {
+    footer.hidden = true;
+    bodyEl.replaceChildren();
+    const wrap = document.createElement("div");
+    wrap.className = "create-panel";
+    const intro = document.createElement("p");
+    intro.textContent = "This key is not in your project yet. Create it to start editing translations for all locales.";
+    const label = document.createElement("label");
+    label.textContent = "Default message (optional)";
+    label.htmlFor = "create-default-message";
+    const input = document.createElement("input");
+    input.id = "create-default-message";
+    input.type = "text";
+    input.placeholder = "Text shown when no translation is saved";
+    if (context.suggestedDefaultMessage) {
+      input.value = context.suggestedDefaultMessage;
+    }
+    const errorEl = document.createElement("p");
+    errorEl.className = "error";
+    errorEl.hidden = true;
+    const createBtn = document.createElement("button");
+    createBtn.type = "button";
+    createBtn.className = "create-btn";
+    createBtn.textContent = "Create key";
+    createBtn.addEventListener("click", () => {
+      void (async () => {
+        createBtn.disabled = true;
+        errorEl.hidden = true;
+        try {
+          await createOverlayKey(context, {
+            keyPath,
+            defaultMessage: input.value.trim() || null
+          });
+          if (destroyed) {
+            return;
+          }
+          status.textContent = "Loading\u2026";
+          bodyEl.replaceChildren(status);
+          footer.hidden = false;
+          saveBtn.disabled = true;
+          await load();
+        } catch (createError) {
+          createBtn.disabled = false;
+          errorEl.hidden = false;
+          errorEl.textContent = createError instanceof Error ? createError.message : "Failed to create key";
+        }
+      })();
+    });
+    wrap.append(intro, label, input, errorEl, createBtn);
+    bodyEl.append(wrap);
+  }
+  function showConflict(message) {
+    banner.hidden = false;
+    banner.replaceChildren();
+    const text = document.createElement("p");
+    text.textContent = message;
+    banner.append(text);
+    const reloadBtn = document.createElement("button");
+    reloadBtn.type = "button";
+    reloadBtn.textContent = "Reload";
+    reloadBtn.addEventListener("click", () => {
+      status.textContent = "Loading\u2026";
+      bodyEl.replaceChildren(status);
+      saveBtn.disabled = true;
+      void load();
+    });
+    banner.append(reloadBtn);
+  }
+  saveBtn.addEventListener("click", () => {
+    void (async () => {
+      saveBtn.disabled = true;
+      let hadConflict = false;
+      for (const row of rows) {
+        if (row.draftValue === row.value) {
+          continue;
+        }
+        try {
+          const saved = await patchOverlayValue(context, {
+            keyId,
+            localeId: row.localeId,
+            value: row.draftValue,
+            version: row.version
+          });
+          row.value = saved.value;
+          row.version = saved.version;
+          row.draftValue = saved.value;
+          context.onSaved(keyPath, row.localeCode, saved.value, saved.version);
+        } catch (error) {
+          if (error instanceof OverlayApiError && error.isVersionConflict) {
+            hadConflict = true;
+            showConflict(
+              "Someone else updated this key. Reload to fetch the latest versions, then try again."
+            );
+            break;
+          }
+          showConflict(error instanceof Error ? error.message : "Save failed");
+          hadConflict = true;
+          break;
+        }
+      }
+      saveBtn.disabled = hadConflict;
+      if (!hadConflict) {
+        destroy();
+      }
+    })();
+  });
+  registerEditPanelRemoteHandler({ keyPath, applyRemoteUpdate });
+  void load();
+  return { destroy };
+}
+function closeEditPanel() {
+  registerEditPanelRemoteHandler(null);
+  _optionalChain([document, 'access', _7 => _7.getElementById, 'call', _8 => _8(EDIT_PANEL_HOST_ID), 'optionalAccess', _9 => _9.remove, 'call', _10 => _10()]);
+}
+
+// src/overlay/highlights.ts
+var HIGHLIGHT_CLASS = "translation-sdk-target-highlight";
+var STYLES_ID = "translation-sdk-highlight-styles";
+var TOOLTIP_ID = "translation-sdk-key-tooltip";
+var HIGHLIGHT_CSS = `
+.${HIGHLIGHT_CLASS} {
+  outline: 2px solid #2563eb !important;
+  outline-offset: 2px !important;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28) !important;
+}
+.${HIGHLIGHT_CLASS}:focus-visible {
+  outline: 3px solid #1d4ed8 !important;
+  outline-offset: 2px !important;
+}
+#${TOOLTIP_ID} {
+  position: fixed;
+  z-index: 2147483645;
+  max-width: min(360px, 90vw);
+  padding: 4px 8px;
+  border-radius: 6px;
+  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #f8fafc;
+  background: #0f172a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
+  pointer-events: none;
+  display: none;
+}
+#${TOOLTIP_ID}[data-visible="true"] {
+  display: block;
+}
+`;
+function createHighlightController(options) {
+  if (typeof document === "undefined") {
+    return { destroy: () => {
+    } };
+  }
+  const abort = new AbortController();
+  const { signal } = abort;
+  let highlighted = null;
+  const styleEl = document.createElement("style");
+  styleEl.id = STYLES_ID;
+  styleEl.textContent = HIGHLIGHT_CSS;
+  document.head.append(styleEl);
+  const tip = document.createElement("div");
+  tip.id = TOOLTIP_ID;
+  document.body.append(tip);
+  function isInsideOverlay(node) {
+    if (!node || !(node instanceof Element)) {
+      return false;
+    }
+    return Boolean(
+      node.closest(`#${OVERLAY_ROOT_ID}, #${EDIT_PANEL_HOST_ID}`)
+    );
+  }
+  function clearHighlight() {
+    if (highlighted) {
+      highlighted.classList.remove(HIGHLIGHT_CLASS);
+      highlighted = null;
+    }
+    tip.dataset.visible = "false";
+    tip.textContent = "";
+  }
+  function positionTooltip(key, target, clientX) {
+    tip.textContent = key;
+    tip.dataset.visible = "true";
+    const rect = target.getBoundingClientRect();
+    const top = Math.min(rect.bottom + 8, window.innerHeight - 32);
+    const left = Math.min(Math.max(clientX, 8), window.innerWidth - 200);
+    tip.style.top = `${top}px`;
+    tip.style.left = `${left}px`;
+  }
+  function applyHighlight(target, key, clientX) {
+    if (highlighted !== target) {
+      clearHighlight();
+      highlighted = target;
+      target.classList.add(HIGHLIGHT_CLASS);
+    }
+    positionTooltip(key, target, clientX);
+  }
+  function inspectTarget(target, clientX, _clientY) {
+    if (!target || isInsideOverlay(target)) {
+      clearHighlight();
+      return;
+    }
+    const key = options.resolveKey(target);
+    if (!key) {
+      clearHighlight();
+      return;
+    }
+    applyHighlight(target, key, clientX);
+  }
+  document.addEventListener(
+    "pointermove",
+    (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      inspectTarget(target, event.clientX, event.clientY);
+    },
+    { signal }
+  );
+  document.addEventListener(
+    "focusin",
+    (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target) {
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      inspectTarget(target, rect.left + rect.width / 2, rect.top);
+    },
+    { capture: true, signal }
+  );
+  document.addEventListener(
+    "click",
+    (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target || isInsideOverlay(target)) {
+        return;
+      }
+      const key = options.resolveKey(target);
+      if (!key) {
+        return;
+      }
+      _optionalChain([options, 'access', _11 => _11.onActivateKey, 'optionalCall', _12 => _12(key, target)]);
+    },
+    { capture: true, signal }
+  );
+  return {
+    destroy: () => {
+      abort.abort();
+      clearHighlight();
+      styleEl.remove();
+      tip.remove();
+    }
+  };
+}
+
+// src/overlay/realtime-sync.ts
+
+var _realtimeprotocol = require('@stringpush/realtime-protocol');
+function handleRealtimeWireMessage(raw, context) {
+  let event;
+  try {
+    event = _realtimeprotocol.parseRealtimeEvent.call(void 0, raw);
+  } catch (e) {
+    return;
+  }
+  void applyRealtimeEvent(event, context).catch(() => {
+  });
+}
+async function applyRealtimeEvent(event, context) {
+  if (event.type === "translation.updated") {
+    const { payload } = event;
+    if (payload.projectId !== context.projectId || payload.environmentId !== context.environmentId) {
+      return;
+    }
+    notifyEditPanelRemoteUpdate({
+      keyPath: payload.keyPath,
+      localeCode: payload.localeCode,
+      value: payload.value,
+      version: payload.version
+    });
+    if (_runtimecore.patchCatalogEntry.call(void 0, 
+      payload.keyPath,
+      payload.localeCode,
+      payload.value,
+      payload.version
+    )) {
+      context.notifyTranslationsUpdated();
+    }
+    return;
+  }
+  if (event.type === "bundle.published") {
+    const { payload } = event;
+    if (payload.projectId !== context.projectId || payload.applicationId !== context.applicationId || payload.environmentId !== context.environmentId) {
+      return;
+    }
+    const reloaded = await _runtimecore.reloadIfBundlePublishedNewer.call(void 0, payload.releases);
+    if (reloaded) {
+      context.notifyTranslationsUpdated();
+    }
+  }
+}
+
+// src/overlay/realtime-reconnect.ts
+var REALTIME_RECONNECT_INITIAL_MS = 1e3;
+var REALTIME_RECONNECT_MAX_MS = 3e4;
+function computeRealtimeReconnectDelayMs(attempt, initialMs = REALTIME_RECONNECT_INITIAL_MS, maxMs = REALTIME_RECONNECT_MAX_MS) {
+  if (attempt <= 0) {
+    return initialMs;
+  }
+  return Math.min(initialMs * 2 ** (attempt - 1), maxMs);
+}
+
+// src/overlay/realtime-client.ts
+function connectRealtime(options) {
+  if (typeof globalThis === "undefined" || !("WebSocket" in globalThis)) {
+    return null;
+  }
+  const WebSocketCtor = globalThis.WebSocket;
+  let intentionalClose = false;
+  let reconnectAttempt = 0;
+  let reconnectTimer = null;
+  let socket = null;
+  const clearReconnectTimer = () => {
+    if (reconnectTimer !== null) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+  };
+  const sendAuth = (ws) => {
+    ws.send(
+      JSON.stringify({
+        type: "auth",
+        token: options.editToken,
+        projectId: options.projectId
+      })
+    );
+  };
+  const attachSocket = (ws) => {
+    ws.addEventListener("open", () => {
+      reconnectAttempt = 0;
+      sendAuth(ws);
+    });
+    ws.addEventListener("message", (event) => {
+      const raw = typeof event.data === "string" ? event.data : null;
+      if (!raw) {
+        return;
+      }
+      handleRealtimeWireMessage(raw, options.sync);
+    });
+    ws.addEventListener("close", () => {
+      if (socket === ws) {
+        socket = null;
+      }
+      if (!intentionalClose) {
+        scheduleReconnect();
+      }
+    });
+  };
+  const scheduleReconnect = () => {
+    if (intentionalClose) {
+      return;
+    }
+    clearReconnectTimer();
+    reconnectAttempt += 1;
+    const delayMs = computeRealtimeReconnectDelayMs(reconnectAttempt);
+    reconnectTimer = setTimeout(() => {
+      reconnectTimer = null;
+      openSocket();
+    }, delayMs);
+  };
+  const openSocket = () => {
+    if (intentionalClose) {
+      return;
+    }
+    const ws = new WebSocketCtor(options.realtimeUrl);
+    socket = ws;
+    attachSocket(ws);
+  };
+  openSocket();
+  return {
+    close: () => {
+      intentionalClose = true;
+      clearReconnectTimer();
+      if (socket && (socket.readyState === WebSocketCtor.OPEN || socket.readyState === WebSocketCtor.CONNECTING)) {
+        socket.close();
+      }
+      socket = null;
+    }
+  };
+}
+
+// src/overlay/index.ts
+function mountOverlay(context) {
+  if (typeof document === "undefined") {
+    return { destroy: () => {
+    } };
+  }
+  _optionalChain([document, 'access', _13 => _13.getElementById, 'call', _14 => _14(OVERLAY_ROOT_ID), 'optionalAccess', _15 => _15.remove, 'call', _16 => _16()]);
+  closeEditPanel();
+  const mountHost = document.createElement("div");
+  mountHost.id = OVERLAY_ROOT_ID;
+  mountHost.setAttribute("data-translation-overlay", "true");
+  const shadow = mountHost.attachShadow({ mode: "open" });
+  const label = document.createElement("div");
+  label.setAttribute("data-overlay-marker", OVERLAY_CHUNK_MARKER);
+  label.textContent = "Translation edit mode \u2014 click text to edit";
+  label.style.cssText = [
+    "position:fixed",
+    "bottom:16px",
+    "right:16px",
+    "z-index:2147483646",
+    "padding:8px 12px",
+    "border-radius:8px",
+    "font:600 13px/1.4 system-ui,sans-serif",
+    "color:#fff",
+    "background:#1e3a5f",
+    "box-shadow:0 4px 12px rgba(0,0,0,.25)",
+    "pointer-events:none"
+  ].join(";");
+  shadow.append(label);
+  document.body.append(mountHost);
+  let panelHandle = null;
+  const highlights = createHighlightController({
+    resolveKey: context.resolveKey,
+    onActivateKey: (keyPath, element) => {
+      _optionalChain([panelHandle, 'optionalAccess', _17 => _17.destroy, 'call', _18 => _18()]);
+      const suggestedDefaultMessage = _optionalChain([element, 'access', _19 => _19.textContent, 'optionalAccess', _20 => _20.trim, 'call', _21 => _21()]) || void 0;
+      panelHandle = openEditPanel(keyPath, {
+        apiBaseUrl: context.apiBaseUrl,
+        editToken: context.editToken,
+        origin: context.origin,
+        activeLocaleCode: context.activeLocaleCode,
+        suggestedDefaultMessage,
+        onSaved: context.onCatalogPatched
+      });
+    }
+  });
+  const realtime = connectRealtime({
+    realtimeUrl: context.realtimeUrl,
+    editToken: context.editToken,
+    projectId: context.projectId,
+    sync: {
+      projectId: context.projectId,
+      applicationId: context.applicationId,
+      environmentId: context.environmentId,
+      notifyTranslationsUpdated: context.onTranslationsUpdated
+    }
+  });
+  return {
+    destroy: () => {
+      _optionalChain([panelHandle, 'optionalAccess', _22 => _22.destroy, 'call', _23 => _23()]);
+      highlights.destroy();
+      _optionalChain([realtime, 'optionalAccess', _24 => _24.close, 'call', _25 => _25()]);
+      mountHost.remove();
+    }
+  };
+}
+
+
+
+
+exports.OVERLAY_CHUNK_MARKER = OVERLAY_CHUNK_MARKER; exports.OVERLAY_ROOT_ID = OVERLAY_ROOT_ID; exports.mountOverlay = mountOverlay;
+//# sourceMappingURL=overlay-MLOXYRPA.umd.cjs.map