@guidelytech/react-native 0.11.0 → 0.12.0

package/README.md

@@ -204,7 +204,11 @@ guidely.closeMessenger();
 useGuidelyEvent("conversation:message", ({ message }) => console.log(message.body));
 ```
 
-`showMessengerLauncher={false}` hides the bubble so you can open the messenger from your own UI.
+Users can drag the bubble out of the way (e.g. off your map controls): it snaps to the nearer side
+edge at the height they drop it, never lower than its default spot (so it stays clear of tab bars),
+and the device remembers it across launches (only for the app session without `storage`). A tap
+still opens the messenger. `showMessengerLauncher={false}` hides the bubble so you can open the
+messenger from your own UI.
 `openResourceCenter()` opens the Help tab while the messenger is on, and `reset()` forgets the
 install's conversations.
 

package/dist/index.cjs

@@ -160,7 +160,7 @@ function FlagsProvider({ children, client: external, payload, ...options }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.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++) {
@@ -470,7 +470,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;
@@ -765,7 +765,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);
@@ -1074,10 +1074,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);
@@ -1387,6 +1389,49 @@ function dismissedAfterMerge(local, server) {
 // src/core/client.ts
 var import_flags2 = require("@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;
@@ -2500,7 +2545,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;
@@ -2666,7 +2711,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;
@@ -3027,7 +3072,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();
@@ -3192,7 +3237,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);
@@ -3954,6 +3999,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));
@@ -3984,6 +4037,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;
@@ -4812,14 +4870,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] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    let live = true;
+    import_react_native5.AccessibilityInfo.isReduceMotionEnabled?.().then((v) => live && setOn(v)).catch(() => {
+    });
+    const sub = import_react_native5.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] = (0, import_react3.useState)(() => client.getMessengerLauncherPlacement());
+  const pan = (0, import_react3.useRef)(new import_react_native5.Animated.ValueXY()).current;
+  const offset = (0, import_react3.useRef)({ x: 0, y: 0 });
+  const dragging = (0, import_react3.useRef)(false);
+  const live = (0, import_react3.useRef)({ frame, defaultSide, reduceMotion });
+  live.current = { frame, defaultSide, reduceMotion };
+  const { width, height, size, defaultBottom } = frame;
+  const { top, bottom, left, right } = frame.insets;
+  (0, import_react3.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 = (0, import_react3.useMemo)(() => {
+    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 import_react_native5.Animated.timing(pan, { toValue: to, duration: 300, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), useNativeDriver: true }).start(done);
+    };
+    return import_react_native5.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__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: () => store.open(), style: ({ pressed }) => [styles4.launcher, style, { backgroundColor: p.primary, opacity: pressed ? 0.85 : 1 }], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Animated.View, { ...responder.panHandlers, style: [styles4.launcherWrap, style, { transform: pan.getTranslateTransform() }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: () => !dragging.current && store.open(), style: ({ pressed }) => [styles4.launcher, { backgroundColor: p.primary, opacity: pressed ? 0.85 : 1 }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles4.launcherIcon, { color: p.onPrimary }], children: "\u{1F4AC}" }),
     snap.unread ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: styles4.badge, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: styles4.badgeText, children: snap.unread }) }) : null
-  ] });
+  ] }) });
 }
 function MessengerSheet({ store, client, palette: p, topInset, bottomInset }) {
   const snap = useMessenger(store);
@@ -5064,7 +5197,8 @@ function Article({ article, palette: p, client }) {
 }
 var styles4 = import_react_native5.StyleSheet.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" },
@@ -5297,20 +5431,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
@@ -5926,6 +6060,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__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { ref, collapsable: false, pointerEvents: "box-none", style: import_react_native10.StyleSheet.absoluteFill, onLayout: measureOrigin, children: [
     ui.checklists.map((c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Checklist, { view: c, client, palette: palette(client.themeFor(c.guide), scheme), geometry, showLauncher: client.options.showChecklistLauncher !== false, launcherBottom: launcherOffset }, c.guide.id)),
     showRcLauncher ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -5941,7 +6076,17 @@ function GuidelyOverlay({ client, insets: insetsProp, launcherOffset }) {
         ]
       }
     ) : null,
-    messenger && client.options.showMessengerLauncher !== false ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(
+      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__ */ (0, import_jsx_runtime10.jsx)(Survey, { view: ui.survey, client, palette: palette(client.themeFor(ui.survey.guide), scheme), geometry }) : null,
     ui.steps.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StepLayer, { view: s, client, palette: palette(client.themeFor(s.guide), scheme, s.guide.config.appearance), geometry }, s.key)),
     messenger ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessengerSheet, { store: messenger, client, palette: basePalette, topInset: insets.top, bottomInset: insets.bottom }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResourceCenter, { client, palette: basePalette, open: ui.resourceCenterOpen, topInset: insets.top, bottomInset: insets.bottom })