@contentcredits/sdk 2.0.4 → 2.2.0

package/dist/content-credits.esm.js

@@ -1,5 +1,5 @@
 function resolveConfig(raw) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     if (!raw.apiKey || typeof raw.apiKey !== 'string' || raw.apiKey.trim() === '') {
         throw new Error('[ContentCredits] apiKey is required. Get yours from the Content Credits admin panel.');
     }
@@ -8,7 +8,7 @@ function resolveConfig(raw) {
     try {
         hostName = new URL(articleUrl).hostname;
     }
-    catch (_l) {
+    catch (_m) {
         throw new Error(`[ContentCredits] Invalid articleUrl: "${articleUrl}"`);
     }
     return {
@@ -21,13 +21,14 @@ function resolveConfig(raw) {
         enableComments: (_d = raw.enableComments) !== null && _d !== void 0 ? _d : true,
         extensionId: (_e = raw.extensionId) !== null && _e !== void 0 ? _e : "ljehdpabbhgccmanhjdfacjnaigpgcml",
         debug: (_f = raw.debug) !== null && _f !== void 0 ? _f : false,
+        headless: (_g = raw.headless) !== null && _g !== void 0 ? _g : false,
         apiBaseUrl: "https://api.contentcredits.com",
         accountsUrl: "https://accounts.contentcredits.com",
         paywallTemplate: raw.paywallTemplate,
         onAccessGranted: raw.onAccessGranted,
         theme: {
-            primaryColor: (_h = (_g = raw.theme) === null || _g === void 0 ? void 0 : _g.primaryColor) !== null && _h !== void 0 ? _h : '#44C678',
-            fontFamily: (_k = (_j = raw.theme) === null || _j === void 0 ? void 0 : _j.fontFamily) !== null && _k !== void 0 ? _k : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            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",
         },
     };
 }
@@ -518,6 +519,20 @@ function createGate(options) {
         }
         contentEl.setAttribute(GATE_ATTR, 'true');
         gated = true;
+        // Add a gradient fade at the bottom of the visible teaser so the cutoff
+        // looks intentional rather than abrupt.
+        if (!contentEl.querySelector('[data-cc-fade]')) {
+            const prevPos = contentEl.style.position;
+            if (!prevPos || prevPos === 'static')
+                contentEl.style.position = 'relative';
+            const fadeEl = document.createElement('div');
+            fadeEl.setAttribute('data-cc-fade', 'true');
+            fadeEl.style.cssText =
+                'position:absolute;bottom:0;left:0;width:100%;height:160px;' +
+                    'background:linear-gradient(to bottom,transparent 0%,var(--cc-bg,#fff) 100%);' +
+                    'pointer-events:none;z-index:1;';
+            contentEl.appendChild(fadeEl);
+        }
         return true;
     }
     function reveal() {
@@ -529,6 +544,10 @@ function createGate(options) {
                 n.removeAttribute('data-cc-hidden');
             }
         });
+        // Remove gradient fade
+        const fadeEl = contentEl === null || contentEl === void 0 ? void 0 : contentEl.querySelector('[data-cc-fade]');
+        if (fadeEl)
+            fadeEl.remove();
         hiddenNodes = [];
         contentEl === null || contentEl === void 0 ? void 0 : contentEl.removeAttribute(GATE_ATTR);
         gated = false;
@@ -561,6 +580,24 @@ function createShadowHost(id) {
     host._ccShadow = root;
     return { host, root };
 }
+/**
+ * Creates a shadow host inserted immediately after `anchorEl` in the DOM.
+ * Used for the inline paywall panel so it flows naturally below the content.
+ */
+function createInlineShadowHost(id, anchorEl) {
+    let host = document.getElementById(id);
+    if (!host) {
+        host = document.createElement('div');
+        host.id = id;
+        anchorEl.parentNode.insertBefore(host, anchorEl.nextSibling);
+    }
+    const existing = host._ccShadow;
+    if (existing)
+        return { host, root: existing };
+    const root = host.attachShadow({ mode: 'open' });
+    host._ccShadow = root;
+    return { host, root };
+}
 function removeShadowHost(id) {
     const host = document.getElementById(id);
     if (host)
@@ -583,56 +620,27 @@ function getPaywallStyles(primaryColor, fontFamily) {
     return `
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    .cc-paywall-gate {
-      position: relative;
+    /* Inline paywall panel — sits below the teaser content in the page flow */
+    .cc-paywall-inline {
       width: 100%;
-    }
-
-    .cc-teaser-fade {
-      position: relative;
-    }
-    .cc-teaser-fade::after {
-      content: '';
-      position: absolute;
-      bottom: 0; left: 0; width: 100%;
-      height: 120px;
-      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
-      pointer-events: none;
-    }
-
-    /* Full-viewport backdrop — centers the overlay and blocks background clicks */
-    .cc-paywall-backdrop {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.45);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      pointer-events: all;
-    }
-
-    .cc-paywall-overlay {
+      padding: 36px 24px 32px;
       background: #fff;
       border: 1px solid #e5e7eb;
-      border-radius: 12px;
-      padding: 32px 24px;
-      width: 100%;
-      max-width: 480px;
+      border-top: 3px solid ${primaryColor};
+      border-radius: 0 0 12px 12px;
       text-align: center;
       font-family: ${fontFamily};
-      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
-      pointer-events: all;
+      box-sizing: border-box;
     }
 
-    .cc-paywall-overlay h2 {
+    .cc-paywall-inline h2 {
       font-size: 20px;
       font-weight: 700;
       color: #111827;
       margin-bottom: 8px;
     }
 
-    .cc-paywall-overlay p {
+    .cc-paywall-inline p {
       font-size: 14px;
       color: #6b7280;
       margin-bottom: 24px;
@@ -1165,20 +1173,24 @@ function createPaywallRenderer(config) {
     let root = null;
     let overlay = null;
     function init() {
-        const { root: shadowRoot } = createShadowHost(HOST_ID);
+        // Insert the shadow host immediately after the content element so the
+        // paywall panel flows inline below the teaser — no modal, no backdrop.
+        const contentEl = document.querySelector(config.contentSelector);
+        if (!contentEl)
+            return;
+        const { root: shadowRoot } = createInlineShadowHost(HOST_ID, contentEl);
         root = shadowRoot;
         injectStyles(root, getPaywallStyles(config.theme.primaryColor, config.theme.fontFamily));
-        // Backdrop: fixed full-viewport flex container — centers the overlay and
-        // blocks interaction with the page behind it (pointer-events: all in CSS).
-        const backdrop = el('div');
-        backdrop.className = 'cc-paywall-backdrop';
-        root.appendChild(backdrop);
         overlay = el('div');
-        overlay.className = 'cc-paywall-overlay';
-        backdrop.appendChild(overlay);
+        overlay.className = 'cc-paywall-inline';
+        root.appendChild(overlay);
     }
     function render(state, callbacks, meta) {
         var _a, _b, _c;
+        // During the initial access check the content is already hidden by the
+        // gate — no need to show a spinner in the paywall slot.
+        if (state === 'checking')
+            return;
         if (!overlay)
             init();
         if (!overlay)
@@ -1187,9 +1199,6 @@ function createPaywallRenderer(config) {
         while (overlay.firstChild)
             overlay.removeChild(overlay.firstChild);
         switch (state) {
-            case 'checking':
-                renderChecking(overlay);
-                break;
             case 'login':
                 renderLogin(overlay, callbacks);
                 break;
@@ -1207,20 +1216,6 @@ function createPaywallRenderer(config) {
                 break;
         }
     }
-    function renderChecking(parent) {
-        const spinner = el('div');
-        spinner.className = 'cc-spinner';
-        spinner.style.margin = '0 auto 12px';
-        spinner.style.width = '24px';
-        spinner.style.height = '24px';
-        spinner.style.borderWidth = '2px';
-        spinner.style.borderColor = '#e5e7eb';
-        spinner.style.borderTopColor = config.theme.primaryColor;
-        const text = el('p', 'Checking access...');
-        text.style.cssText = 'font-size:14px;color:#6b7280;text-align:center;font-family:' + config.theme.fontFamily;
-        parent.appendChild(spinner);
-        parent.appendChild(text);
-    }
     function renderLogin(parent, cb) {
         parent.appendChild(el('h2', 'This article requires a subscription'));
         parent.appendChild(el('p', 'Log in with your Content Credits account to unlock this article.'));
@@ -1611,8 +1606,10 @@ function openAuthPopup(authUrl) {
     });
 }
 
-function createPaywall(config, creditsApi, state, emitter) {
-    const gate = createGate({
+function createPaywall(config, creditsApi, state, emitter, existingGate) {
+    // Accept a pre-created gate so the caller can call gate.hide() synchronously
+    // before any async work, preventing a flash of the full article content.
+    const gate = existingGate !== null && existingGate !== void 0 ? existingGate : createGate({
         selector: config.contentSelector,
         teaserParagraphs: config.teaserParagraphs,
     });
@@ -1627,8 +1624,10 @@ function createPaywall(config, creditsApi, state, emitter) {
     function handleAccessGranted(creditsSpent = 0, balance = 0) {
         var _a;
         state.set({ hasAccess: true, isLoaded: true, isLoading: false });
-        gate.reveal();
-        renderer.render('granted', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless) {
+            gate.reveal();
+            renderer.render('granted', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        }
         emitter.emit('paywall:hidden', {});
         emitter.emit('article:purchased', { creditsSpent, remainingBalance: balance });
         (_a = config.onAccessGranted) === null || _a === void 0 ? void 0 : _a.call(config);
@@ -1645,7 +1644,8 @@ function createPaywall(config, creditsApi, state, emitter) {
             window.location.href = authUrl;
             return;
         }
-        renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless)
+            renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         const token = await openAuthPopup(authUrl);
         if (token) {
             state.set({ isLoggedIn: true });
@@ -1653,7 +1653,8 @@ function createPaywall(config, creditsApi, state, emitter) {
         }
         else {
             // Popup closed without login
-            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            if (!config.headless)
+                renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         }
     }
     // ── Purchase ──────────────────────────────────────────────────────────────
@@ -1672,7 +1673,8 @@ function createPaywall(config, creditsApi, state, emitter) {
             });
             return;
         }
-        renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless)
+            renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         state.set({ isLoading: true });
         try {
             const result = await creditsApi.purchaseArticle({
@@ -1686,7 +1688,8 @@ function createPaywall(config, creditsApi, state, emitter) {
             }
             else {
                 state.set({ isLoading: false });
-                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                if (!config.headless)
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
                 emitter.emit('error', { message: (_a = result.message) !== null && _a !== void 0 ? _a : 'Purchase failed' });
             }
         }
@@ -1694,17 +1697,20 @@ function createPaywall(config, creditsApi, state, emitter) {
             state.set({ isLoading: false });
             if (err instanceof ApiError && err.status === 402) {
                 // Insufficient credits
-                renderer.render('insufficient', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
-                    requiredCredits: state.get().requiredCredits,
-                    creditBalance: state.get().creditBalance,
-                });
+                if (!config.headless) {
+                    renderer.render('insufficient', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
+                        requiredCredits: state.get().requiredCredits,
+                        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,
                 });
             }
             else {
-                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                if (!config.headless)
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
                 emitter.emit('error', { message: 'Purchase failed', error: err });
             }
         }
@@ -1715,15 +1721,18 @@ function createPaywall(config, creditsApi, state, emitter) {
     // ── Access Check ──────────────────────────────────────────────────────────
     async function checkAccess() {
         state.set({ isLoading: true });
-        renderer.render('checking', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        if (!config.headless)
+            renderer.render('checking', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
         if (extensionAvailable) {
             bridge.requestAuthorization(config.apiKey, config.hostName);
             return; // response handled in onAuthorizationResponse
         }
         if (!tokenStorage.has()) {
             state.set({ isLoading: false, isLoaded: true });
-            gate.hide();
-            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            if (!config.headless) {
+                gate.hide();
+                renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            }
             emitter.emit('paywall:shown', {});
             return;
         }
@@ -1743,15 +1752,19 @@ function createPaywall(config, creditsApi, state, emitter) {
                 handleAccessGranted(0, 0);
             }
             else {
-                gate.hide();
-                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                if (!config.headless) {
+                    gate.hide();
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                }
                 emitter.emit('paywall:shown', {});
             }
         }
         catch (err) {
             state.set({ isLoading: false, isLoaded: true });
-            gate.hide();
-            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            if (!config.headless) {
+                gate.hide();
+                renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+            }
             if (!(err instanceof ApiError && err.status === 401)) {
                 emitter.emit('error', { message: 'Access check failed', error: err });
             }
@@ -1780,19 +1793,23 @@ function createPaywall(config, creditsApi, state, emitter) {
                     requiredCredits: (_b = data.requiredCredits) !== null && _b !== void 0 ? _b : null,
                 });
                 if (!data.isAuthenticated) {
-                    gate.hide();
-                    renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                    if (!config.headless) {
+                        gate.hide();
+                        renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                    }
                     emitter.emit('paywall:shown', {});
                 }
                 else if (data.doesHaveAccess) {
                     handleAccessGranted(0, (_c = data.creditBalance) !== null && _c !== void 0 ? _c : 0);
                 }
                 else {
-                    gate.hide();
-                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
-                        requiredCredits: data.requiredCredits,
-                        creditBalance: data.creditBalance,
-                    });
+                    if (!config.headless) {
+                        gate.hide();
+                        renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits }, {
+                            requiredCredits: data.requiredCredits,
+                            creditBalance: data.creditBalance,
+                        });
+                    }
                     emitter.emit('paywall:shown', {});
                 }
             });
@@ -1812,10 +1829,19 @@ function createPaywall(config, creditsApi, state, emitter) {
     }
     function destroy() {
         bridge.detach();
-        renderer.destroy();
-        gate.reveal();
+        if (!config.headless) {
+            renderer.destroy();
+            gate.reveal();
+        }
     }
-    return { init, checkAccess, destroy };
+    return {
+        init,
+        checkAccess,
+        destroy,
+        login: doLogin,
+        purchase: doPurchase,
+        buyMoreCredits: doBuyMoreCredits,
+    };
 }
 
 const POSITION_KEY = 'cc-widget-pos';
@@ -2677,14 +2703,25 @@ class ContentCredits {
     async _start() {
         // 1. Consume any token that arrived in the URL (mobile redirect flow)
         consumeTokenFromUrl();
-        // 2. If no access token in memory/session, attempt a silent refresh.
+        // 2. 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.
+        const earlyGate = createGate({
+            selector: this.config.contentSelector,
+            teaserParagraphs: this.config.teaserParagraphs,
+        });
+        if (!this.config.headless)
+            earlyGate.hide();
+        // 3. 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
-        //    — no popup, no visible delay, no paywall flash.
+        //    and silently re-authenticates the user using their stored refresh token.
         if (!tokenStorage.has()) {
             await tryRefreshSession(this.config.apiBaseUrl);
         }
-        this.paywallModule = createPaywall(this.config, this.creditsApi, this.state, this.emitter);
+        // 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) {
             this.commentsModule = createComments(this.config, this.commentsApi, this.emitter);
             this.commentsModule.init();
@@ -2693,6 +2730,63 @@ class ContentCredits {
         this.emitter.emit('ready', { state: this.state.get() });
     }
     // ── Public API ────────────────────────────────────────────────────────────
+    /**
+     * Subscribe to state changes. The callback receives the full state snapshot
+     * every time any field changes. Returns an unsubscribe function.
+     *
+     * Primarily useful in **headless mode** — lets you drive your own UI from
+     * reactive state without polling `getState()`.
+     *
+     * @example
+     * const unsubscribe = cc.subscribe((state) => {
+     *   if (state.hasAccess) showFullContent();
+     *   else showPaywall(state);
+     * });
+     */
+    subscribe(fn) {
+        return this.state.subscribe(fn);
+    }
+    /**
+     * Trigger the login flow programmatically.
+     *
+     * - Desktop: opens a popup window to the Content Credits auth page.
+     * - Mobile: performs a full-page redirect.
+     * - Extension: delegates to the browser extension.
+     *
+     * Primarily useful in **headless mode** where you render your own "Login"
+     * button and call this from its `onClick` handler.
+     */
+    async login() {
+        var _a;
+        await ((_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.login());
+    }
+    /**
+     * Trigger the article purchase flow programmatically.
+     *
+     * Deducts the required credits from the user's balance and, on success,
+     * updates `state.hasAccess` to `true` and emits `article:purchased`.
+     *
+     * If the user is not logged in, this automatically opens the login flow
+     * first, then proceeds with the purchase.
+     *
+     * Primarily useful in **headless mode** where you render your own "Unlock"
+     * button and call this from its `onClick` handler.
+     */
+    async purchase() {
+        var _a;
+        await ((_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.purchase());
+    }
+    /**
+     * Open the Content Credits dashboard in a new tab so the user can top up
+     * their credit balance.
+     *
+     * Primarily useful in **headless mode** when `state.creditBalance` is lower
+     * than `state.requiredCredits`.
+     */
+    buyMoreCredits() {
+        var _a;
+        (_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.buyMoreCredits();
+    }
     /** Subscribe to an SDK event. Returns an unsubscribe function. */
     on(event, handler) {
         return this.emitter.on(event, handler);
@@ -2734,7 +2828,7 @@ class ContentCredits {
     }
     /** SDK version string. */
     static get version() {
-        return "2.0.4";
+        return "2.2.0";
     }
 }
 // ── Auto-init from script data attributes (CDN usage) ────────────────────────