@pocketping/widget 0.3.3 → 0.3.4

package/dist/index.js

@@ -1,46 +1,9 @@
-"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, {
-  close: () => close,
-  default: () => index_default,
-  destroy: () => destroy,
-  getIdentity: () => getIdentity,
-  identify: () => identify,
-  init: () => init,
-  offEvent: () => offEvent,
-  on: () => on,
-  onEvent: () => onEvent,
-  open: () => open,
-  reset: () => reset,
-  sendMessage: () => sendMessage,
-  toggle: () => toggle,
-  trigger: () => trigger
-});
-module.exports = __toCommonJS(index_exports);
-var import_preact2 = require("preact");
+import { render, h as h2 } from "preact";
 
 // src/components/ChatWidget.tsx
-var import_preact = require("preact");
-var import_hooks = require("preact/hooks");
+import { Fragment } from "preact";
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
 
 // src/components/styles.ts
 function styles(primaryColor, theme) {
@@ -385,17 +348,17 @@ function styles(primaryColor, theme) {
 }
 
 // src/components/ChatWidget.tsx
-var import_jsx_runtime = require("preact/jsx-runtime");
+import { Fragment as Fragment2, jsx, jsxs } from "preact/jsx-runtime";
 function ChatWidget({ client: client2, config }) {
-  const [isOpen, setIsOpen] = (0, import_hooks.useState)(false);
-  const [messages, setMessages] = (0, import_hooks.useState)([]);
-  const [inputValue, setInputValue] = (0, import_hooks.useState)("");
-  const [isTyping, setIsTyping] = (0, import_hooks.useState)(false);
-  const [operatorOnline, setOperatorOnline] = (0, import_hooks.useState)(false);
-  const [isConnected, setIsConnected] = (0, import_hooks.useState)(false);
-  const messagesEndRef = (0, import_hooks.useRef)(null);
-  const inputRef = (0, import_hooks.useRef)(null);
-  (0, import_hooks.useEffect)(() => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const [operatorOnline, setOperatorOnline] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
     const unsubOpen = client2.on("openChange", setIsOpen);
     const unsubMessage = client2.on("message", () => {
       setMessages([...client2.getMessages()]);
@@ -424,15 +387,15 @@ function ChatWidget({ client: client2, config }) {
       unsubConnect();
     };
   }, [client2]);
-  (0, import_hooks.useEffect)(() => {
+  useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  (0, import_hooks.useEffect)(() => {
+  useEffect(() => {
     if (isOpen) {
       inputRef.current?.focus();
     }
   }, [isOpen]);
-  const markMessagesAsRead = (0, import_hooks.useCallback)(() => {
+  const markMessagesAsRead = useCallback(() => {
     if (!isOpen || !isConnected) return;
     const unreadMessages = messages.filter(
       (msg) => msg.sender !== "visitor" && msg.status !== "read"
@@ -442,14 +405,14 @@ function ChatWidget({ client: client2, config }) {
       client2.sendReadStatus(messageIds, "read");
     }
   }, [isOpen, isConnected, messages, client2]);
-  (0, import_hooks.useEffect)(() => {
+  useEffect(() => {
     if (!isOpen || !isConnected) return;
     const timer = setTimeout(() => {
       markMessagesAsRead();
     }, 1e3);
     return () => clearTimeout(timer);
   }, [isOpen, isConnected, messages, markMessagesAsRead]);
-  (0, import_hooks.useEffect)(() => {
+  useEffect(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible" && isOpen) {
         markMessagesAsRead();
@@ -458,7 +421,7 @@ function ChatWidget({ client: client2, config }) {
     document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
   }, [isOpen, markMessagesAsRead]);
-  (0, import_hooks.useEffect)(() => {
+  useEffect(() => {
     const unsubRead = client2.on(
       "read",
       () => {
@@ -488,71 +451,71 @@ function ChatWidget({ client: client2, config }) {
   const position = config.position ?? "bottom-right";
   const theme = getTheme(config.theme ?? "auto");
   const primaryColor = config.primaryColor ?? "#6366f1";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_preact.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: styles(primaryColor, theme) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: styles(primaryColor, theme) }),
+    /* @__PURE__ */ jsxs(
       "button",
       {
         class: `pp-toggle pp-${position}`,
         onClick: () => client2.toggleOpen(),
         "aria-label": isOpen ? "Close chat" : "Open chat",
         children: [
-          isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatIcon, {}),
-          !isOpen && operatorOnline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-online-dot" })
+          isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {}),
+          !isOpen && operatorOnline && /* @__PURE__ */ jsx("span", { class: "pp-online-dot" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: `pp-window pp-${position} pp-theme-${theme}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-header-info", children: [
-          config.operatorAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-status-dot pp-online" }),
+    isOpen && /* @__PURE__ */ jsxs("div", { class: `pp-window pp-${position} pp-theme-${theme}`, children: [
+      /* @__PURE__ */ jsxs("div", { class: "pp-header", children: [
+        /* @__PURE__ */ jsxs("div", { class: "pp-header-info", children: [
+          config.operatorAvatar && /* @__PURE__ */ jsx("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
+            /* @__PURE__ */ jsx("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+              /* @__PURE__ */ jsx("span", { class: "pp-status-dot pp-online" }),
               " Online"
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-status-dot" }),
+            ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+              /* @__PURE__ */ jsx("span", { class: "pp-status-dot" }),
               " Away"
             ] }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ jsx(
           "button",
           {
             class: "pp-close-btn",
             onClick: () => client2.setOpen(false),
             "aria-label": "Close chat",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-messages", children: [
-        config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-welcome", children: config.welcomeMessage }),
-        messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      /* @__PURE__ */ jsxs("div", { class: "pp-messages", children: [
+        config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx("div", { class: "pp-welcome", children: config.welcomeMessage }),
+        messages.map((msg) => /* @__PURE__ */ jsxs(
           "div",
           {
             class: `pp-message pp-message-${msg.sender}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-message-content", children: msg.content }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message-time", children: [
+              /* @__PURE__ */ jsx("div", { class: "pp-message-content", children: msg.content }),
+              /* @__PURE__ */ jsxs("div", { class: "pp-message-time", children: [
                 formatTime(msg.timestamp),
-                msg.sender === "ai" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-ai-badge", children: "AI" }),
-                msg.sender === "visitor" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { status: msg.status }) })
+                msg.sender === "ai" && /* @__PURE__ */ jsx("span", { class: "pp-ai-badge", children: "AI" }),
+                msg.sender === "visitor" && /* @__PURE__ */ jsx("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx(StatusIcon, { status: msg.status }) })
               ] })
             ]
           },
           msg.id
         )),
-        isTyping && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message pp-message-operator pp-typing", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
+        isTyping && /* @__PURE__ */ jsxs("div", { class: "pp-message pp-message-operator pp-typing", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
+        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ jsxs("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx(
           "input",
           {
             ref: inputRef,
@@ -564,20 +527,20 @@ function ChatWidget({ client: client2, config }) {
             disabled: !isConnected
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ jsx(
           "button",
           {
             type: "submit",
             class: "pp-send-btn",
             disabled: !inputValue.trim() || !isConnected,
             "aria-label": "Send message",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SendIcon, {})
+            children: /* @__PURE__ */ jsx(SendIcon, {})
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-footer", children: [
+      /* @__PURE__ */ jsxs("div", { class: "pp-footer", children: [
         "Powered by ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
+        /* @__PURE__ */ jsx("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
       ] })
     ] })
   ] });
@@ -603,41 +566,41 @@ function formatTime(timestamp) {
   return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 function ChatIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
 function SendIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
   ] });
 }
 function StatusIcon({ status }) {
   if (!status || status === "sending" || status === "sent") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "3 8 7 12 13 4" }) });
+    return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) });
   }
   if (status === "delivered") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "1 8 5 12 11 4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "7 8 11 12 17 4" })
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
+      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
     ] });
   }
   if (status === "read") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "1 8 5 12 11 4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "7 8 11 12 17 4" })
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
+      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
     ] });
   }
   return null;
 }
 
 // src/version.ts
-var VERSION = "0.3.3";
+var VERSION = "0.3.4";
 
 // src/client.ts
 var PocketPingClient = class {
@@ -650,6 +613,10 @@ var PocketPingClient = class {
     this.reconnectAttempts = 0;
     this.maxReconnectAttempts = 5;
     this.reconnectTimeout = null;
+    this.trackedElementCleanups = [];
+    this.currentTrackedElements = [];
+    this.inspectorMode = false;
+    this.inspectorCleanup = null;
     this.config = config;
   }
   // ─────────────────────────────────────────────────────────────────
@@ -659,11 +626,14 @@ var PocketPingClient = class {
     const visitorId = this.getOrCreateVisitorId();
     const storedSessionId = this.getStoredSessionId();
     const storedIdentity = this.getStoredIdentity();
+    const urlParams = new URLSearchParams(window.location.search);
+    const inspectorToken = urlParams.get("pp_inspector");
     const response = await this.fetch("/connect", {
       method: "POST",
       body: JSON.stringify({
         visitorId,
         sessionId: storedSessionId,
+        inspectorToken: inspectorToken || void 0,
         metadata: {
           url: window.location.href,
           referrer: document.referrer || void 0,
@@ -686,6 +656,11 @@ var PocketPingClient = class {
     };
     this.storeSessionId(response.sessionId);
     this.connectWebSocket();
+    if (response.inspectorMode) {
+      this.enableInspectorMode();
+    } else if (response.trackedElements?.length) {
+      this.setupTrackedElements(response.trackedElements);
+    }
     this.emit("connect", this.session);
     this.config.onConnect?.(response.sessionId);
     return this.session;
@@ -697,6 +672,8 @@ var PocketPingClient = class {
     if (this.reconnectTimeout) {
       clearTimeout(this.reconnectTimeout);
     }
+    this.cleanupTrackedElements();
+    this.disableInspectorMode();
   }
   async sendMessage(content) {
     if (!this.session) {
@@ -916,10 +893,15 @@ var PocketPingClient = class {
    * Trigger a custom event to the backend
    * @param eventName - The name of the event (e.g., 'clicked_pricing', 'viewed_demo')
    * @param data - Optional payload to send with the event
+   * @param options - Optional trigger options (widgetMessage to open chat)
    * @example
-   * PocketPing.trigger('clicked_cta', { button: 'signup', page: '/pricing' })
+   * // Silent event (just notify bridges)
+   * PocketPing.trigger('clicked_cta', { button: 'signup' })
+   *
+   * // Open widget with message
+   * PocketPing.trigger('clicked_pricing', { plan: 'pro' }, { widgetMessage: 'Need help choosing a plan?' })
    */
-  trigger(eventName, data) {
+  trigger(eventName, data, options) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
       console.warn("[PocketPing] Cannot trigger event: WebSocket not connected");
       return;
@@ -934,6 +916,10 @@ var PocketPingClient = class {
       data: event
     }));
     this.emit(`event:${eventName}`, event);
+    if (options?.widgetMessage) {
+      this.setOpen(true);
+      this.emit("triggerMessage", { message: options.widgetMessage, eventName });
+    }
   }
   /**
    * Subscribe to custom events from the backend
@@ -971,6 +957,317 @@ var PocketPingClient = class {
     this.emit(`event:${event.name}`, event);
   }
   // ─────────────────────────────────────────────────────────────────
+  // Tracked Elements (SaaS auto-tracking)
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Setup tracked elements from config (used by SaaS dashboard)
+   * @param elements - Array of tracked element configurations
+   */
+  setupTrackedElements(elements) {
+    this.cleanupTrackedElements();
+    this.currentTrackedElements = elements;
+    for (const config of elements) {
+      const eventType = config.event || "click";
+      const handler = (domEvent) => {
+        const elementData = {
+          ...config.data,
+          selector: config.selector,
+          elementText: domEvent.target?.textContent?.trim().slice(0, 100),
+          url: window.location.href
+        };
+        this.trigger(config.name, elementData, {
+          widgetMessage: config.widgetMessage
+        });
+      };
+      const delegatedHandler = (domEvent) => {
+        const target = domEvent.target;
+        if (target?.closest(config.selector)) {
+          handler(domEvent);
+        }
+      };
+      document.addEventListener(eventType, delegatedHandler, true);
+      this.trackedElementCleanups.push(() => {
+        document.removeEventListener(eventType, delegatedHandler, true);
+      });
+    }
+    if (elements.length > 0) {
+      console.info(`[PocketPing] Tracking ${elements.length} element(s)`);
+    }
+  }
+  /**
+   * Cleanup all tracked element listeners
+   */
+  cleanupTrackedElements() {
+    for (const cleanup of this.trackedElementCleanups) {
+      cleanup();
+    }
+    this.trackedElementCleanups = [];
+    this.currentTrackedElements = [];
+  }
+  /**
+   * Get current tracked elements configuration
+   */
+  getTrackedElements() {
+    return [...this.currentTrackedElements];
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Inspector Mode (SaaS visual element selector)
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Enable inspector mode for visual element selection
+   * This shows an overlay that allows clicking on elements to get their CSS selector
+   */
+  enableInspectorMode() {
+    if (this.inspectorMode) return;
+    this.inspectorMode = true;
+    console.info("[PocketPing] \u{1F50D} Inspector mode active - click on any element to select it");
+    const overlay = document.createElement("div");
+    overlay.id = "pp-inspector-overlay";
+    overlay.innerHTML = `
+      <style>
+        #pp-inspector-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 999999;
+          pointer-events: none;
+        }
+        #pp-inspector-overlay * {
+          pointer-events: auto;
+        }
+        #pp-inspector-banner {
+          position: fixed;
+          top: 16px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: linear-gradient(135deg, #6366f1, #8b5cf6);
+          color: white;
+          padding: 12px 24px;
+          border-radius: 12px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-size: 14px;
+          font-weight: 500;
+          box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          z-index: 1000000;
+        }
+        #pp-inspector-banner svg {
+          animation: pp-pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pp-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        #pp-inspector-exit {
+          background: rgba(255,255,255,0.2);
+          border: none;
+          color: white;
+          padding: 6px 12px;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 12px;
+          margin-left: 8px;
+        }
+        #pp-inspector-exit:hover {
+          background: rgba(255,255,255,0.3);
+        }
+        .pp-inspector-highlight {
+          outline: 3px dashed #6366f1 !important;
+          outline-offset: 2px !important;
+          background: rgba(99, 102, 241, 0.1) !important;
+        }
+        #pp-inspector-tooltip {
+          position: fixed;
+          background: #1f2937;
+          color: white;
+          padding: 8px 12px;
+          border-radius: 8px;
+          font-family: ui-monospace, SFMono-Regular, monospace;
+          font-size: 12px;
+          pointer-events: none;
+          z-index: 1000001;
+          max-width: 400px;
+          word-break: break-all;
+          display: none;
+        }
+      </style>
+      <div id="pp-inspector-banner">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="22" y1="22" x2="16.65" y2="16.65"/>
+          <line x1="12" y1="8" x2="12" y2="12"/>
+          <line x1="12" y1="16" x2="12" y2="16"/>
+        </svg>
+        <span>Inspector Mode - Click an element to capture its selector</span>
+        <button id="pp-inspector-exit">Exit</button>
+      </div>
+      <div id="pp-inspector-tooltip"></div>
+    `;
+    document.body.appendChild(overlay);
+    const tooltip = document.getElementById("pp-inspector-tooltip");
+    let currentHighlight = null;
+    const getSelector = (element) => {
+      if (element.id && !element.id.startsWith("pp-")) {
+        return `#${CSS.escape(element.id)}`;
+      }
+      const classes = Array.from(element.classList).filter((c) => !c.startsWith("pp-"));
+      if (classes.length > 0) {
+        const classSelector = "." + classes.map((c) => CSS.escape(c)).join(".");
+        if (document.querySelectorAll(classSelector).length === 1) {
+          return classSelector;
+        }
+      }
+      for (const attr of Array.from(element.attributes)) {
+        if (attr.name.startsWith("data-") && attr.value) {
+          const dataSelector = `[${attr.name}="${CSS.escape(attr.value)}"]`;
+          if (document.querySelectorAll(dataSelector).length === 1) {
+            return dataSelector;
+          }
+        }
+      }
+      const path = [];
+      let current = element;
+      while (current && current !== document.body) {
+        let selector = current.tagName.toLowerCase();
+        if (current.id && !current.id.startsWith("pp-")) {
+          selector = `#${CSS.escape(current.id)}`;
+          path.unshift(selector);
+          break;
+        }
+        const parent = current.parentElement;
+        if (parent) {
+          const currentTagName = current.tagName;
+          const siblings = Array.from(parent.children).filter(
+            (c) => c.tagName === currentTagName
+          );
+          if (siblings.length > 1) {
+            const index = siblings.indexOf(current) + 1;
+            selector += `:nth-of-type(${index})`;
+          }
+        }
+        path.unshift(selector);
+        current = parent;
+      }
+      return path.join(" > ");
+    };
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (target.closest("#pp-inspector-overlay") || target.closest("#pocketping-widget")) {
+        return;
+      }
+      if (currentHighlight) {
+        currentHighlight.classList.remove("pp-inspector-highlight");
+      }
+      target.classList.add("pp-inspector-highlight");
+      currentHighlight = target;
+      const selector = getSelector(target);
+      tooltip.textContent = selector;
+      tooltip.style.display = "block";
+      tooltip.style.left = `${e.clientX + 15}px`;
+      tooltip.style.top = `${e.clientY + 15}px`;
+      const rect = tooltip.getBoundingClientRect();
+      if (rect.right > window.innerWidth) {
+        tooltip.style.left = `${e.clientX - rect.width - 15}px`;
+      }
+      if (rect.bottom > window.innerHeight) {
+        tooltip.style.top = `${e.clientY - rect.height - 15}px`;
+      }
+    };
+    const handleMouseOut = (e) => {
+      const target = e.target;
+      if (target.closest("#pp-inspector-overlay")) return;
+      target.classList.remove("pp-inspector-highlight");
+      tooltip.style.display = "none";
+    };
+    const handleClick = (e) => {
+      const target = e.target;
+      if (target.id === "pp-inspector-exit") {
+        this.disableInspectorMode();
+        return;
+      }
+      if (target.closest("#pp-inspector-overlay") || target.closest("#pocketping-widget")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const selector = getSelector(target);
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.ws.send(JSON.stringify({
+          type: "inspector_select",
+          data: {
+            selector,
+            tagName: target.tagName.toLowerCase(),
+            text: target.textContent?.trim().slice(0, 50) || "",
+            url: window.location.href
+          }
+        }));
+      }
+      this.emit("inspectorSelect", { selector, element: target });
+      target.classList.remove("pp-inspector-highlight");
+      target.classList.add("pp-inspector-highlight");
+      setTimeout(() => {
+        target.classList.remove("pp-inspector-highlight");
+      }, 500);
+      const banner = document.getElementById("pp-inspector-banner");
+      if (banner) {
+        const originalHTML = banner.innerHTML;
+        banner.innerHTML = `
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+          <span>Selector captured: <code style="background:rgba(255,255,255,0.2);padding:2px 6px;border-radius:4px;font-family:monospace;">${selector}</code></span>
+        `;
+        setTimeout(() => {
+          if (banner && this.inspectorMode) {
+            banner.innerHTML = originalHTML;
+            document.getElementById("pp-inspector-exit")?.addEventListener("click", () => {
+              this.disableInspectorMode();
+            });
+          }
+        }, 2e3);
+      }
+      console.info(`[PocketPing] \u{1F4CC} Selector captured: ${selector}`);
+    };
+    document.addEventListener("mouseover", handleMouseOver, true);
+    document.addEventListener("mouseout", handleMouseOut, true);
+    document.addEventListener("click", handleClick, true);
+    this.inspectorCleanup = () => {
+      document.removeEventListener("mouseover", handleMouseOver, true);
+      document.removeEventListener("mouseout", handleMouseOut, true);
+      document.removeEventListener("click", handleClick, true);
+      overlay.remove();
+      if (currentHighlight) {
+        currentHighlight.classList.remove("pp-inspector-highlight");
+      }
+    };
+    document.getElementById("pp-inspector-exit")?.addEventListener("click", () => {
+      this.disableInspectorMode();
+    });
+  }
+  /**
+   * Disable inspector mode
+   */
+  disableInspectorMode() {
+    if (!this.inspectorMode) return;
+    this.inspectorMode = false;
+    if (this.inspectorCleanup) {
+      this.inspectorCleanup();
+      this.inspectorCleanup = null;
+    }
+    console.info("[PocketPing] Inspector mode disabled");
+    this.emit("inspectorDisabled", null);
+  }
+  /**
+   * Check if inspector mode is active
+   */
+  isInspectorModeActive() {
+    return this.inspectorMode;
+  }
+  // ─────────────────────────────────────────────────────────────────
   // WebSocket
   // ─────────────────────────────────────────────────────────────────
   connectWebSocket() {
@@ -1076,6 +1373,13 @@ var PocketPingClient = class {
         const versionWarning = event.data;
         this.handleVersionWarning(versionWarning);
         break;
+      case "config_update":
+        const configData = event.data;
+        if (configData.trackedElements) {
+          this.setupTrackedElements(configData.trackedElements);
+          this.emit("configUpdate", configData);
+        }
+        break;
     }
   }
   // ─────────────────────────────────────────────────────────────────
@@ -1245,7 +1549,7 @@ function init(config) {
   container = document.createElement("div");
   container.id = "pocketping-container";
   document.body.appendChild(container);
-  (0, import_preact2.render)((0, import_preact2.h)(ChatWidget, { client, config }), container);
+  render(h2(ChatWidget, { client, config }), container);
   client.connect().catch((err) => {
     console.error("[PocketPing] Failed to connect:", err);
   });
@@ -1253,7 +1557,7 @@ function init(config) {
 }
 function destroy() {
   if (container) {
-    (0, import_preact2.render)(null, container);
+    render(null, container);
     container.remove();
     container = null;
   }
@@ -1277,12 +1581,22 @@ function sendMessage(content) {
   }
   return client.sendMessage(content);
 }
-function trigger(eventName, data) {
+function trigger(eventName, data, options) {
   if (!client) {
     console.warn("[PocketPing] Not initialized, cannot trigger event");
     return;
   }
-  client.trigger(eventName, data);
+  client.trigger(eventName, data, options);
+}
+function setupTrackedElements(elements) {
+  if (!client) {
+    console.warn("[PocketPing] Not initialized, cannot setup tracked elements");
+    return;
+  }
+  client.setupTrackedElements(elements);
+}
+function getTrackedElements() {
+  return client?.getTrackedElements() || [];
 }
 function onEvent(eventName, handler) {
   if (!client) {
@@ -1334,12 +1648,13 @@ if (typeof document !== "undefined") {
     }
   }
 }
-var index_default = { init, destroy, open, close, toggle, sendMessage, trigger, onEvent, offEvent, on, identify, reset, getIdentity };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+var index_default = { init, destroy, open, close, toggle, sendMessage, trigger, onEvent, offEvent, on, identify, reset, getIdentity, setupTrackedElements, getTrackedElements };
+export {
   close,
+  index_default as default,
   destroy,
   getIdentity,
+  getTrackedElements,
   identify,
   init,
   offEvent,
@@ -1348,6 +1663,7 @@ var index_default = { init, destroy, open, close, toggle, sendMessage, trigger,
   open,
   reset,
   sendMessage,
+  setupTrackedElements,
   toggle,
   trigger
-});
+};