@mushi-mushi/react-native 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @mushi-mushi/react-native
 
+## 0.21.0
+
+### Minor Changes
+
+- 26e038f: SDK polish from the UI/UX audit pass:
+
+  - **web**: the widget now live-restyles when the OS `prefers-color-scheme`
+    changes under `theme: 'auto' | 'inherit'`, and mount is hardened so a host
+    page whose `matchMedia` lacks the modern `addEventListener` can never throw.
+    Richer banner layout (pill + message + flat actions), `hideOnSelector`
+    suppression, submit failure-kind surfacing, and expanded i18n copy
+    (en/es/ja/th).
+  - **react-native**: banner, bottom-sheet, and floating-button polish;
+    `submitReport()` now resolves to a typed failure result instead of
+    `undefined` when called before the provider finishes initializing.
+  - **core**: additional shared design tokens consumed by the surfaces above.
+
+### Patch Changes
+
+- Updated dependencies [26e038f]
+  - @mushi-mushi/web@1.26.0
+  - @mushi-mushi/core@1.26.0
+
+## 0.20.1
+
+### Patch Changes
+
+- 5feac27: # v0.20.1 — Post-release SDK reliability fixes
+
+  - **React Native types resolve after publish**: removed the `web-i18n.d.ts` ambient shim that re-exported `MushiLocale` from a monorepo-relative source path (`../../web/src/i18n/types`) that does not exist in a published install. `@mushi-mushi/web` already ships proper `./i18n` types via its `exports` map, which `moduleResolution: "bundler"`/`nodenext` resolves directly.
+
+- Updated dependencies [5feac27]
+  - @mushi-mushi/web@1.21.1
+
 ## 0.20.0
 
 ### Minor Changes

package/CONTRIBUTING.md

@@ -76,6 +76,7 @@ packages/
 apps/
   admin/         Admin dashboard (React + Tailwind)
   docs/          Documentation site (Nextra — apps/docs)
+  testers/       Tester marketplace portal (Next.js)
 tooling/
   eslint-config/ Shared ESLint flat config
   tsconfig/      Shared TypeScript configs
@@ -118,15 +119,22 @@ If your PR changes **user-visible SDK or CLI behavior**, update docs in the **sa
 Guardrails (run locally before pushing):
 
 ```bash
-pnpm check:docs-stats          # root README stat badges
+pnpm check:docs-stats          # root README stat badges + glance <sub> line
 pnpm check:sdk-version-matrix  # apps/docs/content/sdks/index.mdx versions
 pnpm check:internal-doc-links  # dead /foo links in MDX
-pnpm check:onboarding-drift    # phantom MCP env vars / stale tool names
+pnpm check:onboarding-drift    # phantom MCP env vars / stale tool names / native install coords
+pnpm check:catalog-sync        # MCP catalog ↔ admin counts ↔ prose "N tools"
+pnpm check:mcp-tools-doc       # mcp-tools.generated.mdx stale check
 pnpm check:bundle-docs         # @mushi-mushi/web size-limit vs README
+pnpm check:docs-drift          # versions + public docs links
 pnpm gen:llms-txt              # regenerate apps/docs/public/llms.txt after nav changes
 pnpm gen:mcp-tools-doc         # regenerate sdks/mcp-tools.generated.mdx from catalog.ts
 ```
 
+**Same-PR rule:** if behavior, env vars, CLI commands, MCP tools, or install
+coordinates change, update the matching docs in this PR and run
+`pnpm check:docs-drift && pnpm check:onboarding-drift && pnpm check:catalog-sync`.
+
 README changes on npm packages only appear on [npmjs.com](https://www.npmjs.com) after the next **Changesets publish**.
 
 ## Changesets

package/README.md

@@ -2,7 +2,7 @@
 
 > **Your AI wrote it. Mushi tells you why it broke.**
 
-React Native SDK for [Mushi Mushi](https://www.npmjs.com/package/mushi-mushi) — shake-to-report widget, offline queue, and the closed-loop lesson layer for iOS + Android.
+React Native SDK for [Mushi Mushi](https://www.npmjs.com/package/mushi-mushi) — shake-to-report widget, offline queue, and a plain-English diagnosis in your editor, for iOS + Android.
 
 > **One-command setup:** `npx mushi-mushi` auto-detects React Native / Expo and installs this package with the right env vars.
 >
@@ -12,6 +12,20 @@ React Native SDK for [Mushi Mushi](https://www.npmjs.com/package/mushi-mushi)
 
 Every bug your users feel — a button that won't tap, a screen that freezes, a layout that folds on their device — gets captured, classified by AI, and fed into a lesson library that prevents the same class of mistake in the next PR review and the next AI agent run. That's the closed loop the main [`mushi-mushi`](https://www.npmjs.com/package/mushi-mushi) README describes. This package is the mobile entry point.
 
+## Error monitoring (optional)
+
+Mushi captures user-reported bugs through its own ingest pipeline. If you also run **Sentry** in your React Native app, wire both for full coverage:
+
+```tsx
+import * as Sentry from '@sentry/react-native'
+
+Sentry.init({ dsn: process.env.EXPO_PUBLIC_SENTRY_DSN })
+
+// Mushi handles shake-to-report + screenshot context; Sentry handles thrown errors.
+```
+
+See [`@mushi-mushi/web` Sentry bridge](https://github.com/kensaurus/mushi-mushi/tree/master/packages/web#sentry-companion) for the dual-capture pattern on web.
+
 ## Quick start
 
 ```tsx
@@ -168,4 +182,4 @@ MIT
 <!-- mushi-readme-stats-footer -->
 ---
 
-<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>
+<sub>Monorepo scale (July 2026): 51 edge functions · 323 SQL migrations · 13 outbound plugins · 11 inbound adapters · 19 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/SECURITY.md

@@ -111,7 +111,7 @@ What we treat as in-scope attacker capabilities, and what we don't.
 | User pasting a Stripe / OpenAI / GitHub PAT into a bug report | ✅ | PII scrubber redacts ~15 vendor token formats client-side before the report leaves the device. Mirrors `packages/core/src/pii-scrubber.ts` across iOS, Android, Flutter, React Native. |
 | Stolen end-user device with the SDK installed | ⚠️ partial | Offline queue is AsyncStorage / Keychain / SharedPreferences — no app-level encryption beyond the OS default. Reports waiting to flush are vulnerable to a forensic attacker. |
 | Compromised Supabase service-role key | ❌ | Treated as a tier-0 incident; would require key rotation and audit-log forensics. Not defendable in software. |
-| Compromise of `kensaurus@gmail.com` | ❌ | Treated as a project-fork event; downstream consumers should pin to the last known-good version and follow the new release channel. |
+| Compromise of `kensaurus@gmail.com` mail account | ❌ | Treated as a project-fork event; downstream consumers should pin to the last known-good version and follow the new release channel. |
 | Physical / OS-level attacker on an end-user device | ❌ | Out of scope. |
 | Malicious fork using the Mushi name to ship malware | ❌ (technical) ✅ (legal) | The MIT / AGPLv3 grant lets the fork exist; the trademark policy (`TRADEMARK.md`) makes shipping it under the Mushi name an infringement we will pursue. |
 
@@ -157,6 +157,29 @@ Structured fields you set explicitly (`metadata.userEmail`,
 opt-in attribution data, and silently rewriting them would break
 support workflows.
 
+### CLI funnel telemetry
+
+The Mushi CLI sends two fire-and-forget signals to `/v1/cli/funnel` on your
+project's endpoint to help us detect where the onboarding wizard drops off:
+
+| Signal | When | What is sent |
+|--------|------|-------------|
+| `wizard_env_written` | After `npx mushi-mushi` writes `.env.local` | `event`, `source: "cli"` |
+| `mcp_setup_done` | After `mushi setup --ide` verifies the MCP key | `event`, `source: "cli"` |
+
+No file contents, stack traces, or identifiers beyond your project ID and API
+key are sent. The key is already on the endpoint — this adds no new disclosure.
+
+**Opt out** by setting `MUSHI_NO_TELEMETRY=1` in your shell or CI environment:
+
+```bash
+MUSHI_NO_TELEMETRY=1 npx mushi-mushi
+MUSHI_NO_TELEMETRY=1 mushi setup --ide cursor
+```
+
+These signals never block or delay the wizard — they time out silently after
+4 seconds and errors are discarded.
+
 ### Where data lives
 
 - **Reports & telemetry** — Supabase Postgres in the `us-west-1` region.

package/dist/index.cjs

@@ -543,6 +543,7 @@ var MushiBottomSheet = ({
   const [category, setCategory] = (0, import_react.useState)(null);
   const [description, setDescription] = (0, import_react.useState)("");
   const [phase, setPhase] = (0, import_react.useState)("form");
+  const [submitError, setSubmitError] = (0, import_react.useState)(null);
   const [sheetTab, setSheetTab] = (0, import_react.useState)("report");
   const [inboxReports, setInboxReports] = (0, import_react.useState)([]);
   const [inboxLoading, setInboxLoading] = (0, import_react.useState)(false);
@@ -616,6 +617,8 @@ var MushiBottomSheet = ({
         ...prev,
         { role: "bot", text: botText, options: reply.options }
       ]);
+    } catch {
+      setAssistantError("Could not reach the assistant. Try again.");
     } finally {
       setAssistantSending(false);
     }
@@ -689,24 +692,46 @@ var MushiBottomSheet = ({
   ).current;
   const handleSubmit = async () => {
     if (!category || !description.trim() || !mushi) return;
+    const trimmed = description.trim();
+    if (trimmed.length < 20) {
+      setSubmitError("Please write at least 20 characters so we can understand the issue.");
+      return;
+    }
+    setSubmitError(null);
     setPhase("sending");
     try {
-      await mushi.submitReport({
+      const outcome = await mushi.submitReport({
         category,
-        description: description.trim(),
+        description: trimmed,
         screenshotDataUrl: screenshotDataUrl && screenshotAttached ? screenshotDataUrl : void 0
       });
+      if (!outcome.ok) {
+        if (outcome.failureKind === "credentials" || outcome.failureKind === "quota") {
+          setSubmitError("Could not send \u2014 check the project API key or plan quota.");
+          setPhase("error");
+          return;
+        }
+        if (outcome.failureKind === "rate_limited") {
+          setSubmitError("Sending too fast \u2014 we queued this and will retry shortly.");
+          setPhase("error");
+          return;
+        }
+        setSubmitError("Queued for retry \u2014 we will send it when the connection is back.");
+        setPhase("error");
+        return;
+      }
       setPhase("sent");
       setTimeout(handleClose, 1400);
     } catch {
-      setPhase("form");
+      setSubmitError("Something went wrong. Please try again.");
+      setPhase("error");
     }
   };
   const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
   const pal = (0, import_core3.mushiPalette)(dark ? "dark" : "light");
-  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: import_core3.MUSHI_BANNER_NEON.bg, accentInk: import_core3.MUSHI_BANNER_NEON.fg, 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: import_core3.MUSHI_BANNER_NEON.bg, accentInk: import_core3.MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: pal.inkFaint };
+  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: import_core3.MUSHI_BANNER_NEON.bg, accentInk: import_core3.MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.6)", disabled: import_core3.MUSHI_CONTROL_DISABLED.dark, disabledText: pal.inkFaint } : { bg: pal.paperRaised, text: pal.ink, sub: pal.inkMuted, card: pal.paper, accent: import_core3.MUSHI_BANNER_NEON.bg, accentInk: import_core3.MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: import_core3.MUSHI_CONTROL_DISABLED.light, disabledText: pal.inkFaint };
   const sheetTabs = ["report", "inbox", ...assistantEnabled ? ["assistant"] : []];
-  const canSubmit = !!category && description.trim().length > 0 && phase === "form";
+  const canSubmit = !!category && description.trim().length >= 20 && (phase === "form" || phase === "error");
   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,
     {
@@ -734,7 +759,7 @@ var MushiBottomSheet = ({
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.brandEyebrow, { color: import_core3.MUSHI_BANNER_NEON.fg }], children: "MUSHI \xB7 BETA" }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.brandTitle, { color: import_core3.MUSHI_BANNER_NEON.fg }], children: sheetTab === "assistant" ? assistantLabel : sheetTab === "inbox" ? t.flows.reports.title : t.widget.title })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: s.tabRow, children: sheetTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [s.tabRow, { borderBottomColor: colors.border }], children: sheetTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_react_native2.TouchableOpacity,
                 {
                   onPress: () => {
@@ -887,16 +912,22 @@ var MushiBottomSheet = ({
                         multiline: true,
                         textAlignVertical: "top",
                         value: description,
-                        onChangeText: setDescription,
-                        editable: phase === "form"
+                        onChangeText: (text) => {
+                          setDescription(text.slice(0, 4e3));
+                          if (submitError) setSubmitError(null);
+                          if (phase === "error") setPhase("form");
+                        },
+                        editable: phase === "form" || phase === "error",
+                        maxLength: 4e3
                       }
                     ),
+                    submitError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: { color: colors.accent, marginTop: 6, fontSize: 12 }, children: submitError }) : null,
                     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,
+                          style: [s.screenshotThumb, { backgroundColor: colors.text }],
                           accessibilityLabel: t.step3.screenshotPreviewAlt
                         }
                       ),
@@ -957,10 +988,10 @@ var s = import_react_native2.StyleSheet.create({
     left: 0,
     right: 0,
     minHeight: SHEET_HEIGHT,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    paddingBottom: import_react_native2.Platform.OS === "ios" ? 34 : 16,
-    shadowColor: "#000",
+    borderTopLeftRadius: import_core3.MUSHI_RADIUS.sheet,
+    borderTopRightRadius: import_core3.MUSHI_RADIUS.sheet,
+    paddingBottom: import_react_native2.Platform.OS === "ios" ? 34 : import_core3.MUSHI_SPACING.roomy,
+    shadowColor: import_core3.MUSHI_SHADOW_INK,
     shadowOffset: { width: 0, height: -3 },
     shadowOpacity: 0.12,
     shadowRadius: 8,
@@ -968,22 +999,22 @@ var s = import_react_native2.StyleSheet.create({
   },
   handleArea: {
     alignItems: "center",
-    paddingVertical: 10
+    paddingVertical: import_core3.MUSHI_SPACING.comfy
   },
   handle: {
     width: 40,
     height: 5,
-    borderRadius: 3,
+    borderRadius: import_core3.MUSHI_RADIUS.control,
     opacity: 0.5
   },
   brandHeader: {
-    paddingHorizontal: 20,
-    paddingTop: 10,
-    paddingBottom: 12,
+    paddingHorizontal: import_core3.MUSHI_SPACING.lounge,
+    paddingTop: import_core3.MUSHI_SPACING.comfy,
+    paddingBottom: import_core3.MUSHI_SPACING.comfy,
     borderBottomWidth: 1.5
   },
   brandEyebrow: {
-    fontSize: 10,
+    fontSize: import_core3.MUSHI_TYPE.sizeLabel,
     fontWeight: "700",
     letterSpacing: 1.2,
     marginBottom: 2,
@@ -995,59 +1026,61 @@ var s = import_react_native2.StyleSheet.create({
     letterSpacing: -0.2
   },
   body: {
-    paddingHorizontal: 20,
-    paddingTop: 4
+    paddingHorizontal: import_core3.MUSHI_SPACING.lounge,
+    paddingTop: import_core3.MUSHI_SPACING.tight
   },
   title: {
     fontSize: 20,
     fontWeight: "700",
-    marginBottom: 16
+    marginBottom: import_core3.MUSHI_SPACING.roomy
   },
   stepLabel: {
-    fontSize: 12,
+    fontSize: import_core3.MUSHI_TYPE.sizeLabel,
     fontWeight: "600",
     letterSpacing: 0.2,
-    marginTop: 8,
-    marginBottom: 10,
+    marginTop: import_core3.MUSHI_SPACING.snug,
+    marginBottom: import_core3.MUSHI_SPACING.comfy,
     textTransform: "uppercase"
   },
   catRow: {
     flexDirection: "row",
     justifyContent: "space-between",
-    marginBottom: 16
+    marginBottom: import_core3.MUSHI_SPACING.roomy
   },
   catBtn: {
     alignItems: "center",
-    paddingVertical: 10,
+    paddingVertical: import_core3.MUSHI_SPACING.comfy,
     paddingHorizontal: 6,
-    borderRadius: 12,
+    borderRadius: import_core3.MUSHI_RADIUS.card,
     borderWidth: 1,
     flex: 1,
-    marginHorizontal: 3
+    marginHorizontal: 3,
+    minHeight: 44
   },
   catEmoji: {
     fontSize: 22,
-    marginBottom: 4
+    marginBottom: import_core3.MUSHI_SPACING.tight
   },
   catLabel: {
-    fontSize: 11,
+    fontSize: import_core3.MUSHI_TYPE.sizeLabel,
     fontWeight: "600"
   },
   input: {
     borderWidth: 1,
-    borderRadius: 12,
+    borderRadius: import_core3.MUSHI_RADIUS.card,
     padding: 14,
     fontSize: 15,
     minHeight: 100,
-    marginBottom: 16
+    marginBottom: import_core3.MUSHI_SPACING.roomy
   },
   submitBtn: {
-    borderRadius: 12,
+    borderRadius: import_core3.MUSHI_RADIUS.card,
     paddingVertical: 14,
-    alignItems: "center"
+    alignItems: "center",
+    minHeight: 44
   },
   submitText: {
-    color: "#fff",
+    color: import_core3.MUSHI_INVERSE,
     fontSize: 16,
     fontWeight: "700"
   },
@@ -1078,7 +1111,6 @@ var s = import_react_native2.StyleSheet.create({
     width: 48,
     height: 36,
     borderRadius: 4,
-    backgroundColor: "#000",
     flexShrink: 0
   },
   screenshotMeta: {
@@ -1100,7 +1132,6 @@ var s = import_react_native2.StyleSheet.create({
   tabRow: {
     flexDirection: "row",
     borderBottomWidth: import_react_native2.StyleSheet.hairlineWidth,
-    borderBottomColor: "#ccc",
     marginBottom: 8
   },
   tabBtn: {
@@ -1212,7 +1243,8 @@ var MushiFloatingButton = ({
   const currentX = (0, import_react2.useRef)(baseX);
   const currentY = (0, import_react2.useRef)(0);
   const isDragging = (0, import_react2.useRef)(false);
-  const accentColor = accent ?? (0, import_core4.mushiPalette)(dark ? "dark" : "light").accent;
+  const pal = (0, import_core4.mushiPalette)(dark ? "dark" : "light");
+  const accentColor = accent ?? pal.accent;
   (0, import_react2.useEffect)(() => {
     if (!persist) return;
     void loadStoredPos().then((pos) => {
@@ -1315,7 +1347,7 @@ var MushiFloatingButton = ({
           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",
+          shadowColor: dark ? accentColor : pal.ink,
           transform: [{ scale }]
         }
       ],
@@ -1404,7 +1436,7 @@ var s3 = import_react_native4.StyleSheet.create({
     backgroundColor: import_core5.MUSHI_BANNER_NEON.bg,
     borderTopWidth: 1,
     borderTopColor: import_core5.MUSHI_BANNER_NEON.border,
-    zIndex: 99998,
+    zIndex: import_core5.MUSHI_Z.banner,
     elevation: 8,
     paddingBottom: import_react_native4.Platform.OS === "ios" ? 0 : 0
   },
@@ -1412,12 +1444,13 @@ var s3 = import_react_native4.StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 8
+    gap: import_core5.MUSHI_SPACING.snug,
+    paddingHorizontal: import_core5.MUSHI_SPACING.comfy,
+    paddingVertical: import_core5.MUSHI_SPACING.snug,
+    minHeight: 44
   },
   eyebrow: {
-    fontSize: 10,
+    fontSize: import_core5.MUSHI_TYPE.sizeLabel,
     fontWeight: "700",
     letterSpacing: 1.2,
     color: import_core5.MUSHI_BANNER_NEON.fg
@@ -1448,7 +1481,7 @@ var s3 = import_react_native4.StyleSheet.create({
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/react-native";
-var MUSHI_SDK_VERSION = "0.20.0" ? "0.20.0" : "0.17.0";
+var MUSHI_SDK_VERSION = "0.21.0" ? "0.21.0" : "0.17.0";
 
 // src/provider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -1738,21 +1771,34 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
       const client = apiClientRef.current;
-      if (!client) return;
+      if (!client) {
+        console.error(
+          "[Mushi] submitReport called before the SDK finished initializing. Ensure <MushiProvider> is mounted with a valid projectId and apiKey."
+        );
+        return { ok: false, failureKind: "permanent" };
+      }
       const result = await client.submitReport(report);
       if (!result.ok) {
-        const isCredentialError = result.error?.code === "HTTP_401" || result.error?.code === "HTTP_403" || result.error?.code?.includes("UNAUTHORIZED") || result.error?.code?.includes("FORBIDDEN");
+        const code = result.error?.code ?? "";
+        const isCredentialError = code === "HTTP_401" || code === "HTTP_403" || code.includes("UNAUTHORIZED") || code.includes("FORBIDDEN") || code.includes("INVALID_API_KEY");
         if (isCredentialError) {
           const where = apiEndpoint.replace(/\/$/, "") === import_core6.DEFAULT_API_ENDPOINT ? "Get the correct values at: https://kensaur.us/mushi-mushi/admin/projects" : "Get the correct values from your Mushi console's Projects page.";
           console.error(
             '[Mushi] Credentials rejected. Check your projectId and apiKey (must have "report:write" scope). ' + where
           );
-          return;
+          return { ok: false, failureKind: "credentials" };
         }
+        const isRateLimited = code === "HTTP_429" || code.includes("RATE_LIMIT");
         await queueRef.current?.enqueue(report);
         config.callbacks?.onReportQueued?.(report.id);
+        return {
+          ok: false,
+          queued: true,
+          failureKind: isRateLimited ? "rate_limited" : "retrying"
+        };
       } else {
         config.callbacks?.onReportSubmitted?.(report.id);
+        return { ok: true };
       }
     },
     [config.projectId, config.callbacks, apiEndpoint]

package/dist/index.d.cts

@@ -128,7 +128,11 @@ interface MushiRNInstance {
         description: string;
         category: string;
         screenshotDataUrl?: string;
-    }): Promise<void>;
+    }): Promise<{
+        ok: boolean;
+        queued?: boolean;
+        failureKind?: 'offline' | 'retrying' | 'rate_limited' | 'quota' | 'permanent' | 'credentials';
+    }>;
     getDeviceInfo(): ReturnType<typeof getDeviceInfo>;
     getConsoleEntries(): ReturnType<ReturnType<typeof setupConsoleCapture>['getEntries']>;
     getNetworkEntries(): ReturnType<ReturnType<typeof setupNetworkCapture>['getEntries']>;

package/dist/index.d.ts

@@ -128,7 +128,11 @@ interface MushiRNInstance {
         description: string;
         category: string;
         screenshotDataUrl?: string;
-    }): Promise<void>;
+    }): Promise<{
+        ok: boolean;
+        queued?: boolean;
+        failureKind?: 'offline' | 'retrying' | 'rate_limited' | 'quota' | 'permanent' | 'credentials';
+    }>;
     getDeviceInfo(): ReturnType<typeof getDeviceInfo>;
     getConsoleEntries(): ReturnType<ReturnType<typeof setupConsoleCapture>['getEntries']>;
     getNetworkEntries(): ReturnType<ReturnType<typeof setupNetworkCapture>['getEntries']>;

package/dist/index.js

@@ -474,7 +474,17 @@ import {
   ScrollView,
   useColorScheme
 } from "react-native";
-import { mushiPalette, MUSHI_BANNER_NEON, MUSHI_COPY } from "@mushi-mushi/core";
+import {
+  mushiPalette,
+  MUSHI_BANNER_NEON,
+  MUSHI_COPY,
+  MUSHI_CONTROL_DISABLED,
+  MUSHI_INVERSE,
+  MUSHI_RADIUS,
+  MUSHI_SHADOW_INK,
+  MUSHI_SPACING,
+  MUSHI_TYPE
+} from "@mushi-mushi/core";
 import { getLocale } from "@mushi-mushi/web/i18n";
 
 // src/reporter-status.ts
@@ -540,6 +550,7 @@ var MushiBottomSheet = ({
   const [category, setCategory] = useState(null);
   const [description, setDescription] = useState("");
   const [phase, setPhase] = useState("form");
+  const [submitError, setSubmitError] = useState(null);
   const [sheetTab, setSheetTab] = useState("report");
   const [inboxReports, setInboxReports] = useState([]);
   const [inboxLoading, setInboxLoading] = useState(false);
@@ -613,6 +624,8 @@ var MushiBottomSheet = ({
         ...prev,
         { role: "bot", text: botText, options: reply.options }
       ]);
+    } catch {
+      setAssistantError("Could not reach the assistant. Try again.");
     } finally {
       setAssistantSending(false);
     }
@@ -686,24 +699,46 @@ var MushiBottomSheet = ({
   ).current;
   const handleSubmit = async () => {
     if (!category || !description.trim() || !mushi) return;
+    const trimmed = description.trim();
+    if (trimmed.length < 20) {
+      setSubmitError("Please write at least 20 characters so we can understand the issue.");
+      return;
+    }
+    setSubmitError(null);
     setPhase("sending");
     try {
-      await mushi.submitReport({
+      const outcome = await mushi.submitReport({
         category,
-        description: description.trim(),
+        description: trimmed,
         screenshotDataUrl: screenshotDataUrl && screenshotAttached ? screenshotDataUrl : void 0
       });
+      if (!outcome.ok) {
+        if (outcome.failureKind === "credentials" || outcome.failureKind === "quota") {
+          setSubmitError("Could not send \u2014 check the project API key or plan quota.");
+          setPhase("error");
+          return;
+        }
+        if (outcome.failureKind === "rate_limited") {
+          setSubmitError("Sending too fast \u2014 we queued this and will retry shortly.");
+          setPhase("error");
+          return;
+        }
+        setSubmitError("Queued for retry \u2014 we will send it when the connection is back.");
+        setPhase("error");
+        return;
+      }
       setPhase("sent");
       setTimeout(handleClose, 1400);
     } catch {
-      setPhase("form");
+      setSubmitError("Something went wrong. Please try again.");
+      setPhase("error");
     }
   };
   const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
   const pal = mushiPalette(dark ? "dark" : "light");
-  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, 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: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: "#d1d1d6", disabledText: pal.inkFaint };
+  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.6)", disabled: MUSHI_CONTROL_DISABLED.dark, disabledText: pal.inkFaint } : { bg: pal.paperRaised, text: pal.ink, sub: pal.inkMuted, card: pal.paper, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: MUSHI_CONTROL_DISABLED.light, disabledText: pal.inkFaint };
   const sheetTabs = ["report", "inbox", ...assistantEnabled ? ["assistant"] : []];
-  const canSubmit = !!category && description.trim().length > 0 && phase === "form";
+  const canSubmit = !!category && description.trim().length >= 20 && (phase === "form" || phase === "error");
   return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ jsxs(
     KeyboardAvoidingView,
     {
@@ -731,7 +766,7 @@ var MushiBottomSheet = ({
                 /* @__PURE__ */ jsx(Text, { style: [s.brandEyebrow, { color: MUSHI_BANNER_NEON.fg }], children: "MUSHI \xB7 BETA" }),
                 /* @__PURE__ */ jsx(Text, { style: [s.brandTitle, { color: MUSHI_BANNER_NEON.fg }], children: sheetTab === "assistant" ? assistantLabel : sheetTab === "inbox" ? t.flows.reports.title : t.widget.title })
               ] }),
-              /* @__PURE__ */ jsx(View, { style: s.tabRow, children: sheetTabs.map((tab) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(View, { style: [s.tabRow, { borderBottomColor: colors.border }], children: sheetTabs.map((tab) => /* @__PURE__ */ jsx(
                 TouchableOpacity,
                 {
                   onPress: () => {
@@ -884,16 +919,22 @@ var MushiBottomSheet = ({
                         multiline: true,
                         textAlignVertical: "top",
                         value: description,
-                        onChangeText: setDescription,
-                        editable: phase === "form"
+                        onChangeText: (text) => {
+                          setDescription(text.slice(0, 4e3));
+                          if (submitError) setSubmitError(null);
+                          if (phase === "error") setPhase("form");
+                        },
+                        editable: phase === "form" || phase === "error",
+                        maxLength: 4e3
                       }
                     ),
+                    submitError ? /* @__PURE__ */ jsx(Text, { style: { color: colors.accent, marginTop: 6, fontSize: 12 }, children: submitError }) : null,
                     activeScreenshot ? /* @__PURE__ */ jsxs(View, { style: s.screenshotRow, children: [
                       /* @__PURE__ */ jsx(
                         Image,
                         {
                           source: { uri: activeScreenshot },
-                          style: s.screenshotThumb,
+                          style: [s.screenshotThumb, { backgroundColor: colors.text }],
                           accessibilityLabel: t.step3.screenshotPreviewAlt
                         }
                       ),
@@ -954,10 +995,10 @@ var s = StyleSheet.create({
     left: 0,
     right: 0,
     minHeight: SHEET_HEIGHT,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    paddingBottom: Platform2.OS === "ios" ? 34 : 16,
-    shadowColor: "#000",
+    borderTopLeftRadius: MUSHI_RADIUS.sheet,
+    borderTopRightRadius: MUSHI_RADIUS.sheet,
+    paddingBottom: Platform2.OS === "ios" ? 34 : MUSHI_SPACING.roomy,
+    shadowColor: MUSHI_SHADOW_INK,
     shadowOffset: { width: 0, height: -3 },
     shadowOpacity: 0.12,
     shadowRadius: 8,
@@ -965,22 +1006,22 @@ var s = StyleSheet.create({
   },
   handleArea: {
     alignItems: "center",
-    paddingVertical: 10
+    paddingVertical: MUSHI_SPACING.comfy
   },
   handle: {
     width: 40,
     height: 5,
-    borderRadius: 3,
+    borderRadius: MUSHI_RADIUS.control,
     opacity: 0.5
   },
   brandHeader: {
-    paddingHorizontal: 20,
-    paddingTop: 10,
-    paddingBottom: 12,
+    paddingHorizontal: MUSHI_SPACING.lounge,
+    paddingTop: MUSHI_SPACING.comfy,
+    paddingBottom: MUSHI_SPACING.comfy,
     borderBottomWidth: 1.5
   },
   brandEyebrow: {
-    fontSize: 10,
+    fontSize: MUSHI_TYPE.sizeLabel,
     fontWeight: "700",
     letterSpacing: 1.2,
     marginBottom: 2,
@@ -992,59 +1033,61 @@ var s = StyleSheet.create({
     letterSpacing: -0.2
   },
   body: {
-    paddingHorizontal: 20,
-    paddingTop: 4
+    paddingHorizontal: MUSHI_SPACING.lounge,
+    paddingTop: MUSHI_SPACING.tight
   },
   title: {
     fontSize: 20,
     fontWeight: "700",
-    marginBottom: 16
+    marginBottom: MUSHI_SPACING.roomy
   },
   stepLabel: {
-    fontSize: 12,
+    fontSize: MUSHI_TYPE.sizeLabel,
     fontWeight: "600",
     letterSpacing: 0.2,
-    marginTop: 8,
-    marginBottom: 10,
+    marginTop: MUSHI_SPACING.snug,
+    marginBottom: MUSHI_SPACING.comfy,
     textTransform: "uppercase"
   },
   catRow: {
     flexDirection: "row",
     justifyContent: "space-between",
-    marginBottom: 16
+    marginBottom: MUSHI_SPACING.roomy
   },
   catBtn: {
     alignItems: "center",
-    paddingVertical: 10,
+    paddingVertical: MUSHI_SPACING.comfy,
     paddingHorizontal: 6,
-    borderRadius: 12,
+    borderRadius: MUSHI_RADIUS.card,
     borderWidth: 1,
     flex: 1,
-    marginHorizontal: 3
+    marginHorizontal: 3,
+    minHeight: 44
   },
   catEmoji: {
     fontSize: 22,
-    marginBottom: 4
+    marginBottom: MUSHI_SPACING.tight
   },
   catLabel: {
-    fontSize: 11,
+    fontSize: MUSHI_TYPE.sizeLabel,
     fontWeight: "600"
   },
   input: {
     borderWidth: 1,
-    borderRadius: 12,
+    borderRadius: MUSHI_RADIUS.card,
     padding: 14,
     fontSize: 15,
     minHeight: 100,
-    marginBottom: 16
+    marginBottom: MUSHI_SPACING.roomy
   },
   submitBtn: {
-    borderRadius: 12,
+    borderRadius: MUSHI_RADIUS.card,
     paddingVertical: 14,
-    alignItems: "center"
+    alignItems: "center",
+    minHeight: 44
   },
   submitText: {
-    color: "#fff",
+    color: MUSHI_INVERSE,
     fontSize: 16,
     fontWeight: "700"
   },
@@ -1075,7 +1118,6 @@ var s = StyleSheet.create({
     width: 48,
     height: 36,
     borderRadius: 4,
-    backgroundColor: "#000",
     flexShrink: 0
   },
   screenshotMeta: {
@@ -1097,7 +1139,6 @@ var s = StyleSheet.create({
   tabRow: {
     flexDirection: "row",
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#ccc",
     marginBottom: 8
   },
   tabBtn: {
@@ -1216,7 +1257,8 @@ var MushiFloatingButton = ({
   const currentX = useRef2(baseX);
   const currentY = useRef2(0);
   const isDragging = useRef2(false);
-  const accentColor = accent ?? mushiPalette2(dark ? "dark" : "light").accent;
+  const pal = mushiPalette2(dark ? "dark" : "light");
+  const accentColor = accent ?? pal.accent;
   useEffect2(() => {
     if (!persist) return;
     void loadStoredPos().then((pos) => {
@@ -1319,7 +1361,7 @@ var MushiFloatingButton = ({
           left: posX,
           bottom: Animated2.add(new Animated2.Value(baseBottom), Animated2.multiply(posY, -1)),
           backgroundColor: accentColor,
-          shadowColor: dark ? accentColor : "#000",
+          shadowColor: dark ? accentColor : pal.ink,
           transform: [{ scale }]
         }
       ],
@@ -1358,7 +1400,7 @@ import {
   StyleSheet as StyleSheet3,
   Platform as Platform4
 } from "react-native";
-import { MUSHI_BANNER_NEON as MUSHI_BANNER_NEON2, MUSHI_COPY as MUSHI_COPY3, MUSHI_GEOMETRY as MUSHI_GEOMETRY2 } from "@mushi-mushi/core";
+import { MUSHI_BANNER_NEON as MUSHI_BANNER_NEON2, MUSHI_COPY as MUSHI_COPY3, MUSHI_GEOMETRY as MUSHI_GEOMETRY2, MUSHI_SPACING as MUSHI_SPACING2, MUSHI_TYPE as MUSHI_TYPE2, MUSHI_Z } from "@mushi-mushi/core";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MUSHI_BANNER_DEFAULT_HEIGHT = MUSHI_GEOMETRY2.bannerHeight;
 var MushiBanner = ({
@@ -1414,7 +1456,7 @@ var s3 = StyleSheet3.create({
     backgroundColor: MUSHI_BANNER_NEON2.bg,
     borderTopWidth: 1,
     borderTopColor: MUSHI_BANNER_NEON2.border,
-    zIndex: 99998,
+    zIndex: MUSHI_Z.banner,
     elevation: 8,
     paddingBottom: Platform4.OS === "ios" ? 0 : 0
   },
@@ -1422,12 +1464,13 @@ var s3 = StyleSheet3.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 8
+    gap: MUSHI_SPACING2.snug,
+    paddingHorizontal: MUSHI_SPACING2.comfy,
+    paddingVertical: MUSHI_SPACING2.snug,
+    minHeight: 44
   },
   eyebrow: {
-    fontSize: 10,
+    fontSize: MUSHI_TYPE2.sizeLabel,
     fontWeight: "700",
     letterSpacing: 1.2,
     color: MUSHI_BANNER_NEON2.fg
@@ -1458,7 +1501,7 @@ var s3 = StyleSheet3.create({
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/react-native";
-var MUSHI_SDK_VERSION = "0.20.0" ? "0.20.0" : "0.17.0";
+var MUSHI_SDK_VERSION = "0.21.0" ? "0.21.0" : "0.17.0";
 
 // src/provider.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1748,21 +1791,34 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
       const client = apiClientRef.current;
-      if (!client) return;
+      if (!client) {
+        console.error(
+          "[Mushi] submitReport called before the SDK finished initializing. Ensure <MushiProvider> is mounted with a valid projectId and apiKey."
+        );
+        return { ok: false, failureKind: "permanent" };
+      }
       const result = await client.submitReport(report);
       if (!result.ok) {
-        const isCredentialError = result.error?.code === "HTTP_401" || result.error?.code === "HTTP_403" || result.error?.code?.includes("UNAUTHORIZED") || result.error?.code?.includes("FORBIDDEN");
+        const code = result.error?.code ?? "";
+        const isCredentialError = code === "HTTP_401" || code === "HTTP_403" || code.includes("UNAUTHORIZED") || code.includes("FORBIDDEN") || code.includes("INVALID_API_KEY");
         if (isCredentialError) {
           const where = apiEndpoint.replace(/\/$/, "") === DEFAULT_API_ENDPOINT ? "Get the correct values at: https://kensaur.us/mushi-mushi/admin/projects" : "Get the correct values from your Mushi console's Projects page.";
           console.error(
             '[Mushi] Credentials rejected. Check your projectId and apiKey (must have "report:write" scope). ' + where
           );
-          return;
+          return { ok: false, failureKind: "credentials" };
         }
+        const isRateLimited = code === "HTTP_429" || code.includes("RATE_LIMIT");
         await queueRef.current?.enqueue(report);
         config.callbacks?.onReportQueued?.(report.id);
+        return {
+          ok: false,
+          queued: true,
+          failureKind: isRateLimited ? "rate_limited" : "retrying"
+        };
       } else {
         config.callbacks?.onReportSubmitted?.(report.id);
+        return { ok: true };
       }
     },
     [config.projectId, config.callbacks, apiEndpoint]

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@mushi-mushi/react-native",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "MIT",
   "description": "React Native SDK for Mushi Mushi — shake-to-report, bottom sheet widget, full context capture",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "22 KB"
+    }
+  ],
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.19",
     "@react-native-community/netinfo": ">=11",
@@ -37,16 +43,21 @@
     }
   },
   "dependencies": {
-    "@mushi-mushi/core": "^1.21.0",
-    "@mushi-mushi/web": "^1.21.0"
+    "@mushi-mushi/core": "^1.26.0",
+    "@mushi-mushi/web": "^1.26.0"
   },
   "devDependencies": {
+    "@size-limit/file": "^12.1.0",
     "@types/react": "^19.2.17",
+    "eslint": "^10.6.0",
     "react": "^19.2.7",
     "react-native": "^0.86.0",
+    "size-limit": "^12.1.0",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9",
+    "@mushi-mushi/eslint-config": "0.0.0",
+    "eslint-plugin-mushi-mushi": "0.3.1"
   },
   "author": "Kenji Sakuramoto (https://bsky.app/profile/mushimushi.dev)",
   "repository": {
@@ -116,7 +127,9 @@
   },
   "scripts": {
     "build": "tsup",
+    "lint": "eslint src/",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "size": "size-limit"
   }
 }