@buoy-gg/core 7.0.35 → 7.0.38

package/README.md

@@ -3,106 +3,97 @@
 [![npm version](https://img.shields.io/npm/v/@buoy-gg/core?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/core)
 [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/core?style=flat-square&labelColor=1c1c1c&color=10B981&label=downloads%2Fmonth)](https://www.npmjs.com/package/@buoy-gg/core)
 
-**Devtools that live in your app. And answer to your agent.**
+Buoy adds a floating developer-tools menu to your React Native app. Install the tools you need to inspect captured requests, app state, storage, and performance.
 
-Buoy is a floating dev menu that ships inside your React Native app. Every request, state change, render, and frame — live on the phone, on your desktop, and in Claude or Cursor. Drop in one component, install the tools you want, and they appear in the menu on their own.
+## Install and quick start
 
-![Buoy demo — the floating dev menu in action](https://github.com/user-attachments/assets/a732d6a3-9963-49e3-b0f1-0d974a0a74d7)
-
-## Install
+Install from your app’s directory, then sign in:
 
 ```bash
-npm install @buoy-gg/core
+npm install @buoy-gg/core @buoy-gg/network
+npx --package=@buoy-gg/core buoy login
 ```
 
-## Quick start
+In an Expo Router project, keep your existing navigator and providers. For example:
 
 ```tsx
-import { FloatingDevTools } from "@buoy-gg/core";
+import { Stack } from "expo-router";
+import { Buoy, FloatingDevTools } from "@buoy-gg/core";
+
+Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
 
-export default function App() {
+export default function RootLayout() {
   return (
     <>
-      {/* Your app */}
+      <Stack />
       <FloatingDevTools />
     </>
   );
 }
 ```
 
-That's the whole setup — a floating dev menu appears inside your app. Install any tool package and it auto-appears in the menu; most need zero config, a few take one line (like passing `zustandStores` or calling `watchAtoms()`). Add a `licenseKey` prop to unlock [Pro](https://buoy.gg/pricing): production builds, the MCP server, and unlimited capture.
-
-## The 15 tools
-
-| Tool | Package | What it does |
-| --- | --- | --- |
-| [Network](https://buoy.gg/buoy/latest/docs/tools/network) | `@buoy-gg/network` | Every request, response, timing & error — GraphQL operations extracted and named |
-| [Storage](https://buoy.gg/buoy/latest/docs/tools/storage) | `@buoy-gg/storage` | Browse & edit AsyncStorage, MMKV & SecureStore with change history |
-| [Env](https://buoy.gg/buoy/latest/docs/tools/env) | `@buoy-gg/env` | Auto-discovers `EXPO_PUBLIC_` vars, validates types, scores config health |
-| [Query](https://buoy.gg/buoy/latest/docs/tools/react-query) | `@buoy-gg/react-query` | TanStack Query cache — refetch, invalidate, simulate loading & error states |
-| [Routes](https://buoy.gg/buoy/latest/docs/tools/routes) | `@buoy-gg/route-events` | Navigation events, the live stack, and the full sitemap — jump to any screen |
-| [Debug Borders](https://buoy.gg/buoy/latest/docs/tools/debug-borders) | `@buoy-gg/debug-borders` | Depth-colored layout borders — tap any label for testID, a11y props & styles |
-| [Highlight Updates](https://buoy.gg/buoy/latest/docs/tools/highlight-updates) | `@buoy-gg/highlight-updates` | Every render, with the cause: mount, state, props, or parent |
-| [Bench](https://buoy.gg/buoy/latest/docs/tools/perf-monitor) | `@buoy-gg/perf-monitor` | UI/JS FPS, CPU, memory & jank on a real device — batch benchmarks, ranked reports |
-| [Events](https://buoy.gg/buoy/latest/docs/tools/events) | `@buoy-gg/events` | One timeline across every tool, with LLM-friendly export presets |
-| [Console](https://buoy.gg/buoy/latest/docs/tools/console) | `@buoy-gg/console` | Chrome-DevTools console on device — read logs with no cable and no Metro |
-| [Redux](https://buoy.gg/buoy/latest/docs/tools/redux) | `@buoy-gg/redux` | Inspect, dispatch & time travel — flags actions that blow the frame budget |
-| [Zustand](https://buoy.gg/buoy/latest/docs/tools/zustand) | `@buoy-gg/zustand` | State, diffs, jump-to-state, one-tap reset — no middleware needed |
-| [Jotai](https://buoy.gg/buoy/latest/docs/tools/jotai) | `@buoy-gg/jotai` | One `watchAtoms()` call — every event shows `prev → next` |
-| [Impersonate](https://buoy.gg/buoy/latest/docs/tools/impersonate) | `@buoy-gg/impersonate` | Switch users, roles & flags without rebuilding |
-| [Overlay](https://buoy.gg/buoy/latest/docs/tools/image-overlay) | `@buoy-gg/image-overlay` | Pin Figma mockups pixel-perfect over the app |
-
-Grab everything in one line:
-
-```bash
-npm i @buoy-gg/{core,network,storage,env,react-query,route-events,debug-borders,highlight-updates,perf-monitor,events,console,redux,zustand,jotai,impersonate,image-overlay}
-```
-
-## Three surfaces, one live session
+The login command writes the Expo key to `.env.local`. Keep the navigator and menu inside your existing providers. Without Expo Router, keep your app’s root content in place of `Stack`. For React Native CLI, load the key through your app’s environment configuration and pass it to `Buoy.init`; `.env.local` is not loaded automatically.
 
-Every tool runs inside your app's process. The phone, the desktop, and your agent all see the same session, live.
+Restart the development server after installation. Open Buoy, complete any account prompt, and select Network. Trigger a new HTTP request in your app and check its URL and status. If no request appears, check whether the app used cached data or an unsupported transport.
 
-- **On the phone** — tap the floating menu. Works on any device, no cable, no desktop app, no Metro.
-- **On your desktop** — [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free) mirrors the tools to full-screen panels on macOS, Windows & Linux, with a live FPS / CPU / memory HUD and remote control of the device. Devices connect automatically — physical phones included, no URLs to configure.
-- **Through your agent** — the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp) gives Claude Code, Cursor, or any MCP editor structured tool calls into the running app: read live state, tap real buttons, run benchmarks on a physical device.
+See the [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) for the full setup and [Installation](https://buoy.gg/buoy/latest/docs/installation) for requirements. Other tools may need store registration, provider context, or native dependencies.
 
-## Free vs Pro
+The dial shows the most recently opened tool first. Tools you haven’t opened keep their registration order.
 
-Every tool is **free** on every tier — only how much history each keeps changes. A free key (`npx buoy login`, no card) restores the full free tier.
+## Tools
 
-**Pro** unlocks production builds, the MCP server, and unlimited capture. Activate with one prop:
+| Tool | Package | What it does |
+| --- | --- | --- |
+| [Network](https://buoy.gg/buoy/latest/docs/tools/network) | `@buoy-gg/network` | Inspect HTTP requests captured through your React Native app’s global `fetch` and `XMLHttpRequest` hooks. Open a request to see its URL, status, headers, timing, and captured body. |
+| [Storage](https://buoy.gg/buoy/latest/docs/tools/storage) | `@buoy-gg/storage` | Browse and edit supported AsyncStorage, registered MMKV instances, and registered SecureStore keys inside your app. |
+| [Time Machine](https://buoy.gg/buoy/latest/docs/tools/time-machine) | `@buoy-gg/time-machine` | Save and restore supported client state; external side effects are not reversed. |
+| [Ask Buoy](https://buoy.gg/buoy/latest/docs/tools/ask-buoy) | `@buoy-gg/ask-buoy` | Use an in-app assistant with your model endpoint and configured tools. |
+| [Env](https://buoy.gg/buoy/latest/docs/tools/env) | `@buoy-gg/env` | Inspect runtime environment values and validate required variables. |
+| [Query](https://buoy.gg/buoy/latest/docs/tools/react-query) | `@buoy-gg/react-query` | Inspect the TanStack Query cache used by your app. Refetch or invalidate a query and simulate states while checking the screen that consumes it. |
+| [Routes](https://buoy.gg/buoy/latest/docs/tools/routes) | `@buoy-gg/route-events` | Inspect recorded navigation events and supported routes. |
+| [Debug Borders](https://buoy.gg/buoy/latest/docs/tools/debug-borders) | `@buoy-gg/debug-borders` | Show layout borders and component labels over your React Native app. Tap a label to inspect the component’s available properties. |
+| [Highlight Updates](https://buoy.gg/buoy/latest/docs/tools/highlight-updates) | `@buoy-gg/highlight-updates` | Highlight observed React component updates in development builds and inspect the available render details. |
+| [Bench](https://buoy.gg/buoy/latest/docs/tools/perf-monitor) | `@buoy-gg/perf-monitor` | Measure available frame-rate, CPU, and memory metrics on a device. Record comparable runs to investigate performance changes. |
+| [JS Top](https://buoy.gg/buoy/latest/docs/tools/js-top) | `@buoy-gg/js-top` | Task Manager for the JS thread — which timers, Promise chains & callbacks eat your JS FPS |
+| [Images](https://buoy.gg/buoy/latest/docs/tools/images) | `@buoy-gg/images` | Inspect image loads observed by Buoy’s supported image hooks, including timing, dimensions, and estimated decoded memory. |
+| [Assets](https://buoy.gg/buoy/latest/docs/tools/assets) | `@buoy-gg/assets` | Inspect assets visible to the runtime registry and, in development, the Metro dependency graph. Compare sizes and find possible duplicates. |
+| [Events](https://buoy.gg/buoy/latest/docs/tools/events) | `@buoy-gg/events` | Review events from configured Buoy tools in one timeline. Filter by source, inspect an event, and export a selection for debugging. |
+| [Console](https://buoy.gg/buoy/latest/docs/tools/console) | `@buoy-gg/console` | Read captured JavaScript console logs in your React Native app. Filter messages by level, search their contents, and inspect logged objects. |
+| [Sentry](https://buoy.gg/buoy/latest/docs/tools/sentry) | `@buoy-gg/sentry` | Inspect captured Sentry envelopes and diagnostic estimates. |
+| [Redux](https://buoy.gg/buoy/latest/docs/tools/redux) | `@buoy-gg/redux` | Inspect your connected Redux store, review captured actions and state changes, and dispatch actions from your device. |
+| [Zustand](https://buoy.gg/buoy/latest/docs/tools/zustand) | `@buoy-gg/zustand` | Inspect the Zustand stores you register with Buoy. Review changes, edit state, and restore retained snapshots. |
+| [Jotai](https://buoy.gg/buoy/latest/docs/tools/jotai) | `@buoy-gg/jotai` | Inspect registered Jotai atoms and their captured changes, with live values and per-atom history. |
+| [Impersonate](https://buoy.gg/buoy/latest/docs/tools/impersonate) | `@buoy-gg/impersonate` | Connect your app’s user-switching flow to Buoy so testers can switch test accounts, roles, or flags without rebuilding. |
+| [Overlay](https://buoy.gg/buoy/latest/docs/tools/image-overlay) | `@buoy-gg/image-overlay` | Place a reference image over your app to compare spacing, alignment, and sizing on the device. |
 
-```tsx
-<FloatingDevTools licenseKey="YOUR_LICENSE_KEY" />
-```
+TV tools and the iOS Simulator camera have separate [platform requirements](https://buoy.gg/buoy/latest/docs/overview).
 
-**Weekend Pass:** every Saturday and Sunday, every Pro feature unlocks free for anyone holding a key — including a free one. Built into the product, not a promo. Details at [buoy.gg/pricing](https://buoy.gg/pricing).
+## Desktop and AI
 
-## Safe in production
+Inspect configured tools in the floating menu on your device. You can also connect them to:
 
-Everything runs in your app's process. The broker that mirrors the session to desktop and MCP binds to localhost only — nothing ever leaves your machine. You decide who sees the tools:
+- [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop), for desktop panels and remote actions. React Native apps need `@buoy-gg/external-sync`; follow the [connection guide](https://buoy.gg/buoy/latest/docs/desktop) and sign in to Desktop separately.
+- [MCP](https://buoy.gg/buoy/latest/docs/mcp), for an AI editor to inspect and act on the app. Configure both process and device accounts; data and action tools require Pro.
+- [Ask Buoy](https://buoy.gg/buoy/latest/docs/tools/ask-buoy), for an in-app assistant. It requires Pro, a model endpoint you configure, and the tool integrations its tasks depend on.
 
-```tsx
-{isInternalUser && <FloatingDevTools />}
-```
+Supported features vary by platform, build, and installed tools. [Flutter](https://buoy.gg/buoy/latest/docs/flutter/quick-start) has a separate debug-build setup.
 
-That one line is the whole production story: internal builds and flagged users get the full toolkit; everyone else gets nothing.
+## Account and plan requirements
 
-Need the session with **no on-device UI at all** — field builds or devices handed to non-developers? Headless mode keeps every tool syncing to Buoy Desktop and MCP while rendering nothing on the device:
+Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
 
-```tsx
-<FloatingDevTools headless />
-```
+## Production and connections
 
-## Links
+Start with a development build. Before enabling Buoy in a shipped app, restrict access using your app’s authorization checks and review the [component reference](https://buoy.gg/buoy/latest/docs/floating-devtools). Production access requires Pro, and development-only capabilities remain unavailable.
 
-- [Full documentation](https://buoy.gg/buoy/latest/docs/overview)
-- [GitHub](https://github.com/Buoy-gg/buoy)
-- [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop)
-- [Pricing](https://buoy.gg/pricing)
+Hiding the menu is not a substitute for backend authorization. Headless mode hides the on-device UI; it still requires account admission and sync configuration. Release sync is disabled by default and must be explicitly enabled.
 
-> 🎯 **Flutter (beta):** Buoy is now a full suite for Flutter — `flutter pub add buoy`. Network, storage, console, env, routes, images, Riverpod, events, and a live perf HUD, all streaming to the same desktop dashboard and MCP server. [Details →](https://buoy.gg/flutter)
+Device sessions can travel over your LAN to the configured broker. Buoy also makes account and license requests; development telemetry is described in [Telemetry](https://buoy.gg/buoy/latest/docs/telemetry). Ask Buoy sends model requests to the endpoint you configure.
 
 ## License
 
 Proprietary software. © Buoy LLC. All rights reserved. See the [Terms of Service](https://buoy.gg/terms).
+
+### Custom floating controls
+
+The DevTools bubble uses the shared `FloatingTool` shell. Custom tools can use the same shell with `openFloatingTool`; `FloatingDevTools` already mounts the host. See the [integration guide](https://buoy.gg/buoy/latest/docs/custom-tools/floating-tools).

package/bin/buoy.js

@@ -93,9 +93,43 @@ function detectEnvVarName(root) {
   return 'BUOY_KEY';
 }
 
-/** Upsert `NAME=value` in .env.local, preserving everything else in the file. */
-function writeEnvVar(root, name, value) {
-  const file = path.join(root, '.env.local');
+/**
+ * Which env file the key belongs in.
+ *
+ * Expo inlines `.env.local` into EVERY bundle, release builds included, and
+ * `npx expo export` forces NODE_ENV=production — so a free key written there
+ * ships inside the app to every phone that installs it. Each of those phones
+ * then validates against the license server, which is how one free account
+ * spent the whole daily quota in a morning. `.env.development.local` is only
+ * loaded under NODE_ENV=development, so a free key there can only ever reach
+ * a developer's own device.
+ *
+ * Paid keys keep `.env.local`: a Pro customer may want the tools in a
+ * TestFlight or QA build, and that is their call to make.
+ */
+function envFileFor(varName, tier) {
+  if (varName !== 'EXPO_PUBLIC_BUOY_KEY') return '.env.local';
+  return tier === 'pro' || tier === 'business' ? '.env.local' : '.env.development.local';
+}
+
+/** Drop `NAME=...` from an env file if present. True when a line was removed. */
+function removeEnvVar(root, name, fileName) {
+  const file = path.join(root, fileName);
+  let contents;
+  try {
+    contents = fs.readFileSync(file, 'utf8');
+  } catch {
+    return false;
+  }
+  const pattern = new RegExp('^' + name + '=.*\\n?', 'm');
+  if (!pattern.test(contents)) return false;
+  fs.writeFileSync(file, contents.replace(pattern, ''), { mode: 0o600 });
+  return true;
+}
+
+/** Upsert `NAME=value` in an env file, preserving everything else in the file. */
+function writeEnvVar(root, name, value, fileName = '.env.local') {
+  const file = path.join(root, fileName);
   let contents = '';
   try {
     contents = fs.readFileSync(file, 'utf8');
@@ -118,13 +152,13 @@ function writeEnvVar(root, name, value) {
 }
 
 /**
- * Make sure .env.local is ignored.
+ * Make sure the env file is ignored.
  *
  * The whole point of a per-developer key is that it identifies one person; a
  * key committed to a shared repo turns the count back into "repos", which is
  * exactly what this flow exists to avoid.
  */
-function ensureGitignored(root) {
+function ensureGitignored(root, fileName = '.env.local') {
   const file = path.join(root, '.gitignore');
   let contents = '';
   try {
@@ -132,10 +166,12 @@ function ensureGitignored(root) {
   } catch {
     return false;
   }
-  if (/^\.env\.local$|^\.env\*|^\*\.local$/m.test(contents)) return false;
+  const exact = new RegExp('^' + fileName.replace(/\./g, '\\.') + '$', 'm');
+  // `.env*`, `*.local` and `.env*.local` all cover both files we might write.
+  if (exact.test(contents) || /^\.env\*|^\*\.local$|^\.env\*\.local$/m.test(contents)) return false;
 
   if (contents && !contents.endsWith('\n')) contents += '\n';
-  contents += '\n# Buoy license key (per developer - do not commit)\n.env.local\n';
+  contents += `\n# Buoy license key (per developer - do not commit)\n${fileName}\n`;
   fs.writeFileSync(file, contents);
   return true;
 }
@@ -219,7 +255,7 @@ function awaitKeyFromBrowser() {
 
       log('');
       log(`  Opening ${cyan(url)}`);
-      log(dim('  If your browser did not open, paste that URL into it.'));
+      log(dim('  If your browser did not open, paste that URL into a browser on this computer.'));
       log('');
       log(dim('  Waiting for you to finish signing in...'));
 
@@ -245,23 +281,31 @@ async function login() {
   }
 
   const varName = detectEnvVarName(root);
-  const file = writeEnvVar(root, varName, result.key);
-  const addedIgnore = ensureGitignored(root);
-  const relative = path.relative(root, file) || '.env.local';
+  const fileName = envFileFor(varName, result.tier);
+  const file = writeEnvVar(root, varName, result.key, fileName);
+  // An earlier login may have left the key in .env.local; a free key there
+  // would still ride along into release builds.
+  const moved = fileName !== '.env.local' && removeEnvVar(root, varName, '.env.local');
+  const addedIgnore = ensureGitignored(root, fileName);
+  const relative = path.relative(root, file) || fileName;
 
   log('');
   log(
     `${green('OK')} Signed in${result.email ? ' as ' + bold(result.email) : ''} - ${bold(result.tier)} tier`
   );
   log(`  Wrote ${cyan(varName)} to ${cyan(relative)}`);
-  if (addedIgnore) log(dim('  Added .env.local to .gitignore'));
+  if (moved) log(dim(`  Removed the old ${varName} line from .env.local`));
+  if (fileName === '.env.development.local') {
+    log(dim('  Expo loads this file for `expo start` only, so the key stays out of release builds.'));
+  }
+  if (addedIgnore) log(dim(`  Added ${fileName} to .gitignore`));
   log('');
   log('  Use it in your app:');
   log('');
-  log(cyan(`    Buoy.init({ licenseKey: process.env.${varName} });`));
+  log(cyan(`    Buoy.init({ licenseKey: ${varName} });`));
   log('');
-  log(dim('  Restart your bundler with its cache cleared to pick this up:'));
-  log(dim('    npx expo start --clear      (Expo inlines EXPO_PUBLIC_* at build time)'));
+  log(dim('  Swift: pass the key through BuoyConfig.licenseKey in your development build.'));
+  log(dim('  Bare React Native does not load .env.local automatically; wire your existing env loader.'));
   log('');
 }
 
@@ -270,16 +314,21 @@ function help() {
   ${bold('buoy')} - React Buoy CLI
 
   ${bold('Usage')}
-    npx buoy <command>
-    npx --package=@buoy-gg/core buoy <command>   ${dim('(if npx picks the wrong one)')}
+    npx --package=@buoy-gg/core buoy <command>
+
+  ${dim('(if npx picks the wrong one)')}
 
   ${bold('Commands')}
-    login     Sign in and write your license key to .env.local
+    login     Sign in and write your license key to an env file
     help      Show this message
 
   ${bold('Notes')}
-    A free key takes about thirty seconds and needs no card. Paid keys use the
-    same command - it writes whichever key your account already holds.
+    Run login from your app directory. Complete browser sign-in to receive
+    your account key. On Expo, a free key goes to .env.development.local so
+    it never ships in a release build; a paid key goes to .env.local. Other
+    projects receive BUOY_KEY in .env.local and must configure their own
+    environment loader and variable mapping.
+    This command does not install tools or verify a Desktop connection.
 
     Docs: ${SITE}/buoy/latest/docs/installation
 `);
@@ -301,7 +350,9 @@ if (require.main === module) {
 
 module.exports = {
   detectEnvVarName,
+  envFileFor,
   writeEnvVar,
+  removeEnvVar,
   ensureGitignored,
   awaitKeyFromBrowser,
 };

package/lib/commonjs/Buoy.js

@@ -61,16 +61,7 @@ const Buoy = exports.Buoy = {
    */
   init(config) {
     if (config.telemetry === false) telemetryEnabled = false;
-
-    // If no license key or empty string, clear any cached license
-    if (!config.licenseKey || config.licenseKey.trim() === "") {
-      _license.LicenseManager.initialize().then(() => _license.LicenseManager.clearLicense()).catch(() => {});
-      return;
-    }
-
-    // Initialize the license manager and set the key
-    const key = config.licenseKey; // We've already checked it's not empty above
-    _license.LicenseManager.initialize().then(() => _license.LicenseManager.setLicenseKey(key)).catch(error => {
+    void _license.LicenseManager.configure(config.licenseKey).catch(error => {
       console.warn("[Buoy] License initialization failed:", error);
     });
   },
@@ -88,12 +79,8 @@ const Buoy = exports.Buoy = {
    * ```
    */
   async initAsync(config) {
-    if (!config.licenseKey) {
-      console.warn("[Buoy] No license key provided to Buoy.initAsync()");
-      return false;
-    }
-    await _license.LicenseManager.initialize();
-    return _license.LicenseManager.setLicenseKey(config.licenseKey);
+    if (config.telemetry === false) telemetryEnabled = false;
+    return _license.LicenseManager.configure(config.licenseKey);
   },
   /**
    * Check if Buoy Pro is active

package/lib/commonjs/floatingMenu/AppHost.js

@@ -8,7 +8,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _AppHostLogic = require("./AppHostLogic.js");
-var _AppIcon = require("./AppIcon.js");
+var _AppIcon = require("./AppIcon");
 var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
 var _ToolHost = require("./ToolHost.js");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");

package/lib/commonjs/floatingMenu/AppHost.web.js

@@ -7,7 +7,7 @@ exports.useAppHost = exports.AppOverlay = exports.AppHostProvider = void 0;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = require("react");
 var _AppHostLogic = require("./AppHostLogic.js");
-var _AppIcon = require("./AppIcon.js");
+var _AppIcon = require("./AppIcon");
 var _floatingToolsWeb = require("./floatingTools.web.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**

package/lib/commonjs/floatingMenu/AppIcon.web.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppTextIcon = AppTextIcon;
+exports.renderAppIcon = renderAppIcon;
+var _react = _interopRequireDefault(require("react"));
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** DOM twin of the native icon resolver; importing RN breaks pure web hosts. */
+function AppTextIcon({
+  label,
+  size,
+  color = _sharedUi.toolTheme.colors.text
+}) {
+  const chars = Math.max(Array.from(label.replace(/[\uFE00-\uFE0F\u200D]/g, "")).length, 1);
+  const maxWidth = chars <= 2 ? size : size * 1.6;
+  const fontSize = Math.max(7, Math.min(size * (chars === 1 ? 0.7 : 0.62), maxWidth / (0.62 * chars)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: {
+      display: "inline-flex",
+      minWidth: size,
+      maxWidth,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center",
+      color,
+      fontSize,
+      fontWeight: 800,
+      letterSpacing: 0.5,
+      whiteSpace: "nowrap",
+      overflow: "hidden"
+    },
+    children: label
+  });
+}
+function renderAppIcon(icon, ctx) {
+  if (icon == null) return icon;
+  if (typeof icon === "function") return /*#__PURE__*/_react.default.createElement(icon, {
+    slot: ctx.slot,
+    size: ctx.size,
+    state: ctx.state,
+    actions: ctx.actions
+  });
+  if (typeof icon === "string" || typeof icon === "number") return /*#__PURE__*/(0, _jsxRuntime.jsx)(AppTextIcon, {
+    label: String(icon),
+    size: ctx.size,
+    color: ctx.color
+  });
+  return icon;
+}

package/lib/commonjs/floatingMenu/DevToolsSettingsModal.js

@@ -11,7 +11,7 @@ var _useDesktopSyncStatus = require("./useDesktopSyncStatus.js");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _DefaultConfigContext = require("./DefaultConfigContext.js");
-var _AppIcon = require("./AppIcon.js");
+var _AppIcon = require("./AppIcon");
 var _jsxRuntime = require("react/jsx-runtime");
 const STORAGE_KEY = "@react_buoy_dev_tools_settings";
 const MAX_DIAL_SLOTS = 6;
@@ -376,10 +376,9 @@ const DevToolsSettingsModal = ({
           size: 18
         });
       case "sentry":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SentryBugIcon, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SentryIcon, {
           size: 18,
-          colorPreset: "red",
-          noBackground: true
+          color: "#9945FF"
         });
       case "storage":
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
@@ -597,6 +596,7 @@ const DevToolsSettingsModal = ({
       contentContainerStyle: styles.scrollContainer,
       children: [activeTab === "floating" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: renderSection("Floating Tools", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          glass: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightRows, {
             children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolRow(key, value, false, () => toggleFloatingTool(key)))
           })
@@ -605,11 +605,13 @@ const DevToolsSettingsModal = ({
         }))
       }), activeTab === "settings" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [renderSection("Background", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          glass: true,
           padded: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.BackgroundSwitcher, {
             embedded: true
           })
         })), renderSection("Storage", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.NightCard, {
+          glass: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             activeOpacity: 0.7,
             onPress: () => setIsStorageExpanded(!isStorageExpanded),
@@ -690,6 +692,7 @@ const DevToolsSettingsModal = ({
             })]
           })]
         })), desktopSyncStatus && desktopSyncStatus.state !== "idle" && renderSection("Desktop Sync", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.NightCard, {
+          glass: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             activeOpacity: 0.7,
             onPress: () => toggleSettingExpanded("desktopSync"),
@@ -731,12 +734,14 @@ const DevToolsSettingsModal = ({
             })]
           })]
         })), renderSection("Modal Behavior", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          glass: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.NightRows, {
             children: [renderGlobalSettingRow("enableSharedModalDimensions", "Shared Modal Size", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately."), _reactNative.Platform.OS !== "web" ? renderGlobalSettingRow("expandableWindowControls", "Expand Controls", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access.") : null]
           })
         }))]
       }), activeTab === "pro" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [renderSection("License", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+          glass: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.settingRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -757,6 +762,7 @@ const DevToolsSettingsModal = ({
           children: isPro ? "You have full access to all Buoy DevTools features." : licenseError ? licenseErrorIsTransport ? `Couldn't reach the license server (${licenseError}). A VPN or corporate proxy can block api.keygen.sh — turn it off and reload. Your key hasn't been rejected.` : `License check failed: ${licenseError}.` : "Upgrade to Pro to unlock all features and support development."
         })), !isPro && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [renderSection("Pro Features", /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightCard, {
+            glass: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightRows, {
               children: ["Advanced Settings", "Priority Support"].map(feature => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                 style: styles.featureRow,
@@ -792,6 +798,7 @@ const DevToolsSettingsModal = ({
       customContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.headerRow,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSegmented, {
+          glass: true,
           tabs: [{
             key: "floating",
             label: "Floating"
@@ -1083,7 +1090,7 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 150
   },
   storageKeyItem: {
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    backgroundColor: _sharedUi.night.color.glassElevated,
     borderRadius: _sharedUi.night.radius.segment,
     paddingHorizontal: 10,
     paddingVertical: 7,