@contentcredits/sdk 2.0.0

package/dist/content-credits.cjs.js

@@ -0,0 +1,2574 @@
+'use strict';
+
+function resolveConfig(raw) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    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.');
+    }
+    const articleUrl = (_a = raw.articleUrl) !== null && _a !== void 0 ? _a : window.location.href;
+    let hostName;
+    try {
+        hostName = new URL(articleUrl).hostname;
+    }
+    catch (_l) {
+        throw new Error(`[ContentCredits] Invalid articleUrl: "${articleUrl}"`);
+    }
+    return {
+        apiKey: raw.apiKey.trim(),
+        articleUrl,
+        hostName,
+        pageTitle: document.title,
+        contentSelector: (_b = raw.contentSelector) !== null && _b !== void 0 ? _b : '.cc-premium-content',
+        teaserParagraphs: (_c = raw.teaserParagraphs) !== null && _c !== void 0 ? _c : 2,
+        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,
+        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",
+        },
+    };
+}
+
+function createInitialState() {
+    return {
+        isLoading: false,
+        isExtensionAvailable: false,
+        isLoggedIn: false,
+        hasAccess: false,
+        isLoaded: false,
+        user: null,
+        creditBalance: null,
+        requiredCredits: null,
+    };
+}
+function createState() {
+    let current = createInitialState();
+    const subscribers = [];
+    function get() {
+        return Object.assign({}, current);
+    }
+    function set(patch) {
+        current = Object.assign(Object.assign({}, current), patch);
+        subscribers.forEach(fn => fn(get()));
+    }
+    function subscribe(fn) {
+        subscribers.push(fn);
+        return () => {
+            const i = subscribers.indexOf(fn);
+            if (i >= 0)
+                subscribers.splice(i, 1);
+        };
+    }
+    function reset() {
+        current = createInitialState();
+        subscribers.forEach(fn => fn(get()));
+    }
+    function setUser(user) {
+        var _a;
+        set({
+            user,
+            isLoggedIn: user !== null,
+            creditBalance: (_a = user === null || user === void 0 ? void 0 : user.credits) !== null && _a !== void 0 ? _a : null,
+        });
+    }
+    return { get, set, subscribe, reset, setUser };
+}
+
+function createEventEmitter() {
+    const listeners = {};
+    function on(event, handler) {
+        if (!listeners[event]) {
+            listeners[event] = [];
+        }
+        listeners[event].push(handler);
+        // Return unsubscribe function
+        return () => off(event, handler);
+    }
+    function off(event, handler) {
+        const arr = listeners[event];
+        if (!arr)
+            return;
+        const idx = arr.indexOf(handler);
+        if (idx >= 0)
+            arr.splice(idx, 1);
+    }
+    function emit(event, payload) {
+        const arr = listeners[event];
+        if (arr) {
+            arr.forEach(handler => {
+                try {
+                    handler(payload);
+                }
+                catch (e) {
+                    console.warn(`[ContentCredits] Error in "${event}" handler:`, e);
+                }
+            });
+        }
+        // Also dispatch as a native CustomEvent on document so vanilla listeners work
+        try {
+            document.dispatchEvent(new CustomEvent(`contentcredits:${event}`, { detail: payload, bubbles: false }));
+        }
+        catch (_a) {
+            // ignore environments without CustomEvent
+        }
+    }
+    function removeAll() {
+        Object.keys(listeners).forEach(k => {
+            delete listeners[k];
+        });
+    }
+    return { on, off, emit, removeAll };
+}
+
+/**
+ * Decode a JWT payload without verifying the signature.
+ * Signature verification happens server-side on every API call.
+ */
+function decodeJwt(token) {
+    try {
+        const parts = token.split('.');
+        if (parts.length !== 3)
+            return null;
+        const base64Url = parts[1];
+        // Normalise Base64URL → Base64
+        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), '=');
+        const json = decodeURIComponent(atob(padded)
+            .split('')
+            .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join(''));
+        return JSON.parse(json);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/** Returns true if the JWT is expired (or unparseable). */
+function isTokenExpired(token) {
+    const payload = decodeJwt(token);
+    if (!payload || typeof payload.exp !== 'number')
+        return true;
+    // exp is in seconds; compare against current time in seconds
+    return Date.now() / 1000 > payload.exp;
+}
+/** Extract the user ID from a JWT. Returns null if token is invalid. */
+function getUserIdFromToken(token) {
+    var _a, _b;
+    const payload = decodeJwt(token);
+    return payload ? ((_b = (_a = payload.id) !== null && _a !== void 0 ? _a : payload._id) !== null && _b !== void 0 ? _b : null) : null;
+}
+
+const SESSION_KEY = 'cc_sdk_token';
+/**
+ * Two-layer token storage:
+ *  1. In-memory (primary) — invisible to other scripts, survives page navigations
+ *     within the same JS context but gone on hard reload.
+ *  2. sessionStorage (secondary) — survives soft reloads, cleared when the tab
+ *     closes, never shared across tabs.
+ *
+ * We intentionally never use document.cookie (no HttpOnly = XSS risk) or
+ * localStorage (persists indefinitely across sessions).
+ */
+let memoryToken = null;
+const tokenStorage = {
+    set(token) {
+        memoryToken = token;
+        try {
+            sessionStorage.setItem(SESSION_KEY, token);
+        }
+        catch (_a) {
+            // sessionStorage unavailable (e.g. private mode with strict settings) — ok
+        }
+    },
+    get() {
+        // Memory hit
+        if (memoryToken) {
+            if (isTokenExpired(memoryToken)) {
+                this.clear();
+                return null;
+            }
+            return memoryToken;
+        }
+        // sessionStorage fallback (page reloaded but tab still open)
+        try {
+            const stored = sessionStorage.getItem(SESSION_KEY);
+            if (stored) {
+                if (isTokenExpired(stored)) {
+                    this.clear();
+                    return null;
+                }
+                memoryToken = stored; // warm up memory layer
+                return stored;
+            }
+        }
+        catch (_a) {
+            // ignore
+        }
+        return null;
+    },
+    clear() {
+        memoryToken = null;
+        try {
+            sessionStorage.removeItem(SESSION_KEY);
+        }
+        catch (_a) {
+            // ignore
+        }
+    },
+    has() {
+        return this.get() !== null;
+    },
+};
+
+const REQUEST_TIMEOUT_MS = 12000;
+const MAX_RETRIES = 3;
+const RETRY_DELAY_MS = 400;
+/** Simple hash for deduplication key */
+function requestKey(method, url, body) {
+    return `${method}:${url}:${body !== null && body !== void 0 ? body : ''}`;
+}
+const inFlight = new Map();
+async function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+function shouldRetry(status) {
+    return status >= 500 || status === 429;
+}
+function createApiClient(baseUrl, emitter) {
+    async function request(method, path, body, attempt = 0) {
+        const url = `${baseUrl}${path}`;
+        const serialisedBody = body ? JSON.stringify(body) : undefined;
+        const key = requestKey(method, url, serialisedBody);
+        // Deduplicate concurrent identical requests
+        const existing = inFlight.get(key);
+        if (existing)
+            return existing;
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        const token = tokenStorage.get();
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        const promise = fetch(url, {
+            method,
+            headers,
+            body: serialisedBody,
+            signal: controller.signal,
+            credentials: 'omit', // SDK uses explicit Bearer header, not cookies
+        })
+            .then(async (response) => {
+            var _a;
+            clearTimeout(timeoutId);
+            if (response.status === 401) {
+                tokenStorage.clear();
+                emitter.emit('auth:logout', {});
+                throw new ApiError(401, 'Unauthorized — session expired');
+            }
+            let data;
+            try {
+                data = await response.json();
+            }
+            catch (_b) {
+                throw new ApiError(response.status, 'Invalid JSON response from server');
+            }
+            if (!response.ok) {
+                const msg = (_a = data === null || data === void 0 ? void 0 : data.message) !== null && _a !== void 0 ? _a : `HTTP ${response.status}`;
+                throw new ApiError(response.status, msg, data);
+            }
+            return data;
+        })
+            .catch(async (err) => {
+            clearTimeout(timeoutId);
+            // Retry on network error or server error (not client error)
+            const isNetworkError = err instanceof TypeError && err.message.includes('fetch');
+            const isServerError = err instanceof ApiError && shouldRetry(err.status);
+            if ((isNetworkError || isServerError) && attempt < MAX_RETRIES) {
+                inFlight.delete(key);
+                await sleep(RETRY_DELAY_MS * Math.pow(2, attempt));
+                return request(method, path, body, attempt + 1);
+            }
+            throw err;
+        })
+            .finally(() => {
+            inFlight.delete(key);
+        });
+        inFlight.set(key, promise);
+        return promise;
+    }
+    return {
+        get: (path) => request('GET', path),
+        post: (path, body) => request('POST', path, body),
+        put: (path, body) => request('PUT', path, body),
+        delete: (path) => request('DELETE', path),
+    };
+}
+class ApiError extends Error {
+    constructor(status, message, data) {
+        super(message);
+        this.status = status;
+        this.data = data;
+        this.name = 'ApiError';
+    }
+}
+
+function createCreditsApi(client) {
+    return {
+        checkAccess(params) {
+            return client.post('/credits/check-article-access', {
+                apiKey: params.apiKey,
+                postUrl: params.postUrl,
+                postName: params.postName,
+                hostName: params.hostName,
+            });
+        },
+        purchaseArticle(params) {
+            return client.post('/credits/purchase-article', {
+                apiKey: params.apiKey,
+                postUrl: params.postUrl,
+                postName: params.postName,
+                hostName: params.hostName,
+            });
+        },
+    };
+}
+
+function createCommentsApi(client) {
+    return {
+        // Backend returns the thread object directly (no success wrapper)
+        ensureThread(params) {
+            return client.post('/comments/threads/ensure', {
+                pageUrl: params.pageUrl,
+                hostname: params.hostname,
+            });
+        },
+        // Backend returns { thread, comments } — no success wrapper
+        getComments(params) {
+            const encoded = encodeURIComponent(params.pageUrl);
+            return client.get(`/comments/comments/by-url?url=${encoded}&sortBy=${params.sortBy}`);
+        },
+        // Backend returns the created comment object directly
+        postComment(params) {
+            return client.post('/comments/comments', Object.assign({ threadId: params.threadId, content: params.content }, (params.parentCommentId ? { parentCommentId: params.parentCommentId } : {})));
+        },
+        // Backend returns the updated comment object directly
+        editComment(commentId, content) {
+            return client.put(`/comments/comments/${commentId}`, { content });
+        },
+        // Backend returns the deleted comment object directly
+        deleteComment(commentId) {
+            return client.delete(`/comments/comments/${commentId}`);
+        },
+        // Backend returns { success: true, data: { _id, likeCount, hasLiked } }
+        toggleLike(commentId) {
+            return client.post(`/comments/comments/${commentId}/toggle-like`, {});
+        },
+    };
+}
+
+const GATE_ATTR = 'data-cc-gated';
+function createGate(options) {
+    let gated = false;
+    let contentEl = null;
+    let hiddenNodes = [];
+    function findContent() {
+        return document.querySelector(options.selector);
+    }
+    function hide() {
+        contentEl = findContent();
+        if (!contentEl)
+            return false;
+        if (contentEl.hasAttribute(GATE_ATTR))
+            return true; // already gated
+        const paragraphs = Array.from(contentEl.querySelectorAll('p, h2, h3, h4, blockquote, ul, ol'));
+        // Collect nodes to hide (everything after the teaser threshold)
+        if (paragraphs.length > options.teaserParagraphs) {
+            const hideFrom = paragraphs[options.teaserParagraphs];
+            const childNodes = Array.from(contentEl.childNodes);
+            const pivotIndex = childNodes.findIndex(n => n === hideFrom || contentEl.contains(n) && n.compareDocumentPosition(hideFrom) & Node.DOCUMENT_POSITION_FOLLOWING);
+            hiddenNodes = childNodes.slice(pivotIndex < 0 ? options.teaserParagraphs : pivotIndex);
+            hiddenNodes.forEach(n => {
+                var _a, _b, _c, _d;
+                if (n instanceof HTMLElement || n instanceof Text) {
+                    (_b = (_a = n.style) === null || _a === void 0 ? void 0 : _a.setProperty) === null || _b === void 0 ? void 0 : _b.call(_a, 'display', 'none');
+                    (_d = (_c = n).setAttribute) === null || _d === void 0 ? void 0 : _d.call(_c, 'data-cc-hidden', 'true');
+                }
+            });
+        }
+        else {
+            // Not enough paragraphs to split — hide the entire content
+            hiddenNodes = Array.from(contentEl.childNodes);
+            hiddenNodes.forEach(n => {
+                if (n instanceof HTMLElement)
+                    n.style.display = 'none';
+            });
+        }
+        contentEl.setAttribute(GATE_ATTR, 'true');
+        gated = true;
+        return true;
+    }
+    function reveal() {
+        if (!gated)
+            return;
+        hiddenNodes.forEach(n => {
+            if (n instanceof HTMLElement) {
+                n.style.removeProperty('display');
+                n.removeAttribute('data-cc-hidden');
+            }
+        });
+        hiddenNodes = [];
+        contentEl === null || contentEl === void 0 ? void 0 : contentEl.removeAttribute(GATE_ATTR);
+        gated = false;
+    }
+    function isGated() {
+        return gated;
+    }
+    return { hide, reveal, isGated };
+}
+
+/**
+ * Creates an isolated Shadow DOM host attached to document.body.
+ * All SDK UI lives inside this shadow root so partner CSS cannot
+ * bleed in and SDK CSS cannot bleed out.
+ */
+function createShadowHost(id) {
+    // Reuse if already in the DOM (e.g. hot-reload)
+    let host = document.getElementById(id);
+    if (!host) {
+        host = document.createElement('div');
+        host.id = id;
+        // The host element itself is invisible; only its shadow children show
+        host.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:2147483647;';
+        document.body.appendChild(host);
+    }
+    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)
+        host.remove();
+}
+/** Inject a <style> tag into a shadow root */
+function injectStyles(root, css) {
+    const existing = root.querySelector('style[data-cc-styles]');
+    if (existing) {
+        existing.textContent = css;
+        return;
+    }
+    const style = document.createElement('style');
+    style.dataset.ccStyles = 'true';
+    style.textContent = css;
+    root.appendChild(style);
+}
+
+function getPaywallStyles(primaryColor, fontFamily) {
+    return `
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    .cc-paywall-gate {
+      position: relative;
+      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;
+    }
+
+    .cc-paywall-overlay {
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 12px;
+      padding: 32px 24px;
+      max-width: 480px;
+      margin: 24px auto;
+      text-align: center;
+      font-family: ${fontFamily};
+      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+    }
+
+    .cc-paywall-overlay h2 {
+      font-size: 20px;
+      font-weight: 700;
+      color: #111827;
+      margin-bottom: 8px;
+    }
+
+    .cc-paywall-overlay p {
+      font-size: 14px;
+      color: #6b7280;
+      margin-bottom: 24px;
+      line-height: 1.6;
+    }
+
+    .cc-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 44px;
+      padding: 0 20px;
+      border: none;
+      border-radius: 8px;
+      font-family: ${fontFamily};
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: opacity 0.15s ease, transform 0.1s ease;
+      width: 100%;
+      max-width: 320px;
+    }
+    .cc-btn:hover:not(:disabled) { opacity: 0.88; }
+    .cc-btn:active:not(:disabled) { transform: scale(0.98); }
+    .cc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+
+    .cc-btn-primary {
+      background: ${primaryColor};
+      color: #fff;
+    }
+
+    .cc-btn-secondary {
+      background: #111827;
+      color: #fff;
+      margin-top: 10px;
+    }
+
+    .cc-btn-outline {
+      background: transparent;
+      color: #111827;
+      border: 2px solid #111827;
+      margin-top: 10px;
+    }
+
+    .cc-credit-badge {
+      display: inline-block;
+      background: #fef3c7;
+      color: #92400e;
+      border-radius: 20px;
+      padding: 2px 10px;
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+
+    .cc-spinner {
+      width: 18px; height: 18px;
+      border: 2px solid rgba(255,255,255,0.4);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: cc-spin 0.7s linear infinite;
+      flex-shrink: 0;
+    }
+    @keyframes cc-spin { to { transform: rotate(360deg); } }
+
+    .cc-powered-by {
+      margin-top: 20px;
+      font-size: 12px;
+      color: #9ca3af;
+    }
+    .cc-powered-by a {
+      color: ${primaryColor};
+      text-decoration: none;
+      font-weight: 600;
+    }
+    .cc-powered-by a:hover { text-decoration: underline; }
+  `;
+}
+function getCommentStyles(primaryColor, fontFamily) {
+    return `
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    /* ── Widget Button ───────────────────────────────────── */
+    .cc-widget-btn {
+      position: fixed;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: auto;
+      height: 60px;
+      background: ${primaryColor};
+      border-radius: 10px 0 0 10px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-left: 12px;
+      padding-right: 6px;
+      z-index: 2147483646;
+      box-shadow: -2px 0 16px rgba(0,0,0,0.12);
+      cursor: pointer;
+      user-select: none;
+      font-family: ${fontFamily};
+      transition: background 0.2s;
+      pointer-events: all;
+    }
+    .cc-widget-btn:hover { filter: brightness(1.08); }
+
+    .cc-widget-icon { color: #fff; display: flex; align-items: center; }
+    .cc-widget-badge {
+      background: #fff;
+      color: ${primaryColor};
+      border-radius: 12px;
+      padding: 2px 7px;
+      font-size: 12px;
+      font-weight: 700;
+      min-width: 20px;
+      text-align: center;
+    }
+    .cc-widget-drag-handle {
+      color: rgba(255,255,255,0.7);
+      cursor: grab;
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+    }
+    .cc-widget-drag-handle:active { cursor: grabbing; }
+
+    /* ── Panel Overlay ───────────────────────────────────── */
+    .cc-panel-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.35);
+      z-index: 2147483645;
+      opacity: 0;
+      transition: opacity 0.25s;
+      pointer-events: all;
+    }
+    .cc-panel-backdrop.cc-visible { opacity: 1; }
+
+    .cc-panel {
+      position: fixed;
+      top: 0; right: -500px;
+      width: 460px;
+      max-width: 95vw;
+      height: 100%;
+      background: #f9fafb;
+      z-index: 2147483646;
+      display: flex;
+      flex-direction: column;
+      box-shadow: -4px 0 32px rgba(0,0,0,0.12);
+      transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      font-family: ${fontFamily};
+      pointer-events: all;
+    }
+    .cc-panel.cc-open { right: 0; }
+
+    /* ── Panel Header ────────────────────────────────────── */
+    .cc-panel-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 20px;
+      border-bottom: 1px solid #e5e7eb;
+      background: #fff;
+      flex-shrink: 0;
+    }
+    .cc-panel-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: #111827;
+      flex: 1;
+    }
+    .cc-panel-count {
+      font-size: 13px;
+      color: #6b7280;
+      font-weight: 400;
+    }
+    .cc-panel-close-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      color: #6b7280;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      border-radius: 6px;
+      transition: background 0.15s;
+    }
+    .cc-panel-close-btn:hover { background: #f3f4f6; }
+
+    .cc-back-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      color: #6b7280;
+      padding: 4px;
+      display: none;
+      align-items: center;
+      border-radius: 6px;
+      transition: background 0.15s;
+    }
+    .cc-back-btn.cc-visible { display: flex; }
+    .cc-back-btn:hover { background: #f3f4f6; }
+
+    /* ── Sort Bar ────────────────────────────────────────── */
+    .cc-sort-bar {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 20px;
+      border-bottom: 1px solid #f3f4f6;
+      background: #fff;
+      flex-shrink: 0;
+    }
+    .cc-sort-label { font-size: 12px; color: #9ca3af; font-weight: 500; }
+    .cc-sort-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+      color: #6b7280;
+      padding: 4px 8px;
+      border-radius: 6px;
+      font-family: ${fontFamily};
+      transition: background 0.15s, color 0.15s;
+    }
+    .cc-sort-btn:hover { background: #f3f4f6; }
+    .cc-sort-btn.cc-active { background: #111827; color: #fff; }
+
+    /* ── Comments List ───────────────────────────────────── */
+    .cc-comments-list {
+      flex: 1;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+    .cc-comments-list::-webkit-scrollbar { width: 4px; }
+    .cc-comments-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
+
+    /* ── Comment Card ────────────────────────────────────── */
+    .cc-comment-card {
+      padding: 16px 20px;
+      background: #fff;
+      border-bottom: 1px solid #f3f4f6;
+    }
+    .cc-comment-card.cc-reply {
+      padding-left: 36px;
+      background: #fafafa;
+    }
+
+    .cc-comment-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 8px;
+    }
+    .cc-comment-author-row { display: flex; align-items: center; gap: 10px; }
+
+    .cc-avatar {
+      width: 32px; height: 32px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-weight: 700;
+      font-size: 12px;
+      overflow: hidden;
+    }
+    .cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+    .cc-author-name {
+      font-size: 14px;
+      font-weight: 700;
+      color: #111827;
+    }
+    .cc-comment-time {
+      font-size: 11px;
+      color: #9ca3af;
+      margin-top: 2px;
+    }
+
+    .cc-comment-body {
+      font-size: 14px;
+      color: #374151;
+      line-height: 1.6;
+      margin-bottom: 12px;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    .cc-comment-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .cc-action-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+      color: #6b7280;
+      padding: 3px 6px;
+      border-radius: 6px;
+      font-family: ${fontFamily};
+      transition: background 0.15s, color 0.15s;
+    }
+    .cc-action-btn:hover { background: #f3f4f6; }
+    .cc-action-btn.cc-liked { color: #ef4444; }
+    .cc-action-btn.cc-danger:hover { color: #ef4444; background: #fef2f2; }
+    .cc-action-btn.cc-owner-actions { margin-left: auto; }
+
+    /* ── Reply Subthread ─────────────────────────────────── */
+    .cc-subthread-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: 12px 20px 8px;
+      background: #f9fafb;
+    }
+
+    /* ── Empty / Loading / Error ─────────────────────────── */
+    .cc-empty-state, .cc-loading-state, .cc-error-state {
+      text-align: center;
+      padding: 60px 20px;
+      color: #9ca3af;
+    }
+    .cc-empty-state p, .cc-loading-state p, .cc-error-state p {
+      font-size: 14px;
+      font-weight: 500;
+      color: #9ca3af;
+      margin-bottom: 6px;
+    }
+    .cc-empty-state span, .cc-loading-state span, .cc-error-state span {
+      font-size: 13px;
+      color: #d1d5db;
+    }
+    .cc-error-state .cc-retry-btn {
+      margin-top: 16px;
+      padding: 8px 16px;
+      background: #111827;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      font-family: ${fontFamily};
+    }
+    .cc-error-icon { color: #ef4444; margin-bottom: 12px; }
+
+    .cc-spinner-lg {
+      width: 28px; height: 28px;
+      border: 2px solid #e5e7eb;
+      border-top-color: ${primaryColor};
+      border-radius: 50%;
+      animation: cc-spin 0.7s linear infinite;
+      margin: 0 auto 12px;
+    }
+    @keyframes cc-spin { to { transform: rotate(360deg); } }
+
+    /* ── Compose Box ─────────────────────────────────────── */
+    .cc-compose {
+      border-top: 1px solid #e5e7eb;
+      padding: 12px 20px;
+      background: #fff;
+      flex-shrink: 0;
+      position: relative;
+    }
+
+    .cc-compose-textarea {
+      width: 100%;
+      min-height: 72px;
+      max-height: 180px;
+      border: 1.5px solid #d1d5db;
+      border-radius: 8px;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: ${fontFamily};
+      color: #111827;
+      resize: vertical;
+      outline: none;
+      background: #fff;
+      transition: border-color 0.15s;
+      line-height: 1.5;
+    }
+    .cc-compose-textarea:focus { border-color: ${primaryColor}; }
+    .cc-compose-textarea::placeholder { color: #9ca3af; }
+
+    .cc-compose-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      gap: 8px;
+    }
+    .cc-compose-cancel {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 13px;
+      color: #6b7280;
+      font-family: ${fontFamily};
+      padding: 6px;
+      display: none;
+    }
+    .cc-compose-cancel.cc-visible { display: block; }
+    .cc-compose-submit {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      height: 36px;
+      padding: 0 16px;
+      background: ${primaryColor};
+      color: #fff;
+      border: none;
+      border-radius: 7px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: ${fontFamily};
+      margin-left: auto;
+      transition: opacity 0.15s;
+    }
+    .cc-compose-submit:disabled { opacity: 0.55; cursor: not-allowed; }
+
+    .cc-spinner-sm {
+      width: 14px; height: 14px;
+      border: 2px solid rgba(255,255,255,0.4);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: cc-spin 0.7s linear infinite;
+    }
+
+    /* ── Login Overlay inside compose ────────────────────── */
+    .cc-login-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(255,255,255,0.95);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 16px;
+      border-top: 1px solid #e5e7eb;
+    }
+    .cc-login-overlay p {
+      font-size: 14px;
+      color: #6b7280;
+      text-align: center;
+    }
+    .cc-login-overlay-btn {
+      height: 40px;
+      padding: 0 20px;
+      background: ${primaryColor};
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: ${fontFamily};
+    }
+  `;
+}
+
+/**
+ * Safe DOM text node — never use innerHTML with user-generated content.
+ * Returns a text node that can be appended to any element.
+ */
+/**
+ * Set an element's text content safely (no HTML injection).
+ */
+function setTextContent(el, str) {
+    el.textContent = str;
+}
+/**
+ * Create an element with safe text content.
+ */
+function el(tag, text, attrs) {
+    const element = document.createElement(tag);
+    if (text !== undefined)
+        element.textContent = text;
+    return element;
+}
+/**
+ * Render comment content as safe DOM nodes.
+ * Supports newlines → <br> but no raw HTML from user input.
+ * Returns a DocumentFragment.
+ */
+function renderCommentContent(raw) {
+    const fragment = document.createDocumentFragment();
+    // Replace \n with a delimiter we can split on
+    const lines = raw.split('\n');
+    lines.forEach((line, i) => {
+        fragment.appendChild(document.createTextNode(line));
+        if (i < lines.length - 1) {
+            fragment.appendChild(document.createElement('br'));
+        }
+    });
+    return fragment;
+}
+/**
+ * Validate that a URL is safe (http/https only).
+ * Returns null if unsafe.
+ */
+function sanitizeUrl(url) {
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:')
+            return null;
+        return parsed.toString();
+    }
+    catch (_a) {
+        return null;
+    }
+}
+
+const HOST_ID = 'cc-paywall-host';
+function createPaywallRenderer(config) {
+    let root = null;
+    let overlay = null;
+    function init() {
+        const { root: shadowRoot } = createShadowHost(HOST_ID);
+        root = shadowRoot;
+        injectStyles(root, getPaywallStyles(config.theme.primaryColor, config.theme.fontFamily));
+        overlay = el('div');
+        overlay.className = 'cc-paywall-overlay';
+        root.appendChild(overlay);
+    }
+    function render(state, callbacks, meta) {
+        var _a, _b, _c;
+        if (!overlay)
+            init();
+        if (!overlay)
+            return;
+        // Clear previous content
+        while (overlay.firstChild)
+            overlay.removeChild(overlay.firstChild);
+        switch (state) {
+            case 'checking':
+                renderChecking(overlay);
+                break;
+            case 'login':
+                renderLogin(overlay, callbacks);
+                break;
+            case 'purchase':
+                renderPurchase(overlay, callbacks, (_a = meta === null || meta === void 0 ? void 0 : meta.requiredCredits) !== null && _a !== void 0 ? _a : null);
+                break;
+            case 'insufficient':
+                renderInsufficient(overlay, callbacks, (_b = meta === null || meta === void 0 ? void 0 : meta.requiredCredits) !== null && _b !== void 0 ? _b : null, (_c = meta === null || meta === void 0 ? void 0 : meta.creditBalance) !== null && _c !== void 0 ? _c : null);
+                break;
+            case 'loading':
+                renderLoading(overlay);
+                break;
+            case 'granted':
+                destroy();
+                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.'));
+        const btn = el('button', 'Login & Buy with Content Credits');
+        btn.className = 'cc-btn cc-btn-primary';
+        btn.addEventListener('click', cb.onLogin);
+        parent.appendChild(btn);
+        parent.appendChild(poweredBy());
+    }
+    function renderPurchase(parent, cb, credits) {
+        parent.appendChild(el('h2', 'Unlock this article'));
+        if (credits !== null) {
+            const badge = el('span', `${credits} credit${credits !== 1 ? 's' : ''}`);
+            badge.className = 'cc-credit-badge';
+            parent.appendChild(badge);
+        }
+        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);
+        parent.appendChild(btn);
+        parent.appendChild(poweredBy());
+    }
+    function renderInsufficient(parent, cb, required, available) {
+        parent.appendChild(el('h2', 'Not enough credits'));
+        const detail = required !== null && available !== null
+            ? `You need ${required} credit${required !== 1 ? 's' : ''} but have ${available}. Top up to unlock this article.`
+            : 'You don\'t have enough credits to unlock this article. Purchase more to continue.';
+        parent.appendChild(el('p', detail));
+        const btn = el('button', 'Buy More Credits');
+        btn.className = 'cc-btn cc-btn-primary';
+        btn.addEventListener('click', cb.onBuyMoreCredits);
+        parent.appendChild(btn);
+        parent.appendChild(poweredBy());
+    }
+    function renderLoading(parent) {
+        const btn = el('button');
+        btn.className = 'cc-btn cc-btn-primary';
+        btn.disabled = true;
+        const spinner = el('span');
+        spinner.className = 'cc-spinner';
+        btn.appendChild(spinner);
+        btn.appendChild(document.createTextNode(' Processing…'));
+        parent.appendChild(btn);
+    }
+    function poweredBy() {
+        const div = el('div');
+        div.className = 'cc-powered-by';
+        div.textContent = 'Powered by ';
+        const link = el('a', 'Content Credits');
+        link.setAttribute('href', 'https://contentcredits.com');
+        link.setAttribute('target', '_blank');
+        link.setAttribute('rel', 'noopener noreferrer');
+        div.appendChild(link);
+        return div;
+    }
+    function setButtonLoading(loading) {
+        if (!overlay)
+            return;
+        const btn = overlay.querySelector('.cc-btn');
+        if (!btn)
+            return;
+        btn.disabled = loading;
+        if (loading) {
+            const spinner = el('span');
+            spinner.className = 'cc-spinner';
+            setTextContent(btn, '');
+            btn.appendChild(spinner);
+            btn.appendChild(document.createTextNode(' Processing…'));
+        }
+    }
+    function destroy() {
+        removeShadowHost(HOST_ID);
+        root = null;
+        overlay = null;
+    }
+    return { init, render, setButtonLoading, destroy };
+}
+
+const DETECTION_TIMEOUT_MS = 2000;
+/**
+ * Detect whether the Content Credits browser extension is installed.
+ *
+ * Strategy 1: Load a known icon from the chrome-extension:// URL.
+ *   - Fastest and most reliable for Chrome/Edge.
+ *
+ * Strategy 2: Check a flag the extension sets on window.
+ *   - Extension can set `window.__CC_EXTENSION_LOADED = true` in a content script.
+ *
+ * Strategy 3: Timeout fallback — if neither resolves within DETECTION_TIMEOUT_MS,
+ *   assume not installed.
+ */
+function detectExtension(extensionId) {
+    if (!extensionId || typeof extensionId !== 'string') {
+        return Promise.resolve(false);
+    }
+    return new Promise(resolve => {
+        let resolved = false;
+        function done(result) {
+            if (!resolved) {
+                resolved = true;
+                resolve(result);
+            }
+        }
+        // Strategy 2: flag check (instantaneous if extension is loaded)
+        if (window.__CC_EXTENSION_LOADED === true) {
+            done(true);
+            return;
+        }
+        // Strategy 1: image load from chrome-extension:// protocol
+        const img = new Image();
+        img.onload = () => done(true);
+        img.onerror = () => done(false);
+        img.src = `chrome-extension://${extensionId}/icons/icon16.png`;
+        // Strategy 3: timeout safety net
+        setTimeout(() => done(false), DETECTION_TIMEOUT_MS);
+    });
+}
+
+/**
+ * The set of origins we will accept postMessage messages from.
+ * Only the accounts frontend and the current page itself (for extension relay).
+ */
+function getAllowedOrigins() {
+    const origins = ["https://accounts.contentcredits.com"];
+    // Allow current page origin (extension relays messages through the page)
+    try {
+        origins.push(window.location.origin);
+    }
+    catch (_a) {
+        // ignore
+    }
+    return origins;
+}
+function createExtensionBridge() {
+    let authHandler = null;
+    let purchaseHandler = null;
+    function handleMessage(event) {
+        var _a, _b, _c, _d;
+        // Security: validate the origin before trusting any message
+        const allowed = getAllowedOrigins();
+        if (!allowed.includes(event.origin) && event.origin !== window.location.origin) {
+            return;
+        }
+        const msg = event.data;
+        if (!msg || typeof msg !== 'object' || !msg.type)
+            return;
+        switch (msg.type) {
+            case 'authorization_response': {
+                const data = ((_a = msg.data) !== null && _a !== void 0 ? _a : (_b = event.detail) === null || _b === void 0 ? void 0 : _b.data);
+                if (data && authHandler)
+                    authHandler(data);
+                break;
+            }
+            case 'purchase_response': {
+                const data = ((_c = msg.data) !== null && _c !== void 0 ? _c : (_d = event.detail) === null || _d === void 0 ? void 0 : _d.data);
+                if (data && purchaseHandler)
+                    purchaseHandler(data);
+                break;
+            }
+        }
+    }
+    function attach() {
+        window.addEventListener('message', handleMessage);
+        // Extension also dispatches as CustomEvents on window
+        window.addEventListener('authorization_response', (e) => {
+            const detail = e.detail;
+            if ((detail === null || detail === void 0 ? void 0 : detail.data) && authHandler)
+                authHandler(detail.data);
+        });
+        window.addEventListener('purchase_response', (e) => {
+            const detail = e.detail;
+            if ((detail === null || detail === void 0 ? void 0 : detail.data) && purchaseHandler)
+                purchaseHandler(detail.data);
+        });
+    }
+    function detach() {
+        window.removeEventListener('message', handleMessage);
+    }
+    function requestAuthorization(articleId, hostName) {
+        window.postMessage({ type: 'request_authorization', data: { articleId, hostName } }, window.location.origin);
+    }
+    function requestPurchase(params) {
+        window.postMessage({ type: 'request_purchase', data: params }, window.location.origin);
+    }
+    function requestLogin(hostName) {
+        window.postMessage({ type: 'request_login', data: { hostName } }, window.location.origin);
+    }
+    function onAuthorizationResponse(handler) {
+        authHandler = handler;
+    }
+    function onPurchaseResponse(handler) {
+        purchaseHandler = handler;
+    }
+    return {
+        attach,
+        detach,
+        requestAuthorization,
+        requestPurchase,
+        requestLogin,
+        onAuthorizationResponse,
+        onPurchaseResponse,
+    };
+}
+
+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() {
+    const width = 600;
+    const height = 650;
+    const left = Math.round(window.screenX + (window.outerWidth - width) / 2);
+    const top = Math.round(window.screenY + (window.outerHeight - height) / 2);
+    return `${POPUP_SPECS},left=${left},top=${top}`;
+}
+function isMobileDevice() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+        || window.innerWidth < 768;
+}
+/**
+ * Scrub `token` and `cc_token` query parameters from the current URL
+ * so the token doesn't appear in browser history or server logs.
+ */
+function scrubTokenFromUrl() {
+    try {
+        const url = new URL(window.location.href);
+        let changed = false;
+        ['token', 'cc_token'].forEach(param => {
+            if (url.searchParams.has(param)) {
+                url.searchParams.delete(param);
+                changed = true;
+            }
+        });
+        if (changed) {
+            history.replaceState(null, '', url.toString());
+        }
+    }
+    catch (_a) {
+        // ignore in environments without history API
+    }
+}
+/**
+ * Read and store a token that may have been placed in the current URL
+ * (e.g. after a mobile redirect back from the accounts site).
+ * Always scrubs the token from the URL after reading it.
+ */
+function consumeTokenFromUrl() {
+    var _a;
+    try {
+        const url = new URL(window.location.href);
+        const token = (_a = url.searchParams.get('token')) !== null && _a !== void 0 ? _a : url.searchParams.get('cc_token');
+        scrubTokenFromUrl();
+        if (token) {
+            tokenStorage.set(token);
+            return token;
+        }
+    }
+    catch (_b) {
+        // ignore
+    }
+    return null;
+}
+/**
+ * Open a centered auth popup and poll for the token callback.
+ * Returns a promise that resolves with the token when login completes,
+ * or null if the popup is closed without completing login.
+ */
+function openAuthPopup(authUrl) {
+    return new Promise(resolve => {
+        let popup = null;
+        try {
+            popup = window.open(authUrl, POPUP_NAME, centeredSpecs());
+        }
+        catch (_a) {
+            // popup blocked — fall through to null
+        }
+        // Popup blocked
+        if (!popup || popup.closed) {
+            resolve(null);
+            return;
+        }
+        const POLL_MS = 200;
+        const MAX_WAIT_MS = 5 * 60 * 1000; // 5 minutes
+        let elapsed = 0;
+        const timer = setInterval(() => {
+            var _a;
+            elapsed += POLL_MS;
+            if (!popup || popup.closed) {
+                clearInterval(timer);
+                resolve(tokenStorage.get()); // may have been set just before close
+                return;
+            }
+            if (elapsed > MAX_WAIT_MS) {
+                clearInterval(timer);
+                try {
+                    popup.close();
+                }
+                catch ( /* ignore */_b) { /* ignore */ }
+                resolve(null);
+                return;
+            }
+            try {
+                // Only readable once popup navigates back to our origin
+                const popupUrl = popup.location.href;
+                if (popupUrl.includes('/auth/callback') || popupUrl.includes('cc_token=') || popupUrl.includes('token=')) {
+                    const params = new URLSearchParams(popup.location.search);
+                    const token = (_a = params.get('token')) !== null && _a !== void 0 ? _a : params.get('cc_token');
+                    if (token) {
+                        tokenStorage.set(token);
+                        clearInterval(timer);
+                        try {
+                            popup.close();
+                        }
+                        catch ( /* ignore */_c) { /* ignore */ }
+                        resolve(token);
+                    }
+                }
+            }
+            catch (_d) {
+                // cross-origin error — popup is on accounts domain, not ours yet; keep polling
+            }
+        }, POLL_MS);
+    });
+}
+
+function createPaywall(config, creditsApi, state, emitter) {
+    const gate = createGate({
+        selector: config.contentSelector,
+        teaserParagraphs: config.teaserParagraphs,
+    });
+    const renderer = createPaywallRenderer(config);
+    const bridge = createExtensionBridge();
+    let extensionAvailable = false;
+    // ── Helpers ──────────────────────────────────────────────────────────────
+    function buildAuthUrl() {
+        const redirect = encodeURIComponent(config.articleUrl);
+        return `${"https://accounts.contentcredits.com"}/authenticate/extension?redirect=${redirect}`;
+    }
+    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 });
+        emitter.emit('paywall:hidden', {});
+        emitter.emit('article:purchased', { creditsSpent, remainingBalance: balance });
+        (_a = config.onAccessGranted) === null || _a === void 0 ? void 0 : _a.call(config);
+    }
+    // ── Login ─────────────────────────────────────────────────────────────────
+    async function doLogin() {
+        const authUrl = buildAuthUrl();
+        if (extensionAvailable) {
+            bridge.requestLogin(config.hostName);
+            return;
+        }
+        if (isMobileDevice()) {
+            // Full-page redirect — popup is blocked on mobile
+            window.location.href = authUrl;
+            return;
+        }
+        renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        const token = await openAuthPopup(authUrl);
+        if (token) {
+            state.set({ isLoggedIn: true });
+            await checkAccess();
+        }
+        else {
+            // Popup closed without login
+            renderer.render('login', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        }
+    }
+    // ── Purchase ──────────────────────────────────────────────────────────────
+    async function doPurchase() {
+        var _a, _b, _c;
+        if (!tokenStorage.has()) {
+            await doLogin();
+            return;
+        }
+        if (extensionAvailable) {
+            bridge.requestPurchase({
+                articleId: config.apiKey,
+                hostName: config.hostName,
+                location: config.articleUrl,
+                title: config.pageTitle,
+            });
+            return;
+        }
+        renderer.render('loading', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+        state.set({ isLoading: true });
+        try {
+            const result = await creditsApi.purchaseArticle({
+                apiKey: config.apiKey,
+                postUrl: config.articleUrl,
+                postName: config.pageTitle,
+                hostName: config.hostName,
+            });
+            if (result.success) {
+                handleAccessGranted(0, 0);
+            }
+            else {
+                state.set({ isLoading: false });
+                renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                emitter.emit('error', { message: (_a = result.message) !== null && _a !== void 0 ? _a : 'Purchase failed' });
+            }
+        }
+        catch (err) {
+            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,
+                });
+                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 });
+                emitter.emit('error', { message: 'Purchase failed', error: err });
+            }
+        }
+    }
+    function doBuyMoreCredits() {
+        window.open(`${"https://accounts.contentcredits.com"}/consumer/dashboard`, '_blank', 'noopener,noreferrer');
+    }
+    // ── Access Check ──────────────────────────────────────────────────────────
+    async function checkAccess() {
+        state.set({ isLoading: true });
+        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 });
+            emitter.emit('paywall:shown', {});
+            return;
+        }
+        try {
+            const result = await creditsApi.checkAccess({
+                apiKey: config.apiKey,
+                postUrl: config.articleUrl,
+                postName: config.pageTitle,
+                hostName: config.hostName,
+            });
+            state.set({
+                isLoading: false,
+                isLoaded: true,
+                hasAccess: result.success,
+            });
+            if (result.success) {
+                handleAccessGranted(0, 0);
+            }
+            else {
+                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 (!(err instanceof ApiError && err.status === 401)) {
+                emitter.emit('error', { message: 'Access check failed', error: err });
+            }
+        }
+    }
+    // ── Init ──────────────────────────────────────────────────────────────────
+    async function init() {
+        // Check if user just returned from a mobile login redirect
+        const redirectToken = consumeTokenFromUrl();
+        if (redirectToken) {
+            state.set({ isLoggedIn: true });
+        }
+        // Detect extension
+        extensionAvailable = await detectExtension(config.extensionId);
+        state.set({ isExtensionAvailable: extensionAvailable });
+        if (extensionAvailable) {
+            bridge.attach();
+            bridge.onAuthorizationResponse(data => {
+                var _a, _b, _c;
+                state.set({
+                    isLoggedIn: data.isAuthenticated,
+                    hasAccess: data.doesHaveAccess,
+                    isLoaded: true,
+                    isLoading: false,
+                    creditBalance: (_a = data.creditBalance) !== null && _a !== void 0 ? _a : null,
+                    requiredCredits: (_b = data.requiredCredits) !== null && _b !== void 0 ? _b : null,
+                });
+                if (!data.isAuthenticated) {
+                    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,
+                    });
+                    emitter.emit('paywall:shown', {});
+                }
+            });
+            bridge.onPurchaseResponse(data => {
+                var _a, _b;
+                state.set({ isLoading: false, isLoaded: true, hasAccess: data.doesHaveAccess });
+                if (data.doesHaveAccess) {
+                    handleAccessGranted((_a = data.creditsSpent) !== null && _a !== void 0 ? _a : 0, (_b = data.creditBalance) !== null && _b !== void 0 ? _b : 0);
+                }
+                else {
+                    renderer.render('purchase', { onLogin: doLogin, onPurchase: doPurchase, onBuyMoreCredits: doBuyMoreCredits });
+                    emitter.emit('error', { message: 'Purchase failed via extension' });
+                }
+            });
+        }
+        await checkAccess();
+    }
+    function destroy() {
+        bridge.detach();
+        renderer.destroy();
+        gate.reveal();
+    }
+    return { init, checkAccess, destroy };
+}
+
+const POSITION_KEY = 'cc-widget-pos';
+const WIDGET_HEIGHT = 60;
+function createCommentWidget(primaryColor, onOpen) {
+    let widget = null;
+    let badgeEl = null;
+    function mount() {
+        if (document.getElementById('cc-comment-widget'))
+            return;
+        // Restore saved vertical position
+        let topPercent = 50;
+        try {
+            const saved = localStorage.getItem(POSITION_KEY);
+            if (saved)
+                topPercent = JSON.parse(saved);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+        widget = document.createElement('div');
+        widget.id = 'cc-comment-widget';
+        // Inline styles so no external stylesheet dependency and no shadow DOM needed
+        // (widget is a minimal host-page element, panel uses shadow DOM)
+        widget.style.cssText = `
+      position:fixed;top:${topPercent}%;right:0;transform:translateY(-50%);
+      height:${WIDGET_HEIGHT}px;background:${primaryColor};border-radius:10px 0 0 10px;
+      display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;
+      z-index:2147483646;box-shadow:-2px 0 16px rgba(0,0,0,.12);
+      cursor:pointer;user-select:none;
+      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+      transition:filter .2s;
+    `;
+        widget.setAttribute('role', 'button');
+        widget.setAttribute('aria-label', 'Open comments');
+        widget.tabIndex = 0;
+        // Chat icon
+        const icon = document.createElement('div');
+        icon.style.cssText = 'color:#fff;display:flex;align-items:center;flex-shrink:0;';
+        icon.innerHTML = `<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+        // Comment count badge
+        badgeEl = document.createElement('span');
+        badgeEl.style.cssText = `
+      background:#fff;color:${primaryColor};border-radius:12px;
+      padding:2px 7px;font-size:12px;font-weight:700;min-width:20px;
+      text-align:center;display:none;
+    `;
+        // Drag handle
+        const handle = document.createElement('div');
+        handle.style.cssText = 'color:rgba(255,255,255,.65);cursor:grab;display:flex;align-items:center;padding:0 2px;flex-shrink:0;';
+        handle.innerHTML = `<svg width="8" height="22" viewBox="0 0 8 22" fill="none"><circle cx="4" cy="4" r="2" fill="currentColor"/><circle cx="4" cy="11" r="2" fill="currentColor"/><circle cx="4" cy="18" r="2" fill="currentColor"/></svg>`;
+        // Click to open panel
+        icon.addEventListener('click', onOpen);
+        badgeEl.addEventListener('click', onOpen);
+        // Drag to reposition
+        let dragging = false;
+        let startY = 0;
+        let startTop = 0;
+        function beginDrag(y) {
+            dragging = true;
+            startY = y;
+            startTop = widget.getBoundingClientRect().top;
+            handle.style.cursor = 'grabbing';
+        }
+        function moveDrag(y) {
+            if (!dragging || !widget)
+                return;
+            const delta = y - startY;
+            const newTop = Math.max(0, Math.min(window.innerHeight - WIDGET_HEIGHT, startTop + delta));
+            const pct = (newTop / window.innerHeight) * 100;
+            widget.style.top = `${pct}%`;
+        }
+        function endDrag() {
+            if (!dragging || !widget)
+                return;
+            dragging = false;
+            handle.style.cursor = 'grab';
+            const rect = widget.getBoundingClientRect();
+            const pct = (rect.top / window.innerHeight) * 100;
+            try {
+                localStorage.setItem(POSITION_KEY, JSON.stringify(pct));
+            }
+            catch ( /* ignore */_a) { /* ignore */ }
+        }
+        handle.addEventListener('mousedown', e => { e.preventDefault(); e.stopPropagation(); beginDrag(e.clientY); });
+        handle.addEventListener('touchstart', e => { e.preventDefault(); beginDrag(e.touches[0].clientY); }, { passive: false });
+        document.addEventListener('mousemove', e => moveDrag(e.clientY));
+        document.addEventListener('touchmove', e => moveDrag(e.touches[0].clientY), { passive: true });
+        document.addEventListener('mouseup', endDrag);
+        document.addEventListener('touchend', endDrag);
+        widget.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ')
+            onOpen(); });
+        widget.appendChild(icon);
+        widget.appendChild(badgeEl);
+        widget.appendChild(handle);
+        document.body.appendChild(widget);
+    }
+    function setCount(n) {
+        if (!badgeEl)
+            return;
+        if (n > 0) {
+            badgeEl.textContent = n > 99 ? '99+' : String(n);
+            badgeEl.style.display = 'inline-block';
+        }
+        else {
+            badgeEl.style.display = 'none';
+        }
+    }
+    function show() {
+        if (widget)
+            widget.style.display = 'flex';
+    }
+    function hide() {
+        if (widget)
+            widget.style.display = 'none';
+    }
+    function destroy() {
+        widget === null || widget === void 0 ? void 0 : widget.remove();
+        widget = null;
+        badgeEl = null;
+    }
+    return { mount, setCount, show, hide, destroy };
+}
+
+const PANEL_HOST_ID = 'cc-comments-host';
+const AVATAR_COLORS = ['#6366f1', '#ec4899', '#8b5cf6', '#14b8a6', '#f59e0b', '#ef4444'];
+function avatarColor(name) {
+    return AVATAR_COLORS[(name || 'A').charCodeAt(0) % AVATAR_COLORS.length];
+}
+function initials(first, last) {
+    var _a, _b, _c, _d;
+    return `${(_b = (_a = first === null || first === void 0 ? void 0 : first[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ''}${(_d = (_c = last === null || last === void 0 ? void 0 : last[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase()) !== null && _d !== void 0 ? _d : ''}` || '?';
+}
+function formatDate(iso) {
+    try {
+        const d = new Date(iso);
+        const time = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+        const day = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+        return `${time} · ${day}`;
+    }
+    catch (_a) {
+        return '';
+    }
+}
+function createCommentPanel(config, commentsApi, emitter, onClose) {
+    let root = null;
+    let currentUserId = null;
+    let currentThreadId = null;
+    let currentComments = [];
+    let currentSort = 'TOP';
+    let viewingSubthreadFor = null;
+    let replyingToCommentId = null;
+    let editingCommentId = null;
+    // ── Shadow DOM setup ──────────────────────────────────────────────────────
+    function ensureRoot() {
+        if (root)
+            return root;
+        const { root: r } = createShadowHost(PANEL_HOST_ID);
+        root = r;
+        injectStyles(root, getCommentStyles(config.theme.primaryColor, config.theme.fontFamily));
+        return root;
+    }
+    // ── Auth ──────────────────────────────────────────────────────────────────
+    function refreshUser() {
+        const token = tokenStorage.get();
+        if (token) {
+            currentUserId = getUserIdFromToken(token);
+        }
+        else {
+            currentUserId = null;
+        }
+    }
+    async function doLogin() {
+        const redirectUrl = encodeURIComponent(config.articleUrl);
+        const authUrl = `${"https://accounts.contentcredits.com"}/authenticate/extension?redirect=${redirectUrl}`;
+        if (isMobileDevice()) {
+            window.location.href = authUrl;
+            return;
+        }
+        const token = await openAuthPopup(authUrl);
+        if (token) {
+            refreshUser();
+            updateLoginOverlay();
+            void loadComments();
+        }
+    }
+    // ── Thread & Comments Loading ─────────────────────────────────────────────
+    async function loadComments() {
+        var _a;
+        const r = ensureRoot();
+        const listEl = r.getElementById('cc-comments-list');
+        if (!listEl)
+            return;
+        renderLoading(listEl);
+        try {
+            // 1. Ensure a thread exists for this page (backend returns thread object directly)
+            const threadRes = await commentsApi.ensureThread({
+                pageUrl: config.articleUrl,
+                hostname: config.hostName,
+            });
+            if (!threadRes._id) {
+                renderError(listEl, 'Comments are not available for this page.');
+                return;
+            }
+            currentThreadId = threadRes._id;
+            // 2. Fetch comments (backend returns { thread, comments } — no success wrapper)
+            const commentsRes = await commentsApi.getComments({
+                pageUrl: config.articleUrl,
+                sortBy: currentSort,
+            });
+            currentComments = (_a = commentsRes.comments) !== null && _a !== void 0 ? _a : [];
+            if (commentsRes.thread)
+                currentThreadId = commentsRes.thread._id;
+            // Update count badge in header
+            const countEl = r.getElementById('cc-header-count');
+            if (countEl)
+                setTextContent(countEl, String(currentComments.length));
+            renderComments(listEl);
+        }
+        catch (_b) {
+            renderError(listEl, 'Unable to reach the server. Check your connection.');
+        }
+    }
+    // ── Comment Tree Building ─────────────────────────────────────────────────
+    function buildTree(comments) {
+        const map = new Map();
+        const roots = [];
+        comments.forEach(c => map.set(c._id, Object.assign(Object.assign({}, c), { replies: [] })));
+        comments.forEach(c => {
+            const node = map.get(c._id);
+            if (c.parentCommentId) {
+                const parent = map.get(c.parentCommentId);
+                if (parent && !parent.parentCommentId)
+                    parent.replies.push(node);
+            }
+            else {
+                roots.push(node);
+            }
+        });
+        return roots;
+    }
+    function sortTree(roots) {
+        const sorted = [...roots];
+        if (currentSort === 'NEWEST') {
+            sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        }
+        else {
+            // TOP — sort by reply count then likes
+            sorted.sort((a, b) => {
+                var _a, _b, _c, _d, _e, _f;
+                return (((_b = (_a = b.replies) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - ((_d = (_c = a.replies) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0)) ||
+                    (((_e = b.likeCount) !== null && _e !== void 0 ? _e : 0) - ((_f = a.likeCount) !== null && _f !== void 0 ? _f : 0));
+            });
+        }
+        sorted.forEach(c => {
+            var _a;
+            if ((_a = c.replies) === null || _a === void 0 ? void 0 : _a.length) {
+                c.replies.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+            }
+        });
+        return sorted;
+    }
+    // ── DOM Rendering ─────────────────────────────────────────────────────────
+    function renderLoading(container) {
+        container.innerHTML = '';
+        const div = el('div');
+        div.className = 'cc-loading-state';
+        const spinner = el('div');
+        spinner.className = 'cc-spinner-lg';
+        div.appendChild(spinner);
+        div.appendChild(el('p', 'Loading comments…'));
+        container.appendChild(div);
+    }
+    function renderError(container, message) {
+        container.innerHTML = '';
+        const div = el('div');
+        div.className = 'cc-error-state';
+        const icon = el('div');
+        icon.className = 'cc-error-icon';
+        icon.innerHTML = `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+        div.appendChild(icon);
+        div.appendChild(el('p', message));
+        const retry = el('button', 'Try Again');
+        retry.className = 'cc-retry-btn';
+        retry.addEventListener('click', () => void loadComments());
+        div.appendChild(retry);
+        container.appendChild(div);
+    }
+    function renderComments(container) {
+        container.innerHTML = '';
+        const r = ensureRoot();
+        // Update back button and title
+        const backBtn = r.getElementById('cc-back-btn');
+        const titleEl = r.getElementById('cc-panel-title');
+        if (viewingSubthreadFor) {
+            backBtn === null || backBtn === void 0 ? void 0 : backBtn.classList.add('cc-visible');
+            if (titleEl)
+                setTextContent(titleEl, 'Replies');
+        }
+        else {
+            backBtn === null || backBtn === void 0 ? void 0 : backBtn.classList.remove('cc-visible');
+            if (titleEl)
+                setTextContent(titleEl, 'Comments');
+        }
+        if (viewingSubthreadFor) {
+            renderSubthread(container, viewingSubthreadFor);
+            return;
+        }
+        if (currentComments.length === 0) {
+            const empty = el('div');
+            empty.className = 'cc-empty-state';
+            empty.appendChild(el('p', 'No comments yet'));
+            const sub = el('span', 'Be the first to share your thoughts');
+            empty.appendChild(sub);
+            container.appendChild(empty);
+            return;
+        }
+        const tree = sortTree(buildTree(currentComments));
+        tree.forEach(c => container.appendChild(buildCommentEl(c, false)));
+    }
+    function renderSubthread(container, parentId) {
+        var _a, _b, _c, _d, _e;
+        const tree = buildTree(currentComments);
+        const parent = tree.find(c => c._id === parentId);
+        if (!parent)
+            return;
+        container.appendChild(buildCommentEl(parent, false));
+        const label = el('div', `${(_b = (_a = parent.replies) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0} ${((_d = (_c = parent.replies) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) === 1 ? 'REPLY' : 'REPLIES'}`);
+        label.className = 'cc-subthread-label';
+        container.appendChild(label);
+        if (!((_e = parent.replies) === null || _e === void 0 ? void 0 : _e.length)) {
+            const empty = el('div');
+            empty.className = 'cc-empty-state';
+            empty.style.paddingTop = '20px';
+            empty.appendChild(el('p', 'No replies yet'));
+            container.appendChild(empty);
+        }
+        else {
+            parent.replies.forEach(r => container.appendChild(buildCommentEl(r, true)));
+        }
+    }
+    function buildCommentEl(comment, isReply) {
+        var _a, _b;
+        const isOwn = !!(currentUserId && comment.authorId === currentUserId);
+        const author = comment.author;
+        const authorName = author ? `${author.firstName} ${author.lastName}`.trim() : 'Anonymous';
+        const avatarBg = avatarColor(authorName);
+        const inis = author ? initials(author.firstName, author.lastName) : '?';
+        const card = el('div');
+        card.className = `cc-comment-card${isReply ? ' cc-reply' : ''}`;
+        card.dataset.commentId = comment._id;
+        // Header row
+        const header = el('div');
+        header.className = 'cc-comment-header';
+        const authorRow = el('div');
+        authorRow.className = 'cc-comment-author-row';
+        // Avatar
+        const avatar = el('div');
+        avatar.className = 'cc-avatar';
+        avatar.style.background = avatarBg;
+        if (author === null || author === void 0 ? void 0 : author.profilePicture) {
+            const safeUrl = sanitizeUrl(author.profilePicture.startsWith('http')
+                ? author.profilePicture
+                : `${config.apiBaseUrl}${author.profilePicture}`);
+            if (safeUrl) {
+                const img = el('img');
+                img.setAttribute('src', safeUrl);
+                img.setAttribute('alt', authorName);
+                img.addEventListener('error', () => {
+                    img.remove();
+                    setTextContent(avatar, inis);
+                });
+                avatar.appendChild(img);
+            }
+            else {
+                setTextContent(avatar, inis);
+            }
+        }
+        else {
+            setTextContent(avatar, inis);
+        }
+        const authorMeta = el('div');
+        const nameEl = el('div', authorName);
+        nameEl.className = 'cc-author-name';
+        const timeEl = el('div', formatDate(comment.createdAt));
+        timeEl.className = 'cc-comment-time';
+        authorMeta.appendChild(nameEl);
+        authorMeta.appendChild(timeEl);
+        authorRow.appendChild(avatar);
+        authorRow.appendChild(authorMeta);
+        header.appendChild(authorRow);
+        card.appendChild(header);
+        // Body — safe DOM construction, never innerHTML of user content
+        const body = el('div');
+        body.className = 'cc-comment-body';
+        body.appendChild(renderCommentContent(comment.content));
+        card.appendChild(body);
+        // Actions row
+        const actions = el('div');
+        actions.className = 'cc-comment-actions';
+        // Reply button (only on top-level)
+        if (!isReply) {
+            const replyBtn = el('button');
+            replyBtn.className = 'cc-action-btn';
+            replyBtn.dataset.commentId = comment._id;
+            replyBtn.dataset.action = 'reply';
+            replyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform:scaleX(-1)"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+            replyBtn.appendChild(document.createTextNode(` ${((_a = comment.replies) === null || _a === void 0 ? void 0 : _a.length) || 'Reply'}`));
+            actions.appendChild(replyBtn);
+        }
+        // Like button
+        const likeBtn = el('button');
+        likeBtn.className = `cc-action-btn${comment.hasLiked ? ' cc-liked' : ''}`;
+        likeBtn.dataset.commentId = comment._id;
+        likeBtn.dataset.action = 'like';
+        likeBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="${comment.hasLiked ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>`;
+        likeBtn.appendChild(document.createTextNode(` ${(_b = comment.likeCount) !== null && _b !== void 0 ? _b : 0}`));
+        actions.appendChild(likeBtn);
+        // Owner controls
+        if (isOwn) {
+            const ownerDiv = el('div');
+            ownerDiv.className = 'cc-action-btn cc-owner-actions';
+            ownerDiv.style.cssText = 'margin-left:auto;display:flex;gap:4px;background:transparent;border:none;padding:0;';
+            const editBtn = el('button', 'Edit');
+            editBtn.className = 'cc-action-btn';
+            editBtn.dataset.commentId = comment._id;
+            editBtn.dataset.action = 'edit';
+            const deleteBtn = el('button', 'Delete');
+            deleteBtn.className = 'cc-action-btn cc-danger';
+            deleteBtn.dataset.commentId = comment._id;
+            deleteBtn.dataset.action = 'delete';
+            ownerDiv.appendChild(editBtn);
+            ownerDiv.appendChild(deleteBtn);
+            actions.appendChild(ownerDiv);
+        }
+        card.appendChild(actions);
+        return card;
+    }
+    // ── Panel DOM Structure ───────────────────────────────────────────────────
+    function buildPanel() {
+        const panel = el('div');
+        panel.className = 'cc-panel';
+        panel.id = 'cc-comments-panel';
+        // Header
+        const header = el('div');
+        header.className = 'cc-panel-header';
+        const backBtn = el('button');
+        backBtn.className = 'cc-back-btn';
+        backBtn.id = 'cc-back-btn';
+        backBtn.setAttribute('aria-label', 'Back');
+        backBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>`;
+        backBtn.addEventListener('click', () => {
+            viewingSubthreadFor = null;
+            replyingToCommentId = null;
+            const listEl = root === null || root === void 0 ? void 0 : root.getElementById('cc-comments-list');
+            if (listEl)
+                renderComments(listEl);
+        });
+        const titleGroup = el('div');
+        titleGroup.style.cssText = 'flex:1;display:flex;align-items:center;gap:6px;';
+        const titleEl = el('span', 'Comments');
+        titleEl.className = 'cc-panel-title';
+        titleEl.id = 'cc-panel-title';
+        const countEl = el('span', '');
+        countEl.className = 'cc-panel-count';
+        countEl.id = 'cc-header-count';
+        titleGroup.appendChild(titleEl);
+        titleGroup.appendChild(countEl);
+        const closeBtn = el('button');
+        closeBtn.className = 'cc-panel-close-btn';
+        closeBtn.setAttribute('aria-label', 'Close comments');
+        closeBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+        closeBtn.addEventListener('click', closePanel);
+        header.appendChild(backBtn);
+        header.appendChild(titleGroup);
+        header.appendChild(closeBtn);
+        panel.appendChild(header);
+        // Sort bar
+        const sortBar = el('div');
+        sortBar.className = 'cc-sort-bar';
+        const sortLabel = el('span', 'Sort:');
+        sortLabel.className = 'cc-sort-label';
+        sortBar.appendChild(sortLabel);
+        ['TOP', 'NEWEST'].forEach(sort => {
+            const btn = el('button', sort);
+            btn.className = `cc-sort-btn${currentSort === sort ? ' cc-active' : ''}`;
+            btn.dataset.sort = sort;
+            btn.addEventListener('click', () => {
+                if (currentSort === sort)
+                    return;
+                currentSort = sort;
+                sortBar.querySelectorAll('.cc-sort-btn').forEach(b => b.classList.remove('cc-active'));
+                btn.classList.add('cc-active');
+                void loadComments();
+            });
+            sortBar.appendChild(btn);
+        });
+        panel.appendChild(sortBar);
+        // Comments list
+        const list = el('div');
+        list.className = 'cc-comments-list';
+        list.id = 'cc-comments-list';
+        list.addEventListener('click', handleListClick);
+        panel.appendChild(list);
+        // Compose area
+        panel.appendChild(buildCompose());
+        return panel;
+    }
+    function buildCompose() {
+        const compose = el('div');
+        compose.className = 'cc-compose';
+        compose.id = 'cc-compose';
+        const textarea = el('textarea');
+        textarea.className = 'cc-compose-textarea';
+        textarea.id = 'cc-compose-textarea';
+        textarea.setAttribute('placeholder', 'Write a comment…');
+        textarea.setAttribute('rows', '3');
+        compose.appendChild(textarea);
+        const actions = el('div');
+        actions.className = 'cc-compose-actions';
+        const cancelBtn = el('button', 'Cancel');
+        cancelBtn.className = 'cc-compose-cancel';
+        cancelBtn.id = 'cc-compose-cancel';
+        cancelBtn.addEventListener('click', cancelEdit);
+        actions.appendChild(cancelBtn);
+        const submitBtn = el('button', 'Post');
+        submitBtn.className = 'cc-compose-submit';
+        submitBtn.id = 'cc-compose-submit';
+        submitBtn.addEventListener('click', () => void handleSubmit());
+        actions.appendChild(submitBtn);
+        compose.appendChild(actions);
+        // Login overlay inside compose
+        if (!tokenStorage.has()) {
+            compose.appendChild(buildLoginOverlay());
+        }
+        return compose;
+    }
+    function buildLoginOverlay() {
+        const overlay = el('div');
+        overlay.className = 'cc-login-overlay';
+        overlay.id = 'cc-login-overlay';
+        overlay.appendChild(el('p', 'Sign in to join the conversation'));
+        const btn = el('button', 'Login with Content Credits');
+        btn.className = 'cc-login-overlay-btn';
+        btn.addEventListener('click', () => void doLogin());
+        overlay.appendChild(btn);
+        return overlay;
+    }
+    // ── Interactions ──────────────────────────────────────────────────────────
+    function handleListClick(e) {
+        const target = e.target;
+        const btn = target.closest('[data-action]');
+        if (!btn)
+            return;
+        const action = btn.dataset.action;
+        const commentId = btn.dataset.commentId;
+        if (!commentId)
+            return;
+        switch (action) {
+            case 'reply':
+                handleReply(commentId);
+                break;
+            case 'like':
+                void handleLike(commentId);
+                break;
+            case 'edit':
+                handleEdit(commentId);
+                break;
+            case 'delete':
+                void handleDelete(commentId);
+                break;
+        }
+    }
+    function handleReply(commentId) {
+        if (!viewingSubthreadFor) {
+            // First click on Reply → drill into the subthread view
+            viewingSubthreadFor = commentId;
+            const listEl = root === null || root === void 0 ? void 0 : root.getElementById('cc-comments-list');
+            if (listEl)
+                renderComments(listEl);
+        }
+        else {
+            // Already in subthread → set the reply target and focus textarea
+            replyingToCommentId = commentId;
+            editingCommentId = null;
+            const textarea = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-textarea');
+            if (textarea) {
+                textarea.placeholder = 'Write a reply…';
+                textarea.focus();
+            }
+            showCancel();
+        }
+    }
+    async function handleLike(commentId) {
+        var _a, _b, _c, _d, _e;
+        if (!tokenStorage.has()) {
+            void doLogin();
+            return;
+        }
+        // Optimistic update
+        const comment = currentComments.find(c => c._id === commentId);
+        if (!comment)
+            return;
+        const wasLiked = comment.hasLiked;
+        comment.hasLiked = !wasLiked;
+        comment.likeCount = ((_a = comment.likeCount) !== null && _a !== void 0 ? _a : 0) + (comment.hasLiked ? 1 : -1);
+        const listEl = root === null || root === void 0 ? void 0 : root.getElementById('cc-comments-list');
+        if (listEl)
+            renderComments(listEl);
+        try {
+            // Backend returns { success: true, data: { _id, likeCount, hasLiked } }
+            const res = await commentsApi.toggleLike(commentId);
+            if (res.success) {
+                if (typeof ((_b = res.data) === null || _b === void 0 ? void 0 : _b.hasLiked) === 'boolean')
+                    comment.hasLiked = res.data.hasLiked;
+                if (typeof ((_c = res.data) === null || _c === void 0 ? void 0 : _c.likeCount) === 'number')
+                    comment.likeCount = res.data.likeCount;
+                emitter.emit('comment:liked', { commentId, hasLiked: comment.hasLiked });
+            }
+            else {
+                // Rollback
+                comment.hasLiked = wasLiked;
+                comment.likeCount = ((_d = comment.likeCount) !== null && _d !== void 0 ? _d : 0) + (wasLiked ? 1 : -1);
+            }
+            if (listEl)
+                renderComments(listEl);
+        }
+        catch (_f) {
+            comment.hasLiked = wasLiked;
+            comment.likeCount = ((_e = comment.likeCount) !== null && _e !== void 0 ? _e : 0) + (wasLiked ? 1 : -1);
+            if (listEl)
+                renderComments(listEl);
+        }
+    }
+    function handleEdit(commentId) {
+        const comment = currentComments.find(c => c._id === commentId);
+        if (!comment)
+            return;
+        editingCommentId = commentId;
+        replyingToCommentId = null;
+        const textarea = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-textarea');
+        if (textarea) {
+            textarea.value = comment.content;
+            textarea.placeholder = 'Edit your comment…';
+            textarea.focus();
+        }
+        const submitBtn = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-submit');
+        if (submitBtn)
+            setTextContent(submitBtn, 'Update');
+        showCancel();
+    }
+    async function handleDelete(commentId) {
+        if (!confirm('Delete this comment?'))
+            return;
+        try {
+            // Backend returns the deleted comment object directly (check _id for success)
+            const res = await commentsApi.deleteComment(commentId);
+            if (res._id) {
+                emitter.emit('comment:deleted', { commentId });
+                void loadComments();
+            }
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    async function handleSubmit() {
+        const textarea = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-textarea');
+        if (!textarea)
+            return;
+        const content = textarea.value.trim();
+        if (!content)
+            return;
+        if (!tokenStorage.has()) {
+            void doLogin();
+            return;
+        }
+        if (!currentThreadId)
+            return;
+        const submitBtn = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-submit');
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            setTextContent(submitBtn, 'Posting…');
+        }
+        try {
+            // Both editComment and postComment return the comment object directly
+            let res;
+            if (editingCommentId) {
+                res = await commentsApi.editComment(editingCommentId, content);
+            }
+            else {
+                res = await commentsApi.postComment({
+                    threadId: currentThreadId,
+                    content,
+                    parentCommentId: replyingToCommentId !== null && replyingToCommentId !== void 0 ? replyingToCommentId : viewingSubthreadFor,
+                });
+                emitter.emit('comment:posted', { comment: res });
+            }
+            if (res._id) {
+                textarea.value = '';
+                editingCommentId = null;
+                replyingToCommentId = null;
+                textarea.placeholder = viewingSubthreadFor ? 'Write a reply…' : 'Write a comment…';
+                hideCancel();
+                if (submitBtn)
+                    setTextContent(submitBtn, 'Post');
+                void loadComments();
+            }
+        }
+        catch ( /* handled by loadComments */_a) { /* handled by loadComments */ }
+        finally {
+            if (submitBtn) {
+                submitBtn.disabled = false;
+            }
+        }
+    }
+    function showCancel() {
+        const cancelBtn = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-cancel');
+        cancelBtn === null || cancelBtn === void 0 ? void 0 : cancelBtn.classList.add('cc-visible');
+    }
+    function hideCancel() {
+        const cancelBtn = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-cancel');
+        cancelBtn === null || cancelBtn === void 0 ? void 0 : cancelBtn.classList.remove('cc-visible');
+    }
+    function cancelEdit() {
+        editingCommentId = null;
+        replyingToCommentId = null;
+        const textarea = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-textarea');
+        if (textarea) {
+            textarea.value = '';
+            textarea.placeholder = 'Write a comment…';
+        }
+        const submitBtn = root === null || root === void 0 ? void 0 : root.getElementById('cc-compose-submit');
+        if (submitBtn)
+            setTextContent(submitBtn, 'Post');
+        hideCancel();
+    }
+    function updateLoginOverlay() {
+        const r = ensureRoot();
+        const existing = r.getElementById('cc-login-overlay');
+        if (tokenStorage.has() && existing) {
+            existing.remove();
+        }
+        else if (!tokenStorage.has() && !existing) {
+            const compose = r.getElementById('cc-compose');
+            compose === null || compose === void 0 ? void 0 : compose.appendChild(buildLoginOverlay());
+        }
+    }
+    // ── Open / Close ──────────────────────────────────────────────────────────
+    function openPanel() {
+        const r = ensureRoot();
+        // Check if token arrived from redirect
+        const redirectToken = consumeTokenFromUrl();
+        if (redirectToken)
+            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);
+            r.appendChild(buildPanel());
+        }
+        // Animate open
+        requestAnimationFrame(() => {
+            var _a;
+            backdrop.classList.add('cc-visible');
+            (_a = r.getElementById('cc-comments-panel')) === null || _a === void 0 ? void 0 : _a.classList.add('cc-open');
+        });
+        updateLoginOverlay();
+        void loadComments();
+    }
+    function closePanel() {
+        const r = root;
+        if (!r)
+            return;
+        const backdrop = r.getElementById('cc-panel-backdrop');
+        const panel = r.getElementById('cc-comments-panel');
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.classList.remove('cc-visible');
+        panel === null || panel === void 0 ? void 0 : panel.classList.remove('cc-open');
+        setTimeout(() => {
+            backdrop === null || backdrop === void 0 ? void 0 : backdrop.remove();
+            panel === null || panel === void 0 ? void 0 : panel.remove();
+            onClose();
+        }, 280);
+    }
+    function destroy() {
+        removeShadowHost(PANEL_HOST_ID);
+        root = null;
+    }
+    return { openPanel, closePanel, destroy };
+}
+
+function createComments(config, commentsApi, emitter) {
+    const panel = createCommentPanel(config, commentsApi, emitter, () => widget.show());
+    const widget = createCommentWidget(config.theme.primaryColor, () => {
+        widget.hide();
+        panel.openPanel();
+    });
+    function init() {
+        widget.mount();
+    }
+    function open() {
+        widget.hide();
+        panel.openPanel();
+    }
+    function close() {
+        panel.closePanel();
+    }
+    function destroy() {
+        panel.destroy();
+        widget.destroy();
+    }
+    return { init, open, close, destroy };
+}
+
+/**
+ * Content Credits JS SDK v2
+ *
+ * Drop-in paywall and comments for any website.
+ *
+ * CDN (script tag):
+ *   <script src="https://cdn.contentcredits.com/sdk/v2/content-credits.umd.min.js"></script>
+ *   <script>
+ *     ContentCreditsSDK.init({ apiKey: 'YOUR_API_KEY', contentSelector: '#article-body' });
+ *   </script>
+ *
+ * npm:
+ *   import { ContentCredits } from '@contentcredits/sdk';
+ *   ContentCredits.init({ apiKey: 'YOUR_API_KEY', contentSelector: '#article-body' });
+ */
+class ContentCredits {
+    constructor(config) {
+        this.config = config;
+        this.state = createState();
+        this.emitter = createEventEmitter();
+        this.paywallModule = null;
+        this.commentsModule = null;
+        this.client = createApiClient(config.apiBaseUrl, this.emitter);
+        this.creditsApi = createCreditsApi(this.client);
+        this.commentsApi = createCommentsApi(this.client);
+    }
+    // ── Factory ───────────────────────────────────────────────────────────────
+    /**
+     * Initialise the SDK and immediately start the access check.
+     *
+     * @example
+     * const cc = ContentCredits.init({
+     *   apiKey: 'pub_abc123',
+     *   contentSelector: '#premium-content',
+     * });
+     */
+    static init(rawConfig) {
+        const config = resolveConfig(rawConfig);
+        const instance = new ContentCredits(config);
+        void instance._start();
+        return instance;
+    }
+    // ── Internal start ────────────────────────────────────────────────────────
+    async _start() {
+        // Handle token that may have arrived in the URL (mobile redirect flow)
+        consumeTokenFromUrl();
+        this.paywallModule = createPaywall(this.config, this.creditsApi, this.state, this.emitter);
+        if (this.config.enableComments) {
+            this.commentsModule = createComments(this.config, this.commentsApi, this.emitter);
+            this.commentsModule.init();
+        }
+        await this.paywallModule.init();
+        this.emitter.emit('ready', { state: this.state.get() });
+    }
+    // ── Public API ────────────────────────────────────────────────────────────
+    /** Subscribe to an SDK event. Returns an unsubscribe function. */
+    on(event, handler) {
+        return this.emitter.on(event, handler);
+    }
+    /** Unsubscribe from an SDK event. */
+    off(event, handler) {
+        this.emitter.off(event, handler);
+    }
+    /** Get a snapshot of the current SDK state. */
+    getState() {
+        return this.state.get();
+    }
+    /** Programmatically trigger an article access check. */
+    async checkAccess() {
+        var _a;
+        await ((_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.checkAccess());
+    }
+    /** Open the comment panel programmatically. */
+    openComments() {
+        var _a;
+        (_a = this.commentsModule) === null || _a === void 0 ? void 0 : _a.open();
+    }
+    /** Close the comment panel programmatically. */
+    closeComments() {
+        var _a;
+        (_a = this.commentsModule) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    /** Check if the user is currently authenticated. */
+    isLoggedIn() {
+        return tokenStorage.has();
+    }
+    /** Tear down the SDK — removes all UI, event listeners, and stored state. */
+    destroy() {
+        var _a, _b;
+        (_a = this.paywallModule) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.commentsModule) === null || _b === void 0 ? void 0 : _b.destroy();
+        this.emitter.removeAll();
+        this.state.reset();
+    }
+    /** SDK version string. */
+    static get version() {
+        return "2.0.0";
+    }
+}
+// ── Auto-init from script data attributes (CDN usage) ────────────────────────
+// Partners can include the script like:
+//   <script src="..." data-api-key="pub_abc" data-content-selector="#body"></script>
+// and the SDK will auto-initialise without any additional JS.
+function autoInit() {
+    var _a, _b, _c;
+    const script = (_a = document.currentScript) !== null && _a !== void 0 ? _a : document.querySelector('script[data-cc-api-key], script[data-api-key]');
+    if (!script)
+        return;
+    const ds = script.dataset;
+    const apiKey = (_b = ds.ccApiKey) !== null && _b !== void 0 ? _b : ds.apiKey;
+    if (!apiKey)
+        return;
+    const rawConfig = {
+        apiKey,
+        contentSelector: (_c = ds.ccContentSelector) !== null && _c !== void 0 ? _c : ds.contentSelector,
+        teaserParagraphs: ds.ccTeaserParagraphs ? parseInt(ds.ccTeaserParagraphs, 10) : undefined,
+        enableComments: ds.ccEnableComments !== 'false',
+        extensionId: ds.ccExtensionId,
+        debug: ds.ccDebug === 'true',
+    };
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => ContentCredits.init(rawConfig));
+    }
+    else {
+        ContentCredits.init(rawConfig);
+    }
+}
+autoInit();
+
+exports.ContentCredits = ContentCredits;
+//# sourceMappingURL=content-credits.cjs.js.map