@followgate/js 0.10.1 → 0.12.0

package/dist/index.d.mts

@@ -10,8 +10,10 @@ type SocialAction = 'follow' | 'repost' | 'like';
  * Twitter/X configuration
  */
 interface TwitterConfig {
-    handle: string;
+    handle?: string;
+    overrideHandle?: string;
     tweetId?: string;
+    username?: string;
 }
 /**
  * SDK Configuration
@@ -111,6 +113,13 @@ declare class FollowGateClient {
     private injectStyles;
     private createModal;
     private getContentElement;
+    /**
+     * Get target handle with priority:
+     * 1. config.twitter.overrideHandle (explicit override)
+     * 2. serverConfig.targetHandle (from Dashboard)
+     * 3. config.twitter.handle (legacy fallback, deprecated)
+     */
+    private getTargetHandle;
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;

package/dist/index.d.ts

@@ -10,8 +10,10 @@ type SocialAction = 'follow' | 'repost' | 'like';
  * Twitter/X configuration
  */
 interface TwitterConfig {
-    handle: string;
+    handle?: string;
+    overrideHandle?: string;
     tweetId?: string;
+    username?: string;
 }
 /**
  * SDK Configuration
@@ -111,6 +113,13 @@ declare class FollowGateClient {
     private injectStyles;
     private createModal;
     private getContentElement;
+    /**
+     * Get target handle with priority:
+     * 1. config.twitter.overrideHandle (explicit override)
+     * 2. serverConfig.targetHandle (from Dashboard)
+     * 3. config.twitter.handle (legacy fallback, deprecated)
+     */
+    private getTargetHandle;
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;

package/dist/index.js

@@ -446,6 +446,35 @@ var MODAL_STYLES = `
   color: #94a3b8;
 }
 
+.fg-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: transparent;
+  border: 1px solid #334155;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.fg-close-btn:hover {
+  background: #1e293b;
+  color: #94a3b8;
+  border-color: #475569;
+}
+
+.fg-close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
 .fg-btn-row {
   display: flex;
   gap: 8px;
@@ -462,7 +491,8 @@ var ICONS = {
   x: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
   check: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
   repost: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>',
-  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>'
+  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+  close: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>'
 };
 var FollowGateClient = class {
   config = null;
@@ -582,6 +612,15 @@ var FollowGateClient = class {
       return;
     }
     await this.fetchServerConfig();
+    if (this.config.twitter?.username && !this.hasUsername()) {
+      this.setUsername(this.config.twitter.username, "twitter");
+      if (this.config.debug) {
+        console.log(
+          "[FollowGate] Pre-filled username:",
+          this.config.twitter.username
+        );
+      }
+    }
     this.injectStyles();
     this.createModal();
   }
@@ -626,6 +665,9 @@ var FollowGateClient = class {
     backdrop.className = "fg-modal-backdrop";
     backdrop.innerHTML = `
       <div class="fg-modal">
+        <button class="fg-close-btn" id="fg-close-btn" aria-label="Close">
+          ${ICONS.close}
+        </button>
         <div id="fg-content"></div>
         <div class="fg-footer">
           <p>Powered by <a href="https://followgate.app" target="_blank" rel="noopener">FollowGate</a></p>
@@ -634,6 +676,9 @@ var FollowGateClient = class {
     `;
     document.body.appendChild(backdrop);
     this.modalElement = backdrop;
+    document.getElementById("fg-close-btn")?.addEventListener("click", () => {
+      this.hide(true);
+    });
     requestAnimationFrame(() => {
       backdrop.classList.add("fg-visible");
     });
@@ -646,10 +691,28 @@ var FollowGateClient = class {
   getContentElement() {
     return document.getElementById("fg-content");
   }
+  /**
+   * Get target handle with priority:
+   * 1. config.twitter.overrideHandle (explicit override)
+   * 2. serverConfig.targetHandle (from Dashboard)
+   * 3. config.twitter.handle (legacy fallback, deprecated)
+   */
+  getTargetHandle() {
+    if (this.config?.twitter?.overrideHandle) {
+      return this.config.twitter.overrideHandle;
+    }
+    if (this.serverConfig?.targetHandle) {
+      return this.serverConfig.targetHandle;
+    }
+    if (this.config?.twitter?.handle) {
+      return this.config.twitter.handle;
+    }
+    return null;
+  }
   renderUsernameStep() {
     const content = this.getContentElement();
     if (!content) return;
-    const handle = this.serverConfig?.targetHandle || this.config?.twitter?.handle;
+    const handle = this.getTargetHandle();
     const hasRepost = !!this.config?.twitter?.tweetId;
     const allowSkip = this.serverConfig?.allowSkip ?? false;
     const welcomeTitle = this.serverConfig?.welcomeTitle || "Unlock Free Access";
@@ -704,9 +767,13 @@ var FollowGateClient = class {
   }
   renderFollowStep() {
     const content = this.getContentElement();
-    if (!content || !this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
-    const hasRepost = !!this.config.twitter.tweetId;
+    if (!content) return;
+    const handle = this.getTargetHandle();
+    if (!handle) {
+      console.error("[FollowGate] No target handle configured. Set it in Dashboard or use overrideHandle.");
+      return;
+    }
+    const hasRepost = !!this.config?.twitter?.tweetId;
     content.innerHTML = `
       ${hasRepost ? this.renderStepIndicator(1) : ""}
       <div class="fg-icon-box">
@@ -745,8 +812,8 @@ var FollowGateClient = class {
     }
   }
   handleFollowClick() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     this.openIntent({
       platform: "twitter",
       action: "follow",
@@ -755,8 +822,8 @@ var FollowGateClient = class {
     this.showFollowConfirmation();
   }
   showFollowConfirmation() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     const subtitle = document.getElementById("fg-follow-subtitle");
     const actions = document.getElementById("fg-follow-actions");
     if (subtitle) {
@@ -802,14 +869,14 @@ var FollowGateClient = class {
     }
   }
   async handleFollowConfirm() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     await this.complete({
       platform: "twitter",
       action: "follow",
       target: handle
     });
-    if (this.config.twitter.tweetId) {
+    if (this.config?.twitter?.tweetId) {
       this.renderRepostStep();
     } else {
       this.renderConfirmStep();
@@ -960,11 +1027,12 @@ var FollowGateClient = class {
       this.handleFinish();
     });
     document.getElementById("fg-redo-follow")?.addEventListener("click", () => {
-      if (this.config?.twitter) {
+      const handle = this.getTargetHandle();
+      if (handle) {
         this.openIntent({
           platform: "twitter",
           action: "follow",
-          target: this.config.twitter.handle
+          target: handle
         });
       }
     });

package/dist/index.mjs

@@ -420,6 +420,35 @@ var MODAL_STYLES = `
   color: #94a3b8;
 }
 
+.fg-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: transparent;
+  border: 1px solid #334155;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.fg-close-btn:hover {
+  background: #1e293b;
+  color: #94a3b8;
+  border-color: #475569;
+}
+
+.fg-close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
 .fg-btn-row {
   display: flex;
   gap: 8px;
@@ -436,7 +465,8 @@ var ICONS = {
   x: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
   check: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
   repost: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>',
-  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>'
+  warning: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+  close: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>'
 };
 var FollowGateClient = class {
   config = null;
@@ -556,6 +586,15 @@ var FollowGateClient = class {
       return;
     }
     await this.fetchServerConfig();
+    if (this.config.twitter?.username && !this.hasUsername()) {
+      this.setUsername(this.config.twitter.username, "twitter");
+      if (this.config.debug) {
+        console.log(
+          "[FollowGate] Pre-filled username:",
+          this.config.twitter.username
+        );
+      }
+    }
     this.injectStyles();
     this.createModal();
   }
@@ -600,6 +639,9 @@ var FollowGateClient = class {
     backdrop.className = "fg-modal-backdrop";
     backdrop.innerHTML = `
       <div class="fg-modal">
+        <button class="fg-close-btn" id="fg-close-btn" aria-label="Close">
+          ${ICONS.close}
+        </button>
         <div id="fg-content"></div>
         <div class="fg-footer">
           <p>Powered by <a href="https://followgate.app" target="_blank" rel="noopener">FollowGate</a></p>
@@ -608,6 +650,9 @@ var FollowGateClient = class {
     `;
     document.body.appendChild(backdrop);
     this.modalElement = backdrop;
+    document.getElementById("fg-close-btn")?.addEventListener("click", () => {
+      this.hide(true);
+    });
     requestAnimationFrame(() => {
       backdrop.classList.add("fg-visible");
     });
@@ -620,10 +665,28 @@ var FollowGateClient = class {
   getContentElement() {
     return document.getElementById("fg-content");
   }
+  /**
+   * Get target handle with priority:
+   * 1. config.twitter.overrideHandle (explicit override)
+   * 2. serverConfig.targetHandle (from Dashboard)
+   * 3. config.twitter.handle (legacy fallback, deprecated)
+   */
+  getTargetHandle() {
+    if (this.config?.twitter?.overrideHandle) {
+      return this.config.twitter.overrideHandle;
+    }
+    if (this.serverConfig?.targetHandle) {
+      return this.serverConfig.targetHandle;
+    }
+    if (this.config?.twitter?.handle) {
+      return this.config.twitter.handle;
+    }
+    return null;
+  }
   renderUsernameStep() {
     const content = this.getContentElement();
     if (!content) return;
-    const handle = this.serverConfig?.targetHandle || this.config?.twitter?.handle;
+    const handle = this.getTargetHandle();
     const hasRepost = !!this.config?.twitter?.tweetId;
     const allowSkip = this.serverConfig?.allowSkip ?? false;
     const welcomeTitle = this.serverConfig?.welcomeTitle || "Unlock Free Access";
@@ -678,9 +741,13 @@ var FollowGateClient = class {
   }
   renderFollowStep() {
     const content = this.getContentElement();
-    if (!content || !this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
-    const hasRepost = !!this.config.twitter.tweetId;
+    if (!content) return;
+    const handle = this.getTargetHandle();
+    if (!handle) {
+      console.error("[FollowGate] No target handle configured. Set it in Dashboard or use overrideHandle.");
+      return;
+    }
+    const hasRepost = !!this.config?.twitter?.tweetId;
     content.innerHTML = `
       ${hasRepost ? this.renderStepIndicator(1) : ""}
       <div class="fg-icon-box">
@@ -719,8 +786,8 @@ var FollowGateClient = class {
     }
   }
   handleFollowClick() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     this.openIntent({
       platform: "twitter",
       action: "follow",
@@ -729,8 +796,8 @@ var FollowGateClient = class {
     this.showFollowConfirmation();
   }
   showFollowConfirmation() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     const subtitle = document.getElementById("fg-follow-subtitle");
     const actions = document.getElementById("fg-follow-actions");
     if (subtitle) {
@@ -776,14 +843,14 @@ var FollowGateClient = class {
     }
   }
   async handleFollowConfirm() {
-    if (!this.config?.twitter) return;
-    const handle = this.config.twitter.handle;
+    const handle = this.getTargetHandle();
+    if (!handle) return;
     await this.complete({
       platform: "twitter",
       action: "follow",
       target: handle
     });
-    if (this.config.twitter.tweetId) {
+    if (this.config?.twitter?.tweetId) {
       this.renderRepostStep();
     } else {
       this.renderConfirmStep();
@@ -934,11 +1001,12 @@ var FollowGateClient = class {
       this.handleFinish();
     });
     document.getElementById("fg-redo-follow")?.addEventListener("click", () => {
-      if (this.config?.twitter) {
+      const handle = this.getTargetHandle();
+      if (handle) {
         this.openIntent({
           platform: "twitter",
           action: "follow",
-          target: this.config.twitter.handle
+          target: handle
         });
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@followgate/js",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "FollowGate SDK - Grow your audience with every download. Require social actions (follow, repost) before users can access your app.",
   "author": "FollowGate <hello@followgate.app>",
   "homepage": "https://followgate.app",