@tagadapay/plugin-sdk 3.1.5 → 3.1.9

package/dist/v2/core/utils/previewMode.js

@@ -34,6 +34,8 @@ const STORAGE_KEYS = {
     FORCE_RESET: 'tgd_force_reset',
     CLIENT_ENV: 'tgd_client_env',
     CLIENT_BASE_URL: 'tgd_client_base_url',
+    CURRENCY: 'tgd_currency',
+    LOCALE: 'tgd_locale',
 };
 /**
  * Check if force reset is active (simulates hard refresh)
@@ -82,10 +84,16 @@ function getFromCookie(key) {
 }
 /**
  * Set value in cookie
+ * ⚠️ NEVER allows tgd_draft to be set as a cookie (localStorage-only)
  */
 function setInCookie(key, value, maxAge = 86400) {
     if (typeof document === 'undefined')
         return;
+    // 🛡️ SAFETY: Block tgd_draft from EVER being written to cookies
+    if (key === 'tgd_draft' || key === 'tgd-draft') {
+        console.warn(`🛡️ [SDK] Blocked attempt to set ${key} as cookie - this should only be in localStorage`);
+        return;
+    }
     document.cookie = `${key}=${value}; path=/; max-age=${maxAge}`;
 }
 /**
@@ -105,14 +113,14 @@ export function getSDKParams() {
         return {};
     }
     const urlParams = new URLSearchParams(window.location.search);
-    // Get draft mode (URL > localStorage > cookie)
+    // Get draft mode (URL > localStorage only - no cookie fallback to avoid resurrection)
     let draft;
     const urlDraft = urlParams.get('draft');
     if (urlDraft !== null) {
         draft = urlDraft === 'true';
     }
     else {
-        const storageDraft = getFromStorage(STORAGE_KEYS.DRAFT) || getFromCookie(STORAGE_KEYS.DRAFT);
+        const storageDraft = getFromStorage(STORAGE_KEYS.DRAFT);
         if (storageDraft !== null) {
             draft = storageDraft === 'true';
         }
@@ -135,6 +143,12 @@ export function getSDKParams() {
     const funnelSessionId = urlParams.get('funnelSessionId') || null;
     // Get funnel ID (URL only)
     const funnelId = urlParams.get('funnelId') || null;
+    // Get funnel environment (URL only - not persisted, set on entry)
+    let funnelEnv;
+    const urlFunnelEnv = urlParams.get('funnelEnv');
+    if (urlFunnelEnv && (urlFunnelEnv === 'staging' || urlFunnelEnv === 'production')) {
+        funnelEnv = urlFunnelEnv;
+    }
     // Force reset is URL-only (not persisted)
     const forceReset = urlParams.get('forceReset') === 'true';
     // Get client environment override (URL > localStorage > cookie)
@@ -161,6 +175,30 @@ export function getSDKParams() {
             tagadaClientBaseUrl = storageBaseUrl;
         }
     }
+    // Get display currency (URL > localStorage > cookie)
+    let currency;
+    const urlCurrency = urlParams.get('currency');
+    if (urlCurrency) {
+        currency = urlCurrency;
+    }
+    else {
+        const storageCurrency = getFromStorage(STORAGE_KEYS.CURRENCY) || getFromCookie(STORAGE_KEYS.CURRENCY);
+        if (storageCurrency) {
+            currency = storageCurrency;
+        }
+    }
+    // Get display locale (URL > localStorage > cookie)
+    let locale;
+    const urlLocale = urlParams.get('locale');
+    if (urlLocale) {
+        locale = urlLocale;
+    }
+    else {
+        const storageLocale = getFromStorage(STORAGE_KEYS.LOCALE) || getFromCookie(STORAGE_KEYS.LOCALE);
+        if (storageLocale) {
+            locale = storageLocale;
+        }
+    }
     return {
         forceReset,
         token,
@@ -168,8 +206,11 @@ export function getSDKParams() {
         funnelId,
         draft,
         funnelTracking,
+        funnelEnv,
         tagadaClientEnv,
         tagadaClientBaseUrl,
+        currency,
+        locale,
     };
 }
 /**
@@ -189,17 +230,21 @@ export function isDraftMode() {
 }
 /**
  * Set draft mode in storage for persistence
+ * ⚠️ ONLY writes to localStorage (not cookies) to avoid resurrection issues
  */
 export function setDraftMode(draft) {
     if (typeof window === 'undefined')
         return;
     if (draft) {
         setInStorage(STORAGE_KEYS.DRAFT, 'true');
-        setInCookie(STORAGE_KEYS.DRAFT, 'true', 86400); // 24 hours
     }
     else {
-        setInStorage(STORAGE_KEYS.DRAFT, 'false');
-        clearFromCookie(STORAGE_KEYS.DRAFT);
+        try {
+            localStorage.removeItem(STORAGE_KEYS.DRAFT);
+        }
+        catch {
+            // Storage not available
+        }
     }
 }
 /**
@@ -214,6 +259,13 @@ export function setDraftMode(draft) {
  * @returns True if force reset was activated and state was cleared
  */
 export function handlePreviewMode(debugMode = false) {
+    // 🔒 CRITICAL: Read URL token DIRECTLY first before any getSDKParams()
+    // This ensures we have the URL token before any clearing happens
+    let urlToken = null;
+    if (typeof window !== 'undefined') {
+        const urlParams = new URLSearchParams(window.location.search);
+        urlToken = urlParams.get('token');
+    }
     const params = getSDKParams();
     const shouldReset = params.forceReset || false;
     if (!shouldReset && !params.token) {
@@ -224,6 +276,7 @@ export function handlePreviewMode(debugMode = false) {
     }
     if (debugMode) {
         console.log('[SDK] Detected params:', params);
+        console.log('[SDK] URL token (direct read):', urlToken ? urlToken.substring(0, 20) + '...' : 'none');
     }
     // CASE 1: Force reset - clear all state (simulates hard refresh)
     if (shouldReset) {
@@ -246,23 +299,28 @@ export function handlePreviewMode(debugMode = false) {
         }
     }
     // CASE 2: Token in URL - override stored token
-    if (params.token !== null && params.token !== undefined) {
+    // 🔒 CRITICAL: Use the directly-read URL token to avoid any race conditions
+    const tokenToSet = urlToken || params.token;
+    if (tokenToSet !== null && tokenToSet !== undefined) {
         if (debugMode) {
-            console.log('[SDK] Using token from URL:', params.token.substring(0, 20) + '...');
+            console.log('[SDK] Setting token from URL:', tokenToSet.substring(0, 20) + '...');
         }
-        if (params.token === '' || params.token === 'null') {
+        if (tokenToSet === '' || tokenToSet === 'null') {
             // Explicitly cleared token
             clearClientToken();
         }
         else {
-            // Set token from URL
-            setClientToken(params.token);
+            // Set token from URL IMMEDIATELY after clearing
+            setClientToken(tokenToSet);
+            if (debugMode) {
+                console.log('[SDK] ✅ Token set in localStorage immediately after clear');
+            }
         }
     }
     else if (shouldReset) {
         // Force reset but no token = clear stored token
         if (debugMode) {
-            console.log('[SDK] Force reset mode (no token)');
+            console.log('[SDK] Force reset mode (no token in URL)');
         }
         clearClientToken();
     }
@@ -311,7 +369,7 @@ export function setFunnelTracking(enabled) {
         return;
     const value = enabled ? 'true' : 'false';
     setInStorage(STORAGE_KEYS.FUNNEL_TRACKING, value);
-    setInCookie(STORAGE_KEYS.FUNNEL_TRACKING, value, 86400); // 24 hours
+    setInCookie(STORAGE_KEYS.FUNNEL_TRACKING, value, 86400);
 }
 /**
  * Set client environment override in storage for persistence
@@ -320,7 +378,7 @@ export function setClientEnvironment(env) {
     if (typeof window === 'undefined')
         return;
     setInStorage(STORAGE_KEYS.CLIENT_ENV, env);
-    setInCookie(STORAGE_KEYS.CLIENT_ENV, env, 86400); // 24 hours
+    setInCookie(STORAGE_KEYS.CLIENT_ENV, env, 86400);
 }
 /**
  * Clear client environment override
@@ -343,7 +401,7 @@ export function setClientBaseUrl(baseUrl) {
     if (typeof window === 'undefined')
         return;
     setInStorage(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl);
-    setInCookie(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl, 86400); // 24 hours
+    setInCookie(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl, 86400);
 }
 /**
  * Clear custom API base URL override

package/dist/v2/core/utils/previewModeIndicator.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Preview Mode Indicator - Auto-injected DOM element
+ *
+ * Automatically injects a visual indicator when SDK is in preview/draft mode
+ * Works with vanilla JS/DOM - no React required
+ */
+/**
+ * Inject the preview mode indicator into the DOM
+ * Called automatically during SDK initialization if preview mode is active
+ */
+export declare function injectPreviewModeIndicator(): void;
+/**
+ * Remove the preview mode indicator from the DOM
+ */
+export declare function removePreviewModeIndicator(): void;
+/**
+ * Check if indicator is currently injected
+ */
+export declare function isIndicatorInjected(): boolean;

package/dist/v2/core/utils/previewModeIndicator.js

@@ -0,0 +1,414 @@
+/**
+ * Preview Mode Indicator - Auto-injected DOM element
+ *
+ * Automatically injects a visual indicator when SDK is in preview/draft mode
+ * Works with vanilla JS/DOM - no React required
+ */
+import { isDraftMode, isFunnelTrackingEnabled, getSDKParams, clearClientEnvironment, clearClientBaseUrl } from './previewMode';
+import { clearClientToken } from './tokenStorage';
+import { clearFunnelSessionCookie } from './sessionStorage';
+let indicatorElement = null;
+let isInjected = false;
+/**
+ * Helper to clear a specific cookie with all possible domain/path combinations
+ */
+function clearSpecificCookie(cookieName) {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    const hostname = window.location.hostname;
+    const parts = hostname.split('.');
+    // All possible domains
+    const domains = [
+        '', // No domain (current)
+        hostname, // Full hostname
+        '.' + hostname, // Wildcard current
+    ];
+    // Add parent domains
+    for (let i = 1; i < parts.length; i++) {
+        const domain = parts.slice(i).join('.');
+        domains.push(domain);
+        domains.push('.' + domain);
+    }
+    // All possible paths
+    const pathParts = window.location.pathname.split('/').filter(p => p);
+    const paths = ['/'];
+    let currentPath = '';
+    pathParts.forEach(part => {
+        currentPath += '/' + part;
+        paths.push(currentPath);
+    });
+    // Try all combinations
+    domains.forEach(domain => {
+        paths.forEach(path => {
+            const baseDelete = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
+            const domainPart = domain ? `; domain=${domain}` : '';
+            // Try all security flag variations
+            document.cookie = baseDelete + domainPart;
+            document.cookie = baseDelete + domainPart + '; secure';
+            document.cookie = baseDelete + domainPart + '; SameSite=None; secure';
+            document.cookie = baseDelete + domainPart + '; SameSite=Lax';
+            document.cookie = baseDelete + domainPart + '; SameSite=Strict';
+        });
+    });
+}
+/**
+ * Leave preview mode - Clear ALL storage (including Shopify cookies, all localStorage, etc.) and reload
+ * ⚠️ Nuclear option - clears everything to exit preview mode completely
+ */
+function leavePreviewMode() {
+    if (typeof window === 'undefined')
+        return;
+    const confirmed = confirm('🚪 Leave Preview Mode?\n\nThis will clear ALL cookies and localStorage (including Shopify session, cart, and preview settings) and reload the page.\n\nAre you sure?');
+    if (!confirmed)
+        return;
+    // STEP 0: Remove ALL preview params from URL immediately
+    const url = new URL(window.location.href);
+    const previewParams = [
+        'draft', 'funnelEnv', 'funnelTracking', 'tagadaClientEnv',
+        'tagadaClientBaseUrl', 'forceReset', 'funnelId', 'funnelSessionId', 'token',
+    ];
+    previewParams.forEach(param => url.searchParams.delete(param));
+    window.history.replaceState({}, '', url.href);
+    // STEP 0.5: Install global cookie blocker for tgd_draft
+    try {
+        const cookieDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie') ||
+            Object.getOwnPropertyDescriptor(HTMLDocument.prototype, 'cookie');
+        if (cookieDescriptor && cookieDescriptor.set) {
+            Object.defineProperty(document, 'cookie', {
+                configurable: true,
+                enumerable: true,
+                get: function () { return cookieDescriptor.get ? cookieDescriptor.get.call(this) : ''; },
+                set: function (val) {
+                    if (typeof val === 'string') {
+                        const normalizedVal = val.toLowerCase();
+                        if (normalizedVal.includes('tgd_draft') ||
+                            normalizedVal.includes('tgd-draft') ||
+                            normalizedVal.includes('tgd.draft') ||
+                            normalizedVal.includes('tgddraft')) {
+                            // Allow deletion attempts
+                            if (normalizedVal.includes('max-age=0') ||
+                                normalizedVal.includes('expires=thu, 01 jan 1970')) {
+                                if (cookieDescriptor.set) {
+                                    cookieDescriptor.set.call(this, val);
+                                }
+                                return;
+                            }
+                            // Block all creation/update attempts
+                            console.warn('🛡️ [TagadaPay] BLOCKED: tgd_draft should never be a cookie');
+                            return;
+                        }
+                    }
+                    if (cookieDescriptor.set) {
+                        cookieDescriptor.set.call(this, val);
+                    }
+                }
+            });
+        }
+    }
+    catch (e) {
+        console.warn('[TagadaPay] Could not install cookie blocker:', e);
+    }
+    // STEP 1: Clear TagadaPay localStorage keys
+    if (window.localStorage) {
+        try {
+            localStorage.removeItem('tgd_draft');
+            localStorage.removeItem('tgd_funnel_tracking');
+            localStorage.removeItem('tgd_client_env');
+            localStorage.removeItem('tgd_client_base_url');
+            localStorage.removeItem('cms_token');
+        }
+        catch (e) {
+            console.warn('[TagadaPay] Failed to clear some localStorage keys:', e);
+        }
+    }
+    // Clear SDK utilities
+    clearClientToken();
+    clearFunnelSessionCookie();
+    clearClientEnvironment();
+    clearClientBaseUrl();
+    // STEP 2: Clear ALL storage
+    if (window.localStorage) {
+        localStorage.clear();
+    }
+    if (window.sessionStorage) {
+        sessionStorage.clear();
+    }
+    // STEP 3: Clear known TagadaPay cookies
+    const tagadaCookies = [
+        'tgd-funnel-session-id', 'tgd_draft', 'tgd_funnel_tracking',
+        'tgd_client_env', 'tgd_client_base_url', 'cms_token', 'tagadapay_session',
+    ];
+    tagadaCookies.forEach(cookieName => clearSpecificCookie(cookieName));
+    // STEP 3.5: Clear alternative cookie name formats
+    const alternativeNames = ['tgd-draft', 'tgd_draft', 'tgd.draft', 'tgddraft'];
+    alternativeNames.forEach(cookieName => clearSpecificCookie(cookieName));
+    // STEP 4: Clear ALL remaining cookies aggressively
+    if (document.cookie) {
+        const cookies = document.cookie.split(';');
+        cookies.forEach(cookie => {
+            const cookieName = cookie.split('=')[0].trim();
+            if (!cookieName)
+                return;
+            const hostname = window.location.hostname;
+            const parts = hostname.split('.');
+            const domains = ['', hostname, '.' + hostname];
+            for (let i = 1; i < parts.length; i++) {
+                const domain = parts.slice(i).join('.');
+                domains.push(domain);
+                domains.push('.' + domain);
+            }
+            const pathParts = window.location.pathname.split('/').filter(p => p);
+            const paths = ['/'];
+            let currentPath = '';
+            pathParts.forEach(part => {
+                currentPath += '/' + part;
+                paths.push(currentPath);
+            });
+            domains.forEach(domain => {
+                paths.forEach(path => {
+                    const baseDelete = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
+                    const domainPart = domain ? `; domain=${domain}` : '';
+                    document.cookie = baseDelete + domainPart;
+                    document.cookie = baseDelete + domainPart + '; secure';
+                    document.cookie = baseDelete + domainPart + '; SameSite=None; secure';
+                    document.cookie = baseDelete + domainPart + '; SameSite=Lax';
+                    document.cookie = baseDelete + domainPart + '; SameSite=Strict';
+                    document.cookie = baseDelete + domainPart + '; secure; SameSite=None';
+                    document.cookie = baseDelete + domainPart + '; secure; SameSite=Lax';
+                    document.cookie = baseDelete + domainPart + '; secure; SameSite=Strict';
+                });
+            });
+        });
+    }
+    // Final cleanup and reload
+    setTimeout(() => {
+        if (window.localStorage && localStorage.length > 0) {
+            localStorage.clear();
+        }
+        clearSpecificCookie('tgd_draft');
+        if (typeof window.stop === 'function') {
+            window.stop();
+        }
+        window.location.replace(url.href);
+    }, 10);
+}
+/**
+ * Inject the preview mode indicator into the DOM
+ * Called automatically during SDK initialization if preview mode is active
+ */
+export function injectPreviewModeIndicator() {
+    // Skip if already injected or not in browser
+    if (isInjected || typeof window === 'undefined' || typeof document === 'undefined') {
+        return;
+    }
+    const params = getSDKParams();
+    const draftMode = isDraftMode();
+    const trackingDisabled = !isFunnelTrackingEnabled();
+    const hasCustomEnv = !!(params.tagadaClientEnv || params.tagadaClientBaseUrl);
+    // Only inject if in preview/dev mode
+    if (!draftMode && !trackingDisabled && !hasCustomEnv) {
+        return;
+    }
+    // Create container
+    const container = document.createElement('div');
+    container.id = 'tgd-preview-indicator';
+    container.style.cssText = `
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    `;
+    // Create badge
+    const badge = document.createElement('div');
+    badge.style.cssText = `
+        background: ${draftMode ? '#ff9500' : '#007aff'};
+        color: white;
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    `;
+    badge.innerHTML = `
+        <span style="font-size: 16px;">🔍</span>
+        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
+    `;
+    // Create details popup (with padding-top to bridge gap with badge)
+    const details = document.createElement('div');
+    details.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 8px);
+        right: 0;
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        padding: 12px;
+        min-width: 250px;
+        font-size: 12px;
+        line-height: 1.5;
+        display: none;
+    `;
+    details.style.paddingTop = '20px'; // Extra padding to bridge the gap
+    // Add invisible bridge between badge and popup to prevent flickering
+    const bridge = document.createElement('div');
+    bridge.style.cssText = `
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 8px;
+        display: none;
+    `;
+    // Build details content
+    let detailsHTML = '<div style="margin-bottom: 8px; font-weight: 600; color: #1d1d1f;">Current Environment</div>';
+    detailsHTML += '<div style="display: flex; flex-direction: column; gap: 6px;">';
+    if (draftMode) {
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Draft Mode:</span>
+                <span style="color: #ff9500; font-weight: 600;">ON</span>
+            </div>
+        `;
+    }
+    if (trackingDisabled) {
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Tracking:</span>
+                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
+            </div>
+        `;
+    }
+    if (params.funnelEnv) {
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Funnel Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.funnelEnv}
+                </span>
+            </div>
+        `;
+    }
+    if (params.tagadaClientEnv) {
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>API Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.tagadaClientEnv}
+                </span>
+            </div>
+        `;
+    }
+    if (params.tagadaClientBaseUrl) {
+        detailsHTML += `
+            <div style="color: #86868b;">
+                <div style="margin-bottom: 4px;">API URL:</div>
+                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.tagadaClientBaseUrl}
+                </div>
+            </div>
+        `;
+    }
+    if (params.funnelId) {
+        detailsHTML += `
+            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                <div style="margin-bottom: 4px;">Funnel ID:</div>
+                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.funnelId}
+                </div>
+            </div>
+        `;
+    }
+    detailsHTML += '</div>';
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
+            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
+        </div>
+    `;
+    // Add action button
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+            <button id="tgd-leave-preview" style="
+                background: #ff3b30;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: opacity 0.2s;
+                width: 100%;
+            ">
+                🚪 Leave Preview Mode
+            </button>
+        </div>
+    `;
+    details.innerHTML = detailsHTML;
+    // Hover behavior - keep popup visible when hovering over badge, bridge, or popup
+    let isHovering = false;
+    const showDetails = () => {
+        isHovering = true;
+        details.style.display = 'block';
+        bridge.style.display = 'block';
+    };
+    const hideDetails = () => {
+        isHovering = false;
+        setTimeout(() => {
+            if (!isHovering) {
+                details.style.display = 'none';
+                bridge.style.display = 'none';
+            }
+        }, 100); // Small delay to allow moving between elements
+    };
+    badge.addEventListener('mouseenter', showDetails);
+    badge.addEventListener('mouseleave', hideDetails);
+    bridge.addEventListener('mouseenter', showDetails);
+    bridge.addEventListener('mouseleave', hideDetails);
+    details.addEventListener('mouseenter', showDetails);
+    details.addEventListener('mouseleave', hideDetails);
+    // Button: Leave preview mode
+    const leavePreviewBtn = details.querySelector('#tgd-leave-preview');
+    if (leavePreviewBtn) {
+        leavePreviewBtn.addEventListener('mouseenter', () => {
+            leavePreviewBtn.style.opacity = '0.8';
+        });
+        leavePreviewBtn.addEventListener('mouseleave', () => {
+            leavePreviewBtn.style.opacity = '1';
+        });
+        leavePreviewBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            leavePreviewMode();
+        });
+    }
+    // Assemble
+    container.appendChild(badge);
+    container.appendChild(bridge); // Add invisible bridge
+    container.appendChild(details);
+    // Inject into DOM
+    document.body.appendChild(container);
+    indicatorElement = container;
+    isInjected = true;
+}
+/**
+ * Remove the preview mode indicator from the DOM
+ */
+export function removePreviewModeIndicator() {
+    if (indicatorElement && indicatorElement.parentNode) {
+        indicatorElement.parentNode.removeChild(indicatorElement);
+        indicatorElement = null;
+        isInjected = false;
+    }
+}
+/**
+ * Check if indicator is currently injected
+ */
+export function isIndicatorInjected() {
+    return isInjected;
+}

package/dist/v2/core/utils/tokenStorage.d.ts

@@ -3,6 +3,10 @@
  */
 /**
  * Set the CMS token in localStorage
+ *
+ * IMPORTANT: Browser's native 'storage' event ONLY fires for changes in OTHER tabs/windows.
+ * For same-tab updates to trigger storage listeners, we must manually dispatch the event.
+ * We only dispatch if the token actually changed to minimize unnecessary events.
  */
 export declare function setClientToken(token: string): void;
 /**

package/dist/v2/core/utils/tokenStorage.js

@@ -4,12 +4,26 @@
 const TOKEN_KEY = 'cms_token';
 /**
  * Set the CMS token in localStorage
+ *
+ * IMPORTANT: Browser's native 'storage' event ONLY fires for changes in OTHER tabs/windows.
+ * For same-tab updates to trigger storage listeners, we must manually dispatch the event.
+ * We only dispatch if the token actually changed to minimize unnecessary events.
  */
 export function setClientToken(token) {
     if (typeof window !== 'undefined') {
         try {
+            // Check if token actually changed to avoid unnecessary events and potential loops
+            const currentToken = localStorage.getItem(TOKEN_KEY);
+            const tokenChanged = currentToken !== token;
             localStorage.setItem(TOKEN_KEY, token);
-            window.dispatchEvent(new Event('storage'));
+            // Only dispatch if token actually changed
+            // The storage event listeners have guards to prevent infinite loops:
+            // - They check if token hasn't changed (client.ts line 261)
+            // - They check if initialization is in progress (client.ts line 269)
+            // - They check retry limits (client.ts line 277)
+            if (tokenChanged) {
+                window.dispatchEvent(new Event('storage'));
+            }
         }
         catch (error) {
             console.error('Failed to save token to localStorage:', error);