@lionrapid/core 0.1.2 → 0.1.4-beta.0

package/dist/browser/lionrapid.editor.js

@@ -153,6 +153,87 @@ var LionRapidEditor = (() => {
   background: rgba(255,255,255,0.1);
 }
 
+.lr-fab-snapshot {
+  background: #2d7f7f;
+  border: 1px solid #2d7f7f;
+  color: #fff;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.lr-fab-snapshot:hover {
+  background: #3a9999;
+  border-color: #3a9999;
+}
+
+.lr-fab-snapshot:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Workflow action buttons (Phase 3) */
+.lr-workflow-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 12px 0 4px;
+  padding: 8px 0 0;
+  border-top: 1px solid #e5e7eb;
+}
+
+.lr-wf-btn {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.lr-wf-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.lr-wf-primary {
+  background: #2563eb;
+  color: white;
+  border-color: #2563eb;
+}
+.lr-wf-primary:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.lr-wf-secondary {
+  background: white;
+  color: #374151;
+  border-color: #d1d5db;
+}
+.lr-wf-secondary:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+
+.lr-wf-danger {
+  background: white;
+  color: #b91c1c;
+  border-color: #fca5a5;
+}
+.lr-wf-danger:hover:not(:disabled) {
+  background: #fef2f2;
+}
+
+/* Snapshot viewer sandbox wrapper */
+#__lr_snapshot_root {
+  isolation: isolate;
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+}
+
 /* \u2500\u2500 Overlay \u2500\u2500 */
 .lr-overlay {
   position: fixed;
@@ -733,13 +814,19 @@ var LionRapidEditor = (() => {
   var SKIP_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "CODE", "PRE", "TEXTAREA", "NOSCRIPT", "SVG"]);
   var BLOCK_SELECTOR2 = "p,h1,h2,h3,h4,h5,h6,li,td,th,label,button,figcaption,dt,dd,summary,caption";
   var Inspector = class {
-    constructor(shadowRoot, onSelect) {
+    constructor(shadowRoot, onSelect, rootElement, snapshotKeyMap) {
       __publicField(this, "overlay");
       __publicField(this, "currentTarget", null);
       __publicField(this, "onSelect");
       __publicField(this, "rafId", null);
       __publicField(this, "active", true);
+      __publicField(this, "rootElement");
+      /** When set, clicks resolve keys from this map (snapshot viewer mode)
+       *  instead of re-computing from the (redacted) DOM text. */
+      __publicField(this, "snapshotKeyMap");
       this.onSelect = onSelect;
+      this.rootElement = rootElement || document.body;
+      this.snapshotKeyMap = snapshotKeyMap || null;
       this.overlay = document.createElement("div");
       this.overlay.className = "lr-overlay";
       shadowRoot.appendChild(this.overlay);
@@ -769,6 +856,7 @@ var LionRapidEditor = (() => {
       const target = e.target;
       if (!target || !target.closest) return;
       if (target.closest("#__lionrapid-editor")) return;
+      if (!this.rootElement.contains(target)) return;
       if (this.shouldSkip(target)) {
         this.clearHighlight();
         return;
@@ -787,11 +875,25 @@ var LionRapidEditor = (() => {
       const target = e.target;
       if (!target || !target.closest) return;
       if (target.closest("#__lionrapid-editor")) return;
+      if (!this.rootElement.contains(target)) return;
       const block = target.closest(BLOCK_SELECTOR2) || target.closest("[data-lr-block]");
       if (!block) return;
       if (this.shouldSkip(block)) return;
       e.preventDefault();
       e.stopPropagation();
+      if (this.snapshotKeyMap) {
+        const idxAttr = block.getAttribute("data-lr-snap-idx");
+        if (idxAttr !== null) {
+          const idx = parseInt(idxAttr, 10);
+          const key = this.snapshotKeyMap.get(idx);
+          if (key) {
+            const unit = parseBlockElement(block);
+            this.onSelect({ key, unit, translatedUnit: null, element: block });
+            return;
+          }
+        }
+        return;
+      }
       const resolved = resolveKey(block);
       if (resolved) {
         this.onSelect(resolved);
@@ -828,7 +930,7 @@ var LionRapidEditor = (() => {
 
   // src/browser/editor/toolbar.ts
   var Toolbar = class {
-    constructor(shadowRoot, languages, currentLocale, onLanguageChange, onExit) {
+    constructor(shadowRoot, languages, currentLocale, onLanguageChange, onExit, onCaptureSnapshot = null, captureOptions = {}) {
       __publicField(this, "el");
       __publicField(this, "langBtnEl");
       __publicField(this, "langMenuEl");
@@ -837,13 +939,16 @@ var LionRapidEditor = (() => {
       __publicField(this, "currentLocale");
       __publicField(this, "onLanguageChange");
       __publicField(this, "onExit");
+      __publicField(this, "onCaptureSnapshot");
       // Drag state
       __publicField(this, "dragging", false);
       __publicField(this, "dragOffsetX", 0);
       __publicField(this, "dragOffsetY", 0);
       this.onLanguageChange = onLanguageChange;
       this.onExit = onExit;
+      this.onCaptureSnapshot = onCaptureSnapshot;
       this.currentLocale = currentLocale;
+      const captureMode = captureOptions.mode ?? "capture";
       this.el = document.createElement("div");
       this.el.className = "lr-fab";
       const fabBtn = document.createElement("button");
@@ -887,6 +992,22 @@ var LionRapidEditor = (() => {
       }
       langWrap.appendChild(this.langMenuEl);
       panel.appendChild(langWrap);
+      if (this.onCaptureSnapshot) {
+        const captureBtn = document.createElement("button");
+        captureBtn.className = "lr-fab-snapshot";
+        if (captureMode === "recapture") {
+          captureBtn.textContent = "Save re-capture";
+          captureBtn.title = "Save this page as a new version of the existing snapshot";
+        } else {
+          captureBtn.textContent = "Capture";
+          captureBtn.title = "Capture a redacted snapshot of this page for translators";
+        }
+        captureBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          if (this.onCaptureSnapshot) this.onCaptureSnapshot();
+        });
+        panel.appendChild(captureBtn);
+      }
       this.progressEl = document.createElement("span");
       this.progressEl.className = "lr-fab-progress";
       panel.appendChild(this.progressEl);
@@ -1205,7 +1326,7 @@ var LionRapidEditor = (() => {
   // src/browser/editor/sidebar.ts
   var htmlSerializer2 = new HTMLSerializer();
   var Sidebar = class {
-    constructor(shadowRoot, api, locale, namespace, defaultLocale, onBlockClick) {
+    constructor(shadowRoot, api, locale, namespace, defaultLocale, onBlockClick, userRole = "") {
       __publicField(this, "el");
       __publicField(this, "bodyEl");
       __publicField(this, "statusEl");
@@ -1221,11 +1342,13 @@ var LionRapidEditor = (() => {
       __publicField(this, "onProgressUpdate", null);
       __publicField(this, "lastFetchTime", 0);
       __publicField(this, "lastFlushTime", 0);
+      __publicField(this, "userRole");
       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";
@@ -1379,6 +1502,9 @@ var LionRapidEditor = (() => {
         }
         return previewEl;
       });
+      if (!isSourceLocale) {
+        this.renderWorkflowActions(key, status);
+      }
       if (!isLocked) {
         textarea.addEventListener("input", () => {
           const text = textarea.value;
@@ -1401,6 +1527,69 @@ var LionRapidEditor = (() => {
         setTimeout(() => textarea.focus(), 100);
       }
     }
+    /**
+     * 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.
+     */
+    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 composite = `${this.locale}:${this.namespace}:${key}`;
+      const wrap = document.createElement("div");
+      wrap.className = "lr-workflow-actions";
+      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 (!isLocked && !isReady) {
+        addBtn("Confirm", "confirm", "primary");
+        addBtn("Reject", "reject", "danger");
+      }
+      if (isConfirmed && !isLocked && !isReady) {
+        addBtn("Unconfirm", "unconfirm");
+      }
+      if (isPM) {
+        if (!isReady) {
+          addBtn("Mark Ready", "mark-ready", "primary");
+        } else {
+          addBtn("Unmark Ready", "unmark-ready", "danger");
+        }
+      }
+      if (wrap.children.length > 0) {
+        this.bodyEl.appendChild(wrap);
+      }
+    }
+    /** 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();
+    }
     addField(label, contentFn) {
       const field = document.createElement("div");
       field.className = "lr-field";
@@ -1723,8 +1912,440 @@ var LionRapidEditor = (() => {
         this.onSessionExpired();
       }
     }
+    // ============================================
+    // Snapshot API
+    // ============================================
+    /**
+     * Upload a captured snapshot. Returns the created snapshot's UUID so the
+     * caller can build a share URL (`?__lr_snapshot={uuid}`).
+     */
+    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;
+      }
+    }
+    /**
+     * 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;
+      }
+    }
+    /**
+     * 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;
+      }
+    }
+    /**
+     * 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 [];
+      }
+    }
+    /**
+     * 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;
+      }
+    }
+    /**
+     * 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 fetch(
+          `${this.apiBase}/api/integrations/targets/${encodeURIComponent(composite)}/${action}`,
+          {
+            method: "POST",
+            headers: { "Authorization": `Bearer ${this.sessionToken}` }
+          }
+        );
+        if (response.status === 401) {
+          this.handleSessionExpired();
+          return null;
+        }
+        if (!response.ok) {
+          this.onStatus("error", `${action} failed: HTTP ${response.status}`);
+          return null;
+        }
+        return await response.json();
+      } catch (err) {
+        this.onStatus("error", `${action} failed: ${err.message}`);
+        return null;
+      }
+    }
   };
 
+  // src/browser/editor/pii-redactor.ts
+  var REDACTED = "[REDACTED]";
+  var EMAIL_RE = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}/gi;
+  var PHONE_RE = /(?:\+\d{1,3}[\s.-]?)?(?:\(\d{3}\)|\d{3})[\s.-]\d{3}[\s.-]\d{4}/g;
+  var SSN_RE = /\b\d{3}[\s-]\d{2}[\s-]\d{4}\b/g;
+  var IPV4_RE = /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/g;
+  var URL_RE = /\b(?:https?:\/\/|www\.)[^\s<>"']+/gi;
+  var CC_CANDIDATE_RE = /\b\d(?:[ -]?\d){12,18}\b/g;
+  function luhnValid(digits) {
+    if (digits.length < 13 || digits.length > 19) return false;
+    let sum = 0;
+    let alt = false;
+    for (let i = digits.length - 1; i >= 0; i--) {
+      let n = digits.charCodeAt(i) - 48;
+      if (n < 0 || n > 9) return false;
+      if (alt) {
+        n *= 2;
+        if (n > 9) n -= 9;
+      }
+      sum += n;
+      alt = !alt;
+    }
+    return sum % 10 === 0;
+  }
+  function ipv4Valid(match) {
+    const parts = match.split(".");
+    if (parts.length !== 4) return false;
+    for (const p of parts) {
+      const n = Number(p);
+      if (!Number.isInteger(n) || n < 0 || n > 255) return false;
+    }
+    return true;
+  }
+  function redactString(text) {
+    if (!text) return text;
+    let out = text;
+    out = out.replace(URL_RE, REDACTED);
+    out = out.replace(EMAIL_RE, REDACTED);
+    out = out.replace(PHONE_RE, REDACTED);
+    out = out.replace(SSN_RE, REDACTED);
+    out = out.replace(IPV4_RE, (m) => ipv4Valid(m) ? REDACTED : m);
+    out = out.replace(CC_CANDIDATE_RE, (m) => {
+      const digits = m.replace(/[\s-]/g, "");
+      return luhnValid(digits) ? REDACTED : m;
+    });
+    return out;
+  }
+  var SKIP_TAGS3 = /* @__PURE__ */ new Set(["CODE", "PRE", "STYLE", "TEXTAREA"]);
+  function redactTextNodes(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const toUpdate = [];
+    let node = walker.nextNode();
+    while (node) {
+      if (!isInSkippedSubtree(node)) {
+        const original = node.nodeValue || "";
+        const replaced = redactString(original);
+        if (replaced !== original) {
+          toUpdate.push({ node, value: replaced });
+        }
+      }
+      node = walker.nextNode();
+    }
+    for (const { node: textNode, value } of toUpdate) {
+      textNode.nodeValue = value;
+    }
+  }
+  function isInSkippedSubtree(node) {
+    let cur = node.parentNode;
+    while (cur && cur.nodeType === Node.ELEMENT_NODE) {
+      const el = cur;
+      if (SKIP_TAGS3.has(el.tagName)) return true;
+      if (el.hasAttribute("data-no-redact")) return true;
+      cur = el.parentNode;
+    }
+    return false;
+  }
+
+  // src/browser/editor/snapshot-capture.ts
+  var REDACTED2 = "[REDACTED]";
+  function captureSnapshot() {
+    const clone = document.documentElement.cloneNode(true);
+    const textEntries = extractTextEntries(clone);
+    removeDangerousElements(clone);
+    clearFormValues(clone);
+    redactSensitiveElements(clone);
+    stripInlineEventHandlers(clone);
+    redactTextNodePII(clone);
+    stripSensitiveMetaAndHeaders(clone);
+    const html = "<!DOCTYPE html>\n" + clone.outerHTML;
+    return {
+      html,
+      textEntries,
+      pageUrl: window.location.href,
+      title: document.title,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        devicePixelRatio: window.devicePixelRatio || 1
+      }
+    };
+  }
+  function removeDangerousElements(root) {
+    const selectors = [
+      "script",
+      "noscript",
+      "iframe",
+      "embed",
+      "object",
+      "#__lionrapid-editor",
+      'link[rel="prefetch"]',
+      'link[rel="preload"]',
+      'link[rel="modulepreload"]'
+    ];
+    for (const selector of selectors) {
+      const matches = root.querySelectorAll(selector);
+      for (let i = 0; i < matches.length; i++) {
+        matches[i].remove();
+      }
+    }
+  }
+  function clearFormValues(root) {
+    const inputs = root.querySelectorAll("input, textarea, select");
+    for (let i = 0; i < inputs.length; i++) {
+      const el = inputs[i];
+      if ("value" in el) el.value = "";
+      if (el.hasAttribute("value")) el.setAttribute("value", "");
+      if (el.tagName === "TEXTAREA") el.textContent = "";
+      if (el.tagName === "SELECT") {
+        const options = el.querySelectorAll("option");
+        for (let j = 0; j < options.length; j++) {
+          options[j].selected = false;
+          options[j].removeAttribute("selected");
+        }
+      }
+      const attrs = Array.from(el.attributes);
+      for (const attr of attrs) {
+        if (attr.name.startsWith("data-value") || attr.name === "data-initial") {
+          el.removeAttribute(attr.name);
+        }
+      }
+    }
+  }
+  function redactSensitiveElements(root) {
+    const sensitive = root.querySelectorAll("[data-pii], [data-sensitive]");
+    for (let i = 0; i < sensitive.length; i++) {
+      const el = sensitive[i];
+      el.textContent = REDACTED2;
+      const attrs = Array.from(el.attributes);
+      for (const attr of attrs) {
+        if (attr.name !== "class" && attr.name !== "id" && attr.name !== "style") {
+          el.removeAttribute(attr.name);
+        }
+      }
+    }
+  }
+  function stripInlineEventHandlers(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    let node = walker.nextNode();
+    while (node) {
+      const attrs = Array.from(node.attributes);
+      for (const attr of attrs) {
+        if (attr.name.toLowerCase().startsWith("on")) {
+          node.removeAttribute(attr.name);
+        }
+      }
+      node = walker.nextNode();
+    }
+  }
+  function redactTextNodePII(root) {
+    redactTextNodes(root);
+  }
+  function stripSensitiveMetaAndHeaders(root) {
+    const sensitiveMetas = root.querySelectorAll(
+      'meta[name="csrf-token"], meta[name="csp-nonce"], meta[name="csrf-param"], meta[http-equiv="set-cookie"]'
+    );
+    for (let i = 0; i < sensitiveMetas.length; i++) {
+      sensitiveMetas[i].remove();
+    }
+    const TOKEN_PARAMS = ["token", "auth", "access_token", "session", "sid", "key", "api_key", "apikey"];
+    const urlElements = root.querySelectorAll("link[href], a[href], img[src]");
+    for (let i = 0; i < urlElements.length; i++) {
+      const el = urlElements[i];
+      const attr = el.tagName === "IMG" ? "src" : "href";
+      const raw = el.getAttribute(attr);
+      if (!raw) continue;
+      try {
+        const url = new URL(raw, window.location.href);
+        let changed = false;
+        for (const param of TOKEN_PARAMS) {
+          if (url.searchParams.has(param)) {
+            url.searchParams.set(param, REDACTED2);
+            changed = true;
+          }
+        }
+        if (changed) el.setAttribute(attr, url.toString());
+      } catch {
+      }
+    }
+  }
+  function extractTextEntries(clone) {
+    const extractor = new BlockExtractor(
+      { emails: true, urls: true, numbers: true, phones: true },
+      [],
+      2
+    );
+    const blocks = extractor.extract(clone);
+    return blocks.map((block, index) => {
+      block.element.setAttribute("data-lr-snap-idx", String(index));
+      return {
+        key: block.key,
+        tagName: block.element.tagName,
+        blockIndex: index
+      };
+    });
+  }
+
+  // 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");
+    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);
+    }
+    if (snapshot.title) {
+      document.title = `[Snapshot] ${snapshot.title}`;
+    }
+    const editorHost = document.getElementById("__lionrapid-editor");
+    while (document.body.firstChild) {
+      if (document.body.firstChild === editorHost) {
+        const next = document.body.firstChild.nextSibling;
+        if (!next) break;
+        document.body.removeChild(next);
+      } else {
+        document.body.removeChild(document.body.firstChild);
+      }
+    }
+    const root = document.createElement("div");
+    root.id = "__lr_snapshot_root";
+    root.setAttribute("data-lr-snapshot-uuid", snapshotUuid);
+    root.innerHTML = doc.body.innerHTML;
+    if (editorHost && editorHost.parentNode === document.body) {
+      document.body.insertBefore(root, editorHost);
+    } else {
+      document.body.appendChild(root);
+    }
+    const keyMap = /* @__PURE__ */ new Map();
+    const entries = snapshot.textEntries || [];
+    for (const entry of entries) {
+      keyMap.set(entry.blockIndex, entry.key);
+    }
+    return {
+      root,
+      pageUrl: snapshot.pageUrl,
+      title: snapshot.title,
+      keyMap
+    };
+  }
+
   // src/browser/editor/editor-init.ts
   var SESSION_KEY = "__lr_editor_session";
   function getStoredSession() {
@@ -1755,6 +2376,17 @@ var LionRapidEditor = (() => {
   function clearSession() {
     sessionStorage.removeItem(SESSION_KEY);
   }
+  function extractSessionRole(token) {
+    try {
+      const raw = token.startsWith("es_") ? token.slice(3) : token;
+      const parts = raw.split(".");
+      if (parts.length !== 3) return "";
+      const payload = JSON.parse(atob(parts[1]));
+      return typeof payload.role === "string" ? payload.role : "";
+    } catch {
+      return "";
+    }
+  }
   function showEditorNotice(message) {
     const el = document.createElement("div");
     el.setAttribute("data-no-translate", "");
@@ -1791,12 +2423,15 @@ var LionRapidEditor = (() => {
     setTimeout(() => el.remove(), 8e3);
   }
   function initEditor() {
-    const scriptEl = document.querySelector("script[data-grant]");
+    const scriptEl = document.querySelector("script[data-grant]") || document.querySelector("script[data-lr-editor]");
     if (!scriptEl) {
-      console.warn("[LionRapid Editor] No script tag with data-grant found");
       return;
     }
     const grant = scriptEl.dataset.grant || "";
+    const hasValidSession = getStoredSession() !== null;
+    if (!grant && !hasValidSession) {
+      return;
+    }
     const locale = scriptEl.dataset.locale || "";
     const apiBase = scriptEl.dataset.api || "https://api.lionrapid.com";
     const projectId = scriptEl.dataset.project || "";
@@ -1850,6 +2485,8 @@ var LionRapidEditor = (() => {
       showEditorNotice("Editor session expired. Please reopen the editor from the dashboard.");
       return;
     }
+    const role = extractSessionRole(sessionToken);
+    const canCaptureSnapshots = role === "project_manager" || role === "admin";
     const host = document.createElement("div");
     host.id = "__lionrapid-editor";
     host.setAttribute("data-no-translate", "");
@@ -1862,12 +2499,26 @@ var LionRapidEditor = (() => {
     if (switcherEl) switcherEl.style.display = "none";
     const api = new EditorAPI(normalizedApiBase, sessionToken, projectId);
     api.startAutoFlush();
+    const currentUrl = new URL(window.location.href);
+    const snapshotUuid = currentUrl.searchParams.get("__lr_snapshot");
+    const recaptureUuid = currentUrl.searchParams.get("__lr_recapture");
+    let inspectorRoot;
+    let snapshotKeyMap;
+    if (snapshotUuid) {
+      const result = await activateSnapshotViewer(snapshotUuid, api);
+      if (!result) {
+        showEditorNotice("Snapshot not found or expired. Please check the dashboard.");
+        return;
+      }
+      inspectorRoot = result.root;
+      snapshotKeyMap = result.keyMap;
+    }
     const handleBlockSelect = (resolved) => {
       sidebar.open(resolved);
       inspector.clearHighlight();
     };
-    const sidebar = new Sidebar(shadow, api, currentLocale, namespace, defaultLocale, handleBlockSelect);
-    const inspector = new Inspector(shadow, handleBlockSelect);
+    const sidebar = new Sidebar(shadow, api, currentLocale, namespace, defaultLocale, handleBlockSelect, role);
+    const inspector = new Inspector(shadow, handleBlockSelect, inspectorRoot, snapshotKeyMap);
     const toolbar = new Toolbar(
       shadow,
       languages,
@@ -1898,7 +2549,43 @@ var LionRapidEditor = (() => {
         sidebar.destroy();
         host.remove();
         clearSession();
-      }
+      },
+      // Capture Snapshot — only available in live-page mode (not viewer) AND
+      // only for PM/admin roles. Translators and proofreaders cannot capture;
+      // the server enforces the same check on POST /api/editor/snapshots.
+      //
+      // If ?__lr_recapture={uuid} is present, the same button re-captures that
+      // existing snapshot (PUT) instead of creating a new one (POST).
+      snapshotUuid || !canCaptureSnapshots ? null : async () => {
+        try {
+          const snapshot = captureSnapshot();
+          if (recaptureUuid) {
+            const result = await api.recaptureSnapshot(recaptureUuid, snapshot);
+            if (result) {
+              showEditorNotice(
+                `Re-captured as v${result.version} (${snapshot.textEntries.length} blocks). You can close this tab.`
+              );
+            } else {
+              showEditorNotice("Re-capture failed. Please try again.");
+            }
+          } else {
+            const result = await api.createSnapshot(snapshot);
+            if (result) {
+              showEditorNotice(
+                `Snapshot captured (${snapshot.textEntries.length} blocks). Open it from the Snapshots tab in the dashboard.`
+              );
+            } else {
+              showEditorNotice("Snapshot upload failed. Please try again.");
+            }
+          }
+        } catch (err) {
+          console.error("[LionRapid Editor] Snapshot capture error:", err);
+          showEditorNotice("Snapshot capture failed. See console for details.");
+        }
+      },
+      // When in recapture mode, surface it to the toolbar so the button label
+      // can change from "Capture" to "Save re-capture".
+      recaptureUuid ? { mode: "recapture" } : void 0
     );
     sidebar.setProgressCallback((translated, total) => {
       toolbar.updateProgress(translated, total);
@@ -1907,8 +2594,20 @@ var LionRapidEditor = (() => {
       toolbar.updateProgress(sidebar.getTranslatedCount(), sidebar.getTotalCount());
     });
     const url = new URL(window.location.href);
+    let dirty = false;
     if (url.searchParams.has("__lr_editor")) {
       url.searchParams.delete("__lr_editor");
+      dirty = true;
+    }
+    if (url.searchParams.has("__lr_snapshot")) {
+      url.searchParams.delete("__lr_snapshot");
+      dirty = true;
+    }
+    if (url.searchParams.has("__lr_recapture")) {
+      url.searchParams.delete("__lr_recapture");
+      dirty = true;
+    }
+    if (dirty) {
       history.replaceState(null, "", url.toString());
     }
   }