@contentcredits/sdk 2.2.0 → 2.4.0

package/dist/api/client.d.ts

@@ -1,13 +1,13 @@
 import type { EventEmitter } from '../core/events.js';
-export declare function createApiClient(baseUrl: string, emitter: EventEmitter): {
-    get: <T>(path: string) => Promise<T>;
-    post: <T>(path: string, body: Record<string, unknown>) => Promise<T>;
-    put: <T>(path: string, body: Record<string, unknown>) => Promise<T>;
-    delete: <T>(path: string) => Promise<T>;
-};
+export interface ApiClient {
+    get<T>(path: string): Promise<T>;
+    post<T>(path: string, body: Record<string, unknown>): Promise<T>;
+    put<T>(path: string, body: Record<string, unknown>): Promise<T>;
+    delete<T>(path: string): Promise<T>;
+}
+export declare function createApiClient(baseUrl: string, emitter: EventEmitter): ApiClient;
 export declare class ApiError extends Error {
     readonly status: number;
     readonly data?: unknown | undefined;
     constructor(status: number, message: string, data?: unknown | undefined);
 }
-export type ApiClient = ReturnType<typeof createApiClient>;

package/dist/api/comments.d.ts

@@ -1,6 +1,6 @@
 import type { ApiClient } from './client.js';
 import type { CommentsResponse, CommentThread, Comment, CommentSortBy } from '../types/index.js';
-export declare function createCommentsApi(client: ApiClient): {
+export interface CommentsApi {
     ensureThread(params: {
         pageUrl: string;
         hostname: string;
@@ -24,4 +24,5 @@ export declare function createCommentsApi(client: ApiClient): {
             hasLiked: boolean;
         };
     }>;
-};
+}
+export declare function createCommentsApi(client: ApiClient): CommentsApi;

package/dist/api/credits.d.ts

@@ -1,6 +1,6 @@
 import type { ApiClient } from './client.js';
 import type { CheckAccessResponse, PurchaseResponse } from '../types/index.js';
-export declare function createCreditsApi(client: ApiClient): {
+export interface CreditsApi {
     checkAccess(params: {
         apiKey: string;
         postUrl: string;
@@ -13,4 +13,5 @@ export declare function createCreditsApi(client: ApiClient): {
         postName: string;
         hostName: string;
     }): Promise<PurchaseResponse>;
-};
+}
+export declare function createCreditsApi(client: ApiClient): CreditsApi;

package/dist/comments/index.d.ts

@@ -1,9 +1,10 @@
 import type { createCommentsApi } from '../api/comments.js';
 import type { EventEmitter } from '../core/events.js';
 import type { ResolvedConfig } from '../types/index.js';
-export declare function createComments(config: ResolvedConfig, commentsApi: ReturnType<typeof createCommentsApi>, emitter: EventEmitter): {
-    init: () => void;
-    open: () => void;
-    close: () => void;
-    destroy: () => void;
-};
+export interface CommentsModule {
+    init(): void;
+    open(): void;
+    close(): void;
+    destroy(): void;
+}
+export declare function createComments(config: ResolvedConfig, commentsApi: ReturnType<typeof createCommentsApi>, emitter: EventEmitter): CommentsModule;

package/dist/comments/panel.d.ts

@@ -1,8 +1,9 @@
 import type { createCommentsApi } from '../api/comments.js';
 import type { ResolvedConfig } from '../types/index.js';
 import type { EventEmitter } from '../core/events.js';
-export declare function createCommentPanel(config: ResolvedConfig, commentsApi: ReturnType<typeof createCommentsApi>, emitter: EventEmitter, onClose: () => void): {
-    openPanel: () => void;
-    closePanel: () => void;
-    destroy: () => void;
-};
+export interface CommentPanelApi {
+    openPanel(): void;
+    closePanel(): void;
+    destroy(): void;
+}
+export declare function createCommentPanel(config: ResolvedConfig, commentsApi: ReturnType<typeof createCommentsApi>, emitter: EventEmitter, onClose: () => void): CommentPanelApi;

package/dist/content-credits.cjs.js

@@ -28,6 +28,15 @@ function resolveConfig(raw) {
         accountsUrl: "https://accounts.contentcredits.com",
         paywallTemplate: raw.paywallTemplate,
         onAccessGranted: raw.onAccessGranted,
+        onStateChange: raw.onStateChange,
+        onReady: raw.onReady,
+        onLoginRequired: raw.onLoginRequired,
+        onPurchaseRequired: raw.onPurchaseRequired,
+        onInsufficientCredits: raw.onInsufficientCredits,
+        onPurchased: raw.onPurchased,
+        onUserLogin: raw.onUserLogin,
+        onUserLogout: raw.onUserLogout,
+        onError: raw.onError,
         theme: {
             primaryColor: (_j = (_h = raw.theme) === null || _h === void 0 ? void 0 : _h.primaryColor) !== null && _j !== void 0 ? _j : '#44C678',
             fontFamily: (_l = (_k = raw.theme) === null || _k === void 0 ? void 0 : _k.fontFamily) !== null && _l !== void 0 ? _l : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
@@ -177,10 +186,12 @@ const REFRESH_KEY = 'cc_rt';
  *  └─ Layer 3: localStorage — survives browser close; used to silently
  *     re-authenticate on the next visit without showing a popup
  *
- * We intentionally never write to document.cookie (no HttpOnly = XSS risk).
- * The refresh token in localStorage is the accepted industry trade-off:
- * it persists across sessions at the cost of XSS accessibility, mitigated
- * by short-lived access tokens and server-side refresh token rotation.
+ * We intentionally never write to document.cookie — both localStorage and
+ * non-HttpOnly cookies are equally XSS-accessible.  The truly safe option
+ * (HttpOnly server-set cookie) requires cross-site cookie support which
+ * browsers are phasing out for third-party embeds.  localStorage is
+ * first-party (publisher-domain scoped), never blocked, and the risk is
+ * mitigated by short-lived access tokens and server-side refresh token rotation.
  */
 let memoryToken = null;
 const tokenStorage = {
@@ -1223,7 +1234,7 @@ function createPaywallRenderer(config) {
         parent.appendChild(el('p', 'Log in with your Content Credits account to unlock this article.'));
         const btn = el('button', 'Login & Buy with Content Credits');
         btn.className = 'cc-btn cc-btn-primary';
-        btn.addEventListener('click', cb.onLogin);
+        btn.addEventListener('click', () => { void cb.onLogin(); });
         parent.appendChild(btn);
         parent.appendChild(poweredBy());
     }
@@ -1237,7 +1248,7 @@ function createPaywallRenderer(config) {
         parent.appendChild(el('p', 'Use your Content Credits balance to instantly access this premium article.'));
         const btn = el('button', credits !== null ? `Buy for ${credits} Credit${credits !== 1 ? 's' : ''}` : 'Buy with Content Credits');
         btn.className = 'cc-btn cc-btn-primary';
-        btn.addEventListener('click', cb.onPurchase);
+        btn.addEventListener('click', () => { void cb.onPurchase(); });
         parent.appendChild(btn);
         parent.appendChild(poweredBy());
     }
@@ -1249,7 +1260,7 @@ function createPaywallRenderer(config) {
         parent.appendChild(el('p', detail));
         const btn = el('button', 'Buy More Credits');
         btn.className = 'cc-btn cc-btn-primary';
-        btn.addEventListener('click', cb.onBuyMoreCredits);
+        btn.addEventListener('click', () => cb.onBuyMoreCredits());
         parent.appendChild(btn);
         parent.appendChild(poweredBy());
     }
@@ -1423,6 +1434,11 @@ function createExtensionBridge() {
     };
 }
 
+function isAuthCallback(data) {
+    return (typeof data === 'object' &&
+        data !== null &&
+        data.type === 'cc_auth_callback');
+}
 const POPUP_NAME = 'ccAuthPopup';
 const POPUP_SPECS = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=650';
 function centeredSpecs() {
@@ -1483,9 +1499,10 @@ function consumeTokenFromUrl() {
             // If we're inside a popup (opened by openAuthPopup), notify the opener
             // and close instead of rendering the page. This fixes the bug where the
             // popup shows the blog article after the accounts redirect.
-            if (window.opener && !window.opener.closed) {
+            const opener = window.opener;
+            if (opener && !opener.closed) {
                 try {
-                    window.opener.postMessage({ type: 'cc_auth_callback', token, refreshToken: refreshToken !== null && refreshToken !== void 0 ? refreshToken : null }, window.location.origin);
+                    opener.postMessage({ type: 'cc_auth_callback', token, refreshToken: refreshToken !== null && refreshToken !== void 0 ? refreshToken : null }, window.location.origin);
                 }
                 catch (_c) {
                     // opener is cross-origin or restricted — fall through, URL polling will handle it
@@ -1530,11 +1547,10 @@ function openAuthPopup(authUrl) {
         }
         // ── Primary: postMessage from popup ───────────────────────────────────
         function onMessage(event) {
-            var _a;
             // Only accept messages from our own origin
             if (event.origin !== window.location.origin)
                 return;
-            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) !== 'cc_auth_callback')
+            if (!isAuthCallback(event.data))
                 return;
             const token = event.data.token;
             const refreshToken = event.data.refreshToken;
@@ -1546,7 +1562,7 @@ function openAuthPopup(authUrl) {
             try {
                 popup === null || popup === void 0 ? void 0 : popup.close();
             }
-            catch ( /* ignore */_b) { /* ignore */ }
+            catch ( /* ignore */_a) { /* ignore */ }
             finish(token);
         }
         window.addEventListener('message', onMessage);
@@ -1661,7 +1677,7 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
     }
     // ── Purchase ──────────────────────────────────────────────────────────────
     async function doPurchase() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (!tokenStorage.has()) {
             await doLogin();
             return;
@@ -1705,14 +1721,18 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                         creditBalance: state.get().creditBalance,
                     });
                 }
-                emitter.emit('credits:insufficient', {
-                    required: (_b = state.get().requiredCredits) !== null && _b !== void 0 ? _b : 0,
-                    available: (_c = state.get().creditBalance) !== null && _c !== void 0 ? _c : 0,
-                });
+                const required = (_b = state.get().requiredCredits) !== null && _b !== void 0 ? _b : 0;
+                const available = (_c = state.get().creditBalance) !== null && _c !== void 0 ? _c : 0;
+                (_d = config.onInsufficientCredits) === null || _d === void 0 ? void 0 : _d.call(config, { required, available });
+                emitter.emit('credits:insufficient', { required, available });
             }
             else {
                 if (!config.headless)
                     renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                (_e = config.onPurchaseRequired) === null || _e === void 0 ? void 0 : _e.call(config, {
+                    requiredCredits: state.get().requiredCredits,
+                    creditBalance: state.get().creditBalance,
+                });
                 emitter.emit('error', { message: 'Purchase failed', error: err });
             }
         }
@@ -1722,6 +1742,7 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
     }
     // ── Access Check ──────────────────────────────────────────────────────────
     async function checkAccess() {
+        var _a, _b, _c;
         state.set({ isLoading: true });
         if (!config.headless)
             renderer.render('checking', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
@@ -1735,6 +1756,7 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                 gate.hide();
                 renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
             }
+            (_a = config.onLoginRequired) === null || _a === void 0 ? void 0 : _a.call(config);
             emitter.emit('paywall:shown', {});
             return;
         }
@@ -1758,6 +1780,10 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                     gate.hide();
                     renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
                 }
+                (_b = config.onPurchaseRequired) === null || _b === void 0 ? void 0 : _b.call(config, {
+                    requiredCredits: state.get().requiredCredits,
+                    creditBalance: state.get().creditBalance,
+                });
                 emitter.emit('paywall:shown', {});
             }
         }
@@ -1767,6 +1793,7 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                 gate.hide();
                 renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
             }
+            (_c = config.onLoginRequired) === null || _c === void 0 ? void 0 : _c.call(config);
             if (!(err instanceof ApiError && err.status === 401)) {
                 emitter.emit('error', { message: 'Access check failed', error: err });
             }
@@ -1785,7 +1812,7 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
         if (extensionAvailable) {
             bridge.attach();
             bridge.onAuthorizationResponse(data => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g;
                 state.set({
                     isLoggedIn: data.isAuthenticated,
                     hasAccess: data.doesHaveAccess,
@@ -1799,10 +1826,11 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                         gate.hide();
                         renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
                     }
+                    (_c = config.onLoginRequired) === null || _c === void 0 ? void 0 : _c.call(config);
                     emitter.emit('paywall:shown', {});
                 }
                 else if (data.doesHaveAccess) {
-                    handleAccessGranted(0, (_c = data.creditBalance) !== null && _c !== void 0 ? _c : 0);
+                    handleAccessGranted(0, (_d = data.creditBalance) !== null && _d !== void 0 ? _d : 0);
                 }
                 else {
                     if (!config.headless) {
@@ -1812,6 +1840,10 @@ function createPaywall(config, creditsApi, state, emitter, existingGate) {
                             creditBalance: data.creditBalance,
                         });
                     }
+                    (_e = config.onPurchaseRequired) === null || _e === void 0 ? void 0 : _e.call(config, {
+                        requiredCredits: (_f = data.requiredCredits) !== null && _f !== void 0 ? _f : null,
+                        creditBalance: (_g = data.creditBalance) !== null && _g !== void 0 ? _g : null,
+                    });
                     emitter.emit('paywall:shown', {});
                 }
             });
@@ -2597,15 +2629,18 @@ function createCommentPanel(config, commentsApi, emitter, onClose) {
             refreshUser();
         refreshUser();
         // Build panel if not already present
-        let backdrop = r.getElementById('cc-panel-backdrop');
-        if (!backdrop) {
-            backdrop = el('div');
-            backdrop.className = 'cc-panel-backdrop';
-            backdrop.id = 'cc-panel-backdrop';
-            backdrop.addEventListener('click', closePanel);
-            r.appendChild(backdrop);
+        let backdropEl = r.getElementById('cc-panel-backdrop');
+        if (!backdropEl) {
+            const newBackdrop = el('div');
+            newBackdrop.className = 'cc-panel-backdrop';
+            newBackdrop.id = 'cc-panel-backdrop';
+            newBackdrop.addEventListener('click', closePanel);
+            r.appendChild(newBackdrop);
             r.appendChild(buildPanel());
+            backdropEl = newBackdrop;
         }
+        // Capture in a const so the rAF callback has a non-nullable reference
+        const backdrop = backdropEl;
         // Animate open
         requestAnimationFrame(() => {
             var _a;
@@ -2705,7 +2740,26 @@ class ContentCredits {
     async _start() {
         // 1. Consume any token that arrived in the URL (mobile redirect flow)
         consumeTokenFromUrl();
-        // 2. Hide premium content immediately (synchronous) before any async work.
+        // 2. Wire config-level callbacks so developers don't need separate on() calls.
+        if (this.config.onStateChange) {
+            this.state.subscribe(this.config.onStateChange);
+        }
+        if (this.config.onReady) {
+            this.emitter.on('ready', ({ state }) => this.config.onReady(state));
+        }
+        if (this.config.onPurchased) {
+            this.emitter.on('article:purchased', (payload) => this.config.onPurchased(payload));
+        }
+        if (this.config.onUserLogin) {
+            this.emitter.on('auth:login', ({ user }) => this.config.onUserLogin(user));
+        }
+        if (this.config.onUserLogout) {
+            this.emitter.on('auth:logout', () => this.config.onUserLogout());
+        }
+        if (this.config.onError) {
+            this.emitter.on('error', (payload) => this.config.onError(payload));
+        }
+        // 3. Hide premium content immediately (synchronous) before any async work.
         //    This prevents the flash of full article content that would otherwise
         //    appear during the token-refresh and access-check network round-trips.
         //    Skipped in headless mode — the host app owns all DOM manipulation.
@@ -2715,13 +2769,13 @@ class ContentCredits {
         });
         if (!this.config.headless)
             earlyGate.hide();
-        // 3. If no access token in memory/session, attempt a silent refresh.
+        // 4. If no access token in memory/session, attempt a silent refresh.
         //    This runs on every new browser session (after the browser was closed)
         //    and silently re-authenticates the user using their stored refresh token.
         if (!tokenStorage.has()) {
             await tryRefreshSession(this.config.apiBaseUrl);
         }
-        // Pass the pre-created gate so createPaywall reuses the same instance
+        // 5. Pass the pre-created gate so createPaywall reuses the same instance
         // (and its hiddenNodes list) rather than creating a second one.
         this.paywallModule = createPaywall(this.config, this.creditsApi, this.state, this.emitter, earlyGate);
         if (this.config.enableComments) {
@@ -2820,6 +2874,32 @@ class ContentCredits {
     isLoggedIn() {
         return tokenStorage.has();
     }
+    /**
+     * Log the current user out.
+     *
+     * Revokes the refresh token on the server (best-effort), clears all local
+     * auth state, resets SDK state, and emits `auth:logout`.
+     */
+    async logout() {
+        const rt = refreshTokenStorage.get();
+        if (rt) {
+            try {
+                await fetch(`${this.config.apiBaseUrl}/auth/log-out`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ refreshToken: rt }),
+                    credentials: 'omit',
+                });
+            }
+            catch (_a) {
+                // Network error — proceed with local cleanup regardless
+            }
+        }
+        tokenStorage.clear();
+        refreshTokenStorage.clear();
+        this.state.reset();
+        this.emitter.emit('auth:logout', {});
+    }
     /** Tear down the SDK — removes all UI, event listeners, and stored state. */
     destroy() {
         var _a, _b;
@@ -2830,7 +2910,7 @@ class ContentCredits {
     }
     /** SDK version string. */
     static get version() {
-        return "2.2.0";
+        return "2.4.0";
     }
 }
 // ── Auto-init from script data attributes (CDN usage) ────────────────────────