@kitbase/messaging 0.1.0

package/dist/index.cjs

@@ -0,0 +1,949 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ApiError: () => ApiError,
+  AuthenticationError: () => AuthenticationError,
+  Messaging: () => Messaging,
+  MessagingError: () => MessagingError,
+  TimeoutError: () => TimeoutError,
+  ValidationError: () => ValidationError,
+  getInstance: () => getInstance,
+  init: () => init
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/errors.ts
+var MessagingError = class _MessagingError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "MessagingError";
+    Object.setPrototypeOf(this, _MessagingError.prototype);
+  }
+};
+var AuthenticationError = class _AuthenticationError extends MessagingError {
+  constructor(message = "Invalid API key") {
+    super(message);
+    this.name = "AuthenticationError";
+    Object.setPrototypeOf(this, _AuthenticationError.prototype);
+  }
+};
+var ApiError = class _ApiError extends MessagingError {
+  statusCode;
+  response;
+  constructor(message, statusCode, response) {
+    super(message);
+    this.name = "ApiError";
+    this.statusCode = statusCode;
+    this.response = response;
+    Object.setPrototypeOf(this, _ApiError.prototype);
+  }
+};
+var ValidationError = class _ValidationError extends MessagingError {
+  field;
+  constructor(message, field) {
+    super(message);
+    this.name = "ValidationError";
+    this.field = field;
+    Object.setPrototypeOf(this, _ValidationError.prototype);
+  }
+};
+var TimeoutError = class _TimeoutError extends MessagingError {
+  constructor(message = "Request timed out") {
+    super(message);
+    this.name = "TimeoutError";
+    Object.setPrototypeOf(this, _TimeoutError.prototype);
+  }
+};
+
+// src/api.ts
+var DEFAULT_BASE_URL = "https://api.kitbase.dev";
+var TIMEOUT = 3e4;
+var MessagingApi = class {
+  constructor(sdkKey, baseUrl) {
+    this.sdkKey = sdkKey;
+    this.baseUrl = (baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+  }
+  baseUrl;
+  async getMessages(options) {
+    const params = {};
+    if (options?.userId) params.userId = options.userId;
+    if (options?.metadata) params.metadata = JSON.stringify(options.metadata);
+    const response = await this.get(
+      "/sdk/v1/in-app-messages",
+      params
+    );
+    return response.messages.map(toInAppMessage);
+  }
+  async markViewed(messageId, userId) {
+    await this.post("/sdk/v1/in-app-messages/views", { messageId, userId });
+  }
+  // ── HTTP ──────────────────────────────────────────────────────
+  async get(endpoint, params) {
+    let url = `${this.baseUrl}${endpoint}`;
+    if (params && Object.keys(params).length > 0) {
+      const qs = Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
+      url += `?${qs}`;
+    }
+    const controller = new AbortController();
+    const tid = setTimeout(() => controller.abort(), TIMEOUT);
+    try {
+      const res = await fetch(url, {
+        method: "GET",
+        headers: { "Content-Type": "application/json", "x-sdk-key": this.sdkKey },
+        signal: controller.signal
+      });
+      clearTimeout(tid);
+      if (!res.ok) this.throwError(res, await this.parseBody(res));
+      return await res.json();
+    } catch (err) {
+      clearTimeout(tid);
+      if (err instanceof Error && err.name === "AbortError") throw new TimeoutError();
+      throw err;
+    }
+  }
+  async post(endpoint, body) {
+    const controller = new AbortController();
+    const tid = setTimeout(() => controller.abort(), TIMEOUT);
+    try {
+      const res = await fetch(`${this.baseUrl}${endpoint}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "x-sdk-key": this.sdkKey },
+        body: JSON.stringify(body),
+        signal: controller.signal
+      });
+      clearTimeout(tid);
+      if (!res.ok) this.throwError(res, await this.parseBody(res));
+    } catch (err) {
+      clearTimeout(tid);
+      if (err instanceof Error && err.name === "AbortError") throw new TimeoutError();
+      throw err;
+    }
+  }
+  throwError(res, body) {
+    if (res.status === 401) throw new AuthenticationError();
+    let msg = res.statusText;
+    if (body && typeof body === "object") {
+      if ("message" in body) msg = String(body.message);
+      else if ("error" in body) msg = String(body.error);
+    }
+    throw new ApiError(msg, res.status, body);
+  }
+  async parseBody(res) {
+    try {
+      return await res.json();
+    } catch {
+      return null;
+    }
+  }
+};
+function toInAppMessage(raw) {
+  const msg = {
+    id: raw.id,
+    title: raw.title,
+    body: raw.message,
+    showOnce: raw.showOnce,
+    type: raw.messageType,
+    channel: raw.channelName || null,
+    imageUrl: raw.imageUrl,
+    backgroundColor: raw.backgroundColor,
+    startDate: raw.startDate,
+    endDate: raw.endDate
+  };
+  if (raw.actionButtonText) {
+    msg.actionButton = {
+      text: raw.actionButtonText,
+      url: raw.actionButtonUrl,
+      color: raw.actionButtonColor,
+      textColor: raw.actionButtonTextColor
+    };
+  }
+  if (raw.secondaryButtonText) {
+    msg.secondaryButton = {
+      text: raw.secondaryButtonText,
+      url: raw.secondaryButtonUrl,
+      color: raw.secondaryButtonColor,
+      textColor: raw.secondaryButtonTextColor
+    };
+  }
+  return msg;
+}
+
+// src/styles.ts
+var STYLES = (
+  /* css */
+  `
+:host {
+  all: initial;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1a1a1a;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================== Overlay ============================== */
+
+.kb-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 999999;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  animation: kb-fade-in 200ms ease-out;
+}
+.kb-overlay.kb-exit {
+  animation: kb-fade-out 150ms ease-in forwards;
+}
+
+/* ============================== Modal ============================== */
+
+.kb-modal {
+  position: relative;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  max-width: 480px;
+  width: 100%;
+  overflow: hidden;
+  animation: kb-scale-in 200ms ease-out;
+}
+.kb-overlay.kb-exit .kb-modal {
+  animation: kb-scale-out 150ms ease-in forwards;
+}
+
+/* ============================== Banner ============================== */
+
+.kb-banner-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999998;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.kb-banner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  background: #4F46E5;
+  color: #fff;
+  pointer-events: auto;
+  animation: kb-slide-down 250ms ease-out;
+}
+.kb-banner.kb-exit {
+  animation: kb-slide-up-exit 150ms ease-in forwards;
+}
+.kb-banner .kb-content {
+  flex: 1;
+  min-width: 0;
+}
+.kb-banner .kb-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+.kb-banner .kb-body {
+  font-size: 13px;
+  opacity: 0.9;
+  color: inherit;
+  margin: 0;
+}
+.kb-banner .kb-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.kb-banner .kb-btn-action {
+  background: rgba(255,255,255,0.2);
+  color: #fff;
+}
+.kb-banner .kb-btn-secondary {
+  background: transparent;
+  color: rgba(255,255,255,0.8);
+}
+.kb-banner .kb-close {
+  position: static;
+  background: rgba(255,255,255,0.15);
+  color: #fff;
+}
+.kb-banner .kb-close:hover {
+  background: rgba(255,255,255,0.25);
+}
+
+/* ============================== Card ============================== */
+
+.kb-card-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 999997;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 360px;
+  pointer-events: none;
+}
+
+.kb-card {
+  position: relative;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  overflow: hidden;
+  pointer-events: auto;
+  animation: kb-slide-up 250ms ease-out;
+}
+.kb-card.kb-exit {
+  animation: kb-slide-down-exit 150ms ease-in forwards;
+}
+
+/* ============================== Image (fullscreen) ============================== */
+
+.kb-image-msg {
+  position: relative;
+  max-width: 600px;
+  width: 100%;
+  animation: kb-scale-in 200ms ease-out;
+}
+.kb-overlay.kb-exit .kb-image-msg {
+  animation: kb-scale-out 150ms ease-in forwards;
+}
+.kb-image-msg > img {
+  display: block;
+  width: 100%;
+  border-radius: 16px;
+}
+.kb-image-msg .kb-buttons {
+  margin-top: 12px;
+  justify-content: center;
+}
+
+/* ============================== Shared ============================== */
+
+.kb-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.06);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  color: #666;
+  transition: background 150ms, color 150ms;
+  z-index: 1;
+}
+.kb-close:hover {
+  background: rgba(0,0,0,0.12);
+  color: #333;
+}
+.kb-overlay .kb-close {
+  background: rgba(255,255,255,0.15);
+  color: #fff;
+}
+.kb-overlay .kb-close:hover {
+  background: rgba(255,255,255,0.25);
+}
+
+.kb-msg-image {
+  display: block;
+  width: 100%;
+}
+
+.kb-content {
+  padding: 20px;
+}
+
+.kb-title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+
+.kb-body {
+  font-size: 14px;
+  color: #555;
+  line-height: 1.6;
+  margin-bottom: 16px;
+  white-space: pre-wrap;
+}
+
+.kb-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.kb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+  transition: opacity 150ms;
+  font-family: inherit;
+  line-height: 1;
+}
+.kb-btn:hover {
+  opacity: 0.88;
+}
+
+.kb-btn-action {
+  background: #4F46E5;
+  color: #fff;
+}
+
+.kb-btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+/* ============================== Animations ============================== */
+
+@keyframes kb-fade-in {
+  from { opacity: 0 } to { opacity: 1 }
+}
+@keyframes kb-fade-out {
+  from { opacity: 1 } to { opacity: 0 }
+}
+@keyframes kb-scale-in {
+  from { transform: scale(0.95); opacity: 0 }
+  to   { transform: scale(1);    opacity: 1 }
+}
+@keyframes kb-scale-out {
+  from { transform: scale(1);    opacity: 1 }
+  to   { transform: scale(0.95); opacity: 0 }
+}
+@keyframes kb-slide-down {
+  from { transform: translateY(-100%) }
+  to   { transform: translateY(0) }
+}
+@keyframes kb-slide-up-exit {
+  from { transform: translateY(0) }
+  to   { transform: translateY(-100%) }
+}
+@keyframes kb-slide-up {
+  from { transform: translateY(20px); opacity: 0 }
+  to   { transform: translateY(0);    opacity: 1 }
+}
+@keyframes kb-slide-down-exit {
+  from { transform: translateY(0);    opacity: 1 }
+  to   { transform: translateY(20px); opacity: 0 }
+}
+
+/* ============================== Responsive ============================== */
+
+@media (max-width: 480px) {
+  .kb-card-container {
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    max-width: none;
+  }
+  .kb-modal {
+    max-width: none;
+  }
+}
+`
+);
+
+// src/renderer.ts
+var MessageRenderer = class {
+  constructor(callbacks) {
+    this.callbacks = callbacks;
+    this.host = document.createElement("div");
+    this.host.id = "kitbase-messaging";
+    document.body.appendChild(this.host);
+    this.shadow = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = STYLES;
+    this.shadow.appendChild(style);
+    this.bannerContainer = document.createElement("div");
+    this.bannerContainer.className = "kb-banner-container";
+    this.shadow.appendChild(this.bannerContainer);
+    this.cardContainer = document.createElement("div");
+    this.cardContainer.className = "kb-card-container";
+    this.shadow.appendChild(this.cardContainer);
+  }
+  host;
+  shadow;
+  bannerContainer;
+  cardContainer;
+  displayed = /* @__PURE__ */ new Map();
+  /**
+   * Reconcile: add new messages, remove stale ones.
+   * Idempotent — calling with the same list is a no-op.
+   */
+  update(messages) {
+    const incoming = new Set(messages.map((m) => m.id));
+    for (const [id] of this.displayed) {
+      if (!incoming.has(id)) {
+        this.removeMessage(id);
+      }
+    }
+    for (const msg of messages) {
+      if (!this.displayed.has(msg.id)) {
+        this.renderMessage(msg);
+      }
+    }
+  }
+  /** Programmatically dismiss a message (with exit animation). */
+  dismiss(messageId) {
+    this.removeMessage(messageId);
+  }
+  /** Remove all rendered messages immediately. */
+  clear() {
+    for (const [id] of this.displayed) {
+      const entry = this.displayed.get(id);
+      if (entry) entry.element.remove();
+    }
+    this.displayed.clear();
+  }
+  /** Remove the shadow host from the DOM entirely. */
+  destroy() {
+    this.clear();
+    this.host.remove();
+  }
+  // ── Rendering ─────────────────────────────────────────────────
+  renderMessage(msg) {
+    let element;
+    switch (msg.type) {
+      case "banner":
+        element = this.renderBanner(msg);
+        this.bannerContainer.appendChild(element);
+        break;
+      case "card":
+        element = this.renderCard(msg);
+        this.cardContainer.appendChild(element);
+        break;
+      case "image":
+        element = this.renderImageOverlay(msg);
+        this.shadow.appendChild(element);
+        break;
+      case "modal":
+      default:
+        element = this.renderModal(msg);
+        this.shadow.appendChild(element);
+        break;
+    }
+    this.displayed.set(msg.id, { element, message: msg });
+    this.callbacks.onShow(msg);
+  }
+  renderModal(msg) {
+    const overlay = this.el("div", "kb-overlay");
+    const modal = this.el("div", "kb-modal");
+    if (msg.backgroundColor) modal.style.background = msg.backgroundColor;
+    modal.appendChild(this.closeButton(msg));
+    if (msg.imageUrl) {
+      const img = document.createElement("img");
+      img.className = "kb-msg-image";
+      img.src = msg.imageUrl;
+      img.alt = "";
+      modal.appendChild(img);
+    }
+    const content = this.el("div", "kb-content");
+    content.appendChild(this.titleEl(msg.title));
+    if (msg.body) content.appendChild(this.bodyEl(msg.body));
+    content.appendChild(this.buttonsEl(msg));
+    modal.appendChild(content);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) this.handleDismiss(msg);
+    });
+    overlay.appendChild(modal);
+    return overlay;
+  }
+  renderBanner(msg) {
+    const banner = this.el("div", "kb-banner");
+    if (msg.backgroundColor) {
+      banner.style.background = msg.backgroundColor;
+    }
+    const content = this.el("div", "kb-content");
+    content.appendChild(this.titleEl(msg.title));
+    if (msg.body) content.appendChild(this.bodyEl(msg.body));
+    banner.appendChild(content);
+    const actions = this.el("div", "kb-actions");
+    if (msg.actionButton) {
+      actions.appendChild(this.btnEl(msg, msg.actionButton, "kb-btn-action"));
+    }
+    if (msg.secondaryButton) {
+      actions.appendChild(this.btnEl(msg, msg.secondaryButton, "kb-btn-secondary"));
+    }
+    actions.appendChild(this.closeButton(msg));
+    banner.appendChild(actions);
+    return banner;
+  }
+  renderCard(msg) {
+    const card = this.el("div", "kb-card");
+    if (msg.backgroundColor) card.style.background = msg.backgroundColor;
+    card.appendChild(this.closeButton(msg));
+    if (msg.imageUrl) {
+      const img = document.createElement("img");
+      img.className = "kb-msg-image";
+      img.src = msg.imageUrl;
+      img.alt = "";
+      card.appendChild(img);
+    }
+    const content = this.el("div", "kb-content");
+    content.appendChild(this.titleEl(msg.title));
+    if (msg.body) content.appendChild(this.bodyEl(msg.body));
+    content.appendChild(this.buttonsEl(msg));
+    card.appendChild(content);
+    return card;
+  }
+  renderImageOverlay(msg) {
+    const overlay = this.el("div", "kb-overlay");
+    const container = this.el("div", "kb-image-msg");
+    container.appendChild(this.closeButton(msg));
+    if (msg.imageUrl) {
+      const img = document.createElement("img");
+      img.src = msg.imageUrl;
+      img.alt = msg.title;
+      container.appendChild(img);
+    }
+    const buttons = this.buttonsEl(msg);
+    if (buttons.childElementCount > 0) {
+      container.appendChild(buttons);
+    }
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) this.handleDismiss(msg);
+    });
+    overlay.appendChild(container);
+    return overlay;
+  }
+  // ── Shared elements ───────────────────────────────────────────
+  titleEl(text) {
+    const el = this.el("div", "kb-title");
+    el.textContent = text;
+    return el;
+  }
+  bodyEl(text) {
+    const el = this.el("div", "kb-body");
+    el.textContent = text;
+    return el;
+  }
+  buttonsEl(msg) {
+    const wrap = this.el("div", "kb-buttons");
+    if (msg.actionButton) {
+      wrap.appendChild(this.btnEl(msg, msg.actionButton, "kb-btn-action"));
+    }
+    if (msg.secondaryButton) {
+      wrap.appendChild(this.btnEl(msg, msg.secondaryButton, "kb-btn-secondary"));
+    }
+    return wrap;
+  }
+  btnEl(msg, button, className) {
+    const btn = document.createElement("button");
+    btn.className = `kb-btn ${className}`;
+    btn.textContent = button.text;
+    if (button.color) btn.style.background = button.color;
+    if (button.textColor) btn.style.color = button.textColor;
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleAction(msg, button);
+    });
+    return btn;
+  }
+  closeButton(msg) {
+    const btn = document.createElement("button");
+    btn.className = "kb-close";
+    btn.innerHTML = "✕";
+    btn.setAttribute("aria-label", "Close");
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleDismiss(msg);
+    });
+    return btn;
+  }
+  // ── Event handling ────────────────────────────────────────────
+  handleDismiss(msg) {
+    const entry = this.displayed.get(msg.id);
+    if (!entry) return;
+    this.animateOut(entry.element, msg);
+  }
+  handleAction(msg, button) {
+    const result = this.callbacks.onAction(msg, button);
+    if (result !== false && button.url) {
+      window.open(button.url, "_blank", "noopener");
+    }
+    const entry = this.displayed.get(msg.id);
+    if (entry) {
+      this.animateOut(entry.element, msg);
+    }
+  }
+  // ── Animation + cleanup ───────────────────────────────────────
+  removeMessage(id) {
+    const entry = this.displayed.get(id);
+    if (!entry) return;
+    this.animateOut(entry.element, entry.message);
+  }
+  animateOut(element, msg) {
+    if (element.classList.contains("kb-exit")) return;
+    element.classList.add("kb-exit");
+    const cleanup = () => {
+      element.remove();
+      this.displayed.delete(msg.id);
+      this.callbacks.onDismiss(msg);
+    };
+    element.addEventListener("animationend", cleanup, { once: true });
+    setTimeout(cleanup, 300);
+  }
+  // ── Helpers ───────────────────────────────────────────────────
+  el(tag, className) {
+    const el = document.createElement(tag);
+    el.className = className;
+    return el;
+  }
+};
+
+// src/client.ts
+var DEFAULT_POLL_INTERVAL = 6e4;
+var _instance = null;
+function init(config) {
+  if (_instance) {
+    _instance.close();
+  }
+  _instance = new Messaging(config);
+  return _instance;
+}
+function getInstance() {
+  return _instance;
+}
+var Messaging = class {
+  api;
+  renderer = null;
+  config;
+  pollTimer = null;
+  dismissed = /* @__PURE__ */ new Set();
+  subscriptionTimers = /* @__PURE__ */ new Set();
+  pendingPoll = false;
+  visibilityHandler = null;
+  userId;
+  constructor(config) {
+    if (!config.sdkKey) {
+      throw new ValidationError("SDK key is required", "sdkKey");
+    }
+    this.config = config;
+    this.userId = config.userId;
+    this.api = new MessagingApi(config.sdkKey, config.baseUrl);
+    if (config.autoShow !== false && typeof window !== "undefined") {
+      this.start();
+    }
+  }
+  // ── Lifecycle ─────────────────────────────────────────────────
+  /**
+   * Start fetching and rendering messages.
+   * Called automatically unless `autoShow: false`.
+   */
+  start() {
+    if (typeof window === "undefined") return;
+    if (this.renderer) return;
+    this.renderer = new MessageRenderer({
+      onShow: (msg) => {
+        this.config.onShow?.(msg);
+      },
+      onDismiss: (msg) => {
+        this.dismissed.add(msg.id);
+        this.config.onDismiss?.(msg);
+      },
+      onAction: (msg, btn) => {
+        return this.config.onAction?.(msg, btn);
+      }
+    });
+    this.poll();
+    const interval = this.config.pollInterval ?? DEFAULT_POLL_INTERVAL;
+    if (interval > 0) {
+      this.pollTimer = setInterval(() => this.poll(), interval);
+    }
+    this.visibilityHandler = () => {
+      if (document.visibilityState === "visible" && this.pendingPoll) {
+        this.pendingPoll = false;
+        this.poll();
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
+  }
+  /**
+   * Stop polling and remove all rendered messages.
+   */
+  stop() {
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = null;
+    }
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
+    this.pendingPoll = false;
+    this.renderer?.destroy();
+    this.renderer = null;
+  }
+  /**
+   * Stop everything and remove all rendered UI.
+   */
+  close() {
+    this.stop();
+    for (const tid of this.subscriptionTimers) {
+      clearInterval(tid);
+    }
+    this.subscriptionTimers.clear();
+    this.dismissed.clear();
+  }
+  // ── User identity ────────────────────────────────────────────
+  /**
+   * Set the current user ID.
+   * Triggers an immediate re-fetch so show-once messages that the user
+   * has already viewed are filtered out.
+   */
+  identify(userId) {
+    this.userId = userId;
+    this.poll();
+  }
+  /**
+   * Clear the current user ID and reset dismissed messages.
+   * Call this on logout.
+   */
+  reset() {
+    this.userId = void 0;
+    this.dismissed.clear();
+    this.poll();
+  }
+  /**
+   * Record that the current user has viewed a message.
+   * The message is optimistically removed from the UI.
+   *
+   * @throws {ValidationError} When no user ID has been set
+   * @throws {ApiError} When the API returns an error
+   */
+  async markViewed(messageId) {
+    if (!this.userId) {
+      throw new ValidationError(
+        "User ID is required to mark a message as viewed. Call identify() first.",
+        "userId"
+      );
+    }
+    this.dismissed.add(messageId);
+    this.renderer?.dismiss(messageId);
+    await this.api.markViewed(messageId, this.userId);
+  }
+  // ── Data-only methods ─────────────────────────────────────────
+  /**
+   * Fetch active messages without rendering.
+   * Use this when `autoShow: false` or for custom rendering.
+   *
+   * @param options - Metadata for targeting evaluation
+   * @throws {AuthenticationError} When the API key is invalid
+   * @throws {ApiError} When the API returns an error
+   * @throws {TimeoutError} When the request times out
+   */
+  async getMessages(options) {
+    return this.api.getMessages(options);
+  }
+  /**
+   * Subscribe to messages with polling (data-only, no rendering).
+   * Returns an unsubscribe function.
+   *
+   * @example
+   * ```typescript
+   * const unsub = messaging.subscribe(
+   *   (messages) => renderMyUI(messages),
+   *   { pollInterval: 30_000 },
+   * );
+   *
+   * // Later
+   * unsub();
+   * ```
+   */
+  subscribe(callback, options) {
+    const interval = options?.pollInterval ?? DEFAULT_POLL_INTERVAL;
+    let active = true;
+    const run = async () => {
+      if (!active) return;
+      try {
+        const msgs = await this.api.getMessages(options);
+        if (active) callback(msgs);
+      } catch {
+      }
+    };
+    run();
+    const tid = setInterval(run, interval);
+    this.subscriptionTimers.add(tid);
+    return () => {
+      active = false;
+      clearInterval(tid);
+      this.subscriptionTimers.delete(tid);
+    };
+  }
+  // ── Internal ──────────────────────────────────────────────────
+  async poll() {
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+      this.pendingPoll = true;
+      return;
+    }
+    try {
+      const messages = await this.api.getMessages({
+        userId: this.userId,
+        metadata: this.config.metadata
+      });
+      const visible = messages.filter((m) => !this.dismissed.has(m.id));
+      this.renderer?.update(visible);
+    } catch {
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiError,
+  AuthenticationError,
+  Messaging,
+  MessagingError,
+  TimeoutError,
+  ValidationError,
+  getInstance,
+  init
+});
+//# sourceMappingURL=index.cjs.map