@prodact.ai/sdk 0.0.2 → 0.0.5

package/dist/react.js

@@ -35,6 +35,7 @@ __export(react_exports, {
   ProduckContext: () => ProduckContext,
   ProduckProvider: () => ProduckProvider,
   ProduckTarget: () => ProduckTarget,
+  VisualFlowDisplay: () => VisualFlowDisplay,
   useProduck: () => useProduck,
   useProduckAction: () => useProduckAction,
   useProduckFlow: () => useProduckFlow,
@@ -46,6 +47,1689 @@ module.exports = __toCommonJS(react_exports);
 // src/react/ProduckProvider.tsx
 var import_react2 = require("react");
 
+// src/recording/utils.ts
+function generateSessionId() {
+  const timestamp = Date.now().toString(36);
+  const randomPart = Math.random().toString(36).substring(2, 15);
+  return `rec_${timestamp}_${randomPart}`;
+}
+function getDeviceInfo() {
+  if (typeof window === "undefined") {
+    return {
+      userAgent: "unknown",
+      screenWidth: 0,
+      screenHeight: 0,
+      viewportWidth: 0,
+      viewportHeight: 0,
+      devicePixelRatio: 1,
+      language: "en",
+      platform: "unknown"
+    };
+  }
+  return {
+    userAgent: navigator.userAgent,
+    screenWidth: screen.width,
+    screenHeight: screen.height,
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+    devicePixelRatio: window.devicePixelRatio || 1,
+    language: navigator.language,
+    platform: navigator.platform
+  };
+}
+var DEFAULT_PRIVACY_CONFIG = {
+  maskAllInputs: true,
+  maskAllText: false,
+  maskSelectors: [".sensitive", "[data-sensitive]", ".pii", "[data-pii]"],
+  blockSelectors: [".no-record", "[data-no-record]"],
+  maskInputTypes: ["password", "email", "tel", "credit-card"],
+  maskCharacter: "*"
+};
+var DEFAULT_PERFORMANCE_CONFIG = {
+  batchEvents: true,
+  batchSize: 50,
+  batchTimeout: 5e3,
+  compress: true,
+  mouseMoveThrottle: 50,
+  maxDuration: 30 * 60 * 1e3
+  // 30 minutes
+};
+var DEFAULT_CAPTURE_CONFIG = {
+  console: true,
+  network: false,
+  performance: false,
+  errors: true,
+  customEvents: true
+};
+function mergeConfig(userConfig) {
+  return {
+    enabled: userConfig?.enabled ?? false,
+    samplingRate: userConfig?.samplingRate ?? 1,
+    privacy: { ...DEFAULT_PRIVACY_CONFIG, ...userConfig?.privacy },
+    performance: { ...DEFAULT_PERFORMANCE_CONFIG, ...userConfig?.performance },
+    capture: { ...DEFAULT_CAPTURE_CONFIG, ...userConfig?.capture },
+    endpoint: userConfig?.endpoint ?? "",
+    onStart: userConfig?.onStart ?? (() => {
+    }),
+    onStop: userConfig?.onStop ?? (() => {
+    }),
+    onError: userConfig?.onError ?? (() => {
+    })
+  };
+}
+function shouldRecordSession(samplingRate) {
+  if (samplingRate >= 1) return true;
+  if (samplingRate <= 0) return false;
+  return Math.random() < samplingRate;
+}
+function compressEvents(events) {
+  try {
+    const json = JSON.stringify(events);
+    if (typeof btoa !== "undefined") {
+      return btoa(encodeURIComponent(json));
+    }
+    return json;
+  } catch (error) {
+    console.warn("[Recording] Failed to compress events:", error);
+    return JSON.stringify(events);
+  }
+}
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function getCurrentUrl() {
+  if (!isBrowser()) return "";
+  return window.location.href;
+}
+
+// src/recording/recorder.ts
+var SessionRecorder = class {
+  constructor(config) {
+    this.state = "idle";
+    this.sessionId = null;
+    this.sdkSessionToken = null;
+    this.apiUrl = "";
+    this.sdkKey = null;
+    // Recording internals
+    this.stopRecording = null;
+    this.events = [];
+    this.eventCount = 0;
+    this.batchIndex = 0;
+    this.batchesSent = 0;
+    this.errorCount = 0;
+    this.startTime = null;
+    this.batchTimeout = null;
+    this.maxDurationTimeout = null;
+    // Cleanup handlers
+    this.consoleCleanup = null;
+    this.errorCleanup = null;
+    this.config = mergeConfig(config);
+  }
+  /**
+   * Initialize the recorder with SDK context
+   */
+  initialize(sdkSessionToken, apiUrl, sdkKey) {
+    this.sdkSessionToken = sdkSessionToken;
+    this.apiUrl = apiUrl;
+    this.sdkKey = sdkKey || null;
+  }
+  /**
+   * Update configuration
+   */
+  updateConfig(config) {
+    this.config = mergeConfig({ ...this.config, ...config });
+  }
+  /**
+   * Start recording session
+   */
+  async start() {
+    if (!isBrowser()) {
+      console.warn("[Recording] Cannot record outside browser environment");
+      return null;
+    }
+    if (!this.config.enabled) {
+      return null;
+    }
+    if (this.state === "recording") {
+      console.warn("[Recording] Already recording");
+      return this.sessionId;
+    }
+    if (!shouldRecordSession(this.config.samplingRate)) {
+      console.log("[Recording] Session not sampled for recording");
+      return null;
+    }
+    try {
+      const rrweb = await import("rrweb");
+      this.sessionId = generateSessionId();
+      this.events = [];
+      this.eventCount = 0;
+      this.batchIndex = 0;
+      this.batchesSent = 0;
+      this.errorCount = 0;
+      this.startTime = /* @__PURE__ */ new Date();
+      this.state = "recording";
+      const rrwebOptions = {
+        emit: (event) => this.handleEvent(event),
+        maskAllInputs: this.config.privacy.maskAllInputs,
+        maskTextSelector: this.config.privacy.maskSelectors?.join(",") || void 0,
+        blockSelector: this.config.privacy.blockSelectors?.join(",") || void 0,
+        maskInputOptions: {
+          password: true,
+          email: this.config.privacy.maskInputTypes?.includes("email"),
+          tel: this.config.privacy.maskInputTypes?.includes("tel")
+        },
+        sampling: {
+          mousemove: true,
+          mouseInteraction: true,
+          scroll: 150,
+          media: 800,
+          input: "last"
+        }
+      };
+      this.stopRecording = rrweb.record(rrwebOptions);
+      if (this.config.capture.console) {
+        this.setupConsoleCapture();
+      }
+      if (this.config.capture.errors) {
+        this.setupErrorCapture();
+      }
+      if (this.config.performance.maxDuration) {
+        this.maxDurationTimeout = setTimeout(() => {
+          console.log("[Recording] Max duration reached, stopping");
+          this.stop();
+        }, this.config.performance.maxDuration);
+      }
+      await this.sendSessionStart();
+      this.config.onStart(this.sessionId);
+      console.log("[Recording] Started session:", this.sessionId);
+      return this.sessionId;
+    } catch (error) {
+      console.error("[Recording] Failed to start:", error);
+      this.state = "idle";
+      this.config.onError(error instanceof Error ? error : new Error(String(error)));
+      return null;
+    }
+  }
+  /**
+   * Stop recording
+   */
+  async stop() {
+    if (this.state !== "recording" && this.state !== "paused") {
+      return;
+    }
+    try {
+      if (this.stopRecording) {
+        this.stopRecording();
+        this.stopRecording = null;
+      }
+      if (this.consoleCleanup) {
+        this.consoleCleanup();
+        this.consoleCleanup = null;
+      }
+      if (this.errorCleanup) {
+        this.errorCleanup();
+        this.errorCleanup = null;
+      }
+      if (this.batchTimeout) {
+        clearTimeout(this.batchTimeout);
+        this.batchTimeout = null;
+      }
+      if (this.maxDurationTimeout) {
+        clearTimeout(this.maxDurationTimeout);
+        this.maxDurationTimeout = null;
+      }
+      if (this.events.length > 0) {
+        await this.sendBatch(true);
+      }
+      await this.sendSessionEnd();
+      const sessionId = this.sessionId;
+      const eventCount = this.eventCount;
+      this.state = "stopped";
+      this.config.onStop(sessionId || "", eventCount);
+      console.log("[Recording] Stopped session:", sessionId, "Events:", eventCount);
+    } catch (error) {
+      console.error("[Recording] Error stopping:", error);
+      this.config.onError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+  /**
+   * Pause recording
+   */
+  pause() {
+    if (this.state !== "recording") return;
+    this.state = "paused";
+    console.log("[Recording] Paused");
+  }
+  /**
+   * Resume recording
+   */
+  resume() {
+    if (this.state !== "paused") return;
+    this.state = "recording";
+    console.log("[Recording] Resumed");
+  }
+  /**
+   * Add a custom event to the recording
+   */
+  addCustomEvent(event) {
+    if (this.state !== "recording" || !this.config.capture.customEvents) return;
+    const customEvent = {
+      type: 5,
+      // rrweb custom event type
+      data: {
+        tag: "custom",
+        payload: event
+      },
+      timestamp: event.timestamp || Date.now()
+    };
+    this.handleEvent(customEvent);
+  }
+  /**
+   * Get current recording stats
+   */
+  getStats() {
+    const duration = this.startTime ? Date.now() - this.startTime.getTime() : 0;
+    return {
+      state: this.state,
+      sessionId: this.sessionId,
+      eventCount: this.eventCount,
+      startTime: this.startTime,
+      duration,
+      batchesSent: this.batchesSent,
+      errors: this.errorCount
+    };
+  }
+  /**
+   * Check if recording is active
+   */
+  isRecording() {
+    return this.state === "recording";
+  }
+  /**
+   * Get session ID
+   */
+  getSessionId() {
+    return this.sessionId;
+  }
+  // ============ Private Methods ============
+  /**
+   * Handle incoming event from rrweb
+   */
+  handleEvent(event) {
+    if (this.state !== "recording") return;
+    this.events.push(event);
+    this.eventCount++;
+    if (this.config.performance.batchEvents) {
+      if (this.events.length >= this.config.performance.batchSize) {
+        this.sendBatch();
+      } else if (!this.batchTimeout) {
+        this.batchTimeout = setTimeout(() => {
+          this.batchTimeout = null;
+          if (this.events.length > 0) {
+            this.sendBatch();
+          }
+        }, this.config.performance.batchTimeout);
+      }
+    } else {
+      this.sendBatch();
+    }
+  }
+  /**
+   * Send event batch to backend
+   */
+  async sendBatch(isFinal = false) {
+    if (this.events.length === 0) return;
+    const eventsToSend = [...this.events];
+    this.events = [];
+    const batch = {
+      sessionId: this.sessionId,
+      sdkSessionToken: this.sdkSessionToken,
+      events: eventsToSend,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      batchIndex: this.batchIndex++,
+      isFinal
+    };
+    try {
+      const endpoint = this.config.endpoint || `${this.apiUrl}/session-recordings/events`;
+      const headers = { "Content-Type": "application/json" };
+      if (this.sdkKey) {
+        headers["X-SDK-Key"] = this.sdkKey;
+      }
+      const body = this.config.performance.compress ? JSON.stringify({ ...batch, events: void 0, compressedEvents: compressEvents(eventsToSend) }) : JSON.stringify(batch);
+      await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body
+      });
+      this.batchesSent++;
+    } catch (error) {
+      console.error("[Recording] Failed to send batch:", error);
+      this.errorCount++;
+      this.events = [...eventsToSend, ...this.events];
+    }
+  }
+  /**
+   * Send session start notification
+   */
+  async sendSessionStart() {
+    const session = {
+      id: this.sessionId,
+      sdkSessionToken: this.sdkSessionToken,
+      startUrl: getCurrentUrl(),
+      startTime: this.startTime,
+      deviceInfo: getDeviceInfo()
+    };
+    try {
+      const endpoint = `${this.apiUrl}/session-recordings/start`;
+      const headers = { "Content-Type": "application/json" };
+      if (this.sdkKey) {
+        headers["X-SDK-Key"] = this.sdkKey;
+      }
+      await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(session)
+      });
+    } catch (error) {
+      console.error("[Recording] Failed to send session start:", error);
+    }
+  }
+  /**
+   * Send session end notification
+   */
+  async sendSessionEnd() {
+    try {
+      const endpoint = `${this.apiUrl}/session-recordings/end`;
+      const headers = { "Content-Type": "application/json" };
+      if (this.sdkKey) {
+        headers["X-SDK-Key"] = this.sdkKey;
+      }
+      await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          sessionId: this.sessionId,
+          endTime: (/* @__PURE__ */ new Date()).toISOString(),
+          eventCount: this.eventCount
+        })
+      });
+    } catch (error) {
+      console.error("[Recording] Failed to send session end:", error);
+    }
+  }
+  /**
+   * Setup console log capture
+   */
+  setupConsoleCapture() {
+    const originalConsole = {
+      log: console.log,
+      info: console.info,
+      warn: console.warn,
+      error: console.error,
+      debug: console.debug
+    };
+    const captureConsole = (level) => {
+      return (...args) => {
+        originalConsole[level](...args);
+        if (args[0]?.toString().includes("[Recording]")) return;
+        const logEvent = {
+          level,
+          message: args.map(
+            (arg) => typeof arg === "object" ? JSON.stringify(arg) : String(arg)
+          ).join(" "),
+          timestamp: Date.now()
+        };
+        this.addCustomEvent({
+          type: "console",
+          data: logEvent
+        });
+      };
+    };
+    console.log = captureConsole("log");
+    console.info = captureConsole("info");
+    console.warn = captureConsole("warn");
+    console.error = captureConsole("error");
+    console.debug = captureConsole("debug");
+    this.consoleCleanup = () => {
+      console.log = originalConsole.log;
+      console.info = originalConsole.info;
+      console.warn = originalConsole.warn;
+      console.error = originalConsole.error;
+      console.debug = originalConsole.debug;
+    };
+  }
+  /**
+   * Setup error capture
+   */
+  setupErrorCapture() {
+    const errorHandler = (event) => {
+      const errorEvent = {
+        type: "error",
+        message: event.message,
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+        timestamp: Date.now()
+      };
+      this.addCustomEvent({
+        type: "error",
+        data: errorEvent
+      });
+    };
+    const rejectionHandler = (event) => {
+      const errorEvent = {
+        type: "unhandledrejection",
+        message: event.reason?.message || String(event.reason),
+        stack: event.reason?.stack,
+        timestamp: Date.now()
+      };
+      this.addCustomEvent({
+        type: "error",
+        data: errorEvent
+      });
+    };
+    window.addEventListener("error", errorHandler);
+    window.addEventListener("unhandledrejection", rejectionHandler);
+    this.errorCleanup = () => {
+      window.removeEventListener("error", errorHandler);
+      window.removeEventListener("unhandledrejection", rejectionHandler);
+    };
+  }
+  /**
+   * Destroy the recorder
+   */
+  destroy() {
+    this.stop();
+    this.sessionId = null;
+    this.sdkSessionToken = null;
+    this.events = [];
+  }
+};
+
+// src/proactive.ts
+var ProactiveBehaviorTracker = class {
+  constructor(config, callbacks) {
+    this.isTracking = false;
+    // Tracking state
+    this.scrollDepth = 0;
+    this.pageLoadTime = 0;
+    this.clickCount = 0;
+    this.lastActivityTime = 0;
+    this.currentUrl = "";
+    this.previousUrl = "";
+    // Trigger state
+    this.triggeredSet = /* @__PURE__ */ new Set();
+    this.lastTriggerTime = 0;
+    this.proactiveMessageCount = 0;
+    // Listeners
+    this.scrollHandler = null;
+    this.clickHandler = null;
+    this.mouseMoveHandler = null;
+    this.mouseLeaveHandler = null;
+    this.visibilityHandler = null;
+    // Timers
+    this.timeCheckInterval = null;
+    this.idleCheckInterval = null;
+    this.config = config;
+    this.callbacks = callbacks;
+  }
+  /**
+   * Start tracking user behavior
+   */
+  start() {
+    if (!this.config.enabled || this.isTracking) return;
+    if (typeof window === "undefined") return;
+    if (this.config.respectUserPreference) {
+      const optOut = localStorage.getItem("produck_proactive_optout");
+      if (optOut === "true") return;
+    }
+    this.isTracking = true;
+    this.pageLoadTime = Date.now();
+    this.lastActivityTime = Date.now();
+    this.currentUrl = window.location.href;
+    this.setupScrollTracking();
+    this.setupClickTracking();
+    this.setupIdleTracking();
+    this.setupExitIntentTracking();
+    this.setupTimeTracking();
+    this.setupPageChangeTracking();
+    console.log("[Produck] Proactive behavior tracking started");
+  }
+  /**
+   * Stop tracking
+   */
+  stop() {
+    if (!this.isTracking) return;
+    this.isTracking = false;
+    if (this.scrollHandler) {
+      window.removeEventListener("scroll", this.scrollHandler);
+    }
+    if (this.clickHandler) {
+      document.removeEventListener("click", this.clickHandler);
+    }
+    if (this.mouseMoveHandler) {
+      document.removeEventListener("mousemove", this.mouseMoveHandler);
+    }
+    if (this.mouseLeaveHandler) {
+      document.removeEventListener("mouseleave", this.mouseLeaveHandler);
+    }
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler);
+    }
+    if (this.timeCheckInterval) {
+      clearInterval(this.timeCheckInterval);
+    }
+    if (this.idleCheckInterval) {
+      clearInterval(this.idleCheckInterval);
+    }
+    console.log("[Produck] Proactive behavior tracking stopped");
+  }
+  /**
+   * Reset tracking state (e.g., on page change)
+   */
+  reset() {
+    this.scrollDepth = 0;
+    this.clickCount = 0;
+    this.pageLoadTime = Date.now();
+    this.lastActivityTime = Date.now();
+  }
+  /**
+   * Get current tracking stats
+   */
+  getStats() {
+    return {
+      scrollDepth: this.scrollDepth,
+      timeOnPage: Date.now() - this.pageLoadTime,
+      clickCount: this.clickCount,
+      idleTime: Date.now() - this.lastActivityTime,
+      proactiveMessageCount: this.proactiveMessageCount
+    };
+  }
+  /**
+   * Check if a trigger should fire
+   */
+  shouldTrigger(trigger) {
+    if (this.config.maxProactiveMessages && this.proactiveMessageCount >= this.config.maxProactiveMessages) {
+      return false;
+    }
+    if (this.config.globalCooldown && Date.now() - this.lastTriggerTime < this.config.globalCooldown) {
+      return false;
+    }
+    const triggerKey = `${trigger.type}-${trigger.threshold || "default"}`;
+    if (trigger.onlyOnce && this.triggeredSet.has(triggerKey)) {
+      return false;
+    }
+    const lastTriggerKey = `${triggerKey}-lastTime`;
+    const lastTime = parseInt(sessionStorage.getItem(lastTriggerKey) || "0", 10);
+    if (trigger.cooldown && Date.now() - lastTime < trigger.cooldown) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Fire a trigger
+   */
+  fireTrigger(trigger, context) {
+    if (!this.shouldTrigger(trigger)) return;
+    const triggerKey = `${trigger.type}-${trigger.threshold || "default"}`;
+    const lastTriggerKey = `${triggerKey}-lastTime`;
+    this.triggeredSet.add(triggerKey);
+    this.lastTriggerTime = Date.now();
+    this.proactiveMessageCount++;
+    sessionStorage.setItem(lastTriggerKey, Date.now().toString());
+    const message = trigger.message || this.getDefaultMessage(trigger.type, context);
+    this.callbacks.onTrigger(context, message);
+    if (this.callbacks.onMessage) {
+      this.callbacks.onMessage(message);
+    }
+    console.log("[Produck] Proactive trigger fired:", trigger.type, context);
+  }
+  /**
+   * Get default message for trigger type
+   */
+  getDefaultMessage(type, context) {
+    switch (type) {
+      case "scroll":
+        return `I see you're exploring the page! Is there something specific you're looking for?`;
+      case "time":
+        return `You've been here a while. Would you like some help finding what you need?`;
+      case "clicks":
+        return `Looks like you're navigating around. Can I help you find something?`;
+      case "idle":
+        return `Still there? Let me know if you have any questions!`;
+      case "exit":
+        return `Wait! Before you go, is there anything I can help you with?`;
+      case "pageChange":
+        return `I see you're exploring different pages. Need any guidance?`;
+      default:
+        return `How can I help you today?`;
+    }
+  }
+  /**
+   * Setup scroll depth tracking
+   */
+  setupScrollTracking() {
+    const scrollTriggers = this.config.triggers.filter((t) => t.type === "scroll" && t.enabled);
+    if (scrollTriggers.length === 0) return;
+    this.scrollHandler = () => {
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercent = docHeight > 0 ? window.scrollY / docHeight * 100 : 0;
+      this.scrollDepth = Math.max(this.scrollDepth, scrollPercent);
+      this.lastActivityTime = Date.now();
+      scrollTriggers.forEach((trigger) => {
+        if (trigger.threshold && this.scrollDepth >= trigger.threshold) {
+          this.fireTrigger(trigger, {
+            triggerType: "scroll",
+            scrollDepth: this.scrollDepth,
+            currentUrl: window.location.href,
+            pageTitle: document.title
+          });
+        }
+      });
+    };
+    window.addEventListener("scroll", this.scrollHandler, { passive: true });
+  }
+  /**
+   * Setup click tracking
+   */
+  setupClickTracking() {
+    const clickTriggers = this.config.triggers.filter((t) => t.type === "clicks" && t.enabled);
+    if (clickTriggers.length === 0) return;
+    this.clickHandler = () => {
+      this.clickCount++;
+      this.lastActivityTime = Date.now();
+      clickTriggers.forEach((trigger) => {
+        if (trigger.threshold && this.clickCount >= trigger.threshold) {
+          this.fireTrigger(trigger, {
+            triggerType: "clicks",
+            clickCount: this.clickCount,
+            currentUrl: window.location.href,
+            pageTitle: document.title
+          });
+        }
+      });
+    };
+    document.addEventListener("click", this.clickHandler);
+  }
+  /**
+   * Setup idle tracking
+   */
+  setupIdleTracking() {
+    const idleTriggers = this.config.triggers.filter((t) => t.type === "idle" && t.enabled);
+    if (idleTriggers.length === 0) return;
+    this.mouseMoveHandler = () => {
+      this.lastActivityTime = Date.now();
+    };
+    document.addEventListener("mousemove", this.mouseMoveHandler, { passive: true });
+    this.idleCheckInterval = setInterval(() => {
+      const idleTime = Date.now() - this.lastActivityTime;
+      idleTriggers.forEach((trigger) => {
+        if (trigger.threshold && idleTime >= trigger.threshold) {
+          this.fireTrigger(trigger, {
+            triggerType: "idle",
+            idleTime,
+            currentUrl: window.location.href,
+            pageTitle: document.title
+          });
+        }
+      });
+    }, 1e3);
+  }
+  /**
+   * Setup exit intent tracking
+   */
+  setupExitIntentTracking() {
+    const exitTriggers = this.config.triggers.filter((t) => t.type === "exit" && t.enabled);
+    if (exitTriggers.length === 0) return;
+    this.mouseLeaveHandler = (e) => {
+      if (e.clientY <= 0) {
+        exitTriggers.forEach((trigger) => {
+          this.fireTrigger(trigger, {
+            triggerType: "exit",
+            currentUrl: window.location.href,
+            pageTitle: document.title
+          });
+        });
+      }
+    };
+    document.addEventListener("mouseleave", this.mouseLeaveHandler);
+  }
+  /**
+   * Setup time on page tracking
+   */
+  setupTimeTracking() {
+    const timeTriggers = this.config.triggers.filter((t) => t.type === "time" && t.enabled);
+    if (timeTriggers.length === 0) return;
+    this.timeCheckInterval = setInterval(() => {
+      const timeOnPage = Date.now() - this.pageLoadTime;
+      timeTriggers.forEach((trigger) => {
+        if (trigger.threshold && timeOnPage >= trigger.threshold) {
+          this.fireTrigger(trigger, {
+            triggerType: "time",
+            timeOnPage,
+            currentUrl: window.location.href,
+            pageTitle: document.title
+          });
+        }
+      });
+    }, 1e3);
+  }
+  /**
+   * Setup SPA page change tracking
+   */
+  setupPageChangeTracking() {
+    const pageTriggers = this.config.triggers.filter((t) => t.type === "pageChange" && t.enabled);
+    if (pageTriggers.length === 0) return;
+    this.visibilityHandler = () => {
+      if (document.visibilityState === "visible") {
+        const newUrl = window.location.href;
+        if (newUrl !== this.currentUrl) {
+          this.previousUrl = this.currentUrl;
+          this.currentUrl = newUrl;
+          this.scrollDepth = 0;
+          this.clickCount = 0;
+          this.pageLoadTime = Date.now();
+          pageTriggers.forEach((trigger) => {
+            this.fireTrigger(trigger, {
+              triggerType: "pageChange",
+              currentUrl: this.currentUrl,
+              previousUrl: this.previousUrl,
+              pageTitle: document.title
+            });
+          });
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
+    window.addEventListener("popstate", () => {
+      const newUrl = window.location.href;
+      if (newUrl !== this.currentUrl) {
+        this.previousUrl = this.currentUrl;
+        this.currentUrl = newUrl;
+        pageTriggers.forEach((trigger) => {
+          this.fireTrigger(trigger, {
+            triggerType: "pageChange",
+            currentUrl: this.currentUrl,
+            previousUrl: this.previousUrl,
+            pageTitle: document.title
+          });
+        });
+      }
+    });
+  }
+  /**
+   * Manually trigger a proactive message (for custom integrations)
+   */
+  triggerManual(message, context) {
+    this.proactiveMessageCount++;
+    this.lastTriggerTime = Date.now();
+    const fullContext = {
+      triggerType: "time",
+      // default
+      currentUrl: window.location.href,
+      pageTitle: document.title,
+      ...context
+    };
+    this.callbacks.onTrigger(fullContext, message);
+    if (this.callbacks.onMessage) {
+      this.callbacks.onMessage(message);
+    }
+  }
+  /**
+   * Opt out of proactive messages
+   */
+  optOut() {
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem("produck_proactive_optout", "true");
+    }
+    this.stop();
+  }
+  /**
+   * Opt in to proactive messages
+   */
+  optIn() {
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem("produck_proactive_optout");
+    }
+    this.start();
+  }
+};
+
+// src/user-flows/utils.ts
+function isBrowser2() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function generateSessionId2() {
+  return "ufs_" + Date.now().toString(36) + "_" + Math.random().toString(36).substring(2, 11);
+}
+function getCurrentUrl2() {
+  if (!isBrowser2()) return "";
+  return window.location.href;
+}
+function getCurrentPath() {
+  if (!isBrowser2()) return "";
+  return window.location.pathname;
+}
+function getCurrentTitle() {
+  if (!isBrowser2()) return "";
+  return document.title || "";
+}
+function shouldTrackSession(samplingRate = 1) {
+  return Math.random() < samplingRate;
+}
+function getDeviceInfo2() {
+  if (!isBrowser2()) {
+    return {
+      deviceType: "desktop",
+      browser: "unknown",
+      os: "unknown",
+      viewportWidth: 0,
+      viewportHeight: 0,
+      userAgent: ""
+    };
+  }
+  const ua = navigator.userAgent;
+  let deviceType = "desktop";
+  if (/Mobi|Android/i.test(ua)) {
+    deviceType = /Tablet|iPad/i.test(ua) ? "tablet" : "mobile";
+  }
+  let browser = "unknown";
+  if (ua.includes("Firefox")) browser = "Firefox";
+  else if (ua.includes("Edg")) browser = "Edge";
+  else if (ua.includes("Chrome")) browser = "Chrome";
+  else if (ua.includes("Safari")) browser = "Safari";
+  else if (ua.includes("Opera") || ua.includes("OPR")) browser = "Opera";
+  let os = "unknown";
+  if (ua.includes("Windows")) os = "Windows";
+  else if (ua.includes("Mac OS")) os = "macOS";
+  else if (ua.includes("Linux")) os = "Linux";
+  else if (ua.includes("Android")) os = "Android";
+  else if (ua.includes("iOS") || ua.includes("iPhone") || ua.includes("iPad")) os = "iOS";
+  return {
+    deviceType,
+    browser,
+    os,
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+    userAgent: ua
+  };
+}
+function getElementSelector(element, depth = 5) {
+  const parts = [];
+  let current = element;
+  let currentDepth = 0;
+  while (current && current !== document.body && currentDepth < depth) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector += `#${current.id}`;
+      parts.unshift(selector);
+      break;
+    }
+    if (current.className && typeof current.className === "string") {
+      const classes = current.className.trim().split(/\s+/);
+      if (classes.length > 0 && classes[0]) {
+        selector += `.${classes[0]}`;
+      }
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (child) => child.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-child(${index})`;
+      }
+    }
+    parts.unshift(selector);
+    current = current.parentElement;
+    currentDepth++;
+  }
+  return parts.join(" > ");
+}
+function getElementXPath(element) {
+  if (!element) return "";
+  if (element.id) {
+    return `//*[@id="${element.id}"]`;
+  }
+  const parts = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    let index = 0;
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      if (sibling.tagName === current.tagName) {
+        index++;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+    const tagName = current.tagName.toLowerCase();
+    const part = index > 0 ? `${tagName}[${index + 1}]` : tagName;
+    parts.unshift(part);
+    current = current.parentElement;
+  }
+  return "/" + parts.join("/");
+}
+function getElementInfo(element, config = {}) {
+  const maxTextLength = config?.maxTextLength || 100;
+  const maxHtmlLength = config?.maxHtmlLength || 500;
+  const selectorDepth = config?.selectorDepth || 5;
+  let text = "";
+  if (element instanceof HTMLElement) {
+    text = element.innerText || element.textContent || "";
+    text = text.trim().substring(0, maxTextLength);
+    if (text.length === maxTextLength) text += "...";
+  }
+  let html;
+  if (config?.captureHtml !== false) {
+    html = element.outerHTML.substring(0, maxHtmlLength);
+    if (html.length === maxHtmlLength) html += "...";
+  }
+  const rect = element.getBoundingClientRect();
+  const info = {
+    tag: element.tagName.toLowerCase(),
+    selector: getElementSelector(element, selectorDepth)
+  };
+  if (element.id) info.id = element.id;
+  if (element.className && typeof element.className === "string") {
+    info.className = element.className;
+  }
+  if (text) info.text = text;
+  if (element instanceof HTMLAnchorElement && element.href) {
+    info.href = element.href;
+  }
+  info.xpath = getElementXPath(element);
+  info.rect = {
+    x: Math.round(rect.x),
+    y: Math.round(rect.y),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height)
+  };
+  if (html) info.html = html;
+  return info;
+}
+function matchesSelectors(element, selectors) {
+  if (!selectors || selectors.length === 0) return false;
+  return selectors.some((selector) => {
+    try {
+      return element.matches(selector) || element.closest(selector) !== null;
+    } catch {
+      return false;
+    }
+  });
+}
+function captureElementVisualInfo(element) {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const htmlElement = element;
+    const styles = window.getComputedStyle(htmlElement);
+    return {
+      backgroundColor: styles.backgroundColor,
+      color: styles.color,
+      fontSize: styles.fontSize,
+      fontWeight: styles.fontWeight,
+      borderRadius: styles.borderRadius,
+      border: styles.border,
+      boxShadow: styles.boxShadow,
+      padding: styles.padding
+    };
+  } catch {
+    return void 0;
+  }
+}
+async function captureElementScreenshot(element, maxSize = 200) {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const html2canvas = window.html2canvas;
+    if (!html2canvas) {
+      try {
+        const module2 = await import(
+          /* webpackIgnore: true */
+          "html2canvas"
+        );
+        const canvas2 = await module2.default(element, {
+          scale: 0.5,
+          width: maxSize,
+          height: maxSize,
+          useCORS: true,
+          logging: false
+        });
+        return canvas2.toDataURL("image/jpeg", 0.7);
+      } catch {
+        console.debug("[UserFlow] html2canvas not available for screenshots");
+        return void 0;
+      }
+    }
+    const canvas = await html2canvas(element, {
+      scale: 0.5,
+      width: maxSize,
+      height: maxSize,
+      useCORS: true,
+      logging: false
+    });
+    return canvas.toDataURL("image/jpeg", 0.7);
+  } catch (error) {
+    console.debug("[UserFlow] Failed to capture screenshot:", error);
+    return void 0;
+  }
+}
+function mergeConfig2(config) {
+  const defaults = {
+    enabled: false,
+    samplingRate: 1,
+    events: {
+      clicks: true,
+      navigation: true,
+      formSubmit: true,
+      inputs: false,
+      scroll: false,
+      ignoreSelectors: [],
+      trackOnlySelectors: []
+    },
+    element: {
+      captureVisualStyles: true,
+      // Lightweight - enabled by default
+      captureScreenshot: false,
+      // Expensive - disabled by default
+      screenshotMaxSize: 200,
+      captureHtml: true,
+      maxHtmlLength: 500,
+      maxTextLength: 100,
+      selectorDepth: 5
+    },
+    performance: {
+      batchEvents: true,
+      batchSize: 10,
+      batchTimeout: 5e3,
+      clickDebounce: 500
+    },
+    session: {
+      endOnHidden: true,
+      inactivityTimeout: 5 * 60 * 1e3,
+      // 5 minutes
+      endOnExternalNavigation: true,
+      autoRestart: true
+    },
+    endpoint: "",
+    onStart: () => {
+    },
+    onStop: () => {
+    },
+    onError: () => {
+    }
+  };
+  if (!config) return defaults;
+  return {
+    enabled: config.enabled ?? defaults.enabled,
+    samplingRate: config.samplingRate ?? defaults.samplingRate,
+    events: { ...defaults.events, ...config.events },
+    element: { ...defaults.element, ...config.element },
+    performance: { ...defaults.performance, ...config.performance },
+    session: { ...defaults.session, ...config.session },
+    endpoint: config.endpoint ?? defaults.endpoint,
+    onStart: config.onStart ?? defaults.onStart,
+    onStop: config.onStop ?? defaults.onStop,
+    onError: config.onError ?? defaults.onError
+  };
+}
+
+// src/user-flows/tracker.ts
+var UserFlowTracker = class {
+  constructor(config) {
+    this.state = "idle";
+    this.sessionId = null;
+    this.sdkSessionToken = null;
+    this.apiUrl = "";
+    this.sdkKey = null;
+    this.user = null;
+    // Tracking internals
+    this.events = [];
+    this.eventCount = 0;
+    this.batchIndex = 0;
+    this.batchesSent = 0;
+    this.pageCount = 0;
+    this.startTime = null;
+    this.batchTimeout = null;
+    this.inactivityTimeout = null;
+    this.lastActivityTime = Date.now();
+    this.lastClickTime = 0;
+    this.lastClickElement = null;
+    this.currentPath = "";
+    this.visitedPaths = /* @__PURE__ */ new Set();
+    // Event listeners
+    this.clickHandler = null;
+    this.navigationHandler = null;
+    this.formSubmitHandler = null;
+    this.beforeUnloadHandler = null;
+    this.visibilityHandler = null;
+    // Linked recording session ID (if rrweb is also recording)
+    this.linkedRecordingSessionId = null;
+    this.config = mergeConfig2(config);
+  }
+  /**
+   * Initialize the tracker with SDK context
+   */
+  initialize(sdkSessionToken, apiUrl, sdkKey) {
+    this.sdkSessionToken = sdkSessionToken;
+    this.apiUrl = apiUrl;
+    this.sdkKey = sdkKey || null;
+  }
+  /**
+   * Update configuration
+   */
+  updateConfig(config) {
+    this.config = mergeConfig2({ ...this.config, ...config });
+  }
+  /**
+   * Identify the user
+   */
+  identify(user) {
+    this.user = user;
+    if (this.state === "tracking" && this.sessionId) {
+      this.sendIdentificationUpdate().catch((err) => {
+        console.error("[UserFlow] Failed to send identification update:", err);
+      });
+    }
+  }
+  /**
+   * Start tracking
+   * @param linkedRecordingSessionId - Optional linked rrweb session ID for playback
+   */
+  async start(linkedRecordingSessionId) {
+    if (!isBrowser2()) {
+      console.warn("[UserFlow] Cannot track outside browser environment");
+      return null;
+    }
+    if (!this.config.enabled) {
+      return null;
+    }
+    if (this.state === "tracking") {
+      console.warn("[UserFlow] Already tracking");
+      return this.sessionId;
+    }
+    if (!shouldTrackSession(this.config.samplingRate)) {
+      console.log("[UserFlow] Session not sampled for tracking");
+      return null;
+    }
+    try {
+      this.sessionId = generateSessionId2();
+      this.linkedRecordingSessionId = linkedRecordingSessionId || null;
+      this.events = [];
+      this.eventCount = 0;
+      this.batchIndex = 0;
+      this.batchesSent = 0;
+      this.pageCount = 1;
+      this.startTime = /* @__PURE__ */ new Date();
+      this.currentPath = getCurrentPath();
+      this.visitedPaths = /* @__PURE__ */ new Set([this.currentPath]);
+      this.state = "tracking";
+      this.setupEventListeners();
+      await this.sendSessionStart();
+      this.addEvent({
+        eventType: "navigation",
+        eventOrder: 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        pageUrl: getCurrentUrl2(),
+        pageTitle: getCurrentTitle(),
+        pagePath: this.currentPath
+      });
+      this.config.onStart(this.sessionId);
+      console.log("[UserFlow] Started tracking session:", this.sessionId);
+      return this.sessionId;
+    } catch (error) {
+      console.error("[UserFlow] Failed to start tracking:", error);
+      this.state = "idle";
+      this.config.onError(error instanceof Error ? error : new Error(String(error)));
+      return null;
+    }
+  }
+  /**
+   * Stop tracking
+   */
+  async stop() {
+    if (this.state !== "tracking" && this.state !== "paused") {
+      return;
+    }
+    try {
+      this.removeEventListeners();
+      if (this.batchTimeout) {
+        clearTimeout(this.batchTimeout);
+        this.batchTimeout = null;
+      }
+      if (this.inactivityTimeout) {
+        clearTimeout(this.inactivityTimeout);
+        this.inactivityTimeout = null;
+      }
+      if (this.events.length > 0) {
+        await this.sendEventBatch(true);
+      }
+      await this.sendSessionEnd();
+      this.state = "stopped";
+      const eventCount = this.eventCount;
+      const sessionId = this.sessionId;
+      this.sessionId = null;
+      this.events = [];
+      this.eventCount = 0;
+      this.startTime = null;
+      this.config.onStop(sessionId, eventCount);
+      console.log("[UserFlow] Stopped tracking session:", sessionId);
+    } catch (error) {
+      console.error("[UserFlow] Error stopping tracking:", error);
+      this.state = "stopped";
+      this.config.onError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+  /**
+   * Pause tracking
+   */
+  pause() {
+    if (this.state === "tracking") {
+      this.state = "paused";
+      console.log("[UserFlow] Tracking paused");
+    }
+  }
+  /**
+   * Resume tracking
+   */
+  resume() {
+    if (this.state === "paused") {
+      this.state = "tracking";
+      console.log("[UserFlow] Tracking resumed");
+    }
+  }
+  /**
+   * Get tracker statistics
+   */
+  getStats() {
+    return {
+      sessionId: this.sessionId,
+      state: this.state,
+      eventCount: this.eventCount,
+      pageCount: this.pageCount,
+      batchesSent: this.batchesSent,
+      duration: this.startTime ? Date.now() - this.startTime.getTime() : 0,
+      startTime: this.startTime
+    };
+  }
+  /**
+   * Get tracking state
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Check if currently tracking
+   */
+  isTracking() {
+    return this.state === "tracking";
+  }
+  /**
+   * Add a custom event
+   */
+  addCustomEvent(data) {
+    if (this.state !== "tracking") return;
+    this.addEvent({
+      eventType: "custom",
+      eventOrder: this.eventCount,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      pageUrl: getCurrentUrl2(),
+      pageTitle: getCurrentTitle(),
+      pagePath: getCurrentPath(),
+      metadata: data
+    });
+  }
+  // === Private methods ===
+  /**
+   * Setup event listeners
+   */
+  setupEventListeners() {
+    if (!isBrowser2()) return;
+    if (this.config.events.clicks) {
+      this.clickHandler = (e) => this.handleClick(e);
+      document.addEventListener("click", this.clickHandler, { capture: true, passive: true });
+    }
+    if (this.config.events.navigation) {
+      this.navigationHandler = () => this.handleNavigation();
+      window.addEventListener("popstate", this.navigationHandler);
+      const originalPushState = history.pushState;
+      const originalReplaceState = history.replaceState;
+      history.pushState = (...args) => {
+        originalPushState.apply(history, args);
+        this.handleNavigation();
+      };
+      history.replaceState = (...args) => {
+        originalReplaceState.apply(history, args);
+        this.handleNavigation();
+      };
+    }
+    if (this.config.events.formSubmit) {
+      this.formSubmitHandler = (e) => this.handleFormSubmit(e);
+      document.addEventListener("submit", this.formSubmitHandler, { capture: true });
+    }
+    this.beforeUnloadHandler = () => {
+      if (this.events.length > 0) {
+        this.sendEventBatchSync(true);
+      }
+      this.sendSessionEndSync();
+    };
+    window.addEventListener("beforeunload", this.beforeUnloadHandler);
+    this.visibilityHandler = () => {
+      if (document.visibilityState === "hidden") {
+        if (this.events.length > 0) {
+          this.sendEventBatch(true).catch(console.error);
+        }
+        if (this.config.session.endOnHidden) {
+          this.stop().catch(console.error);
+        }
+      } else if (document.visibilityState === "visible") {
+        if (this.config.session.autoRestart && this.state === "stopped") {
+          this.start().catch(console.error);
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
+    this.resetInactivityTimeout();
+  }
+  /**
+   * Remove event listeners
+   */
+  removeEventListeners() {
+    if (!isBrowser2()) return;
+    if (this.clickHandler) {
+      document.removeEventListener("click", this.clickHandler, { capture: true });
+      this.clickHandler = null;
+    }
+    if (this.navigationHandler) {
+      window.removeEventListener("popstate", this.navigationHandler);
+      this.navigationHandler = null;
+    }
+    if (this.formSubmitHandler) {
+      document.removeEventListener("submit", this.formSubmitHandler, { capture: true });
+      this.formSubmitHandler = null;
+    }
+    if (this.beforeUnloadHandler) {
+      window.removeEventListener("beforeunload", this.beforeUnloadHandler);
+      this.beforeUnloadHandler = null;
+    }
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
+  }
+  /**
+   * Handle click event
+   */
+  async handleClick(e) {
+    if (this.state !== "tracking") return;
+    const target = e.target;
+    if (!target || !(target instanceof Element)) return;
+    if (this.config.events.ignoreSelectors && this.config.events.ignoreSelectors.length > 0 && matchesSelectors(target, this.config.events.ignoreSelectors)) {
+      return;
+    }
+    if (this.config.events.trackOnlySelectors && this.config.events.trackOnlySelectors.length > 0 && !matchesSelectors(target, this.config.events.trackOnlySelectors)) {
+      return;
+    }
+    const now = Date.now();
+    if (this.lastClickElement === target && now - this.lastClickTime < this.config.performance.clickDebounce) {
+      return;
+    }
+    this.lastClickTime = now;
+    this.lastClickElement = target;
+    const elementInfo = getElementInfo(target, this.config.element);
+    if (this.config.element.captureVisualStyles) {
+      elementInfo.visualStyles = captureElementVisualInfo(target);
+    }
+    if (this.config.element.captureScreenshot) {
+      try {
+        elementInfo.screenshot = await captureElementScreenshot(
+          target,
+          this.config.element.screenshotMaxSize
+        );
+      } catch {
+      }
+    }
+    const event = {
+      eventType: "click",
+      eventOrder: this.eventCount,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      pageUrl: getCurrentUrl2(),
+      pageTitle: getCurrentTitle(),
+      pagePath: getCurrentPath(),
+      element: elementInfo,
+      clickX: Math.round(e.pageX),
+      clickY: Math.round(e.pageY),
+      viewportX: Math.round(e.clientX),
+      viewportY: Math.round(e.clientY)
+    };
+    this.addEvent(event);
+  }
+  /**
+   * Handle navigation event
+   */
+  handleNavigation() {
+    if (this.state !== "tracking") return;
+    const newPath = getCurrentPath();
+    if (newPath === this.currentPath) return;
+    this.currentPath = newPath;
+    if (!this.visitedPaths.has(newPath)) {
+      this.visitedPaths.add(newPath);
+      this.pageCount++;
+    }
+    const event = {
+      eventType: "navigation",
+      eventOrder: this.eventCount,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      pageUrl: getCurrentUrl2(),
+      pageTitle: getCurrentTitle(),
+      pagePath: newPath
+    };
+    this.addEvent(event);
+  }
+  /**
+   * Handle form submit event
+   */
+  handleFormSubmit(e) {
+    if (this.state !== "tracking") return;
+    const form = e.target;
+    if (!form || !(form instanceof HTMLFormElement)) return;
+    if (this.config.events.ignoreSelectors && matchesSelectors(form, this.config.events.ignoreSelectors)) {
+      return;
+    }
+    const elementInfo = getElementInfo(form, this.config.element);
+    const event = {
+      eventType: "form_submit",
+      eventOrder: this.eventCount,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      pageUrl: getCurrentUrl2(),
+      pageTitle: getCurrentTitle(),
+      pagePath: getCurrentPath(),
+      element: elementInfo,
+      metadata: {
+        action: form.action,
+        method: form.method,
+        name: form.name
+      }
+    };
+    this.addEvent(event);
+  }
+  /**
+   * Add event to queue
+   */
+  addEvent(event) {
+    this.events.push(event);
+    this.eventCount++;
+    this.resetInactivityTimeout();
+    if (this.config.performance.batchEvents && this.events.length >= this.config.performance.batchSize) {
+      this.sendEventBatch(false).catch(console.error);
+    } else if (!this.batchTimeout) {
+      this.batchTimeout = setTimeout(() => {
+        this.batchTimeout = null;
+        if (this.events.length > 0) {
+          this.sendEventBatch(false).catch(console.error);
+        }
+      }, this.config.performance.batchTimeout);
+    }
+  }
+  /**
+   * Send session start to backend
+   */
+  async sendSessionStart() {
+    const endpoint = this.config.endpoint || `${this.apiUrl}/user-flows/session/start`;
+    const device = getDeviceInfo2();
+    const body = {
+      sessionId: this.sessionId,
+      sdkSessionToken: this.sdkSessionToken,
+      startUrl: getCurrentUrl2(),
+      startTime: this.startTime?.toISOString(),
+      user: this.user,
+      device,
+      // Link to rrweb recording session if available
+      linkedRecordingSessionId: this.linkedRecordingSessionId
+    };
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...this.sdkKey ? { "X-SDK-Key": this.sdkKey } : {}
+      },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to start session: ${response.status}`);
+    }
+  }
+  /**
+   * Send event batch to backend
+   */
+  async sendEventBatch(isFinal) {
+    if (this.events.length === 0) return;
+    const eventsToSend = [...this.events];
+    this.events = [];
+    const endpoint = this.config.endpoint ? `${this.config.endpoint}/events` : `${this.apiUrl}/user-flows/session/events`;
+    const body = {
+      sessionId: this.sessionId,
+      events: eventsToSend,
+      batchIndex: this.batchIndex++,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      isFinal
+    };
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...this.sdkKey ? { "X-SDK-Key": this.sdkKey } : {}
+        },
+        body: JSON.stringify(body)
+      });
+      if (response.ok) {
+        this.batchesSent++;
+      }
+    } catch (error) {
+      console.error("[UserFlow] Failed to send event batch:", error);
+      this.events = [...eventsToSend, ...this.events];
+    }
+  }
+  /**
+   * Send event batch synchronously (for beforeunload)
+   */
+  sendEventBatchSync(isFinal) {
+    if (this.events.length === 0) return;
+    const endpoint = this.config.endpoint ? `${this.config.endpoint}/events` : `${this.apiUrl}/user-flows/session/events`;
+    const body = {
+      sessionId: this.sessionId,
+      events: this.events,
+      batchIndex: this.batchIndex++,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      isFinal
+    };
+    if (navigator.sendBeacon) {
+      const blob = new Blob([JSON.stringify(body)], { type: "application/json" });
+      navigator.sendBeacon(endpoint, blob);
+      this.events = [];
+    }
+  }
+  /**
+   * Send session end to backend
+   */
+  async sendSessionEnd() {
+    const endpoint = this.config.endpoint ? `${this.config.endpoint}/end` : `${this.apiUrl}/user-flows/session/end`;
+    const body = {
+      sessionId: this.sessionId,
+      endTime: (/* @__PURE__ */ new Date()).toISOString(),
+      eventCount: this.eventCount,
+      status: "completed"
+    };
+    try {
+      await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...this.sdkKey ? { "X-SDK-Key": this.sdkKey } : {}
+        },
+        body: JSON.stringify(body)
+      });
+    } catch (error) {
+      console.error("[UserFlow] Failed to send session end:", error);
+    }
+  }
+  /**
+   * Send session end synchronously (for beforeunload)
+   */
+  sendSessionEndSync() {
+    const endpoint = this.config.endpoint ? `${this.config.endpoint}/end` : `${this.apiUrl}/user-flows/session/end`;
+    const body = {
+      sessionId: this.sessionId,
+      endTime: (/* @__PURE__ */ new Date()).toISOString(),
+      eventCount: this.eventCount,
+      status: "completed"
+    };
+    if (navigator.sendBeacon) {
+      const blob = new Blob([JSON.stringify(body)], { type: "application/json" });
+      navigator.sendBeacon(endpoint, blob);
+    }
+  }
+  /**
+   * Reset inactivity timeout
+   * Called on each user interaction
+   */
+  resetInactivityTimeout() {
+    if (this.inactivityTimeout) {
+      clearTimeout(this.inactivityTimeout);
+      this.inactivityTimeout = null;
+    }
+    this.lastActivityTime = Date.now();
+    const timeout = this.config.session.inactivityTimeout;
+    if (timeout && timeout > 0) {
+      this.inactivityTimeout = setTimeout(() => {
+        if (this.state === "tracking") {
+          console.log("[UserFlow] Session ended due to inactivity");
+          this.stop().catch(console.error);
+        }
+      }, timeout);
+    }
+  }
+  /**
+   * Send identification update to backend
+   */
+  async sendIdentificationUpdate() {
+    if (!this.sessionId || !this.user) return;
+    const endpoint = this.config.endpoint ? `${this.config.endpoint}/identify` : `${this.apiUrl}/user-flows/session/identify`;
+    const body = {
+      sessionId: this.sessionId,
+      user: this.user
+    };
+    await fetch(endpoint, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        ...this.sdkKey ? { "X-SDK-Key": this.sdkKey } : {}
+      },
+      body: JSON.stringify(body)
+    });
+  }
+};
+
 // src/core.ts
 var ProduckSDK = class {
   constructor(config) {
@@ -53,6 +1737,12 @@ var ProduckSDK = class {
     this.eventListeners = /* @__PURE__ */ new Map();
     this.sessionToken = null;
     this.isReady = false;
+    /** Session recorder instance (optional, isolated module) */
+    this.recorder = null;
+    /** Proactive behavior tracker instance (optional, isolated module) */
+    this.proactiveTracker = null;
+    /** User flow tracker instance (optional, isolated module) */
+    this.userFlowTracker = null;
     let apiUrl = config.apiUrl;
     if (!apiUrl) {
       if (typeof window !== "undefined") {
@@ -61,458 +1751,852 @@ var ProduckSDK = class {
         apiUrl = "http://localhost:4001/api/v1";
       }
     }
-    this.config = {
-      apiUrl,
-      ...config
+    this.config = {
+      apiUrl,
+      ...config
+    };
+  }
+  /**
+   * Initialize the SDK and create a chat session
+   */
+  async init() {
+    await this.log("info", "SDK Initializing", {
+      apiUrl: this.config.apiUrl,
+      hasSDKKey: !!this.config.sdkKey,
+      hasGuiderId: !!this.config.guiderId
+    });
+    try {
+      let endpoint;
+      if (this.config.sdkKey) {
+        endpoint = `${this.config.apiUrl}/sdk/session`;
+        await this.log("info", "Using SDK key authentication");
+      } else if (this.config.guiderId) {
+        endpoint = `${this.config.apiUrl}/chat/${this.config.guiderId}/session`;
+        await this.log("info", "Using guider ID authentication");
+      } else {
+        throw new Error("Either sdkKey or guiderId must be provided");
+      }
+      await this.log("info", "Creating session", { endpoint });
+      const headers = { "Content-Type": "application/json" };
+      if (this.config.sdkKey) {
+        headers["X-SDK-Key"] = this.config.sdkKey;
+      }
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers
+      });
+      if (!response.ok) {
+        await this.log("error", "Failed to create session", { status: response.status });
+        throw new Error(`Failed to create session: ${response.status}`);
+      }
+      const session = await response.json();
+      this.sessionToken = session.session_token;
+      this.isReady = true;
+      await this.log("info", "SDK initialized successfully", { hasSessionToken: !!this.sessionToken });
+      if (this.config.recording?.enabled) {
+        await this.initRecording();
+      }
+      if (this.config.proactive?.enabled) {
+        this.initProactive();
+      }
+      if (this.config.userFlows?.enabled) {
+        await this.initUserFlowTracking();
+      }
+      this.emit("ready", { sessionToken: this.sessionToken });
+      if (this.config.initialMessage) {
+        await this.sendInitialMessage();
+      }
+    } catch (error) {
+      await this.log("error", "SDK initialization failed", { error: error instanceof Error ? error.message : String(error) });
+      this.emit("error", error);
+      throw error;
+    }
+  }
+  /**
+   * Register an action handler
+   */
+  register(actionKey, handler) {
+    this.actions.set(actionKey, handler);
+    this.log("info", "Action handler registered", { actionKey, totalActions: this.actions.size });
+  }
+  /**
+   * Unregister an action handler
+   */
+  unregister(actionKey) {
+    this.actions.delete(actionKey);
+    this.log("info", "Action handler unregistered", { actionKey, remainingActions: this.actions.size });
+  }
+  /**
+   * Send a message and handle potential action or flow triggers
+   */
+  async sendMessage(message) {
+    if (!this.isReady || !this.sessionToken) {
+      throw new Error("SDK not initialized. Call init() first.");
+    }
+    const startTime = Date.now();
+    await this.log("info", "sendMessage called", { message });
+    try {
+      let intentEndpoint;
+      const headers = { "Content-Type": "application/json" };
+      if (this.config.sdkKey) {
+        intentEndpoint = `${this.config.apiUrl}/sdk/match-intent`;
+        headers["X-SDK-Key"] = this.config.sdkKey;
+      } else {
+        intentEndpoint = `${this.config.apiUrl}/sdk/public/${this.config.guiderId}/match-intent`;
+      }
+      const intentResponse = await fetch(intentEndpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ userMessage: message })
+      });
+      await this.log("info", "Match-intent response received", { status: intentResponse.status });
+      if (intentResponse.ok) {
+        const intentResult = await intentResponse.json();
+        if (intentResult.matched && intentResult.type === "flow" && intentResult.flow) {
+          await this.log("info", "Flow matched", {
+            flowId: intentResult.flow.flowId,
+            name: intentResult.flow.name,
+            stepCount: intentResult.flow.steps?.length
+          });
+          await this.sendLogToBackend({
+            userMessage: message,
+            matched: true,
+            actionKey: `flow:${intentResult.flow.flowId}`,
+            responseMessage: intentResult.responseMessage,
+            executionTimeMs: Date.now() - startTime
+          });
+          const flowResult = await this.executeFlow(intentResult.flow);
+          const flowMessage = {
+            role: "assistant",
+            content: intentResult.responseMessage || `I've completed the "${intentResult.flow.name}" flow for you.`,
+            flow: intentResult.flow,
+            flowResult
+          };
+          this.emit("message", flowMessage);
+          return flowMessage;
+        }
+        if (intentResult.matched && (intentResult.type === "operation" || intentResult.action)) {
+          const action = intentResult.action;
+          await this.log("info", "Action matched", {
+            actionKey: action.actionKey,
+            actionType: action.actionType,
+            responseMessage: action.responseMessage
+          });
+          await this.sendLogToBackend({
+            userMessage: message,
+            matched: true,
+            actionKey: action.actionKey,
+            responseMessage: action.responseMessage,
+            executionTimeMs: Date.now() - startTime
+          });
+          await this.executeAction(action);
+          const actionMessage = {
+            role: "assistant",
+            content: action.responseMessage || `I've triggered the "${action.name}" action for you.`,
+            action
+          };
+          this.emit("message", actionMessage);
+          return actionMessage;
+        } else {
+          await this.sendLogToBackend({
+            userMessage: message,
+            matched: false,
+            executionTimeMs: Date.now() - startTime
+          });
+        }
+      }
+      const sessionResponse = await fetch(
+        `${this.config.apiUrl}/chat/sessions/${this.sessionToken}/message`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message })
+        }
+      );
+      if (!sessionResponse.ok) {
+        throw new Error(`Failed to send message: ${sessionResponse.status}`);
+      }
+      const result = await sessionResponse.json();
+      const chatMessage = {
+        role: "assistant",
+        content: result.message?.content || result.response || "",
+        visualFlows: result.flows || [],
+        images: result.images || []
+      };
+      await this.log("info", "Chat response received", {
+        hasFlows: (result.flows || []).length > 0,
+        hasImages: (result.images || []).length > 0
+      });
+      this.emit("message", chatMessage);
+      return chatMessage;
+    } catch (error) {
+      await this.log("error", "Error in sendMessage", { error: error instanceof Error ? error.message : String(error) });
+      this.emit("error", error);
+      throw error;
+    }
+  }
+  /**
+   * Execute a flow by running each step's operation sequentially
+   */
+  async executeFlow(flow) {
+    await this.log("info", "executeFlow started", {
+      flowId: flow.flowId,
+      name: flow.name,
+      stepCount: flow.steps.length
+    });
+    this.emit("flowStart", flow);
+    if (this.config.onFlowStart) {
+      this.config.onFlowStart(flow);
+    }
+    const stepResults = [];
+    let context = {};
+    const sortedSteps = [...flow.steps].sort((a, b) => a.order - b.order);
+    for (const step of sortedSteps) {
+      await this.log("info", "Executing flow step", {
+        flowId: flow.flowId,
+        operationId: step.operationId,
+        order: step.order
+      });
+      const stepResult = {
+        operationId: step.operationId,
+        order: step.order,
+        success: false
+      };
+      try {
+        const handler = this.actions.get(step.operationId);
+        if (handler) {
+          const actionPayload = {
+            actionKey: step.operationId,
+            name: step.operationId,
+            actionType: "callback",
+            actionConfig: {
+              flowContext: context,
+              inputMapping: step.inputMapping
+            }
+          };
+          const result = await handler(actionPayload);
+          stepResult.success = true;
+          stepResult.data = result;
+          context = {
+            ...context,
+            [`step_${step.order}`]: result,
+            previousResult: result
+          };
+          await this.log("info", "Flow step completed successfully", {
+            flowId: flow.flowId,
+            operationId: step.operationId,
+            order: step.order
+          });
+        } else {
+          await this.log("warn", "No handler registered for flow step", {
+            flowId: flow.flowId,
+            operationId: step.operationId
+          });
+          stepResult.success = true;
+          stepResult.data = { skipped: true, reason: "No handler registered" };
+        }
+      } catch (error) {
+        stepResult.success = false;
+        stepResult.error = error instanceof Error ? error.message : String(error);
+        await this.log("error", "Flow step failed", {
+          flowId: flow.flowId,
+          operationId: step.operationId,
+          error: stepResult.error
+        });
+      }
+      stepResults.push(stepResult);
+      this.emit("flowStepComplete", { step: stepResult, flow });
+      if (this.config.onFlowStepComplete) {
+        this.config.onFlowStepComplete(stepResult, flow);
+      }
+    }
+    const flowResult = {
+      flowId: flow.flowId,
+      name: flow.name,
+      steps: stepResults,
+      completed: true,
+      totalSteps: flow.steps.length,
+      successfulSteps: stepResults.filter((s) => s.success).length
     };
+    await this.log("info", "Flow execution completed", {
+      flowId: flow.flowId,
+      totalSteps: flowResult.totalSteps,
+      successfulSteps: flowResult.successfulSteps
+    });
+    this.emit("flowComplete", flowResult);
+    if (this.config.onFlowComplete) {
+      this.config.onFlowComplete(flowResult);
+    }
+    return flowResult;
   }
   /**
-   * Initialize the SDK and create a chat session
+   * Send log data to backend for analytics
    */
-  async init() {
-    await this.log("info", "SDK Initializing", {
-      apiUrl: this.config.apiUrl,
-      hasSDKKey: !!this.config.sdkKey,
-      hasGuiderId: !!this.config.guiderId
-    });
+  async sendLogToBackend(logData) {
     try {
-      let endpoint;
+      const headers = { "Content-Type": "application/json" };
       if (this.config.sdkKey) {
-        endpoint = `${this.config.apiUrl}/sdk/session`;
-        await this.log("info", "Using SDK key authentication");
-      } else if (this.config.guiderId) {
-        endpoint = `${this.config.apiUrl}/chat/${this.config.guiderId}/session`;
-        await this.log("info", "Using guider ID authentication");
-      } else {
-        throw new Error("Either sdkKey or guiderId must be provided");
+        headers["X-SDK-Key"] = this.config.sdkKey;
       }
-      await this.log("info", "Creating session", { endpoint });
+      const logEndpoint = `${this.config.apiUrl}/sdk-logs/client`;
+      await fetch(logEndpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          ...logData,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          sessionToken: this.sessionToken
+        })
+      });
+    } catch (error) {
+    }
+  }
+  /**
+   * Send detailed log to backend
+   */
+  async log(level, message, data) {
+    try {
       const headers = { "Content-Type": "application/json" };
       if (this.config.sdkKey) {
         headers["X-SDK-Key"] = this.config.sdkKey;
       }
-      const response = await fetch(endpoint, {
+      const logEndpoint = `${this.config.apiUrl}/sdk-logs/client`;
+      await fetch(logEndpoint, {
         method: "POST",
-        headers
+        headers,
+        body: JSON.stringify({
+          level,
+          message,
+          data,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          sessionToken: this.sessionToken
+        })
+      });
+    } catch (error) {
+    }
+  }
+  /**
+   * Execute a registered action
+   */
+  async executeAction(action) {
+    const registeredKeys = Array.from(this.actions.keys());
+    if (typeof window !== "undefined") {
+      console.log("%c\u{1F3AF} SDK executeAction", "background: #ff0; color: #000; font-size: 20px; padding: 10px;", {
+        actionKey: action.actionKey,
+        totalRegistered: this.actions.size,
+        registeredKeys
+      });
+    }
+    await this.log("info", "executeAction called", {
+      actionKey: action.actionKey,
+      actionType: typeof action.actionKey,
+      totalRegistered: this.actions.size,
+      registeredKeys,
+      keyComparisons: registeredKeys.map((key) => ({
+        key,
+        matches: key === action.actionKey,
+        keyLength: key.length,
+        actionKeyLength: action.actionKey.length
+      }))
+    });
+    const handler = this.actions.get(action.actionKey);
+    if (typeof window !== "undefined") {
+      console.log("%c\u{1F50D} SDK Handler Lookup", "background: #0ff; color: #000; font-size: 16px; padding: 5px;", {
+        actionKey: action.actionKey,
+        found: !!handler,
+        hasConfigOnAction: !!this.config.onAction,
+        registeredKeys: Array.from(this.actions.keys())
+      });
+    }
+    if (handler) {
+      try {
+        const startTime = Date.now();
+        await handler(action);
+        const executionTime = Date.now() - startTime;
+        await this.log("info", "Handler executed successfully", {
+          actionKey: action.actionKey,
+          executionTime
+        });
+        await this.sendLogToBackend({
+          userMessage: `Action executed: ${action.actionKey}`,
+          matched: true,
+          actionKey: action.actionKey,
+          responseMessage: action.responseMessage || `Executed ${action.name}`,
+          executionTimeMs: executionTime
+        });
+        this.emit("action", action);
+        this.config.onAction?.(action.actionKey, action);
+      } catch (error) {
+        await this.log("error", "Handler execution failed", {
+          actionKey: action.actionKey,
+          error: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : void 0
+        });
+        await this.sendLogToBackend({
+          userMessage: `Action execution failed: ${action.actionKey}`,
+          matched: true,
+          actionKey: action.actionKey,
+          error: error instanceof Error ? error.message : String(error)
+        });
+        this.emit("error", error);
+      }
+    } else {
+      if (this.config.onAction) {
+        await this.log("info", "No internal handler, trying config.onAction callback", {
+          actionKey: action.actionKey
+        });
+        try {
+          this.config.onAction(action.actionKey, action);
+          this.emit("action", action);
+          await this.log("info", "Action dispatched via config.onAction", {
+            actionKey: action.actionKey
+          });
+          await this.sendLogToBackend({
+            userMessage: `Action dispatched: ${action.actionKey}`,
+            matched: true,
+            actionKey: action.actionKey,
+            responseMessage: action.responseMessage || `Dispatched ${action.name}`
+          });
+          return;
+        } catch (error) {
+          await this.log("error", "config.onAction callback failed", {
+            actionKey: action.actionKey,
+            error: error instanceof Error ? error.message : String(error)
+          });
+        }
+      }
+      await this.log("warn", "No handler registered for action", {
+        actionKey: action.actionKey,
+        registeredActions: Array.from(this.actions.keys())
+      });
+      await this.sendLogToBackend({
+        userMessage: `No handler for action: ${action.actionKey}`,
+        matched: false,
+        actionKey: action.actionKey,
+        error: `Handler not registered. Available: ${Array.from(this.actions.keys()).join(", ")}`
       });
+    }
+  }
+  /**
+   * Add event listener
+   */
+  on(event, callback) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(event).add(callback);
+  }
+  /**
+   * Remove event listener
+   */
+  off(event, callback) {
+    this.eventListeners.get(event)?.delete(callback);
+  }
+  /**
+   * Emit event
+   */
+  emit(event, data) {
+    this.eventListeners.get(event)?.forEach((callback) => callback(data));
+  }
+  /**
+   * Get session token
+   */
+  getSessionToken() {
+    return this.sessionToken;
+  }
+  /**
+   * Check if SDK is ready
+   */
+  getIsReady() {
+    return this.isReady;
+  }
+  /**
+   * Get registered action keys
+   */
+  getRegisteredActions() {
+    return Array.from(this.actions.keys());
+  }
+  /**
+   * Get guider ID for the current session
+   */
+  getGuiderId() {
+    return this.config.guiderId;
+  }
+  /**
+   * Fetch full visual flow details by flow ID
+   */
+  async getVisualFlow(flowId) {
+    const guiderId = this.config.guiderId;
+    if (!guiderId) {
+      await this.log("warn", "Cannot fetch visual flow without guiderId");
+      return null;
+    }
+    try {
+      const response = await fetch(
+        `${this.config.apiUrl}/visual-flows/chat/${guiderId}/${flowId}`
+      );
       if (!response.ok) {
-        await this.log("error", "Failed to create session", { status: response.status });
-        throw new Error(`Failed to create session: ${response.status}`);
+        await this.log("warn", "Visual flow not found", { flowId, status: response.status });
+        return null;
       }
-      const session = await response.json();
-      this.sessionToken = session.session_token;
-      this.isReady = true;
-      await this.log("info", "SDK initialized successfully", { hasSessionToken: !!this.sessionToken });
-      this.emit("ready", { sessionToken: this.sessionToken });
-    } catch (error) {
-      await this.log("error", "SDK initialization failed", { error: error instanceof Error ? error.message : String(error) });
-      this.emit("error", error);
-      throw error;
+      const result = await response.json();
+      if (!result.found || !result.flow) {
+        return null;
+      }
+      return result.flow;
+    } catch (error) {
+      await this.log("error", "Error fetching visual flow", { flowId, error });
+      return null;
     }
   }
+  // ============================================================
+  // Session Recording Methods (Isolated Module)
+  // These methods delegate to the SessionRecorder when enabled
+  // ============================================================
   /**
-   * Register an action handler
+   * Initialize session recording (internal)
    */
-  register(actionKey, handler) {
-    this.actions.set(actionKey, handler);
-    this.log("info", "Action handler registered", { actionKey, totalActions: this.actions.size });
+  async initRecording() {
+    try {
+      this.recorder = new SessionRecorder(this.config.recording);
+      this.recorder.initialize(
+        this.sessionToken,
+        this.config.apiUrl,
+        this.config.sdkKey
+      );
+      const sessionId = await this.recorder.start();
+      if (sessionId) {
+        await this.log("info", "Session recording started", { recordingSessionId: sessionId });
+      }
+    } catch (error) {
+      await this.log("warn", "Failed to initialize session recording", {
+        error: error instanceof Error ? error.message : String(error)
+      });
+    }
   }
   /**
-   * Unregister an action handler
+   * Start session recording manually (if not auto-started)
    */
-  unregister(actionKey) {
-    this.actions.delete(actionKey);
-    this.log("info", "Action handler unregistered", { actionKey, remainingActions: this.actions.size });
+  async startRecording() {
+    if (!this.isReady) {
+      console.warn("[SDK] Cannot start recording before SDK is initialized");
+      return null;
+    }
+    if (!this.recorder) {
+      this.recorder = new SessionRecorder(this.config.recording);
+      this.recorder.initialize(
+        this.sessionToken,
+        this.config.apiUrl,
+        this.config.sdkKey
+      );
+    }
+    return this.recorder.start();
   }
   /**
-   * Send a message and handle potential action or flow triggers
+   * Stop session recording
    */
-  async sendMessage(message) {
-    if (!this.isReady || !this.sessionToken) {
-      throw new Error("SDK not initialized. Call init() first.");
+  async stopRecording() {
+    if (this.recorder) {
+      await this.recorder.stop();
     }
-    const startTime = Date.now();
-    await this.log("info", "sendMessage called", { message });
+  }
+  /**
+   * Pause session recording
+   */
+  pauseRecording() {
+    this.recorder?.pause();
+  }
+  /**
+   * Resume session recording
+   */
+  resumeRecording() {
+    this.recorder?.resume();
+  }
+  /**
+   * Add a custom event to the recording
+   */
+  addRecordingEvent(event) {
+    this.recorder?.addCustomEvent(event);
+  }
+  /**
+   * Get recording statistics
+   */
+  getRecordingStats() {
+    return this.recorder?.getStats() ?? null;
+  }
+  /**
+   * Check if session recording is active
+   */
+  isRecordingActive() {
+    return this.recorder?.isRecording() ?? false;
+  }
+  /**
+   * Get recording session ID
+   */
+  getRecordingSessionId() {
+    return this.recorder?.getSessionId() ?? null;
+  }
+  // ============================================================
+  // Proactive Chat Methods (Isolated Module)
+  // These methods manage proactive behavior tracking and messaging
+  // ============================================================
+  /**
+   * Initialize proactive behavior tracking (internal)
+   */
+  initProactive() {
+    if (!this.config.proactive) return;
+    this.proactiveTracker = new ProactiveBehaviorTracker(
+      this.config.proactive,
+      {
+        onTrigger: async (context, suggestedMessage) => {
+          this.emit("proactive", { context, message: suggestedMessage });
+          if (this.config.onProactiveMessage) {
+            this.config.onProactiveMessage(suggestedMessage, context);
+          }
+          try {
+            await this.getProactiveAIMessage(context, suggestedMessage);
+          } catch (error) {
+            await this.log("warn", "Failed to get AI proactive message", { error });
+          }
+        }
+      }
+    );
+    this.proactiveTracker.start();
+    this.log("info", "Proactive behavior tracking initialized");
+  }
+  /**
+   * Get AI-generated proactive message based on context
+   */
+  async getProactiveAIMessage(context, fallbackMessage) {
     try {
-      let intentEndpoint;
       const headers = { "Content-Type": "application/json" };
       if (this.config.sdkKey) {
-        intentEndpoint = `${this.config.apiUrl}/sdk/match-intent`;
         headers["X-SDK-Key"] = this.config.sdkKey;
-      } else {
-        intentEndpoint = `${this.config.apiUrl}/sdk/public/${this.config.guiderId}/match-intent`;
       }
-      const intentResponse = await fetch(intentEndpoint, {
+      const response = await fetch(`${this.config.apiUrl}/sdk/proactive-message`, {
         method: "POST",
         headers,
-        body: JSON.stringify({ userMessage: message })
+        body: JSON.stringify({
+          context,
+          fallbackMessage,
+          sessionToken: this.sessionToken
+        })
       });
-      await this.log("info", "Match-intent response received", { status: intentResponse.status });
-      if (intentResponse.ok) {
-        const intentResult = await intentResponse.json();
-        if (intentResult.matched && intentResult.type === "flow" && intentResult.flow) {
-          await this.log("info", "Flow matched", {
-            flowId: intentResult.flow.flowId,
-            name: intentResult.flow.name,
-            stepCount: intentResult.flow.steps?.length
-          });
-          await this.sendLogToBackend({
-            userMessage: message,
-            matched: true,
-            actionKey: `flow:${intentResult.flow.flowId}`,
-            responseMessage: intentResult.responseMessage,
-            executionTimeMs: Date.now() - startTime
-          });
-          const flowResult = await this.executeFlow(intentResult.flow);
-          const flowMessage = {
-            role: "assistant",
-            content: intentResult.responseMessage || `I've completed the "${intentResult.flow.name}" flow for you.`,
-            flow: intentResult.flow,
-            flowResult
-          };
-          this.emit("message", flowMessage);
-          return flowMessage;
-        }
-        if (intentResult.matched && (intentResult.type === "operation" || intentResult.action)) {
-          const action = intentResult.action;
-          await this.log("info", "Action matched", {
-            actionKey: action.actionKey,
-            actionType: action.actionType,
-            responseMessage: action.responseMessage
-          });
-          await this.sendLogToBackend({
-            userMessage: message,
-            matched: true,
-            actionKey: action.actionKey,
-            responseMessage: action.responseMessage,
-            executionTimeMs: Date.now() - startTime
-          });
-          await this.executeAction(action);
-          const actionMessage = {
-            role: "assistant",
-            content: action.responseMessage || `I've triggered the "${action.name}" action for you.`,
-            action
-          };
-          this.emit("message", actionMessage);
-          return actionMessage;
-        } else {
-          await this.sendLogToBackend({
-            userMessage: message,
-            matched: false,
-            executionTimeMs: Date.now() - startTime
-          });
-        }
-      }
-      const sessionResponse = await fetch(
-        `${this.config.apiUrl}/chat/sessions/${this.sessionToken}/message`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ message })
-        }
-      );
-      if (!sessionResponse.ok) {
-        throw new Error(`Failed to send message: ${sessionResponse.status}`);
+      if (!response.ok) {
+        return fallbackMessage;
       }
-      const result = await sessionResponse.json();
+      const result = await response.json();
+      const message = result.message || fallbackMessage;
       const chatMessage = {
         role: "assistant",
-        content: result.message?.content || result.response || ""
+        content: message
       };
-      await this.log("info", "Chat response received");
       this.emit("message", chatMessage);
-      return chatMessage;
+      return message;
     } catch (error) {
-      await this.log("error", "Error in sendMessage", { error: error instanceof Error ? error.message : String(error) });
-      this.emit("error", error);
-      throw error;
+      return fallbackMessage;
     }
   }
   /**
-   * Execute a flow by running each step's operation sequentially
+   * Send initial message for landing page intros
    */
-  async executeFlow(flow) {
-    await this.log("info", "executeFlow started", {
-      flowId: flow.flowId,
-      name: flow.name,
-      stepCount: flow.steps.length
-    });
-    this.emit("flowStart", flow);
-    if (this.config.onFlowStart) {
-      this.config.onFlowStart(flow);
-    }
-    const stepResults = [];
-    let context = {};
-    const sortedSteps = [...flow.steps].sort((a, b) => a.order - b.order);
-    for (const step of sortedSteps) {
-      await this.log("info", "Executing flow step", {
-        flowId: flow.flowId,
-        operationId: step.operationId,
-        order: step.order
-      });
-      const stepResult = {
-        operationId: step.operationId,
-        order: step.order,
-        success: false
+  async sendInitialMessage() {
+    const message = this.config.initialMessage;
+    if (!message) return;
+    if (this.config.streamInitialMessage) {
+      await this.streamMessage(message);
+    } else {
+      const chatMessage = {
+        role: "assistant",
+        content: message
       };
-      try {
-        const handler = this.actions.get(step.operationId);
-        if (handler) {
-          const actionPayload = {
-            actionKey: step.operationId,
-            name: step.operationId,
-            actionType: "callback",
-            actionConfig: {
-              flowContext: context,
-              inputMapping: step.inputMapping
-            }
-          };
-          const result = await handler(actionPayload);
-          stepResult.success = true;
-          stepResult.data = result;
-          context = {
-            ...context,
-            [`step_${step.order}`]: result,
-            previousResult: result
-          };
-          await this.log("info", "Flow step completed successfully", {
-            flowId: flow.flowId,
-            operationId: step.operationId,
-            order: step.order
-          });
-        } else {
-          await this.log("warn", "No handler registered for flow step", {
-            flowId: flow.flowId,
-            operationId: step.operationId
-          });
-          stepResult.success = true;
-          stepResult.data = { skipped: true, reason: "No handler registered" };
-        }
-      } catch (error) {
-        stepResult.success = false;
-        stepResult.error = error instanceof Error ? error.message : String(error);
-        await this.log("error", "Flow step failed", {
-          flowId: flow.flowId,
-          operationId: step.operationId,
-          error: stepResult.error
-        });
-      }
-      stepResults.push(stepResult);
-      this.emit("flowStepComplete", { step: stepResult, flow });
-      if (this.config.onFlowStepComplete) {
-        this.config.onFlowStepComplete(stepResult, flow);
+      this.emit("message", chatMessage);
+      if (this.config.onMessage) {
+        this.config.onMessage(chatMessage);
       }
     }
-    const flowResult = {
-      flowId: flow.flowId,
-      name: flow.name,
-      steps: stepResults,
-      completed: true,
-      totalSteps: flow.steps.length,
-      successfulSteps: stepResults.filter((s) => s.success).length
-    };
-    await this.log("info", "Flow execution completed", {
-      flowId: flow.flowId,
-      totalSteps: flowResult.totalSteps,
-      successfulSteps: flowResult.successfulSteps
-    });
-    this.emit("flowComplete", flowResult);
-    if (this.config.onFlowComplete) {
-      this.config.onFlowComplete(flowResult);
+  }
+  /**
+   * Stream a message character by character for typewriter effect
+   */
+  async streamMessage(message, delayMs = 30) {
+    let currentContent = "";
+    for (let i = 0; i < message.length; i++) {
+      currentContent += message[i];
+      const chatMessage = {
+        role: "assistant",
+        content: currentContent
+      };
+      this.emit("message", chatMessage);
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
     }
-    return flowResult;
   }
   /**
-   * Send log data to backend for analytics
+   * Start proactive tracking manually
    */
-  async sendLogToBackend(logData) {
-    try {
-      const headers = { "Content-Type": "application/json" };
-      if (this.config.sdkKey) {
-        headers["X-SDK-Key"] = this.config.sdkKey;
-      }
-      const logEndpoint = `${this.config.apiUrl}/sdk-logs/client`;
-      await fetch(logEndpoint, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          ...logData,
-          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-          sessionToken: this.sessionToken
-        })
-      });
-    } catch (error) {
+  startProactiveTracking() {
+    if (this.proactiveTracker) {
+      this.proactiveTracker.start();
+    }
+  }
+  /**
+   * Stop proactive tracking
+   */
+  stopProactiveTracking() {
+    if (this.proactiveTracker) {
+      this.proactiveTracker.stop();
+    }
+  }
+  /**
+   * Get proactive tracking stats
+   */
+  getProactiveStats() {
+    return this.proactiveTracker?.getStats() ?? null;
+  }
+  /**
+   * Manually trigger a proactive message
+   */
+  triggerProactiveMessage(message, context) {
+    if (this.proactiveTracker) {
+      this.proactiveTracker.triggerManual(message, context);
+    } else {
+      const chatMessage = {
+        role: "assistant",
+        content: message
+      };
+      this.emit("message", chatMessage);
+      if (this.config.onMessage) {
+        this.config.onMessage(chatMessage);
+      }
     }
   }
   /**
-   * Send detailed log to backend
+   * Opt out of proactive messages (respects user preference)
    */
-  async log(level, message, data) {
+  optOutProactive() {
+    this.proactiveTracker?.optOut();
+  }
+  /**
+   * Opt in to proactive messages
+   */
+  optInProactive() {
+    this.proactiveTracker?.optIn();
+  }
+  // ============================================================
+  // User Flow Tracking Methods (Isolated Module)
+  // These methods manage user interaction tracking and flow analysis
+  // ============================================================
+  /**
+   * Initialize user flow tracking (internal)
+   */
+  async initUserFlowTracking() {
     try {
-      const headers = { "Content-Type": "application/json" };
-      if (this.config.sdkKey) {
-        headers["X-SDK-Key"] = this.config.sdkKey;
+      this.userFlowTracker = new UserFlowTracker(this.config.userFlows);
+      this.userFlowTracker.initialize(
+        this.sessionToken,
+        this.config.apiUrl,
+        this.config.sdkKey
+      );
+      const recordingSessionId = this.recorder?.getSessionId?.() || null;
+      const sessionId = await this.userFlowTracker.start(recordingSessionId);
+      if (sessionId) {
+        await this.log("info", "User flow tracking started", {
+          flowSessionId: sessionId,
+          linkedRecordingSession: recordingSessionId
+        });
       }
-      const logEndpoint = `${this.config.apiUrl}/sdk-logs/client`;
-      await fetch(logEndpoint, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          level,
-          message,
-          data,
-          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-          sessionToken: this.sessionToken
-        })
-      });
     } catch (error) {
+      await this.log("warn", "Failed to initialize user flow tracking", {
+        error: error instanceof Error ? error.message : String(error)
+      });
     }
   }
   /**
-   * Execute a registered action
+   * Identify the user for flow tracking and segmentation
+   * Call this when you know who the user is (e.g., after login)
    */
-  async executeAction(action) {
-    const registeredKeys = Array.from(this.actions.keys());
-    if (typeof window !== "undefined") {
-      console.log("%c\u{1F3AF} SDK executeAction", "background: #ff0; color: #000; font-size: 20px; padding: 10px;", {
-        actionKey: action.actionKey,
-        totalRegistered: this.actions.size,
-        registeredKeys
-      });
+  identify(user) {
+    if (this.userFlowTracker) {
+      this.userFlowTracker.identify(user);
     }
-    await this.log("info", "executeAction called", {
-      actionKey: action.actionKey,
-      actionType: typeof action.actionKey,
-      totalRegistered: this.actions.size,
-      registeredKeys,
-      keyComparisons: registeredKeys.map((key) => ({
-        key,
-        matches: key === action.actionKey,
-        keyLength: key.length,
-        actionKeyLength: action.actionKey.length
-      }))
+    this.log("info", "User identified", {
+      hasEmail: !!user.email,
+      hasName: !!user.name,
+      hasTags: !!user.tags && Object.keys(user.tags).length > 0
     });
-    const handler = this.actions.get(action.actionKey);
-    if (typeof window !== "undefined") {
-      console.log("%c\u{1F50D} SDK Handler Lookup", "background: #0ff; color: #000; font-size: 16px; padding: 5px;", {
-        actionKey: action.actionKey,
-        found: !!handler,
-        hasConfigOnAction: !!this.config.onAction,
-        registeredKeys: Array.from(this.actions.keys())
-      });
+  }
+  /**
+   * Start user flow tracking manually (if not auto-started)
+   */
+  async startUserFlowTracking() {
+    if (!this.isReady) {
+      console.warn("[SDK] Cannot start flow tracking before SDK is initialized");
+      return null;
     }
-    if (handler) {
-      try {
-        const startTime = Date.now();
-        await handler(action);
-        const executionTime = Date.now() - startTime;
-        await this.log("info", "Handler executed successfully", {
-          actionKey: action.actionKey,
-          executionTime
-        });
-        await this.sendLogToBackend({
-          userMessage: `Action executed: ${action.actionKey}`,
-          matched: true,
-          actionKey: action.actionKey,
-          responseMessage: action.responseMessage || `Executed ${action.name}`,
-          executionTimeMs: executionTime
-        });
-        this.emit("action", action);
-        this.config.onAction?.(action.actionKey, action);
-      } catch (error) {
-        await this.log("error", "Handler execution failed", {
-          actionKey: action.actionKey,
-          error: error instanceof Error ? error.message : String(error),
-          stack: error instanceof Error ? error.stack : void 0
-        });
-        await this.sendLogToBackend({
-          userMessage: `Action execution failed: ${action.actionKey}`,
-          matched: true,
-          actionKey: action.actionKey,
-          error: error instanceof Error ? error.message : String(error)
-        });
-        this.emit("error", error);
-      }
-    } else {
-      if (this.config.onAction) {
-        await this.log("info", "No internal handler, trying config.onAction callback", {
-          actionKey: action.actionKey
-        });
-        try {
-          this.config.onAction(action.actionKey, action);
-          this.emit("action", action);
-          await this.log("info", "Action dispatched via config.onAction", {
-            actionKey: action.actionKey
-          });
-          await this.sendLogToBackend({
-            userMessage: `Action dispatched: ${action.actionKey}`,
-            matched: true,
-            actionKey: action.actionKey,
-            responseMessage: action.responseMessage || `Dispatched ${action.name}`
-          });
-          return;
-        } catch (error) {
-          await this.log("error", "config.onAction callback failed", {
-            actionKey: action.actionKey,
-            error: error instanceof Error ? error.message : String(error)
-          });
-        }
-      }
-      await this.log("warn", "No handler registered for action", {
-        actionKey: action.actionKey,
-        registeredActions: Array.from(this.actions.keys())
-      });
-      await this.sendLogToBackend({
-        userMessage: `No handler for action: ${action.actionKey}`,
-        matched: false,
-        actionKey: action.actionKey,
-        error: `Handler not registered. Available: ${Array.from(this.actions.keys()).join(", ")}`
-      });
+    if (!this.userFlowTracker) {
+      this.userFlowTracker = new UserFlowTracker(this.config.userFlows);
+      this.userFlowTracker.initialize(
+        this.sessionToken,
+        this.config.apiUrl,
+        this.config.sdkKey
+      );
     }
+    return this.userFlowTracker.start();
   }
   /**
-   * Add event listener
+   * Stop user flow tracking
    */
-  on(event, callback) {
-    if (!this.eventListeners.has(event)) {
-      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+  async stopUserFlowTracking() {
+    if (this.userFlowTracker) {
+      await this.userFlowTracker.stop();
     }
-    this.eventListeners.get(event).add(callback);
   }
   /**
-   * Remove event listener
+   * Pause user flow tracking
    */
-  off(event, callback) {
-    this.eventListeners.get(event)?.delete(callback);
+  pauseUserFlowTracking() {
+    this.userFlowTracker?.pause();
   }
   /**
-   * Emit event
+   * Resume user flow tracking
    */
-  emit(event, data) {
-    this.eventListeners.get(event)?.forEach((callback) => callback(data));
+  resumeUserFlowTracking() {
+    this.userFlowTracker?.resume();
   }
   /**
-   * Get session token
+   * Add a custom event to the user flow
    */
-  getSessionToken() {
-    return this.sessionToken;
+  trackEvent(eventData) {
+    this.userFlowTracker?.addCustomEvent(eventData);
   }
   /**
-   * Check if SDK is ready
+   * Get user flow tracking statistics
    */
-  getIsReady() {
-    return this.isReady;
+  getUserFlowStats() {
+    return this.userFlowTracker?.getStats() ?? null;
   }
   /**
-   * Get registered action keys
+   * Check if user flow tracking is active
    */
-  getRegisteredActions() {
-    return Array.from(this.actions.keys());
+  isUserFlowTrackingActive() {
+    return this.userFlowTracker?.isTracking() ?? false;
   }
   /**
    * Destroy the SDK instance
    */
   destroy() {
+    if (this.recorder) {
+      this.recorder.destroy();
+      this.recorder = null;
+    }
+    if (this.proactiveTracker) {
+      this.proactiveTracker.stop();
+      this.proactiveTracker = null;
+    }
+    if (this.userFlowTracker) {
+      this.userFlowTracker.stop();
+      this.userFlowTracker = null;
+    }
     this.actions.clear();
     this.eventListeners.clear();
     this.sessionToken = null;
@@ -661,7 +2745,7 @@ function ProduckProvider({
 }
 
 // src/react/ProduckChat.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/react/hooks.ts
 var import_react3 = require("react");
@@ -696,8 +2780,263 @@ function useProduckFlow() {
   return { activeFlow, flowResult, isExecutingFlow };
 }
 
-// src/react/ProduckChat.tsx
+// src/react/VisualFlowDisplay.tsx
+var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function VisualFlowDisplay({
+  flowRef,
+  theme = "light",
+  primaryColor = "#f97316"
+}) {
+  const { sdk } = useProduckContext();
+  const [flow, setFlow] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [currentStep, setCurrentStep] = (0, import_react4.useState)(0);
+  const [isExpanded, setIsExpanded] = (0, import_react4.useState)(false);
+  const isDark = theme === "dark";
+  (0, import_react4.useEffect)(() => {
+    async function loadFlow() {
+      if (!sdk) {
+        setError("SDK not available");
+        setLoading(false);
+        return;
+      }
+      try {
+        const flowDetails = await sdk.getVisualFlow(flowRef.flowId);
+        if (flowDetails) {
+          setFlow(flowDetails);
+        } else {
+          setError("Flow not found");
+        }
+      } catch (err) {
+        setError("Failed to load flow");
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadFlow();
+  }, [sdk, flowRef.flowId]);
+  const containerStyles = {
+    marginTop: "12px",
+    borderRadius: "12px",
+    border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+    overflow: "hidden",
+    backgroundColor: isDark ? "#1f2937" : "#ffffff"
+  };
+  const headerStyles = {
+    padding: "12px 16px",
+    backgroundColor: isDark ? "#374151" : "#f3f4f6",
+    borderBottom: `1px solid ${isDark ? "#4b5563" : "#e5e7eb"}`,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  };
+  const titleStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontWeight: 600,
+    fontSize: "14px",
+    color: isDark ? "#f3f4f6" : "#1f2937"
+  };
+  const badgeStyles = {
+    fontSize: "11px",
+    padding: "2px 8px",
+    borderRadius: "10px",
+    backgroundColor: primaryColor,
+    color: "#ffffff"
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...headerStyles, cursor: "default" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: titleStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u{1F4D6}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading visual guide..." })
+    ] }) }) });
+  }
+  if (error || !flow) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { ...headerStyles, cursor: "default" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: titleStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: flowRef.name || flowRef.flowId })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: isDark ? "#9ca3af" : "#6b7280" }, children: "Unable to load" })
+    ] }) });
+  }
+  const steps = flow.steps || [];
+  const step = steps[currentStep];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: containerStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyles, onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: titleStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u{1F4D6}" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: flow.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: badgeStyles, children: [
+          steps.length,
+          " steps"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
+        fontSize: "16px",
+        transition: "transform 0.2s",
+        transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+      }, children: "\u25BC" })
+    ] }),
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: "16px" }, children: [
+      flow.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: {
+        margin: "0 0 16px 0",
+        fontSize: "13px",
+        color: isDark ? "#9ca3af" : "#6b7280",
+        lineHeight: 1.5
+      }, children: flow.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+        display: "flex",
+        gap: "8px",
+        marginBottom: "16px",
+        overflowX: "auto",
+        padding: "4px 0"
+      }, children: steps.map((s, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          onClick: () => setCurrentStep(idx),
+          style: {
+            padding: "6px 12px",
+            borderRadius: "6px",
+            border: "none",
+            backgroundColor: idx === currentStep ? primaryColor : isDark ? "#374151" : "#e5e7eb",
+            color: idx === currentStep ? "#ffffff" : isDark ? "#d1d5db" : "#4b5563",
+            fontSize: "12px",
+            fontWeight: idx === currentStep ? 600 : 400,
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            transition: "all 0.2s"
+          },
+          children: [
+            idx + 1,
+            ". ",
+            s.title || `Step ${idx + 1}`
+          ]
+        },
+        s.id
+      )) }),
+      step && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+        backgroundColor: isDark ? "#111827" : "#f9fafb",
+        borderRadius: "8px",
+        padding: "16px"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h4", { style: {
+          margin: "0 0 8px 0",
+          fontSize: "15px",
+          fontWeight: 600,
+          color: isDark ? "#f3f4f6" : "#1f2937"
+        }, children: [
+          "Step ",
+          currentStep + 1,
+          ": ",
+          step.title
+        ] }),
+        step.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: {
+          margin: "0 0 16px 0",
+          fontSize: "13px",
+          color: isDark ? "#9ca3af" : "#6b7280",
+          lineHeight: 1.5
+        }, children: step.description }),
+        step.screenshotUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+          borderRadius: "8px",
+          overflow: "hidden",
+          border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+          marginBottom: "12px"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "img",
+          {
+            src: step.screenshotUrl,
+            alt: `Step ${currentStep + 1}: ${step.title}`,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "auto"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+          display: "flex",
+          justifyContent: "space-between",
+          marginTop: "12px"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => setCurrentStep(Math.max(0, currentStep - 1)),
+              disabled: currentStep === 0,
+              style: {
+                padding: "8px 16px",
+                borderRadius: "6px",
+                border: "none",
+                backgroundColor: currentStep === 0 ? isDark ? "#374151" : "#e5e7eb" : primaryColor,
+                color: currentStep === 0 ? isDark ? "#6b7280" : "#9ca3af" : "#ffffff",
+                fontSize: "13px",
+                cursor: currentStep === 0 ? "not-allowed" : "pointer",
+                opacity: currentStep === 0 ? 0.5 : 1
+              },
+              children: "\u2190 Previous"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: {
+            fontSize: "12px",
+            color: isDark ? "#9ca3af" : "#6b7280",
+            alignSelf: "center"
+          }, children: [
+            currentStep + 1,
+            " / ",
+            steps.length
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => setCurrentStep(Math.min(steps.length - 1, currentStep + 1)),
+              disabled: currentStep === steps.length - 1,
+              style: {
+                padding: "8px 16px",
+                borderRadius: "6px",
+                border: "none",
+                backgroundColor: currentStep === steps.length - 1 ? isDark ? "#374151" : "#e5e7eb" : primaryColor,
+                color: currentStep === steps.length - 1 ? isDark ? "#6b7280" : "#9ca3af" : "#ffffff",
+                fontSize: "13px",
+                cursor: currentStep === steps.length - 1 ? "not-allowed" : "pointer",
+                opacity: currentStep === steps.length - 1 ? 0.5 : 1
+              },
+              children: "Next \u2192"
+            }
+          )
+        ] })
+      ] }),
+      flow.tags && flow.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+        display: "flex",
+        gap: "6px",
+        marginTop: "12px",
+        flexWrap: "wrap"
+      }, children: flow.tags.map((tag, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "span",
+        {
+          style: {
+            fontSize: "11px",
+            padding: "2px 8px",
+            borderRadius: "4px",
+            backgroundColor: isDark ? "#374151" : "#e5e7eb",
+            color: isDark ? "#d1d5db" : "#4b5563"
+          },
+          children: [
+            "#",
+            tag
+          ]
+        },
+        idx
+      )) })
+    ] })
+  ] });
+}
+
+// src/react/ProduckChat.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ProduckChat({
   placeholder = "Ask a question...",
   title = "Chat Assistant",
@@ -707,21 +3046,60 @@ function ProduckChat({
   className = "",
   style = {},
   defaultOpen = false,
-  appearance = {}
+  appearance = {},
+  initialMessage,
+  initialMessageDelay = 1e3,
+  autoOpenDelay,
+  proactiveEnabled = false,
+  showPoweredBy = true,
+  poweredByText = "Powered by prodact.ai",
+  poweredByUrl = "https://prodact.ai"
 }) {
   const { messages, isLoading, sendMessage } = useProduckMessages();
   const isReady = useProduckReady();
-  const [input, setInput] = (0, import_react4.useState)("");
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(position === "inline" ? true : defaultOpen);
-  const [isHovering, setIsHovering] = (0, import_react4.useState)(false);
-  const messagesEndRef = (0, import_react4.useRef)(null);
-  const inputRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [input, setInput] = (0, import_react5.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(position === "inline" ? true : defaultOpen);
+  const [isHovering, setIsHovering] = (0, import_react5.useState)(false);
+  const messagesEndRef = (0, import_react5.useRef)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  const [streamedMessage, setStreamedMessage] = (0, import_react5.useState)("");
+  const [isStreamingInitial, setIsStreamingInitial] = (0, import_react5.useState)(false);
+  const [hasShownInitial, setHasShownInitial] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    if (autoOpenDelay && autoOpenDelay > 0 && !isOpen && isReady) {
+      const timer = setTimeout(() => {
+        setIsOpen(true);
+      }, autoOpenDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [autoOpenDelay, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (isOpen && initialMessage && isReady && !hasShownInitial) {
+      const timer = setTimeout(() => {
+        streamInitialMessage(initialMessage);
+      }, initialMessageDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, initialMessage, isReady, hasShownInitial, initialMessageDelay]);
+  const streamInitialMessage = async (message) => {
+    setIsStreamingInitial(true);
+    setHasShownInitial(true);
+    let currentContent = "";
+    for (let i = 0; i < message.length; i++) {
+      currentContent += message[i];
+      setStreamedMessage(currentContent);
+      const char = message[i];
+      const delay = char === "\n" ? 40 : char === "." || char === "!" || char === "?" ? 25 : 20;
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+    setIsStreamingInitial(false);
+  };
+  (0, import_react5.useEffect)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isOpen && inputRef.current) {
       setTimeout(() => inputRef.current?.focus(), 100);
     }
@@ -815,7 +3193,7 @@ function ProduckChat({
     backgroundColor: isDark ? "#111827" : "#f9fafb",
     flexShrink: 0
   };
-  const renderFloatingButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const renderFloatingButton = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       onClick: () => setIsOpen(true),
@@ -847,12 +3225,12 @@ function ProduckChat({
     return renderFloatingButton();
   }
   if (position === "inline" && !isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: chatWindowStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
         "Loading..."
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
         flex: 1,
         display: "flex",
         alignItems: "center",
@@ -861,14 +3239,14 @@ function ProduckChat({
       }, children: "Connecting to chat..." })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: containerStyles, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: chatWindowStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: headerIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: containerStyles, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: headerStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: headerIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: title })
         ] }),
-        position !== "inline" && showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        position !== "inline" && showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             onClick: () => setIsOpen(false),
@@ -890,8 +3268,48 @@ function ProduckChat({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: messagesContainerStyles, children: [
-        messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: messagesContainerStyles, children: [
+        streamedMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "flex-start"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                style: {
+                  maxWidth: "85%",
+                  padding: "12px 16px",
+                  borderRadius: "16px 16px 16px 4px",
+                  backgroundColor: assistantMessageBackgroundColor,
+                  color: assistantMessageTextColor,
+                  fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+                  lineHeight: "1.5",
+                  wordBreak: "break-word"
+                },
+                children: [
+                  streamedMessage,
+                  isStreamingInitial && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: "2px",
+                        height: "1em",
+                        backgroundColor: "currentColor",
+                        marginLeft: "2px",
+                        animation: "blink 1s infinite"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        messages.length === 0 && !streamedMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
             style: {
@@ -900,20 +3318,20 @@ function ProduckChat({
               padding: "40px 20px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
             ]
           }
         ),
-        messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
             style: {
               display: "flex",
               justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
                 style: {
@@ -928,7 +3346,7 @@ function ProduckChat({
                 },
                 children: [
                   msg.content,
-                  msg.action && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  msg.action && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                     "div",
                     {
                       style: {
@@ -942,21 +3360,68 @@ function ProduckChat({
                         gap: "6px"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A1" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u26A1" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                           "Action triggered: ",
                           msg.action.name
                         ] })
                       ]
                     }
-                  )
+                  ),
+                  msg.visualFlows && msg.visualFlows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "12px" }, children: msg.visualFlows.map((flowRef, flowIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    VisualFlowDisplay,
+                    {
+                      flowRef,
+                      theme,
+                      primaryColor
+                    },
+                    flowRef.flowId || flowIdx
+                  )) }),
+                  msg.images && msg.images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "12px" }, children: msg.images.map((img, imgIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        marginTop: imgIdx > 0 ? "8px" : 0,
+                        borderRadius: "8px",
+                        overflow: "hidden",
+                        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "img",
+                          {
+                            src: img.url,
+                            alt: img.name || "Image",
+                            style: {
+                              display: "block",
+                              maxWidth: "100%",
+                              height: "auto"
+                            }
+                          }
+                        ),
+                        img.name && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "div",
+                          {
+                            style: {
+                              padding: "8px 12px",
+                              backgroundColor: isDark ? "#374151" : "#f3f4f6",
+                              fontSize: "12px",
+                              color: isDark ? "#d1d5db" : "#4b5563"
+                            },
+                            children: img.name
+                          }
+                        )
+                      ]
+                    },
+                    imgIdx
+                  )) })
                 ]
               }
             )
           },
           idx
         )),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
             style: {
@@ -966,16 +3431,16 @@ function ProduckChat({
               color: isDark ? "#9ca3af" : "#6b7280",
               fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
               display: "inline-block",
               animation: "pulse 1.5s ease-in-out infinite"
             }, children: "Thinking..." })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: messagesEndRef })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "input",
           {
             ref: inputRef,
@@ -1006,7 +3471,7 @@ function ProduckChat({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "button",
           {
             type: "submit",
@@ -1038,14 +3503,45 @@ function ProduckChat({
               e.currentTarget.style.boxShadow = "none";
             },
             children: [
-              sendButtonIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: sendButtonIcon }),
+              sendButtonIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: sendButtonIcon }),
               sendButtonText
             ]
           }
         )
-      ] }) })
+      ] }) }),
+      showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: {
+            padding: "8px 16px",
+            textAlign: "center",
+            borderTop: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "a",
+            {
+              href: poweredByUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: {
+                fontSize: "11px",
+                color: isDark ? "#6b7280" : "#9ca3af",
+                textDecoration: "none",
+                transition: "color 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.color = primaryColor;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.color = isDark ? "#6b7280" : "#9ca3af";
+              },
+              children: poweredByText
+            }
+          )
+        }
+      )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
@@ -1059,8 +3555,8 @@ function ProduckChat({
 }
 
 // src/react/ProduckTarget.tsx
-var import_react5 = __toESM(require("react"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react6 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ProduckTarget({
   actionKey,
   children,
@@ -1074,8 +3570,8 @@ function ProduckTarget({
   highlightDuration = 3e3,
   scrollIntoView = true
 }) {
-  const ref = (0, import_react5.useRef)(null);
-  const [isHighlighted, setIsHighlighted] = import_react5.default.useState(false);
+  const ref = (0, import_react6.useRef)(null);
+  const [isHighlighted, setIsHighlighted] = import_react6.default.useState(false);
   useProduckAction(
     actionKey,
     (payload) => {
@@ -1091,7 +3587,7 @@ function ProduckTarget({
     },
     [scrollIntoView, highlightDuration, onTrigger]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref,
@@ -1107,6 +3603,7 @@ function ProduckTarget({
   ProduckContext,
   ProduckProvider,
   ProduckTarget,
+  VisualFlowDisplay,
   useProduck,
   useProduckAction,
   useProduckFlow,