@mushi-mushi/react-native 0.15.2 → 0.17.0

package/dist/index.js

@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 import {
   createContext,
   useContext,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useRef as useRef3,
   useState as useState2,
   useCallback as useCallback3,
@@ -17,8 +17,10 @@ import {
 } from "react";
 import {
   createApiClient,
+  createBreadcrumbBuffer,
   DEFAULT_API_ENDPOINT,
-  newUuid
+  newUuid,
+  parseIdentityToken
 } from "@mushi-mushi/core";
 
 // src/capture/console-capture.ts
@@ -136,6 +138,30 @@ function getDeviceInfo() {
   };
 }
 
+// src/capture/fingerprint.ts
+function nonCryptoHashHex(input) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash << 5) - hash + input.charCodeAt(i);
+    hash |= 0;
+  }
+  return `rnfp_${(hash >>> 0).toString(16).padStart(8, "0")}`;
+}
+function getDeviceFingerprintHash(device) {
+  const inputs = {
+    platform: device.platform,
+    osVersion: String(device.osVersion ?? ""),
+    screenWidth: device.screenWidth,
+    screenHeight: device.screenHeight,
+    pixelRatio: device.pixelRatio,
+    locale: device.locale ?? "",
+    timezone: device.timezone ?? ""
+  };
+  const serialised = JSON.stringify(inputs);
+  if (!device.platform && !device.screenWidth) return null;
+  return nonCryptoHashHex(serialised);
+}
+
 // src/storage/async-storage-queue.ts
 var QUEUE_KEY = "@mushi:offline_queue";
 var AsyncStorageQueue = class {
@@ -306,12 +332,20 @@ import {
   Dimensions as Dimensions2,
   Platform as Platform2,
   KeyboardAvoidingView,
+  ScrollView,
   useColorScheme
 } from "react-native";
+import { mushiPalette } from "@mushi-mushi/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { height: SCREEN_HEIGHT } = Dimensions2.get("window");
 var SHEET_HEIGHT = SCREEN_HEIGHT * 0.55;
 var DISMISS_THRESHOLD = 80;
+var NEON = {
+  accent: "#0FFF50",
+  accentHover: "#00E646",
+  ink: "#0a1a0a",
+  border: "#00C43A"
+};
 var CATEGORIES = [
   { key: "bug", emoji: "\u{1F41B}", label: "Bug" },
   { key: "slow", emoji: "\u{1F422}", label: "Slow" },
@@ -458,13 +492,15 @@ var MushiBottomSheet = ({
     }
   };
   const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
-  const colors = dark ? { bg: "#1c1c1e", text: "#f2f2f7", sub: "#8e8e93", card: "#2c2c2e", accent: "#0a84ff", border: "#38383a", backdrop: "rgba(0,0,0,0.6)" } : { bg: "#ffffff", text: "#1c1c1e", sub: "#8e8e93", card: "#f2f2f7", accent: "#007aff", border: "#e5e5ea", backdrop: "rgba(0,0,0,0.35)" };
+  const pal = mushiPalette(dark ? "dark" : "light");
+  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: NEON.accent, accentInk: NEON.ink, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.6)", disabled: "#3a3a3c", disabledText: pal.inkFaint } : { bg: pal.paperRaised, text: pal.ink, sub: pal.inkMuted, card: pal.paper, accent: NEON.accent, accentInk: NEON.ink, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: pal.inkFaint };
   const canSubmit = !!category && description.trim().length > 0 && phase === "form";
   return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ jsxs(
     KeyboardAvoidingView,
     {
       style: s.flex,
-      behavior: Platform2.OS === "ios" ? "padding" : void 0,
+      behavior: Platform2.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: Platform2.OS === "ios" ? 0 : 20,
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
@@ -482,7 +518,11 @@ var MushiBottomSheet = ({
             ],
             children: [
               /* @__PURE__ */ jsx(View, { ...panResponder.panHandlers, style: s.handleArea, children: /* @__PURE__ */ jsx(View, { style: [s.handle, { backgroundColor: colors.sub }] }) }),
-              /* @__PURE__ */ jsx(View, { style: s.tabRow, children: ["report", "inbox"].map((tab) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(View, { style: [s.brandHeader, { backgroundColor: NEON.accent, borderBottomColor: NEON.border }], children: [
+                /* @__PURE__ */ jsx(Text, { style: [s.brandEyebrow, { color: NEON.ink }], children: "MUSHI \xB7 BETA" }),
+                /* @__PURE__ */ jsx(Text, { style: [s.brandTitle, { color: NEON.ink }], children: sheetTab === "inbox" ? "Your reports" : sheetTab === "community" ? "Community" : "Report an issue" })
+              ] }),
+              /* @__PURE__ */ jsx(View, { style: s.tabRow, children: ["report", "inbox", "community"].map((tab) => /* @__PURE__ */ jsx(
                 TouchableOpacity,
                 {
                   onPress: () => {
@@ -491,11 +531,11 @@ var MushiBottomSheet = ({
                     else setSelectedReportId(null);
                   },
                   style: [s.tabBtn, sheetTab === tab && { borderBottomColor: colors.accent }],
-                  children: /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.accent : colors.sub }], children: tab === "report" ? "Report" : "Inbox" })
+                  children: /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.text : colors.sub }], children: tab === "report" ? "Report" : tab === "inbox" ? "Your reports" : "Community" })
                 },
                 tab
               )) }),
-              sheetTab === "inbox" ? /* @__PURE__ */ jsx(View, { style: s.body, children: inboxLoading ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub }, children: "Loading\u2026" }) : selectedReportId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              sheetTab === "inbox" ? /* @__PURE__ */ jsx(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: inboxLoading ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub }, children: "Loading\u2026" }) : selectedReportId ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => setSelectedReportId(null), children: /* @__PURE__ */ jsx(Text, { style: { color: colors.accent, marginBottom: 8 }, children: "\u2190 Back" }) }),
                 threadComments.map((c) => /* @__PURE__ */ jsxs(View, { style: [s.threadBubble, { backgroundColor: colors.card }], children: [
                   /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: c.author_kind }),
@@ -504,7 +544,7 @@ var MushiBottomSheet = ({
                 VERIFIABLE_STATUSES.has(
                   inboxReports.find((r) => r.id === selectedReportId)?.status ?? ""
                 ) && /* @__PURE__ */ jsxs(View, { style: s.verifyRow, children: [
-                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.accent }], onPress: () => submitFeedback("confirms"), children: /* @__PURE__ */ jsx(Text, { style: s.submitText, children: "Yes, fixed" }) }),
+                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.accent }], onPress: () => submitFeedback("confirms"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "Yes, fixed" }) }),
                   /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.border }], onPress: () => submitFeedback("not_fixed"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.text }], children: "Not fixed" }) })
                 ] }),
                 /* @__PURE__ */ jsx(
@@ -517,106 +557,130 @@ var MushiBottomSheet = ({
                     onChangeText: setReplyText
                   }
                 ),
-                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], onPress: sendReply, children: /* @__PURE__ */ jsx(Text, { style: s.submitText, children: "Send" }) })
+                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], onPress: sendReply, children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "Send" }) })
               ] }) : inboxReports.map((r) => /* @__PURE__ */ jsxs(TouchableOpacity, { style: [s.inboxRow, { borderColor: colors.border }], onPress: () => openThread(r.id), children: [
                 /* @__PURE__ */ jsx(Text, { style: { color: colors.text, fontWeight: "600" }, numberOfLines: 1, children: (r.summary ?? r.description ?? "Report").slice(0, 60) }),
                 /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: r.status })
-              ] }, r.id)) }) : phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, children: [
+              ] }, r.id)) }) : sheetTab === "community" ? /* @__PURE__ */ jsxs(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: [
+                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 13, marginBottom: 16, lineHeight: 18 }, children: "Sign in to track your reports across apps and see the global leaderboard. No password needed." }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    style: [s.input, { backgroundColor: colors.card, color: colors.text, borderColor: colors.border, minHeight: 48 }],
+                    placeholder: "you@example.com",
+                    placeholderTextColor: colors.sub,
+                    keyboardType: "email-address",
+                    autoCapitalize: "none",
+                    autoCorrect: false,
+                    textContentType: "emailAddress"
+                  }
+                ),
+                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "Send sign-in link \u2192" }) }),
+                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11, textAlign: "center", marginTop: 12 }, children: "We'll email you a one-tap sign-in link. No password, ever." })
+              ] }) : phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, children: [
                 /* @__PURE__ */ jsx(Text, { style: [s.sentEmoji], children: "\u2705" }),
                 /* @__PURE__ */ jsx(Text, { style: [s.sentText, { color: colors.text }], children: "Report sent!" })
-              ] }) : /* @__PURE__ */ jsxs(View, { style: s.body, children: [
-                /* @__PURE__ */ jsx(Text, { style: [s.title, { color: colors.text }], children: "Report an issue" }),
-                /* @__PURE__ */ jsx(View, { style: s.catRow, children: CATEGORIES.map((c) => {
-                  const active = category === c.key;
-                  return /* @__PURE__ */ jsxs(
-                    TouchableOpacity,
-                    {
-                      onPress: () => setCategory(c.key),
-                      activeOpacity: 0.7,
-                      style: [
-                        s.catBtn,
+              ] }) : /* @__PURE__ */ jsxs(
+                ScrollView,
+                {
+                  style: s.body,
+                  keyboardShouldPersistTaps: "handled",
+                  contentContainerStyle: { paddingBottom: 24 },
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { style: [s.stepLabel, { color: colors.sub }], children: "What kind of issue?" }),
+                    /* @__PURE__ */ jsx(View, { style: s.catRow, children: CATEGORIES.map((c) => {
+                      const active = category === c.key;
+                      return /* @__PURE__ */ jsxs(
+                        TouchableOpacity,
                         {
-                          backgroundColor: active ? colors.accent : colors.card,
-                          borderColor: active ? colors.accent : colors.border
-                        }
-                      ],
-                      children: [
-                        /* @__PURE__ */ jsx(Text, { style: s.catEmoji, children: c.emoji }),
-                        /* @__PURE__ */ jsx(
-                          Text,
+                          onPress: () => setCategory(c.key),
+                          activeOpacity: 0.7,
+                          style: [
+                            s.catBtn,
+                            {
+                              backgroundColor: active ? colors.accent : colors.card,
+                              borderColor: active ? colors.accent : colors.border
+                            }
+                          ],
+                          children: [
+                            /* @__PURE__ */ jsx(Text, { style: s.catEmoji, children: c.emoji }),
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                style: [
+                                  s.catLabel,
+                                  { color: active ? colors.accentInk : colors.text }
+                                ],
+                                children: c.label
+                              }
+                            )
+                          ]
+                        },
+                        c.key
+                      );
+                    }) }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        style: [
+                          s.input,
                           {
-                            style: [
-                              s.catLabel,
-                              { color: active ? "#fff" : colors.text }
-                            ],
-                            children: c.label
+                            backgroundColor: colors.card,
+                            color: colors.text,
+                            borderColor: colors.border
                           }
-                        )
-                      ]
-                    },
-                    c.key
-                  );
-                }) }),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    style: [
-                      s.input,
+                        ],
+                        placeholder: "What happened?",
+                        placeholderTextColor: colors.sub,
+                        multiline: true,
+                        textAlignVertical: "top",
+                        value: description,
+                        onChangeText: setDescription,
+                        editable: phase === "form"
+                      }
+                    ),
+                    activeScreenshot ? /* @__PURE__ */ jsxs(View, { style: s.screenshotRow, children: [
+                      /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          source: { uri: activeScreenshot },
+                          style: s.screenshotThumb,
+                          accessibilityLabel: "Attached screenshot"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(View, { style: s.screenshotMeta, children: [
+                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
+                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.sub }], children: "Helps the team see the issue" })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        TouchableOpacity,
+                        {
+                          onPress: () => {
+                            setScreenshotAttached(false);
+                            onClearScreenshot?.();
+                          },
+                          hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+                          accessibilityLabel: "Remove screenshot",
+                          children: /* @__PURE__ */ jsx(Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
+                        }
+                      )
+                    ] }) : null,
+                    /* @__PURE__ */ jsx(
+                      TouchableOpacity,
                       {
-                        backgroundColor: colors.card,
-                        color: colors.text,
-                        borderColor: colors.border
+                        onPress: handleSubmit,
+                        disabled: !canSubmit,
+                        activeOpacity: 0.8,
+                        style: [
+                          s.submitBtn,
+                          { backgroundColor: canSubmit ? colors.accent : colors.disabled }
+                        ],
+                        children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: canSubmit ? colors.accentInk : colors.disabledText }], children: phase === "sending" ? "Sending\u2026" : "Submit report" })
                       }
-                    ],
-                    placeholder: "What happened?",
-                    placeholderTextColor: colors.sub,
-                    multiline: true,
-                    textAlignVertical: "top",
-                    value: description,
-                    onChangeText: setDescription,
-                    editable: phase === "form"
-                  }
-                ),
-                activeScreenshot ? /* @__PURE__ */ jsxs(View, { style: s.screenshotRow, children: [
-                  /* @__PURE__ */ jsx(
-                    Image,
-                    {
-                      source: { uri: activeScreenshot },
-                      style: s.screenshotThumb,
-                      accessibilityLabel: "Attached screenshot"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(View, { style: s.screenshotMeta, children: [
-                    /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
-                    /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.sub }], children: "Helps the team see the issue" })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    TouchableOpacity,
-                    {
-                      onPress: () => {
-                        setScreenshotAttached(false);
-                        onClearScreenshot?.();
-                      },
-                      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
-                      accessibilityLabel: "Remove screenshot",
-                      children: /* @__PURE__ */ jsx(Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
-                    }
-                  )
-                ] }) : null,
-                /* @__PURE__ */ jsx(
-                  TouchableOpacity,
-                  {
-                    onPress: handleSubmit,
-                    disabled: !canSubmit,
-                    activeOpacity: 0.8,
-                    style: [
-                      s.submitBtn,
-                      { backgroundColor: canSubmit ? colors.accent : colors.border }
-                    ],
-                    children: /* @__PURE__ */ jsx(Text, { style: s.submitText, children: phase === "sending" ? "Sending\u2026" : "Submit" })
-                  }
-                )
-              ] })
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -654,6 +718,24 @@ var s = StyleSheet.create({
     borderRadius: 3,
     opacity: 0.5
   },
+  brandHeader: {
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 12,
+    borderBottomWidth: 1.5
+  },
+  brandEyebrow: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 1.2,
+    marginBottom: 2,
+    opacity: 0.7
+  },
+  brandTitle: {
+    fontSize: 18,
+    fontWeight: "800",
+    letterSpacing: -0.2
+  },
   body: {
     paddingHorizontal: 20,
     paddingTop: 4
@@ -663,6 +745,14 @@ var s = StyleSheet.create({
     fontWeight: "700",
     marginBottom: 16
   },
+  stepLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.2,
+    marginTop: 8,
+    marginBottom: 10,
+    textTransform: "uppercase"
+  },
   catRow: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -789,24 +879,144 @@ var s = StyleSheet.create({
 });
 
 // src/components/MushiFloatingButton.tsx
-import { useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
 import {
   Animated as Animated2,
-  TouchableWithoutFeedback,
+  PanResponder as PanResponder2,
   StyleSheet as StyleSheet2,
   Platform as Platform3,
+  Dimensions as Dimensions3,
   useColorScheme as useColorScheme2
 } from "react-native";
+import { mushiPalette as mushiPalette2, MUSHI_COPY } from "@mushi-mushi/core";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var FAB_SIZE = 56;
+var EDGE_PADDING = 12;
+function getScreenBounds() {
+  const { width, height } = Dimensions3.get("window");
+  return { width, height };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+var STORAGE_KEY = "mushi:fab-pos";
+async function loadStoredPos() {
+  try {
+    const AsyncStorage = (await import("@react-native-async-storage/async-storage")).default;
+    const raw = await AsyncStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+async function storePos(pos) {
+  try {
+    const AsyncStorage = (await import("@react-native-async-storage/async-storage")).default;
+    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(pos));
+  } catch {
+  }
+}
 var MushiFloatingButton = ({
   onPress,
   position = "bottom-right",
-  inset
+  inset,
+  config,
+  accent
 }) => {
   const scheme = useColorScheme2();
   const dark = scheme === "dark";
+  const draggable = config?.draggable ?? false;
+  const snapToEdge = config?.snapToEdge ?? true;
+  const persist = config?.persist ?? false;
+  const baseBottom = inset?.bottom ?? (Platform3.OS === "ios" ? 50 : 28);
+  const baseX = position === "bottom-left" ? inset?.left ?? EDGE_PADDING : (() => {
+    const { width } = getScreenBounds();
+    return width - FAB_SIZE - (inset?.right ?? EDGE_PADDING);
+  })();
   const scale = useRef2(new Animated2.Value(1)).current;
+  const posX = useRef2(new Animated2.Value(baseX)).current;
+  const posY = useRef2(new Animated2.Value(0)).current;
+  const currentX = useRef2(baseX);
+  const currentY = useRef2(0);
+  const isDragging = useRef2(false);
+  const accentColor = accent ?? mushiPalette2(dark ? "dark" : "light").accent;
+  useEffect2(() => {
+    if (!persist) return;
+    void loadStoredPos().then((pos) => {
+      if (!pos) return;
+      currentX.current = pos.x;
+      currentY.current = pos.y;
+      posX.setValue(pos.x);
+      posY.setValue(pos.y);
+    });
+  }, [persist, posX, posY]);
+  const snapAndPersist = useCallback2(
+    (x, y) => {
+      const { width, height } = getScreenBounds();
+      let snappedX = x;
+      if (snapToEdge) {
+        const midX = width / 2;
+        snappedX = x + FAB_SIZE / 2 < midX ? EDGE_PADDING : width - FAB_SIZE - EDGE_PADDING;
+      }
+      const clampedX = clamp(snappedX, EDGE_PADDING, width - FAB_SIZE - EDGE_PADDING);
+      const clampedY = clamp(y, -(height - FAB_SIZE - baseBottom - 60), 0);
+      currentX.current = clampedX;
+      currentY.current = clampedY;
+      Animated2.spring(posX, {
+        toValue: clampedX,
+        useNativeDriver: false,
+        damping: 18,
+        stiffness: 220
+      }).start();
+      Animated2.spring(posY, {
+        toValue: clampedY,
+        useNativeDriver: false,
+        damping: 18,
+        stiffness: 220
+      }).start();
+      if (persist) void storePos({ x: clampedX, y: clampedY });
+    },
+    [snapToEdge, persist, posX, posY, baseBottom]
+  );
+  const panResponder = useRef2(
+    draggable ? PanResponder2.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 6 || Math.abs(g.dy) > 6,
+      onPanResponderGrant: () => {
+        isDragging.current = false;
+        posX.stopAnimation();
+        posY.stopAnimation();
+      },
+      onPanResponderMove: (_, g) => {
+        if (Math.abs(g.dx) > 6 || Math.abs(g.dy) > 6) {
+          isDragging.current = true;
+          scale.setValue(1);
+        }
+        const { width, height } = getScreenBounds();
+        const newX = clamp(
+          currentX.current + g.dx,
+          EDGE_PADDING,
+          width - FAB_SIZE - EDGE_PADDING
+        );
+        const newY = clamp(
+          currentY.current + g.dy,
+          -(height - FAB_SIZE - baseBottom - 60),
+          0
+        );
+        posX.setValue(newX);
+        posY.setValue(newY);
+      },
+      onPanResponderRelease: (_, g) => {
+        if (isDragging.current) {
+          snapAndPersist(currentX.current + g.dx, currentY.current + g.dy);
+        }
+        isDragging.current = false;
+      }
+    }) : PanResponder2.create({})
+  ).current;
   const handlePressIn = useCallback2(() => {
+    if (isDragging.current) return;
     Animated2.spring(scale, {
       toValue: 0.85,
       useNativeDriver: true,
@@ -821,39 +1031,35 @@ var MushiFloatingButton = ({
       damping: 10,
       stiffness: 250
     }).start();
-  }, [scale]);
-  const positionStyle = position === "bottom-left" ? { left: inset?.left ?? 20 } : { right: inset?.right ?? 20 };
+    if (!isDragging.current) onPress();
+  }, [scale, onPress]);
   return /* @__PURE__ */ jsx2(
-    TouchableWithoutFeedback,
+    Animated2.View,
     {
-      onPress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      children: /* @__PURE__ */ jsx2(
-        Animated2.View,
+      ...draggable ? panResponder.panHandlers : {},
+      style: [
+        s2.fab,
         {
-          style: [
-            s2.fab,
-            positionStyle,
-            { bottom: inset?.bottom ?? (Platform3.OS === "ios" ? 50 : 28) },
-            {
-              backgroundColor: dark ? "#0a84ff" : "#007aff",
-              transform: [{ scale }],
-              shadowColor: dark ? "#0a84ff" : "#000"
-            }
-          ],
-          children: /* @__PURE__ */ jsx2(Animated2.Text, { style: s2.emoji, children: "\u{1F41B}" })
+          left: posX,
+          bottom: Animated2.add(new Animated2.Value(baseBottom), Animated2.multiply(posY, -1)),
+          backgroundColor: accentColor,
+          shadowColor: dark ? accentColor : "#000",
+          transform: [{ scale }]
         }
-      )
+      ],
+      onStartShouldSetResponder: () => !draggable,
+      onResponderGrant: handlePressIn,
+      onResponderRelease: handlePressOut,
+      children: /* @__PURE__ */ jsx2(Animated2.Text, { style: s2.emoji, children: MUSHI_COPY.triggerText })
     }
   );
 };
 var s2 = StyleSheet2.create({
   fab: {
     position: "absolute",
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    borderRadius: FAB_SIZE / 2,
     alignItems: "center",
     justifyContent: "center",
     zIndex: 9999,
@@ -867,14 +1073,53 @@ var s2 = StyleSheet2.create({
   }
 });
 
+// src/version.ts
+var MUSHI_SDK_PACKAGE = "@mushi-mushi/react-native";
+var MUSHI_SDK_VERSION = "0.17.0" ? "0.17.0" : "0.17.0";
+
 // src/provider.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MushiContext = createContext(null);
-function MushiProvider({ children, ...config }) {
+function breadcrumbToTimelineKind(category) {
+  switch (category) {
+    case "navigation":
+      return "route";
+    case "ui.click":
+    case "ui.tap":
+      return "click";
+    case "xhr":
+    case "fetch":
+    case "network":
+      return "request";
+    default:
+      return "log";
+  }
+}
+function MushiProvider({ children, config: configProp, ...barePropConfig }) {
+  const proc = globalThis.process;
+  const envProjectId = proc?.env?.MUSHI_PROJECT_ID || proc?.env?.EXPO_PUBLIC_MUSHI_PROJECT_ID;
+  const envApiKey = proc?.env?.MUSHI_API_KEY || proc?.env?.EXPO_PUBLIC_MUSHI_API_KEY;
+  const config = {
+    ...envProjectId ? { projectId: envProjectId } : {},
+    ...envApiKey ? { apiKey: envApiKey } : {},
+    ...configProp,
+    ...barePropConfig
+  };
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    if (!config.projectId || !config.apiKey) {
+      console.warn(
+        "[MushiProvider] Missing projectId or apiKey \u2014 set MUSHI_PROJECT_ID / MUSHI_API_KEY (or EXPO_PUBLIC_* equivalents) or pass them as props."
+      );
+    }
+  }
   const consoleRef = useRef3(null);
   const networkRef = useRef3(null);
   const queueRef = useRef3(null);
   const apiClientRef = useRef3(null);
+  const sessionIdRef = useRef3(`sess_${newUuid()}`);
+  const breadcrumbsRef = useRef3(
+    createBreadcrumbBuffer({ max: config.capture?.maxBreadcrumbs ?? 50 })
+  );
   const [sheetVisible, setSheetVisible] = useState2(false);
   const [sheetScreenshot, setSheetScreenshot] = useState2(null);
   const reporterTokenRef = useRef3(`rn-${config.projectId}-anon`);
@@ -885,6 +1130,8 @@ function MushiProvider({ children, ...config }) {
       resolveReporterTokenReady = resolve;
     })
   );
+  const userTokenRef = useRef3(null);
+  const pageContextRef = useRef3(null);
   const rawEndpoint = config.apiEndpoint ?? config.endpoint;
   if (rawEndpoint !== void 0 && rawEndpoint.trim() === "") {
     throw new Error(
@@ -895,7 +1142,7 @@ function MushiProvider({ children, ...config }) {
     console.warn("[MushiProvider] `endpoint` is deprecated \u2014 use `apiEndpoint` instead.");
   }
   const apiEndpoint = rawEndpoint ?? DEFAULT_API_ENDPOINT;
-  useEffect2(() => {
+  useEffect3(() => {
     if (config.capture?.console !== false) {
       consoleRef.current = setupConsoleCapture(config.capture?.maxConsoleEntries);
     }
@@ -905,7 +1152,8 @@ function MushiProvider({ children, ...config }) {
     apiClientRef.current = createApiClient({
       projectId: config.projectId,
       apiKey: config.apiKey,
-      apiEndpoint
+      apiEndpoint,
+      getUserToken: () => userTokenRef.current
     });
     queueRef.current = new AsyncStorageQueue({
       maxSize: config.storage?.maxQueueSize,
@@ -918,6 +1166,12 @@ function MushiProvider({ children, ...config }) {
     });
     queueRef.current.flush().catch(() => {
     });
+    breadcrumbsRef.current.add({
+      category: "lifecycle",
+      level: "info",
+      message: "Mushi SDK initialised",
+      data: { sdk: MUSHI_SDK_PACKAGE, version: MUSHI_SDK_VERSION }
+    });
     (async () => {
       const TOKEN_KEY = "@mushi:reporter_token";
       try {
@@ -944,7 +1198,7 @@ function MushiProvider({ children, ...config }) {
       networkRef.current?.restore();
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     let unsubscribe;
     try {
       const NetInfo = __require("@react-native-community/netinfo").default;
@@ -959,6 +1213,17 @@ function MushiProvider({ children, ...config }) {
     return () => unsubscribe?.();
   }, []);
   const open = useCallback3(() => {
+    breadcrumbsRef.current.add({
+      category: "lifecycle",
+      level: "info",
+      message: "Widget opened",
+      ...screenRef.current?.name ? { data: { screen: screenRef.current.name } } : {}
+    });
+    if (config.capture?.screenshot === false) {
+      setSheetScreenshot(null);
+      setSheetVisible(true);
+      return;
+    }
     let vshot = null;
     try {
       vshot = __require("react-native-view-shot");
@@ -976,10 +1241,10 @@ function MushiProvider({ children, ...config }) {
     }).finally(() => {
       setSheetVisible(true);
     });
-  }, []);
+  }, [config.capture?.screenshot]);
   const close = useCallback3(() => setSheetVisible(false), []);
   const attachTo = useCallback3(() => ({ onPress: open }), [open]);
-  useEffect2(() => {
+  useEffect3(() => {
     const trigger2 = config.widget?.trigger ?? "button";
     if (trigger2 !== "shake" && trigger2 !== "both") return;
     let disposed = false;
@@ -1010,14 +1275,35 @@ function MushiProvider({ children, ...config }) {
   const submitReport = useCallback3(
     async (data) => {
       const deviceInfo = getDeviceInfo();
+      breadcrumbsRef.current.add({
+        category: "lifecycle",
+        level: "info",
+        message: "Report submitted",
+        data: { category: data.category }
+      });
       const contextMeta = {};
-      if (userRef.current?.id) contextMeta.userId = userRef.current.id;
+      if (userRef.current?.id) {
+        contextMeta.user = {
+          id: userRef.current.id,
+          ...userRef.current.email ? { email: userRef.current.email } : {},
+          ...userRef.current.name ? { name: userRef.current.name } : {},
+          ...userRef.current.provider ? { provider: userRef.current.provider } : {}
+        };
+        contextMeta.userId = userRef.current.id;
+      }
       if (userRef.current?.email) contextMeta.userEmail = userRef.current.email;
       if (userRef.current?.name) contextMeta.userName = userRef.current.name;
       if (screenRef.current?.name) contextMeta.screenName = screenRef.current.name;
       if (screenRef.current?.route) contextMeta.screenRoute = screenRef.current.route;
       if (screenRef.current?.feature) contextMeta.screenFeature = screenRef.current.feature;
       const merged = Object.keys(metadataRef.current).length > 0 ? { ...contextMeta, ...metadataRef.current } : Object.keys(contextMeta).length > 0 ? contextMeta : void 0;
+      const breadcrumbs = breadcrumbsRef.current.getAll();
+      const timeline = breadcrumbs.map((c) => ({
+        ts: c.timestamp,
+        kind: breadcrumbToTimelineKind(c.category),
+        payload: { message: c.message, level: c.level, ...c.data ?? {} }
+      }));
+      const fingerprintHash = getDeviceFingerprintHash(deviceInfo);
       const report = {
         id: newUuid(),
         projectId: config.projectId,
@@ -1040,7 +1326,14 @@ function MushiProvider({ children, ...config }) {
         })) ?? [],
         screenshotDataUrl: data.screenshotDataUrl,
         metadata: merged,
+        sessionId: sessionIdRef.current,
         reporterToken: reporterTokenRef.current,
+        ...fingerprintHash ? { fingerprintHash } : {},
+        ...deviceInfo.appVersion ? { appVersion: deviceInfo.appVersion } : {},
+        sdkPackage: MUSHI_SDK_PACKAGE,
+        sdkVersion: MUSHI_SDK_VERSION,
+        ...breadcrumbs.length > 0 ? { breadcrumbs } : {},
+        ...timeline.length > 0 ? { timeline } : {},
         createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
       const client = apiClientRef.current;
@@ -1060,7 +1353,7 @@ function MushiProvider({ children, ...config }) {
   const screenRef = useRef3(null);
   const activityQueueRef = useRef3([]);
   const rewardsFlushRef = useRef3(null);
-  useEffect2(() => {
+  useEffect3(() => {
     const rewards = config.rewards;
     if (!rewards?.enabled || !rewards.trackActivity) return;
     const flushMs = Math.max(3e4, rewards.flushIntervalMs ?? 3e5);
@@ -1098,11 +1391,53 @@ function MushiProvider({ children, ...config }) {
           provider: traits?.provider
         };
       },
+      setUser(user) {
+        userRef.current = {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+          provider: user.provider
+        };
+      },
+      identifyWithToken(token) {
+        userTokenRef.current = token && typeof token === "string" ? token : null;
+        if (userTokenRef.current) {
+          const claims = parseIdentityToken(userTokenRef.current);
+          if (claims?.sub) {
+            userRef.current = {
+              id: claims.sub,
+              ...claims.email ? { email: claims.email } : {},
+              ...claims.name ? { name: claims.name } : {}
+            };
+          }
+        }
+      },
+      publishPageContext(context) {
+        pageContextRef.current = context && context.route ? context : null;
+      },
       setMetadata(key, value) {
         metadataRef.current[key] = value;
       },
       setScreen(screen) {
+        const prev = screenRef.current?.name;
         screenRef.current = screen;
+        if (screen.name && screen.name !== prev) {
+          breadcrumbsRef.current.add({
+            category: "navigation",
+            level: "info",
+            message: `Navigated to ${screen.name}`,
+            // Always include `route` (fallback to the screen name) so the
+            // admin repro-timeline renders the destination instead of
+            // "unknown route" when the host only set a screen name.
+            data: {
+              route: screen.route ?? screen.name,
+              ...screen.feature ? { feature: screen.feature } : {}
+            }
+          });
+        }
+      },
+      addBreadcrumb(crumb) {
+        breadcrumbsRef.current.add(crumb);
       },
       // Reporter API — scoped to the device's persistent reporter token
       async listMyReports() {
@@ -1243,10 +1578,10 @@ function MushiTrigger({ children }) {
 }
 
 // src/capture/navigation-capture.ts
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 function useNavigationCapture(navigationRef) {
   const historyRef = useRef4([]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!navigationRef?.addListener || !navigationRef?.getCurrentRoute) return;
     const unsubscribe = navigationRef.addListener("state", () => {
       const route = navigationRef.getCurrentRoute?.();