@lionrapid/core 0.2.1 → 0.3.0

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

@@ -27,7 +27,6 @@ var LionRapid = (() => {
     CacheStorageRepository: () => CacheStorageRepository,
     Colors: () => Colors,
     ContentValidator: () => ContentValidator,
-    DefaultStyleMapper: () => DefaultStyleMapper,
     EventEmitter: () => EventEmitter,
     HTMLSerializer: () => HTMLSerializer,
     HandlerChain: () => HandlerChain,
@@ -46,7 +45,9 @@ var LionRapid = (() => {
     TranslationLockedError: () => TranslationLockedError,
     TranslationNotFoundError: () => TranslationNotFoundError,
     VERSION: () => VERSION,
+    VOID_TAGS: () => VOID_TAGS,
     createPackageLogger: () => createPackageLogger,
+    extractTagName: () => extractTagName,
     isClientError: () => isClientError,
     isRetryableError: () => isRetryableError,
     isTranslationError: () => isTranslationError,
@@ -54,7 +55,9 @@ var LionRapid = (() => {
     measure: () => measure,
     parseKeyPath: () => parseKeyPath,
     prepareTranslationRequest: () => prepareTranslationRequest,
-    resolveNestedKey: () => resolveNestedKey
+    readRawStyle: () => readRawStyle,
+    resolveNestedKey: () => resolveNestedKey,
+    serializeOpeningTag: () => serializeOpeningTag
   });
 
   // src/config/logger.config.ts
@@ -2213,153 +2216,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;
@@ -2367,88 +2268,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;
@@ -2471,9 +2329,6 @@ var LionRapid = (() => {
         endIndex: tagStart + fullMatch.length
       };
     }
-    /**
-     * Parse HTML attributes string into key-value pairs
-     */
     parseAttributes(attrsString) {
       const attrs = {};
       if (!attrsString.trim()) return attrs;
@@ -2481,60 +2336,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;
@@ -2543,40 +2352,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
@@ -2810,7 +2604,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) {
@@ -3035,7 +2829,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)
@@ -3081,7 +2875,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);
@@ -3150,7 +2944,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) {
@@ -3759,7 +3553,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");
@@ -3795,7 +3589,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");
@@ -3836,7 +3630,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 {
@@ -3950,7 +3744,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 {
@@ -4162,6 +3956,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
      */