featurely-site-manager 1.0.0

package/dist/index.mjs

@@ -0,0 +1,848 @@
+// src/index.ts
+var SiteManager = class {
+  constructor(config) {
+    this.siteConfig = null;
+    this.pollIntervalId = null;
+    this.messageContainers = /* @__PURE__ */ new Map();
+    this.dismissedMessages = /* @__PURE__ */ new Set();
+    this.featureFlagBuckets = /* @__PURE__ */ new Map();
+    // Consistent bucketing for percentage rollouts
+    this.analyticsQueue = [];
+    this.analyticsFlushIntervalId = null;
+    this.sessionId = this.generateSessionId();
+    var _a, _b, _c;
+    if (!config.apiKey) {
+      throw new Error("Featurely Site Manager: apiKey is required");
+    }
+    if (!config.projectId) {
+      throw new Error("Featurely Site Manager: projectId is required");
+    }
+    this.config = {
+      apiKey: config.apiKey,
+      projectId: config.projectId,
+      apiUrl: config.apiUrl || "https://featurely.com",
+      pollInterval: (_a = config.pollInterval) != null ? _a : 6e4,
+      userEmail: config.userEmail,
+      userId: config.userId,
+      bypassCheck: config.bypassCheck,
+      onMaintenanceEnabled: config.onMaintenanceEnabled,
+      onMaintenanceDisabled: config.onMaintenanceDisabled,
+      onMessageReceived: config.onMessageReceived,
+      onMessageDismissed: config.onMessageDismissed,
+      onFeatureFlagsUpdated: config.onFeatureFlagsUpdated,
+      onError: config.onError,
+      enableAnalytics: (_b = config.enableAnalytics) != null ? _b : true,
+      analyticsFlushInterval: (_c = config.analyticsFlushInterval) != null ? _c : 6e4
+    };
+    this.loadDismissedMessages();
+  }
+  /**
+   * Initialize and start the site manager
+   */
+  async init() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      console.warn(
+        "Featurely Site Manager: Can only be initialized in a browser environment"
+      );
+      return;
+    }
+    await this.fetchConfig();
+    this.startPolling();
+    if (this.config.enableAnalytics) {
+      this.startAnalyticsFlushing();
+    }
+    this.injectStyles();
+  }
+  /**
+   * Stop the site manager and clean up
+   */
+  destroy() {
+    this.stopPolling();
+    this.stopAnalyticsFlushing();
+    this.flushAnalytics();
+    this.clearMessages();
+  }
+  /**
+   * Update user email for whitelist checks
+   */
+  setUser(email, userId) {
+    var _a;
+    this.config.userEmail = email;
+    if (userId) {
+      this.config.userId = userId;
+    }
+    if ((_a = this.siteConfig) == null ? void 0 : _a.maintenance.enabled) {
+      this.checkMaintenanceMode();
+    }
+  }
+  /**
+   * Check if a feature flag is enabled for the current user
+   */
+  isFeatureEnabled(flagKey) {
+    var _a;
+    if (!((_a = this.siteConfig) == null ? void 0 : _a.featureFlags)) {
+      return false;
+    }
+    const flag = this.siteConfig.featureFlags.find((f) => f.key === flagKey);
+    if (!flag || !flag.enabled) {
+      return false;
+    }
+    const isEnabled = this.evaluateFeatureFlag(flag);
+    const trackKey = `feature_flag_tracked_${flagKey}`;
+    if (typeof sessionStorage !== "undefined" && !sessionStorage.getItem(trackKey)) {
+      this.trackEvent("feature_flag_evaluated", {
+        flagKey,
+        enabled: isEnabled
+      });
+      sessionStorage.setItem(trackKey, "1");
+    }
+    return isEnabled;
+  }
+  /**
+   * Get the variant for a feature flag (for A/B testing)
+   */
+  getFeatureVariant(flagKey) {
+    var _a;
+    if (!((_a = this.siteConfig) == null ? void 0 : _a.featureFlags)) {
+      return null;
+    }
+    const flag = this.siteConfig.featureFlags.find((f) => f.key === flagKey);
+    if (!flag || !flag.enabled || !flag.variants || flag.variants.length === 0) {
+      return null;
+    }
+    if (!this.evaluateFeatureFlag(flag)) {
+      return null;
+    }
+    const cacheKey = `variant_${flagKey}`;
+    const cached = localStorage.getItem(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const bucket = this.getUserBucket(flagKey);
+    let cumulative = 0;
+    for (const variant of flag.variants) {
+      cumulative += variant.weight;
+      if (bucket < cumulative) {
+        localStorage.setItem(cacheKey, variant.key);
+        return variant.key;
+      }
+    }
+    const defaultVariant = flag.defaultVariant || flag.variants[0].key;
+    localStorage.setItem(cacheKey, defaultVariant);
+    return defaultVariant;
+  }
+  /**
+   * Get all feature flags
+   */
+  getAllFeatureFlags() {
+    var _a;
+    return ((_a = this.siteConfig) == null ? void 0 : _a.featureFlags) || [];
+  }
+  /**
+   * Get all enabled feature flags for the current user
+   */
+  getEnabledFeatures() {
+    var _a;
+    if (!((_a = this.siteConfig) == null ? void 0 : _a.featureFlags)) {
+      return [];
+    }
+    return this.siteConfig.featureFlags.filter((flag) => flag.enabled && this.evaluateFeatureFlag(flag)).map((flag) => flag.key);
+  }
+  /**
+   * Manually refresh configuration
+   */
+  async refresh() {
+    await this.fetchConfig();
+  }
+  /**
+   * Track a custom analytics event
+   * @param eventName - Name of the event (e.g., 'button_clicked', 'feature_used')
+   * @param properties - Optional event properties (e.g., { button: 'signup', page: '/home' })
+   */
+  trackEvent(eventName, properties) {
+    if (!this.config.enableAnalytics) {
+      return;
+    }
+    this.analyticsQueue.push({
+      eventName,
+      properties,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (this.analyticsQueue.length >= 10) {
+      this.flushAnalytics();
+    }
+  }
+  // ============================================================================
+  // Configuration Fetching
+  // ============================================================================
+  async fetchConfig() {
+    var _a, _b;
+    try {
+      const response = await fetch(
+        `${this.config.apiUrl}/api/public/v1/site-config?projectId=${this.config.projectId}`,
+        {
+          headers: {
+            "X-API-Key": this.config.apiKey
+          }
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to fetch site configuration: ${response.statusText}`);
+      }
+      const newConfig = await response.json();
+      const configChanged = JSON.stringify(newConfig) !== JSON.stringify(this.siteConfig);
+      if (configChanged) {
+        const wasMaintenanceEnabled = (_a = this.siteConfig) == null ? void 0 : _a.maintenance.enabled;
+        const oldFeatureFlags = ((_b = this.siteConfig) == null ? void 0 : _b.featureFlags) || [];
+        this.siteConfig = newConfig;
+        if (newConfig.maintenance.enabled && !wasMaintenanceEnabled) {
+          this.enableMaintenanceMode();
+        } else if (!newConfig.maintenance.enabled && wasMaintenanceEnabled) {
+          this.disableMaintenanceMode();
+        } else if (newConfig.maintenance.enabled) {
+          this.checkMaintenanceMode();
+        }
+        if (JSON.stringify(newConfig.featureFlags) !== JSON.stringify(oldFeatureFlags)) {
+          if (this.config.onFeatureFlagsUpdated) {
+            this.config.onFeatureFlagsUpdated(newConfig.featureFlags);
+          }
+        }
+        this.updateMessages();
+      }
+    } catch (error) {
+      console.error("Featurely Site Manager: Failed to fetch configuration", error);
+      if (this.config.onError && error instanceof Error) {
+        this.config.onError(error);
+      }
+    }
+  }
+  startPolling() {
+    if (this.pollIntervalId) return;
+    this.pollIntervalId = setInterval(() => {
+      this.fetchConfig();
+    }, this.config.pollInterval);
+  }
+  stopPolling() {
+    if (this.pollIntervalId) {
+      clearInterval(this.pollIntervalId);
+      this.pollIntervalId = null;
+    }
+  }
+  // ============================================================================
+  // Analytics
+  // ============================================================================
+  startAnalyticsFlushing() {
+    if (this.analyticsFlushIntervalId) return;
+    this.analyticsFlushIntervalId = setInterval(() => {
+      this.flushAnalytics();
+    }, this.config.analyticsFlushInterval);
+  }
+  stopAnalyticsFlushing() {
+    if (this.analyticsFlushIntervalId) {
+      clearInterval(this.analyticsFlushIntervalId);
+      this.analyticsFlushIntervalId = null;
+    }
+  }
+  async flushAnalytics() {
+    if (this.analyticsQueue.length === 0) {
+      return;
+    }
+    const eventsToSend = [...this.analyticsQueue];
+    this.analyticsQueue = [];
+    for (const event of eventsToSend) {
+      try {
+        await fetch(
+          `${this.config.apiUrl}/api/projects/${this.config.projectId}/analytics/events`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              eventName: event.eventName,
+              properties: event.properties,
+              userId: this.config.userId,
+              sessionId: this.sessionId,
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+              platform: typeof navigator !== "undefined" ? navigator.platform : void 0
+            })
+          }
+        );
+      } catch (error) {
+        console.error("Failed to send analytics event:", error);
+      }
+    }
+  }
+  generateSessionId() {
+    return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+  }
+  // ============================================================================
+  // Feature Flags
+  // ============================================================================
+  /**
+   * Evaluate if a feature flag should be enabled for the current user
+   */
+  evaluateFeatureFlag(flag) {
+    if (!flag.enabled) {
+      return false;
+    }
+    const userEmail = this.config.userEmail;
+    if (flag.excludeEmails && userEmail && flag.excludeEmails.includes(userEmail)) {
+      return false;
+    }
+    if (flag.targetEmails && flag.targetEmails.length > 0) {
+      if (!userEmail || !flag.targetEmails.includes(userEmail)) {
+        return false;
+      }
+      return true;
+    }
+    if (flag.rolloutPercentage !== void 0 && flag.rolloutPercentage < 100) {
+      const bucket = this.getUserBucket(flag.key);
+      return bucket < flag.rolloutPercentage;
+    }
+    return true;
+  }
+  /**
+   * Get consistent bucket (0-99) for a user+flag combination
+   * This ensures the same user always gets the same result for percentage rollouts
+   */
+  getUserBucket(flagKey) {
+    if (this.featureFlagBuckets.has(flagKey)) {
+      return this.featureFlagBuckets.get(flagKey);
+    }
+    const identifier = this.config.userId || this.config.userEmail || this.getAnonymousId();
+    const hash = this.simpleHash(`${identifier}:${flagKey}`);
+    const bucket = hash % 100;
+    this.featureFlagBuckets.set(flagKey, bucket);
+    return bucket;
+  }
+  /**
+   * Simple hash function for consistent bucketing
+   */
+  simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash);
+  }
+  /**
+   * Get or create anonymous user ID for bucketing
+   */
+  getAnonymousId() {
+    const storageKey = "featurely_anonymous_id";
+    let id = localStorage.getItem(storageKey);
+    if (!id) {
+      id = `anon_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+      localStorage.setItem(storageKey, id);
+    }
+    return id;
+  }
+  // ============================================================================
+  // Maintenance Mode
+  // ============================================================================
+  checkMaintenanceMode() {
+    var _a;
+    if (!((_a = this.siteConfig) == null ? void 0 : _a.maintenance.enabled)) return;
+    if (this.shouldBypassMaintenance()) {
+      return;
+    }
+    this.showMaintenancePage();
+  }
+  enableMaintenanceMode() {
+    if (!this.siteConfig) return;
+    if (this.shouldBypassMaintenance()) {
+      return;
+    }
+    this.showMaintenancePage();
+    this.trackEvent("maintenance_enabled", {
+      maintenanceType: this.siteConfig.maintenance.type
+    });
+    if (this.config.onMaintenanceEnabled) {
+      this.config.onMaintenanceEnabled(this.siteConfig.maintenance);
+    }
+  }
+  disableMaintenanceMode() {
+    this.hideMaintenancePage();
+    this.trackEvent("maintenance_disabled");
+    if (this.config.onMaintenanceDisabled) {
+      this.config.onMaintenanceDisabled();
+    }
+  }
+  shouldBypassMaintenance() {
+    if (!this.siteConfig) return false;
+    const whitelist = this.siteConfig.maintenance.whitelist;
+    if (this.config.bypassCheck && this.config.bypassCheck()) {
+      return true;
+    }
+    if (whitelist.localStorageKeys && whitelist.localStorageKeys.length > 0) {
+      const hasKey = whitelist.localStorageKeys.some((key) => {
+        try {
+          return localStorage.getItem(key) !== null;
+        } catch {
+          return false;
+        }
+      });
+      if (hasKey) return true;
+    }
+    if (whitelist.emails && this.config.userEmail) {
+      if (whitelist.emails.includes(this.config.userEmail)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  showMaintenancePage() {
+    if (!this.siteConfig) return;
+    const config = this.siteConfig.maintenance;
+    const overlay = document.createElement("div");
+    overlay.id = "featurely-maintenance-overlay";
+    overlay.className = "featurely-maintenance-overlay";
+    if (config.type === "custom" && config.customHtml) {
+      overlay.innerHTML = config.customHtml;
+    } else {
+      overlay.innerHTML = this.getDefaultMaintenanceHtml(config);
+    }
+    document.body.appendChild(overlay);
+  }
+  hideMaintenancePage() {
+    const overlay = document.getElementById("featurely-maintenance-overlay");
+    if (overlay) {
+      overlay.remove();
+    }
+  }
+  getDefaultMaintenanceHtml(config) {
+    const restoration = config.expectedRestoration ? new Date(config.expectedRestoration).toLocaleString() : "soon";
+    const statusLink = config.showStatusLink && config.statusPageUrl ? `<p><a href="${config.statusPageUrl}" target="_blank" rel="noopener noreferrer" class="featurely-status-link">View Status Page \u2192</a></p>` : "";
+    return `
+      <div class="featurely-maintenance-content">
+        <div class="featurely-maintenance-icon">\u{1F527}</div>
+        <h1>We'll be back soon!</h1>
+        <p>We're performing scheduled maintenance.</p>
+        <p class="featurely-maintenance-time">Expected restoration: <strong>${restoration}</strong></p>
+        ${statusLink}
+        <p class="featurely-maintenance-footer">Thank you for your patience.</p>
+      </div>
+    `;
+  }
+  // ============================================================================
+  // Status Messages
+  // ============================================================================
+  updateMessages() {
+    if (!this.siteConfig) return;
+    const currentTime = /* @__PURE__ */ new Date();
+    const currentPath = window.location.pathname;
+    const activeMessages = this.siteConfig.messages.filter((message) => {
+      if (this.dismissedMessages.has(message.id)) {
+        return false;
+      }
+      if (message.startsAt && new Date(message.startsAt) > currentTime) {
+        return false;
+      }
+      if (message.expiresAt && new Date(message.expiresAt) < currentTime) {
+        return false;
+      }
+      if (message.targetPages && message.targetPages.length > 0) {
+        const matches = message.targetPages.some((pattern) => {
+          const regex = new RegExp(pattern);
+          return regex.test(currentPath);
+        });
+        if (!matches) return false;
+      }
+      return true;
+    });
+    this.messageContainers.forEach((container, id) => {
+      if (!activeMessages.find((m) => m.id === id)) {
+        container.remove();
+        this.messageContainers.delete(id);
+      }
+    });
+    activeMessages.forEach((message) => {
+      if (!this.messageContainers.has(message.id)) {
+        this.showMessage(message);
+        if (this.config.onMessageReceived) {
+          this.config.onMessageReceived(message);
+        }
+      }
+    });
+  }
+  showMessage(message) {
+    var _a;
+    const messageEl = document.createElement("div");
+    messageEl.className = `featurely-message featurely-message-${message.type} featurely-message-${message.position} featurely-message-${message.style}`;
+    messageEl.dataset.messageId = message.id;
+    const icon = message.icon || this.getDefaultIcon(message.type);
+    const ctaHtml = message.cta ? `<a href="${message.cta.url}" class="featurely-message-cta">${message.cta.text}</a>` : "";
+    const closeButton = message.dismissible ? `<button class="featurely-message-close" aria-label="Close message">&times;</button>` : "";
+    messageEl.innerHTML = `
+      <div class="featurely-message-content">
+        <div class="featurely-message-icon">${icon}</div>
+        <div class="featurely-message-text">
+          <strong class="featurely-message-title">${message.title}</strong>
+          <span class="featurely-message-body">${message.message}</span>
+        </div>
+        ${ctaHtml}
+        ${closeButton}
+      </div>
+    `;
+    if (message.dismissible) {
+      const closeBtn = messageEl.querySelector(".featurely-message-close");
+      closeBtn == null ? void 0 : closeBtn.addEventListener("click", () => this.dismissMessage(message.id));
+    }
+    if ((_a = message.cta) == null ? void 0 : _a.action) {
+      const ctaEl = messageEl.querySelector(".featurely-message-cta");
+      ctaEl == null ? void 0 : ctaEl.addEventListener("click", (e) => {
+        var _a2;
+        e.preventDefault();
+        if ((_a2 = message.cta) == null ? void 0 : _a2.action) {
+          this.handleMessageAction(message.cta.action, message);
+        }
+      });
+    }
+    document.body.appendChild(messageEl);
+    setTimeout(() => messageEl.classList.add("featurely-message-show"), 10);
+    this.messageContainers.set(message.id, messageEl);
+    this.trackEvent("message_shown", {
+      messageId: message.id,
+      messageType: message.type,
+      messagePosition: message.position,
+      messageStyle: message.style
+    });
+    if (message.style === "toast" && message.dismissible) {
+      setTimeout(() => this.dismissMessage(message.id), 5e3);
+    }
+  }
+  dismissMessage(messageId) {
+    var _a, _b;
+    const messageEl = this.messageContainers.get(messageId);
+    if (!messageEl) return;
+    messageEl.classList.remove("featurely-message-show");
+    setTimeout(() => {
+      messageEl.remove();
+      this.messageContainers.delete(messageId);
+    }, 300);
+    this.dismissedMessages.add(messageId);
+    this.saveDismissedMessages();
+    this.trackEvent("message_dismissed", {
+      messageId,
+      messageType: ((_b = (_a = this.siteConfig) == null ? void 0 : _a.messages.find((m) => m.id === messageId)) == null ? void 0 : _b.type) || "unknown"
+    });
+    if (this.config.onMessageDismissed) {
+      this.config.onMessageDismissed(messageId);
+    }
+  }
+  clearMessages() {
+    this.messageContainers.forEach((el) => el.remove());
+    this.messageContainers.clear();
+  }
+  handleMessageAction(action, message) {
+    var _a;
+    console.log("Message action triggered:", action, message);
+    if ((_a = message.cta) == null ? void 0 : _a.url) {
+      window.location.href = message.cta.url;
+    }
+  }
+  getDefaultIcon(type) {
+    const icons = {
+      info: "\u2139\uFE0F",
+      warning: "\u26A0\uFE0F",
+      error: "\u274C",
+      success: "\u2705"
+    };
+    return icons[type];
+  }
+  // ============================================================================
+  // Persistence
+  // ============================================================================
+  loadDismissedMessages() {
+    try {
+      const stored = localStorage.getItem("featurely_dismissed_messages");
+      if (stored) {
+        this.dismissedMessages = new Set(JSON.parse(stored));
+      }
+    } catch {
+    }
+  }
+  saveDismissedMessages() {
+    try {
+      localStorage.setItem(
+        "featurely_dismissed_messages",
+        JSON.stringify(Array.from(this.dismissedMessages))
+      );
+    } catch {
+    }
+  }
+  // ============================================================================
+  // Styles
+  // ============================================================================
+  injectStyles() {
+    if (document.getElementById("featurely-site-manager-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "featurely-site-manager-styles";
+    style.textContent = `
+      /* Maintenance Overlay */
+      .featurely-maintenance-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        z-index: 999999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      }
+
+      .featurely-maintenance-content {
+        text-align: center;
+        max-width: 600px;
+        padding: 40px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 16px;
+        backdrop-filter: blur(10px);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+      }
+
+      .featurely-maintenance-icon {
+        font-size: 64px;
+        margin-bottom: 20px;
+      }
+
+      .featurely-maintenance-content h1 {
+        font-size: 36px;
+        margin: 0 0 16px 0;
+        font-weight: 700;
+      }
+
+      .featurely-maintenance-content p {
+        font-size: 18px;
+        margin: 12px 0;
+        opacity: 0.9;
+      }
+
+      .featurely-maintenance-time {
+        margin: 24px 0;
+        padding: 16px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+      }
+
+      .featurely-status-link {
+        display: inline-block;
+        margin: 20px 0;
+        padding: 12px 24px;
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+        text-decoration: none;
+        border-radius: 8px;
+        font-weight: 600;
+        transition: all 0.2s;
+      }
+
+      .featurely-status-link:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateY(-2px);
+      }
+
+      .featurely-maintenance-footer {
+        margin-top: 32px;
+        font-size: 14px;
+        opacity: 0.7;
+      }
+
+      /* Status Messages */
+      .featurely-message {
+        position: fixed;
+        left: 0;
+        right: 0;
+        z-index: 999998;
+        padding: 16px 20px;
+        background: white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        opacity: 0;
+        transform: translateY(-20px);
+        transition: all 0.3s ease;
+      }
+
+      .featurely-message-show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .featurely-message-top {
+        top: 0;
+      }
+
+      .featurely-message-bottom {
+        bottom: 0;
+      }
+
+      .featurely-message-toast {
+        left: auto;
+        right: 20px;
+        max-width: 400px;
+        border-radius: 8px;
+      }
+
+      .featurely-message-toast.featurely-message-top {
+        top: 20px;
+      }
+
+      .featurely-message-toast.featurely-message-bottom {
+        bottom: 20px;
+      }
+
+      .featurely-message-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .featurely-message-icon {
+        font-size: 24px;
+        flex-shrink: 0;
+      }
+
+      .featurely-message-text {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .featurely-message-title {
+        font-size: 14px;
+        font-weight: 600;
+        display: block;
+      }
+
+      .featurely-message-body {
+        font-size: 14px;
+        opacity: 0.9;
+      }
+
+      .featurely-message-cta {
+        padding: 8px 16px;
+        border-radius: 6px;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 14px;
+        white-space: nowrap;
+        transition: all 0.2s;
+      }
+
+      .featurely-message-close {
+        background: none;
+        border: none;
+        font-size: 24px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.5;
+        transition: opacity 0.2s;
+        flex-shrink: 0;
+      }
+
+      .featurely-message-close:hover {
+        opacity: 1;
+      }
+
+      /* Message Types */
+      .featurely-message-info {
+        background: #e3f2fd;
+        color: #1976d2;
+      }
+
+      .featurely-message-info .featurely-message-cta {
+        background: #1976d2;
+        color: white;
+      }
+
+      .featurely-message-info .featurely-message-cta:hover {
+        background: #1565c0;
+      }
+
+      .featurely-message-warning {
+        background: #fff3e0;
+        color: #f57c00;
+      }
+
+      .featurely-message-warning .featurely-message-cta {
+        background: #f57c00;
+        color: white;
+      }
+
+      .featurely-message-warning .featurely-message-cta:hover {
+        background: #ef6c00;
+      }
+
+      .featurely-message-error {
+        background: #ffebee;
+        color: #c62828;
+      }
+
+      .featurely-message-error .featurely-message-cta {
+        background: #c62828;
+        color: white;
+      }
+
+      .featurely-message-error .featurely-message-cta:hover {
+        background: #b71c1c;
+      }
+
+      .featurely-message-success {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
+
+      .featurely-message-success .featurely-message-cta {
+        background: #2e7d32;
+        color: white;
+      }
+
+      .featurely-message-success .featurely-message-cta:hover {
+        background: #1b5e20;
+      }
+
+      /* Mobile Responsive */
+      @media (max-width: 640px) {
+        .featurely-message-toast {
+          left: 10px;
+          right: 10px;
+          max-width: none;
+        }
+
+        .featurely-maintenance-content {
+          padding: 20px;
+        }
+
+        .featurely-maintenance-content h1 {
+          font-size: 28px;
+        }
+
+        .featurely-maintenance-content p {
+          font-size: 16px;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+};
+var index_default = SiteManager;
+export {
+  SiteManager,
+  index_default as default
+};