@guidelytech/react-native 0.11.0 → 0.13.0

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 
 // src/index.tsx
 import { useContext as useContext3, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
-import { AppState as AppState2, Dimensions, Linking, Platform as Platform6, StyleSheet as StyleSheet10, View as View12 } from "react-native";
+import { AppState as AppState2, Dimensions, Linking, NativeModules, Platform as Platform6, StyleSheet as StyleSheet10, View as View12 } from "react-native";
 import { createStaticFlags as createStaticFlags2, stableStringify as stableStringify3 } from "@guidelytech/flags";
 
 // src/flags.tsx
@@ -96,7 +96,7 @@ function FlagsProvider({ children, client: external, payload, ...options }) {
   return /* @__PURE__ */ jsx(FlagsContext.Provider, { value, children });
 }
 
-// ../shared/dist/chunk-TGIUEYXM.js
+// ../shared/dist/chunk-XJXXVV3C.js
 function fnv1a(input) {
   let h = 2166136261;
   for (let i = 0; i < input.length; i++) {
@@ -406,7 +406,7 @@ function sanitizeProperties(props) {
   }
   return out;
 }
-var SOURCEMAP_MAX_FILE_BYTES = 25 * 1024 * 1024;
+var SOURCEMAP_MAX_FILE_BYTES = 100 * 1024 * 1024;
 var MAX_COMPLAINT_ATTACHMENT_BYTES = 2 * 1024 * 1024;
 var MEDIA_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
 var MEDIA_VIDEO_MAX_BYTES = 200 * 1024 * 1024;
@@ -701,7 +701,7 @@ function localizeResourceCenter(rc, requested, defaultLocale = DEFAULT_LOCALE) {
   };
 }
 
-// ../sdk-core/dist/chunk-JUSM7J5N.js
+// ../sdk-core/dist/chunk-XML74K2P.js
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -1010,10 +1010,12 @@ var KEYS = {
   /** Messenger conversations this browser can read: [{ id, token }]. */
   conversations: (key) => `guidely:conversations:${key}`,
   /** Announcement ids opened in the messenger's News tab. */
-  newsSeen: (key) => `guidely:news:${key}`
+  newsSeen: (key) => `guidely:news:${key}`,
+  /** Where the visitor dragged the messenger launcher ({ side, y }). */
+  launcher: (key) => `guidely:launcher:${key}`
 };
 
-// ../sdk-core/dist/chunk-ZAF2KRJA.js
+// ../sdk-core/dist/chunk-2E2YUQAG.js
 var EventQueue = class {
   constructor(opts) {
     __publicField2(this, "opts", opts);
@@ -1323,6 +1325,49 @@ function dismissedAfterMerge(local, server) {
 // src/core/client.ts
 import { createFlagsClient as createFlagsClient2 } from "@guidelytech/flags";
 
+// src/core/launcherPlacement.ts
+var LAUNCHER_PLACEMENT_KEY = "guidely:messenger.launcher";
+var LAUNCHER_MARGIN = 16;
+var LAUNCHER_DRAG_THRESHOLD = 8;
+var clamp2 = (v, min, max) => Math.min(max, Math.max(min, v));
+function sideX(f, side) {
+  return side === "left" ? f.insets.left + LAUNCHER_MARGIN : f.width - f.insets.right - LAUNCHER_MARGIN - f.size;
+}
+function verticalRange(f) {
+  const max = f.height - f.defaultBottom - f.size;
+  return { min: Math.min(max, f.insets.top + LAUNCHER_MARGIN), max };
+}
+function clampToSafeArea(f, p) {
+  const left = f.insets.left + LAUNCHER_MARGIN;
+  const top = f.insets.top + LAUNCHER_MARGIN;
+  return {
+    x: clamp2(p.x, left, Math.max(left, f.width - f.insets.right - LAUNCHER_MARGIN - f.size)),
+    y: clamp2(p.y, top, Math.max(top, f.height - f.insets.bottom - LAUNCHER_MARGIN - f.size))
+  };
+}
+function snapPlacement(f, p) {
+  const { min, max } = verticalRange(f);
+  const side = p.x + f.size / 2 < f.width / 2 ? "left" : "right";
+  return { side, fraction: max > min ? (max - clamp2(p.y, min, max)) / (max - min) : 0 };
+}
+function placementPoint(f, placement) {
+  const { min, max } = verticalRange(f);
+  return { x: sideX(f, placement.side), y: max - clamp2(placement.fraction, 0, 1) * (max - min) };
+}
+function parsePlacement(raw) {
+  if (!raw) return null;
+  try {
+    const v = JSON.parse(raw);
+    if (!v || typeof v !== "object" || v.side !== "left" && v.side !== "right" || typeof v.fraction !== "number" || !Number.isFinite(v.fraction)) return null;
+    return { side: v.side, fraction: clamp2(v.fraction, 0, 1) };
+  } catch {
+    return null;
+  }
+}
+function serializePlacement(p) {
+  return JSON.stringify({ side: p.side, fraction: Math.round(clamp2(p.fraction, 0, 1) * 1e4) / 1e4 });
+}
+
 // src/core/autocapture.ts
 var TAP_SLOP = 10;
 var TAP_MAX_MS = 1e3;
@@ -2383,6 +2428,425 @@ var Messenger = class {
   }
 };
 
+// src/core/replay.ts
+var RrwebEvents = {
+  IMG_ID: 8,
+  TOUCH_START: 7,
+  TOUCH_END: 9,
+  CLICK: 2,
+  CSS: "html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000}img{display:block;width:100%;height:100%;object-fit:contain}",
+  dataUrl(base64) {
+    return `data:image/jpeg;base64,${base64}`;
+  },
+  meta(timestamp, href, width, height) {
+    return JSON.stringify({ type: 4, data: { href, width, height }, timestamp });
+  },
+  fullSnapshot(timestamp, dataUrl, width, height) {
+    const style = { type: 2, id: 5, tagName: "style", attributes: {}, childNodes: [{ type: 3, id: 6, textContent: RrwebEvents.CSS, isStyle: true }] };
+    const img = { type: 2, id: 8, tagName: "img", attributes: { src: dataUrl, width, height, alt: "" }, childNodes: [] };
+    const html = { type: 2, id: 3, tagName: "html", attributes: {}, childNodes: [{ type: 2, id: 4, tagName: "head", attributes: {}, childNodes: [style] }, { type: 2, id: 7, tagName: "body", attributes: {}, childNodes: [img] }] };
+    const node = { type: 0, id: 1, childNodes: [{ type: 1, id: 2, name: "html", publicId: "", systemId: "" }, html] };
+    return JSON.stringify({ type: 2, data: { node, initialOffset: { left: 0, top: 0 } }, timestamp });
+  },
+  frame(timestamp, dataUrl) {
+    return JSON.stringify({ type: 3, data: { source: 0, texts: [], attributes: [{ id: 8, attributes: { src: dataUrl } }], removes: [], adds: [] }, timestamp });
+  },
+  /** MouseInteraction (source 2): 7 TouchStart, 9 TouchEnd, 2 Click. */
+  interaction(timestamp, type, x, y) {
+    return JSON.stringify({ type: 3, data: { source: 2, type, id: 8, x: round1(x), y: round1(y) }, timestamp });
+  },
+  touchMove(timestamp, x, y) {
+    return JSON.stringify({ type: 3, data: { source: 6, positions: [{ x: round1(x), y: round1(y), id: 8, timeOffset: 0 }] }, timestamp });
+  },
+  custom(timestamp, tag, payload) {
+    return JSON.stringify({ type: 5, data: { tag, payload }, timestamp });
+  }
+};
+var round1 = (v) => Math.round(v * 10) / 10;
+var UPLOAD_TIMEOUT_MS = 3e4;
+var ReplayUploader = class {
+  constructor(opts) {
+    __publicField(this, "opts", opts);
+    __publicField(this, "windowId", randomId(16));
+    __publicField(this, "buffer", null);
+    __publicField(this, "queue", []);
+    __publicField(this, "queuedBytes", 0);
+    __publicField(this, "seqs", /* @__PURE__ */ new Map());
+    __publicField(this, "inflight", null);
+    __publicField(this, "flushTimer", null);
+    __publicField(this, "retryTimer", null);
+    __publicField(this, "attempt", 0);
+    __publicField(this, "destroyed", false);
+    __publicField(this, "offRecover");
+    this.offRecover = opts.health?.onRecover?.(() => {
+      this.clearRetry();
+      this.attempt = 0;
+      this.flush();
+    }) ?? null;
+  }
+  get pendingChunks() {
+    return this.queue.length;
+  }
+  get bufferedEvents() {
+    return this.buffer?.events.length ?? 0;
+  }
+  push(sessionId, json) {
+    if (this.destroyed) return;
+    if (this.buffer && this.buffer.sessionId !== sessionId) this.seal();
+    const chunk = this.buffer ?? (this.buffer = { sessionId, meta: this.opts.meta(), events: [], bytes: 0 });
+    chunk.events.push(json);
+    chunk.bytes += json.length;
+    if (chunk.bytes > (this.opts.maxBufferBytes ?? 1e6)) this.flush();
+    else if (!this.flushTimer) {
+      this.flushTimer = setTimeout(() => {
+        this.flushTimer = null;
+        this.flush();
+      }, this.opts.flushIntervalMs ?? 1e4);
+    }
+  }
+  /** Seals the buffer and uploads the backlog (one chunk at a time). */
+  flush() {
+    if (this.destroyed) return;
+    this.seal();
+    if (this.retryTimer || this.inflight || !this.queue.length) return;
+    void this.sendNext();
+  }
+  /** Drops everything buffered or queued (consent withdrawn, server disabled replay). */
+  discard() {
+    this.buffer = null;
+    this.queue = [];
+    this.queuedBytes = 0;
+    this.clearFlushTimer();
+    this.clearRetry();
+    this.attempt = 0;
+  }
+  /** Uploads what is left once; no retries afterwards. */
+  destroy() {
+    this.flush();
+    this.destroyed = true;
+    this.offRecover?.();
+    this.clearFlushTimer();
+    this.clearRetry();
+  }
+  clearFlushTimer() {
+    if (this.flushTimer) clearTimeout(this.flushTimer);
+    this.flushTimer = null;
+  }
+  clearRetry() {
+    if (this.retryTimer) clearTimeout(this.retryTimer);
+    this.retryTimer = null;
+  }
+  scheduleRetry(ms) {
+    this.retryTimer = setTimeout(() => {
+      this.retryTimer = null;
+      this.flush();
+    }, ms);
+  }
+  seal() {
+    this.clearFlushTimer();
+    const chunk = this.buffer;
+    this.buffer = null;
+    if (!chunk || !chunk.events.length) return;
+    this.queue.push(chunk);
+    this.queuedBytes += chunk.bytes;
+    const max = this.opts.maxQueuedBytes ?? 5e6;
+    while (this.queuedBytes > max && this.queue.length > 1) {
+      const i = this.inflight && this.queue[0] === this.inflight ? 1 : 0;
+      const [dropped] = this.queue.splice(i, 1);
+      if (!dropped) break;
+      this.queuedBytes -= dropped.bytes;
+      this.opts.log?.(`replay backlog full: dropped a chunk of ${dropped.events.length} events`);
+    }
+  }
+  nextSeq(chunk) {
+    if (chunk.seq === void 0) {
+      const seq = this.seqs.get(chunk.sessionId) ?? 0;
+      this.seqs.set(chunk.sessionId, seq + 1);
+      chunk.seq = seq;
+    }
+    return chunk.seq;
+  }
+  body(chunk) {
+    const head = JSON.stringify({ sessionId: chunk.sessionId, windowId: this.windowId, seq: this.nextSeq(chunk), ...chunk.meta });
+    return `${head.slice(0, -1)},"events":[${chunk.events.join(",")}]}`;
+  }
+  async sendNext() {
+    const chunk = this.queue[0];
+    if (!chunk) return;
+    const wait = this.destroyed ? 0 : this.opts.health?.waitMs() ?? 0;
+    if (wait > 0) return this.scheduleRetry(wait);
+    this.inflight = chunk;
+    const result = await this.upload(this.body(chunk));
+    this.onResult(chunk, result);
+  }
+  async upload(json) {
+    const f = this.opts.fetch();
+    if (!f) return "drop";
+    const ac = typeof AbortController !== "undefined" ? new AbortController() : null;
+    const timer = ac ? setTimeout(() => ac.abort(), UPLOAD_TIMEOUT_MS) : null;
+    try {
+      let res;
+      try {
+        res = await f(this.opts.url(), { method: "POST", body: json, headers: { "Content-Type": "application/json" }, signal: ac?.signal });
+      } catch {
+        this.opts.health?.failure();
+        return "retry";
+      }
+      if (res.status === 429 || res.status >= 500) this.opts.health?.failure();
+      else this.opts.health?.success();
+      if (res.ok) {
+        const data = await res.json().catch(() => null);
+        return data?.disabled ? "disabled" : "ok";
+      }
+      return res.status >= 400 && res.status < 500 && res.status !== 429 ? "drop" : "retry";
+    } finally {
+      if (timer) clearTimeout(timer);
+    }
+  }
+  onResult(chunk, result) {
+    if (this.inflight === chunk) this.inflight = null;
+    if (result === "retry" && this.queue.includes(chunk)) {
+      if (!this.destroyed) {
+        const max = this.opts.maxAttempts ?? 5;
+        this.attempt = Math.min(this.attempt + 1, max);
+        const delay = this.attempt >= max ? this.opts.slowRetryMs ?? 6e4 : backoffMs(this.attempt - 1, 1e3, 8e3);
+        return this.scheduleRetry(Math.max(delay, this.opts.health?.waitMs() ?? 0));
+      }
+      this.opts.log?.("replay upload failed after the recorder stopped; dropping the chunk");
+    }
+    this.attempt = 0;
+    this.remove(chunk);
+    if (result === "disabled") {
+      for (const c of this.queue.slice()) if (c.sessionId === chunk.sessionId) this.remove(c);
+      if (this.buffer?.sessionId === chunk.sessionId) this.buffer = null;
+      this.opts.onDisabled(chunk.sessionId);
+    }
+    if (this.queue.length && !this.retryTimer && !this.inflight) void this.sendNext();
+  }
+  remove(chunk) {
+    const i = this.queue.indexOf(chunk);
+    if (i >= 0) {
+      this.queue.splice(i, 1);
+      this.queuedBytes -= chunk.bytes;
+    }
+  }
+};
+var TOUCH_SETTLE_MS = 200;
+var IDLE_FRAMES = 3;
+var MAX_IDLE_INTERVAL_MS = 5e3;
+var SessionRecorder = class {
+  constructor(opts) {
+    __publicField(this, "opts", opts);
+    __publicField(this, "intervalMs");
+    __publicField(this, "now");
+    __publicField(this, "sid", null);
+    __publicField(this, "foreground", true);
+    __publicField(this, "generation", 0);
+    __publicField(this, "timer", null);
+    __publicField(this, "timerDue", 0);
+    __publicField(this, "capturing", false);
+    __publicField(this, "needKeyframe", true);
+    __publicField(this, "hasKeyframe", false);
+    __publicField(this, "lastFrame", null);
+    __publicField(this, "unchanged", 0);
+    __publicField(this, "captureSoon", false);
+    __publicField(this, "pendingCustom", []);
+    __publicField(this, "touchDown", false);
+    __publicField(this, "downX", 0);
+    __publicField(this, "downY", 0);
+    __publicField(this, "downAt", 0);
+    __publicField(this, "maxDistance", 0);
+    __publicField(this, "lastMoveAt", 0);
+    __publicField(this, "originX", 0);
+    __publicField(this, "originY", 0);
+    /** Viewport of the last frame (points), for chunk metadata. */
+    __publicField(this, "viewportWidth", 0);
+    __publicField(this, "viewportHeight", 0);
+    this.intervalMs = Math.max(500, opts.intervalMs);
+    this.now = opts.now ?? Date.now;
+  }
+  get sessionId() {
+    return this.sid;
+  }
+  get isRecording() {
+    return this.sid !== null;
+  }
+  get currentIntervalMs() {
+    return this.unchanged >= IDLE_FRAMES ? Math.max(this.intervalMs, Math.min(4 * this.intervalMs, MAX_IDLE_INTERVAL_MS)) : this.intervalMs;
+  }
+  /** Starts (or keeps) recording `sessionId`; another session stops the current one first (uploading it). */
+  start(sessionId) {
+    if (this.sid === sessionId) return;
+    if (this.sid !== null) this.stop(false);
+    this.sid = sessionId;
+    this.generation++;
+    this.needKeyframe = true;
+    this.hasKeyframe = false;
+    this.lastFrame = null;
+    this.unchanged = 0;
+    this.captureSoon = false;
+    this.pendingCustom = [];
+    this.touchDown = false;
+    if (this.foreground) this.schedule(0);
+  }
+  /** Stops recording; buffered events are uploaded unless `discard`. */
+  stop(discard) {
+    if (this.sid === null) return;
+    this.sid = null;
+    this.generation++;
+    this.clearTimer();
+    this.capturing = false;
+    this.pendingCustom = [];
+    this.touchDown = false;
+    if (discard) this.opts.uploader.discard();
+    else this.opts.uploader.flush();
+  }
+  /** App backgrounded: no captures; uploads what is buffered. */
+  pause() {
+    this.foreground = false;
+    this.clearTimer();
+    this.generation++;
+    this.capturing = false;
+    this.touchDown = false;
+    this.opts.uploader.flush();
+  }
+  /** App foregrounded: resume with a keyframe. */
+  resume() {
+    if (this.foreground) return;
+    this.foreground = true;
+    this.needKeyframe = true;
+    this.unchanged = 0;
+    if (this.sid !== null) this.schedule(0);
+  }
+  /** A new screen: the next frame is a keyframe with the new href. */
+  onScreen() {
+    if (this.sid === null) return;
+    this.needKeyframe = true;
+    this.activity();
+  }
+  activity() {
+    const wasIdle = this.unchanged >= IDLE_FRAMES;
+    this.unchanged = 0;
+    if (wasIdle && this.sid !== null && this.foreground && !this.capturing && !this.touchDown) this.schedule(this.intervalMs, true);
+  }
+  /** Adds the `guidely` marker for an analytics event. */
+  addGuidelyEvent(name, customName, guideId) {
+    const id = this.sid;
+    if (id === null) return;
+    const payload = { name };
+    if (customName) payload.customName = customName;
+    if (guideId) payload.guideId = guideId;
+    this.activity();
+    const now = this.now();
+    if (!this.hasKeyframe) {
+      if (this.pendingCustom.length < 50) this.pendingCustom.push([now, payload]);
+      return;
+    }
+    this.opts.uploader.push(id, RrwebEvents.custom(now, "guidely", payload));
+  }
+  /** A primary-pointer touch at (x, y) points from the React root view. */
+  touch(phase, rootX, rootY) {
+    const id = this.sid;
+    if (id === null || !this.foreground) return;
+    const x = rootX + this.originX;
+    const y = rootY + this.originY;
+    const now = this.now();
+    const emit = this.hasKeyframe;
+    const push = (json) => emit && this.opts.uploader.push(id, json);
+    switch (phase) {
+      case "down":
+        this.touchDown = true;
+        this.unchanged = 0;
+        this.downX = x;
+        this.downY = y;
+        this.downAt = now;
+        this.maxDistance = 0;
+        this.lastMoveAt = now;
+        push(RrwebEvents.interaction(now, RrwebEvents.TOUCH_START, x, y));
+        return;
+      case "move":
+        if (!this.touchDown) return;
+        this.maxDistance = Math.max(this.maxDistance, Math.hypot(x - this.downX, y - this.downY));
+        if (now - this.lastMoveAt < 50) return;
+        this.lastMoveAt = now;
+        push(RrwebEvents.touchMove(now, x, y));
+        return;
+      default:
+        if (!this.touchDown) return;
+        this.touchDown = false;
+        this.unchanged = 0;
+        this.maxDistance = Math.max(this.maxDistance, Math.hypot(x - this.downX, y - this.downY));
+        push(RrwebEvents.interaction(now, RrwebEvents.TOUCH_END, x, y));
+        if (phase === "up" && this.maxDistance <= 10 && now - this.downAt < 1e3) push(RrwebEvents.interaction(now, RrwebEvents.CLICK, x, y));
+        if (this.capturing) this.captureSoon = true;
+        else this.schedule(TOUCH_SETTLE_MS, true);
+    }
+  }
+  clearTimer() {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  /** Schedules the next capture `delay` ms from now, or keeps an earlier one when `ifSooner`. */
+  schedule(delay, ifSooner = false) {
+    const due = this.now() + delay;
+    if (ifSooner && this.timer && this.timerDue <= due) return;
+    this.clearTimer();
+    this.timerDue = due;
+    const gen = this.generation;
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      if (gen === this.generation) void this.tick();
+    }, delay);
+  }
+  async tick() {
+    if (this.sid === null || !this.foreground || this.capturing) return;
+    if (this.touchDown) {
+      this.schedule(this.intervalMs);
+      return;
+    }
+    this.capturing = true;
+    this.captureSoon = false;
+    const gen = this.generation;
+    let frame = null;
+    try {
+      frame = await this.opts.capturer(await this.opts.captureOptions());
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+    if (gen !== this.generation) return;
+    this.capturing = false;
+    if (frame) this.onFrame(frame, this.now());
+    if (this.sid !== null && this.foreground) this.schedule(this.captureSoon ? TOUCH_SETTLE_MS : this.currentIntervalMs);
+  }
+  onFrame(frame, at) {
+    const id = this.sid;
+    if (id === null || !(frame.width > 0) || !(frame.height > 0) || !frame.base64) return;
+    const sizeChanged = frame.width !== this.viewportWidth || frame.height !== this.viewportHeight;
+    const keyframe = this.needKeyframe || !this.hasKeyframe || sizeChanged;
+    if (!keyframe && this.lastFrame === frame.base64) {
+      this.unchanged++;
+      return;
+    }
+    this.unchanged = 0;
+    this.lastFrame = frame.base64;
+    this.originX = frame.originX ?? 0;
+    this.originY = frame.originY ?? 0;
+    this.viewportWidth = frame.width;
+    this.viewportHeight = frame.height;
+    const url = RrwebEvents.dataUrl(frame.base64);
+    const up = this.opts.uploader;
+    if (!keyframe) return up.push(id, RrwebEvents.frame(at, url));
+    this.needKeyframe = false;
+    up.push(id, RrwebEvents.meta(at, this.opts.href(), frame.width, frame.height));
+    up.push(id, RrwebEvents.fullSnapshot(at, url, frame.width, frame.height));
+    if (!this.hasKeyframe) {
+      this.hasKeyframe = true;
+      for (const [ts, payload] of this.pendingCustom) up.push(id, RrwebEvents.custom(Math.max(ts, at), "guidely", payload));
+      this.pendingCustom = [];
+    }
+  }
+};
+
 // src/core/storage.ts
 var PersistentStore = class {
   constructor(backing, onError = () => {
@@ -2436,7 +2900,7 @@ var PersistentStore = class {
 
 // src/core/client.ts
 var SDK_NAME = "@guidelytech/react-native";
-var SDK_VERSION = "0.11.0";
+var SDK_VERSION = "0.13.0";
 var DEFAULT_API_URL = "https://guidelytech.com";
 var PAGE_SCOPED = /* @__PURE__ */ new Set(["page_load", "url_match", "element_click", "element_visible", "delay"]);
 var CACHED_START_MS = 1500;
@@ -2497,6 +2961,10 @@ var GuidelyClient = class {
     __publicField(this, "lastAudiences", /* @__PURE__ */ new Set());
     __publicField(this, "backgroundedAt", null);
     __publicField(this, "messenger", null);
+    __publicField(this, "replayUploader", null);
+    __publicField(this, "recorder", null);
+    /** Replay decision for the current session (sampled once; forced by start/stopSessionRecording). */
+    __publicField(this, "replayDecision", null);
     __publicField(this, "ui", { steps: [], checklists: [], survey: null, resourceCenterOpen: false, theme: {}, messenger: false });
     __publicField(this, "uiListeners", /* @__PURE__ */ new Set());
     /** Feature flags for this environment: `guidely.flags.isEnabled("new-checkout")`. */
@@ -2602,7 +3070,7 @@ var GuidelyClient = class {
   async bootstrap() {
     const key = this.options.projectId;
     try {
-      await this.store.hydrate([KEYS.anon, KEYS.seen, KEYS.session, KEYS.config(key), KEYS.etag(key), KEYS.state(key), KEYS.user(key), KEYS.queue(key), KEYS.outbox(key), KEYS.conversations(key), appVersionKey(key)]);
+      await this.store.hydrate([KEYS.anon, KEYS.seen, KEYS.session, KEYS.config(key), KEYS.etag(key), KEYS.state(key), KEYS.user(key), KEYS.queue(key), KEYS.outbox(key), KEYS.conversations(key), appVersionKey(key), LAUNCHER_PLACEMENT_KEY]);
       if (this.destroyed) return;
       this.anonymousId = this.store.get(KEYS.anon) || "";
       this.hadIdentity = !!this.anonymousId;
@@ -2648,6 +3116,7 @@ var GuidelyClient = class {
       if (this.destroyed) return;
       this.isReady = true;
       if (this.config) this.emitter.emit("ready", this.config);
+      this.syncReplay();
       this.notify();
       this.evaluate("ready");
     } catch (err) {
@@ -2674,6 +3143,7 @@ var GuidelyClient = class {
         this.syncMessenger();
         if (this.hydrated) this.checkLaunch();
         this.emitter.emit("config", this.config);
+        this.syncReplay();
         this.log("config loaded", this.config.configVersion, `${this.config.guides.length} guides`);
         return true;
       }
@@ -2726,6 +3196,7 @@ var GuidelyClient = class {
       void this.outbox?.flush();
       void this.store.flush();
       void this.flags.flush();
+      this.recorder?.pause();
       this.messenger?.setForeground(false);
     } else if (state === "active" && this.backgroundedAt !== null) {
       this.messenger?.setForeground(true);
@@ -2735,7 +3206,10 @@ var GuidelyClient = class {
         this.session = newSession();
         this.persistSession();
         this.firedDelays.clear();
+        this.recorder?.stop(false);
       }
+      this.recorder?.resume();
+      this.syncReplay();
       this.cameToForeground();
       void this.flags.refresh();
       if (Date.now() - this.configFetchedAt > this.options.configRefreshMs && this.api.health.canSend()) void this.refresh();
@@ -2758,6 +3232,9 @@ var GuidelyClient = class {
     this.queued = [];
     this.messenger?.destroy();
     this.messenger = null;
+    this.recorder?.stop(!this.analyticsEnabled());
+    this.recorder = null;
+    this.replayUploader?.destroy();
     this.visibilityWatchers.forEach((stop) => stop());
     this.visibilityWatchers.clear();
     this.timers.forEach((t) => clearTimeout(t));
@@ -2872,6 +3349,7 @@ var GuidelyClient = class {
       this.store.set(KEYS.anon, this.anonymousId);
       this.state = emptyState();
       this.persistState();
+      this.recorder?.stop(false);
       this.session = newSession();
       this.persistSession();
       this.lastAudiences = /* @__PURE__ */ new Set();
@@ -2879,6 +3357,7 @@ var GuidelyClient = class {
       this.firstVisit = true;
       this.exposures.clear();
       this.syncFlagAttributes();
+      this.syncReplay();
       this.emitter.emit("identify", { userId: null, anonymousId: this.anonymousId });
       this.notify();
       if (this.isReady) this.evaluate("identify");
@@ -2893,6 +3372,7 @@ var GuidelyClient = class {
     this.whenHydrated(() => {
       if (consent === "denied") this.queue?.clear();
       else if (consent === "granted") void this.queue?.flush();
+      this.syncReplay();
     });
   }
   analyticsEnabled() {
@@ -2921,6 +3401,7 @@ var GuidelyClient = class {
     const locale = extra.guideId ? this.guideLocales.get(extra.guideId) : void 0;
     if (locale) event.properties = { ...event.properties ?? {}, locale };
     this.queue.enqueue(event);
+    this.recorder?.addGuidelyEvent(name, event.customName, event.guideId);
     this.emitter.emit("track", event);
     return event;
   }
@@ -2958,12 +3439,13 @@ var GuidelyClient = class {
       }
       this.screenName = name;
       this.targets.setScreen(name);
+      if (changed) this.recorder?.onScreen();
       if (changed) this.syncFlagAttributes();
       const url = this.currentUrl();
       if (changed) {
         this.screenStartedAt = Date.now();
         this.screenLeft = this.backgroundedAt !== null;
-        if (this.pageviewsOn()) this.enqueue("page_view", { properties: { ...properties, path: url, screen: name, platform: this.bridge.device.platform } });
+        if (this.pageviewsOn()) this.enqueue("page_view", { properties: { ...properties, path: url, screen: name, ...this.deviceProperties() } });
       }
       this.completeChecklistTasksBy("url_visited", url);
       this.active?.controller.resume();
@@ -2992,6 +3474,112 @@ var GuidelyClient = class {
     if (this.isReady) this.evaluate("click", { targetId });
   }
   // ---------------------------------------------------------------------------
+  // Session replay
+  // ---------------------------------------------------------------------------
+  replaySettings() {
+    const r = this.config?.settings?.replay;
+    if (!r?.enabled || !this.options.sessionReplay?.enabled || !this.bridge.capturer) return null;
+    return r;
+  }
+  /** Reconciles recording with config, consent, readiness, the session and its sample decision. Idempotent. */
+  syncReplay() {
+    if (this.destroyed || !this.hydrated) return;
+    const r = this.isReady && this.analyticsEnabled() ? this.replaySettings() : null;
+    const id = this.session.id;
+    if (r && this.replayDecision?.sessionId !== id) {
+      this.replayDecision = { sessionId: id, record: rolloutBucket(id, "replay") < (r.sampleRate ?? 100) };
+      this.log(`replay ${this.replayDecision.record ? "sampled" : "not sampled"} for session ${id}`);
+    }
+    if (!r || !this.replayDecision?.record) {
+      if (this.recorder?.isRecording) this.recorder.stop(!this.analyticsEnabled());
+      return;
+    }
+    const rec = this.recorder ?? this.createRecorder();
+    if (rec && rec.sessionId !== id) {
+      this.log(`recording session ${id}`);
+      rec.start(id);
+    }
+  }
+  createRecorder() {
+    const capturer = this.bridge.capturer;
+    if (!capturer) return null;
+    const uploader = this.replayUploader ?? (this.replayUploader = new ReplayUploader({
+      url: () => this.api.url("/replay"),
+      fetch: () => this.options.fetch ?? (typeof fetch === "function" ? fetch : null),
+      health: this.api.health,
+      meta: () => {
+        const rec2 = this.recorder;
+        return {
+          anonymousId: this.anonymousId,
+          userId: this.user?.id || null,
+          ...this.collectUrls() && this.screenName ? { url: this.currentUrl() } : {},
+          device: { type: this.bridge.device.deviceType, os: this.bridge.device.platform },
+          ...rec2 && rec2.viewportWidth > 0 && rec2.viewportHeight > 0 ? { viewport: { width: rec2.viewportWidth, height: rec2.viewportHeight } } : {},
+          sdk: { name: SDK_NAME, version: SDK_VERSION }
+        };
+      },
+      onDisabled: (sid) => {
+        if (sid !== this.session.id) return;
+        this.log(`replay disabled by the server for session ${sid}`);
+        this.replayDecision = { sessionId: sid, record: false };
+        this.recorder?.stop(true);
+      },
+      log: (m) => this.log(m)
+    }));
+    const opts = this.options.sessionReplay ?? {};
+    const rec = new SessionRecorder({
+      capturer,
+      uploader,
+      intervalMs: opts.captureIntervalMs ?? 1e3,
+      captureOptions: () => this.replayCaptureOptions(),
+      href: () => this.currentUrl(),
+      onError: (err) => this.reportError(err)
+    });
+    if (this.backgroundedAt !== null) rec.pause();
+    this.recorder = rec;
+    return rec;
+  }
+  async replayCaptureOptions() {
+    const r = this.config?.settings?.replay;
+    const opts = this.options.sessionReplay ?? {};
+    const ids = new Set((r?.blockSelectors ?? []).map((sel) => guidelyIdFromSelector(sel)).filter((id) => !!id));
+    const rects = await Promise.all(Array.from(ids, (id) => this.targets.measure(id)));
+    return { maskAllText: !!opts.maskAllText || !!r?.maskAllText, maskAllImages: !!opts.maskAllImages, blockRects: rects.filter((rect) => !!rect) };
+  }
+  /**
+   * Records this session even when it was not sampled (still needs `sessionReplay.enabled`, replay
+   * enabled for the project, analytics consent and the native replay module). Sticks until the session ends.
+   */
+  startSessionRecording() {
+    this.whenHydrated(() => {
+      this.replayDecision = { sessionId: this.session.id, record: true };
+      this.syncReplay();
+    });
+  }
+  /** Stops recording for the rest of this session; what was recorded is uploaded. */
+  stopSessionRecording() {
+    this.whenHydrated(() => {
+      this.replayDecision = { sessionId: this.session.id, record: false };
+      this.recorder?.stop(false);
+    });
+  }
+  /** True while this session is being recorded. */
+  isRecording() {
+    return !!this.recorder?.isRecording;
+  }
+  /** The current analytics session id (also the replay id). */
+  getSessionId() {
+    return this.session.id;
+  }
+  /** True when touches should be passed to {@link recordTouch}. */
+  isRecordingTouches() {
+    return !!this.recorder?.isRecording;
+  }
+  /** A primary-pointer touch on the app, in window points (the provider's touch observer calls this). */
+  recordTouch(phase, x, y) {
+    this.recorder?.touch(phase, x, y);
+  }
+  // ---------------------------------------------------------------------------
   // Product analytics (autocapture)
   // ---------------------------------------------------------------------------
   captureAllowed() {
@@ -3038,7 +3626,7 @@ var GuidelyClient = class {
     }
     if (this.destroyed) return;
     const platform = this.bridge.device.platform;
-    const maskAll = !!this.config?.settings?.replay?.maskAllText;
+    const maskAll = !!this.config?.settings?.replay?.maskAllText || !!this.options.sessionReplay?.maskAllText;
     const eventUrl = this.collectUrls() && url ? url : void 0;
     if (on.clicks && el) this.enqueue("click", { url: eventUrl, properties: { ...tapProperties(el, tap.x, tap.y, platform, maskAll) } });
     const count = this.rage.add(tap.x, tap.y, t);
@@ -3128,7 +3716,7 @@ var GuidelyClient = class {
       if (this.screenName && this.screenLeft) {
         this.screenStartedAt = Date.now();
         this.screenLeft = false;
-        if (this.pageviewsOn() && this.autocaptureOn("pageLeave")) this.enqueue("page_view", { properties: { path: this.currentUrl(), screen: this.screenName, platform: this.bridge.device.platform, resumed: true } });
+        if (this.pageviewsOn() && this.autocaptureOn("pageLeave")) this.enqueue("page_view", { properties: { path: this.currentUrl(), screen: this.screenName, ...this.deviceProperties(), resumed: true } });
       }
     } catch (err) {
       this.reportError(err);
@@ -3890,6 +4478,14 @@ var GuidelyClient = class {
   getMessenger() {
     return this.messenger;
   }
+  /** Where the visitor dragged the messenger bubble on this device, or null to use the configured spot. */
+  getMessengerLauncherPlacement() {
+    return parsePlacement(this.store.get(LAUNCHER_PLACEMENT_KEY));
+  }
+  /** Remembers the bubble's spot on this device (in memory only when no `storage` was passed). */
+  setMessengerLauncherPlacement(placement) {
+    this.store.set(LAUNCHER_PLACEMENT_KEY, serializePlacement(placement));
+  }
   /** Opens the Scout messenger, optionally on a tab. No-op when Scout is off for this platform. */
   openMessenger(tab) {
     this.whenHydrated(() => this.messenger?.open(tab));
@@ -3920,6 +4516,11 @@ var GuidelyClient = class {
   onFlagsChange(cb) {
     return this.flags.subscribe(cb);
   }
+  /** Device facts on every screen view, read by the Pages devices / browsers breakdowns. */
+  deviceProperties() {
+    const d = this.bridge.device;
+    return { platform: d.platform, deviceType: d.deviceType, os: d.platform };
+  }
   /** Attributes flags are evaluated with: identity, traits, account, audiences, screen and device. */
   flagContext() {
     const d = this.bridge.device;
@@ -4718,8 +5319,8 @@ var styles3 = StyleSheet3.create({
 });
 
 // src/ui/Messenger.tsx
-import { Fragment as Fragment2, useCallback, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { ActivityIndicator, Keyboard, Modal as Modal2, Platform as Platform2, Pressable as Pressable4, ScrollView as ScrollView3, StyleSheet as StyleSheet4, Text as Text4, TextInput, View as View4 } from "react-native";
+import { Fragment as Fragment2, useCallback, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { AccessibilityInfo, ActivityIndicator, Animated, Easing, Keyboard, Modal as Modal2, PanResponder, Platform as Platform2, Pressable as Pressable4, ScrollView as ScrollView3, StyleSheet as StyleSheet4, Text as Text4, TextInput, View as View4 } from "react-native";
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function useMessenger(store) {
   return useSyncExternalStore2(
@@ -4748,14 +5349,89 @@ function ago(iso) {
   if (s < 86400) return `${Math.floor(s / 3600)}h`;
   return `${Math.floor(s / 86400)}d`;
 }
-function MessengerLauncher({ store, palette: p, style }) {
+var LAUNCHER_SIZE = 54;
+function useReduceMotion() {
+  const [on, setOn] = useState3(false);
+  useEffect3(() => {
+    let live = true;
+    AccessibilityInfo.isReduceMotionEnabled?.().then((v) => live && setOn(v)).catch(() => {
+    });
+    const sub = AccessibilityInfo.addEventListener?.("reduceMotionChanged", setOn);
+    return () => {
+      live = false;
+      sub?.remove();
+    };
+  }, []);
+  return on;
+}
+function MessengerLauncher({ store, client, palette: p, style, frame, defaultSide }) {
   const snap = useMessenger(store);
+  const reduceMotion = useReduceMotion();
+  const [placement, setPlacement] = useState3(() => client.getMessengerLauncherPlacement());
+  const pan = useRef2(new Animated.ValueXY()).current;
+  const offset = useRef2({ x: 0, y: 0 });
+  const dragging = useRef2(false);
+  const live = useRef2({ frame, defaultSide, reduceMotion });
+  live.current = { frame, defaultSide, reduceMotion };
+  const { width, height, size, defaultBottom } = frame;
+  const { top, bottom, left, right } = frame.insets;
+  useLayoutEffect(() => {
+    if (dragging.current) return;
+    const f = live.current.frame;
+    const anchor = placementPoint(f, { side: defaultSide, fraction: 0 });
+    const at = placement ? placementPoint(f, placement) : anchor;
+    offset.current = { x: at.x - anchor.x, y: at.y - anchor.y };
+    pan.setValue(offset.current);
+  }, [pan, placement, defaultSide, width, height, size, defaultBottom, top, bottom, left, right]);
+  const responder = useMemo3(() => {
+    const moved = (g) => Math.hypot(g.dx, g.dy) > LAUNCHER_DRAG_THRESHOLD;
+    const anchor = () => placementPoint(live.current.frame, { side: live.current.defaultSide, fraction: 0 });
+    let start = { x: 0, y: 0 };
+    const follow = (g) => {
+      const a = anchor();
+      const at = clampToSafeArea(live.current.frame, { x: a.x + start.x + g.dx, y: a.y + start.y + g.dy });
+      return { x: at.x - a.x, y: at.y - a.y };
+    };
+    const drop = (g) => {
+      const a = anchor();
+      const d = follow(g);
+      const next = snapPlacement(live.current.frame, { x: a.x + d.x, y: a.y + d.y });
+      const at = placementPoint(live.current.frame, next);
+      const to = { x: at.x - a.x, y: at.y - a.y };
+      offset.current = to;
+      client.setMessengerLauncherPlacement(next);
+      const done = ({ finished }) => {
+        if (finished) dragging.current = false;
+        setPlacement(next);
+      };
+      if (live.current.reduceMotion) {
+        pan.setValue(to);
+        done({ finished: true });
+      } else Animated.timing(pan, { toValue: to, duration: 300, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start(done);
+    };
+    return PanResponder.create({
+      // Taps stay with the Pressable; only a real drag is taken (which cancels its press).
+      onMoveShouldSetPanResponderCapture: (_, g) => moved(g),
+      onMoveShouldSetPanResponder: (_, g) => moved(g),
+      onPanResponderGrant: () => {
+        dragging.current = true;
+        start = offset.current;
+        pan.stopAnimation((v) => {
+          if (Number.isFinite(v?.x) && Number.isFinite(v?.y)) start = v;
+        });
+      },
+      onPanResponderMove: (_, g) => pan.setValue(follow(g)),
+      onPanResponderRelease: (_, g) => drop(g),
+      onPanResponderTerminate: (_, g) => drop(g),
+      onPanResponderTerminationRequest: () => false
+    });
+  }, [client, pan]);
   if (snap.open) return null;
   const label = snap.unread ? `Open ${snap.config.name}, ${snap.unread} unread` : `Open ${snap.config.name}`;
-  return /* @__PURE__ */ jsxs3(Pressable4, { accessibilityRole: "button", accessibilityLabel: label, onPress: () => store.open(), style: ({ pressed }) => [styles4.launcher, style, { backgroundColor: p.primary, opacity: pressed ? 0.85 : 1 }], children: [
+  return /* @__PURE__ */ jsx5(Animated.View, { ...responder.panHandlers, style: [styles4.launcherWrap, style, { transform: pan.getTranslateTransform() }], children: /* @__PURE__ */ jsxs3(Pressable4, { accessibilityRole: "button", accessibilityLabel: label, onPress: () => !dragging.current && store.open(), style: ({ pressed }) => [styles4.launcher, { backgroundColor: p.primary, opacity: pressed ? 0.85 : 1 }], children: [
     /* @__PURE__ */ jsx5(Text4, { style: [styles4.launcherIcon, { color: p.onPrimary }], children: "\u{1F4AC}" }),
     snap.unread ? /* @__PURE__ */ jsx5(View4, { style: styles4.badge, children: /* @__PURE__ */ jsx5(Text4, { style: styles4.badgeText, children: snap.unread }) }) : null
-  ] });
+  ] }) });
 }
 function MessengerSheet({ store, client, palette: p, topInset, bottomInset }) {
   const snap = useMessenger(store);
@@ -5000,7 +5676,8 @@ function Article({ article, palette: p, client }) {
 }
 var styles4 = StyleSheet4.create({
   flex: { flex: 1 },
-  launcher: { position: "absolute", width: 54, height: 54, borderRadius: 27, alignItems: "center", justifyContent: "center", elevation: 8, shadowColor: "#000", shadowOpacity: 0.22, shadowRadius: 12, shadowOffset: { width: 0, height: 4 } },
+  launcherWrap: { position: "absolute", width: LAUNCHER_SIZE, height: LAUNCHER_SIZE, elevation: 8 },
+  launcher: { width: LAUNCHER_SIZE, height: LAUNCHER_SIZE, borderRadius: 27, alignItems: "center", justifyContent: "center", elevation: 8, shadowColor: "#000", shadowOpacity: 0.22, shadowRadius: 12, shadowOffset: { width: 0, height: 4 } },
   launcherIcon: { fontSize: 24 },
   badge: { position: "absolute", top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 10, backgroundColor: "#dc2626", alignItems: "center", justifyContent: "center", paddingHorizontal: 5, borderWidth: 2, borderColor: "#ffffff" },
   badgeText: { color: "#ffffff", fontSize: 11, fontWeight: "800" },
@@ -5210,7 +5887,7 @@ var styles5 = StyleSheet5.create({
 
 // src/ui/StepLayer.tsx
 import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
-import { AccessibilityInfo, Animated, Easing, Pressable as Pressable6, StyleSheet as StyleSheet7, View as View7 } from "react-native";
+import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated2, Easing as Easing2, Pressable as Pressable6, StyleSheet as StyleSheet7, View as View7 } from "react-native";
 
 // src/core/position.ts
 var MARGIN = 12;
@@ -5233,20 +5910,20 @@ function positionCard(target, size, viewport, insets, placement, offset) {
   const order = rawSide === "auto" ? ["bottom", "top"] : [rawSide, opposite[rawSide], "bottom", "top"];
   const space = { top: target.y - insets.top, bottom: viewport.height - insets.bottom - (target.y + target.height) };
   const side = order.find(fits) ?? (space.bottom >= space.top ? "bottom" : "top");
-  const clamp2 = (v, min, max) => Math.max(min, Math.min(max, v));
+  const clamp3 = (v, min, max) => Math.max(min, Math.min(max, v));
   if (side === "top" || side === "bottom") {
     const cx = target.x + target.width / 2;
     let x2 = align === "start" ? target.x : align === "end" ? target.x + target.width - size.width : cx - size.width / 2;
-    x2 = clamp2(x2, insets.left + MARGIN, Math.max(insets.left + MARGIN, viewport.width - insets.right - MARGIN - size.width));
+    x2 = clamp3(x2, insets.left + MARGIN, Math.max(insets.left + MARGIN, viewport.width - insets.right - MARGIN - size.width));
     let y2 = side === "bottom" ? target.y + target.height + offset : target.y - offset - size.height;
-    y2 = clamp2(y2, insets.top + MARGIN, Math.max(insets.top + MARGIN, viewport.height - insets.bottom - MARGIN - size.height));
-    return { x: x2, y: y2, side, arrow: clamp2(cx - x2, ARROW_INSET, size.width - ARROW_INSET) };
+    y2 = clamp3(y2, insets.top + MARGIN, Math.max(insets.top + MARGIN, viewport.height - insets.bottom - MARGIN - size.height));
+    return { x: x2, y: y2, side, arrow: clamp3(cx - x2, ARROW_INSET, size.width - ARROW_INSET) };
   }
   const cy = target.y + target.height / 2;
   let y = align === "start" ? target.y : align === "end" ? target.y + target.height - size.height : cy - size.height / 2;
-  y = clamp2(y, insets.top + MARGIN, Math.max(insets.top + MARGIN, viewport.height - insets.bottom - MARGIN - size.height));
+  y = clamp3(y, insets.top + MARGIN, Math.max(insets.top + MARGIN, viewport.height - insets.bottom - MARGIN - size.height));
   const x = side === "right" ? target.x + target.width + offset : target.x - offset - size.width;
-  return { x, y, side, arrow: clamp2(cy - y, ARROW_INSET, size.height - ARROW_INSET) };
+  return { x, y, side, arrow: clamp3(cy - y, ARROW_INSET, size.height - ARROW_INSET) };
 }
 
 // src/ui/StepCard.tsx
@@ -5342,10 +6019,10 @@ function useTargetRect(client, targetId, origin) {
   return rect;
 }
 function useFadeIn(key) {
-  const opacity = useRef3(new Animated.Value(0)).current;
+  const opacity = useRef3(new Animated2.Value(0)).current;
   useEffect5(() => {
     opacity.setValue(0);
-    Animated.timing(opacity, { toValue: 1, duration: 160, easing: Easing.out(Easing.quad), useNativeDriver: true }).start();
+    Animated2.timing(opacity, { toValue: 1, duration: 160, easing: Easing2.out(Easing2.quad), useNativeDriver: true }).start();
   }, [key, opacity]);
   return opacity;
 }
@@ -5357,22 +6034,22 @@ function StepLayer({ view, client, palette: p, geometry }) {
   const cardWidth = Math.min(viewport.width - 32, step.width ?? 340);
   useEffect5(() => {
     if (step.type === "hotspot" && !view.expanded) return;
-    AccessibilityInfo.announceForAccessibility?.(announcement(view));
+    AccessibilityInfo2.announceForAccessibility?.(announcement(view));
   }, [view.key, view.expanded]);
   const backdrop = (children) => /* @__PURE__ */ jsx8(Pressable6, { accessible: false, style: [StyleSheet7.absoluteFill, { backgroundColor: p.overlay }], onPress: () => client.backdropPressed(view.guide.id), children });
   const anchored = !view.asModal && ["tooltip", "popover", "spotlight", "hotspot"].includes(step.type);
   if (!anchored && step.type === "banner") {
     const top = step.position.startsWith("top");
-    return /* @__PURE__ */ jsx8(Animated.View, { pointerEvents: "box-none", style: [styles7.banner, top ? { top: insets.top + 8 } : { bottom: insets.bottom + 8 }, { left: insets.left + 8, right: insets.right + 8, opacity }], children: /* @__PURE__ */ jsx8(StepCard, { view, client, palette: p, width: viewport.width - insets.left - insets.right - 16, compact: true }) });
+    return /* @__PURE__ */ jsx8(Animated2.View, { pointerEvents: "box-none", style: [styles7.banner, top ? { top: insets.top + 8 } : { bottom: insets.bottom + 8 }, { left: insets.left + 8, right: insets.right + 8, opacity }], children: /* @__PURE__ */ jsx8(StepCard, { view, client, palette: p, width: viewport.width - insets.left - insets.right - 16, compact: true }) });
   }
   if (!anchored && step.type === "slideout") {
     const wide = viewport.width >= 600;
     const right = !step.position.endsWith("left");
     const width = wide ? Math.min(380, cardWidth) : viewport.width - insets.left - insets.right - 24;
-    return /* @__PURE__ */ jsx8(Animated.View, { pointerEvents: "box-none", style: [styles7.abs, { bottom: insets.bottom + 12, opacity }, wide ? right ? { right: insets.right + 16 } : { left: insets.left + 16 } : { left: insets.left + 12 }], children: /* @__PURE__ */ jsx8(StepCard, { view, client, palette: p, width }) });
+    return /* @__PURE__ */ jsx8(Animated2.View, { pointerEvents: "box-none", style: [styles7.abs, { bottom: insets.bottom + 12, opacity }, wide ? right ? { right: insets.right + 16 } : { left: insets.left + 16 } : { left: insets.left + 12 }], children: /* @__PURE__ */ jsx8(StepCard, { view, client, palette: p, width }) });
   }
   if (!anchored) {
-    return /* @__PURE__ */ jsxs6(Animated.View, { pointerEvents: "box-none", style: [StyleSheet7.absoluteFill, styles7.center, { opacity }], children: [
+    return /* @__PURE__ */ jsxs6(Animated2.View, { pointerEvents: "box-none", style: [StyleSheet7.absoluteFill, styles7.center, { opacity }], children: [
       step.showOverlay ? backdrop() : null,
       /* @__PURE__ */ jsx8(StepCard, { view, client, palette: p, width: Math.min(viewport.width - 40, step.width ?? 360) })
     ] });
@@ -5397,7 +6074,7 @@ function StepLayer({ view, client, palette: p, geometry }) {
       [hole.x, hole.y + hole.height - r, -r, -2 * r],
       [hole.x + hole.width - r, hole.y + hole.height - r, -2 * r, -2 * r]
     ];
-    return /* @__PURE__ */ jsxs6(Animated.View, { pointerEvents: "box-none", style: [StyleSheet7.absoluteFill, { opacity }], children: [
+    return /* @__PURE__ */ jsxs6(Animated2.View, { pointerEvents: "box-none", style: [StyleSheet7.absoluteFill, { opacity }], children: [
       /* @__PURE__ */ jsx8(Pressable6, { accessible: false, onPress: press, style: [styles7.abs, shade, { left: 0, right: 0, top: 0, height: Math.max(0, hole.y) }] }),
       /* @__PURE__ */ jsx8(Pressable6, { accessible: false, onPress: press, style: [styles7.abs, shade, { left: 0, right: 0, top: hole.y + hole.height, bottom: 0 }] }),
       /* @__PURE__ */ jsx8(Pressable6, { accessible: false, onPress: press, style: [styles7.abs, shade, { left: 0, width: Math.max(0, hole.x), top: hole.y, height: hole.height }] }),
@@ -5407,7 +6084,7 @@ function StepLayer({ view, client, palette: p, geometry }) {
       /* @__PURE__ */ jsx8(Anchored, { view, client, palette: p, geometry, rect: hole, width: cardWidth })
     ] });
   }
-  return /* @__PURE__ */ jsxs6(Animated.View, { pointerEvents: "box-none", style: [StyleSheet7.absoluteFill, { opacity }], children: [
+  return /* @__PURE__ */ jsxs6(Animated2.View, { pointerEvents: "box-none", style: [StyleSheet7.absoluteFill, { opacity }], children: [
     step.showOverlay ? backdrop() : null,
     /* @__PURE__ */ jsx8(Anchored, { view, client, palette: p, geometry, rect, width: cardWidth })
   ] });
@@ -5429,11 +6106,11 @@ function Arrow({ side, at, color, border }) {
   return /* @__PURE__ */ jsx8(View7, { pointerEvents: "none", style: [styles7.abs, styles7.arrow, place, { backgroundColor: color, borderColor: border }] });
 }
 function Hotspot({ x, y, size, pulse, color, onPress, label }) {
-  const scale = useRef3(new Animated.Value(0)).current;
+  const scale = useRef3(new Animated2.Value(0)).current;
   const [reduceMotion, setReduceMotion] = useState5(false);
   useEffect5(() => {
     let alive = true;
-    AccessibilityInfo.isReduceMotionEnabled?.().then((v) => alive && setReduceMotion(v), () => {
+    AccessibilityInfo2.isReduceMotionEnabled?.().then((v) => alive && setReduceMotion(v), () => {
     });
     return () => {
       alive = false;
@@ -5441,13 +6118,13 @@ function Hotspot({ x, y, size, pulse, color, onPress, label }) {
   }, []);
   useEffect5(() => {
     if (!pulse || reduceMotion) return;
-    const loop = Animated.loop(Animated.timing(scale, { toValue: 1, duration: 1400, easing: Easing.out(Easing.ease), useNativeDriver: true }));
+    const loop = Animated2.loop(Animated2.timing(scale, { toValue: 1, duration: 1400, easing: Easing2.out(Easing2.ease), useNativeDriver: true }));
     loop.start();
     return () => loop.stop();
   }, [pulse, reduceMotion, scale]);
   return /* @__PURE__ */ jsxs6(Pressable6, { accessibilityRole: "button", accessibilityLabel: label, onPress, hitSlop: 14, style: [styles7.abs, { left: x, top: y, width: size, height: size }], children: [
     pulse && !reduceMotion ? /* @__PURE__ */ jsx8(
-      Animated.View,
+      Animated2.View,
       {
         pointerEvents: "none",
         style: [styles7.abs, { width: size, height: size, borderRadius: size / 2, backgroundColor: color, opacity: scale.interpolate({ inputRange: [0, 1], outputRange: [0.55, 0] }), transform: [{ scale: scale.interpolate({ inputRange: [0, 1], outputRange: [1, 2.6] }) }] }]
@@ -5466,7 +6143,7 @@ var styles7 = StyleSheet7.create({
 // src/ui/Survey.tsx
 import { useEffect as useEffect6, useState as useState6 } from "react";
 import {
-  AccessibilityInfo as AccessibilityInfo2,
+  AccessibilityInfo as AccessibilityInfo3,
   KeyboardAvoidingView,
   Platform as Platform4,
   Pressable as Pressable7,
@@ -5489,7 +6166,7 @@ function Survey({
   useEffect6(() => {
     setAnswers({});
     setError("");
-    AccessibilityInfo2.announceForAccessibility?.(
+    AccessibilityInfo3.announceForAccessibility?.(
       `Survey: ${config?.questions[0]?.title ?? view.guide.name}`
     );
   }, [view.key]);
@@ -5872,6 +6549,7 @@ function GuidelyOverlay({ client, insets: insetsProp, launcherOffset }) {
   const unread = showRcLauncher ? client.getUnreadAnnouncements() : 0;
   const messengerLeft = messenger?.getSnapshot().config.launcher.position === "bottom-left";
   const checklistOnSameSide = ui.checklists.some((c) => c.guide.config.checklist?.position === "bottom-left" === messengerLeft) && client.options.showChecklistLauncher !== false;
+  const messengerBottom = insets.bottom + launcherOffset + (checklistOnSameSide ? 56 : 0);
   return /* @__PURE__ */ jsxs8(View9, { ref, collapsable: false, pointerEvents: "box-none", style: StyleSheet9.absoluteFill, onLayout: measureOrigin, children: [
     ui.checklists.map((c) => /* @__PURE__ */ jsx10(Checklist, { view: c, client, palette: palette(client.themeFor(c.guide), scheme), geometry, showLauncher: client.options.showChecklistLauncher !== false, launcherBottom: launcherOffset }, c.guide.id)),
     showRcLauncher ? /* @__PURE__ */ jsxs8(
@@ -5887,7 +6565,17 @@ function GuidelyOverlay({ client, insets: insetsProp, launcherOffset }) {
         ]
       }
     ) : null,
-    messenger && client.options.showMessengerLauncher !== false ? /* @__PURE__ */ jsx10(MessengerLauncher, { store: messenger, palette: basePalette, style: [messengerLeft ? { left: insets.left + 16 } : { right: insets.right + 16 }, { bottom: insets.bottom + launcherOffset + (checklistOnSameSide ? 56 : 0) }] }) : null,
+    messenger && client.options.showMessengerLauncher !== false ? /* @__PURE__ */ jsx10(
+      MessengerLauncher,
+      {
+        store: messenger,
+        client,
+        palette: basePalette,
+        style: [messengerLeft ? { left: insets.left + 16 } : { right: insets.right + 16 }, { bottom: messengerBottom }],
+        frame: { width, height, insets, size: LAUNCHER_SIZE, defaultBottom: messengerBottom },
+        defaultSide: messengerLeft ? "left" : "right"
+      }
+    ) : null,
     ui.survey ? /* @__PURE__ */ jsx10(Survey, { view: ui.survey, client, palette: palette(client.themeFor(ui.survey.guide), scheme), geometry }) : null,
     ui.steps.map((s) => /* @__PURE__ */ jsx10(StepLayer, { view: s, client, palette: palette(client.themeFor(s.guide), scheme, s.guide.config.appearance), geometry }, s.key)),
     messenger ? /* @__PURE__ */ jsx10(MessengerSheet, { store: messenger, client, palette: basePalette, topInset: insets.top, bottomInset: insets.bottom }) : /* @__PURE__ */ jsx10(ResourceCenter, { client, palette: basePalette, open: ui.resourceCenterOpen, topInset: insets.top, bottomInset: insets.bottom })
@@ -5907,8 +6595,9 @@ function rcLauncherLabel(client) {
 
 // src/ui/Autocapture.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
+var GUIDELY_MASK_NATIVE_ID = "guidely-mask";
 function GuidelyMask({ children, ...rest }) {
-  return /* @__PURE__ */ jsx11(View10, { ...rest, children });
+  return /* @__PURE__ */ jsx11(View10, { collapsable: false, ...rest, nativeID: GUIDELY_MASK_NATIVE_ID, children });
 }
 var RESOLVE = {
   isIgnored: (type) => type === GuidelyOverlay,
@@ -5919,6 +6608,18 @@ function useTapObserver(client) {
   clientRef.current = client;
   return useMemo5(() => {
     const tracker = new TapTracker();
+    let replayPointer = null;
+    const replay = (phase, e) => {
+      const c = clientRef.current;
+      const n = e.nativeEvent;
+      if (!c?.isRecordingTouches()) return void (replayPointer = null);
+      if (phase === "down") {
+        if (replayPointer !== null) return;
+        replayPointer = n.identifier;
+      } else if (n.identifier !== replayPointer) return;
+      if (phase === "up" || phase === "cancel") replayPointer = null;
+      c.recordTouch(phase, n.pageX, n.pageY);
+    };
     const guard = (fn) => (e) => {
       try {
         fn(e);
@@ -5928,12 +6629,17 @@ function useTapObserver(client) {
     };
     return {
       onTouchStartCapture: guard((e) => {
+        replay("down", e);
         const n = e.nativeEvent;
         if (!clientRef.current?.isTapCaptureOn()) return tracker.cancel();
         tracker.begin(n.pageX, n.pageY, Date.now(), Array.isArray(n.touches) ? n.touches.length : 1, n.identifier);
       }),
-      onTouchMoveCapture: guard((e) => tracker.move(e.nativeEvent.pageX, e.nativeEvent.pageY, e.nativeEvent.identifier)),
+      onTouchMoveCapture: guard((e) => {
+        replay("move", e);
+        tracker.move(e.nativeEvent.pageX, e.nativeEvent.pageY, e.nativeEvent.identifier);
+      }),
       onTouchEndCapture: guard((e) => {
+        replay("up", e);
         const n = e.nativeEvent;
         const tap = tracker.end(n.pageX, n.pageY, Date.now(), n.identifier);
         const c = clientRef.current;
@@ -5941,7 +6647,10 @@ function useTapObserver(client) {
         const r = resolveTapTarget(e, RESOLVE);
         if (!r.ignored) c.recordTap({ x: tap.x, y: tap.y, t: Date.now(), element: r.element, hit: r.hit });
       }),
-      onTouchCancelCapture: guard(() => tracker.cancel())
+      onTouchCancelCapture: guard((e) => {
+        replay("cancel", e);
+        tracker.cancel();
+      })
     };
   }, []);
 }
@@ -6035,9 +6744,15 @@ function defaultBridge(appVersion) {
     },
     openExternal: (url) => void Linking.openURL(url).catch(() => {
     }),
-    windowSize: () => Dimensions.get("window")
+    windowSize: () => Dimensions.get("window"),
+    capturer: nativeCapturer()
   };
 }
+function nativeCapturer() {
+  const mod = NativeModules.GuidelyReplay;
+  if (!mod || typeof mod.capture !== "function") return void 0;
+  return (options) => mod.capture(options);
+}
 function GuidelyProvider({ children, user, insets, launcherOffset = 72, flagsPayload, flagAttributes, ...options }) {
   const [client, setClient] = useState8(null);
   const optionsRef = useRef7(options);
@@ -6107,7 +6822,7 @@ function GuidelyProvider({ children, user, insets, launcherOffset = 72, flagsPay
   const flags = useMemo6(() => ({ client: client?.flags ?? null, bootstrap }), [client, bootstrap]);
   const tapObserver = useTapObserver(client);
   return /* @__PURE__ */ jsx13(GuidelyContext.Provider, { value: client, children: /* @__PURE__ */ jsxs9(FlagsContext.Provider, { value: flags, children: [
-    options.autocapture === false ? children : /* @__PURE__ */ jsx13(View12, { style: styles10.root, ...tapObserver, children }),
+    options.autocapture === false && !options.sessionReplay?.enabled ? children : /* @__PURE__ */ jsx13(View12, { style: styles10.root, ...tapObserver, children }),
     client ? /* @__PURE__ */ jsx13(GuidelyOverlay, { client, insets, launcherOffset }) : null
   ] }) });
 }
@@ -6127,6 +6842,9 @@ var NOOP_RESULTS = {
   getMessenger: null,
   isGuideCompleted: false,
   isClientReady: false,
+  isRecording: false,
+  isRecordingTouches: false,
+  getSessionId: "",
   getScreen: "",
   on: () => {
   },
@@ -6260,8 +6978,11 @@ export {
   InMemoryStickyBucketStore,
   Messenger,
   RageClickDetector,
+  ReplayUploader,
+  RrwebEvents,
   SDK_NAME,
   SDK_VERSION,
+  SessionRecorder,
   TapTracker,
   TargetRegistry,
   createFlagsClient3 as createFlagsClient,