@guidelytech/react-native 0.11.0 → 0.12.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { SelectorStrategy, AutocaptureSettings, HeatmapPoint, MessengerConfig, MessengerMessage, MessengerConversation, SdkArticlesResponse, ResourceCenterArticle, PublishedGuide, ProjectTheme, GuideStep, SdkConfigResponse, ChecklistTask, SdkEvent, TargetingContext, StepButton, ResourceCenterConfig, RuleGroup, ResourceCenterAnnouncement, Placement } from '@guidelytech/shared';
+import { SelectorStrategy, Placement, AutocaptureSettings, HeatmapPoint, MessengerConfig, MessengerMessage, MessengerConversation, SdkArticlesResponse, ResourceCenterArticle, PublishedGuide, ProjectTheme, GuideStep, SdkConfigResponse, ChecklistTask, SdkEvent, TargetingContext, StepButton, ResourceCenterConfig, RuleGroup, ResourceCenterAnnouncement } from '@guidelytech/shared';
 export { AutocaptureSettings, GuideStep, HeatmapPoint, PublishedGuide, SdkConfigResponse } from '@guidelytech/shared';
 import { FlagsClientOptions, FlagsClient, JsonValue, FlagValue, FlagDetails, FlagsBootstrap, Attributes } from '@guidelytech/flags';
 export { Attributes, EvaluationResult, FlagDetails, FlagsBootstrap, FlagsClient, FlagsClientOptions, FlagsPayload, InMemoryStickyBucketStore, JsonValue, createFlagsClient } from '@guidelytech/flags';
@@ -77,6 +77,41 @@ declare class TargetRegistry {
 
 type GuideStatus = "idle" | "running" | "waiting_url" | "waiting_target" | "ended";
 
+type Side = "top" | "bottom" | "left" | "right";
+interface Insets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+interface CardPosition {
+    x: number;
+    y: number;
+    side: Side;
+    /** Arrow centre along the card edge facing the target (px from the card's left/top). */
+    arrow: number;
+}
+/**
+ * Places a card of `size` next to `target` inside `viewport` minus `insets`, honouring the step's
+ * placement when it fits and flipping (then falling back to below/above) when it does not.
+ */
+declare function positionCard(target: Rect, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, insets: Insets, placement: Placement, offset: number): CardPosition;
+
+/**
+ * Where the visitor dragged the Scout bubble on this device: the side edge it snapped to and how
+ * high it sits, as a fraction of the allowed range (0 = the default bottom position, 1 = highest).
+ */
+interface LauncherPlacement {
+    side: "left" | "right";
+    fraction: number;
+}
+
 /** `autocapture` option: `false` turns every capability off, an object turns single ones off. */
 type AutocaptureOption = boolean | Partial<AutocaptureSettings>;
 /** The element a tap resolved to (or the view it hit), as `click` properties need it. */
@@ -443,7 +478,7 @@ interface UiState {
 }
 
 declare const SDK_NAME = "@guidelytech/react-native";
-declare const SDK_VERSION = "0.11.0";
+declare const SDK_VERSION = "0.12.0";
 declare const DEFAULT_API_URL = "https://guidelytech.com";
 /** Host-platform services the engine needs; the provider supplies React Native implementations. */
 interface PlatformBridge {
@@ -729,6 +764,10 @@ declare class GuidelyClient {
     private syncMessenger;
     /** The Scout messenger store when Scout is on for this platform (rendered by the overlay). */
     getMessenger(): Messenger | null;
+    /** Where the visitor dragged the messenger bubble on this device, or null to use the configured spot. */
+    getMessengerLauncherPlacement(): LauncherPlacement | null;
+    /** Remembers the bubble's spot on this device (in memory only when no `storage` was passed). */
+    setMessengerLauncherPlacement(placement: LauncherPlacement): void;
     /** Opens the Scout messenger, optionally on a tab. No-op when Scout is off for this platform. */
     openMessenger(tab?: MessengerTab): void;
     closeMessenger(): void;
@@ -742,6 +781,8 @@ declare class GuidelyClient {
     getFeatureDetails<T extends JsonValue>(key: string, fallback: T): FlagDetails<FlagValue<T>>;
     /** Calls `cb` whenever flag values may have changed. Returns an unsubscribe function. */
     onFlagsChange(cb: () => void): () => void;
+    /** Device facts on every screen view, read by the Pages devices / browsers breakdowns. */
+    private deviceProperties;
     /** Attributes flags are evaluated with: identity, traits, account, audiences, screen and device. */
     private flagContext;
     private syncFlagAttributes;
@@ -792,32 +833,6 @@ declare class GuidelyClient {
     private log;
 }
 
-type Side = "top" | "bottom" | "left" | "right";
-interface Insets {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-}
-interface CardPosition {
-    x: number;
-    y: number;
-    side: Side;
-    /** Arrow centre along the card edge facing the target (px from the card's left/top). */
-    arrow: number;
-}
-/**
- * Places a card of `size` next to `target` inside `viewport` minus `insets`, honouring the step's
- * placement when it fits and flipping (then falling back to below/above) when it does not.
- */
-declare function positionCard(target: Rect, size: {
-    width: number;
-    height: number;
-}, viewport: {
-    width: number;
-    height: number;
-}, insets: Insets, placement: Placement, offset: number): CardPosition;
-
 /**
  * Declares which screen its children are on, so targets on screens that are mounted but not
  * visible (inactive tabs, screens under a stack) are never used. `name` must match what you pass

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { SelectorStrategy, AutocaptureSettings, HeatmapPoint, MessengerConfig, MessengerMessage, MessengerConversation, SdkArticlesResponse, ResourceCenterArticle, PublishedGuide, ProjectTheme, GuideStep, SdkConfigResponse, ChecklistTask, SdkEvent, TargetingContext, StepButton, ResourceCenterConfig, RuleGroup, ResourceCenterAnnouncement, Placement } from '@guidelytech/shared';
+import { SelectorStrategy, Placement, AutocaptureSettings, HeatmapPoint, MessengerConfig, MessengerMessage, MessengerConversation, SdkArticlesResponse, ResourceCenterArticle, PublishedGuide, ProjectTheme, GuideStep, SdkConfigResponse, ChecklistTask, SdkEvent, TargetingContext, StepButton, ResourceCenterConfig, RuleGroup, ResourceCenterAnnouncement } from '@guidelytech/shared';
 export { AutocaptureSettings, GuideStep, HeatmapPoint, PublishedGuide, SdkConfigResponse } from '@guidelytech/shared';
 import { FlagsClientOptions, FlagsClient, JsonValue, FlagValue, FlagDetails, FlagsBootstrap, Attributes } from '@guidelytech/flags';
 export { Attributes, EvaluationResult, FlagDetails, FlagsBootstrap, FlagsClient, FlagsClientOptions, FlagsPayload, InMemoryStickyBucketStore, JsonValue, createFlagsClient } from '@guidelytech/flags';
@@ -77,6 +77,41 @@ declare class TargetRegistry {
 
 type GuideStatus = "idle" | "running" | "waiting_url" | "waiting_target" | "ended";
 
+type Side = "top" | "bottom" | "left" | "right";
+interface Insets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+interface CardPosition {
+    x: number;
+    y: number;
+    side: Side;
+    /** Arrow centre along the card edge facing the target (px from the card's left/top). */
+    arrow: number;
+}
+/**
+ * Places a card of `size` next to `target` inside `viewport` minus `insets`, honouring the step's
+ * placement when it fits and flipping (then falling back to below/above) when it does not.
+ */
+declare function positionCard(target: Rect, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, insets: Insets, placement: Placement, offset: number): CardPosition;
+
+/**
+ * Where the visitor dragged the Scout bubble on this device: the side edge it snapped to and how
+ * high it sits, as a fraction of the allowed range (0 = the default bottom position, 1 = highest).
+ */
+interface LauncherPlacement {
+    side: "left" | "right";
+    fraction: number;
+}
+
 /** `autocapture` option: `false` turns every capability off, an object turns single ones off. */
 type AutocaptureOption = boolean | Partial<AutocaptureSettings>;
 /** The element a tap resolved to (or the view it hit), as `click` properties need it. */
@@ -443,7 +478,7 @@ interface UiState {
 }
 
 declare const SDK_NAME = "@guidelytech/react-native";
-declare const SDK_VERSION = "0.11.0";
+declare const SDK_VERSION = "0.12.0";
 declare const DEFAULT_API_URL = "https://guidelytech.com";
 /** Host-platform services the engine needs; the provider supplies React Native implementations. */
 interface PlatformBridge {
@@ -729,6 +764,10 @@ declare class GuidelyClient {
     private syncMessenger;
     /** The Scout messenger store when Scout is on for this platform (rendered by the overlay). */
     getMessenger(): Messenger | null;
+    /** Where the visitor dragged the messenger bubble on this device, or null to use the configured spot. */
+    getMessengerLauncherPlacement(): LauncherPlacement | null;
+    /** Remembers the bubble's spot on this device (in memory only when no `storage` was passed). */
+    setMessengerLauncherPlacement(placement: LauncherPlacement): void;
     /** Opens the Scout messenger, optionally on a tab. No-op when Scout is off for this platform. */
     openMessenger(tab?: MessengerTab): void;
     closeMessenger(): void;
@@ -742,6 +781,8 @@ declare class GuidelyClient {
     getFeatureDetails<T extends JsonValue>(key: string, fallback: T): FlagDetails<FlagValue<T>>;
     /** Calls `cb` whenever flag values may have changed. Returns an unsubscribe function. */
     onFlagsChange(cb: () => void): () => void;
+    /** Device facts on every screen view, read by the Pages devices / browsers breakdowns. */
+    private deviceProperties;
     /** Attributes flags are evaluated with: identity, traits, account, audiences, screen and device. */
     private flagContext;
     private syncFlagAttributes;
@@ -792,32 +833,6 @@ declare class GuidelyClient {
     private log;
 }
 
-type Side = "top" | "bottom" | "left" | "right";
-interface Insets {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-}
-interface CardPosition {
-    x: number;
-    y: number;
-    side: Side;
-    /** Arrow centre along the card edge facing the target (px from the card's left/top). */
-    arrow: number;
-}
-/**
- * Places a card of `size` next to `target` inside `viewport` minus `insets`, honouring the step's
- * placement when it fits and flipping (then falling back to below/above) when it does not.
- */
-declare function positionCard(target: Rect, size: {
-    width: number;
-    height: number;
-}, viewport: {
-    width: number;
-    height: number;
-}, insets: Insets, placement: Placement, offset: number): CardPosition;
-
 /**
  * Declares which screen its children are on, so targets on screens that are mounted but not
  * visible (inactive tabs, screens under a stack) are never used. `name` must match what you pass

package/dist/index.js

@@ -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;
@@ -2436,7 +2481,7 @@ var PersistentStore = class {
 
 // src/core/client.ts
 var SDK_NAME = "@guidelytech/react-native";
-var SDK_VERSION = "0.11.0";
+var SDK_VERSION = "0.12.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;
@@ -2602,7 +2647,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;
@@ -2963,7 +3008,7 @@ var GuidelyClient = class {
       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();
@@ -3128,7 +3173,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 +3935,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 +3973,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 +4776,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 +4806,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 +5133,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 +5344,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 +5367,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 +5476,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 +5491,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 +5531,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 +5541,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 +5563,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 +5575,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 +5600,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 +5623,7 @@ function Survey({
   useEffect6(() => {
     setAnswers({});
     setError("");
-    AccessibilityInfo2.announceForAccessibility?.(
+    AccessibilityInfo3.announceForAccessibility?.(
       `Survey: ${config?.questions[0]?.title ?? view.guide.name}`
     );
   }, [view.key]);
@@ -5872,6 +6006,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 +6022,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 })