@lionrapid/core 0.2.0 → 0.3.0-beta.0

package/dist/browser/lionrapid.auto.dev.js

@@ -2138,153 +2138,51 @@ var LionRapid = (() => {
     }
   };
 
-  // src/content/safe-href.ts
-  var SAFE_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
-  var ALLOWED_SCHEMES = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:", "sms:"]);
-  function safeHref(href) {
-    if (!href) return "#";
-    const trimmed = href.trim();
-    if (!trimmed) return "#";
-    if (trimmed.startsWith("//")) {
-      return "#";
-    }
-    if (trimmed.startsWith("/") || trimmed.startsWith("?") || trimmed.startsWith("#") || trimmed.startsWith("./") || trimmed.startsWith("../")) {
-      return trimmed;
-    }
-    const schemeMatch = SAFE_SCHEME.exec(trimmed);
-    if (schemeMatch) {
-      const scheme = schemeMatch[0].toLowerCase();
-      return ALLOWED_SCHEMES.has(scheme) ? trimmed : "#";
-    }
-    return trimmed;
+  // src/content/canonical-tag.ts
+  var VOID_TAGS = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  function escapeAttrValue(value) {
+    return value.replace(/"/g, """);
   }
-
-  // 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: safeHref(style.slice("hyperlink:".length)) }
-          };
-        }
-      }
-      for (const style of styles) {
-        const element = this.styleToElement[style];
-        if (element) {
-          return {
-            element,
-            attrs: {}
-          };
-        }
-      }
-      return { element: "span", attrs: {} };
+  function serializeOpeningTag(tagName, attrs) {
+    const tag = tagName.toLowerCase();
+    let result = `<${tag}`;
+    for (const [name, value] of Object.entries(attrs)) {
+      result += ` ${name.toLowerCase()}="${escapeAttrValue(value)}"`;
+    }
+    result += ">";
+    return result;
+  }
+  function extractTagName(rawOpenTag) {
+    const end = rawOpenTag.search(/[\s>]/);
+    return rawOpenTag.slice(1, end === -1 ? rawOpenTag.length : end).toLowerCase();
+  }
+  function readRawStyle(styles) {
+    for (const s of styles) {
+      if (s.startsWith("raw:")) return s.slice(4);
     }
-  };
+    return null;
+  }
 
   // src/content/parser/MarkupParser.ts
   var MarkupParser = class {
-    constructor(options = {}) {
-      __publicField(this, "styleMapper");
-      this.styleMapper = options.styleMapper ?? new DefaultStyleMapper();
-    }
-    /**
-     * Parse HTML string into ContentUnit
-     *
-     * Handles two input formats:
-     * 1. HTML tags: `<b>text</b>` → converts to indexed `<1>text</1>` with styles
-     * 2. Already indexed: `<1>text</1>` → passes through as-is (from server)
-     *
-     * @param input - HTML string with inline elements or already indexed
-     * @returns ContentUnit with indexed tags and styles
-     */
     parse(input) {
-      const hasIndexedTags = /<\/?[0-9]+>/.test(input);
-      if (hasIndexedTags) {
-        return {
-          text: input,
-          styles: {}
-          // Empty - styles determined by children
-        };
+      if (/<\/?[0-9]+>/.test(input)) {
+        return { text: input, styles: {} };
       }
       const styles = {};
       let tagIndex = 0;
@@ -2292,88 +2190,45 @@ var LionRapid = (() => {
       let result = "";
       let pos = 0;
       while (pos < input.length) {
-        const tagMatch = this.matchTag(input, pos);
-        if (!tagMatch) {
+        const tag = this.matchTag(input, pos);
+        if (!tag) {
           result += input.slice(pos);
           break;
         }
-        result += input.slice(pos, tagMatch.startIndex);
-        if (tagMatch.isClosing) {
-          const matchingOpen = this.findMatchingOpenTag(
-            tagStack,
-            tagMatch.tag.toLowerCase()
-          );
-          if (matchingOpen !== null) {
-            result += `</${matchingOpen}>`;
-            const stackIndex = tagStack.findIndex(
-              (t) => t.index === matchingOpen
-            );
-            if (stackIndex !== -1) {
-              tagStack.splice(stackIndex, 1);
+        result += input.slice(pos, tag.startIndex);
+        if (tag.isClosing) {
+          let matchIdx = null;
+          for (let i = tagStack.length - 1; i >= 0; i--) {
+            if (tagStack[i].tag === tag.tag.toLowerCase()) {
+              matchIdx = tagStack[i].index;
+              tagStack.splice(i, 1);
+              break;
             }
-          } else {
-            result += input.slice(tagMatch.startIndex, tagMatch.endIndex);
           }
-        } else if (tagMatch.isSelfClosing) {
-          tagIndex++;
-          const styleList = this.styleMapper.mapElementToStyles(
-            tagMatch.tag,
-            tagMatch.attrs
-          );
-          if (styleList.length > 0) {
-            styles[String(tagIndex)] = styleList;
-            result += `<${tagIndex}/>`;
+          if (matchIdx !== null) {
+            result += `</${matchIdx}>`;
           }
         } else {
-          const styleList = this.styleMapper.mapElementToStyles(
-            tagMatch.tag,
-            tagMatch.attrs
-          );
-          if (styleList.length > 0) {
-            tagIndex++;
-            styles[String(tagIndex)] = styleList;
-            result += `<${tagIndex}>`;
-            tagStack.push({ tag: tagMatch.tag.toLowerCase(), index: tagIndex });
+          const tagName = tag.tag.toLowerCase();
+          const isVoid = VOID_TAGS.has(tagName);
+          const isSelfClosing = tag.isSelfClosing || isVoid;
+          tagIndex++;
+          styles[String(tagIndex)] = [`raw:${serializeOpeningTag(tagName, tag.attrs)}`];
+          if (isSelfClosing) {
+            result += `<${tagIndex}/>`;
           } else {
-            const closingIndex = this.findClosingTagIndex(
-              input,
-              tagMatch.endIndex,
-              tagMatch.tag
-            );
-            if (closingIndex !== -1) {
-              const innerContent = input.slice(tagMatch.endIndex, closingIndex);
-              const innerUnit = this.parse(innerContent);
-              const baseIndex = tagIndex;
-              for (const [key, value] of Object.entries(innerUnit.styles)) {
-                const adjustedKey = String(baseIndex + parseInt(key, 10));
-                styles[adjustedKey] = value;
-              }
-              result += innerUnit.text.replace(/<(\/?)\d+>/g, (match, slash) => {
-                const num = parseInt(match.replace(/[</>]/g, ""), 10);
-                return `<${slash}${baseIndex + num}>`;
-              });
-              const closingMatch = this.matchTag(input, closingIndex);
-              pos = closingMatch ? closingMatch.endIndex : closingIndex;
-              const maxInnerIndex = Object.keys(innerUnit.styles).length > 0 ? Math.max(...Object.keys(innerUnit.styles).map(Number)) : 0;
-              tagIndex = baseIndex + maxInnerIndex;
-              continue;
-            }
+            result += `<${tagIndex}>`;
+            tagStack.push({ tag: tagName, index: tagIndex });
           }
         }
-        pos = tagMatch.endIndex;
+        pos = tag.endIndex;
       }
       while (tagStack.length > 0) {
         const unclosed = tagStack.pop();
         result += `</${unclosed.index}>`;
       }
-      return {
-        text: result,
-        styles
-      };
+      return { text: result, styles };
     }
-    /**
-     * Match an HTML tag at the given position
-     */
     matchTag(input, startPos) {
       const tagStart = input.indexOf("<", startPos);
       if (tagStart === -1) return null;
@@ -2396,9 +2251,6 @@ var LionRapid = (() => {
         endIndex: tagStart + fullMatch.length
       };
     }
-    /**
-     * Parse HTML attributes string into key-value pairs
-     */
     parseAttributes(attrsString) {
       const attrs = {};
       if (!attrsString.trim()) return attrs;
@@ -2406,60 +2258,14 @@ var LionRapid = (() => {
       let match;
       while ((match = attrPattern.exec(attrsString)) !== null) {
         const [, name, doubleQuoted, singleQuoted, unquoted] = match;
-        const value = doubleQuoted ?? singleQuoted ?? unquoted ?? "";
-        attrs[name.toLowerCase()] = value;
+        attrs[name.toLowerCase()] = doubleQuoted ?? singleQuoted ?? unquoted ?? "";
       }
       return attrs;
     }
-    /**
-     * Find matching opening tag in the stack
-     */
-    findMatchingOpenTag(stack, tagName) {
-      for (let i = stack.length - 1; i >= 0; i--) {
-        if (stack[i].tag === tagName) {
-          return stack[i].index;
-        }
-      }
-      return null;
-    }
-    /**
-     * Find the closing tag index for a given opening tag
-     */
-    findClosingTagIndex(input, startPos, tagName) {
-      const lowerTag = tagName.toLowerCase();
-      let depth = 1;
-      let pos = startPos;
-      while (pos < input.length && depth > 0) {
-        const tagMatch = this.matchTag(input, pos);
-        if (!tagMatch) break;
-        if (tagMatch.tag.toLowerCase() === lowerTag) {
-          if (tagMatch.isClosing) {
-            depth--;
-            if (depth === 0) {
-              return tagMatch.startIndex;
-            }
-          } else if (!tagMatch.isSelfClosing) {
-            depth++;
-          }
-        }
-        pos = tagMatch.endIndex;
-      }
-      return -1;
-    }
   };
 
   // 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;
@@ -2468,40 +2274,25 @@ var LionRapid = (() => {
       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} />`;
+        const [fullMatch, closingSlash, indexStr] = match;
+        const styleList = styles[indexStr] ?? [];
+        const rawOpen = readRawStyle(styleList);
+        if (rawOpen) {
+          const tagName = extractTagName(rawOpen);
+          const isVoid = VOID_TAGS.has(tagName);
+          if (closingSlash) {
+            if (!isVoid) result += `</${tagName}>`;
+          } else {
+            result += rawOpen;
+          }
         } else {
-          const mapping = this.styleMapper.mapStylesToElement(styleList);
-          const attrs = this.formatAttributes(mapping.attrs);
-          result += `<${mapping.element}${attrs}>`;
+          result += fullMatch;
         }
         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/cache/CacheManager.ts
@@ -2735,7 +2526,7 @@ var LionRapid = (() => {
   };
 
   // src/lionRapid.ts
-  var INDEXED_TAG_REGEX = /<\/?[0-9]+>/;
+  var INDEXED_TAG_REGEX = /<\/?[0-9]+\/?>/;
   var HTML_TAG_REGEX = /<[a-z][a-z0-9]*(?:\s+[^>]*)?\/?>/i;
   var LionRapidCore = class {
     constructor(eventEmitter, handlerChain, defaultLocale = "en", fallbackLocale = "en", defaultNamespace) {
@@ -2960,7 +2751,7 @@ var LionRapid = (() => {
      */
     processIndexedValue(value, request) {
       const processedText = this.processTranslationValue(value, request);
-      return processedText.replace(/<\/?[0-9]+>/g, "");
+      return processedText.replace(/<\/?[0-9]+\/?>/g, "");
     }
     /**
      * 📦 Get styles for a translation key from namespace cache (fallback)
@@ -3006,7 +2797,7 @@ var LionRapid = (() => {
       try {
         const unit = this.markupParser.parse(value);
         const processedText = this.processTranslationValue(unit.text, request);
-        return processedText.replace(/<\/?[0-9]+>/g, "");
+        return processedText.replace(/<\/?[0-9]+\/?>/g, "");
       } catch (error) {
         logger.warn(`ContentUnit processing failed for "${value}":`, error);
         return this.processTranslationValue(value, request);
@@ -3075,7 +2866,7 @@ var LionRapid = (() => {
      * @example
      * ```typescript
      * const unit = i18n.getContentUnit('terms', {}, 'Read our <b>Terms</b>.');
-     * // → { text: "Read our <1>Terms</1>.", styles: {"1": ["bold"]} }
+     * // → { text: "Read our <1>Terms</1>.", styles: {"1": ["raw:<b>"]} }
      * ```
      */
     getContentUnit(key, params, defaultValue) {
@@ -3684,7 +3475,7 @@ var LionRapid = (() => {
         logger.debug("API base URL is not set");
         throw new NetworkError("API base URL is not set");
       }
-      const url = this.buildUrl("getTranslation", { key });
+      const url = this.withDraftsParam(this.buildUrl("getTranslation", { key }));
       logger.debug(`API GET: ${url}`);
       try {
         const response = await this.makeRequest(url, "GET");
@@ -3720,7 +3511,7 @@ var LionRapid = (() => {
         logger.debug("API base URL is not set");
         throw new NetworkError("API base URL is not set");
       }
-      const url = this.buildUrl("getTranslation", { key });
+      const url = this.withDraftsParam(this.buildUrl("getTranslation", { key }));
       logger.debug(`API GET ContentUnit: ${url}`);
       try {
         const response = await this.makeRequest(url, "GET");
@@ -3761,7 +3552,7 @@ var LionRapid = (() => {
         logger.debug("API base URL is not set");
         throw new NetworkError("API base URL is not set");
       }
-      const url = this.buildUrl("getNamespace", { locale, namespace });
+      const url = this.withDraftsParam(this.buildUrl("getNamespace", { locale, namespace }));
       logger.debug(`API GET Namespace: ${url}`);
       const namespaceKey = `${locale}:${namespace}`;
       try {
@@ -3875,7 +3666,7 @@ var LionRapid = (() => {
         logger.debug("API base URL is not set");
         throw new NetworkError("API base URL is not set");
       }
-      const url = this.buildUrl("getNamespace", { locale, namespace });
+      const url = this.withDraftsParam(this.buildUrl("getNamespace", { locale, namespace }));
       logger.debug(`API GET Namespace ContentUnits: ${url}`);
       const namespaceKey = `${locale}:${namespace}`;
       try {
@@ -4087,6 +3878,26 @@ var LionRapid = (() => {
       }
       return `${baseUrl}${path}`;
     }
+    /**
+     * Check whether the current page is running inside an active visual-editor
+     * session. The editor JS sets `__lr_editor_active=1` as a session cookie
+     * when its JWT is established; we read it here so client-side translation
+     * fetches request draft content too, matching what the edge proxy does
+     * server-side. Outside a browser (Node/SSR) this is always false.
+     */
+    isEditorPreviewSession() {
+      if (typeof document === "undefined") return false;
+      return document.cookie.split("; ").some((c) => c === "__lr_editor_active=1");
+    }
+    /**
+     * Append `include_drafts=true` to a built URL when an editor session is
+     * active. Leaves the URL unchanged for normal visitors so the delivery
+     * gate continues to apply in production.
+     */
+    withDraftsParam(url) {
+      if (!this.isEditorPreviewSession()) return url;
+      return url + (url.includes("?") ? "&" : "?") + "include_drafts=true";
+    }
     /**
      * Make HTTP request with timeout and headers
      */
@@ -4262,7 +4073,6 @@ var LionRapid = (() => {
   };
 
   // src/browser/markup-parser.ts
-  var styleMapper = new DefaultStyleMapper();
   function parseBlockElement(element) {
     const styles = {};
     let tagIndex = 0;
@@ -4280,22 +4090,17 @@ var LionRapid = (() => {
         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}>`;
+      tagIndex++;
+      const idx = tagIndex;
+      styles[String(idx)] = [`raw:${serializeOpeningTag(tag, attrs)}`];
+      if (VOID_TAGS.has(tag)) {
+        return `<${idx}/>`;
       }
-      let result = "";
+      let inner = "";
       for (let i = 0; i < node.childNodes.length; i++) {
-        result += walk(node.childNodes[i]);
+        inner += walk(node.childNodes[i]);
       }
-      return result;
+      return `<${idx}>${inner}</${idx}>`;
     }
     let text = "";
     for (let i = 0; i < element.childNodes.length; i++) {
@@ -4450,8 +4255,14 @@ var LionRapid = (() => {
     // Server already translated
     "data-lionrapid-client",
     // Client already translated
-    "data-no-translate"
+    "data-no-translate",
     // Explicitly marked to skip
+    // Edge proxy already rendered this block with the correct translation
+    // and styles. Skip in normal extraction so the client-side auto-translator
+    // can't overwrite the styled DOM with a stale (or plain-text) cache entry.
+    // The editor passes includeTranslated=true to bypass this and re-extract
+    // edge-rendered blocks for inspection.
+    "data-lr-block"
   ];
   var BlockExtractor = class {
     constructor(excludePatterns = {}, excludeSelectors = [], minTextLength = 2) {
@@ -4792,11 +4603,14 @@ var LionRapid = (() => {
           if (!element.hasAttribute("data-lr-original")) {
             element.setAttribute("data-lr-original", element.innerHTML);
           }
-          if (cached.styles && Object.keys(cached.styles).length > 0) {
-            const translatedUnit = { text: cached.value, styles: cached.styles };
-            element.innerHTML = htmlSerializer.serialize(translatedUnit);
+          const cacheHasStyles = cached.styles && Object.keys(cached.styles).length > 0;
+          const sourceHasStyles = Object.keys(unit.styles).length > 0;
+          const hasIndexedMarkers = /<\/?[0-9]+\/?>/.test(cached.value);
+          if (sourceHasStyles && !hasIndexedMarkers) {
           } else {
-            element.textContent = cached.value;
+            const styles = cacheHasStyles ? cached.styles : unit.styles;
+            const translatedUnit = { text: cached.value, styles };
+            element.innerHTML = htmlSerializer.serialize(translatedUnit);
           }
           element.setAttribute("data-lr-block", key);
           element.setAttribute("data-lionrapid-client", "1");