@mushi-mushi/react-native 0.15.1 → 0.16.0

package/README.md

@@ -120,4 +120,4 @@ MIT
 <!-- mushi-readme-stats-footer -->
 ---
 
-<sub>Monorepo scale (June 2026): 43 edge functions · 234 SQL migrations · 13 outbound plugins · 11 inbound adapters. Canonical counts: <a href="https://github.com/kensaurus/mushi-mushi/blob/master/docs/stats.md">docs/stats.md</a> · <code>pnpm docs-stats</code></sub>
+<sub>Monorepo scale (June 2026): 47 edge functions · 256 SQL migrations · 13 outbound plugins · 11 inbound adapters · 18 pipeline agents. Canonical counts: <a href="https://github.com/kensaurus/mushi-mushi/blob/master/docs/stats.md">docs/stats.md</a> · <code>pnpm docs-stats</code></sub>

package/dist/index.cjs

@@ -328,6 +328,7 @@ var CATEGORIES = [
   { key: "confusing", emoji: "\u{1F615}", label: "Confusing" },
   { key: "other", emoji: "\u{1F4AC}", label: "Other" }
 ];
+var VERIFIABLE_STATUSES = /* @__PURE__ */ new Set(["fixed", "resolved", "verified"]);
 var MushiBottomSheet = ({
   visible,
   onClose,
@@ -349,12 +350,6 @@ var MushiBottomSheet = ({
   const [threadComments, setThreadComments] = (0, import_react.useState)([]);
   const [replyText, setReplyText] = (0, import_react.useState)("");
   const [screenshotAttached, setScreenshotAttached] = (0, import_react.useState)(true);
-  (0, import_react.useEffect)(() => {
-    if (visible) {
-      setScreenshotAttached(true);
-      if (sheetTab === "inbox") void loadInbox();
-    }
-  }, [visible, sheetTab]);
   const loadInbox = (0, import_react.useCallback)(async () => {
     if (!mushi?.listMyReports) return;
     setInboxLoading(true);
@@ -365,6 +360,12 @@ var MushiBottomSheet = ({
       setInboxLoading(false);
     }
   }, [mushi]);
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      setScreenshotAttached(true);
+      if (sheetTab === "inbox") void loadInbox();
+    }
+  }, [visible, sheetTab, loadInbox]);
   const openThread = (0, import_react.useCallback)(async (reportId) => {
     setSelectedReportId(reportId);
     if (!mushi?.listMyComments) return;
@@ -466,13 +467,14 @@ 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 colors = dark ? { bg: "#1c1c1e", text: "#f2f2f7", sub: "#8e8e93", card: "#2c2c2e", accent: "#0a84ff", border: "#38383a", backdrop: "rgba(0,0,0,0.6)", disabled: "#3a3a3c", disabledText: "#636366" } : { bg: "#ffffff", text: "#1c1c1e", sub: "#8e8e93", card: "#f2f2f7", accent: "#007aff", border: "#e5e5ea", backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: "#8e8e93" };
   const canSubmit = !!category && description.trim().length > 0 && phase === "form";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_react_native2.KeyboardAvoidingView,
     {
       style: s.flex,
-      behavior: import_react_native2.Platform.OS === "ios" ? "padding" : void 0,
+      behavior: import_react_native2.Platform.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: import_react_native2.Platform.OS === "ios" ? 0 : 20,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_react_native2.Animated.View,
@@ -490,7 +492,7 @@ var MushiBottomSheet = ({
             ],
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { ...panResponder.panHandlers, style: s.handleArea, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [s.handle, { backgroundColor: colors.sub }] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.tabRow, children: ["report", "inbox"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.tabRow, children: ["report", "inbox", "community"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_react_native2.TouchableOpacity,
                 {
                   onPress: () => {
@@ -499,17 +501,19 @@ var MushiBottomSheet = ({
                     else setSelectedReportId(null);
                   },
                   style: [s.tabBtn, sheetTab === tab && { borderBottomColor: colors.accent }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.accent : colors.sub }], children: tab === "report" ? "Report" : "Inbox" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.accent : colors.sub }], children: tab === "report" ? "Report" : tab === "inbox" ? "Inbox" : "\u{1F310}" })
                 },
                 tab
               )) }),
-              sheetTab === "inbox" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.body, children: inboxLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.sub }, children: "Loading\u2026" }) : selectedReportId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              sheetTab === "inbox" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: inboxLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.sub }, children: "Loading\u2026" }) : selectedReportId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TouchableOpacity, { onPress: () => setSelectedReportId(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.accent, marginBottom: 8 }, children: "\u2190 Back" }) }),
                 threadComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: [s.threadBubble, { backgroundColor: colors.card }], children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.sub, fontSize: 11 }, children: c.author_kind }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.text }, children: c.body })
                 ] }, c.id)),
-                inboxReports.find((r) => r.id === selectedReportId)?.status === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.verifyRow, children: [
+                VERIFIABLE_STATUSES.has(
+                  inboxReports.find((r) => r.id === selectedReportId)?.status ?? ""
+                ) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.verifyRow, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.accent }], onPress: () => submitFeedback("confirms"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.submitText, children: "Yes, fixed" }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.border }], onPress: () => submitFeedback("not_fixed"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.submitText, { color: colors.text }], children: "Not fixed" }) })
                 ] }),
@@ -527,102 +531,127 @@ var MushiBottomSheet = ({
               ] }) : inboxReports.map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.TouchableOpacity, { style: [s.inboxRow, { borderColor: colors.border }], onPress: () => openThread(r.id), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.text, fontWeight: "600" }, numberOfLines: 1, children: (r.summary ?? r.description ?? "Report").slice(0, 60) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.sub, fontSize: 11 }, children: r.status })
-              ] }, r.id)) }) : phase === "sent" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.sentWrap, children: [
+              ] }, r.id)) }) : sheetTab === "community" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.title, { color: colors.text }], children: "\u{1F310} Mushi Community" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.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__ */ (0, import_jsx_runtime.jsx)(
+                  import_react_native2.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__ */ (0, import_jsx_runtime.jsx)(import_react_native2.TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.submitText, children: "Send sign-in link \u2192" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.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__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.sentWrap, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.sentEmoji], children: "\u2705" }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.sentText, { color: colors.text }], children: "Report sent!" })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.body, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.title, { color: colors.text }], children: "Report an issue" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.catRow, children: CATEGORIES.map((c) => {
-                  const active = category === c.key;
-                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    import_react_native2.TouchableOpacity,
-                    {
-                      onPress: () => setCategory(c.key),
-                      activeOpacity: 0.7,
-                      style: [
-                        s.catBtn,
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_react_native2.ScrollView,
+                {
+                  style: s.body,
+                  keyboardShouldPersistTaps: "handled",
+                  contentContainerStyle: { paddingBottom: 24 },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.title, { color: colors.text }], children: "Report an issue" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.catRow, children: CATEGORIES.map((c) => {
+                      const active = category === c.key;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        import_react_native2.TouchableOpacity,
                         {
-                          backgroundColor: active ? colors.accent : colors.card,
-                          borderColor: active ? colors.accent : colors.border
-                        }
-                      ],
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.catEmoji, children: c.emoji }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          import_react_native2.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__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.catEmoji, children: c.emoji }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_react_native2.Text,
+                              {
+                                style: [
+                                  s.catLabel,
+                                  { color: active ? "#fff" : colors.text }
+                                ],
+                                children: c.label
+                              }
+                            )
+                          ]
+                        },
+                        c.key
+                      );
+                    }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_react_native2.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__ */ (0, import_jsx_runtime.jsx)(
-                  import_react_native2.TextInput,
-                  {
-                    style: [
-                      s.input,
+                        ],
+                        placeholder: "What happened?",
+                        placeholderTextColor: colors.sub,
+                        multiline: true,
+                        textAlignVertical: "top",
+                        value: description,
+                        onChangeText: setDescription,
+                        editable: phase === "form"
+                      }
+                    ),
+                    activeScreenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.screenshotRow, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_react_native2.Image,
+                        {
+                          source: { uri: activeScreenshot },
+                          style: s.screenshotThumb,
+                          accessibilityLabel: "Attached screenshot"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.screenshotMeta, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotSub, { color: colors.sub }], children: "Helps the team see the issue" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_react_native2.TouchableOpacity,
+                        {
+                          onPress: () => {
+                            setScreenshotAttached(false);
+                            onClearScreenshot?.();
+                          },
+                          hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+                          accessibilityLabel: "Remove screenshot",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
+                        }
+                      )
+                    ] }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_react_native2.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__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.submitText, !canSubmit && { color: colors.disabledText }], children: phase === "sending" ? "Sending\u2026" : "Submit" })
                       }
-                    ],
-                    placeholder: "What happened?",
-                    placeholderTextColor: colors.sub,
-                    multiline: true,
-                    textAlignVertical: "top",
-                    value: description,
-                    onChangeText: setDescription,
-                    editable: phase === "form"
-                  }
-                ),
-                activeScreenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.screenshotRow, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_native2.Image,
-                    {
-                      source: { uri: activeScreenshot },
-                      style: s.screenshotThumb,
-                      accessibilityLabel: "Attached screenshot"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.screenshotMeta, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotSub, { color: colors.sub }], children: "Helps the team see the issue" })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_native2.TouchableOpacity,
-                    {
-                      onPress: () => {
-                        setScreenshotAttached(false);
-                        onClearScreenshot?.();
-                      },
-                      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
-                      accessibilityLabel: "Remove screenshot",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
-                    }
-                  )
-                ] }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_react_native2.TouchableOpacity,
-                  {
-                    onPress: handleSubmit,
-                    disabled: !canSubmit,
-                    activeOpacity: 0.8,
-                    style: [
-                      s.submitBtn,
-                      { backgroundColor: canSubmit ? colors.accent : colors.border }
-                    ],
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: s.submitText, children: phase === "sending" ? "Sending\u2026" : "Submit" })
-                  }
-                )
-              ] })
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -798,15 +827,133 @@ var s = import_react_native2.StyleSheet.create({
 var import_react2 = require("react");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var FAB_SIZE = 56;
+var EDGE_PADDING = 12;
+function getScreenBounds() {
+  const { width, height } = import_react_native3.Dimensions.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 = (0, import_react_native3.useColorScheme)();
   const dark = scheme === "dark";
+  const draggable = config?.draggable ?? false;
+  const snapToEdge = config?.snapToEdge ?? true;
+  const persist = config?.persist ?? false;
+  const baseBottom = inset?.bottom ?? (import_react_native3.Platform.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 = (0, import_react2.useRef)(new import_react_native3.Animated.Value(1)).current;
+  const posX = (0, import_react2.useRef)(new import_react_native3.Animated.Value(baseX)).current;
+  const posY = (0, import_react2.useRef)(new import_react_native3.Animated.Value(0)).current;
+  const currentX = (0, import_react2.useRef)(baseX);
+  const currentY = (0, import_react2.useRef)(0);
+  const isDragging = (0, import_react2.useRef)(false);
+  const accentColor = accent ?? (dark ? "#0a84ff" : "#007aff");
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useCallback)(
+    (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;
+      import_react_native3.Animated.spring(posX, {
+        toValue: clampedX,
+        useNativeDriver: false,
+        damping: 18,
+        stiffness: 220
+      }).start();
+      import_react_native3.Animated.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 = (0, import_react2.useRef)(
+    draggable ? import_react_native3.PanResponder.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;
+      }
+    }) : import_react_native3.PanResponder.create({})
+  ).current;
   const handlePressIn = (0, import_react2.useCallback)(() => {
+    if (isDragging.current) return;
     import_react_native3.Animated.spring(scale, {
       toValue: 0.85,
       useNativeDriver: true,
@@ -821,39 +968,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__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native3.TouchableWithoutFeedback,
+    import_react_native3.Animated.View,
     {
-      onPress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native3.Animated.View,
+      ...draggable ? panResponder.panHandlers : {},
+      style: [
+        s2.fab,
         {
-          style: [
-            s2.fab,
-            positionStyle,
-            { bottom: inset?.bottom ?? (import_react_native3.Platform.OS === "ios" ? 50 : 28) },
-            {
-              backgroundColor: dark ? "#0a84ff" : "#007aff",
-              transform: [{ scale }],
-              shadowColor: dark ? "#0a84ff" : "#000"
-            }
-          ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Animated.Text, { style: s2.emoji, children: "\u{1F41B}" })
+          left: posX,
+          bottom: import_react_native3.Animated.add(new import_react_native3.Animated.Value(baseBottom), import_react_native3.Animated.multiply(posY, -1)),
+          backgroundColor: accentColor,
+          shadowColor: dark ? accentColor : "#000",
+          transform: [{ scale }]
         }
-      )
+      ],
+      onStartShouldSetResponder: () => !draggable,
+      onResponderGrant: handlePressIn,
+      onResponderRelease: handlePressOut,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Animated.Text, { style: s2.emoji, children: "\u{1F41B}" })
     }
   );
 };
 var s2 = import_react_native3.StyleSheet.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,

package/dist/index.d.cts

@@ -188,29 +188,25 @@ interface MushiBottomSheetProps {
 declare const MushiBottomSheet: FC<MushiBottomSheetProps>;
 
 /**
- * FILE: MushiFloatingButton.tsx
- * PURPOSE: Floating action button (FAB) that triggers the Mushi bug-report bottom sheet
+ * MushiFloatingButton — draggable, repositionable FAB for the Mushi SDK.
  *
- * OVERVIEW:
- * - Renders a persistent 🐛 button at bottom-right or bottom-left
- * - Animated press-scale effect via Animated.spring
- * - Position configurable through `buttonPosition` prop
- *
- * DEPENDENCIES:
- * - React Native built-in APIs only
- *
- * USAGE:
- * - Rendered automatically by MushiProvider when widget.trigger is 'button' or 'both'
- * - Can be used standalone: <MushiFloatingButton onPress={…} />
- *
- * TECHNICAL DETAILS:
- * - Uses Animated.Value for scale, driven by onPressIn / onPressOut
- * - Safe-area aware: extra bottom padding on iOS
- *
- * NOTES:
- * - Keeps zIndex high (9999) so it floats above app content
+ * Supports:
+ * - PanResponder drag with tap-vs-drag threshold (6 px)
+ * - Clamp to screen bounds with safe-area respect
+ * - Optional edge-snap on release (`snapToEdge`)
+ * - Persist position to AsyncStorage (opt-in via `persist` config)
+ * - Press-in / press-out spring scale animation
+ * - Dark/light adaptive colours
  */
 
+interface MushiFloatingButtonConfig {
+    /** Allow the FAB to be dragged. Default: false. */
+    draggable?: boolean;
+    /** Snap FAB to the nearest vertical edge on release. Default: true. */
+    snapToEdge?: boolean;
+    /** Persist FAB position across app restarts via AsyncStorage. Default: false. */
+    persist?: boolean;
+}
 interface MushiFloatingButtonProps {
     onPress: () => void;
     position?: 'bottom-right' | 'bottom-left';
@@ -219,6 +215,10 @@ interface MushiFloatingButtonProps {
         left?: number;
         right?: number;
     };
+    /** Draggable + persist config */
+    config?: MushiFloatingButtonConfig;
+    /** Accent color (hex) — falls back to platform blue */
+    accent?: string;
 }
 declare const MushiFloatingButton: FC<MushiFloatingButtonProps>;
 

package/dist/index.d.ts

@@ -188,29 +188,25 @@ interface MushiBottomSheetProps {
 declare const MushiBottomSheet: FC<MushiBottomSheetProps>;
 
 /**
- * FILE: MushiFloatingButton.tsx
- * PURPOSE: Floating action button (FAB) that triggers the Mushi bug-report bottom sheet
+ * MushiFloatingButton — draggable, repositionable FAB for the Mushi SDK.
  *
- * OVERVIEW:
- * - Renders a persistent 🐛 button at bottom-right or bottom-left
- * - Animated press-scale effect via Animated.spring
- * - Position configurable through `buttonPosition` prop
- *
- * DEPENDENCIES:
- * - React Native built-in APIs only
- *
- * USAGE:
- * - Rendered automatically by MushiProvider when widget.trigger is 'button' or 'both'
- * - Can be used standalone: <MushiFloatingButton onPress={…} />
- *
- * TECHNICAL DETAILS:
- * - Uses Animated.Value for scale, driven by onPressIn / onPressOut
- * - Safe-area aware: extra bottom padding on iOS
- *
- * NOTES:
- * - Keeps zIndex high (9999) so it floats above app content
+ * Supports:
+ * - PanResponder drag with tap-vs-drag threshold (6 px)
+ * - Clamp to screen bounds with safe-area respect
+ * - Optional edge-snap on release (`snapToEdge`)
+ * - Persist position to AsyncStorage (opt-in via `persist` config)
+ * - Press-in / press-out spring scale animation
+ * - Dark/light adaptive colours
  */
 
+interface MushiFloatingButtonConfig {
+    /** Allow the FAB to be dragged. Default: false. */
+    draggable?: boolean;
+    /** Snap FAB to the nearest vertical edge on release. Default: true. */
+    snapToEdge?: boolean;
+    /** Persist FAB position across app restarts via AsyncStorage. Default: false. */
+    persist?: boolean;
+}
 interface MushiFloatingButtonProps {
     onPress: () => void;
     position?: 'bottom-right' | 'bottom-left';
@@ -219,6 +215,10 @@ interface MushiFloatingButtonProps {
         left?: number;
         right?: number;
     };
+    /** Draggable + persist config */
+    config?: MushiFloatingButtonConfig;
+    /** Accent color (hex) — falls back to platform blue */
+    accent?: string;
 }
 declare const MushiFloatingButton: FC<MushiFloatingButtonProps>;
 

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,
@@ -306,6 +306,7 @@ import {
   Dimensions as Dimensions2,
   Platform as Platform2,
   KeyboardAvoidingView,
+  ScrollView,
   useColorScheme
 } from "react-native";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -319,6 +320,7 @@ var CATEGORIES = [
   { key: "confusing", emoji: "\u{1F615}", label: "Confusing" },
   { key: "other", emoji: "\u{1F4AC}", label: "Other" }
 ];
+var VERIFIABLE_STATUSES = /* @__PURE__ */ new Set(["fixed", "resolved", "verified"]);
 var MushiBottomSheet = ({
   visible,
   onClose,
@@ -340,12 +342,6 @@ var MushiBottomSheet = ({
   const [threadComments, setThreadComments] = useState([]);
   const [replyText, setReplyText] = useState("");
   const [screenshotAttached, setScreenshotAttached] = useState(true);
-  useEffect(() => {
-    if (visible) {
-      setScreenshotAttached(true);
-      if (sheetTab === "inbox") void loadInbox();
-    }
-  }, [visible, sheetTab]);
   const loadInbox = useCallback(async () => {
     if (!mushi?.listMyReports) return;
     setInboxLoading(true);
@@ -356,6 +352,12 @@ var MushiBottomSheet = ({
       setInboxLoading(false);
     }
   }, [mushi]);
+  useEffect(() => {
+    if (visible) {
+      setScreenshotAttached(true);
+      if (sheetTab === "inbox") void loadInbox();
+    }
+  }, [visible, sheetTab, loadInbox]);
   const openThread = useCallback(async (reportId) => {
     setSelectedReportId(reportId);
     if (!mushi?.listMyComments) return;
@@ -457,13 +459,14 @@ 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 colors = dark ? { bg: "#1c1c1e", text: "#f2f2f7", sub: "#8e8e93", card: "#2c2c2e", accent: "#0a84ff", border: "#38383a", backdrop: "rgba(0,0,0,0.6)", disabled: "#3a3a3c", disabledText: "#636366" } : { bg: "#ffffff", text: "#1c1c1e", sub: "#8e8e93", card: "#f2f2f7", accent: "#007aff", border: "#e5e5ea", backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: "#8e8e93" };
   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,
@@ -481,7 +484,7 @@ 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__ */ jsx(View, { style: s.tabRow, children: ["report", "inbox", "community"].map((tab) => /* @__PURE__ */ jsx(
                 TouchableOpacity,
                 {
                   onPress: () => {
@@ -490,17 +493,19 @@ 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.accent : colors.sub }], children: tab === "report" ? "Report" : tab === "inbox" ? "Inbox" : "\u{1F310}" })
                 },
                 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 }),
                   /* @__PURE__ */ jsx(Text, { style: { color: colors.text }, children: c.body })
                 ] }, c.id)),
-                inboxReports.find((r) => r.id === selectedReportId)?.status === "fixed" && /* @__PURE__ */ jsxs(View, { style: s.verifyRow, children: [
+                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.border }], onPress: () => submitFeedback("not_fixed"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.text }], children: "Not fixed" }) })
                 ] }),
@@ -518,102 +523,127 @@ var MushiBottomSheet = ({
               ] }) : 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: [s.title, { color: colors.text }], children: "\u{1F310} Mushi Community" }),
+                /* @__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, 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.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,
                         {
-                          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 ? "#fff" : 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, !canSubmit && { color: colors.disabledText }], children: phase === "sending" ? "Sending\u2026" : "Submit" })
                       }
-                    ],
-                    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" })
-                  }
-                )
-              ] })
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -786,24 +816,143 @@ 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 { 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 ?? (dark ? "#0a84ff" : "#007aff");
+  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,
@@ -818,39 +967,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: "\u{1F41B}" })
     }
   );
 };
 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,
@@ -892,7 +1037,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);
     }
@@ -941,7 +1086,7 @@ function MushiProvider({ children, ...config }) {
       networkRef.current?.restore();
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     let unsubscribe;
     try {
       const NetInfo = __require("@react-native-community/netinfo").default;
@@ -976,7 +1121,7 @@ function MushiProvider({ children, ...config }) {
   }, []);
   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;
@@ -1057,7 +1202,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);
@@ -1240,10 +1385,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?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mushi-mushi/react-native",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "license": "MIT",
   "description": "React Native SDK for Mushi Mushi — shake-to-report, bottom sheet widget, full context capture",
   "main": "./dist/index.js",
@@ -33,7 +33,7 @@
     }
   },
   "dependencies": {
-    "@mushi-mushi/core": "^1.12.0"
+    "@mushi-mushi/core": "^1.14.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",