@lionrapid/core 0.1.0

package/dist/browser/lionrapid.editor.js

@@ -0,0 +1,1869 @@
+"use strict";
+var LionRapidEditor = (() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/browser/editor/editor-styles.ts
+  var EDITOR_CSS = `
+/* Reset inside shadow DOM */
+:host {
+  all: initial;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  color: #1a1a2e;
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* \u2500\u2500 FAB (replaces fixed toolbar) \u2500\u2500 */
+.lr-fab {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  user-select: none;
+}
+
+.lr-fab-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #2d7f7f;
+  color: #fff;
+  border: none;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: grab;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+  transition: box-shadow 0.15s;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.lr-fab-btn:hover {
+  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
+.lr-fab-btn:active {
+  cursor: grabbing;
+}
+
+.lr-fab-panel {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: #1a1a2e;
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: 8px;
+  margin-right: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+  white-space: nowrap;
+}
+
+.lr-fab.expanded .lr-fab-panel {
+  display: flex;
+}
+
+.lr-lang-dropdown {
+  position: relative;
+}
+
+.lr-lang-btn {
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+}
+
+.lr-lang-btn:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+.lr-lang-menu {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  background: #1a1a2e;
+  border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 6px;
+  padding: 4px;
+  min-width: 60px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+}
+
+.lr-lang-menu.open {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lr-lang-item {
+  background: none;
+  color: #ccc;
+  border: none;
+  padding: 6px 10px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: left;
+}
+
+.lr-lang-item:hover {
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+}
+
+.lr-lang-item.active {
+  background: #2d7f7f;
+  color: #fff;
+}
+
+.lr-fab-progress {
+  font-size: 13px;
+  color: rgba(255,255,255,0.7);
+}
+
+.lr-fab-exit {
+  background: none;
+  border: 1px solid rgba(255,255,255,0.3);
+  color: #fff;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.lr-fab-exit:hover {
+  background: rgba(255,255,255,0.1);
+}
+
+/* \u2500\u2500 Overlay \u2500\u2500 */
+.lr-overlay {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid #2d7f7f;
+  border-radius: 3px;
+  background: rgba(45, 127, 127, 0.06);
+  transition: all 0.1s ease;
+  z-index: 2147483646;
+  display: none;
+}
+
+.lr-overlay.active {
+  display: block;
+}
+
+/* \u2500\u2500 Sidebar \u2500\u2500 */
+.lr-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 360px;
+  min-width: 280px;
+  max-width: 600px;
+  bottom: 0;
+  background: #fff;
+  border-left: 1px solid #e0e0e0;
+  z-index: 2147483647;
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform 0.2s ease;
+}
+
+.lr-sidebar.open {
+  transform: translateX(0);
+}
+
+/* Resize handle on left edge */
+.lr-sidebar-resize {
+  position: absolute;
+  top: 0;
+  left: -4px;
+  width: 8px;
+  bottom: 0;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.lr-sidebar-resize:hover,
+.lr-sidebar-resize.active {
+  background: rgba(45, 127, 127, 0.3);
+}
+
+.lr-sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.lr-sidebar-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.lr-sidebar-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #666;
+  padding: 4px 8px;
+  line-height: 1;
+}
+
+.lr-sidebar-close:hover {
+  color: #1a1a2e;
+}
+
+.lr-sidebar-body {
+  padding: 16px;
+}
+
+.lr-field {
+  margin-bottom: 16px;
+}
+
+.lr-field-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.lr-field-key {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 12px;
+  color: #2d7f7f;
+  background: #f0f7f7;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+
+.lr-field-original {
+  font-size: 13px;
+  color: #333;
+  background: #f8f8f8;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid #eee;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.lr-field-tag {
+  display: inline;
+  background: #d9eded;
+  color: #2d7f7f;
+  padding: 0 3px;
+  border-radius: 2px;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.lr-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.lr-textarea:focus {
+  border-color: #2d7f7f;
+  box-shadow: 0 0 0 3px rgba(45, 127, 127, 0.1);
+}
+
+.lr-preview {
+  padding: 10px 12px;
+  background: #f8f8f8;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  font-size: 13px;
+  min-height: 40px;
+}
+
+.lr-status {
+  padding: 10px 16px;
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  border-top: 1px solid #eee;
+  background: #fafafa;
+}
+
+.lr-status.saved {
+  color: #22c55e;
+}
+
+.lr-status.error {
+  color: #ef4444;
+}
+
+.lr-status.unsaved {
+  color: #f59e0b;
+}
+
+/* \u2500\u2500 Page blocks list \u2500\u2500 */
+.lr-blocks-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #eee;
+}
+
+.lr-blocks-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.lr-block-item {
+  padding: 8px 10px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #333;
+  overflow: hidden;
+  transition: background 0.1s;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.lr-block-item:hover {
+  background: #f0f7f7;
+  border-color: #2d7f7f;
+}
+
+.lr-block-item.active {
+  background: #e5f2f2;
+  border-color: #2d7f7f;
+}
+
+/* \u2500\u2500 Status dots \u2500\u2500 */
+.lr-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 5px;
+  background: #d1d5db;
+}
+
+.lr-status-dot.missing { background: #d1d5db; }
+.lr-status-dot.mt { background: #60a5fa; }
+.lr-status-dot.edited { background: #f97316; }
+.lr-status-dot.confirmed { background: #22c55e; }
+.lr-status-dot.ready { background: #22c55e; }
+.lr-status-dot.locked { background: #a855f7; }
+.lr-status-dot.unsaved { background: #f59e0b; }
+
+/* \u2500\u2500 Locked textarea \u2500\u2500 */
+.lr-textarea-locked {
+  background: #f3f4f6;
+  color: #6b7280;
+  cursor: not-allowed;
+  border-color: #e5e7eb;
+}
+
+/* \u2500\u2500 Block text layout \u2500\u2500 */
+.lr-block-text {
+  overflow: hidden;
+  min-width: 0;
+}
+
+.lr-block-source {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lr-block-preview {
+  font-size: 11px;
+  color: #888;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 2px;
+}
+`;
+
+  // src/content/style-mapper/DefaultStyleMapper.ts
+  var DefaultStyleMapper = class {
+    constructor() {
+      /**
+       * Element → Style mapping
+       * Maps HTML element names to their style property
+       */
+      __publicField(this, "elementToStyles", {
+        b: "bold",
+        strong: "bold",
+        i: "italic",
+        em: "italic",
+        u: "underline",
+        s: "strikethrough",
+        del: "strikethrough",
+        strike: "strikethrough",
+        code: "code",
+        mark: "highlight",
+        sub: "subscript",
+        sup: "superscript"
+      });
+      /**
+       * Style → Element mapping (reverse)
+       * Uses simple, familiar elements for developer convenience
+       * Also accepts element names directly (strong, em, etc.)
+       */
+      __publicField(this, "styleToElement", {
+        // Semantic style names → simple elements
+        bold: "b",
+        italic: "i",
+        underline: "u",
+        strikethrough: "s",
+        code: "code",
+        highlight: "mark",
+        subscript: "sub",
+        superscript: "sup",
+        // Element names (for servers that store styles as element names)
+        strong: "b",
+        b: "b",
+        em: "i",
+        i: "i",
+        u: "u",
+        s: "s",
+        del: "s",
+        strike: "s",
+        mark: "mark",
+        sub: "sub",
+        sup: "sup"
+      });
+    }
+    /**
+     * Convert HTML element to style properties
+     *
+     * @param element - Tag name (e.g., "b", "a", "strong")
+     * @param attrs - Element attributes (e.g., { href: "/url" })
+     * @returns Array of style strings
+     */
+    mapElementToStyles(element, attrs) {
+      const styles = [];
+      const tag = element.toLowerCase();
+      const mappedStyle = this.elementToStyles[tag];
+      if (mappedStyle) {
+        styles.push(mappedStyle);
+      }
+      if (tag === "a" && attrs.href) {
+        styles.push(`hyperlink:${attrs.href}`);
+      }
+      return styles;
+    }
+    /**
+     * Convert style properties to HTML element
+     *
+     * Priority order:
+     * 1. Hyperlink (becomes wrapper element with href)
+     * 2. First recognized style property
+     * 3. Fallback to span
+     *
+     * @param styles - Array of style strings
+     * @returns Element info for serialization
+     */
+    mapStylesToElement(styles) {
+      for (const style of styles) {
+        if (style.startsWith("hyperlink:")) {
+          return {
+            element: "a",
+            attrs: { href: style.slice("hyperlink:".length) }
+          };
+        }
+      }
+      for (const style of styles) {
+        const element = this.styleToElement[style];
+        if (element) {
+          return {
+            element,
+            attrs: {}
+          };
+        }
+      }
+      return { element: "span", attrs: {} };
+    }
+  };
+
+  // src/browser/markup-parser.ts
+  var styleMapper = new DefaultStyleMapper();
+  function parseBlockElement(element) {
+    const styles = {};
+    let tagIndex = 0;
+    function walk(node) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.nodeValue ?? "";
+      }
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return "";
+      }
+      const el = node;
+      const tag = el.tagName.toLowerCase();
+      const attrs = {};
+      for (let i = 0; i < el.attributes.length; i++) {
+        const attr = el.attributes[i];
+        attrs[attr.name.toLowerCase()] = attr.value;
+      }
+      const styleList = styleMapper.mapElementToStyles(tag, attrs);
+      if (styleList.length > 0) {
+        tagIndex++;
+        const idx = tagIndex;
+        styles[String(idx)] = styleList;
+        let inner = "";
+        for (let i = 0; i < node.childNodes.length; i++) {
+          inner += walk(node.childNodes[i]);
+        }
+        return `<${idx}>${inner}</${idx}>`;
+      }
+      let result = "";
+      for (let i = 0; i < node.childNodes.length; i++) {
+        result += walk(node.childNodes[i]);
+      }
+      return result;
+    }
+    let text = "";
+    for (let i = 0; i < element.childNodes.length; i++) {
+      text += walk(element.childNodes[i]);
+    }
+    return { text, styles };
+  }
+
+  // src/browser/md5.ts
+  function safeAdd(x, y) {
+    const lsw = (x & 65535) + (y & 65535);
+    const msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+    return msw << 16 | lsw & 65535;
+  }
+  function bitRotateLeft(num, cnt) {
+    return num << cnt | num >>> 32 - cnt;
+  }
+  function md5cmn(q, a, b, x, s, t) {
+    return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b);
+  }
+  function md5ff(a, b, c, d, x, s, t) {
+    return md5cmn(b & c | ~b & d, a, b, x, s, t);
+  }
+  function md5gg(a, b, c, d, x, s, t) {
+    return md5cmn(b & d | c & ~d, a, b, x, s, t);
+  }
+  function md5hh(a, b, c, d, x, s, t) {
+    return md5cmn(b ^ c ^ d, a, b, x, s, t);
+  }
+  function md5ii(a, b, c, d, x, s, t) {
+    return md5cmn(c ^ (b | ~d), a, b, x, s, t);
+  }
+  function binlMD5(x, len) {
+    x[len >> 5] |= 128 << len % 32;
+    x[(len + 64 >>> 9 << 4) + 14] = len;
+    let a = 1732584193;
+    let b = -271733879;
+    let c = -1732584194;
+    let d = 271733878;
+    for (let i = 0; i < x.length; i += 16) {
+      const olda = a;
+      const oldb = b;
+      const oldc = c;
+      const oldd = d;
+      a = md5ff(a, b, c, d, x[i], 7, -680876936);
+      d = md5ff(d, a, b, c, x[i + 1], 12, -389564586);
+      c = md5ff(c, d, a, b, x[i + 2], 17, 606105819);
+      b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330);
+      a = md5ff(a, b, c, d, x[i + 4], 7, -176418897);
+      d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426);
+      c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341);
+      b = md5ff(b, c, d, a, x[i + 7], 22, -45705983);
+      a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416);
+      d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417);
+      c = md5ff(c, d, a, b, x[i + 10], 17, -42063);
+      b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162);
+      a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682);
+      d = md5ff(d, a, b, c, x[i + 13], 12, -40341101);
+      c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290);
+      b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329);
+      a = md5gg(a, b, c, d, x[i + 1], 5, -165796510);
+      d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632);
+      c = md5gg(c, d, a, b, x[i + 11], 14, 643717713);
+      b = md5gg(b, c, d, a, x[i], 20, -373897302);
+      a = md5gg(a, b, c, d, x[i + 5], 5, -701558691);
+      d = md5gg(d, a, b, c, x[i + 10], 9, 38016083);
+      c = md5gg(c, d, a, b, x[i + 15], 14, -660478335);
+      b = md5gg(b, c, d, a, x[i + 4], 20, -405537848);
+      a = md5gg(a, b, c, d, x[i + 9], 5, 568446438);
+      d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690);
+      c = md5gg(c, d, a, b, x[i + 3], 14, -187363961);
+      b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501);
+      a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467);
+      d = md5gg(d, a, b, c, x[i + 2], 9, -51403784);
+      c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473);
+      b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734);
+      a = md5hh(a, b, c, d, x[i + 5], 4, -378558);
+      d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463);
+      c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562);
+      b = md5hh(b, c, d, a, x[i + 14], 23, -35309556);
+      a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060);
+      d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353);
+      c = md5hh(c, d, a, b, x[i + 7], 16, -155497632);
+      b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640);
+      a = md5hh(a, b, c, d, x[i + 13], 4, 681279174);
+      d = md5hh(d, a, b, c, x[i + 0], 11, -358537222);
+      c = md5hh(c, d, a, b, x[i + 3], 16, -722521979);
+      b = md5hh(b, c, d, a, x[i + 6], 23, 76029189);
+      a = md5hh(a, b, c, d, x[i + 9], 4, -640364487);
+      d = md5hh(d, a, b, c, x[i + 12], 11, -421815835);
+      c = md5hh(c, d, a, b, x[i + 15], 16, 530742520);
+      b = md5hh(b, c, d, a, x[i + 2], 23, -995338651);
+      a = md5ii(a, b, c, d, x[i], 6, -198630844);
+      d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415);
+      c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905);
+      b = md5ii(b, c, d, a, x[i + 5], 21, -57434055);
+      a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571);
+      d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606);
+      c = md5ii(c, d, a, b, x[i + 10], 15, -1051523);
+      b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799);
+      a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359);
+      d = md5ii(d, a, b, c, x[i + 15], 10, -30611744);
+      c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380);
+      b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649);
+      a = md5ii(a, b, c, d, x[i + 4], 6, -145523070);
+      d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379);
+      c = md5ii(c, d, a, b, x[i + 2], 15, 718787259);
+      b = md5ii(b, c, d, a, x[i + 9], 21, -343485551);
+      a = safeAdd(a, olda);
+      b = safeAdd(b, oldb);
+      c = safeAdd(c, oldc);
+      d = safeAdd(d, oldd);
+    }
+    return [a, b, c, d];
+  }
+  function binl2hex(binarray) {
+    const hexTab = "0123456789abcdef";
+    let str = "";
+    for (let i = 0; i < binarray.length * 4; i++) {
+      str += hexTab.charAt(binarray[i >> 2] >> i % 4 * 8 + 4 & 15) + hexTab.charAt(binarray[i >> 2] >> i % 4 * 8 & 15);
+    }
+    return str;
+  }
+  function str2binl(str) {
+    const bin = [];
+    for (let i = 0; i < str.length * 8; i += 8) {
+      bin[i >> 5] |= (str.charCodeAt(i / 8) & 255) << i % 32;
+    }
+    return bin;
+  }
+  function md5(str) {
+    return binl2hex(binlMD5(str2binl(str), str.length * 8));
+  }
+  function generateAutoKey(text) {
+    const trimmed = text.trim();
+    return "auto_" + md5(trimmed).substring(0, 12);
+  }
+
+  // src/browser/editor/key-resolver.ts
+  var BLOCK_SELECTOR = "p,h1,h2,h3,h4,h5,h6,li,td,th,label,button,figcaption,dt,dd,summary,caption";
+  function resolveKey(target) {
+    const blockEl = target.closest("[data-lr-block]");
+    if (blockEl) {
+      const key = blockEl.getAttribute("data-lr-block");
+      const original = blockEl.getAttribute("data-lr-original");
+      let unit;
+      let translatedUnit = null;
+      if (original) {
+        const temp = document.createElement(blockEl.tagName);
+        temp.innerHTML = original;
+        unit = parseBlockElement(temp);
+        translatedUnit = parseBlockElement(blockEl);
+      } else {
+        unit = parseBlockElement(blockEl);
+      }
+      return { key, unit, translatedUnit, element: blockEl };
+    }
+    const nearest = target.closest(BLOCK_SELECTOR);
+    if (nearest) {
+      const unit = parseBlockElement(nearest);
+      const key = generateAutoKey(unit.text);
+      return { key, unit, translatedUnit: null, element: nearest };
+    }
+    const text = target.textContent?.trim();
+    if (text && text.length >= 2) {
+      const key = generateAutoKey(text);
+      const unit = { text, styles: {} };
+      return { key, unit, translatedUnit: null, element: target };
+    }
+    return null;
+  }
+
+  // src/browser/editor/inspector.ts
+  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) {
+      __publicField(this, "overlay");
+      __publicField(this, "currentTarget", null);
+      __publicField(this, "onSelect");
+      __publicField(this, "rafId", null);
+      __publicField(this, "active", true);
+      this.onSelect = onSelect;
+      this.overlay = document.createElement("div");
+      this.overlay.className = "lr-overlay";
+      shadowRoot.appendChild(this.overlay);
+      this.handleMouseOver = this.handleMouseOver.bind(this);
+      this.handleClick = this.handleClick.bind(this);
+      this.handleScroll = this.handleScroll.bind(this);
+      document.addEventListener("mouseover", this.handleMouseOver, true);
+      document.addEventListener("click", this.handleClick, true);
+      window.addEventListener("scroll", this.handleScroll, true);
+      window.addEventListener("resize", this.handleScroll);
+    }
+    destroy() {
+      this.active = false;
+      document.removeEventListener("mouseover", this.handleMouseOver, true);
+      document.removeEventListener("click", this.handleClick, true);
+      window.removeEventListener("scroll", this.handleScroll, true);
+      window.removeEventListener("resize", this.handleScroll);
+      if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+      this.overlay.remove();
+    }
+    clearHighlight() {
+      this.currentTarget = null;
+      this.overlay.classList.remove("active");
+    }
+    handleMouseOver(e) {
+      if (!this.active) return;
+      const target = e.target;
+      if (!target || !target.closest) return;
+      if (target.closest("#__lionrapid-editor")) return;
+      if (this.shouldSkip(target)) {
+        this.clearHighlight();
+        return;
+      }
+      const block = target.closest(BLOCK_SELECTOR2) || target.closest("[data-lr-block]");
+      if (!block) {
+        this.clearHighlight();
+        return;
+      }
+      if (block === this.currentTarget) return;
+      this.currentTarget = block;
+      this.positionOverlay(block);
+    }
+    handleClick(e) {
+      if (!this.active) return;
+      const target = e.target;
+      if (!target || !target.closest) return;
+      if (target.closest("#__lionrapid-editor")) return;
+      const block = target.closest(BLOCK_SELECTOR2) || target.closest("[data-lr-block]");
+      if (!block) return;
+      if (this.shouldSkip(block)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const resolved = resolveKey(block);
+      if (resolved) {
+        this.onSelect(resolved);
+      }
+    }
+    handleScroll() {
+      if (!this.currentTarget) return;
+      if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => {
+        if (this.currentTarget) {
+          this.positionOverlay(this.currentTarget);
+        }
+      });
+    }
+    positionOverlay(element) {
+      const rect = element.getBoundingClientRect();
+      this.overlay.style.top = `${rect.top}px`;
+      this.overlay.style.left = `${rect.left}px`;
+      this.overlay.style.width = `${rect.width}px`;
+      this.overlay.style.height = `${rect.height}px`;
+      this.overlay.classList.add("active");
+    }
+    shouldSkip(element) {
+      let current = element;
+      while (current) {
+        if (SKIP_TAGS.has(current.tagName)) return true;
+        if (current.hasAttribute("data-no-translate")) return true;
+        if (current.getAttribute("translate") === "no") return true;
+        current = current.parentElement;
+      }
+      return false;
+    }
+  };
+
+  // src/browser/editor/toolbar.ts
+  var Toolbar = class {
+    constructor(shadowRoot, languages, currentLocale, onLanguageChange, onExit) {
+      __publicField(this, "el");
+      __publicField(this, "langBtnEl");
+      __publicField(this, "langMenuEl");
+      __publicField(this, "progressEl");
+      __publicField(this, "expanded", false);
+      __publicField(this, "currentLocale");
+      __publicField(this, "onLanguageChange");
+      __publicField(this, "onExit");
+      // Drag state
+      __publicField(this, "dragging", false);
+      __publicField(this, "dragOffsetX", 0);
+      __publicField(this, "dragOffsetY", 0);
+      this.onLanguageChange = onLanguageChange;
+      this.onExit = onExit;
+      this.currentLocale = currentLocale;
+      this.el = document.createElement("div");
+      this.el.className = "lr-fab";
+      const fabBtn = document.createElement("button");
+      fabBtn.className = "lr-fab-btn";
+      fabBtn.textContent = "LR";
+      fabBtn.addEventListener("click", (e) => {
+        if (this.dragging) return;
+        e.stopPropagation();
+        this.toggle();
+      });
+      this.el.appendChild(fabBtn);
+      const panel = document.createElement("div");
+      panel.className = "lr-fab-panel";
+      const langWrap = document.createElement("div");
+      langWrap.className = "lr-lang-dropdown";
+      this.langBtnEl = document.createElement("button");
+      this.langBtnEl.className = "lr-lang-btn";
+      this.langBtnEl.textContent = currentLocale.toUpperCase();
+      this.langBtnEl.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.langMenuEl.classList.toggle("open");
+      });
+      langWrap.appendChild(this.langBtnEl);
+      this.langMenuEl = document.createElement("div");
+      this.langMenuEl.className = "lr-lang-menu";
+      for (const lang of languages) {
+        const item = document.createElement("button");
+        item.className = "lr-lang-item";
+        if (lang === currentLocale) item.classList.add("active");
+        item.textContent = lang.toUpperCase();
+        item.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.currentLocale = lang;
+          this.langBtnEl.textContent = lang.toUpperCase();
+          this.langMenuEl.classList.remove("open");
+          this.langMenuEl.querySelectorAll(".lr-lang-item").forEach((el) => el.classList.remove("active"));
+          item.classList.add("active");
+          this.onLanguageChange(lang);
+        });
+        this.langMenuEl.appendChild(item);
+      }
+      langWrap.appendChild(this.langMenuEl);
+      panel.appendChild(langWrap);
+      this.progressEl = document.createElement("span");
+      this.progressEl.className = "lr-fab-progress";
+      panel.appendChild(this.progressEl);
+      const exitBtn = document.createElement("button");
+      exitBtn.className = "lr-fab-exit";
+      exitBtn.textContent = "Exit";
+      exitBtn.addEventListener("click", () => this.onExit());
+      panel.appendChild(exitBtn);
+      this.el.appendChild(panel);
+      shadowRoot.appendChild(this.el);
+      this.handleMouseDown = this.handleMouseDown.bind(this);
+      this.handleMouseMove = this.handleMouseMove.bind(this);
+      this.handleMouseUp = this.handleMouseUp.bind(this);
+      fabBtn.addEventListener("mousedown", this.handleMouseDown);
+    }
+    toggle() {
+      this.expanded = !this.expanded;
+      this.el.classList.toggle("expanded", this.expanded);
+    }
+    updateProgress(translated, total) {
+      this.progressEl.textContent = `${translated}/${total}`;
+    }
+    getCurrentLocale() {
+      return this.currentLocale;
+    }
+    destroy() {
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      this.el.remove();
+    }
+    handleMouseDown(e) {
+      this.dragging = false;
+      this.dragOffsetX = e.clientX - this.el.getBoundingClientRect().left;
+      this.dragOffsetY = e.clientY - this.el.getBoundingClientRect().top;
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+    }
+    handleMouseMove(e) {
+      this.dragging = true;
+      const x = Math.max(0, Math.min(e.clientX - this.dragOffsetX, window.innerWidth - this.el.offsetWidth));
+      const y = Math.max(0, Math.min(e.clientY - this.dragOffsetY, window.innerHeight - this.el.offsetHeight));
+      this.el.style.left = `${x}px`;
+      this.el.style.top = `${y}px`;
+      this.el.style.right = "auto";
+      this.el.style.bottom = "auto";
+    }
+    handleMouseUp() {
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      if (this.dragging) {
+        setTimeout(() => {
+          this.dragging = false;
+        }, 0);
+      }
+    }
+  };
+
+  // src/content/serializer/HTMLSerializer.ts
+  var HTMLSerializer = class {
+    constructor(options = {}) {
+      __publicField(this, "styleMapper");
+      this.styleMapper = options.styleMapper ?? new DefaultStyleMapper();
+    }
+    /**
+     * Serialize ContentUnit to HTML string
+     *
+     * @param unit - ContentUnit with indexed tags and styles
+     * @returns HTML string with semantic elements
+     */
+    serialize(unit) {
+      const { text, styles } = unit;
+      const tagPattern = /<(\/?)?(\d+)(\/)?>/g;
+      let result = "";
+      let lastIndex = 0;
+      let match;
+      while ((match = tagPattern.exec(text)) !== null) {
+        result += text.slice(lastIndex, match.index);
+        const [fullMatch, closingSlash, indexStr, selfClosingSlash] = match;
+        const tagIndex = indexStr;
+        const styleList = styles[tagIndex] || [];
+        if (closingSlash) {
+          const mapping = this.styleMapper.mapStylesToElement(styleList);
+          result += `</${mapping.element}>`;
+        } else if (selfClosingSlash) {
+          const mapping = this.styleMapper.mapStylesToElement(styleList);
+          const attrs = this.formatAttributes(mapping.attrs);
+          result += `<${mapping.element}${attrs} />`;
+        } else {
+          const mapping = this.styleMapper.mapStylesToElement(styleList);
+          const attrs = this.formatAttributes(mapping.attrs);
+          result += `<${mapping.element}${attrs}>`;
+        }
+        lastIndex = match.index + fullMatch.length;
+      }
+      result += text.slice(lastIndex);
+      return result;
+    }
+    /**
+     * Format attributes object into HTML attribute string
+     */
+    formatAttributes(attrs) {
+      const entries = Object.entries(attrs);
+      if (entries.length === 0) return "";
+      return " " + entries.map(([key, value]) => `${key}="${this.escapeAttributeValue(value)}"`).join(" ");
+    }
+    /**
+     * Escape special characters in attribute values
+     */
+    escapeAttributeValue(value) {
+      return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+  };
+
+  // src/browser/editor/live-preview.ts
+  var htmlSerializer = new HTMLSerializer();
+  function applyLivePreview(element, text, styles, key, locale, namespace) {
+    if (!element.hasAttribute("data-lr-original")) {
+      element.setAttribute("data-lr-original", element.innerHTML);
+    }
+    const lr = window.LionRapid;
+    const cache = lr?.autoTranslator ? getCache() : null;
+    if (cache) {
+      const fullKey = `${locale}:${namespace}:${key}`;
+      cache.set(fullKey, text, styles);
+    }
+    if (styles && Object.keys(styles).length > 0) {
+      const unit = { text, styles };
+      element.innerHTML = htmlSerializer.serialize(unit);
+    } else {
+      element.textContent = text;
+    }
+    element.setAttribute("data-lr-block", key);
+    element.setAttribute("data-lionrapid-client", "1");
+  }
+  function getCache() {
+    try {
+      const lr = window.LionRapid;
+      if (!lr) return null;
+      const at = lr.autoTranslator;
+      if (!at) return null;
+      const core = at.core;
+      if (!core) return null;
+      const cache = core.cache;
+      if (!cache || typeof cache.set !== "function") return null;
+      return cache;
+    } catch {
+      return null;
+    }
+  }
+
+  // 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;
+    }
+    /**
+     * Check if text should be excluded from translation
+     */
+    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;
+      }
+      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 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
+  ];
+  var BlockExtractor = class {
+    constructor(excludePatterns = {}, excludeSelectors = [], minTextLength = 2) {
+      __publicField(this, "excludeFilter");
+      __publicField(this, "excludeSelectors");
+      this.excludeFilter = new ExcludeFilter(excludePatterns, minTextLength);
+      this.excludeSelectors = excludeSelectors;
+    }
+    /**
+     * Extract all translatable block elements from a root.
+     * @param includeTranslated - If true, include elements already marked as translated (for editor mode)
+     */
+    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);
+      }
+      for (let i = 0; i < descendants.length; i++) {
+        elements.push(descendants[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.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 });
+      }
+      return results;
+    }
+    isInsideSkipTag(element) {
+      let current = element.parentElement;
+      while (current) {
+        if (SKIP_TAGS2.has(current.tagName)) {
+          return true;
+        }
+        current = current.parentElement;
+      }
+      return false;
+    }
+    hasSkipAttribute(element) {
+      let current = element;
+      while (current) {
+        for (const attr of SKIP_ATTRIBUTES) {
+          if (current.hasAttribute(attr)) {
+            return true;
+          }
+        }
+        current = current.parentElement;
+      }
+      return false;
+    }
+    matchesExcludeSelector(element) {
+      for (const selector of this.excludeSelectors) {
+        try {
+          if (element.matches(selector) || element.closest(selector)) {
+            return true;
+          }
+        } catch {
+        }
+      }
+      return false;
+    }
+  };
+
+  // src/browser/editor/sidebar.ts
+  var htmlSerializer2 = new HTMLSerializer();
+  var Sidebar = class {
+    constructor(shadowRoot, api, locale, namespace, defaultLocale, onBlockClick) {
+      __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);
+      this.api = api;
+      this.locale = locale;
+      this.namespace = namespace;
+      this.defaultLocale = defaultLocale;
+      this.onBlockClick = onBlockClick;
+      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();
+      });
+      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();
+    }
+    setProgressCallback(cb) {
+      this.onProgressUpdate = cb;
+    }
+    /**
+     * Hydrate the status map with server data for all page blocks.
+     * Called once on editor init.
+     */
+    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);
+      }
+      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);
+        }
+      }
+      this.emitProgress();
+    }
+    getTranslatedCount() {
+      let count = 0;
+      for (const status of this.statusMap.values()) {
+        if (status && status.rowState !== "empty") count++;
+      }
+      return count;
+    }
+    getTotalCount() {
+      return this.blockExtractor.extract(document.body, true).length;
+    }
+    emitProgress() {
+      if (this.onProgressUpdate) {
+        this.onProgressUpdate(this.getTranslatedCount(), this.getTotalCount());
+      }
+    }
+    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;
+      });
+      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);
+        }
+        return previewEl;
+      });
+      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);
+          }
+          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);
+      }
+    }
+    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.
+     */
+    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.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);
+      }
+      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);
+      });
+    }
+    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);
+        }
+        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);
+    }
+  };
+
+  // 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", () => {
+      });
+      __publicField(this, "onSessionExpired", null);
+      __publicField(this, "statusAbort", null);
+      __publicField(this, "handleVisibility", () => {
+        if (document.visibilityState === "hidden") {
+          this.flush();
+        }
+      });
+      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;
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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();
+    }
+    /**
+     * Queue a translation for saving
+     */
+    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();
+      }
+    }
+    /**
+     * 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 fetch(
+          `${this.apiBase}/api/integrations/targets/batch`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${this.sessionToken}`
+            },
+            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 (!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 fetch(
+          `${this.apiBase}/api/integrations/targets/status?${params}`,
+          {
+            headers: { "Authorization": `Bearer ${this.sessionToken}` },
+            signal: this.statusAbort.signal
+          }
+        );
+        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 {};
+      }
+    }
+    get pendingCount() {
+      return this.queue.length;
+    }
+    // ============================================
+    // Session renewal
+    // ============================================
+    /**
+     * Check if session is within 2min of expiry, and renew if so.
+     */
+    async maybeRenewSession() {
+      const exp = this.getSessionExp();
+      if (!exp) return;
+      const timeLeft = exp * 1e3 - Date.now();
+      if (timeLeft > 12e4) return;
+      await this.renewSession();
+    }
+    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 {
+          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
+            }));
+          }
+        } catch {
+        }
+      } catch {
+      }
+    }
+    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;
+      }
+    }
+    handleSessionExpired() {
+      this.onStatus("error", "Session expired. Please reopen the editor from the dashboard.");
+      if (this.onSessionExpired) {
+        this.onSessionExpired();
+      }
+    }
+  };
+
+  // src/browser/editor/editor-init.ts
+  var SESSION_KEY = "__lr_editor_session";
+  function getStoredSession() {
+    try {
+      const raw = sessionStorage.getItem(SESSION_KEY);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      if (parsed.exp * 1e3 < Date.now() + 3e4) {
+        sessionStorage.removeItem(SESSION_KEY);
+        return null;
+      }
+      return parsed.token;
+    } catch {
+      return null;
+    }
+  }
+  function storeSession(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]));
+      const session = { token, exp: payload.exp || 0 };
+      sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));
+    } catch {
+    }
+  }
+  function clearSession() {
+    sessionStorage.removeItem(SESSION_KEY);
+  }
+  function initEditor() {
+    const scriptEl = document.querySelector("script[data-grant]");
+    if (!scriptEl) {
+      console.warn("[LionRapid Editor] No script tag with data-grant found");
+      return;
+    }
+    const grant = scriptEl.dataset.grant || "";
+    const locale = scriptEl.dataset.locale || "";
+    const apiBase = scriptEl.dataset.api || "https://api.lionrapid.com";
+    const projectId = scriptEl.dataset.project || "";
+    let attempts = 0;
+    const maxAttempts = 100;
+    const poll = setInterval(() => {
+      attempts++;
+      const lr = window.LionRapid;
+      if (lr) {
+        clearInterval(poll);
+        activate(lr, grant, locale, apiBase, projectId);
+      } else if (attempts >= maxAttempts) {
+        clearInterval(poll);
+        console.warn("[LionRapid Editor] Timed out waiting for window.LionRapid");
+      }
+    }, 100);
+  }
+  async function activate(lr, grant, locale, apiBase, projectId) {
+    const config = window.__lionrapidConfig;
+    const languages = config?.languages || [locale];
+    const namespace = config?.namespace || "default";
+    const defaultLocale = config?.defaultLocale || "en";
+    const currentLocale = locale || lr.getCurrentLocale();
+    const normalizedApiBase = apiBase.replace(/\/$/, "");
+    let sessionToken = getStoredSession();
+    if (!sessionToken && grant) {
+      try {
+        const res = await fetch(`${normalizedApiBase}/api/editor/exchange`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ grant, domain: window.location.host })
+        });
+        if (!res.ok) {
+          console.error("[LionRapid Editor] Grant exchange failed:", res.status);
+          return;
+        }
+        const data = await res.json();
+        sessionToken = data.session_token;
+        if (sessionToken) {
+          storeSession(sessionToken);
+        }
+      } catch (err) {
+        console.error("[LionRapid Editor] Grant exchange error:", err);
+        return;
+      }
+    }
+    if (!sessionToken) {
+      console.error("[LionRapid Editor] No valid session. Please reopen the editor from the dashboard.");
+      return;
+    }
+    const host = document.createElement("div");
+    host.id = "__lionrapid-editor";
+    host.setAttribute("data-no-translate", "");
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: "closed" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = EDITOR_CSS;
+    shadow.appendChild(styleEl);
+    const switcherEl = document.querySelector("[data-lionrapid-switcher]");
+    if (switcherEl) switcherEl.style.display = "none";
+    const api = new EditorAPI(normalizedApiBase, sessionToken, projectId);
+    api.startAutoFlush();
+    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 toolbar = new Toolbar(
+      shadow,
+      languages,
+      currentLocale,
+      // Language change
+      async (newLocale) => {
+        sidebar.updateLocale(newLocale);
+        sidebar.close();
+        inspector.clearHighlight();
+        await lr.changeLanguage(newLocale);
+        await sidebar.hydrateStatus();
+      },
+      // Exit
+      async () => {
+        await api.stopAndFlush();
+        inspector.destroy();
+        toolbar.destroy();
+        sidebar.destroy();
+        host.remove();
+        clearSession();
+      }
+    );
+    sidebar.setProgressCallback((translated, total) => {
+      toolbar.updateProgress(translated, total);
+    });
+    sidebar.hydrateStatus().then(() => {
+      toolbar.updateProgress(sidebar.getTranslatedCount(), sidebar.getTotalCount());
+    });
+    const url = new URL(window.location.href);
+    if (url.searchParams.has("__lr_editor")) {
+      url.searchParams.delete("__lr_editor");
+      history.replaceState(null, "", url.toString());
+    }
+  }
+  initEditor();
+})();
+//# sourceMappingURL=lionrapid.editor.js.map