playkit-sdk 1.2.5 → 1.2.6

package/dist/playkit-sdk.cjs.js

@@ -1,5 +1,5 @@
 /**
- * playkit-sdk v1.2.5
+ * playkit-sdk v1.2.6
  * PlayKit SDK for JavaScript
  * @license SEE LICENSE IN LICENSE
  */
@@ -264,7 +264,7 @@ class TokenStorage {
  * Will be removed in v2.0
  */
 // i18n translations
-const translations$1 = {
+const translations$2 = {
     en: {
         signIn: 'Sign In / Register',
         signInSubtitle: 'This game uses PlayKit for cost management.\nIf you don\'t have an account, we\'ll automatically register you. Sign up and get free AI game credits!',
@@ -409,7 +409,7 @@ class AuthFlowManager extends EventEmitter {
      * Get translated text
      */
     t(key) {
-        return translations$1[this.currentLanguage][key];
+        return translations$2[this.currentLanguage][key];
     }
     /**
      * Start the authentication flow
@@ -1136,12 +1136,81 @@ class AuthFlowManager extends EventEmitter {
  * 3. Poll /api/device-auth/poll until authorized or error
  * 4. Return access token and refresh token
  */
+const translations$1 = {
+    en: {
+        loginToPlay: 'Login to Play',
+        loginWithPlayKit: 'uses PlayKit for secure login',
+        loginInNewWindow: 'Please complete login in the opened window',
+        cancel: 'Cancel',
+        close: 'Close',
+        loginDenied: 'Login Denied',
+        loginDeniedDesc: 'You have denied the authorization request',
+        sessionExpired: 'Session Expired',
+        sessionExpiredDesc: 'The login session has timed out. Please try again',
+        loginFailed: 'Login Failed',
+        loginFailedDesc: 'An error occurred during login. Please try again',
+    },
+    zh: {
+        loginToPlay: '登录开始游玩',
+        loginWithPlayKit: '使用 PlayKit 进行安全登录',
+        loginInNewWindow: '请在打开的窗口中完成登录',
+        cancel: '取消',
+        close: '关闭',
+        loginDenied: '登录被拒绝',
+        loginDeniedDesc: '您拒绝了授权请求',
+        sessionExpired: '会话已过期',
+        sessionExpiredDesc: '登录会话已超时，请重试',
+        loginFailed: '登录失败',
+        loginFailedDesc: '登录时发生错误，请重试',
+    },
+    'zh-TW': {
+        loginToPlay: '登入開始遊玩',
+        loginWithPlayKit: '使用 PlayKit 進行安全登入',
+        loginInNewWindow: '請在開啟的視窗中完成登入',
+        cancel: '取消',
+        close: '關閉',
+        loginDenied: '登入被拒絕',
+        loginDeniedDesc: '您拒絕了授權請求',
+        sessionExpired: '會話已過期',
+        sessionExpiredDesc: '登入會話已逾時，請重試',
+        loginFailed: '登入失敗',
+        loginFailedDesc: '登入時發生錯誤，請重試',
+    },
+    ja: {
+        loginToPlay: 'ログインしてプレイ',
+        loginWithPlayKit: 'PlayKit で安全にログイン',
+        loginInNewWindow: '開いたウィンドウでログインを完了してください',
+        cancel: 'キャンセル',
+        close: '閉じる',
+        loginDenied: 'ログインが拒否されました',
+        loginDeniedDesc: '認証リクエストが拒否されました',
+        sessionExpired: 'セッション期限切れ',
+        sessionExpiredDesc: 'ログインセッションがタイムアウトしました。もう一度お試しください',
+        loginFailed: 'ログイン失敗',
+        loginFailedDesc: 'ログイン中にエラーが発生しました。もう一度お試しください',
+    },
+    ko: {
+        loginToPlay: '로그인하여 플레이',
+        loginWithPlayKit: 'PlayKit으로 안전하게 로그인',
+        loginInNewWindow: '열린 창에서 로그인을 완료해 주세요',
+        cancel: '취소',
+        close: '닫기',
+        loginDenied: '로그인 거부됨',
+        loginDeniedDesc: '인증 요청을 거부하셨습니다',
+        sessionExpired: '세션 만료',
+        sessionExpiredDesc: '로그인 세션이 만료되었습니다. 다시 시도해 주세요',
+        loginFailed: '로그인 실패',
+        loginFailedDesc: '로그인 중 오류가 발생했습니다. 다시 시도해 주세요',
+    },
+};
 class DeviceAuthFlowManager extends EventEmitter {
     constructor(baseURL, gameId) {
         super();
         this.pollInterval = 5000; // Default 5 seconds
         this.pollTimeoutId = null;
         this.aborted = false;
+        this.currentLanguage = 'en';
+        this.currentModal = null;
         this.baseURL = baseURL;
         this.gameId = gameId;
     }
@@ -1172,6 +1241,303 @@ class DeviceAuthFlowManager extends EventEmitter {
         const base64 = btoa(String.fromCharCode(...buffer));
         return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
     }
+    /**
+     * Detect browser language and return matching translation key
+     * @private
+     */
+    detectLanguage() {
+        if (typeof navigator === 'undefined')
+            return 'en';
+        const lang = navigator.language || navigator.userLanguage || 'en';
+        // Check exact match first (e.g., 'zh-TW')
+        if (translations$1[lang])
+            return lang;
+        // Check base language (e.g., 'zh' from 'zh-CN')
+        const baseLang = lang.split('-')[0];
+        if (translations$1[baseLang])
+            return baseLang;
+        return 'en';
+    }
+    /**
+     * Get translation for a key
+     * @private
+     */
+    t(key) {
+        var _a;
+        return ((_a = translations$1[this.currentLanguage]) === null || _a === void 0 ? void 0 : _a[key]) || translations$1.en[key];
+    }
+    /**
+     * Show login modal and return promises for user interaction
+     * @private
+     */
+    showLoginModal(gameInfo) {
+        let resolveClicked;
+        let resolveCancelled;
+        const clicked = new Promise((resolve) => { resolveClicked = resolve; });
+        const cancelled = new Promise((resolve) => { resolveCancelled = resolve; });
+        // Create modal overlay
+        const overlay = document.createElement('div');
+        overlay.id = 'playkit-login-modal';
+        overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.48);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 999999;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    `;
+        // Create modal card
+        const card = document.createElement('div');
+        card.style.cssText = `
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-radius: 16px;
+      padding: 32px;
+      max-width: 400px;
+      width: 90%;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      text-align: center;
+    `;
+        // Game icon
+        const iconContainer = document.createElement('div');
+        iconContainer.style.cssText = `
+      width: 56px;
+      height: 56px;
+      margin: 0 auto 16px;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    `;
+        if (gameInfo.icon) {
+            const icon = document.createElement('img');
+            icon.src = gameInfo.icon;
+            icon.alt = gameInfo.name;
+            icon.style.cssText = 'width: 100%; height: 100%; object-fit: cover;';
+            iconContainer.appendChild(icon);
+        }
+        else {
+            // Default game icon
+            iconContainer.style.cssText += `
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 24px;
+      `;
+            iconContainer.textContent = '🎮';
+        }
+        card.appendChild(iconContainer);
+        // Game name
+        const gameName = document.createElement('h2');
+        gameName.textContent = gameInfo.name;
+        gameName.style.cssText = `
+      margin: 0 0 8px;
+      font-size: 20px;
+      font-weight: 600;
+      color: #1a1a1a;
+    `;
+        card.appendChild(gameName);
+        // Subtitle
+        const subtitle = document.createElement('p');
+        subtitle.id = 'playkit-modal-subtitle';
+        subtitle.textContent = this.t('loginWithPlayKit');
+        subtitle.style.cssText = `
+      margin: 0 0 24px;
+      font-size: 14px;
+      color: #666;
+    `;
+        card.appendChild(subtitle);
+        // Loading spinner (hidden initially)
+        const spinner = document.createElement('div');
+        spinner.id = 'playkit-modal-spinner';
+        spinner.style.cssText = `
+      display: none;
+      width: 32px;
+      height: 32px;
+      margin: 0 auto 16px;
+      border: 3px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: playkit-spin 1s linear infinite;
+    `;
+        card.appendChild(spinner);
+        // Add keyframes for spinner
+        const style = document.createElement('style');
+        style.textContent = `
+      @keyframes playkit-spin {
+        to { transform: rotate(360deg); }
+      }
+    `;
+        document.head.appendChild(style);
+        // Login button
+        const loginBtn = document.createElement('button');
+        loginBtn.id = 'playkit-modal-login-btn';
+        loginBtn.textContent = this.t('loginToPlay');
+        loginBtn.style.cssText = `
+      width: 100%;
+      padding: 12px 24px;
+      font-size: 16px;
+      font-weight: 500;
+      color: white;
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
+    `;
+        loginBtn.onmouseenter = () => {
+            loginBtn.style.boxShadow = '0 6px 8px -2px rgba(59, 130, 246, 0.4)';
+            loginBtn.style.transform = 'translateY(-1px)';
+        };
+        loginBtn.onmouseleave = () => {
+            loginBtn.style.boxShadow = '0 4px 6px -1px rgba(59, 130, 246, 0.3)';
+            loginBtn.style.transform = 'translateY(0)';
+        };
+        loginBtn.onmousedown = () => {
+            loginBtn.style.transform = 'scale(0.98)';
+        };
+        loginBtn.onmouseup = () => {
+            loginBtn.style.transform = 'translateY(-1px)';
+        };
+        loginBtn.onclick = () => {
+            // Switch to waiting state
+            loginBtn.style.display = 'none';
+            spinner.style.display = 'block';
+            subtitle.textContent = this.t('loginInNewWindow');
+            cancelBtn.style.display = 'block';
+            resolveClicked();
+        };
+        card.appendChild(loginBtn);
+        // Cancel button (hidden initially)
+        const cancelBtn = document.createElement('button');
+        cancelBtn.id = 'playkit-modal-cancel-btn';
+        cancelBtn.textContent = this.t('cancel');
+        cancelBtn.style.cssText = `
+      display: none;
+      width: 100%;
+      margin-top: 12px;
+      padding: 12px 24px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #666;
+      background: #f3f4f6;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    `;
+        cancelBtn.onmouseenter = () => {
+            cancelBtn.style.background = '#e5e7eb';
+        };
+        cancelBtn.onmouseleave = () => {
+            cancelBtn.style.background = '#f3f4f6';
+        };
+        cancelBtn.onclick = () => {
+            this.closeModal();
+            resolveCancelled();
+        };
+        card.appendChild(cancelBtn);
+        overlay.appendChild(card);
+        document.body.appendChild(overlay);
+        this.currentModal = overlay;
+        return { clicked, cancelled };
+    }
+    /**
+     * Close the login modal
+     * @private
+     */
+    closeModal() {
+        if (this.currentModal) {
+            this.currentModal.remove();
+            this.currentModal = null;
+        }
+    }
+    /**
+     * Show error state in the modal
+     * @private
+     */
+    showModalError(type, onClose) {
+        var _a, _b;
+        if (!this.currentModal)
+            return;
+        const subtitle = this.currentModal.querySelector('#playkit-modal-subtitle');
+        const spinner = this.currentModal.querySelector('#playkit-modal-spinner');
+        const cancelBtn = this.currentModal.querySelector('#playkit-modal-cancel-btn');
+        const card = this.currentModal.querySelector('div > div');
+        if (!subtitle || !card)
+            return;
+        // Get error messages based on type
+        let titleKey;
+        let descKey;
+        let iconColor;
+        switch (type) {
+            case 'denied':
+                titleKey = 'loginDenied';
+                descKey = 'loginDeniedDesc';
+                iconColor = '#ef4444'; // red-500
+                break;
+            case 'expired':
+                titleKey = 'sessionExpired';
+                descKey = 'sessionExpiredDesc';
+                iconColor = '#f59e0b'; // amber-500
+                break;
+            default:
+                titleKey = 'loginFailed';
+                descKey = 'loginFailedDesc';
+                iconColor = '#ef4444'; // red-500
+        }
+        // Hide spinner
+        if (spinner)
+            spinner.style.display = 'none';
+        // Create error icon
+        const errorIcon = document.createElement('div');
+        errorIcon.style.cssText = `
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 16px;
+      border-radius: 50%;
+      background: ${iconColor}15;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+    `;
+        errorIcon.textContent = type === 'expired' ? '⏱' : '✕';
+        // Create error title
+        const errorTitle = document.createElement('h3');
+        errorTitle.textContent = this.t(titleKey);
+        errorTitle.style.cssText = `
+      margin: 0 0 8px;
+      font-size: 18px;
+      font-weight: 600;
+      color: ${iconColor};
+    `;
+        // Update subtitle with error description
+        subtitle.textContent = this.t(descKey);
+        subtitle.style.color = '#666';
+        // Insert error elements before subtitle
+        (_a = subtitle.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(errorIcon, subtitle);
+        (_b = subtitle.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(errorTitle, subtitle);
+        // Update cancel button to close button
+        if (cancelBtn) {
+            cancelBtn.textContent = this.t('close');
+            cancelBtn.style.display = 'block';
+            cancelBtn.onclick = () => {
+                this.closeModal();
+                onClose();
+            };
+        }
+    }
     /**
      * Default browser opener (works in browser environment)
      * @private
@@ -1193,6 +1559,7 @@ class DeviceAuthFlowManager extends EventEmitter {
      */
     async startFlow(options = {}) {
         this.aborted = false;
+        this.currentLanguage = this.detectLanguage();
         const scope = options.scope || 'player:play';
         const openBrowser = options.openBrowser || this.defaultOpenBrowser.bind(this);
         // Generate PKCE parameters
@@ -1216,7 +1583,7 @@ class DeviceAuthFlowManager extends EventEmitter {
             throw new PlayKitError(error.error_description || 'Failed to initiate device auth', error.error || 'INIT_FAILED', initResponse.status);
         }
         const initData = await initResponse.json();
-        const { session_id, auth_url, poll_interval, expires_in } = initData;
+        const { session_id, auth_url, poll_interval, expires_in, game } = initData;
         // Update poll interval from server
         if (poll_interval) {
             this.pollInterval = poll_interval * 1000;
@@ -1226,18 +1593,48 @@ class DeviceAuthFlowManager extends EventEmitter {
             options.onAuthUrl(auth_url);
         }
         this.emit('auth_url', auth_url);
-        // Step 2: Open browser for user authorization
-        await openBrowser(auth_url);
+        // Step 2: Show login modal and open browser for user authorization
+        // In browser environment, show modal first to ensure popup is opened from user click context
+        if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+            const gameInfo = game || {
+                id: this.gameId,
+                name: 'Game',
+                icon: null,
+                description: null,
+            };
+            const modalResult = this.showLoginModal(gameInfo);
+            // Wait for user to click login or cancel
+            try {
+                await Promise.race([
+                    modalResult.clicked,
+                    modalResult.cancelled.then(() => {
+                        throw new PlayKitError('User cancelled', 'CANCELLED');
+                    }),
+                ]);
+            }
+            catch (err) {
+                this.closeModal();
+                throw err;
+            }
+            // User clicked login - open browser (in user click context, won't be blocked)
+            await openBrowser(auth_url);
+        }
+        else {
+            // Non-browser environment - open directly
+            await openBrowser(auth_url);
+        }
         // Step 3: Poll for authorization
         const expiresAt = Date.now() + (expires_in || 600) * 1000;
         return new Promise((resolve, reject) => {
             const poll = async () => {
                 if (this.aborted) {
+                    this.closeModal();
                     reject(new PlayKitError('Device auth flow was cancelled', 'CANCELLED'));
                     return;
                 }
                 // Check if session expired
                 if (Date.now() >= expiresAt) {
+                    this.showModalError('expired', () => { });
                     reject(new PlayKitError('Device auth session expired', 'EXPIRED'));
                     return;
                 }
@@ -1258,7 +1655,8 @@ class DeviceAuthFlowManager extends EventEmitter {
                             this.pollTimeoutId = setTimeout(poll, this.pollInterval);
                         }
                         else if (pollData.status === 'authorized') {
-                            // Success!
+                            // Success! Close modal and return tokens
+                            this.closeModal();
                             if (options.onPollStatus) {
                                 options.onPollStatus('authorized');
                             }
@@ -1287,6 +1685,7 @@ class DeviceAuthFlowManager extends EventEmitter {
                             this.pollTimeoutId = setTimeout(poll, this.pollInterval);
                         }
                         else if (error === 'access_denied') {
+                            this.showModalError('denied', () => { });
                             if (options.onPollStatus) {
                                 options.onPollStatus('denied');
                             }
@@ -1294,6 +1693,7 @@ class DeviceAuthFlowManager extends EventEmitter {
                             reject(new PlayKitError(pollData.error_description || 'User denied authorization', 'ACCESS_DENIED'));
                         }
                         else if (error === 'expired_token') {
+                            this.showModalError('expired', () => { });
                             if (options.onPollStatus) {
                                 options.onPollStatus('expired');
                             }
@@ -1301,6 +1701,7 @@ class DeviceAuthFlowManager extends EventEmitter {
                             reject(new PlayKitError(pollData.error_description || 'Session expired', 'EXPIRED'));
                         }
                         else {
+                            this.showModalError('failed', () => { });
                             reject(new PlayKitError(pollData.error_description || 'Device auth failed', error || 'POLL_FAILED', pollResponse.status));
                         }
                     }
@@ -1320,6 +1721,7 @@ class DeviceAuthFlowManager extends EventEmitter {
      */
     cancel() {
         this.aborted = true;
+        this.closeModal();
         if (this.pollTimeoutId) {
             clearTimeout(this.pollTimeoutId);
             this.pollTimeoutId = null;
@@ -1330,6 +1732,7 @@ class DeviceAuthFlowManager extends EventEmitter {
      * Clean up resources
      */
     destroy() {
+        this.closeModal();
         this.cancel();
         this.removeAllListeners();
     }
@@ -1607,6 +2010,7 @@ const translations = {
         credits: '', // No longer using "Spark", display USD amount directly
         rechargeButton: 'Recharge Now',
         cancelButton: 'Cancel',
+        dailyRefreshMessage: 'Your daily free {amount} credits have arrived!',
     },
     zh: {
         title: '余额不足',
@@ -1615,6 +2019,7 @@ const translations = {
         credits: '', // 不再使用"Spark"，直接显示美元金额
         rechargeButton: '立即充值',
         cancelButton: '取消',
+        dailyRefreshMessage: '你的每日免费积分 {amount} 已到账！',
     },
     'zh-TW': {
         title: '餘額不足',
@@ -1623,6 +2028,7 @@ const translations = {
         credits: '', // 不再使用"Spark"，直接顯示美元金額
         rechargeButton: '立即充值',
         cancelButton: '取消',
+        dailyRefreshMessage: '你的每日免費積分 {amount} 已到帳！',
     },
     ja: {
         title: '残高不足',
@@ -1631,6 +2037,7 @@ const translations = {
         credits: '', // "Spark"は使用しません、USD金額を直接表示
         rechargeButton: '今すぐチャージ',
         cancelButton: 'キャンセル',
+        dailyRefreshMessage: '本日の無料クレジット {amount} が届きました！',
     },
     ko: {
         title: '잔액 부족',
@@ -1639,6 +2046,7 @@ const translations = {
         credits: '', // "Spark" 사용 안 함, USD 금액 직접 표시
         rechargeButton: '지금 충전',
         cancelButton: '취소',
+        dailyRefreshMessage: '오늘의 무료 크레딧 {amount}이 도착했습니다!',
     },
 };
 /**
@@ -1649,6 +2057,8 @@ class RechargeManager extends EventEmitter {
         super();
         this.modalContainer = null;
         this.styleElement = null;
+        this.toastElement = null;
+        this.toastTimeout = null;
         this.playerToken = playerToken;
         this.rechargePortalUrl = rechargePortalUrl;
         this.gameId = gameId;
@@ -1904,6 +2314,86 @@ class RechargeManager extends EventEmitter {
           flex-direction: column;
         }
       }
+
+      /* Daily Refresh Toast Styles */
+      .playkit-daily-refresh-toast {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);
+        padding: 16px 20px;
+        min-width: 240px;
+        max-width: 320px;
+        z-index: 999998;
+        animation: playkit-toast-slideIn 0.3s ease-out;
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+      }
+
+      .playkit-daily-refresh-toast.hiding {
+        animation: playkit-toast-fadeOut 0.3s ease-out forwards;
+      }
+
+      @keyframes playkit-toast-slideIn {
+        from {
+          transform: translateX(100%);
+          opacity: 0;
+        }
+        to {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+
+      @keyframes playkit-toast-fadeOut {
+        from {
+          transform: translateX(0);
+          opacity: 1;
+        }
+        to {
+          transform: translateX(100%);
+          opacity: 0;
+        }
+      }
+
+      .playkit-toast-icon {
+        width: 24px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .playkit-toast-icon svg {
+        width: 14px;
+        height: 14px;
+        color: #ffffff;
+      }
+
+      .playkit-toast-message {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 1.4;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      }
+
+      @media (max-width: 480px) {
+        .playkit-daily-refresh-toast {
+          top: 10px;
+          right: 10px;
+          left: 10px;
+          min-width: auto;
+          max-width: none;
+        }
+      }
     `;
         document.head.appendChild(this.styleElement);
     }
@@ -1965,6 +2455,55 @@ class RechargeManager extends EventEmitter {
     updateToken(newToken) {
         this.playerToken = newToken;
     }
+    /**
+     * Show daily refresh toast notification
+     */
+    showDailyRefreshToast(result) {
+        // Don't show if already showing
+        if (this.toastElement) {
+            return;
+        }
+        this.injectStyles();
+        // Create toast element
+        this.toastElement = document.createElement('div');
+        this.toastElement.className = 'playkit-daily-refresh-toast';
+        // Icon
+        const icon = document.createElement('div');
+        icon.className = 'playkit-toast-icon';
+        icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+        this.toastElement.appendChild(icon);
+        // Message
+        const message = document.createElement('div');
+        message.className = 'playkit-toast-message';
+        message.textContent = this.t('dailyRefreshMessage').replace('{amount}', String(result.amountAdded));
+        this.toastElement.appendChild(message);
+        document.body.appendChild(this.toastElement);
+        // Auto-hide after 3 seconds
+        this.toastTimeout = setTimeout(() => {
+            this.hideToast();
+        }, 3000);
+    }
+    /**
+     * Hide the toast with fade-out animation
+     */
+    hideToast() {
+        if (!this.toastElement) {
+            return;
+        }
+        // Add hiding class for animation
+        this.toastElement.classList.add('hiding');
+        // Remove after animation completes
+        setTimeout(() => {
+            if (this.toastElement) {
+                this.toastElement.remove();
+                this.toastElement = null;
+            }
+        }, 300);
+        if (this.toastTimeout) {
+            clearTimeout(this.toastTimeout);
+            this.toastTimeout = null;
+        }
+    }
     /**
      * Destroy the modal and clean up
      */
@@ -1973,6 +2512,14 @@ class RechargeManager extends EventEmitter {
             this.modalContainer.remove();
             this.modalContainer = null;
         }
+        if (this.toastElement) {
+            this.toastElement.remove();
+            this.toastElement = null;
+        }
+        if (this.toastTimeout) {
+            clearTimeout(this.toastTimeout);
+            this.toastTimeout = null;
+        }
         if (this.styleElement) {
             this.styleElement.remove();
             this.styleElement = null;
@@ -1988,7 +2535,7 @@ const PLAYER_INFO_ENDPOINT = '/api/external/player-info';
 const SET_NICKNAME_ENDPOINT = '/api/external/set-game-player-nickname';
 class PlayerClient extends EventEmitter {
     constructor(authManager, config, rechargeConfig = {}) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         super();
         this.playerInfo = null;
         this.rechargeManager = null;
@@ -2001,6 +2548,7 @@ class PlayerClient extends EventEmitter {
             balanceCheckInterval: (_b = rechargeConfig.balanceCheckInterval) !== null && _b !== void 0 ? _b : 30000,
             checkBalanceAfterApiCall: (_c = rechargeConfig.checkBalanceAfterApiCall) !== null && _c !== void 0 ? _c : true,
             rechargePortalUrl: rechargeConfig.rechargePortalUrl || 'https://playkit.ai/recharge',
+            showDailyRefreshToast: (_d = rechargeConfig.showDailyRefreshToast) !== null && _d !== void 0 ? _d : true,
         };
     }
     /**
@@ -2057,6 +2605,13 @@ class PlayerClient extends EventEmitter {
             // Emit daily refresh event if credits were refreshed
             if ((_b = data.dailyRefresh) === null || _b === void 0 ? void 0 : _b.refreshed) {
                 this.emit('daily_credits_refreshed', data.dailyRefresh);
+                // Show toast notification if enabled
+                if (this.rechargeConfig.showDailyRefreshToast !== false) {
+                    this.initializeRechargeManager();
+                    if (this.rechargeManager) {
+                        this.rechargeManager.showDailyRefreshToast(data.dailyRefresh);
+                    }
+                }
             }
             return this.playerInfo;
         }
@@ -4678,6 +5233,7 @@ class PlayKitSDK extends EventEmitter {
         this.playerClient.on('balance_low', (credits) => this.emit('balance_low', credits));
         this.playerClient.on('balance_updated', (credits) => this.emit('balance_updated', credits));
         this.playerClient.on('player_info_updated', (info) => this.emit('player_info_updated', info));
+        this.playerClient.on('daily_credits_refreshed', (result) => this.emit('daily_credits_refreshed', result));
     }
     /**
      * Initialize the SDK