@lionrapid/core 0.5.0 → 0.6.0

package/dist/browser/lionrapid.editor.js

@@ -1160,6 +1160,160 @@ var LionRapidEditor = (() => {
     }
   };
 
+  // src/content/sanitizer/HTMLSanitizer.ts
+  var SAFE_TAGS = /* @__PURE__ */ new Set([
+    "a",
+    "abbr",
+    "b",
+    "bdi",
+    "bdo",
+    "br",
+    "cite",
+    "code",
+    "del",
+    "dfn",
+    "em",
+    "i",
+    "img",
+    "ins",
+    "kbd",
+    "mark",
+    "q",
+    "s",
+    "samp",
+    "small",
+    "span",
+    "strong",
+    "sub",
+    "sup",
+    "time",
+    "u",
+    "var",
+    "wbr"
+  ]);
+  var SAFE_ATTRS = /* @__PURE__ */ new Set([
+    "alt",
+    "cite",
+    "class",
+    "datetime",
+    "dir",
+    "height",
+    "href",
+    "id",
+    "lang",
+    "loading",
+    "rel",
+    "role",
+    "src",
+    "target",
+    "title",
+    "width"
+  ]);
+  var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src", "cite"]);
+  var SAFE_STYLE_PROPS = /* @__PURE__ */ new Set([
+    "color",
+    "background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "letter-spacing",
+    "line-height",
+    "text-decoration",
+    "text-decoration-color",
+    "text-decoration-line",
+    "text-decoration-style",
+    "text-transform",
+    "vertical-align",
+    "white-space",
+    "word-spacing"
+  ]);
+  var DANGEROUS_CSS_VALUE = /url\s*\(|expression\s*\(|image-set\s*\(|element\s*\(|paint\s*\(|javascript:|\\|[<>{}@]/i;
+  var SAFE_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
+  var NAMED_ENTITIES = {
+    amp: "&",
+    lt: "<",
+    gt: ">",
+    quot: '"',
+    apos: "'",
+    nbsp: "\xA0",
+    colon: ":",
+    semi: ";",
+    sol: "/",
+    bsol: "\\",
+    Tab: "	",
+    NewLine: "\n"
+  };
+  function decodeEntities(value) {
+    return value.replace(
+      /&(?:#[xX]([0-9a-fA-F]+);?|#(\d+);?|([a-zA-Z]+);)/g,
+      (full, hex, dec, name) => {
+        if (hex) return String.fromCodePoint(parseInt(hex, 16));
+        if (dec) return String.fromCodePoint(parseInt(dec, 10));
+        return NAMED_ENTITIES[name] ?? full;
+      }
+    );
+  }
+  function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  function sanitizeUrl(value) {
+    const decoded = decodeEntities(value);
+    const probe = decoded.replace(/[\u0000-\u0020\u007f]/g, "").toLowerCase();
+    const scheme = /^([a-z][a-z0-9+.-]*):/.exec(probe);
+    if (!scheme) return value;
+    return SAFE_SCHEMES.has(scheme[1]) ? value : null;
+  }
+  function sanitizeStyle(value) {
+    return filterCssDeclarations(value, true);
+  }
+  function sanitizeCssDeclarations(value) {
+    return filterCssDeclarations(value, false);
+  }
+  function filterCssDeclarations(value, requirePropAllowlist) {
+    const decoded = decodeEntities(value);
+    const kept = [];
+    for (const declaration of decoded.split(";")) {
+      const colon = declaration.indexOf(":");
+      if (colon === -1) continue;
+      const prop = declaration.slice(0, colon).trim().toLowerCase();
+      const val = declaration.slice(colon + 1).trim();
+      if (!/^[a-z-]+$/.test(prop)) continue;
+      if (requirePropAllowlist && !SAFE_STYLE_PROPS.has(prop)) continue;
+      if (val === "" || DANGEROUS_CSS_VALUE.test(val)) continue;
+      kept.push(`${prop}: ${val}`);
+    }
+    return kept.length > 0 ? kept.join("; ") : null;
+  }
+  var ATTR_PATTERN = /([^\s=/>"']+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]*)))?/g;
+  function sanitizeOpeningTag(rawOpen) {
+    if (!rawOpen.startsWith("<")) return null;
+    const tagName = extractTagName(rawOpen);
+    if (!/^[a-z][a-z0-9-]*$/.test(tagName) || !SAFE_TAGS.has(tagName)) {
+      return null;
+    }
+    const end = rawOpen.endsWith("/>") ? rawOpen.length - 2 : rawOpen.endsWith(">") ? rawOpen.length - 1 : rawOpen.length;
+    const attrSource = rawOpen.slice(1 + tagName.length, end);
+    const attrs = {};
+    for (const match of attrSource.matchAll(ATTR_PATTERN)) {
+      const name = match[1].toLowerCase();
+      const value = match[2] ?? match[3] ?? match[4] ?? "";
+      if (name in attrs) continue;
+      if (name === "style") {
+        const cleanStyle = sanitizeStyle(value);
+        if (cleanStyle !== null) attrs[name] = cleanStyle;
+        continue;
+      }
+      const allowed = SAFE_ATTRS.has(name) || /^data-[a-z0-9-]*$/.test(name) || /^aria-[a-z0-9-]*$/.test(name);
+      if (!allowed) continue;
+      if (URL_ATTRS.has(name)) {
+        if (sanitizeUrl(value) === null) continue;
+      }
+      attrs[name] = value;
+    }
+    return serializeOpeningTag(tagName, attrs);
+  }
+
   // src/content/serializer/HTMLSerializer.ts
   var HTMLSerializer = class {
     serialize(unit) {
@@ -1169,24 +1323,25 @@ var LionRapidEditor = (() => {
       let lastIndex = 0;
       let match;
       while ((match = tagPattern.exec(text)) !== null) {
-        result += text.slice(lastIndex, match.index);
+        result += escapeHtml(text.slice(lastIndex, match.index));
         const [fullMatch, closingSlash, indexStr] = match;
         const styleList = styles[indexStr] ?? [];
         const rawOpen = readRawStyle(styleList);
-        if (rawOpen) {
+        const safeOpen = rawOpen === null ? null : sanitizeOpeningTag(rawOpen);
+        if (rawOpen && safeOpen !== null) {
           const tagName = extractTagName(rawOpen);
           const isVoid = VOID_TAGS.has(tagName);
           if (closingSlash) {
             if (!isVoid) result += `</${tagName}>`;
           } else {
-            result += rawOpen;
+            result += safeOpen;
           }
         } else {
           result += fullMatch;
         }
         lastIndex = match.index + fullMatch.length;
       }
-      result += text.slice(lastIndex);
+      result += escapeHtml(text.slice(lastIndex));
       return result;
     }
   };
@@ -1236,1249 +1391,1358 @@ var LionRapidEditor = (() => {
     }
   }
 
-  // src/browser/exclude-filter.ts
-  var DEFAULT_PATTERNS = {
-    emails: true,
-    urls: true,
-    numbers: true,
-    phones: true
-  };
-  var PATTERNS = {
-    email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-    url: /^(https?:\/\/|www\.)[^\s]+$/i,
-    number: /^[\d\s.,+-]+$/,
-    phone: /^[+\d][\d\s().-]{6,}$/
-  };
-  var ExcludeFilter = class {
-    constructor(patterns = {}, minTextLength = 2) {
-      __publicField(this, "patterns");
-      __publicField(this, "minTextLength");
-      this.patterns = { ...DEFAULT_PATTERNS, ...patterns };
-      this.minTextLength = minTextLength;
+  // src/browser/editor/editor-api.ts
+  function isRowAtPostreview(info, stageIndex) {
+    return info !== null && typeof stageIndex === "number" && stageIndex >= info.workStageCount;
+  }
+  var _EditorAPI = class _EditorAPI {
+    constructor(apiBase, sessionToken, projectId) {
+      __publicField(this, "queue", []);
+      __publicField(this, "apiBase");
+      __publicField(this, "sessionToken");
+      __publicField(this, "projectId");
+      __publicField(this, "flushInterval", null);
+      __publicField(this, "renewalInterval", null);
+      __publicField(this, "onStatus", () => {
+      });
+      __publicField(this, "onFlushed", () => {
+      });
+      __publicField(this, "onSessionExpired", null);
+      // Workflow context cache — keyed by locale (a per-target override can give
+      // one locale a different workflow) and TTL-bound (the PM can change the
+      // project's workflow from the dashboard mid-session; a boundary pinned at
+      // first fetch would render buttons the server refuses). Promises are
+      // cached so concurrent callers share one in-flight fetch.
+      __publicField(this, "workflowInfoCache", /* @__PURE__ */ new Map());
+      /** Whether this session may lazily create rows for keys with no target row
+       *  yet. Mirrors the server's create gate (creation is stage-0 work — PM/admin
+       *  or stage-0 assignees); refreshed from targets/status `can_create`.
+       *  Default true: older backends don't send it and don't gate creates. */
+      __publicField(this, "canCreateMissing", true);
+      /** True while this locale's target has an MT fill queued/running (refreshed
+       *  from targets/status `target_busy`). canEdit stays the permission truth
+       *  during the window; stage transitions would 423 until it clears, and
+       *  saves are denied as "busy" and auto-retried by the flush loop. */
+      __publicField(this, "targetBusy", false);
+      __publicField(this, "busyRetryTimer", null);
+      __publicField(this, "statusAbort", null);
+      __publicField(this, "handleVisibility", () => {
+        if (document.visibilityState === "hidden") {
+          this.flush();
+        } else if (document.visibilityState === "visible") {
+          this.maybeRenewSession();
+        }
+      });
+      this.apiBase = apiBase.replace(/\/$/, "");
+      this.sessionToken = sessionToken;
+      this.projectId = projectId;
+    }
+    setStatusCallback(cb) {
+      this.onStatus = cb;
+    }
+    setFlushedCallback(cb) {
+      this.onFlushed = cb;
+    }
+    setSessionExpiredCallback(cb) {
+      this.onSessionExpired = cb;
     }
     /**
-     * Check if text should be excluded from translation
+     * Start auto-flush (30s interval + visibilitychange) and session renewal (60s check)
      */
-    shouldExclude(text) {
-      const trimmed = text.trim();
-      if (trimmed.length < this.minTextLength) {
-        return true;
-      }
-      if (this.patterns.emails && PATTERNS.email.test(trimmed)) {
-        return true;
-      }
-      if (this.patterns.urls && PATTERNS.url.test(trimmed)) {
-        return true;
-      }
-      if (this.patterns.numbers && PATTERNS.number.test(trimmed)) {
-        return true;
+    startAutoFlush() {
+      this.flushInterval = setInterval(() => this.flush(), 3e4);
+      document.addEventListener("visibilitychange", this.handleVisibility);
+      this.renewalInterval = setInterval(() => this.maybeRenewSession(), 6e4);
+    }
+    /**
+     * Stop auto-flush and flush remaining items
+     */
+    async stopAndFlush() {
+      if (this.flushInterval) {
+        clearInterval(this.flushInterval);
+        this.flushInterval = null;
       }
-      if (this.patterns.phones && PATTERNS.phone.test(trimmed)) {
-        return true;
+      if (this.renewalInterval) {
+        clearInterval(this.renewalInterval);
+        this.renewalInterval = null;
       }
-      return false;
-    }
-  };
-
-  // 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",
-    "CODE",
-    "PRE",
-    "TEXTAREA",
-    "NOSCRIPT",
-    "SVG"
-  ]);
-  var SKIP_ATTRIBUTES = [
-    "data-lionrapid-translated",
-    // Server already translated
-    "data-lionrapid-client",
-    // Client already translated
-    "data-no-translate",
-    // Explicitly marked to skip
-    // Edge proxy already rendered this block with the correct translation
-    // and styles. Skip in normal extraction so the client-side auto-translator
-    // can't overwrite the styled DOM with a stale (or plain-text) cache entry.
-    // The editor passes includeTranslated=true to bypass this and re-extract
-    // edge-rendered blocks for inspection.
-    "data-lr-block"
-  ];
-  var BlockExtractor = class {
-    constructor(excludePatterns = {}, excludeSelectors = [], minTextLength = 2) {
-      __publicField(this, "excludeFilter");
-      __publicField(this, "excludeSelectors");
-      this.excludeFilter = new ExcludeFilter(excludePatterns, minTextLength);
-      this.excludeSelectors = excludeSelectors;
+      document.removeEventListener("visibilitychange", this.handleVisibility);
+      await this.flush();
     }
     /**
-     * Extract all translatable block elements from a root.
-     * @param includeTranslated - If true, include elements already marked as translated (for editor mode)
+     * Queue a translation for saving
      */
-    extract(root, includeTranslated = false) {
-      const results = [];
-      const descendants = root.querySelectorAll(BLOCK_SELECTOR3);
-      const elements = [];
-      if (root instanceof Element && root.matches(BLOCK_SELECTOR3)) {
-        elements.push(root);
+    queueSave(item) {
+      const idx = this.queue.findIndex(
+        (q) => q.key === item.key && q.locale === item.locale && q.namespace === item.namespace
+      );
+      if (idx >= 0) {
+        this.queue[idx] = item;
+      } else {
+        this.queue.push(item);
       }
-      for (let i = 0; i < descendants.length; i++) {
-        elements.push(descendants[i]);
+      this.onStatus("unsaved", `${this.queue.length} unsaved`);
+      if (this.queue.length > 50) {
+        this.flush();
       }
-      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;
+    }
+    /**
+     * Flush all queued translations to the server
+     */
+    async flush() {
+      if (this.queue.length === 0) return;
+      const items = [...this.queue];
+      this.onStatus("saving");
+      try {
+        const response = await this.authFetch(
+          `${this.apiBase}/api/integrations/targets/batch`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              translations: items.map((t) => ({
+                key: `${t.locale}:${t.namespace}:${t.key}`,
+                value: { text: t.text, styles: t.styles }
+              }))
+            })
+          }
+        );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return;
         }
-        if (el.querySelector(BLOCK_SELECTOR3)) {
-          continue;
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
         }
-        const lrBlock = el.getAttribute("data-lr-block");
-        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 body = await response.json().catch(() => null);
+        const deniedRows = body?.denied_rows ?? [];
+        const busyKeys = new Set(
+          deniedRows.filter((d) => d.reason === "busy").map((d) => d.key)
+        );
+        const hardDenied = deniedRows.filter((d) => d.reason !== "busy");
+        const retained = [];
+        for (const item of items) {
+          const idx = this.queue.indexOf(item);
+          if (busyKeys.has(`${item.locale}:${item.namespace}:${item.key}`)) {
+            retained.push(item);
+            continue;
+          }
+          if (idx >= 0) this.queue.splice(idx, 1);
         }
-        const strippedText = unit.text.replace(/<\/?[0-9]+\/?>/g, "");
-        if (this.excludeFilter.shouldExclude(strippedText)) {
-          continue;
+        this.onFlushed(
+          items.filter((i) => !busyKeys.has(`${i.locale}:${i.namespace}:${i.key}`)).map((i) => i.key)
+        );
+        if (retained.length > 0) {
+          this.scheduleBusyRetry();
         }
-        let key;
-        if (lrBlock) {
-          key = lrBlock;
+        if (hardDenied.length > 0) {
+          const lockedCount = hardDenied.filter((d) => d.reason === "locked").length;
+          const message = hardDenied.length === 1 ? lockedCount === 1 ? "1 change not saved \u2014 row is locked (only a PM can edit it)" : "1 change not saved \u2014 you are not assigned to that row" : `${hardDenied.length} changes not saved \u2014 locked or not assigned to you`;
+          this.onStatus("error", message);
+        } else if (retained.length > 0) {
+          this.onStatus(
+            "unsaved",
+            `${retained.length} waiting \u2014 machine translation is filling this page, retrying shortly`
+          );
+        } else if (this.queue.length === 0) {
+          this.onStatus("saved", "All changes saved");
         } else {
-          const dataI18n = el.getAttribute("data-i18n");
-          if (dataI18n) {
-            key = dataI18n.includes(":") ? dataI18n : `common:${dataI18n}`;
-          } else {
-            key = generateAutoKey(unit.text);
-          }
+          this.onStatus("unsaved", `${this.queue.length} unsaved`);
         }
-        results.push({ element: el, unit, key });
+      } catch (err) {
+        this.onStatus("error", `Save failed: ${err.message}`);
       }
-      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.
+     * Re-flush edits refused with reason "busy" (target MT fill in flight).
+     * One pipeline sweep (~30 s worst case) clears the fill; a single pending
+     * timer is enough — each retry re-schedules itself while busy rows remain.
      */
-    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 });
-      }
+    scheduleBusyRetry() {
+      if (this.busyRetryTimer) return;
+      this.busyRetryTimer = setTimeout(() => {
+        this.busyRetryTimer = null;
+        this.flush();
+      }, 8e3);
     }
-    isInsideSkipTag(element) {
-      let current = element.parentElement;
-      while (current) {
-        if (SKIP_TAGS2.has(current.tagName)) {
-          return true;
+    /**
+     * Fetch translation status for a batch of keys (includes unconfirmed rows).
+     * Cancels any in-flight status request. Caps at 200 keys per request.
+     */
+    async fetchStatus(keys, locale, namespace) {
+      if (keys.length === 0) return {};
+      if (this.statusAbort) this.statusAbort.abort();
+      this.statusAbort = new AbortController();
+      const batch = keys.slice(0, 200);
+      const params = new URLSearchParams({ locale, namespace, keys: batch.join(",") });
+      try {
+        const response = await this.authFetch(
+          `${this.apiBase}/api/integrations/targets/status?${params}`,
+          { signal: this.statusAbort.signal }
+        );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return {};
         }
-        current = current.parentElement;
+        if (!response.ok) return {};
+        const data = await response.json();
+        this.canCreateMissing = data.can_create !== false;
+        this.targetBusy = data.target_busy === true;
+        return data.translations;
+      } catch (err) {
+        if (err.name === "AbortError") return {};
+        return {};
       }
-      return false;
     }
-    hasSkipAttribute(element) {
-      let current = element;
-      while (current) {
-        for (const attr of SKIP_ATTRIBUTES) {
-          if (current.hasAttribute(attr)) {
-            return true;
+    get pendingCount() {
+      return this.queue.length;
+    }
+    /**
+     * Fetch workflow context (stages, user's stage assignments, PM/admin flag,
+     * advance boundary) for the EFFECTIVE workflow of `locale` — the server
+     * resolves the per-target override (`target ?? project`) when a locale is
+     * given. Cached per locale with a 5-min TTL so a mid-session workflow
+     * change from the dashboard settings is picked up without a page reload.
+     * Returns null if the fetch fails; callers should hide the strip in that case.
+     */
+    async fetchWorkflowInfo(locale) {
+      const cacheKey = locale ?? "";
+      const cached = this.workflowInfoCache.get(cacheKey);
+      if (cached && Date.now() - cached.fetchedAt < _EditorAPI.WORKFLOW_INFO_TTL_MS) {
+        return cached.promise;
+      }
+      const promise = (async () => {
+        try {
+          const url = `${this.apiBase}/api/integrations/editor/workflow` + (locale ? `?locale=${encodeURIComponent(locale)}` : "");
+          const response = await this.authFetch(url);
+          if (response.status === 401) {
+            this.handleSessionExpired();
+            return null;
           }
+          if (!response.ok) return null;
+          const data = await response.json();
+          const stages = (Array.isArray(data.stages) ? data.stages : []).map(
+            (s) => ({
+              index: s.index,
+              name: s.name,
+              role: s.role ?? null,
+              isPostreview: Boolean(s.is_postreview)
+            })
+          );
+          return {
+            stages,
+            userAssignedStages: Array.isArray(data.user_assigned_stages) ? data.user_assigned_stages : [],
+            isPmAdmin: Boolean(data.is_pm_admin),
+            workflowMode: data.workflow_mode === "per_file" ? "per_file" : "per_row",
+            // Older backends don't send work_stage_count; before Postreview
+            // stages existed the boundary was len(stages), so fall back to that.
+            workStageCount: typeof data.work_stage_count === "number" ? data.work_stage_count : stages.length
+          };
+        } catch {
+          return null;
         }
-        current = current.parentElement;
-      }
-      return false;
+      })();
+      this.workflowInfoCache.set(cacheKey, { promise, fetchedAt: Date.now() });
+      return promise;
     }
-    matchesExcludeSelector(element) {
-      for (const selector of this.excludeSelectors) {
+    // ============================================
+    // Session renewal
+    // ============================================
+    /**
+     * 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 > 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`, {
+          method: "POST",
+          headers: {
+            "Authorization": `Bearer ${this.sessionToken}`
+          }
+        });
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return;
+        }
+        if (!response.ok) return;
+        const data = await response.json();
+        this.sessionToken = data.session_token;
         try {
-          if (element.matches(selector) || element.closest(selector)) {
-            return true;
+          const raw = this.sessionToken.startsWith("es_") ? this.sessionToken.slice(3) : this.sessionToken;
+          const parts = raw.split(".");
+          if (parts.length === 3) {
+            const payload = JSON.parse(atob(parts[1]));
+            sessionStorage.setItem("__lr_editor_session", JSON.stringify({
+              token: this.sessionToken,
+              exp: payload.exp || 0
+            }));
+            document.cookie = "__lr_editor_active=1; path=/; SameSite=Lax";
           }
         } catch {
         }
+      } catch {
       }
-      return false;
     }
-  };
-
-  // src/browser/editor/locale-url.ts
-  function localizeUrl(href, defaultLocale) {
-    let url;
-    try {
-      url = new URL(href, window.location.href);
-    } catch {
-      return href;
+    getSessionExp() {
+      try {
+        const raw = this.sessionToken.startsWith("es_") ? this.sessionToken.slice(3) : this.sessionToken;
+        const parts = raw.split(".");
+        if (parts.length !== 3) return null;
+        const payload = JSON.parse(atob(parts[1]));
+        return payload.exp || null;
+      } catch {
+        return null;
+      }
     }
-    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 {
-    constructor(shadowRoot, api, locale, namespace, defaultLocale, onBlockClick, userRole = "") {
-      __publicField(this, "el");
-      __publicField(this, "bodyEl");
-      __publicField(this, "statusEl");
-      __publicField(this, "api");
-      __publicField(this, "locale");
-      __publicField(this, "namespace");
-      __publicField(this, "defaultLocale");
-      __publicField(this, "current", null);
-      __publicField(this, "blockExtractor");
-      __publicField(this, "onBlockClick");
-      __publicField(this, "statusMap", /* @__PURE__ */ new Map());
-      __publicField(this, "unsavedKeys", /* @__PURE__ */ new Set());
-      __publicField(this, "onProgressUpdate", null);
-      __publicField(this, "lastFetchTime", 0);
-      __publicField(this, "lastFlushTime", 0);
-      __publicField(this, "userRole");
-      // Project workflow context — fetched once on first render, cached for the
-      // sidebar's lifetime. Workflow shape is stable per editor session.
-      __publicField(this, "workflowInfo", null);
-      __publicField(this, "workflowInfoFetched", false);
-      this.api = api;
-      this.locale = locale;
-      this.namespace = namespace;
-      this.defaultLocale = defaultLocale;
-      this.onBlockClick = onBlockClick;
-      this.userRole = userRole;
-      this.blockExtractor = new BlockExtractor();
-      this.el = document.createElement("div");
-      this.el.className = "lr-sidebar";
-      const resizeHandle = document.createElement("div");
-      resizeHandle.className = "lr-sidebar-resize";
-      this.initResize(resizeHandle);
-      this.el.appendChild(resizeHandle);
-      const header = document.createElement("div");
-      header.className = "lr-sidebar-header";
-      const title = document.createElement("span");
-      title.className = "lr-sidebar-title";
-      title.textContent = "Edit Translation";
-      header.appendChild(title);
-      const closeBtn = document.createElement("button");
-      closeBtn.className = "lr-sidebar-close";
-      closeBtn.innerHTML = "&times;";
-      closeBtn.addEventListener("click", () => this.close());
-      header.appendChild(closeBtn);
-      this.el.appendChild(header);
-      this.bodyEl = document.createElement("div");
-      this.bodyEl.className = "lr-sidebar-body";
-      this.el.appendChild(this.bodyEl);
-      this.statusEl = document.createElement("div");
-      this.statusEl.className = "lr-status";
-      this.api.setStatusCallback((status, message) => {
-        this.statusEl.textContent = message || status;
-        this.statusEl.className = `lr-status ${status}`;
-      });
-      this.api.setFlushedCallback(async (keys) => {
-        this.lastFlushTime = Date.now();
-        const freshStatuses = await this.api.fetchStatus(keys, this.locale, this.namespace);
-        for (const [key, status] of Object.entries(freshStatuses)) {
-          this.statusMap.set(key, status);
-          this.unsavedKeys.delete(key);
-        }
-        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();
+    /**
+     * 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() });
+        }
       }
-      shadowRoot.appendChild(this.el);
-    }
-    open(resolved) {
-      this.current = resolved;
-      this.el.classList.add("open");
-      this.renderContent(resolved);
-    }
-    close() {
-      this.current = null;
-      this.el.classList.remove("open");
-    }
-    isOpen() {
-      return this.el.classList.contains("open");
-    }
-    updateLocale(locale) {
-      this.locale = locale;
-      this.statusMap.clear();
-      this.unsavedKeys.clear();
+      return response;
     }
-    setProgressCallback(cb) {
-      this.onProgressUpdate = cb;
+    handleSessionExpired() {
+      document.cookie = "__lr_editor_active=; path=/; SameSite=Lax; Max-Age=0";
+      this.onStatus("error", "Session expired. Please reopen the editor from the dashboard.");
+      if (this.onSessionExpired) {
+        this.onSessionExpired();
+      }
     }
+    // ============================================
+    // Snapshot API
+    // ============================================
     /**
-     * Hydrate the status map with server data for all page blocks.
-     * Called once on editor init.
+     * Upload a captured snapshot. Returns the created snapshot's UUID so the
+     * caller can build a share URL (`?__lr_snapshot={uuid}`).
      */
-    async hydrateStatus() {
-      const blocks = this.blockExtractor.extract(document.body, true);
-      const keys = blocks.map((b) => b.key);
-      if (keys.length === 0) return;
-      const statuses = await this.api.fetchStatus(keys, this.locale, this.namespace);
-      for (const [key, status] of Object.entries(statuses)) {
-        this.statusMap.set(key, status);
+    async createSnapshot(snapshot) {
+      try {
+        const response = await fetch(`${this.apiBase}/api/editor/snapshots`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${this.sessionToken}`
+          },
+          body: JSON.stringify({
+            pageUrl: snapshot.pageUrl,
+            title: snapshot.title,
+            viewport: snapshot.viewport,
+            textEntries: snapshot.textEntries,
+            html: snapshot.html
+          })
+        });
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return null;
+        }
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const data = await response.json();
+        return { snapshotUuid: data.snapshot_uuid || data.snapshotUuid };
+      } catch (err) {
+        this.onStatus("error", `Snapshot failed: ${err.message}`);
+        return null;
       }
-      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, 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) });
-            }
+    }
+    /**
+     * Re-capture an existing snapshot. Server appends a new version and keeps
+     * the same `snapshotUuid`. Returns the new version number on success.
+     */
+    async recaptureSnapshot(snapshotUuid, snapshot) {
+      try {
+        const response = await fetch(
+          `${this.apiBase}/api/editor/snapshots/${encodeURIComponent(snapshotUuid)}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${this.sessionToken}`
+            },
+            body: JSON.stringify({
+              pageUrl: snapshot.pageUrl,
+              title: snapshot.title,
+              viewport: snapshot.viewport,
+              textEntries: snapshot.textEntries,
+              html: snapshot.html
+            })
           }
+        );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return null;
+        }
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
         }
+        const data = await response.json();
+        return {
+          snapshotUuid: data.snapshot_uuid || data.snapshotUuid,
+          version: data.version || 1
+        };
+      } catch (err) {
+        this.onStatus("error", `Re-capture failed: ${err.message}`);
+        return null;
       }
-      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.`
+    }
+    /**
+     * Fetch a single snapshot by UUID. Returns null on auth failure or 404.
+     */
+    async getSnapshot(snapshotUuid) {
+      try {
+        const response = await fetch(
+          `${this.apiBase}/api/editor/snapshots/${encodeURIComponent(snapshotUuid)}`,
+          {
+            headers: { "Authorization": `Bearer ${this.sessionToken}` }
+          }
         );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return null;
+        }
+        if (!response.ok) return null;
+        return await response.json();
+      } catch {
+        return null;
       }
-      this.emitProgress();
     }
-    getTranslatedCount() {
-      let count = 0;
-      for (const status of this.statusMap.values()) {
-        if (status && status.rowState !== "empty") count++;
+    /**
+     * List all snapshots the current editor session can see.
+     */
+    async listSnapshots() {
+      try {
+        const response = await fetch(`${this.apiBase}/api/editor/snapshots`, {
+          headers: { "Authorization": `Bearer ${this.sessionToken}` }
+        });
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return [];
+        }
+        if (!response.ok) return [];
+        const data = await response.json();
+        return data.snapshots || [];
+      } catch {
+        return [];
       }
-      return count;
-    }
-    getTotalCount() {
-      return this.blockExtractor.extract(document.body, true).length;
     }
-    emitProgress() {
-      if (this.onProgressUpdate) {
-        this.onProgressUpdate(this.getTranslatedCount(), this.getTotalCount());
+    /**
+     * Delete (soft) a snapshot by UUID.
+     */
+    async deleteSnapshot(snapshotUuid) {
+      try {
+        const response = await fetch(
+          `${this.apiBase}/api/editor/snapshots/${encodeURIComponent(snapshotUuid)}`,
+          {
+            method: "DELETE",
+            headers: { "Authorization": `Bearer ${this.sessionToken}` }
+          }
+        );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return false;
+        }
+        return response.ok;
+      } catch {
+        return false;
       }
     }
-    destroy() {
-      this.el.remove();
-    }
-    async renderContent(resolved) {
-      const { key, unit, element } = resolved;
-      this.bodyEl.innerHTML = "";
-      const isStale = this.lastFlushTime > this.lastFetchTime || this.lastFetchTime === 0;
-      if (isStale) {
-        const blocks = this.blockExtractor.extract(document.body, true);
-        const allKeys = blocks.map((b) => b.key);
-        if (!allKeys.includes(key)) allKeys.push(key);
-        const freshStatuses = await this.api.fetchStatus(allKeys, this.locale, this.namespace);
-        for (const [k, s] of Object.entries(freshStatuses)) {
-          this.statusMap.set(k, s);
-        }
-        this.lastFetchTime = Date.now();
-      } else {
-        const freshStatus = await this.api.fetchStatus([key], this.locale, this.namespace);
-        if (freshStatus[key] !== void 0) {
-          this.statusMap.set(key, freshStatus[key]);
-        }
-      }
-      const status = this.statusMap.get(key) ?? null;
-      this.addField("Key", () => {
-        const keyEl = document.createElement("div");
-        keyEl.className = "lr-field-key";
-        keyEl.textContent = key;
-        return keyEl;
-      });
-      this.addField("Original", () => {
-        const origEl = document.createElement("div");
-        origEl.className = "lr-field-original";
-        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");
-      this.addField("Translation", () => {
-        textarea.className = "lr-textarea";
-        textarea.value = status?.text || resolved.translatedUnit?.text || "";
-        textarea.placeholder = unit.text;
-        if (isLocked) {
-          textarea.readOnly = true;
-          textarea.classList.add("lr-textarea-locked");
-          textarea.title = isSourceLocale ? "Source language \u2014 switch to a target language to edit" : status?.isReady ? "Approved for delivery \u2014 read only" : "Locked \u2014 read only";
-        }
-        return textarea;
-      });
-      this.bodyEl.appendChild(this.statusEl);
-      const previewEl = document.createElement("div");
-      this.addField("Preview", () => {
-        previewEl.className = "lr-preview";
-        if (textarea.value) {
-          previewEl.innerHTML = this.renderPreview(textarea.value, unit.styles);
+    /**
+     * Workflow transitions (Phase 3). Per-key endpoints on the integrations API
+     * that mirror the dashboard's row-level transitions but are addressable by
+     * composite editor key (locale:namespace:auto_xxx).
+     *
+     * Returns the parsed JSON on success, or null on failure (caller usually
+     * shows a toast / re-fetches status).
+     */
+    async transitionTarget(composite, action) {
+      try {
+        const response = await this.authFetch(
+          `${this.apiBase}/api/integrations/targets/${encodeURIComponent(composite)}/${action}`,
+          { method: "POST" }
+        );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return null;
         }
-        return previewEl;
-      });
-      if (!isSourceLocale) {
-        this.renderWorkflowActions(key, status);
-      }
-      if (!isLocked) {
-        textarea.addEventListener("input", () => {
-          const text = textarea.value;
-          previewEl.innerHTML = this.renderPreview(text, unit.styles);
-          if (text) {
-            applyLivePreview(element, text, unit.styles, key, this.locale, this.namespace, unit.text, "edited");
+        if (!response.ok) {
+          const errBody = await response.json().catch(() => null);
+          if (response.status === 423 && errBody?.error?.code === "TARGET_BUSY") {
+            this.onStatus(
+              "error",
+              "Machine translation is filling this page \u2014 try again in a few seconds."
+            );
+          } else {
+            this.onStatus("error", `${action} failed: HTTP ${response.status}`);
           }
-          this.unsavedKeys.add(key);
-          this.api.queueSave({
-            key,
-            locale: this.locale,
-            namespace: this.namespace,
-            text,
-            styles: unit.styles
-          });
-        });
-      }
-      this.renderBlocksList();
-      if (!isLocked) {
-        setTimeout(() => textarea.focus(), 100);
+          return null;
+        }
+        return await response.json();
+      } catch (err) {
+        this.onStatus("error", `${action} failed: ${err.message}`);
+        return null;
       }
     }
+  };
+  __publicField(_EditorAPI, "WORKFLOW_INFO_TTL_MS", 5 * 60 * 1e3);
+  var EditorAPI = _EditorAPI;
+
+  // src/browser/exclude-filter.ts
+  var DEFAULT_PATTERNS = {
+    emails: true,
+    urls: true,
+    numbers: true,
+    phones: true
+  };
+  var PATTERNS = {
+    email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+    url: /^(https?:\/\/|www\.)[^\s]+$/i,
+    number: /^[\d\s.,+-]+$/,
+    phone: /^[+\d][\d\s().-]{6,}$/
+  };
+  var ExcludeFilter = class {
+    constructor(patterns = {}, minTextLength = 2) {
+      __publicField(this, "patterns");
+      __publicField(this, "minTextLength");
+      this.patterns = { ...DEFAULT_PATTERNS, ...patterns };
+      this.minTextLength = minTextLength;
+    }
     /**
-     * Render Confirm/Reject/Mark-Ready/Unmark-Ready buttons under the preview.
-     * Visibility:
-     *   - Confirm: shown when row is not locked and not already ready
-     *   - Reject:  shown when row is not locked and not already ready (server
-     *              returns 400 if stage_index is already 0)
-     *   - Unconfirm: shown when isConfirmed
-     *   - Mark Ready: PM/admin only, hidden when already ready
-     *   - Unmark Ready: PM/admin only, only when ready
-     * After any successful click we re-fetch status for this key so the UI
-     * reflects the new state and the unaffected buttons hide/show themselves.
+     * Check if text should be excluded from translation
      */
-    renderWorkflowActions(key, status) {
-      const isPM = this.userRole === "project_manager" || this.userRole === "admin";
-      const isReady = !!status?.isReady;
-      const isLocked = !!status?.isLocked;
-      const isConfirmed = !!status?.isConfirmed;
-      const canEdit = status?.canEdit !== false;
-      const composite = `${this.locale}:${this.namespace}:${key}`;
-      const wrap = document.createElement("div");
-      wrap.className = "lr-workflow-actions";
-      const stripHost = document.createElement("div");
-      stripHost.className = "lr-wf-strip-host";
-      wrap.appendChild(stripHost);
-      this.renderWorkflowStrip(stripHost, status);
-      const addBtn = (label, action, variant = "secondary") => {
-        const btn = document.createElement("button");
-        btn.className = `lr-wf-btn lr-wf-${variant}`;
-        btn.textContent = label;
-        btn.addEventListener("click", async () => {
-          btn.disabled = true;
-          const result = await this.api.transitionTarget(composite, action);
-          btn.disabled = false;
-          if (result) {
-            await this.refreshStatusForKey(key);
-          }
-        });
-        wrap.appendChild(btn);
-      };
-      if (canEdit && !isLocked && !isReady) {
-        if (!isConfirmed) {
-          addBtn("Confirm", "confirm", "primary");
-          addBtn("Reject", "reject", "danger");
-        } else {
-          const isPerFile = this.workflowInfo?.workflowMode === "per_file";
-          if (!isPerFile) {
-            addBtn("Advance", "advance", "primary");
-          }
-          addBtn("Unconfirm", "unconfirm");
-        }
+    shouldExclude(text) {
+      const trimmed = text.trim();
+      if (trimmed.length < this.minTextLength) {
+        return true;
       }
-      if (isPM) {
-        if (!isReady) {
-          addBtn("Mark Ready", "mark-ready", "primary");
-        } else {
-          addBtn("Unmark Ready", "unmark-ready", "danger");
-        }
+      if (this.patterns.emails && PATTERNS.email.test(trimmed)) {
+        return true;
       }
-      if (!canEdit && !isPM && !isReady && !isLocked) {
-        const note = document.createElement("span");
-        note.className = "lr-wf-note";
-        note.textContent = typeof status?.stageIndex === "number" && status.stageIndex > 0 ? `Row already advanced (stage ${status.stageIndex + 1}) \u2014 out of your scope.` : "You are not assigned to this row at the current stage.";
-        wrap.appendChild(note);
+      if (this.patterns.urls && PATTERNS.url.test(trimmed)) {
+        return true;
       }
-      if (wrap.children.length > 0) {
-        this.bodyEl.appendChild(wrap);
+      if (this.patterns.numbers && PATTERNS.number.test(trimmed)) {
+        return true;
+      }
+      if (this.patterns.phones && PATTERNS.phone.test(trimmed)) {
+        return true;
       }
+      return false;
+    }
+  };
+
+  // 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",
+    "CODE",
+    "PRE",
+    "TEXTAREA",
+    "NOSCRIPT",
+    "SVG"
+  ]);
+  var SKIP_ATTRIBUTES = [
+    "data-lionrapid-translated",
+    // Server already translated
+    "data-lionrapid-client",
+    // Client already translated
+    "data-no-translate",
+    // Explicitly marked to skip
+    // Edge proxy already rendered this block with the correct translation
+    // and styles. Skip in normal extraction so the client-side auto-translator
+    // can't overwrite the styled DOM with a stale (or plain-text) cache entry.
+    // The editor passes includeTranslated=true to bypass this and re-extract
+    // edge-rendered blocks for inspection.
+    "data-lr-block"
+  ];
+  var BlockExtractor = class {
+    constructor(excludePatterns = {}, excludeSelectors = [], minTextLength = 2) {
+      __publicField(this, "excludeFilter");
+      __publicField(this, "excludeSelectors");
+      this.excludeFilter = new ExcludeFilter(excludePatterns, minTextLength);
+      this.excludeSelectors = excludeSelectors;
     }
     /**
-     * Render the workflow context strip ('Workflow: A → B → C — you are at stage X').
-     * Highlights the user's POV stage and greys the rest.
-     *
-     * Highlight rule:
-     *   - PM/admin: highlight = row's current stage_index (deep-dive view)
-     *   - Non-PM:   highlight = first userAssignedStages entry (fixed POV)
-     *
-     * Workflow info is fetched lazily on first call and cached for the sidebar's
-     * lifetime. While the fetch is in flight, the host stays empty (no flash).
+     * Extract all translatable block elements from a root.
+     * @param includeTranslated - If true, include elements already marked as translated (for editor mode)
      */
-    renderWorkflowStrip(host, status) {
-      if (this.workflowInfo) {
-        const node = this.buildWorkflowStripNode(this.workflowInfo, status);
-        host.replaceChildren(...node ? [node] : []);
-        return;
+    extract(root, includeTranslated = false) {
+      const results = [];
+      const descendants = root.querySelectorAll(BLOCK_SELECTOR3);
+      const elements = [];
+      if (root instanceof Element && root.matches(BLOCK_SELECTOR3)) {
+        elements.push(root);
       }
-      if (this.workflowInfoFetched) return;
-      this.workflowInfoFetched = true;
-      void this.api.fetchWorkflowInfo().then((info) => {
-        this.workflowInfo = info;
-        if (!this.current) return;
-        const fresh = this.statusMap.get(this.current.key) ?? status ?? null;
-        const node = info ? this.buildWorkflowStripNode(info, fresh) : null;
-        if (host.isConnected) host.replaceChildren(...node ? [node] : []);
-      });
-    }
-    buildWorkflowStripNode(info, status) {
-      if (!info.stages || info.stages.length === 0) return null;
-      let highlightIndex = null;
-      if (info.isPmAdmin) {
-        highlightIndex = typeof status?.stageIndex === "number" ? status.stageIndex : null;
-      } else if (info.userAssignedStages.length > 0) {
-        highlightIndex = info.userAssignedStages[0];
+      for (let i = 0; i < descendants.length; i++) {
+        elements.push(descendants[i]);
       }
-      const strip = document.createElement("div");
-      strip.className = "lr-wf-strip";
-      const stagesRow = document.createElement("div");
-      stagesRow.className = "lr-wf-strip-stages";
-      info.stages.forEach((stage, i) => {
-        const item = document.createElement("span");
-        item.className = "lr-wf-strip-stage";
-        if (highlightIndex !== null && stage.index === highlightIndex) {
-          item.classList.add("is-active");
-        } else {
-          item.classList.add("is-muted");
+      for (let i = 0; i < elements.length; i++) {
+        const el = elements[i];
+        if (this.isInsideSkipTag(el)) {
+          continue;
         }
-        item.textContent = stage.name;
-        stagesRow.appendChild(item);
-        if (i < info.stages.length - 1) {
-          const sep = document.createElement("span");
-          sep.className = "lr-wf-strip-sep";
-          sep.textContent = "\u2192";
-          stagesRow.appendChild(sep);
+        if (!includeTranslated && this.hasSkipAttribute(el)) {
+          continue;
         }
-      });
-      strip.appendChild(stagesRow);
-      const caption = document.createElement("div");
-      caption.className = "lr-wf-strip-caption";
-      if (highlightIndex !== null) {
-        const stage = info.stages.find((s) => s.index === highlightIndex);
-        const name = stage?.name ?? `Stage ${highlightIndex + 1}`;
-        const label = info.isPmAdmin ? "Row currently at" : "You are here";
-        caption.textContent = `${label}: stage ${highlightIndex + 1} of ${info.stages.length} \u2014 ${name}`;
-      } else if (!info.isPmAdmin && info.userAssignedStages.length === 0) {
-        caption.textContent = "You have no stage assignment on this project.";
-      } else {
-        caption.textContent = `${info.stages.length} stages`;
-      }
-      strip.appendChild(caption);
-      return strip;
-    }
-    /** Re-fetch status for one key and re-render the current view. */
-    async refreshStatusForKey(key) {
-      const fresh = await this.api.fetchStatus([key], this.locale, this.namespace);
-      for (const [k, s] of Object.entries(fresh)) {
-        this.statusMap.set(k, s);
-      }
-      if (this.current) {
-        this.renderContent(this.current);
+        if (this.matchesExcludeSelector(el)) {
+          continue;
+        }
+        if (el.getAttribute("translate") === "no") {
+          continue;
+        }
+        if (el.querySelector(BLOCK_SELECTOR3)) {
+          continue;
+        }
+        const lrBlock = el.getAttribute("data-lr-block");
+        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;
+        }
+        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 });
       }
-      this.emitProgress();
+      this.extractOrphanInline(root, results, includeTranslated);
+      return results;
     }
     /**
-     * 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.
+     * 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.
      */
-    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;
+    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);
       }
-      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";
-      const labelEl = document.createElement("span");
-      labelEl.className = "lr-field-label";
-      labelEl.textContent = label;
-      field.appendChild(labelEl);
-      field.appendChild(contentFn());
-      this.bodyEl.appendChild(field);
-    }
-    /**
-     * Get CSS class for the status dot based on actual row state, with one
-     * viewer-relative override: rows that have advanced past the viewer's
-     * stage assignment render as 'readonly' (greyed) — same data for everyone,
-     * different signal per viewer. Avoids the new-color-per-stage explosion the
-     * user was originally considering; reuses existing semantics.
-     */
-    getDotClass(key) {
-      if (this.unsavedKeys.has(key)) return "unsaved";
-      const s = this.statusMap.get(key);
-      if (!s) return "missing";
-      if (s.isLocked) return "locked";
-      if (s.canEdit === false && typeof s.stageIndex === "number" && s.stageIndex > 0) return "readonly";
-      if (s.isReady) return "ready";
-      if (s.isConfirmed) return "confirmed";
-      if (s.rowState === "edited") return "edited";
-      if (s.rowState === "machine_translated") return "mt";
-      return "missing";
-    }
-    renderTextWithTags(text) {
-      return text.replace(
-        /<(\/?)?(\d+)(\/)?>/g,
-        (match) => `<span class="lr-field-tag">${match}</span>`
-      );
-    }
-    renderPreview(text, styles) {
-      if (!text) return "";
-      if (Object.keys(styles).length > 0) {
-        const unit = { text, styles };
-        return htmlSerializer2.serialize(unit);
+      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 });
       }
-      return text;
     }
-    initResize(handle) {
-      let startX = 0;
-      let startWidth = 0;
-      const onMouseMove = (e) => {
-        const newWidth = startWidth + (startX - e.clientX);
-        const clamped = Math.max(280, Math.min(600, newWidth));
-        this.el.style.width = `${clamped}px`;
-      };
-      const onMouseUp = () => {
-        handle.classList.remove("active");
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      handle.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        startX = e.clientX;
-        startWidth = this.el.offsetWidth;
-        handle.classList.add("active");
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
-      });
+    isInsideSkipTag(element) {
+      let current = element.parentElement;
+      while (current) {
+        if (SKIP_TAGS2.has(current.tagName.toUpperCase())) {
+          return true;
+        }
+        current = current.parentElement;
+      }
+      return false;
     }
-    refreshBlocksList() {
-      const existing = this.bodyEl.querySelector(".lr-blocks-section");
-      if (existing) existing.remove();
-      this.renderBlocksList();
+    hasSkipAttribute(element) {
+      let current = element;
+      while (current) {
+        for (const attr of SKIP_ATTRIBUTES) {
+          if (current.hasAttribute(attr)) {
+            return true;
+          }
+        }
+        current = current.parentElement;
+      }
+      return false;
     }
-    renderBlocksList() {
-      const section = document.createElement("div");
-      section.className = "lr-blocks-section";
-      const blocks = this.blockExtractor.extract(document.body, true);
-      const translatedCount = this.getTranslatedCount();
-      const title = document.createElement("div");
-      title.className = "lr-blocks-title";
-      title.textContent = `Blocks on this page (${translatedCount}/${blocks.length} translated)`;
-      section.appendChild(title);
-      for (const block of blocks) {
-        const item = document.createElement("div");
-        item.className = "lr-block-item";
-        const isActive = this.current && block.element === this.current.element;
-        if (isActive) item.classList.add("active");
-        const dot = document.createElement("span");
-        dot.className = "lr-status-dot";
-        dot.classList.add(this.getDotClass(block.key));
-        item.appendChild(dot);
-        const textWrap = document.createElement("div");
-        textWrap.className = "lr-block-text";
-        const displayText = block.unit.text.replace(/<\/?[0-9]+\/?>/g, "");
-        const sourceSpan = document.createElement("div");
-        sourceSpan.className = "lr-block-source";
-        sourceSpan.textContent = displayText.length > 60 ? displayText.slice(0, 60) + "..." : displayText;
-        sourceSpan.title = displayText;
-        textWrap.appendChild(sourceSpan);
-        const blockStatus = this.statusMap.get(block.key);
-        if (blockStatus && blockStatus.text) {
-          const previewSpan = document.createElement("div");
-          previewSpan.className = "lr-block-preview";
-          const previewText = blockStatus.text.replace(/<\/?[0-9]+\/?>/g, "");
-          previewSpan.textContent = previewText.length > 50 ? previewText.slice(0, 50) + "..." : previewText;
-          textWrap.appendChild(previewSpan);
+    matchesExcludeSelector(element) {
+      for (const selector of this.excludeSelectors) {
+        try {
+          if (element.matches(selector) || element.closest(selector)) {
+            return true;
+          }
+        } catch {
         }
-        item.appendChild(textWrap);
-        item.addEventListener("click", () => {
-          block.element.scrollIntoView({ behavior: "smooth", block: "center" });
-          this.onBlockClick({ key: block.key, unit: block.unit, translatedUnit: null, element: block.element });
-        });
-        section.appendChild(item);
       }
-      this.bodyEl.appendChild(section);
+      return false;
     }
   };
 
-  // src/browser/editor/editor-api.ts
-  var EditorAPI = class {
-    constructor(apiBase, sessionToken, projectId) {
-      __publicField(this, "queue", []);
-      __publicField(this, "apiBase");
-      __publicField(this, "sessionToken");
-      __publicField(this, "projectId");
-      __publicField(this, "flushInterval", null);
-      __publicField(this, "renewalInterval", null);
-      __publicField(this, "onStatus", () => {
-      });
-      __publicField(this, "onFlushed", () => {
+  // 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 {
+    constructor(shadowRoot, api, locale, namespace, defaultLocale, onBlockClick, userRole = "") {
+      __publicField(this, "el");
+      __publicField(this, "bodyEl");
+      __publicField(this, "statusEl");
+      __publicField(this, "api");
+      __publicField(this, "locale");
+      __publicField(this, "namespace");
+      __publicField(this, "defaultLocale");
+      __publicField(this, "current", null);
+      __publicField(this, "blockExtractor");
+      __publicField(this, "onBlockClick");
+      __publicField(this, "statusMap", /* @__PURE__ */ new Map());
+      __publicField(this, "unsavedKeys", /* @__PURE__ */ new Set());
+      __publicField(this, "onProgressUpdate", null);
+      __publicField(this, "lastFetchTime", 0);
+      __publicField(this, "lastFlushTime", 0);
+      __publicField(this, "userRole");
+      // Latest known workflow context for this.locale. Revalidated on every strip
+      // render through the API's TTL-bound, per-locale cache — the workflow can
+      // change mid-session (dashboard settings) and can differ per locale
+      // (per-target override), so it must not be pinned at first fetch.
+      __publicField(this, "workflowInfo", null);
+      this.api = api;
+      this.locale = locale;
+      this.namespace = namespace;
+      this.defaultLocale = defaultLocale;
+      this.onBlockClick = onBlockClick;
+      this.userRole = userRole;
+      this.blockExtractor = new BlockExtractor();
+      this.el = document.createElement("div");
+      this.el.className = "lr-sidebar";
+      const resizeHandle = document.createElement("div");
+      resizeHandle.className = "lr-sidebar-resize";
+      this.initResize(resizeHandle);
+      this.el.appendChild(resizeHandle);
+      const header = document.createElement("div");
+      header.className = "lr-sidebar-header";
+      const title = document.createElement("span");
+      title.className = "lr-sidebar-title";
+      title.textContent = "Edit Translation";
+      header.appendChild(title);
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "lr-sidebar-close";
+      closeBtn.innerHTML = "&times;";
+      closeBtn.addEventListener("click", () => this.close());
+      header.appendChild(closeBtn);
+      this.el.appendChild(header);
+      this.bodyEl = document.createElement("div");
+      this.bodyEl.className = "lr-sidebar-body";
+      this.el.appendChild(this.bodyEl);
+      this.statusEl = document.createElement("div");
+      this.statusEl.className = "lr-status";
+      this.api.setStatusCallback((status, message) => {
+        this.statusEl.textContent = message || status;
+        this.statusEl.className = `lr-status ${status}`;
       });
-      __publicField(this, "onSessionExpired", null);
-      // Workflow info is project-scoped and stable for the editor session lifetime.
-      // Cached as a Promise so concurrent callers share one fetch.
-      __publicField(this, "workflowInfoPromise", null);
-      __publicField(this, "statusAbort", null);
-      __publicField(this, "handleVisibility", () => {
-        if (document.visibilityState === "hidden") {
-          this.flush();
-        } else if (document.visibilityState === "visible") {
-          this.maybeRenewSession();
+      this.api.setFlushedCallback(async (keys) => {
+        this.lastFlushTime = Date.now();
+        const freshStatuses = await this.api.fetchStatus(keys, this.locale, this.namespace);
+        for (const [key, status] of Object.entries(freshStatuses)) {
+          this.statusMap.set(key, status);
+          this.unsavedKeys.delete(key);
         }
+        this.refreshBlocksList();
+        this.emitProgress();
       });
-      this.apiBase = apiBase.replace(/\/$/, "");
-      this.sessionToken = sessionToken;
-      this.projectId = projectId;
+      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);
     }
-    setStatusCallback(cb) {
-      this.onStatus = cb;
+    open(resolved) {
+      this.current = resolved;
+      this.el.classList.add("open");
+      this.renderContent(resolved);
     }
-    setFlushedCallback(cb) {
-      this.onFlushed = cb;
+    close() {
+      this.current = null;
+      this.el.classList.remove("open");
     }
-    setSessionExpiredCallback(cb) {
-      this.onSessionExpired = cb;
+    isOpen() {
+      return this.el.classList.contains("open");
     }
-    /**
-     * Start auto-flush (30s interval + visibilitychange) and session renewal (60s check)
-     */
-    startAutoFlush() {
-      this.flushInterval = setInterval(() => this.flush(), 3e4);
-      document.addEventListener("visibilitychange", this.handleVisibility);
-      this.renewalInterval = setInterval(() => this.maybeRenewSession(), 6e4);
+    updateLocale(locale) {
+      this.locale = locale;
+      this.statusMap.clear();
+      this.unsavedKeys.clear();
     }
-    /**
-     * Stop auto-flush and flush remaining items
-     */
-    async stopAndFlush() {
-      if (this.flushInterval) {
-        clearInterval(this.flushInterval);
-        this.flushInterval = null;
-      }
-      if (this.renewalInterval) {
-        clearInterval(this.renewalInterval);
-        this.renewalInterval = null;
-      }
-      document.removeEventListener("visibilitychange", this.handleVisibility);
-      await this.flush();
+    setProgressCallback(cb) {
+      this.onProgressUpdate = cb;
     }
     /**
-     * Queue a translation for saving
+     * Hydrate the status map with server data for all page blocks.
+     * Called once on editor init.
      */
-    queueSave(item) {
-      const idx = this.queue.findIndex(
-        (q) => q.key === item.key && q.locale === item.locale && q.namespace === item.namespace
-      );
-      if (idx >= 0) {
-        this.queue[idx] = item;
-      } else {
-        this.queue.push(item);
-      }
-      this.onStatus("unsaved", `${this.queue.length} unsaved`);
-      if (this.queue.length > 50) {
-        this.flush();
+    async hydrateStatus() {
+      const blocks = this.blockExtractor.extract(document.body, true);
+      const keys = blocks.map((b) => b.key);
+      if (keys.length === 0) return;
+      const statuses = await this.api.fetchStatus(keys, this.locale, this.namespace);
+      for (const [key, status] of Object.entries(statuses)) {
+        this.statusMap.set(key, status);
       }
-    }
-    /**
-     * Flush all queued translations to the server
-     */
-    async flush() {
-      if (this.queue.length === 0) return;
-      const items = [...this.queue];
-      this.onStatus("saving");
-      try {
-        const response = await this.authFetch(
-          `${this.apiBase}/api/integrations/targets/batch`,
-          {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              translations: items.map((t) => ({
-                key: `${t.locale}:${t.namespace}:${t.key}`,
-                value: { text: t.text, styles: t.styles }
-              }))
-            })
+      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, 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 (response.status === 401) {
-          this.handleSessionExpired();
-          return;
-        }
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
-        }
-        const flushedKeys = items.map((i) => i.key);
-        for (const item of items) {
-          const idx = this.queue.indexOf(item);
-          if (idx >= 0) this.queue.splice(idx, 1);
-        }
-        this.onFlushed(flushedKeys);
-        if (this.queue.length === 0) {
-          this.onStatus("saved", "All changes saved");
-        } else {
-          this.onStatus("unsaved", `${this.queue.length} unsaved`);
         }
-      } catch (err) {
-        this.onStatus("error", `Save failed: ${err.message}`);
       }
-    }
-    /**
-     * Fetch translation status for a batch of keys (includes unconfirmed rows).
-     * Cancels any in-flight status request. Caps at 200 keys per request.
-     */
-    async fetchStatus(keys, locale, namespace) {
-      if (keys.length === 0) return {};
-      if (this.statusAbort) this.statusAbort.abort();
-      this.statusAbort = new AbortController();
-      const batch = keys.slice(0, 200);
-      const params = new URLSearchParams({ locale, namespace, keys: batch.join(",") });
-      try {
-        const response = await this.authFetch(
-          `${this.apiBase}/api/integrations/targets/status?${params}`,
-          { signal: this.statusAbort.signal }
+      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.`
         );
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return {};
-        }
-        if (!response.ok) return {};
-        const data = await response.json();
-        return data.translations;
-      } catch (err) {
-        if (err.name === "AbortError") return {};
-        return {};
       }
+      this.emitProgress();
     }
-    get pendingCount() {
-      return this.queue.length;
+    getTranslatedCount() {
+      let count = 0;
+      for (const status of this.statusMap.values()) {
+        if (status && status.rowState !== "empty") count++;
+      }
+      return count;
     }
-    /**
-     * Fetch workflow context for the project (stages, user's stage assignments,
-     * PM/admin flag). Cached for the editor session lifetime — workflow shape
-     * doesn't change mid-session and the sidebar re-uses it on every row click.
-     * Returns null if the fetch fails; callers should hide the strip in that case.
-     */
-    async fetchWorkflowInfo() {
-      if (this.workflowInfoPromise) return this.workflowInfoPromise;
-      this.workflowInfoPromise = (async () => {
-        try {
-          const response = await this.authFetch(`${this.apiBase}/api/integrations/editor/workflow`);
-          if (response.status === 401) {
-            this.handleSessionExpired();
-            return null;
-          }
-          if (!response.ok) return null;
-          const data = await response.json();
-          return {
-            stages: Array.isArray(data.stages) ? data.stages : [],
-            userAssignedStages: Array.isArray(data.user_assigned_stages) ? data.user_assigned_stages : [],
-            isPmAdmin: Boolean(data.is_pm_admin),
-            workflowMode: data.workflow_mode === "per_file" ? "per_file" : "per_row"
-          };
-        } catch {
-          return null;
-        }
-      })();
-      return this.workflowInfoPromise;
+    getTotalCount() {
+      return this.blockExtractor.extract(document.body, true).length;
     }
-    // ============================================
-    // Session renewal
-    // ============================================
-    /**
-     * 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 > 3e5) return;
-      await this.renewSession();
+    emitProgress() {
+      if (this.onProgressUpdate) {
+        this.onProgressUpdate(this.getTranslatedCount(), this.getTotalCount());
+      }
     }
-    /**
-     * 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;
+    destroy() {
+      this.el.remove();
     }
-    async renewSession() {
-      try {
-        const response = await fetch(`${this.apiBase}/api/editor/renew`, {
-          method: "POST",
-          headers: {
-            "Authorization": `Bearer ${this.sessionToken}`
-          }
-        });
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return;
+    async renderContent(resolved) {
+      const { key, unit, element } = resolved;
+      this.bodyEl.innerHTML = "";
+      const isStale = this.lastFlushTime > this.lastFetchTime || this.lastFetchTime === 0;
+      if (isStale) {
+        const blocks = this.blockExtractor.extract(document.body, true);
+        const allKeys = blocks.map((b) => b.key);
+        if (!allKeys.includes(key)) allKeys.push(key);
+        const freshStatuses = await this.api.fetchStatus(allKeys, this.locale, this.namespace);
+        for (const [k, s] of Object.entries(freshStatuses)) {
+          this.statusMap.set(k, s);
+        }
+        this.lastFetchTime = Date.now();
+      } else {
+        const freshStatus = await this.api.fetchStatus([key], this.locale, this.namespace);
+        if (freshStatus[key] !== void 0) {
+          this.statusMap.set(key, freshStatus[key]);
+        }
+      }
+      const status = this.statusMap.get(key) ?? null;
+      this.addField("Key", () => {
+        const keyEl = document.createElement("div");
+        keyEl.className = "lr-field-key";
+        keyEl.textContent = key;
+        return keyEl;
+      });
+      this.addField("Original", () => {
+        const origEl = document.createElement("div");
+        origEl.className = "lr-field-original";
+        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 cannotEdit = status ? status.canEdit === false : !this.api.canCreateMissing;
+      const readOnly = isLocked || cannotEdit;
+      const textarea = document.createElement("textarea");
+      this.addField("Translation", () => {
+        textarea.className = "lr-textarea";
+        textarea.value = status?.text || resolved.translatedUnit?.text || "";
+        textarea.placeholder = unit.text;
+        if (readOnly) {
+          textarea.readOnly = true;
+          textarea.classList.add("lr-textarea-locked");
+          textarea.title = isSourceLocale ? "Source language \u2014 switch to a target language to edit" : status?.isReady ? "Approved for delivery \u2014 read only" : isLocked ? "Locked \u2014 read only" : status ? "Assigned to another stage \u2014 read only" : "Not yet translated \u2014 rows are created at the translation stage";
         }
-        if (!response.ok) return;
-        const data = await response.json();
-        this.sessionToken = data.session_token;
-        try {
-          const raw = this.sessionToken.startsWith("es_") ? this.sessionToken.slice(3) : this.sessionToken;
-          const parts = raw.split(".");
-          if (parts.length === 3) {
-            const payload = JSON.parse(atob(parts[1]));
-            sessionStorage.setItem("__lr_editor_session", JSON.stringify({
-              token: this.sessionToken,
-              exp: payload.exp || 0
-            }));
-            document.cookie = "__lr_editor_active=1; path=/; SameSite=Lax";
-          }
-        } catch {
+        return textarea;
+      });
+      this.bodyEl.appendChild(this.statusEl);
+      const previewEl = document.createElement("div");
+      this.addField("Preview", () => {
+        previewEl.className = "lr-preview";
+        if (textarea.value) {
+          previewEl.innerHTML = this.renderPreview(textarea.value, unit.styles);
         }
-      } catch {
+        return previewEl;
+      });
+      if (!isSourceLocale) {
+        this.renderWorkflowActions(key, status);
       }
-    }
-    getSessionExp() {
-      try {
-        const raw = this.sessionToken.startsWith("es_") ? this.sessionToken.slice(3) : this.sessionToken;
-        const parts = raw.split(".");
-        if (parts.length !== 3) return null;
-        const payload = JSON.parse(atob(parts[1]));
-        return payload.exp || null;
-      } catch {
-        return null;
+      if (!readOnly) {
+        textarea.addEventListener("input", () => {
+          const text = textarea.value;
+          previewEl.innerHTML = this.renderPreview(text, unit.styles);
+          if (text) {
+            applyLivePreview(element, text, unit.styles, key, this.locale, this.namespace, unit.text, "edited");
+          }
+          this.unsavedKeys.add(key);
+          this.api.queueSave({
+            key,
+            locale: this.locale,
+            namespace: this.namespace,
+            text,
+            styles: unit.styles
+          });
+        });
+      }
+      this.renderBlocksList();
+      if (!readOnly) {
+        setTimeout(() => textarea.focus(), 100);
       }
     }
     /**
-     * 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.
+     * Render Confirm/Reject/Mark-Ready/Unmark-Ready buttons under the preview.
+     * Visibility:
+     *   - Confirm: shown when row is not locked and not already ready
+     *   - Reject:  shown when row is not locked and not already ready (server
+     *              returns 400 if stage_index is already 0)
+     *   - Unconfirm: shown when isConfirmed
+     *   - Mark Ready: PM/admin only, hidden when already ready
+     *   - Unmark Ready: PM/admin only, only when ready
+     * After any successful click we re-fetch status for this key so the UI
+     * reflects the new state and the unaffected buttons hide/show themselves.
      */
-    async authFetch(url, init = {}) {
-      const buildHeaders = () => {
-        const h = new Headers(init.headers);
-        h.set("Authorization", `Bearer ${this.sessionToken}`);
-        return h;
+    renderWorkflowActions(key, status) {
+      const isPM = this.userRole === "project_manager" || this.userRole === "admin";
+      const isReady = !!status?.isReady;
+      const isLocked = !!status?.isLocked;
+      const isConfirmed = !!status?.isConfirmed;
+      const canEdit = status ? status.canEdit !== false : this.api.canCreateMissing;
+      const composite = `${this.locale}:${this.namespace}:${key}`;
+      const wrap = document.createElement("div");
+      wrap.className = "lr-workflow-actions";
+      const stripHost = document.createElement("div");
+      stripHost.className = "lr-wf-strip-host";
+      wrap.appendChild(stripHost);
+      this.renderWorkflowStrip(stripHost, status);
+      const addBtn = (label, action, variant = "secondary") => {
+        const btn = document.createElement("button");
+        btn.className = `lr-wf-btn lr-wf-${variant}`;
+        btn.textContent = label;
+        btn.addEventListener("click", async () => {
+          btn.disabled = true;
+          const result = await this.api.transitionTarget(composite, action);
+          btn.disabled = false;
+          if (result) {
+            await this.refreshStatusForKey(key);
+          }
+        });
+        wrap.appendChild(btn);
       };
-      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() });
+      const fillBusy = this.api.targetBusy;
+      if (fillBusy && canEdit && !isLocked && !isReady) {
+        const note = document.createElement("span");
+        note.className = "lr-wf-note";
+        note.textContent = "Machine translation is filling this page \u2014 edits save automatically; stage actions unlock in a moment.";
+        wrap.appendChild(note);
+      }
+      if (!fillBusy && canEdit && !isLocked && !isReady) {
+        if (!isConfirmed) {
+          addBtn("Confirm", "confirm", "primary");
+          if (status?.stageIndex !== 0) {
+            addBtn("Reject", "reject", "danger");
+          }
+        } else {
+          const isPerFile = this.workflowInfo?.workflowMode === "per_file";
+          const atPostreview = isRowAtPostreview(this.workflowInfo, status?.stageIndex);
+          if (!isPerFile && !atPostreview) {
+            addBtn("Advance", "advance", "primary");
+          }
+          addBtn("Unconfirm", "unconfirm");
+          if (!isPerFile && atPostreview) {
+            const note = document.createElement("span");
+            note.className = "lr-wf-note";
+            note.textContent = this.workflowInfo && this.workflowInfo.stages.length === 0 ? "No translation workflow configured \u2014 set one in project settings to use stages." : "In final review \u2014 no further stages to advance.";
+            wrap.appendChild(note);
+          }
         }
       }
-      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.");
-      if (this.onSessionExpired) {
-        this.onSessionExpired();
+      if (isPM) {
+        if (!isReady) {
+          addBtn("Mark Ready", "mark-ready", "primary");
+        } else {
+          addBtn("Unmark Ready", "unmark-ready", "danger");
+        }
+      }
+      if (!canEdit && !isPM && !isReady && !isLocked) {
+        const note = document.createElement("span");
+        note.className = "lr-wf-note";
+        note.textContent = typeof status?.stageIndex === "number" && status.stageIndex > 0 ? `Row already advanced (stage ${status.stageIndex + 1}) \u2014 out of your scope.` : "You are not assigned to this row at the current stage.";
+        wrap.appendChild(note);
+      }
+      if (wrap.children.length > 0) {
+        this.bodyEl.appendChild(wrap);
       }
     }
-    // ============================================
-    // Snapshot API
-    // ============================================
     /**
-     * Upload a captured snapshot. Returns the created snapshot's UUID so the
-     * caller can build a share URL (`?__lr_snapshot={uuid}`).
+     * Render the workflow context strip ('Workflow: A → B → C — you are at stage X').
+     * Highlights the user's POV stage and greys the rest.
+     *
+     * Highlight rule:
+     *   - PM/admin: highlight = row's current stage_index (deep-dive view)
+     *   - Non-PM:   highlight = first userAssignedStages entry (fixed POV)
+     *
+     * Renders immediately from the latest known shape, then revalidates through
+     * the API's TTL-bound per-locale cache (cache hits resolve instantly) so a
+     * mid-session workflow change or a per-target override is picked up. While
+     * the first fetch is in flight, the host stays empty (no flash).
      */
-    async createSnapshot(snapshot) {
-      try {
-        const response = await fetch(`${this.apiBase}/api/editor/snapshots`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${this.sessionToken}`
-          },
-          body: JSON.stringify({
-            pageUrl: snapshot.pageUrl,
-            title: snapshot.title,
-            viewport: snapshot.viewport,
-            textEntries: snapshot.textEntries,
-            html: snapshot.html
-          })
-        });
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return null;
-        }
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
-        }
-        const data = await response.json();
-        return { snapshotUuid: data.snapshot_uuid || data.snapshotUuid };
-      } catch (err) {
-        this.onStatus("error", `Snapshot failed: ${err.message}`);
-        return null;
+    renderWorkflowStrip(host, status) {
+      if (this.workflowInfo) {
+        const node = this.buildWorkflowStripNode(this.workflowInfo, status);
+        host.replaceChildren(...node ? [node] : []);
       }
+      void this.api.fetchWorkflowInfo(this.locale).then((info) => {
+        if (!info || info === this.workflowInfo) return;
+        this.workflowInfo = info;
+        if (!this.current) return;
+        const fresh = this.statusMap.get(this.current.key) ?? status ?? null;
+        const node = this.buildWorkflowStripNode(info, fresh);
+        if (host.isConnected) host.replaceChildren(...node ? [node] : []);
+      });
     }
-    /**
-     * Re-capture an existing snapshot. Server appends a new version and keeps
-     * the same `snapshotUuid`. Returns the new version number on success.
-     */
-    async recaptureSnapshot(snapshotUuid, snapshot) {
-      try {
-        const response = await fetch(
-          `${this.apiBase}/api/editor/snapshots/${encodeURIComponent(snapshotUuid)}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-              "Authorization": `Bearer ${this.sessionToken}`
-            },
-            body: JSON.stringify({
-              pageUrl: snapshot.pageUrl,
-              title: snapshot.title,
-              viewport: snapshot.viewport,
-              textEntries: snapshot.textEntries,
-              html: snapshot.html
-            })
-          }
-        );
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return null;
-        }
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
+    buildWorkflowStripNode(info, status) {
+      if (!info.stages || info.stages.length === 0) return null;
+      let highlightIndex = null;
+      if (info.isPmAdmin) {
+        highlightIndex = typeof status?.stageIndex === "number" ? status.stageIndex : null;
+      } else if (info.userAssignedStages.length > 0) {
+        highlightIndex = info.userAssignedStages[0];
+      }
+      const strip = document.createElement("div");
+      strip.className = "lr-wf-strip";
+      const stagesRow = document.createElement("div");
+      stagesRow.className = "lr-wf-strip-stages";
+      info.stages.forEach((stage, i) => {
+        const item = document.createElement("span");
+        item.className = "lr-wf-strip-stage";
+        if (highlightIndex !== null && stage.index === highlightIndex) {
+          item.classList.add("is-active");
+        } else {
+          item.classList.add("is-muted");
         }
-        const data = await response.json();
-        return {
-          snapshotUuid: data.snapshot_uuid || data.snapshotUuid,
-          version: data.version || 1
-        };
-      } catch (err) {
-        this.onStatus("error", `Re-capture failed: ${err.message}`);
-        return null;
+        item.textContent = stage.name;
+        stagesRow.appendChild(item);
+        if (i < info.stages.length - 1) {
+          const sep = document.createElement("span");
+          sep.className = "lr-wf-strip-sep";
+          sep.textContent = "\u2192";
+          stagesRow.appendChild(sep);
+        }
+      });
+      strip.appendChild(stagesRow);
+      const caption = document.createElement("div");
+      caption.className = "lr-wf-strip-caption";
+      if (highlightIndex !== null) {
+        const stage = info.stages.find((s) => s.index === highlightIndex);
+        const name = stage?.name ?? `Stage ${highlightIndex + 1}`;
+        const label = info.isPmAdmin ? "Row currently at" : "You are here";
+        caption.textContent = `${label}: stage ${highlightIndex + 1} of ${info.stages.length} \u2014 ${name}`;
+      } else if (!info.isPmAdmin && info.userAssignedStages.length === 0) {
+        caption.textContent = "You have no stage assignment on this project.";
+      } else {
+        caption.textContent = `${info.stages.length} stages`;
       }
+      strip.appendChild(caption);
+      return strip;
     }
-    /**
-     * Fetch a single snapshot by UUID. Returns null on auth failure or 404.
-     */
-    async getSnapshot(snapshotUuid) {
-      try {
-        const response = await fetch(
-          `${this.apiBase}/api/editor/snapshots/${encodeURIComponent(snapshotUuid)}`,
-          {
-            headers: { "Authorization": `Bearer ${this.sessionToken}` }
-          }
-        );
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return null;
-        }
-        if (!response.ok) return null;
-        return await response.json();
-      } catch {
-        return null;
+    /** Re-fetch status for one key and re-render the current view. */
+    async refreshStatusForKey(key) {
+      const fresh = await this.api.fetchStatus([key], this.locale, this.namespace);
+      for (const [k, s] of Object.entries(fresh)) {
+        this.statusMap.set(k, s);
+      }
+      if (this.current) {
+        this.renderContent(this.current);
       }
+      this.emitProgress();
     }
     /**
-     * List all snapshots the current editor session can see.
+     * 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.
      */
-    async listSnapshots() {
+    renderLinkNav(element) {
+      const anchor = element.matches?.("a[href]") ? element : element.querySelector?.("a[href]");
+      if (!anchor) return;
+      let dest;
       try {
-        const response = await fetch(`${this.apiBase}/api/editor/snapshots`, {
-          headers: { "Authorization": `Bearer ${this.sessionToken}` }
-        });
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return [];
-        }
-        if (!response.ok) return [];
-        const data = await response.json();
-        return data.snapshots || [];
+        dest = new URL(anchor.href, window.location.href);
       } catch {
-        return [];
+        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";
+      const labelEl = document.createElement("span");
+      labelEl.className = "lr-field-label";
+      labelEl.textContent = label;
+      field.appendChild(labelEl);
+      field.appendChild(contentFn());
+      this.bodyEl.appendChild(field);
     }
     /**
-     * Delete (soft) a snapshot by UUID.
+     * Get CSS class for the status dot based on actual row state, with one
+     * viewer-relative override: rows that have advanced past the viewer's
+     * stage assignment render as 'readonly' (greyed) — same data for everyone,
+     * different signal per viewer. Avoids the new-color-per-stage explosion the
+     * user was originally considering; reuses existing semantics.
      */
-    async deleteSnapshot(snapshotUuid) {
-      try {
-        const response = await fetch(
-          `${this.apiBase}/api/editor/snapshots/${encodeURIComponent(snapshotUuid)}`,
-          {
-            method: "DELETE",
-            headers: { "Authorization": `Bearer ${this.sessionToken}` }
-          }
-        );
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return false;
-        }
-        return response.ok;
-      } catch {
-        return false;
+    getDotClass(key) {
+      if (this.unsavedKeys.has(key)) return "unsaved";
+      const s = this.statusMap.get(key);
+      if (!s) return this.api.canCreateMissing ? "missing" : "readonly";
+      if (s.isLocked) return "locked";
+      if (s.canEdit === false && typeof s.stageIndex === "number" && s.stageIndex > 0) return "readonly";
+      if (s.isReady) return "ready";
+      if (s.isConfirmed) return "confirmed";
+      if (s.rowState === "edited") return "edited";
+      if (s.rowState === "machine_translated") return "mt";
+      return "missing";
+    }
+    renderTextWithTags(text) {
+      const tagPattern = /<(\/?)?(\d+)(\/)?>/g;
+      let result = "";
+      let lastIndex = 0;
+      let match;
+      while ((match = tagPattern.exec(text)) !== null) {
+        result += escapeHtml(text.slice(lastIndex, match.index));
+        result += `<span class="lr-field-tag">${escapeHtml(match[0])}</span>`;
+        lastIndex = match.index + match[0].length;
       }
+      return result + escapeHtml(text.slice(lastIndex));
     }
-    /**
-     * Workflow transitions (Phase 3). Per-key endpoints on the integrations API
-     * that mirror the dashboard's row-level transitions but are addressable by
-     * composite editor key (locale:namespace:auto_xxx).
-     *
-     * Returns the parsed JSON on success, or null on failure (caller usually
-     * shows a toast / re-fetches status).
-     */
-    async transitionTarget(composite, action) {
-      try {
-        const response = await this.authFetch(
-          `${this.apiBase}/api/integrations/targets/${encodeURIComponent(composite)}/${action}`,
-          { method: "POST" }
-        );
-        if (response.status === 401) {
-          this.handleSessionExpired();
-          return null;
-        }
-        if (!response.ok) {
-          this.onStatus("error", `${action} failed: HTTP ${response.status}`);
-          return null;
+    renderPreview(text, styles) {
+      if (!text) return "";
+      if (Object.keys(styles).length > 0) {
+        const unit = { text, styles };
+        return htmlSerializer2.serialize(unit);
+      }
+      return escapeHtml(text);
+    }
+    initResize(handle) {
+      let startX = 0;
+      let startWidth = 0;
+      const onMouseMove = (e) => {
+        const newWidth = startWidth + (startX - e.clientX);
+        const clamped = Math.max(280, Math.min(600, newWidth));
+        this.el.style.width = `${clamped}px`;
+      };
+      const onMouseUp = () => {
+        handle.classList.remove("active");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        startX = e.clientX;
+        startWidth = this.el.offsetWidth;
+        handle.classList.add("active");
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+    }
+    refreshBlocksList() {
+      const existing = this.bodyEl.querySelector(".lr-blocks-section");
+      if (existing) existing.remove();
+      this.renderBlocksList();
+    }
+    renderBlocksList() {
+      const section = document.createElement("div");
+      section.className = "lr-blocks-section";
+      const blocks = this.blockExtractor.extract(document.body, true);
+      const translatedCount = this.getTranslatedCount();
+      const title = document.createElement("div");
+      title.className = "lr-blocks-title";
+      title.textContent = `Blocks on this page (${translatedCount}/${blocks.length} translated)`;
+      section.appendChild(title);
+      for (const block of blocks) {
+        const item = document.createElement("div");
+        item.className = "lr-block-item";
+        const isActive = this.current && block.element === this.current.element;
+        if (isActive) item.classList.add("active");
+        const dot = document.createElement("span");
+        dot.className = "lr-status-dot";
+        dot.classList.add(this.getDotClass(block.key));
+        item.appendChild(dot);
+        const textWrap = document.createElement("div");
+        textWrap.className = "lr-block-text";
+        const displayText = block.unit.text.replace(/<\/?[0-9]+\/?>/g, "");
+        const sourceSpan = document.createElement("div");
+        sourceSpan.className = "lr-block-source";
+        sourceSpan.textContent = displayText.length > 60 ? displayText.slice(0, 60) + "..." : displayText;
+        sourceSpan.title = displayText;
+        textWrap.appendChild(sourceSpan);
+        const blockStatus = this.statusMap.get(block.key);
+        if (blockStatus && blockStatus.text) {
+          const previewSpan = document.createElement("div");
+          previewSpan.className = "lr-block-preview";
+          const previewText = blockStatus.text.replace(/<\/?[0-9]+\/?>/g, "");
+          previewSpan.textContent = previewText.length > 50 ? previewText.slice(0, 50) + "..." : previewText;
+          textWrap.appendChild(previewSpan);
         }
-        return await response.json();
-      } catch (err) {
-        this.onStatus("error", `${action} failed: ${err.message}`);
-        return null;
+        item.appendChild(textWrap);
+        item.addEventListener("click", () => {
+          block.element.scrollIntoView({ behavior: "smooth", block: "center" });
+          this.onBlockClick({ key: block.key, unit: block.unit, translatedUnit: null, element: block.element });
+        });
+        section.appendChild(item);
       }
+      this.bodyEl.appendChild(section);
     }
   };
 
@@ -2698,17 +2962,105 @@ var LionRapidEditor = (() => {
     });
   }
 
+  // src/browser/sanitizer.ts
+  var REMOVE_TAGS = /* @__PURE__ */ new Set([
+    "script",
+    "iframe",
+    "frame",
+    "frameset",
+    "object",
+    "embed",
+    "applet",
+    "base",
+    "meta",
+    "link",
+    "template",
+    "portal"
+  ]);
+  var URL_ATTRS2 = /* @__PURE__ */ new Set([
+    "href",
+    "src",
+    "action",
+    "formaction",
+    "poster",
+    "data",
+    "xlink:href"
+  ]);
+  function sanitizeElement(root) {
+    const all = [root, ...Array.from(root.querySelectorAll("*"))];
+    for (const el of all) {
+      const tag = el.tagName.toLowerCase();
+      if (REMOVE_TAGS.has(tag)) {
+        el.remove();
+        continue;
+      }
+      for (const name of el.getAttributeNames()) {
+        const lower = name.toLowerCase();
+        if (lower.startsWith("on") || lower === "srcdoc") {
+          el.removeAttribute(name);
+          continue;
+        }
+        if (URL_ATTRS2.has(lower)) {
+          if (sanitizeUrl(el.getAttribute(name) ?? "") === null) {
+            el.removeAttribute(name);
+          }
+          continue;
+        }
+        if (lower === "style") {
+          const clean = sanitizeCssDeclarations(el.getAttribute(name) ?? "");
+          if (clean === null) el.removeAttribute(name);
+          else el.setAttribute(name, clean);
+        }
+      }
+    }
+  }
+  function sanitizeStyleSheetText(css, baseHref) {
+    let out = css.replace(/@import[^;]*(;|$)/gi, "");
+    out = out.replace(
+      /url\(\s*(['"]?)([^'")]*)\1\s*\)/gi,
+      (full, _quote, target) => {
+        try {
+          const resolved = new URL(target, baseHref);
+          if (resolved.protocol === "data:") return full;
+          if (resolved.origin === new URL(baseHref).origin) return full;
+        } catch {
+        }
+        return 'url("")';
+      }
+    );
+    return out.replace(/expression\s*\(/gi, "blocked(");
+  }
+
   // src/browser/editor/snapshot-viewer.ts
   async function activateSnapshotViewer(snapshotUuid, api) {
     const snapshot = await api.getSnapshot(snapshotUuid);
     if (!snapshot) return null;
     const parser = new DOMParser();
     const doc = parser.parseFromString(snapshot.html, "text/html");
+    sanitizeElement(doc.body);
     const snapshotStyles = doc.head.querySelectorAll('link[rel="stylesheet"], style');
     for (let i = 0; i < snapshotStyles.length; i++) {
-      const clone = snapshotStyles[i].cloneNode(true);
-      clone.setAttribute("data-lr-snapshot-style", "");
-      document.head.appendChild(clone);
+      const source = snapshotStyles[i];
+      if (source.tagName.toLowerCase() === "link") {
+        const href = source.getAttribute("href") ?? "";
+        let sameOrigin = false;
+        try {
+          sameOrigin = new URL(href, window.location.href).origin === window.location.origin;
+        } catch {
+        }
+        if (!sameOrigin) continue;
+        const clone = source.cloneNode(true);
+        clone.setAttribute("data-lr-snapshot-style", "");
+        document.head.appendChild(clone);
+      } else {
+        const style = document.createElement("style");
+        style.textContent = sanitizeStyleSheetText(
+          source.textContent ?? "",
+          window.location.href
+        );
+        style.setAttribute("data-lr-snapshot-style", "");
+        document.head.appendChild(style);
+      }
     }
     if (snapshot.title) {
       document.title = `[Snapshot] ${snapshot.title}`;
@@ -2864,7 +3216,7 @@ var LionRapidEditor = (() => {
     const poll = setInterval(() => {
       attempts++;
       const lr = window.LionRapid;
-      if (lr) {
+      if (lr && typeof lr.getCurrentLocale === "function") {
         clearInterval(poll);
         activate(lr, grant, locale, apiBase, projectId);
       } else if (attempts >= maxAttempts) {