@mushi-mushi/react-native 0.3.2 → 0.8.0

package/CONTRIBUTING.md

@@ -33,6 +33,10 @@ pnpm lint         # ESLint
 pnpm format       # Prettier
 ```
 
+Ad-hoc screenshots captured during UI reviews can live temporarily at the repo
+root, but root-level `*.png` files are intentionally ignored. Canonical
+screenshots that should be versioned belong under `docs/screenshots/`.
+
 ### Working on a single package
 
 ```bash

package/README.md

@@ -25,7 +25,30 @@ The provider renders a floating 🐛 button and a slide-up bottom sheet by defau
 | Value | Behavior |
 |-------|----------|
 | `'button'` (default) | Shows floating action button |
-| `'manual'` | No auto-UI — call `open()` programmatically |
+| `'shake'` | Installs a shake-to-report listener (no visible UI) |
+| `'both'` | Floating button + shake listener |
+| `'manual'` / `'hidden'` / `'none'` | No auto-UI — call `open()` programmatically |
+| `'attach'` | Hides the default UI; the host renders its own button and calls `attachTo()` |
+
+Shake detection requires the optional `expo-sensors` peer dependency. Install
+it once with `expo install expo-sensors` (or `npm install expo-sensors`); the
+listener is wired lazily so apps that ship `'button'` only never pay the cost.
+
+`widget.inset` (and the `MushiFloatingButton` `inset` prop) accepts
+`{ top?, right?, bottom?, left? }` in points so the trigger can clear tab
+bars and host CTAs.
+
+```tsx
+<MushiProvider
+  projectId="proj_xxx"
+  apiKey="mushi_xxx"
+  config={{
+    widget: { trigger: 'both', inset: { bottom: 96, right: 16 } },
+  }}
+>
+  <Navigation />
+</MushiProvider>
+```
 
 ### Hooks
 
@@ -36,6 +59,10 @@ const { submitReport } = useMushiReport()
 const { open, close } = useMushiWidget()
 ```
 
+The provider's `useMushi()` instance also exposes the cross-platform trigger
+controls — `show()`, `hide()`, `attachTo(elementRefOrId)`, and
+`setTrigger(mode)` — so a host app can toggle the launcher per screen.
+
 ### Standalone Components
 
 Use the widget components directly if you need custom integration:

package/SECURITY.md

@@ -48,3 +48,77 @@ We will acknowledge receipt within 48 hours and aim to release a patch within 7
 - **Rotate API keys** regularly via the admin console
 - **Enable SSO** for team projects (Enterprise tier)
 - **Review audit logs** periodically for suspicious activity
+
+## Supply-chain hardening (how this package is protected)
+
+Mushi Mushi is built and published with the controls below. Consumers can
+verify each control independently — the goal is to make tampering both
+difficult and detectable.
+
+### Publish-time controls
+
+| Control | What it does | How to verify |
+|---|---|---|
+| **npm Trusted Publisher (OIDC)** | Every release is published from `.github/workflows/release.yml` on `master` using a short-lived OIDC token. Long-lived `NPM_TOKEN` is not used for publishing. | `npm view @mushi-mushi/<pkg> --json` shows `"trustedPublisher"` populated for recent versions. |
+| **npm provenance attestations** | Every published tarball ships a [Sigstore provenance attestation](https://docs.npmjs.com/generating-provenance-statements) cryptographically linking the tarball to the exact GitHub Actions run that built it. | `npm audit signatures` (run inside any project that depends on `@mushi-mushi/*`) reports `verified registry signatures` and `verified attestations`. The npm web UI shows a "Built and signed on GitHub Actions" badge on each version. |
+| **Pre-publish workspace-protocol guard** | Aborts the publish if `workspace:*` ranges leaked into the tarball (the bug class behind the v0.1.0 incident). | `scripts/check-workspace-protocol.mjs` runs before `changeset publish` in `pnpm release`. |
+| **Post-publish tarball verification** | Re-downloads each just-published tarball and asserts it doesn't contain `workspace:*`. | See the "Verify published tarballs do not contain workspace:*" step in `release.yml`. |
+| **Post-publish `npm audit signatures`** | Re-installs each published version and validates registry signatures + provenance against npm's transparency log. | See the "Audit signatures of installed dependencies" step in `release.yml`. |
+
+### Build-time controls
+
+| Control | What it does |
+|---|---|
+| **All third-party GitHub Actions pinned to commit SHAs** | Every `uses:` in every workflow under `.github/workflows/` is pinned to a 40-character commit SHA with a version comment. Floating tags (`@v4`, `@main`) are mutable and were the entry point for the [tj-actions/changed-files compromise (CVE-2025-30066)](https://github.com/step-security/harden-runner#detected-attacks). |
+| **Harden-Runner egress audit on every job** | [step-security/harden-runner](https://github.com/step-security/harden-runner) records every outbound network call, file write, and process spawn on every CI runner. Detects exfiltration attempts in real time — caught the tj-actions, NX, Shai-Hulud, and Axios attacks for other projects. |
+| **OpenSSF Scorecard** | Weekly + on-push score of the repo's security posture (Pinned-Dependencies, Token-Permissions, Branch-Protection, Code-Review, Dangerous-Workflow, Maintained, SAST, Security-Policy, Signed-Releases, Vulnerabilities). Public results at [scorecard.dev](https://scorecard.dev/viewer/?uri=github.com/kensaurus/mushi-mushi). |
+| **Server-side secret scan (Gitleaks)** | Every PR and every push to `master` runs Gitleaks across the diff / full tree. Belt-and-suspenders to the local pre-commit hook (`scripts/check-no-secrets.mjs`) which can be bypassed with `--no-verify`. |
+| **Local pre-commit secret scanner** | `scripts/check-no-secrets.mjs` runs as a git hook installed by `pnpm install`, blocking commits that look like AWS / Stripe / GitHub / Anthropic / OpenAI / Slack / Supabase keys. |
+| **CodeQL `security-extended`** | Semantic analysis of every TypeScript / JavaScript change finds injection sinks, taint flows, prototype pollution, etc. Runs on every PR, push, and weekly cron. |
+| **Dependency review on PRs** | `actions/dependency-review-action` blocks the PR if it adds or upgrades a dep with a high-severity advisory. |
+| **`pnpm audit --prod --audit-level=high`** | Weekly cron + every push to `master` fails on any high/critical advisory in production deps. |
+
+### Install-time controls (protect the project's own dependency graph)
+
+| Control | What it does |
+|---|---|
+| **`min-release-age` (npm) / `minimumReleaseAge` (pnpm)** | Refuses to resolve any dep version published less than 7 days ago. The Axios 1.14.1 / 0.30.4 compromise (Mar 2026) was detected and removed within ~5 hours; Shai-Hulud (Sep 2025) within <12 hours — a 7-day cooldown blocks every publicly-disclosed 2025–2026 npm supply-chain attack outright. |
+| **`strictDepBuilds: true`** | Fails the install if any transitive dep tries to run a `postinstall` hook the workspace hasn't pre-approved (`onlyBuiltDependencies` allow-list). |
+| **`blockExoticSubdeps: true`** | Refuses to resolve transitive deps from git URLs, tarball URLs, or filesystem paths — anything that didn't go through the npm registry's signing pipeline. |
+| **Dependabot with cooldown** | Routine dep upgrades wait 7 days; security advisories bypass the cooldown automatically. |
+| **`pnpm audit signatures`-style verification** | The release pipeline re-runs `npm audit signatures` against each published version after the publish, with `--audit-level=high`. |
+
+### Verifying a Mushi Mushi tarball before installing
+
+```bash
+# 1. Check provenance attestation matches the public GitHub Actions run
+npm view @mushi-mushi/core --json | jq '.signatures, .dist'
+
+# 2. Inside your own project after install
+npm audit signatures
+
+# Expected: every @mushi-mushi/* package reports
+#   "verified registry signature"
+#   "verified attestation"
+```
+
+If `npm audit signatures` reports any `@mushi-mushi/*` package as unsigned
+or with an invalid attestation, **stop the install and email
+kensaurus@gmail.com immediately** — that's the symptom of either a
+registry compromise or a tampered tarball, and we want to know within
+hours, not days.
+
+### What this hardening does NOT cover
+
+- **Self-hosted deployments.** Once the package is on your machine, the
+  security of your `node_modules`, build pipeline, and runtime is your
+  responsibility. The hardening above protects the path from source to
+  registry; it cannot protect a tarball after it has been downloaded.
+- **Compromise of `kensaurus@gmail.com`.** A trusted-publisher rule still
+  lets the legitimate maintainer publish from any branch they push. If
+  you find yourself with admin access to this repo, treat
+  `.github/workflows/release.yml` as a tier-0 secret.
+- **First-party bugs.** Provenance proves *who* built the tarball and
+  *when*; it does not prove the code is bug-free. CodeQL + tests cover
+  that surface, but no automation catches everything — please continue
+  to report issues to the address above.

package/dist/index.cjs

@@ -523,7 +523,8 @@ var import_react_native3 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var MushiFloatingButton = ({
   onPress,
-  position = "bottom-right"
+  position = "bottom-right",
+  inset
 }) => {
   const scheme = (0, import_react_native3.useColorScheme)();
   const dark = scheme === "dark";
@@ -544,7 +545,7 @@ var MushiFloatingButton = ({
       stiffness: 250
     }).start();
   }, [scale]);
-  const positionStyle = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  const positionStyle = position === "bottom-left" ? { left: inset?.left ?? 20 } : { right: inset?.right ?? 20 };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_native3.TouchableWithoutFeedback,
     {
@@ -557,6 +558,7 @@ var MushiFloatingButton = ({
           style: [
             s2.fab,
             positionStyle,
+            { bottom: inset?.bottom ?? (import_react_native3.Platform.OS === "ios" ? 50 : 28) },
             {
               backgroundColor: dark ? "#0a84ff" : "#007aff",
               transform: [{ scale }],
@@ -572,7 +574,6 @@ var MushiFloatingButton = ({
 var s2 = import_react_native3.StyleSheet.create({
   fab: {
     position: "absolute",
-    bottom: import_react_native3.Platform.OS === "ios" ? 50 : 28,
     width: 56,
     height: 56,
     borderRadius: 28,
@@ -625,6 +626,33 @@ function MushiProvider({ children, ...config }) {
   }, []);
   const open = (0, import_react3.useCallback)(() => setSheetVisible(true), []);
   const close = (0, import_react3.useCallback)(() => setSheetVisible(false), []);
+  const attachTo = (0, import_react3.useCallback)(() => ({ onPress: open }), [open]);
+  (0, import_react3.useEffect)(() => {
+    const trigger2 = config.widget?.trigger ?? "button";
+    if (trigger2 !== "shake" && trigger2 !== "both") return;
+    let disposed = false;
+    let cleanup;
+    let lastShake = 0;
+    const threshold = config.widget?.shakeThreshold ?? 2.7;
+    new Function("specifier", "return import(specifier)")("expo-sensors").then((mod) => {
+      if (disposed) return;
+      mod.Accelerometer.setUpdateInterval(120);
+      const sub = mod.Accelerometer.addListener((evt) => {
+        const g = Math.sqrt(evt.x * evt.x + evt.y * evt.y + evt.z * evt.z);
+        if (g < threshold) return;
+        const now = Date.now();
+        if (now - lastShake < 1e3) return;
+        lastShake = now;
+        open();
+      });
+      cleanup = () => sub.remove();
+    }).catch(() => {
+    });
+    return () => {
+      disposed = true;
+      cleanup?.();
+    };
+  }, [config.widget?.trigger, config.widget?.shakeThreshold, open]);
   const submitReport = (0, import_react3.useCallback)(
     async (data) => {
       const deviceInfo = getDeviceInfo();
@@ -664,22 +692,24 @@ function MushiProvider({ children, ...config }) {
     () => ({
       open,
       close,
+      attachTo,
       submitReport,
       getDeviceInfo,
       getConsoleEntries: () => consoleRef.current?.getEntries() ?? [],
       getNetworkEntries: () => networkRef.current?.getEntries() ?? []
     }),
-    [open, close, submitReport]
+    [open, close, attachTo, submitReport]
   );
   const trigger = config.widget?.trigger ?? "button";
-  const showFab = trigger === "button" || trigger === "both";
+  const showFab = trigger === "button" || trigger === "both" || trigger === "auto" || trigger === "edge-tab";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MushiContext.Provider, { value: instance, children: [
     children,
     showFab && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       MushiFloatingButton,
       {
         onPress: open,
-        position: config.widget?.buttonPosition
+        position: config.widget?.buttonPosition,
+        inset: config.widget?.inset
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MushiBottomSheet, { visible: sheetVisible, onClose: close })

package/dist/index.d.cts

@@ -44,9 +44,14 @@ interface MushiRNConfig {
     apiKey: string;
     endpoint?: string;
     widget?: {
-        trigger?: 'shake' | 'button' | 'both' | 'manual';
+        trigger?: 'shake' | 'button' | 'both' | 'manual' | 'auto' | 'edge-tab' | 'hidden' | 'attach';
         shakeThreshold?: number;
         buttonPosition?: 'bottom-right' | 'bottom-left';
+        inset?: {
+            bottom?: number;
+            left?: number;
+            right?: number;
+        };
     };
     capture?: {
         console?: boolean;
@@ -63,6 +68,9 @@ interface MushiRNConfig {
 interface MushiRNInstance {
     open(): void;
     close(): void;
+    attachTo(): {
+        onPress: () => void;
+    };
     submitReport(data: {
         description: string;
         category: string;
@@ -150,6 +158,11 @@ declare const MushiBottomSheet: FC<MushiBottomSheetProps>;
 interface MushiFloatingButtonProps {
     onPress: () => void;
     position?: 'bottom-right' | 'bottom-left';
+    inset?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
 }
 declare const MushiFloatingButton: FC<MushiFloatingButtonProps>;
 

package/dist/index.d.ts

@@ -44,9 +44,14 @@ interface MushiRNConfig {
     apiKey: string;
     endpoint?: string;
     widget?: {
-        trigger?: 'shake' | 'button' | 'both' | 'manual';
+        trigger?: 'shake' | 'button' | 'both' | 'manual' | 'auto' | 'edge-tab' | 'hidden' | 'attach';
         shakeThreshold?: number;
         buttonPosition?: 'bottom-right' | 'bottom-left';
+        inset?: {
+            bottom?: number;
+            left?: number;
+            right?: number;
+        };
     };
     capture?: {
         console?: boolean;
@@ -63,6 +68,9 @@ interface MushiRNConfig {
 interface MushiRNInstance {
     open(): void;
     close(): void;
+    attachTo(): {
+        onPress: () => void;
+    };
     submitReport(data: {
         description: string;
         category: string;
@@ -150,6 +158,11 @@ declare const MushiBottomSheet: FC<MushiBottomSheetProps>;
 interface MushiFloatingButtonProps {
     onPress: () => void;
     position?: 'bottom-right' | 'bottom-left';
+    inset?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
 }
 declare const MushiFloatingButton: FC<MushiFloatingButtonProps>;
 

package/dist/index.js

@@ -509,7 +509,8 @@ import {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var MushiFloatingButton = ({
   onPress,
-  position = "bottom-right"
+  position = "bottom-right",
+  inset
 }) => {
   const scheme = useColorScheme2();
   const dark = scheme === "dark";
@@ -530,7 +531,7 @@ var MushiFloatingButton = ({
       stiffness: 250
     }).start();
   }, [scale]);
-  const positionStyle = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  const positionStyle = position === "bottom-left" ? { left: inset?.left ?? 20 } : { right: inset?.right ?? 20 };
   return /* @__PURE__ */ jsx2(
     TouchableWithoutFeedback,
     {
@@ -543,6 +544,7 @@ var MushiFloatingButton = ({
           style: [
             s2.fab,
             positionStyle,
+            { bottom: inset?.bottom ?? (Platform3.OS === "ios" ? 50 : 28) },
             {
               backgroundColor: dark ? "#0a84ff" : "#007aff",
               transform: [{ scale }],
@@ -558,7 +560,6 @@ var MushiFloatingButton = ({
 var s2 = StyleSheet2.create({
   fab: {
     position: "absolute",
-    bottom: Platform3.OS === "ios" ? 50 : 28,
     width: 56,
     height: 56,
     borderRadius: 28,
@@ -611,6 +612,33 @@ function MushiProvider({ children, ...config }) {
   }, []);
   const open = useCallback3(() => setSheetVisible(true), []);
   const close = useCallback3(() => setSheetVisible(false), []);
+  const attachTo = useCallback3(() => ({ onPress: open }), [open]);
+  useEffect2(() => {
+    const trigger2 = config.widget?.trigger ?? "button";
+    if (trigger2 !== "shake" && trigger2 !== "both") return;
+    let disposed = false;
+    let cleanup;
+    let lastShake = 0;
+    const threshold = config.widget?.shakeThreshold ?? 2.7;
+    new Function("specifier", "return import(specifier)")("expo-sensors").then((mod) => {
+      if (disposed) return;
+      mod.Accelerometer.setUpdateInterval(120);
+      const sub = mod.Accelerometer.addListener((evt) => {
+        const g = Math.sqrt(evt.x * evt.x + evt.y * evt.y + evt.z * evt.z);
+        if (g < threshold) return;
+        const now = Date.now();
+        if (now - lastShake < 1e3) return;
+        lastShake = now;
+        open();
+      });
+      cleanup = () => sub.remove();
+    }).catch(() => {
+    });
+    return () => {
+      disposed = true;
+      cleanup?.();
+    };
+  }, [config.widget?.trigger, config.widget?.shakeThreshold, open]);
   const submitReport = useCallback3(
     async (data) => {
       const deviceInfo = getDeviceInfo();
@@ -650,22 +678,24 @@ function MushiProvider({ children, ...config }) {
     () => ({
       open,
       close,
+      attachTo,
       submitReport,
       getDeviceInfo,
       getConsoleEntries: () => consoleRef.current?.getEntries() ?? [],
       getNetworkEntries: () => networkRef.current?.getEntries() ?? []
     }),
-    [open, close, submitReport]
+    [open, close, attachTo, submitReport]
   );
   const trigger = config.widget?.trigger ?? "button";
-  const showFab = trigger === "button" || trigger === "both";
+  const showFab = trigger === "button" || trigger === "both" || trigger === "auto" || trigger === "edge-tab";
   return /* @__PURE__ */ jsxs2(MushiContext.Provider, { value: instance, children: [
     children,
     showFab && /* @__PURE__ */ jsx3(
       MushiFloatingButton,
       {
         onPress: open,
-        position: config.widget?.buttonPosition
+        position: config.widget?.buttonPosition,
+        inset: config.widget?.inset
       }
     ),
     /* @__PURE__ */ jsx3(MushiBottomSheet, { visible: sheetVisible, onClose: close })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mushi-mushi/react-native",
-  "version": "0.3.2",
+  "version": "0.8.0",
   "license": "MIT",
   "description": "React Native SDK for Mushi Mushi — shake-to-report, bottom sheet widget, full context capture",
   "main": "./dist/index.js",
@@ -9,6 +9,7 @@
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.19",
     "@react-navigation/native": ">=6",
+    "expo-sensors": ">=13",
     "react": ">=18",
     "react-native": ">=0.72"
   },
@@ -18,10 +19,13 @@
     },
     "@react-native-async-storage/async-storage": {
       "optional": true
+    },
+    "expo-sensors": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@mushi-mushi/core": "^0.5.0"
+    "@mushi-mushi/core": "^0.8.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.4",