@lionrapid/core 0.3.0 → 0.4.0

package/dist/browser/lionrapid.editor.js

@@ -64,7 +64,7 @@ var LionRapidEditor = (() => {
   color: #fff;
   padding: 8px 12px;
   border-radius: 8px;
-  margin-right: 8px;
+  margin-right: 8px; /* gap between panel (left) and the FAB button (right) */
   box-shadow: 0 4px 12px rgba(0,0,0,0.25);
   white-space: nowrap;
 }
@@ -174,6 +174,43 @@ var LionRapidEditor = (() => {
   cursor: not-allowed;
 }
 
+.lr-fab-browse {
+  background: none;
+  border: 1px solid rgba(255,255,255,0.3);
+  color: #fff;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.lr-fab-browse:hover {
+  background: rgba(255,255,255,0.1);
+}
+
+.lr-fab-browse.active {
+  background: #f5a623;
+  border-color: #f5a623;
+  color: #1a1a2e;
+  font-weight: 600;
+}
+
+.lr-link-nav {
+  background: none;
+  border: 1px solid #2d7f7f;
+  color: #2d7f7f;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.lr-link-nav:hover {
+  background: #2d7f7f;
+  color: #fff;
+}
+
 /* Workflow action buttons (Phase 3) */
 .lr-workflow-actions {
   display: flex;
@@ -748,15 +785,46 @@ var LionRapidEditor = (() => {
     }
     return str;
   }
-  function str2binl(str) {
+  function utf8Bytes(str) {
+    if (typeof TextEncoder !== "undefined") {
+      return new TextEncoder().encode(str);
+    }
+    const out = [];
+    for (let i = 0; i < str.length; i++) {
+      const c = str.charCodeAt(i);
+      if (c < 128) {
+        out.push(c);
+      } else if (c < 2048) {
+        out.push(192 | c >> 6, 128 | c & 63);
+      } else if (c >= 55296 && c < 56320 && i + 1 < str.length) {
+        const c2 = str.charCodeAt(++i);
+        const cp = 65536 + (c - 55296 << 10) + (c2 - 56320);
+        out.push(
+          240 | cp >> 18,
+          128 | cp >> 12 & 63,
+          128 | cp >> 6 & 63,
+          128 | cp & 63
+        );
+      } else {
+        out.push(
+          224 | c >> 12,
+          128 | c >> 6 & 63,
+          128 | c & 63
+        );
+      }
+    }
+    return new Uint8Array(out);
+  }
+  function bytes2binl(bytes) {
     const bin = [];
-    for (let i = 0; i < str.length * 8; i += 8) {
-      bin[i >> 5] |= (str.charCodeAt(i / 8) & 255) << i % 32;
+    for (let i = 0; i < bytes.length; i++) {
+      bin[i >> 2] |= bytes[i] << i % 4 * 8;
     }
     return bin;
   }
   function md5(str) {
-    return binl2hex(binlMD5(str2binl(str), str.length * 8));
+    const bytes = utf8Bytes(str);
+    return binl2hex(binlMD5(bytes2binl(bytes), bytes.length * 8));
   }
   function generateAutoKey(text) {
     const trimmed = text.trim();
@@ -838,6 +906,19 @@ var LionRapidEditor = (() => {
       this.currentTarget = null;
       this.overlay.classList.remove("active");
     }
+    /**
+     * Suspend/resume the inspector. When inactive, hover/click handlers
+     * early-return so page links navigate natively — this is what the toolbar's
+     * "Browse" mode flips so a PM can click through the site's nav to reach
+     * another page, instead of every click opening the edit drawer.
+     */
+    setActive(active) {
+      this.active = active;
+      if (!active) this.clearHighlight();
+    }
+    isActive() {
+      return this.active;
+    }
     handleMouseOver(e) {
       if (!this.active) return;
       const target = e.target;
@@ -917,7 +998,7 @@ var LionRapidEditor = (() => {
 
   // src/browser/editor/toolbar.ts
   var Toolbar = class {
-    constructor(shadowRoot, languages, currentLocale, onLanguageChange, onExit, onCaptureSnapshot = null, captureOptions = {}) {
+    constructor(shadowRoot, languages, currentLocale, onLanguageChange, onExit, onCaptureSnapshot = null, captureOptions = {}, onBrowseToggle = null) {
       __publicField(this, "el");
       __publicField(this, "langBtnEl");
       __publicField(this, "langMenuEl");
@@ -927,6 +1008,9 @@ var LionRapidEditor = (() => {
       __publicField(this, "onLanguageChange");
       __publicField(this, "onExit");
       __publicField(this, "onCaptureSnapshot");
+      __publicField(this, "onBrowseToggle");
+      __publicField(this, "browsing", false);
+      __publicField(this, "browseBtnEl", null);
       // Drag state
       __publicField(this, "dragging", false);
       __publicField(this, "dragOffsetX", 0);
@@ -934,6 +1018,7 @@ var LionRapidEditor = (() => {
       this.onLanguageChange = onLanguageChange;
       this.onExit = onExit;
       this.onCaptureSnapshot = onCaptureSnapshot;
+      this.onBrowseToggle = onBrowseToggle;
       this.currentLocale = currentLocale;
       const captureMode = captureOptions.mode ?? "capture";
       this.el = document.createElement("div");
@@ -946,7 +1031,6 @@ var LionRapidEditor = (() => {
         e.stopPropagation();
         this.toggle();
       });
-      this.el.appendChild(fabBtn);
       const panel = document.createElement("div");
       panel.className = "lr-fab-panel";
       const langWrap = document.createElement("div");
@@ -995,6 +1079,18 @@ var LionRapidEditor = (() => {
         });
         panel.appendChild(captureBtn);
       }
+      if (this.onBrowseToggle) {
+        const browseBtn = document.createElement("button");
+        browseBtn.className = "lr-fab-browse";
+        browseBtn.textContent = "Browse";
+        browseBtn.title = "Pause editing so you can click links and navigate to another page";
+        browseBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.setBrowsing(!this.browsing);
+        });
+        this.browseBtnEl = browseBtn;
+        panel.appendChild(browseBtn);
+      }
       this.progressEl = document.createElement("span");
       this.progressEl.className = "lr-fab-progress";
       panel.appendChild(this.progressEl);
@@ -1004,6 +1100,7 @@ var LionRapidEditor = (() => {
       exitBtn.addEventListener("click", () => this.onExit());
       panel.appendChild(exitBtn);
       this.el.appendChild(panel);
+      this.el.appendChild(fabBtn);
       shadowRoot.appendChild(this.el);
       this.handleMouseDown = this.handleMouseDown.bind(this);
       this.handleMouseMove = this.handleMouseMove.bind(this);
@@ -1014,6 +1111,16 @@ var LionRapidEditor = (() => {
       this.expanded = !this.expanded;
       this.el.classList.toggle("expanded", this.expanded);
     }
+    setBrowsing(browsing) {
+      this.browsing = browsing;
+      if (this.browseBtnEl) {
+        this.browseBtnEl.textContent = browsing ? "Editing" : "Browse";
+        this.browseBtnEl.classList.toggle("active", browsing);
+        this.browseBtnEl.title = browsing ? "Resume editing \u2014 clicks open the edit drawer again" : "Pause editing so you can click links and navigate to another page";
+      }
+      this.el.classList.toggle("lr-fab--browsing", browsing);
+      if (this.onBrowseToggle) this.onBrowseToggle(browsing);
+    }
     updateProgress(translated, total) {
       this.progressEl.textContent = `${translated}/${total}`;
     }
@@ -1036,9 +1143,10 @@ var LionRapidEditor = (() => {
       this.dragging = true;
       const x = Math.max(0, Math.min(e.clientX - this.dragOffsetX, window.innerWidth - this.el.offsetWidth));
       const y = Math.max(0, Math.min(e.clientY - this.dragOffsetY, window.innerHeight - this.el.offsetHeight));
-      this.el.style.left = `${x}px`;
+      const rightOffset = window.innerWidth - x - this.el.offsetWidth;
+      this.el.style.right = `${Math.max(0, rightOffset)}px`;
       this.el.style.top = `${y}px`;
-      this.el.style.right = "auto";
+      this.el.style.left = "auto";
       this.el.style.bottom = "auto";
     }
     handleMouseUp() {
@@ -1085,7 +1193,7 @@ var LionRapidEditor = (() => {
 
   // src/browser/editor/live-preview.ts
   var htmlSerializer = new HTMLSerializer();
-  function applyLivePreview(element, text, styles, key, locale, namespace) {
+  function applyLivePreview(element, text, styles, key, locale, namespace, sourceText, rowState) {
     if (!element.hasAttribute("data-lr-original")) {
       element.setAttribute("data-lr-original", element.innerHTML);
     }
@@ -1096,11 +1204,17 @@ var LionRapidEditor = (() => {
       cache.set(fullKey, text, styles);
     }
     const hasIndexedMarkers = /<\/?[0-9]+\/?>/.test(text);
-    const sourceHasStyles = styles && Object.keys(styles).length > 0;
+    const isMachineTranslated = rowState === "machine_translated";
+    const fullyWrapped = sourceText ? sourceText.match(/^<(\d+)>([\s\S]*)<\/\1>$/) : null;
     if (hasIndexedMarkers) {
       const unit = { text, styles };
       element.innerHTML = htmlSerializer.serialize(unit);
-    } else if (!sourceHasStyles) {
+    } else if (isMachineTranslated && fullyWrapped && styles && Object.keys(styles).length > 0) {
+      const idx = fullyWrapped[1];
+      const wrappedText = `<${idx}>${text}</${idx}>`;
+      const unit = { text: wrappedText, styles };
+      element.innerHTML = htmlSerializer.serialize(unit);
+    } else {
       element.textContent = text;
     }
     element.setAttribute("data-lr-block", key);
@@ -1168,6 +1282,7 @@ var LionRapidEditor = (() => {
 
   // src/browser/block-extractor.ts
   var BLOCK_SELECTOR3 = "p,h1,h2,h3,h4,h5,h6,li,td,th,label,button,figcaption,dt,dd,summary,caption";
+  var INLINE_BLOCK_SELECTOR = "a";
   var SKIP_TAGS2 = /* @__PURE__ */ new Set([
     "SCRIPT",
     "STYLE",
@@ -1256,8 +1371,60 @@ var LionRapidEditor = (() => {
         }
         results.push({ element: el, unit, key });
       }
+      this.extractOrphanInline(root, results, includeTranslated);
       return results;
     }
+    /**
+     * Second pass: extract inline elements (currently <a>) that have no block
+     * ancestor. These would otherwise slip through both the block pass (not in
+     * BLOCK_SELECTOR) and the inline-style capture (no parent block to host
+     * them as `<1>...</1>`). Common shape: a `<div>` action group containing
+     * only links.
+     */
+    extractOrphanInline(root, results, includeTranslated) {
+      const candidates = root.querySelectorAll(INLINE_BLOCK_SELECTOR);
+      const elements = [];
+      if (root instanceof Element && root.matches(INLINE_BLOCK_SELECTOR)) {
+        elements.push(root);
+      }
+      for (let i = 0; i < candidates.length; i++) {
+        elements.push(candidates[i]);
+      }
+      for (let i = 0; i < elements.length; i++) {
+        const el = elements[i];
+        if (this.isInsideSkipTag(el)) continue;
+        if (!includeTranslated && this.hasSkipAttribute(el)) continue;
+        if (this.matchesExcludeSelector(el)) continue;
+        if (el.getAttribute("translate") === "no") continue;
+        if (el.parentElement?.closest(BLOCK_SELECTOR3)) continue;
+        if (el.parentElement?.closest(INLINE_BLOCK_SELECTOR)) continue;
+        if (el.querySelector(BLOCK_SELECTOR3)) continue;
+        const lrOriginal = el.getAttribute("data-lr-original");
+        let unit;
+        if (lrOriginal) {
+          const temp = document.createElement(el.tagName);
+          temp.innerHTML = lrOriginal;
+          unit = parseBlockElement(temp);
+        } else {
+          unit = parseBlockElement(el);
+        }
+        const strippedText = unit.text.replace(/<\/?[0-9]+\/?>/g, "");
+        if (this.excludeFilter.shouldExclude(strippedText)) continue;
+        const lrBlock = el.getAttribute("data-lr-block");
+        let key;
+        if (lrBlock) {
+          key = lrBlock;
+        } else {
+          const dataI18n = el.getAttribute("data-i18n");
+          if (dataI18n) {
+            key = dataI18n.includes(":") ? dataI18n : `common:${dataI18n}`;
+          } else {
+            key = generateAutoKey(unit.text);
+          }
+        }
+        results.push({ element: el, unit, key });
+      }
+    }
     isInsideSkipTag(element) {
       let current = element.parentElement;
       while (current) {
@@ -1293,6 +1460,23 @@ var LionRapidEditor = (() => {
     }
   };
 
+  // src/browser/editor/locale-url.ts
+  function localizeUrl(href, defaultLocale) {
+    let url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch {
+      return href;
+    }
+    if (url.origin !== window.location.origin) return href;
+    const currentMatch = window.location.pathname.match(/^\/([a-z]{2})(\/|$)/);
+    const currentLocale = currentMatch ? currentMatch[1] : defaultLocale;
+    if (currentLocale === defaultLocale) return url.href;
+    if (/^\/[a-z]{2}(\/|$)/.test(url.pathname)) return url.href;
+    url.pathname = "/" + currentLocale + url.pathname;
+    return url.href;
+  }
+
   // src/browser/editor/sidebar.ts
   var htmlSerializer2 = new HTMLSerializer();
   var Sidebar = class {
@@ -1361,6 +1545,39 @@ var LionRapidEditor = (() => {
         this.refreshBlocksList();
         this.emitProgress();
       });
+      if (typeof window !== "undefined") {
+        window.__lr_dump_keys = () => {
+          const blocks = this.blockExtractor.extract(document.body, true);
+          const rows = blocks.map((b, i) => {
+            const s = this.statusMap.get(b.key);
+            return {
+              i,
+              key: b.key,
+              text: b.unit.text,
+              stylesJson: JSON.stringify(b.unit.styles),
+              statusText: s?.text ?? "",
+              isReady: !!s?.isReady,
+              hasTranslation: !!s?.text
+            };
+          });
+          console.table(rows);
+          return rows;
+        };
+        window.__lr_editor_edit = (key, text) => {
+          const blocks = this.blockExtractor.extract(document.body, true);
+          const block = blocks.find((b) => b.key === key);
+          if (!block) throw new Error(`[__lr_editor_edit] no block on page with key ${key}`);
+          this.unsavedKeys.add(key);
+          this.api.queueSave({
+            key,
+            locale: this.locale,
+            namespace: this.namespace,
+            text,
+            styles: block.unit.styles
+          });
+        };
+        window.__lr_editor_flush = () => this.api.flush();
+      }
       shadowRoot.appendChild(this.el);
     }
     open(resolved) {
@@ -1395,12 +1612,33 @@ var LionRapidEditor = (() => {
       for (const [key, status] of Object.entries(statuses)) {
         this.statusMap.set(key, status);
       }
+      const divergent = [];
+      let untranslatedCount = 0;
       for (const block of blocks) {
         const status = this.statusMap.get(block.key);
         if (status && status.text && !status.isReady) {
-          applyLivePreview(block.element, status.text, block.unit.styles, block.key, this.locale, this.namespace);
+          applyLivePreview(block.element, status.text, block.unit.styles, block.key, this.locale, this.namespace, block.unit.text, status.rowState);
+        } else if (!status || !status.text) {
+          untranslatedCount++;
+          const stamp = block.element.getAttribute("data-lr-block");
+          if (stamp && stamp.startsWith("auto_")) {
+            const recomputed = generateAutoKey(block.unit.text);
+            if (recomputed !== stamp) {
+              divergent.push({ stamped: stamp, recomputed, text: block.unit.text.slice(0, 80) });
+            }
+          }
         }
       }
+      if (divergent.length > 0) {
+        console.warn(
+          `[LionRapid Editor] ${divergent.length} block(s) where the client-side auto_ key does NOT match the server's data-lr-block stamp \u2014 JS and server key generation are diverging for these inputs. Sample (first 5):`,
+          divergent.slice(0, 5)
+        );
+      } else if (untranslatedCount > 0) {
+        console.debug(
+          `[LionRapid Editor] ${untranslatedCount} block(s) untranslated (no server text yet) \u2014 normal for in-progress pages.`
+        );
+      }
       this.emitProgress();
     }
     getTranslatedCount() {
@@ -1453,6 +1691,7 @@ var LionRapidEditor = (() => {
         origEl.innerHTML = this.renderTextWithTags(unit.text);
         return origEl;
       });
+      this.renderLinkNav(element);
       const isSourceLocale = this.locale === this.defaultLocale;
       const isLocked = isSourceLocale || status?.isLocked || status?.isReady || false;
       const textarea = document.createElement("textarea");
@@ -1484,7 +1723,7 @@ var LionRapidEditor = (() => {
           const text = textarea.value;
           previewEl.innerHTML = this.renderPreview(text, unit.styles);
           if (text) {
-            applyLivePreview(element, text, unit.styles, key, this.locale, this.namespace);
+            applyLivePreview(element, text, unit.styles, key, this.locale, this.namespace, unit.text, "edited");
           }
           this.unsavedKeys.add(key);
           this.api.queueSave({
@@ -1652,6 +1891,33 @@ var LionRapidEditor = (() => {
       }
       this.emitProgress();
     }
+    /**
+     * Render an "Open linked page →" button when the selected block is or
+     * contains a same-origin link. Cross-origin links are skipped — the editor
+     * session only applies to this site. No-op when there's no usable link.
+     */
+    renderLinkNav(element) {
+      const anchor = element.matches?.("a[href]") ? element : element.querySelector?.("a[href]");
+      if (!anchor) return;
+      let dest;
+      try {
+        dest = new URL(anchor.href, window.location.href);
+      } catch {
+        return;
+      }
+      if (dest.origin !== window.location.origin) return;
+      if (dest.pathname === window.location.pathname && !dest.hash) return;
+      this.addField("Linked page", () => {
+        const btn = document.createElement("button");
+        btn.className = "lr-link-nav";
+        btn.textContent = "Open linked page \u2192";
+        btn.title = dest.pathname + dest.search;
+        btn.addEventListener("click", () => {
+          window.location.href = localizeUrl(dest.href, this.defaultLocale);
+        });
+        return btn;
+      });
+    }
     addField(label, contentFn) {
       const field = document.createElement("div");
       field.className = "lr-field";
@@ -1788,6 +2054,8 @@ var LionRapidEditor = (() => {
       __publicField(this, "handleVisibility", () => {
         if (document.visibilityState === "hidden") {
           this.flush();
+        } else if (document.visibilityState === "visible") {
+          this.maybeRenewSession();
         }
       });
       this.apiBase = apiBase.replace(/\/$/, "");
@@ -1851,14 +2119,11 @@ var LionRapidEditor = (() => {
       const items = [...this.queue];
       this.onStatus("saving");
       try {
-        const response = await fetch(
+        const response = await this.authFetch(
           `${this.apiBase}/api/integrations/targets/batch`,
           {
             method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-              "Authorization": `Bearer ${this.sessionToken}`
-            },
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
               translations: items.map((t) => ({
                 key: `${t.locale}:${t.namespace}:${t.key}`,
@@ -1900,12 +2165,9 @@ var LionRapidEditor = (() => {
       const batch = keys.slice(0, 200);
       const params = new URLSearchParams({ locale, namespace, keys: batch.join(",") });
       try {
-        const response = await fetch(
+        const response = await this.authFetch(
           `${this.apiBase}/api/integrations/targets/status?${params}`,
-          {
-            headers: { "Authorization": `Bearer ${this.sessionToken}` },
-            signal: this.statusAbort.signal
-          }
+          { signal: this.statusAbort.signal }
         );
         if (response.status === 401) {
           this.handleSessionExpired();
@@ -1932,9 +2194,7 @@ var LionRapidEditor = (() => {
       if (this.workflowInfoPromise) return this.workflowInfoPromise;
       this.workflowInfoPromise = (async () => {
         try {
-          const response = await fetch(`${this.apiBase}/api/integrations/editor/workflow`, {
-            headers: { "Authorization": `Bearer ${this.sessionToken}` }
-          });
+          const response = await this.authFetch(`${this.apiBase}/api/integrations/editor/workflow`);
           if (response.status === 401) {
             this.handleSessionExpired();
             return null;
@@ -1957,15 +2217,30 @@ var LionRapidEditor = (() => {
     // Session renewal
     // ============================================
     /**
-     * Check if session is within 2min of expiry, and renew if so.
+     * Check if session is within 5min of expiry, and renew if so.
+     *
+     * The threshold is intentionally generous because background tabs throttle
+     * setInterval to once-per-minute (Chrome) or even less aggressively, and
+     * a sleeping laptop pauses timers entirely. Renewing early gives us
+     * headroom for those cases — the renewal interval still runs before the
+     * 15min server-side TTL elapses even if it fires a minute or two late.
      */
     async maybeRenewSession() {
       const exp = this.getSessionExp();
       if (!exp) return;
       const timeLeft = exp * 1e3 - Date.now();
-      if (timeLeft > 12e4) return;
+      if (timeLeft > 3e5) return;
       await this.renewSession();
     }
+    /**
+     * Attempt one renewal and signal whether the token actually changed.
+     * Used by the 401-retry path in API calls.
+     */
+    async tryRenew() {
+      const before = this.sessionToken;
+      await this.renewSession();
+      return this.sessionToken !== before;
+    }
     async renewSession() {
       try {
         const response = await fetch(`${this.apiBase}/api/editor/renew`, {
@@ -2008,6 +2283,30 @@ var LionRapidEditor = (() => {
         return null;
       }
     }
+    /**
+     * Authenticated fetch with one-shot 401 retry. If the request comes back
+     * 401, we attempt a session renewal and replay the request once with the
+     * new token. If renewal fails (token past the server's 2min grace), the
+     * caller still gets a 401 and falls through to handleSessionExpired.
+     *
+     * Always passes `init.signal` straight through so abortable callers
+     * (e.g. fetchStatus) still cancel correctly.
+     */
+    async authFetch(url, init = {}) {
+      const buildHeaders = () => {
+        const h = new Headers(init.headers);
+        h.set("Authorization", `Bearer ${this.sessionToken}`);
+        return h;
+      };
+      let response = await fetch(url, { ...init, headers: buildHeaders() });
+      if (response.status === 401) {
+        const renewed = await this.tryRenew();
+        if (renewed) {
+          response = await fetch(url, { ...init, headers: buildHeaders() });
+        }
+      }
+      return response;
+    }
     handleSessionExpired() {
       document.cookie = "__lr_editor_active=; path=/; SameSite=Lax; Max-Age=0";
       this.onStatus("error", "Session expired. Please reopen the editor from the dashboard.");
@@ -2163,12 +2462,9 @@ var LionRapidEditor = (() => {
      */
     async transitionTarget(composite, action) {
       try {
-        const response = await fetch(
+        const response = await this.authFetch(
           `${this.apiBase}/api/integrations/targets/${encodeURIComponent(composite)}/${action}`,
-          {
-            method: "POST",
-            headers: { "Authorization": `Bearer ${this.sessionToken}` }
-          }
+          { method: "POST" }
         );
         if (response.status === 401) {
           this.handleSessionExpired();
@@ -2450,6 +2746,20 @@ var LionRapidEditor = (() => {
   }
 
   // src/browser/editor/editor-init.ts
+  if (typeof window !== "undefined") {
+    window.__lr_dump_keys = () => {
+      const extractor = new BlockExtractor();
+      const blocks = extractor.extract(document.body, true);
+      const rows = blocks.map((b, i) => ({
+        i,
+        key: b.key,
+        text: b.unit.text,
+        stylesJson: JSON.stringify(b.unit.styles)
+      }));
+      console.table(rows);
+      return rows;
+    };
+  }
   var SESSION_KEY = "__lr_editor_session";
   var PREVIEW_COOKIE = "__lr_editor_active";
   function setPreviewCookie() {
@@ -2645,7 +2955,6 @@ var LionRapidEditor = (() => {
           const stripped = url2.pathname.replace(/^\/[a-z]{2}(\/|$)/, "/");
           const prefix = newLocale === defaultLocale ? "" : `/${newLocale}`;
           url2.pathname = prefix + (stripped === "/" && prefix ? "" : stripped);
-          url2.searchParams.set("__lr_editor", grant);
           window.location.href = url2.toString();
           return;
         }
@@ -2699,11 +3008,37 @@ var LionRapidEditor = (() => {
       },
       // When in recapture mode, surface it to the toolbar so the button label
       // can change from "Capture" to "Save re-capture".
-      recaptureUuid ? { mode: "recapture" } : void 0
+      recaptureUuid ? { mode: "recapture" } : void 0,
+      // Browse-mode toggle. Suspending the inspector lets the PM click the
+      // site's own links to reach another page; the session rides along via the
+      // sessionStorage JWT + __lr_editor_active cookie, so the editor re-activates
+      // on the destination. Disabled in snapshot viewer mode (static sandbox,
+      // nothing to navigate to).
+      snapshotUuid ? null : (browsing) => {
+        inspector.setActive(!browsing);
+        if (browsing) sidebar.close();
+      }
     );
     sidebar.setProgressCallback((translated, total) => {
       toolbar.updateProgress(translated, total);
     });
+    document.addEventListener("click", (e) => {
+      if (e.defaultPrevented) return;
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      if (e.button !== 0) return;
+      const target = e.target;
+      if (!target?.closest) return;
+      if (target.closest("#__lionrapid-editor")) return;
+      const a = target.closest("a[href]");
+      if (!a) return;
+      if (a.target && a.target !== "_self") return;
+      if (a.hasAttribute("download")) return;
+      const localized = localizeUrl(a.href, defaultLocale);
+      if (localized !== a.href) {
+        e.preventDefault();
+        window.location.href = localized;
+      }
+    });
     sidebar.hydrateStatus().then(() => {
       toolbar.updateProgress(sidebar.getTranslatedCount(), sidebar.getTotalCount());
     });