@lovalingo/lovalingo 0.0.24 → 0.0.25

package/dist/components/AixsterProvider.d.ts

@@ -6,5 +6,22 @@ interface LovalingoProviderProps extends LovalingoConfig {
     seo?: boolean;
     navigateRef?: React.MutableRefObject<((path: string) => void) | undefined>;
 }
+type LovalingoSeleniumBridge = {
+    getStatus: () => {
+        mode: LovalingoConfig["mode"];
+        locale: string;
+        defaultLocale: string;
+        path: string;
+        missed: number;
+    };
+    flushMisses: () => Promise<{
+        reported: number;
+        locale: string;
+        path: string;
+    }>;
+};
+declare global {
+    var __LOVALINGO_SELENIUM__: LovalingoSeleniumBridge | undefined;
+}
 export declare const LovalingoProvider: React.FC<LovalingoProviderProps>;
 export {};

package/dist/components/AixsterProvider.js

@@ -434,6 +434,38 @@ navigateRef, // For path mode routing
             translatingHashesRef.current.delete(hash);
         }
     }, [defaultLocale, locale, hashTranslations]);
+    // Selenium bridge: allows automation to force-flush misses instead of relying on the 5s interval.
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const bridge = {
+            getStatus: () => ({
+                mode,
+                locale,
+                defaultLocale,
+                path: window.location.pathname + window.location.search,
+                missed: translatorRef.current.getMissedStrings().length,
+            }),
+            flushMisses: async () => {
+                // Only flush in DOM mode + non-default locale, matching the normal periodic reporter.
+                if (mode !== "dom" || locale === defaultLocale) {
+                    return { reported: 0, locale, path: window.location.pathname + window.location.search };
+                }
+                const missed = translatorRef.current.getMissedStrings();
+                if (missed.length > 0) {
+                    await apiRef.current.reportMisses(missed, defaultLocale, locale);
+                    translatorRef.current.clearMissedStrings();
+                }
+                return { reported: missed.length, locale, path: window.location.pathname + window.location.search };
+            },
+        };
+        globalThis.__LOVALINGO_SELENIUM__ = bridge;
+        return () => {
+            if (globalThis.__LOVALINGO_SELENIUM__ === bridge) {
+                delete globalThis.__LOVALINGO_SELENIUM__;
+            }
+        };
+    }, [defaultLocale, locale, mode]);
     // Initialize
     useEffect(() => {
         const initialLocale = detectLocale();

package/dist/types.d.ts

@@ -55,7 +55,7 @@ export interface Exclusion {
     type: 'css' | 'xpath';
 }
 export interface PlaceholderData {
-    type: 'inline-element' | 'non-translatable' | 'interactive';
+    type: 'inline-formatting' | 'non-translatable' | 'interactive';
     originalHTML: string;
     textContent: string;
     tag: string;

package/dist/utils/api.d.ts

@@ -17,6 +17,8 @@ export declare class LovalingoAPI {
     private hasApiKey;
     private warnMissingApiKey;
     private logActivationRequired;
+    private isActivationRequiredPayload;
+    private isActivationRequiredResponse;
     getEntitlements(): ProjectEntitlements | null;
     fetchEntitlements(localeHint: string): Promise<ProjectEntitlements | null>;
     trackPageview(pathOrUrl: string): Promise<void>;

package/dist/utils/api.js

@@ -19,6 +19,20 @@ export class LovalingoAPI {
             `Publish a public routes manifest at "/.well-known/lovalingo-routes.json" on your domain, ` +
             `then verify it in the Lovalingo dashboard to activate translations + SEO.`);
     }
+    isActivationRequiredPayload(data) {
+        if (!data || typeof data !== "object")
+            return false;
+        const status = data.status;
+        const errorCode = data.error_code;
+        return status === "activation_required" || errorCode === "PROJECT_NOT_ACTIVATED";
+    }
+    isActivationRequiredResponse(response, data) {
+        if (response.status === 403)
+            return true;
+        if (response.headers.get("X-Lovalingo-Status") === "activation_required")
+            return true;
+        return typeof data !== "undefined" ? this.isActivationRequiredPayload(data) : false;
+    }
     getEntitlements() {
         return this.entitlements;
     }
@@ -30,13 +44,17 @@ export class LovalingoAPI {
             }
             const normalizedPath = processPath(window.location.pathname, this.pathConfig);
             const response = await fetch(`${this.apiBase}/functions/v1/bundle?key=${this.apiKey}&locale=${localeHint}&path=${normalizedPath}`);
-            if (response.status === 403) {
+            if (this.isActivationRequiredResponse(response)) {
                 this.logActivationRequired('fetchEntitlements', response);
                 return null;
             }
             if (!response.ok)
                 return null;
             const data = await response.json();
+            if (this.isActivationRequiredResponse(response, data)) {
+                this.logActivationRequired("fetchEntitlements", response);
+                return null;
+            }
             if (data?.entitlements) {
                 this.entitlements = {
                     ...data.entitlements,
@@ -77,13 +95,17 @@ export class LovalingoAPI {
             // Use path normalization utility
             const normalizedPath = processPath(window.location.pathname, this.pathConfig);
             const response = await fetch(`${this.apiBase}/functions/v1/bundle?key=${this.apiKey}&locale=${targetLocale}&path=${normalizedPath}`);
-            if (response.status === 403) {
+            if (this.isActivationRequiredResponse(response)) {
                 this.logActivationRequired('fetchTranslations', response);
                 return [];
             }
             if (!response.ok)
                 throw new Error('Failed to fetch translations');
             const data = await response.json();
+            if (this.isActivationRequiredResponse(response, data)) {
+                this.logActivationRequired("fetchTranslations", response);
+                return [];
+            }
             if (data?.entitlements) {
                 this.entitlements = {
                     ...data.entitlements,
@@ -169,7 +191,7 @@ export class LovalingoAPI {
                     path: normalizedPath,
                 }),
             });
-            if (response.status === 403) {
+            if (this.isActivationRequiredResponse(response)) {
                 this.logActivationRequired('reportMisses', response);
                 return;
             }
@@ -179,6 +201,10 @@ export class LovalingoAPI {
                 throw new Error(`Miss reporting failed: ${response.status}`);
             }
             const result = await response.json();
+            if (this.isActivationRequiredResponse(response, result)) {
+                this.logActivationRequired("reportMisses", response);
+                return;
+            }
             console.log('[Lovalingo] ✅ Misses reported:', result);
         }
         catch (error) {
@@ -229,7 +255,7 @@ export class LovalingoAPI {
                     targetLocale,
                 }),
             });
-            if (response.status === 403) {
+            if (this.isActivationRequiredResponse(response)) {
                 this.logActivationRequired('translateRealtime', response);
                 return null;
             }
@@ -239,6 +265,10 @@ export class LovalingoAPI {
                 return null;
             }
             const result = await response.json();
+            if (this.isActivationRequiredResponse(response, result)) {
+                this.logActivationRequired("translateRealtime", response);
+                return null;
+            }
             if (result.success && result.translation) {
                 console.log(`[Lovalingo] ✅ Translated: "${result.translation.substring(0, 40)}..." ${result.cached ? '(cached)' : '(new)'}`);
                 return result.translation;

package/dist/utils/translator.d.ts

@@ -21,6 +21,9 @@ export declare class Translator {
      * This catches cases like: <span>text</span>, <div>text</div>, etc.
      */
     private shouldTreatAsSemantic;
+    private isLargeInteractiveContainer;
+    private sanitizePlaceholderMap;
+    private cleanupPreserveIds;
     setTranslations(translations: Translation[]): void;
     setExclusions(exclusions: Exclusion[]): void;
     getMissedStrings(): MissedTranslation[];

package/dist/utils/translator.js

@@ -34,7 +34,7 @@ export class Translator {
         if (!text || text.trim().length < 2)
             return false;
         // Check if it's only placeholder tokens
-        if (/^(__[A-Z]+_\d+__\s*)+$/.test(text))
+        if (/^(__[A-Z0-9_]+__\s*)+$/.test(text))
             return false;
         // Check if it's numeric only
         if (/^\d+(\.\d+)?$/.test(text))
@@ -69,6 +69,47 @@ export class Translator {
             return false;
         return this.isTranslatableText(textContent);
     }
+    isLargeInteractiveContainer(element) {
+        const textLen = (element.textContent || '').trim().length;
+        if (textLen > 200)
+            return true;
+        const descendantCount = element.querySelectorAll('*').length;
+        if (descendantCount > 12)
+            return true;
+        const hasBlockDescendant = Boolean(element.querySelector('div,p,h1,h2,h3,h4,h5,h6,section,article,header,footer,main,nav,aside,ul,ol,li,table,tr,td,th,form,fieldset'));
+        if (hasBlockDescendant)
+            return true;
+        const hasNestedInteractive = Boolean(element.querySelector('button,a,input,textarea,select,[role="button"],[role="link"],[contenteditable]'));
+        if (hasNestedInteractive)
+            return true;
+        return false;
+    }
+    sanitizePlaceholderMap(placeholderMap) {
+        const out = {};
+        if (!placeholderMap || typeof placeholderMap !== 'object')
+            return out;
+        const stripPreserveIds = (html) => (html || '').replace(/\sdata-lovalingo-preserve-id=("[^"]*"|'[^']*')/gi, '');
+        for (const [token, data] of Object.entries(placeholderMap)) {
+            if (!data)
+                continue;
+            const next = {
+                ...data,
+                originalHTML: stripPreserveIds(data.originalHTML || ''),
+                attributes: data.attributes ? { ...data.attributes } : {},
+            };
+            for (const key of Object.keys(next.attributes || {})) {
+                if (key.toLowerCase() === 'data-lovalingo-preserve-id') {
+                    delete next.attributes[key];
+                }
+            }
+            out[token] = next;
+        }
+        return out;
+    }
+    cleanupPreserveIds(element, markedElements) {
+        markedElements?.forEach((el) => el.removeAttribute('data-Lovalingo-preserve-id'));
+        element.querySelectorAll('[data-Lovalingo-preserve-id]').forEach((el) => el.removeAttribute('data-Lovalingo-preserve-id'));
+    }
     setTranslations(translations) {
         this.translationMap.clear();
         if (!Array.isArray(translations)) {
@@ -138,7 +179,8 @@ export class Translator {
      * Uses DOM APIs to reliably parse and tokenize HTML
      */
     extractTranslatableContent(semanticElement) {
-        const rawHTML = semanticElement.innerHTML;
+        // Prefer a stable snapshot without temporary preserve markers.
+        const rawHTML = semanticElement.getAttribute('data-Lovalingo-original-html') || semanticElement.innerHTML;
         const semanticContext = semanticElement.tagName.toLowerCase();
         // Clone element to avoid modifying original DOM
         const clone = semanticElement.cloneNode(true);
@@ -156,6 +198,22 @@ export class Translator {
             'img', 'video', 'audio', 'iframe', 'object', 'embed',
             'code', 'pre'
         ]);
+        const WRAP_INTERACTIVE_TAGS = new Set(['button', 'label', 'summary']);
+        const WRAP_INTERACTIVE_ROLES = new Set(['button', 'link', 'tab']);
+        const getOuterHTML = (el) => {
+            try {
+                return el.outerHTML || '';
+            }
+            catch {
+                return '';
+            }
+        };
+        const getOpenTag = (outerHTML) => {
+            const idx = outerHTML.indexOf('>');
+            if (idx === -1)
+                return '';
+            return outerHTML.slice(0, idx + 1);
+        };
         /**
          * Recursively process DOM nodes
          * Returns true if node was replaced with token
@@ -166,10 +224,10 @@ export class Translator {
                 const tagName = element.tagName.toLowerCase();
                 // Remove skip tags entirely
                 if (SKIP_TAGS.has(tagName)) {
-                    const token = `__SKIP_${placeholderCounter}__`;
+                    const token = `__PRESERVE_${placeholderCounter}__`;
                     placeholderMap[token] = {
                         type: 'non-translatable',
-                        originalHTML: element.outerHTML,
+                        originalHTML: getOuterHTML(element),
                         textContent: '',
                         tag: tagName,
                         attributes: {}
@@ -179,63 +237,82 @@ export class Translator {
                     element.replaceWith(textNode);
                     return true;
                 }
-                // Handle interactive elements as islands (but not the root semantic element)
-                if (this.isInteractive(element) && element !== clone) {
-                    const token = `__ISLAND_${placeholderCounter}__`;
+                // Process children first (depth-first)
+                const children = Array.from(element.childNodes);
+                children.forEach(child => processNode(child));
+                const textContent = element.textContent || '';
+                const trimmedContent = textContent.trim();
+                // Skip wrapping/preserving when there's nothing meaningful inside.
+                if (!trimmedContent || trimmedContent.length < 2) {
+                    return false;
+                }
+                // Skip icon elements (or icon-like wrappers).
+                const isIcon = tagName === 'svg' ||
+                    tagName === 'i' ||
+                    element.hasAttribute('aria-hidden') ||
+                    element.classList.contains('icon') ||
+                    element.classList.contains('lucide');
+                if (isIcon) {
+                    return false;
+                }
+                // Preserve explicit non-translatable inline nodes as a single token, so surrounding text can still translate.
+                const isNonTranslatable = this.nonTranslatableTerms.has(trimmedContent) ||
+                    element.hasAttribute('data-no-translate') ||
+                    element.hasAttribute('translate-no') ||
+                    element.hasAttribute('data-no-translate');
+                if (isNonTranslatable && element !== clone) {
+                    const token = `__PRESERVE_${placeholderCounter}__`;
                     placeholderMap[token] = {
-                        type: 'interactive',
-                        originalHTML: element.outerHTML,
-                        textContent: element.textContent || '',
+                        type: 'non-translatable',
+                        originalHTML: getOuterHTML(element),
+                        textContent,
                         tag: tagName,
-                        attributes: {}
+                        attributes: {},
                     };
                     placeholderCounter++;
                     const textNode = document.createTextNode(token);
                     element.replaceWith(textNode);
                     return true;
                 }
-                // Process children first (depth-first)
-                const children = Array.from(element.childNodes);
-                children.forEach(child => processNode(child));
-                // Then decide if this element itself should be tokenized
-                if (INLINE_TAGS.has(tagName)) {
-                    const textContent = element.textContent || '';
-                    const trimmedContent = textContent.trim();
-                    // LAYER 1: Skip tokenization for non-translatable content
-                    // Skip if no actual text content
-                    if (!trimmedContent || trimmedContent.length < 2) {
-                        return false; // Don't tokenize empty/too-short elements
-                    }
-                    // Skip icon elements
-                    const isIcon = tagName === 'svg' ||
-                        tagName === 'i' ||
-                        element.hasAttribute('aria-hidden') ||
-                        element.classList.contains('icon') ||
-                        element.classList.contains('lucide');
-                    if (isIcon) {
-                        return false; // Don't tokenize icons
-                    }
-                    // Check if this is a non-translatable term
-                    const isNonTranslatable = this.nonTranslatableTerms.has(trimmedContent) ||
-                        element.hasAttribute('data-no-translate') ||
-                        element.hasAttribute('translate-no');
-                    const token = `__INLINE_${placeholderCounter}__`;
-                    // Store full HTML and attributes
+                const role = (element.getAttribute('role') || '').toLowerCase();
+                const shouldWrapInteractive = element !== clone &&
+                    this.isInteractive(element) &&
+                    !['input', 'textarea', 'select'].includes(tagName) &&
+                    (WRAP_INTERACTIVE_TAGS.has(tagName) || WRAP_INTERACTIVE_ROLES.has(role));
+                const shouldWrapInline = element !== clone && INLINE_TAGS.has(tagName);
+                if (shouldWrapInline || shouldWrapInteractive) {
+                    // Wrap with OPEN/CLOSE tokens so the model can translate inner text and still preserve markup.
+                    const openToken = `__OPEN_${placeholderCounter}__`;
+                    const closeToken = `__CLOSE_${placeholderCounter}__`;
+                    placeholderCounter++;
+                    const outer = getOuterHTML(element);
+                    const openTag = getOpenTag(outer);
+                    const closeTag = `</${tagName}>`;
                     const attributes = {};
                     Array.from(element.attributes).forEach(attr => {
                         attributes[attr.name] = attr.value;
                     });
-                    placeholderMap[token] = {
-                        type: isNonTranslatable ? 'non-translatable' : 'inline-element',
-                        originalHTML: element.outerHTML,
-                        textContent: textContent,
+                    placeholderMap[openToken] = {
+                        type: 'inline-formatting',
+                        originalHTML: openTag,
+                        textContent,
                         tag: tagName,
-                        attributes
+                        attributes,
                     };
-                    placeholderCounter++;
-                    // Replace element with token text node
-                    const textNode = document.createTextNode(token);
-                    element.replaceWith(textNode);
+                    placeholderMap[closeToken] = {
+                        type: 'inline-formatting',
+                        originalHTML: closeTag,
+                        textContent: '',
+                        tag: tagName,
+                        attributes: {},
+                    };
+                    const fragment = document.createDocumentFragment();
+                    fragment.appendChild(document.createTextNode(openToken));
+                    while (element.firstChild) {
+                        fragment.appendChild(element.firstChild);
+                    }
+                    fragment.appendChild(document.createTextNode(closeToken));
+                    element.replaceWith(fragment);
                     return true;
                 }
             }
@@ -290,7 +367,9 @@ export class Translator {
         const tokens = Object.keys(placeholderMap).sort((a, b) => {
             const numA = parseInt(a.match(/\d+/)?.[0] || '0');
             const numB = parseInt(b.match(/\d+/)?.[0] || '0');
-            return numA - numB;
+            if (numA !== numB)
+                return numA - numB;
+            return a.localeCompare(b);
         });
         for (const token of tokens) {
             const data = placeholderMap[token];
@@ -475,14 +554,19 @@ export class Translator {
         const SKIP_TAGS = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME', 'CODE', 'PRE']);
         if (SKIP_TAGS.has(element.tagName))
             return;
-        // Interactive containers (like <a> cards) must not be structurally rewritten.
-        // We only translate attributes here and allow children to be translated normally.
         if (this.isInteractive(element)) {
-            this.translateAttribute(element, 'title', 'title');
-            this.translateAttribute(element, 'aria-label', 'aria-label');
-            if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
-                this.translateAttribute(element, 'placeholder', 'placeholder');
-            }
+            const tag = element.tagName.toLowerCase();
+            const role = (element.getAttribute('role') || '').toLowerCase();
+            const isKnownLeafControl = ['button', 'label', 'summary', 'input', 'textarea', 'select'].includes(tag);
+            const isRoleLeaf = role === 'button' || role === 'tab';
+            const isLink = tag === 'a' || role === 'link';
+            // For leaf controls and simple interactive labels: translate safely in-place and stop.
+            // For interactive containers (cards, composite widgets): translate attributes and recurse to children.
+            const shouldRecurse = (!isKnownLeafControl && !isRoleLeaf && !isLink) ||
+                ((isLink || isRoleLeaf) && this.isLargeInteractiveContainer(element));
+            this.translateInteractive(element);
+            if (!shouldRecurse)
+                return;
         }
         // Semantic boundaries - translate these as complete units
         const SEMANTIC_BOUNDARIES = new Set([
@@ -498,86 +582,68 @@ export class Translator {
             }
             // STEP 1: Mark all child elements before extraction
             const markedElements = this.markElements(element);
-            // Extract content with DOM processing
-            const content = this.extractTranslatableContent(element);
-            // Skip if no valid content
-            if (!content.processedText || content.processedText.length <= 1) {
-                return;
-            }
-            // Store original processed text for comparison
-            const originalTextAttr = element.getAttribute('data-Lovalingo-original');
-            if (!originalTextAttr) {
-                element.setAttribute('data-Lovalingo-original', content.processedText);
-            }
-            // CRITICAL FIX: Always use stored original text, not current DOM state
-            const sourceText = originalTextAttr || content.processedText;
-            // LAYER 4: Pre-translation validation
-            if (!this.isTranslatableText(sourceText)) {
-                console.log('[Lovalingo] ⏭️ Skipping non-translatable content:', sourceText.substring(0, 50));
-                return;
-            }
-            // Try to find translation
-            const translated = this.translationMap.get(sourceText);
-            if (translated) {
-                console.log(`[Lovalingo] ✅ Translating: "${sourceText.substring(0, 50)}..." → "${translated.substring(0, 50)}..."`);
-                // Reconstruct HTML with tokens replaced
-                let reconstructedHTML = this.reconstructHTML(translated, content.placeholderMap);
-                // LAYER 3: Check for leftover tokens and fallback to original
-                if (/__[A-Z]+_\d+__/.test(reconstructedHTML)) {
-                    console.warn('[Lovalingo] ⚠️ Tokens remain after reconstruction, using original HTML');
-                    reconstructedHTML = content.rawHTML; // Fallback to original
+            try {
+                const content = this.extractTranslatableContent(element);
+                // If there's no meaningful boundary content, recurse to children.
+                if (!content.processedText || content.processedText.length <= 1) {
+                    Array.from(element.children).forEach((child) => {
+                        if (child instanceof HTMLElement)
+                            this.translateElement(child);
+                    });
+                    return;
                 }
-                // STEP 2 & 3: Update element safely based on type
-                // Mark for MutationObserver suppression (prevents feedback loops on DOM updates).
-                element.setAttribute('data-Lovalingo-translating', '1');
-                setTimeout(() => {
-                    try {
-                        element.removeAttribute('data-Lovalingo-translating');
-                    }
-                    catch { }
-                }, 50);
-                if (element.tagName === 'BUTTON') {
-                    // For buttons: Check complexity first
-                    const hasSVG = element.querySelector('svg');
-                    const hasMultipleSpans = element.querySelectorAll('span').length > 2;
-                    if (hasSVG && hasMultipleSpans) {
-                        console.warn('[Lovalingo] ⚠️ Complex button detected, skipping DOM translation (AutoTranslate will handle)');
-                        return;
+                // Store original processed text for comparison
+                const originalTextAttr = element.getAttribute('data-Lovalingo-original');
+                if (!originalTextAttr) {
+                    element.setAttribute('data-Lovalingo-original', content.processedText);
+                }
+                // Always use stored original text, not current DOM state
+                const sourceText = originalTextAttr || content.processedText;
+                // If boundary isn't translatable, recurse to children.
+                if (!this.isTranslatableText(sourceText)) {
+                    console.log('[Lovalingo] ⏭️ Skipping non-translatable content:', sourceText.substring(0, 50));
+                    Array.from(element.children).forEach((child) => {
+                        if (child instanceof HTMLElement)
+                            this.translateElement(child);
+                    });
+                    return;
+                }
+                const translated = this.translationMap.get(sourceText);
+                if (translated) {
+                    console.log(`[Lovalingo] ✅ Translating: "${sourceText.substring(0, 50)}..." → "${translated.substring(0, 50)}..."`);
+                    let reconstructedHTML = this.reconstructHTML(translated, content.placeholderMap);
+                    if (/__[A-Z0-9_]+__/.test(reconstructedHTML)) {
+                        console.warn('[Lovalingo] ⚠️ Tokens remain after reconstruction, using original HTML');
+                        reconstructedHTML = content.rawHTML;
                     }
-                    // For buttons: ONLY update text nodes, never touch DOM structure
-                    console.log(`[Lovalingo] 🔘 Button translation (text-only): "${sourceText.substring(0, 50)}..." → "${translated.substring(0, 50)}..."`);
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = reconstructedHTML;
-                    this.updateTextNodesOnly(element, tempDiv);
+                    // Mark for MutationObserver suppression (prevents feedback loops on DOM updates).
+                    element.setAttribute('data-Lovalingo-translating', '1');
+                    setTimeout(() => {
+                        element.removeAttribute('data-Lovalingo-translating');
+                    }, 50);
+                    // Full reconstruction + live-node transplant.
+                    this.updateElementChildren(element, reconstructedHTML, markedElements);
+                    // Translate interactive descendants safely (preserves event handlers)
+                    const interactiveSelector = 'button, a, label, input, textarea, select, [role="button"], [role="link"], [contenteditable], [contenteditable="true"], [tabindex]';
+                    element.querySelectorAll(interactiveSelector).forEach(el => {
+                        if (el instanceof HTMLElement)
+                            this.translateInteractive(el);
+                    });
                 }
                 else {
-                    // For other elements: Full reconstruction
-                    this.updateElementChildren(element, reconstructedHTML, markedElements);
+                    console.log(`[Lovalingo] ❌ Miss: "${sourceText.substring(0, 80)}..."`);
+                    if (sourceText.length < 5000 && this.isTranslatableText(sourceText)) {
+                        this.missedStrings.set(sourceText, {
+                            text: sourceText,
+                            raw: content.rawHTML,
+                            placeholderMap: this.sanitizePlaceholderMap(content.placeholderMap),
+                            semanticContext: content.semanticContext
+                        });
+                    }
                 }
-                // Clean up preserve IDs
-                element.querySelectorAll('[data-Lovalingo-preserve-id]').forEach(el => {
-                    el.removeAttribute('data-Lovalingo-preserve-id');
-                });
-                // Translate interactive descendants safely (preserves event handlers)
-                const interactiveSelector = 'button, a, label, input, textarea, select, [role="button"], [role="link"], [contenteditable], [contenteditable="true"], [tabindex]';
-                element.querySelectorAll(interactiveSelector).forEach(el => {
-                    if (el instanceof HTMLElement)
-                        this.translateInteractive(el);
-                });
             }
-            else {
-                // Track as miss
-                console.log(`[Lovalingo] ❌ Miss: "${sourceText.substring(0, 80)}..."`);
-                // LAYER 2: Only queue translatable content
-                if (sourceText.length < 5000 && this.isTranslatableText(sourceText)) {
-                    // Use sourceText (original) as key for automatic deduplication
-                    this.missedStrings.set(sourceText, {
-                        text: sourceText,
-                        raw: content.rawHTML,
-                        placeholderMap: content.placeholderMap,
-                        semanticContext: content.semanticContext
-                    });
-                }
+            finally {
+                this.cleanupPreserveIds(element, markedElements);
             }
             return; // Don't process children if we handled the boundary
         }
@@ -595,72 +661,53 @@ export class Translator {
             }
             // Mark all child elements before extraction
             const markedElements = this.markElements(element);
-            // Extract content with DOM processing
-            const content = this.extractTranslatableContent(element);
-            // Skip if no valid content
-            if (!content.processedText || content.processedText.length <= 1) {
-                return;
-            }
-            // Store original processed text
-            const originalTextAttr = element.getAttribute('data-Lovalingo-original');
-            if (!originalTextAttr) {
-                element.setAttribute('data-Lovalingo-original', content.processedText);
-            }
-            // Use stored original text
-            const sourceText = originalTextAttr || content.processedText;
-            // Validate
-            if (!this.isTranslatableText(sourceText)) {
-                console.log('[Lovalingo] ⏭️ Skipping non-translatable content (generic):', sourceText.substring(0, 50));
-                return;
-            }
-            // Try to find translation
-            const translated = this.translationMap.get(sourceText);
-            if (translated) {
-                console.log(`[Lovalingo] ✅ Generic semantic: "${sourceText.substring(0, 50)}..." → "${translated.substring(0, 50)}..."`);
-                // Reconstruct HTML with tokens replaced
-                let reconstructedHTML = this.reconstructHTML(translated, content.placeholderMap);
-                // Check for leftover tokens
-                if (/__[A-Z]+_\d+__/.test(reconstructedHTML)) {
-                    console.warn('[Lovalingo] ⚠️ Tokens remain (generic), using original HTML');
-                    reconstructedHTML = content.rawHTML;
+            try {
+                const content = this.extractTranslatableContent(element);
+                // Skip if no valid content
+                if (!content.processedText || content.processedText.length <= 1) {
+                    return;
                 }
-                // Update element based on type
-                if (element.tagName === 'BUTTON') {
-                    const hasSVG = element.querySelector('svg');
-                    const hasMultipleSpans = element.querySelectorAll('span').length > 2;
-                    if (hasSVG && hasMultipleSpans) {
-                        console.warn('[Lovalingo] ⚠️ Complex button (generic), skipping');
-                        return;
+                // Store original processed text
+                const originalTextAttr = element.getAttribute('data-Lovalingo-original');
+                if (!originalTextAttr) {
+                    element.setAttribute('data-Lovalingo-original', content.processedText);
+                }
+                // Use stored original text
+                const sourceText = originalTextAttr || content.processedText;
+                if (!this.isTranslatableText(sourceText)) {
+                    console.log('[Lovalingo] ⏭️ Skipping non-translatable content (generic):', sourceText.substring(0, 50));
+                    return;
+                }
+                const translated = this.translationMap.get(sourceText);
+                if (translated) {
+                    console.log(`[Lovalingo] ✅ Generic semantic: "${sourceText.substring(0, 50)}..." → "${translated.substring(0, 50)}..."`);
+                    let reconstructedHTML = this.reconstructHTML(translated, content.placeholderMap);
+                    if (/__[A-Z0-9_]+__/.test(reconstructedHTML)) {
+                        console.warn('[Lovalingo] ⚠️ Tokens remain (generic), using original HTML');
+                        reconstructedHTML = content.rawHTML;
                     }
-                    const tempDiv = document.createElement('div');
-                    tempDiv.innerHTML = reconstructedHTML;
-                    this.updateTextNodesOnly(element, tempDiv);
+                    this.updateElementChildren(element, reconstructedHTML, markedElements);
+                    // Translate interactive descendants
+                    const interactiveSelector = 'button, a, label, input, textarea, select, [role="button"], [role="link"], [contenteditable], [contenteditable="true"], [tabindex]';
+                    element.querySelectorAll(interactiveSelector).forEach(el => {
+                        if (el instanceof HTMLElement)
+                            this.translateInteractive(el);
+                    });
                 }
                 else {
-                    this.updateElementChildren(element, reconstructedHTML, markedElements);
+                    console.log(`[Lovalingo] ❌ Miss (generic): "${sourceText.substring(0, 80)}..."`);
+                    if (sourceText.length < 5000 && this.isTranslatableText(sourceText)) {
+                        this.missedStrings.set(sourceText, {
+                            text: sourceText,
+                            raw: content.rawHTML,
+                            placeholderMap: this.sanitizePlaceholderMap(content.placeholderMap),
+                            semanticContext: element.tagName.toLowerCase()
+                        });
+                    }
                 }
-                // Clean up preserve IDs
-                element.querySelectorAll('[data-Lovalingo-preserve-id]').forEach(el => {
-                    el.removeAttribute('data-Lovalingo-preserve-id');
-                });
-                // Translate interactive descendants
-                const interactiveSelector = 'button, a, label, input, textarea, select, [role="button"], [role="link"], [contenteditable], [contenteditable="true"], [tabindex]';
-                element.querySelectorAll(interactiveSelector).forEach(el => {
-                    if (el instanceof HTMLElement)
-                        this.translateInteractive(el);
-                });
             }
-            else {
-                // Track as miss
-                console.log(`[Lovalingo] ❌ Miss (generic): "${sourceText.substring(0, 80)}..."`);
-                if (sourceText.length < 5000 && this.isTranslatableText(sourceText)) {
-                    this.missedStrings.set(sourceText, {
-                        text: sourceText,
-                        raw: content.rawHTML,
-                        placeholderMap: content.placeholderMap,
-                        semanticContext: element.tagName.toLowerCase()
-                    });
-                }
+            finally {
+                this.cleanupPreserveIds(element, markedElements);
             }
             return; // Don't recurse to children
         }
@@ -695,33 +742,42 @@ export class Translator {
      * Translate interactive element safely (preserves event handlers)
      */
     translateInteractive(el) {
+        const tag = el.tagName;
+        const role = (el.getAttribute('role') || '').toLowerCase();
+        // Always translate common interactive attributes.
+        this.translateAttribute(el, 'title', 'title');
+        this.translateAttribute(el, 'aria-label', 'aria-label');
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+            this.translateAttribute(el, 'placeholder', 'placeholder');
+            return;
+        }
+        // For large interactive containers, let nested semantic nodes handle visible text.
+        if ((tag === 'A' || role === 'link' || role === 'button' || role === 'tab') && el.children.length > 0 && this.isLargeInteractiveContainer(el)) {
+            return;
+        }
         // Idempotently store original plain text once
         const plainOriginalKey = 'data-Lovalingo-original';
         if (!el.getAttribute(plainOriginalKey)) {
             el.setAttribute(plainOriginalKey, (el.textContent || '').trim());
         }
-        const tag = el.tagName;
-        const role = el.getAttribute('role');
-        // For complex interactive containers (e.g. <a> wrapping a whole card), do NOT rewrite structure.
-        // We only translate attributes and let child semantic nodes handle visible text.
-        if ((tag === 'A' || role === 'link') && el.children.length > 0) {
-            this.translateAttribute(el, 'title', 'title');
-            this.translateAttribute(el, 'aria-label', 'aria-label');
-            return;
-        }
         // Translate text nodes for label-like elements (only safe for simple/leaf controls)
-        if (tag === 'BUTTON' || tag === 'A' || tag === 'LABEL' || role === 'button' || role === 'link') {
+        if (tag === 'BUTTON' || tag === 'A' || tag === 'LABEL' || tag === 'SUMMARY' || role === 'button' || role === 'link') {
             const content = this.extractTranslatableContent(el);
             const tokenizedKeyAttr = 'data-Lovalingo-original-tokenized';
-            const tokenized = content.processedText;
-            if (!el.getAttribute(tokenizedKeyAttr) && tokenized) {
-                el.setAttribute(tokenizedKeyAttr, tokenized);
+            const tokenized = (el.getAttribute(tokenizedKeyAttr) || content.processedText || '').trim();
+            if (!el.getAttribute(tokenizedKeyAttr) && content.processedText) {
+                el.setAttribute(tokenizedKeyAttr, content.processedText);
             }
             const plainOriginal = el.getAttribute(plainOriginalKey) || (el.textContent || '').trim();
             const source = (tokenized && this.isTranslatableText(tokenized)) ? tokenized : plainOriginal;
             if (this.isTranslatableText(source)) {
                 const translated = this.translationMap.get(source);
                 if (translated) {
+                    // Ensure restoreDOM can revert translated controls.
+                    const nearestOriginalHtml = el.closest?.('[data-Lovalingo-original-html]');
+                    if ((!nearestOriginalHtml || nearestOriginalHtml === el) && !el.getAttribute('data-Lovalingo-original-html')) {
+                        el.setAttribute('data-Lovalingo-original-html', el.innerHTML);
+                    }
                     const temp = document.createElement('div');
                     temp.innerHTML = this.reconstructHTML(translated, content.placeholderMap);
                     this.updateTextNodesOnly(el, temp);
@@ -731,21 +787,11 @@ export class Translator {
                     this.missedStrings.set(source, {
                         text: source,
                         raw: content.rawHTML,
-                        placeholderMap: content.placeholderMap,
+                        placeholderMap: this.sanitizePlaceholderMap(content.placeholderMap),
                         semanticContext: tag.toLowerCase()
                     });
                 }
             }
-            // Translate attributes
-            this.translateAttribute(el, 'title', 'title');
-            this.translateAttribute(el, 'aria-label', 'aria-label');
-            return;
-        }
-        // Inputs/Textareas/Selects: attributes only
-        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
-            this.translateAttribute(el, 'placeholder', 'placeholder');
-            this.translateAttribute(el, 'title', 'title');
-            this.translateAttribute(el, 'aria-label', 'aria-label');
         }
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovalingo/lovalingo",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "React translation library with automatic routing, real-time AI translation, and zero-flash rendering. One-line language routing setup.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",