livelocale 0.8.0 → 0.9.0

package/README.md

@@ -212,11 +212,21 @@ Inspects the project for the integration problems the Studio cannot recover from
 probes the running app.
 
 ```bash
-npx livelocale doctor [--dir <path>] [--locales <path>] [--app <origin>] [--token <token>]
+npx livelocale doctor [--dir <path>] [--locales <path>] [--app <url>] [--share] [--token <token>]
 ```
 
 - `--locales` — locales directory relative to the project (default `locales`).
-- `--app` — also check that the mutation API answers and that pages are embeddable.
+- `--app` — also check that the mutation API answers and that pages are embeddable. A path is
+  the app base: `--app https://user.github.io/repo/` probes a GitHub Pages project site (a
+  trailing `index.html` is dropped).
+- `--share` — run the share link probes even when `<base>livelocale/manifest.json` does not
+  answer. They also run on their own whenever the manifest answers with JSON. They check the
+  Studio page, the manifest, `flag.js` and its tag first in `<head>`, frame headers
+  (`X-Frame-Options: DENY` or `frame-ancestors 'none'` breaks the Studio; `SAMEORIGIN` is fine),
+  `script-src`, and service workers, then print `🔗 Share link: <base>livelocale/index.html`.
+  When a Workbox service worker (vite-plugin-pwa, workbox-webpack-plugin) would answer the Studio
+  with your app shell, add this line to its Workbox options:
+  `navigateFallbackDenylist: [/^\/livelocale\//]`.
 - `--token` — access token for a preview deployment (defaults to `LIVELOCALE_TOKEN`); with it the
   doctor also reports the server mode and repository access problems.
 
@@ -254,6 +264,85 @@ English's two are not reported.
 - run: npx livelocale check
 ```
 
+### `pack`
+
+Turns a finished static build into a share link: it writes the Studio, `manifest.json`, the locale
+files and `flag.js` into `<outDir>/livelocale/` and links `flag.js` from every HTML page. Run it
+after your build, for example `"build": "vite build && livelocale pack dist"`.
+
+```bash
+npx livelocale pack <outDir> [--dir <path>] [--locales <path>] [--source <locale>] [--base <path>] [--expose-repo] [--no-inject]
+```
+
+- `<outDir>` — the built site folder, relative to `--dir` (for example `dist`, `build` or `out`).
+- `--locales` — locales directory relative to the project (default `locales`).
+- `--source` — source locale (default `en`, else the first locale).
+- `--base` — site path the app is served from, such as `/repo/` (default: detected from the
+  project, else `/`). A relative base (`./`) prints a warning; pass an absolute one if the app has
+  client-side routes.
+- `--expose-repo` — put the GitHub `owner/repo` into `livelocale/manifest.json` (off by default).
+- `--no-inject` — do not add the `flag.js` script to HTML files. Next.js outputs are never injected.
+
+The share link is `<your site><base>livelocale/index.html`. Nothing is written outside
+`<outDir>/livelocale/` except that one script tag, and an existing `livelocale/` folder is replaced
+only when pack wrote it.
+
+### `build`
+
+Runs your build command and packs its output in one step. The environment variables work the same
+on Windows, macOS and Linux, so no `cross-env` is needed.
+
+```bash
+npx livelocale build [--preview] [--out <dir>] [pack options] -- <your build command>
+```
+
+- `--preview` — run the command with `LIVELOCALE=preview` and `NEXT_PUBLIC_LIVELOCALE=preview`, so
+  server-rendered and pre-rendered pages carry watermarks.
+- `--out` — the build output folder (default: the first of `dist/`, `build/` or `out/` that holds an
+  `index.html` written by this build). Next.js projects always pack into `public/livelocale/`
+  before the build runs, so Next copies it into the output.
+- `--dir`, `--locales`, `--source`, `--base` and `--expose-repo` work as they do for `pack`.
+
+| Stack                      | Build change                                                                                                                                                           |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Next.js `output: 'export'` | `"build:preview": "livelocale build --preview -- next build"`, deployed to a staging location, because the HTML is pre-rendered and must be watermarked at build time. |
+| Next.js on Vercel/Node     | For the Preview environment, use the build command `livelocale build --preview -- next build`. It packs into a gitignored `public/livelocale/`.                        |
+| Custom CI                  | `LIVELOCALE=preview <your build>` (only for SSR/SSG), then `npx livelocale pack <outDir>`.                                                                             |
+
+A static export stops before building when `app/api/livelocale/route.*` exports POST, because export
+mode only allows GET route handlers; the share link does not need that route.
+
+### `apply`
+
+Applies a LiveLocale change link (the `lc1.` link a translator sends from the share link) to your
+locale files. Every edit is checked again against your own files and source locale before anything
+is written.
+
+```bash
+npx livelocale apply "<link>" [--pr] [--dir <path>] [--locales <path>] [--source <locale>] [--force] [--dry-run]
+npx livelocale apply changes.txt
+npx livelocale apply - < changes.txt
+npx livelocale apply --clipboard
+```
+
+- The input is the change link itself (or the Studio link that carries it), a file that holds it
+  (the change file Send offers, or a saved email or issue), `-` to read standard input, or
+  `--clipboard` to read the clipboard. Pass the link or `--clipboard`, not both.
+- cmd.exe cuts command lines at 8,191 characters, so on Windows pass a long link as a file or with
+  `--clipboard`.
+- `--pr` — commit the changes on a new `livelocale/apply-<time>` branch, push it and open a pull
+  request.
+- `--locales` and `--source` work as they do for `check` (default `locales`, and `en`, else the
+  first locale).
+- `--dry-run` — plan the edits and print the summary without writing any file.
+- `--force` — also apply edits the translator saved with "Save anyway" (for example a dropped
+  placeholder). Without it they are reported as `needs --force` and skipped.
+
+The summary lists each edit's locale, key and status (applied, already done, conflict, needs
+--force or rejected) and never prints translation values. The exit code is 0 when every edit was
+applied or already done, and 1 when any edit is a conflict, needs `--force` or was rejected, or
+when the link cannot be read.
+
 ### `migrate`
 
 Performs static analysis to scan and automatically wrap existing `react-i18next` hooks with `wrapTranslationEngine`.
@@ -286,6 +375,33 @@ export default defineConfig({
 });
 ```
 
+### Share link from `vite build`
+
+Set `share: true` and `vite build` also writes a share link: the Studio, `manifest.json`, the
+locale files and `flag.js` go into `<outDir>/livelocale/`, and `index.html` loads
+`<base>livelocale/flag.js` first in `<head>`. Deploy the output anywhere static and send
+`<origin><base>livelocale/index.html`. Without `share` the build output is unchanged.
+
+```typescript
+liveLocaleVite({
+  localesPath: './locales',
+  share: true, // write <outDir>/livelocale/ on vite build (default: false)
+  exposeRepo: false, // put the GitHub owner/repo into the manifest (default: false)
+  sourceLocale: 'en', // default: en when present, else the first locale
+  shareBase: '/app/', // the site path the HTML is served from (default: Vite base)
+});
+```
+
+| Option         | Default                                  | What it does                                                                                                                               |
+| -------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `share`        | `false`                                  | Write the share Studio into `<outDir>/livelocale/` on `vite build`. SSR and library builds are skipped.                                    |
+| `exposeRepo`   | `false`                                  | Put the GitHub `owner/repo` into the published manifest and the change link. Leave it off for a private repository.                        |
+| `sourceLocale` | `en` when present, else the first locale | The locale placeholders are checked against.                                                                                               |
+| `shareBase`    | Vite `base`                              | The path the HTML is served from. Set it when `base` is a full URL (a CDN), which the build otherwise rejects with `BAD_BASE`, or differs. |
+
+A relative `base` (`./`) links `flag.js` per HTML file and prints a warning: pages served by a
+client-side route fallback cannot load it, so prefer an absolute `base` for apps with such routes.
+
 ---
 
 ## 🧾 Reviewing and committing from the Studio
@@ -346,6 +462,115 @@ value when you edit the source language itself.
 For API clients: send `reference` with the POST to enable the check, and `force: true` to bypass
 it. Without `reference` only the syntax check runs.
 
+## 🔗 Share link on any host
+
+A share link lets a translator fix copy on your deployed site, with no server, no account and no
+credential anywhere. The Studio ships inside your build at `<base>livelocale/`, so any host that
+serves the site serves the Studio too: Apache, Nginx, S3, GitHub Pages, Netlify, Cloudflare Pages
+or Vercel. The translator's fixes stay in their own browser until they send you a change link, and
+you turn that link into a pull request with one command.
+
+### Setup
+
+| Stack                      | Build change                                                                                                                            |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Vite                       | `share: true` in `liveLocaleVite(...)` (see [Share link from `vite build`](#share-link-from-vite-build)).                               |
+| CRA, webpack and Rsbuild   | `"build": "<bundler> && livelocale pack build"`, for example `"build": "react-scripts build && livelocale pack build"`.                 |
+| Next.js `output: 'export'` | `livelocale build --preview -- next build`, deployed to a staging location, because the HTML is pre-rendered and must be watermarked.   |
+| Next.js on Vercel/Node     | `livelocale build --preview -- next build` as the Preview environment's build command. It packs into a gitignored `public/livelocale/`. |
+| Custom CI                  | `LIVELOCALE=preview <build>` (only for SSR/SSG), then `npx livelocale pack <outDir>`.                                                   |
+
+For CRA, webpack and Rsbuild, use an explicit `&&`, not a `postbuild` script: Yarn Berry and some
+pnpm versions skip pre/post scripts, and hosts that call the bundler directly skip them too.
+
+Deploy the output as usual, then check it and print the share link:
+
+```bash
+npx livelocale doctor --app <url>
+```
+
+The doctor checks the Studio page, the manifest, `flag.js`, frame headers and service workers, then
+prints `🔗 Share link: <base>livelocale/index.html`. Pin that link for your translators.
+
+### Translator steps
+
+1. Open the share link in a desktop browser. There is no sign-up, no password and nothing to
+   install. If the site has its own login, sign in as usual.
+2. On the first visit, read the three tips and, optionally, type your name so you are credited in
+   the pull request.
+3. Check the language shown at the top. It is detected from the page text; change it if it is
+   wrong.
+4. Hold **Alt** (Option on Mac) and click the wrong text. The editor shows the source text, the
+   current translation, the placeholders that must stay, and one field per plural form.
+5. Type the fix and press **Save** (Ctrl+Enter). When a placeholder is missing, a message explains
+   it, and **Save anyway** stays available; it marks the edit for the developer.
+6. Keep browsing and fixing. Changes survive reloads and closing the tab. A counter shows how many
+   are not sent yet ("5 changes not sent"), and **Changes** lists each one with Undo.
+7. Click **Send to developer** and add an optional note. Then choose **Copy link** and paste it in
+   any chat or email, or **Download file** for a large batch.
+8. Sent changes stay in the list, marked "Sent".
+
+### Developer
+
+Open the change link. The Studio opens in **Review mode**, with the proposed edits shown read-only
+on the real page and a before/after table with the check results. Then apply it:
+
+```bash
+npx livelocale apply "<link or file>" --pr
+```
+
+This works on any git host, with your own `git` login: it commits only the locale files on a new
+`livelocale/apply-<time>` branch and pushes it. On GitHub it opens the pull request with `gh`;
+elsewhere it prints the branch to open a pull or merge request from. Every edit is checked again
+against your own files first. For a long link, use `npx livelocale apply --clipboard`, or pass `-` and pipe
+the link in (`npx livelocale apply - < changes.txt`). See [`apply`](#apply) for every option.
+
+### What "Sent" means
+
+In this mode "Sent" means the translator handed the link over; it is not a pull request until a developer applies it.
+
+### Hosting notes
+
+- **S3 and CloudFront:** the link must end in `index.html`, because an S3 REST origin does not
+  resolve folder indexes.
+- **GitHub Pages:** the folder is `livelocale/`, with no underscore for Jekyll to drop, and a
+  project site's `/repo/` base path is handled.
+- **Netlify and Cloudflare Pages:** `_headers` must not send DENY (`X-Frame-Options: DENY` or
+  `frame-ancestors 'none'`); SAMEORIGIN is fine. Every per-deploy URL is a separate origin with its
+  own drafts, so share the branch alias (for example
+  `https://staging--site.netlify.app/livelocale/index.html`), not a per-deploy URL.
+- **Basic auth and host password protection** carry over, because the Studio is on the same site.
+- **Vercel:** Deployment Protection must be off for the deployment you share, or the translator
+  must have access to it. `doctor --app` reports the login wall.
+- **PWA:** a Workbox service worker (vite-plugin-pwa, workbox-webpack-plugin) can answer the Studio
+  with your app shell. Add `navigateFallbackDenylist: [/^\/livelocale\//]` to its Workbox options.
+- **Relative bases** (`base: './'`, CRA `homepage: '.'`): pages served by a client-side route
+  fallback cannot load `flag.js`, so pack prints "The app base is relative (./), so flag.js is
+  linked per HTML file. Pages served by a client-side route fallback cannot load it; build with
+  an absolute base (--base /path/) if the app has such routes."
+
+### Security
+
+- **No credential anywhere.** The share link, the build, the host and the browser hold no token.
+  Write access stays with the developer's own git login.
+- **A leaked link only proposes text.** A developer still has to apply it, and a person has to
+  merge the pull request. `apply` re-validates every edit against your own source locale.
+- **`exposeRepo: false` by default.** The GitHub `owner/repo` is published only with
+  `exposeRepo: true` (or `pack --expose-repo`).
+- **The Studio is `noindex`**, so search engines do not list it.
+- **`manifest.json` is public.** `<base>livelocale/manifest.json` makes every string and key name
+  public, including keys the app does not show.
+- **The same-origin risk is accepted.** The Studio frames your app on the same origin, so app
+  scripts can read and alter drafts. This is accepted because no secret is stored, and you review
+  every edit before it is merged.
+
+### Limits
+
+- **Desktop only.** Alt+Click needs a keyboard; phones and tablets can only view.
+- **Drafts live in one browser.** Clearing site data, a private window, or Safari's 7-day cap on
+  script-writable storage can lose unsent work. Send often, or use **Download backup** in Changes.
+- **One app per repository.**
+
 ## 🌍 Preview mode: editing without a checkout
 
 Development mode needs a developer's machine. Preview mode lets a product manager, translator, or
@@ -397,9 +622,9 @@ The app must also let the Studio embed it. Next.js evaluates `headers()` in `nex
 preview is built, not only at run time.
 
 For a Vite app, the Vite plugin mirrors the server's `LIVELOCALE` flag into the page, so
-`LIVELOCALE=preview` alone is enough; no `NEXT_PUBLIC_` variable is needed there. The plugin runs
-on the Vite dev server only: a static `vite build` served by Apache, Nginx or a CDN has no server for
-the Studio to save through, so preview mode does not work there yet.
+`LIVELOCALE=preview` alone is enough; no `NEXT_PUBLIC_` variable is needed there. Preview mode
+runs on the Vite dev server only. For a static `vite build` served by Apache, Nginx or a CDN, use
+the share link instead; see [Share link on any host](#-share-link-on-any-host).
 
 Then open the Studio with `?app=https://<preview-url>` (or `studio --app`). It shows a
 **PREVIEW** badge, asks for the access token, and the Changes panel switches to branch and

package/dist/client/index.cjs

@@ -26,6 +26,7 @@ __export(client_exports, {
   decodeKey: () => decodeKey,
   encodeKey: () => encodeKey,
   hasWatermark: () => hasWatermark,
+  removeWatermarks: () => removeWatermarks,
   sanitizeZeroWidth: () => sanitizeZeroWidth,
   stripWatermark: () => stripWatermark,
   unwrap: () => unwrap,
@@ -35,10 +36,12 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // src/client/watermark.ts
-var DELIM = "\u200D";
+var DELIM = "\u200C";
 var BIT_0 = "\u200B";
-var BIT_1 = "\u200C";
+var BIT_1 = "\u200D";
+var WATERMARK_DELIMITER = DELIM;
 var ZW_RE = /[\u200B\u200C\u200D]/g;
+var WATERMARK_RE = /\u200C(?:[\u200B\u200D]{8})+\u200C/g;
 function encodeKey(text, key) {
   const bytes = new TextEncoder().encode(key);
   let bits = "";
@@ -85,6 +88,15 @@ function stripWatermark(text) {
 function sanitizeZeroWidth(text) {
   return text.replace(ZW_RE, "");
 }
+function removeWatermarks(text) {
+  return text.replace(WATERMARK_RE, "");
+}
+function containsWatermark(text) {
+  WATERMARK_RE.lastIndex = 0;
+  const found = WATERMARK_RE.test(text);
+  WATERMARK_RE.lastIndex = 0;
+  return found;
+}
 function hasWatermark(text) {
   return text.startsWith(DELIM);
 }
@@ -181,6 +193,121 @@ function isLiveLocaleEnabled() {
   return evaluate().mode !== "off";
 }
 
+// src/client/iframe-bridge.ts
+var DEFAULT_STUDIO_ORIGIN = "http://localhost:3010";
+var STUDIO_ORIGIN_STORAGE_KEY = "livelocale-studio-origin";
+function toHttpOrigin(value) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.origin : null;
+  } catch {
+    return null;
+  }
+}
+function readSameOriginParent(win) {
+  try {
+    const parent = win.parent;
+    if (!parent || parent === win) return null;
+    const own = toHttpOrigin(win.location.origin);
+    if (!own) return null;
+    return parent.location.origin === own ? own : null;
+  } catch {
+    return null;
+  }
+}
+function resolveStudioOrigin(search, storage, sameOriginParent) {
+  const fromParent = toHttpOrigin(sameOriginParent);
+  if (fromParent) return fromParent;
+  const fromQuery = toHttpOrigin(new URLSearchParams(search).get("livelocale-origin"));
+  if (fromQuery) {
+    try {
+      storage?.setItem(STUDIO_ORIGIN_STORAGE_KEY, fromQuery);
+    } catch {
+    }
+    return fromQuery;
+  }
+  let remembered = null;
+  try {
+    remembered = toHttpOrigin(storage?.getItem(STUDIO_ORIGIN_STORAGE_KEY));
+  } catch {
+  }
+  return remembered ?? DEFAULT_STUDIO_ORIGIN;
+}
+var MAX_VISIBLE_TEXTS = 100;
+var MAX_VISIBLE_TEXT_LENGTH = 200;
+var KEY_PATTERN = /^[a-zA-Z0-9._-]+$/;
+var IframeBridge = class {
+  allowedOrigin;
+  constructor(allowedOrigin) {
+    this.allowedOrigin = allowedOrigin;
+  }
+  /**
+   * Sends a message from the iframe client to the parent Studio window.
+   */
+  sendToParent(type, payload) {
+    if (typeof window === "undefined" || !window.parent || window.parent === window) {
+      return;
+    }
+    if (type === "ELEMENT_SELECTED") {
+      const p = payload;
+      if (!p || typeof p.key !== "string" || p.key.trim() === "" || !/^[a-zA-Z0-9._-]+$/.test(p.key) || typeof p.currentValue !== "string") {
+        return;
+      }
+    }
+    if (type === "VISIBLE_KEYS_CHANGED") {
+      if (!Array.isArray(payload)) return;
+      const validKeys = payload.filter(
+        (k) => typeof k === "string" && /^[a-zA-Z0-9._-]+$/.test(k)
+      );
+      payload = validKeys;
+    }
+    if (type === "VISIBLE_TEXTS_CHANGED") {
+      if (!Array.isArray(payload)) return;
+      const texts = [];
+      for (const entry of payload) {
+        if (texts.length >= MAX_VISIBLE_TEXTS) break;
+        if (!entry || typeof entry !== "object") continue;
+        const { key, text } = entry;
+        if (typeof key !== "string" || !KEY_PATTERN.test(key) || typeof text !== "string") {
+          continue;
+        }
+        texts.push({ key, text: text.slice(0, MAX_VISIBLE_TEXT_LENGTH) });
+      }
+      payload = texts;
+    }
+    const message = {
+      source: "livelocale-client",
+      type,
+      payload
+    };
+    window.parent.postMessage(message, this.allowedOrigin);
+  }
+  /**
+   * Sets up a listener for messages originating from the parent Studio dashboard.
+   */
+  listenToParent(callback) {
+    if (typeof window === "undefined") {
+      return () => {
+      };
+    }
+    const listener = (event) => {
+      if (event.origin !== this.allowedOrigin) {
+        return;
+      }
+      if (event.data?.source !== "livelocale-studio") {
+        return;
+      }
+      const { type, payload } = event.data;
+      callback(type, payload);
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }
+};
+
 // src/client/dom-interceptor.ts
 function debounce(fn, wait) {
   let timer = null;
@@ -233,6 +360,35 @@ var DOMInterceptor = class {
     });
     return Array.from(keys);
   }
+  /**
+   * Returns one `{ key, text }` per translation key on the page, in document
+   * order, with the text it shows now (watermark removed, trimmed, cut to
+   * `MAX_VISIBLE_TEXT_LENGTH`). The first element carrying a key wins; its
+   * text is the first descendant text node whose watermark names that key.
+   * Elements without such a node, and blank texts, are skipped. At most
+   * `limit` entries are returned.
+   */
+  getVisibleTexts(limit = MAX_VISIBLE_TEXTS) {
+    const texts = [];
+    const seen = /* @__PURE__ */ new Set();
+    const elements = document.querySelectorAll("[data-i18n-key]");
+    for (const el of elements) {
+      if (texts.length >= limit) break;
+      const key = el.getAttribute("data-i18n-key");
+      if (!key || seen.has(key)) continue;
+      seen.add(key);
+      const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+      let node;
+      while ((node = walker.nextNode()) !== null) {
+        const decoded = decodeKey(node.nodeValue ?? "");
+        if (decoded?.key !== key) continue;
+        const text = decoded.cleanText.trim().slice(0, MAX_VISIBLE_TEXT_LENGTH);
+        if (text) texts.push({ key, text });
+        break;
+      }
+    }
+    return texts;
+  }
   /**
    * Initializes the DOM event interceptors in development mode.
    * Also launches the watermark scanner and MutationObserver.
@@ -403,7 +559,7 @@ var DOMInterceptor = class {
   }
   processTextNode(node) {
     const raw = node.nodeValue ?? "";
-    if (!raw.includes("\u200D")) return;
+    if (!raw.includes(WATERMARK_DELIMITER)) return;
     const decoded = decodeKey(raw);
     if (!decoded) return;
     const parent = node.parentElement;
@@ -476,10 +632,10 @@ var DOMInterceptor = class {
     Object.defineProperty(proto, "value", {
       get() {
         const raw = original.get.call(this);
-        return sanitizeZeroWidth(raw);
+        return removeWatermarks(raw);
       },
       set(val) {
-        const clean = typeof val === "string" ? sanitizeZeroWidth(val) : val;
+        const clean = typeof val === "string" ? removeWatermarks(val) : val;
         original.set.call(this, clean);
       },
       configurable: true
@@ -490,7 +646,7 @@ var DOMInterceptor = class {
     if (!form) return;
     const inputs = form.querySelectorAll("input, textarea");
     inputs.forEach((input) => {
-      const cleaned = sanitizeZeroWidth(input.value);
+      const cleaned = removeWatermarks(input.value);
       if (cleaned !== input.value) {
         const proto = input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
@@ -581,17 +737,17 @@ var DOMInterceptor = class {
   };
   handleCopy = (event) => {
     const selection = window.getSelection()?.toString() || "";
-    if (selection.includes("\u200D") || selection.includes("\u200B") || selection.includes("\u200C")) {
-      const clean = sanitizeZeroWidth(selection);
+    if (containsWatermark(selection)) {
+      const clean = removeWatermarks(selection);
       event.clipboardData?.setData("text/plain", clean);
       event.preventDefault();
     }
   };
   handlePaste = (event) => {
     const text = event.clipboardData?.getData("text/plain") || "";
-    if (text.includes("\u200D") || text.includes("\u200B") || text.includes("\u200C")) {
+    if (containsWatermark(text)) {
       event.preventDefault();
-      const cleaned = sanitizeZeroWidth(text);
+      const cleaned = removeWatermarks(text);
       const targetInput = event.target;
       if (targetInput && "value" in targetInput) {
         const proto = targetInput instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
@@ -610,64 +766,6 @@ var DOMInterceptor = class {
   };
 };
 
-// src/client/iframe-bridge.ts
-var IframeBridge = class {
-  allowedOrigin;
-  constructor(allowedOrigin) {
-    this.allowedOrigin = allowedOrigin;
-  }
-  /**
-   * Sends a message from the iframe client to the parent Studio window.
-   */
-  sendToParent(type, payload) {
-    if (typeof window === "undefined" || !window.parent || window.parent === window) {
-      return;
-    }
-    if (type === "ELEMENT_SELECTED") {
-      const p = payload;
-      if (!p || typeof p.key !== "string" || p.key.trim() === "" || !/^[a-zA-Z0-9._-]+$/.test(p.key) || typeof p.currentValue !== "string") {
-        return;
-      }
-    }
-    if (type === "VISIBLE_KEYS_CHANGED") {
-      if (!Array.isArray(payload)) return;
-      const validKeys = payload.filter(
-        (k) => typeof k === "string" && /^[a-zA-Z0-9._-]+$/.test(k)
-      );
-      payload = validKeys;
-    }
-    const message = {
-      source: "livelocale-client",
-      type,
-      payload
-    };
-    window.parent.postMessage(message, this.allowedOrigin);
-  }
-  /**
-   * Sets up a listener for messages originating from the parent Studio dashboard.
-   */
-  listenToParent(callback) {
-    if (typeof window === "undefined") {
-      return () => {
-      };
-    }
-    const listener = (event) => {
-      if (event.origin !== this.allowedOrigin) {
-        return;
-      }
-      if (event.data?.source !== "livelocale-studio") {
-        return;
-      }
-      const { type, payload } = event.data;
-      callback(type, payload);
-    };
-    window.addEventListener("message", listener);
-    return () => {
-      window.removeEventListener("message", listener);
-    };
-  }
-};
-
 // src/client/wrap.ts
 function extractKey(arg, keyPrefix) {
   if (typeof arg === "string") {
@@ -804,8 +902,16 @@ function restorePreviews() {
   previewNodes.clear();
 }
 if (typeof window !== "undefined" && isLiveLocaleEnabled() && window.parent !== window) {
-  const urlParams = new URLSearchParams(window.location.search);
-  const allowedOrigin = urlParams.get("livelocale-origin") || "http://localhost:3010";
+  let storage = null;
+  try {
+    storage = window.sessionStorage;
+  } catch {
+  }
+  const allowedOrigin = resolveStudioOrigin(
+    window.location.search,
+    storage,
+    readSameOriginParent(window)
+  );
   const bridge = new IframeBridge(allowedOrigin);
   const interceptor = new DOMInterceptor(
     (payload) => {
@@ -813,6 +919,7 @@ if (typeof window !== "undefined" && isLiveLocaleEnabled() && window.parent !==
     },
     (keys) => {
       bridge.sendToParent("VISIBLE_KEYS_CHANGED", keys);
+      bridge.sendToParent("VISIBLE_TEXTS_CHANGED", interceptor.getVisibleTexts());
     }
   );
   interceptor.init();
@@ -844,6 +951,7 @@ if (typeof window !== "undefined" && isLiveLocaleEnabled() && window.parent !==
   decodeKey,
   encodeKey,
   hasWatermark,
+  removeWatermarks,
   sanitizeZeroWidth,
   stripWatermark,
   unwrap,