### Install All Buoy.gg Tools

Source: https://github.com/buoy-gg/buoy/blob/main/README.md

Install all available Buoy.gg tools simultaneously using npm. This command installs the core package along with all listed tools.

```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}
```

--------------------------------

### Install Buoy.gg Core Package

Source: https://github.com/buoy-gg/buoy/blob/main/README.md

Install the core package using npm. Alternatively, yarn, pnpm, or bun can be used.

```bash
npm install @buoy-gg/core
# or: yarn add / pnpm add / bun add
```

--------------------------------

### Install Bench with Native Modules

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/perf-monitor.md

Install Bench along with required native modules for React Native performance monitoring. Rebuild your app with a custom dev build after installation.

```bash
npm install @buoy-gg/perf-monitor react-native-reanimated react-native-worklets react-native-performance-toolkit react-native-nitro-modules
```

```bash
yarn add @buoy-gg/perf-monitor react-native-reanimated react-native-worklets react-native-performance-toolkit react-native-nitro-modules
```

```bash
pnpm add @buoy-gg/perf-monitor react-native-reanimated react-native-worklets react-native-performance-toolkit react-native-nitro-modules
```

```bash
bun add @buoy-gg/perf-monitor react-native-reanimated react-native-worklets react-native-performance-toolkit react-native-nitro-modules
```

--------------------------------

### Install a Buoy Tool Package

Source: https://github.com/buoy-gg/buoy/blob/main/docs/floating-devtools.md

Install a Buoy tool package using npm to automatically register it with the floating menu. No additional imports or configuration are needed.

```bash
npm install @buoy-gg/network
```

--------------------------------

### Install React Buoy Core Package

Source: https://github.com/buoy-gg/buoy/blob/main/AGENTS.md

Install the core package for React Buoy using npm. This is the first step before rendering the FloatingDevTools component.

```bash
npm install @buoy-gg/core
```

--------------------------------

### Impersonate Tool Configuration with Callbacks

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Example of creating an impersonate tool instance with custom callbacks for clearing AsyncStorage and MMKV. The `onSearchUsers` callback is also provided.

```typescript
const impersonateTool = createImpersonateTool({
  onSearchUsers: searchUsers,

  // Clear AsyncStorage (filter out keys you want to keep)
  onClearAsyncStorage: async () => {
    const keys = await AsyncStorage.getAllKeys();
    const appKeys = keys.filter(k => !k.startsWith('@buoy/'));
    await AsyncStorage.multiRemove(appKeys);
  },

  // Clear MMKV
  onClearMMKV: () => {
    const keys = storage.getAllKeys();
    keys.filter(k => !k.startsWith('@buoy/')).forEach(k => storage.delete(k));
  },
});
```

--------------------------------

### Setup Jotai DevTools with Default Store

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/jotai.md

Call `watchAtoms` once at module scope, passing the default Jotai store and a map of your atoms. This setup automatically registers atoms for inspection without modifying existing atoms or requiring wrappers.

```tsx
import {
  getDefaultStore,
} from 'jotai';
import { watchAtoms } from '@buoy-gg/jotai';
import { countAtom } from './atoms/count';
import { authAtom } from './atoms/auth';
import { cartAtom } from './atoms/cart';

watchAtoms(getDefaultStore(), {
  countAtom,
  authAtom,
  cartAtom,
});
```

--------------------------------

### Setup FloatingDevTools with Zustand Stores

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/zustand.md

Pass your Zustand stores directly to the FloatingDevTools component via the `zustandStores` prop. This is the primary method for integrating the dev tools.

```tsx
import { FloatingDevTools } from '@buoy-gg/core';
import { useCounterStore } from './stores/counter';
import { useAuthStore } from './stores/auth';
import { useCartStore } from './stores/cart';

const stores = {
  counterStore: useCounterStore,
  authStore: useAuthStore,
  cartStore: useCartStore,
};

return <FloatingDevTools zustandStores={stores} />;
```

--------------------------------

### Register Multiple Custom Tools

Source: https://github.com/buoy-gg/buoy/blob/main/docs/custom-tools.md

This example demonstrates how to register multiple custom tools, including 'Auth', 'Feature Flags', and 'Analytics', each with a name, component, icon, and description.

```tsx
<FloatingDevTools
  environment="local"
  customTools={[
    {
      name: "Auth",
      component: AuthDebugger,
      icon: "🔐",
      description: "View auth state",
    },
    {
      name: "Feature Flags",
      component: FeatureFlagViewer,
      icon: "🚩",
      description: "Toggle features",
    },
    {
      name: "Analytics",
      component: AnalyticsDebugger,
      icon: "📊",
      description: "Event tracking",
    },
  ]}
/>
```

--------------------------------

### Express Middleware for Impersonation

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

An example of Express middleware to check for an impersonation header, verify user permissions, and set the effective user ID for the request.

```javascript
// Express middleware example
function impersonateMiddleware(req, res, next) {
  const impersonateUserId = req.headers['x-impersonate-user-id'];

  if (impersonateUserId) {
    // Verify the authenticated user has permission to impersonate
    if (!req.user.isAdmin) {
      return res.status(403).json({ error: 'Impersonation not allowed' });
    }

    // Switch context to impersonated user
    req.effectiveUserId = impersonateUserId;
  } else {
    req.effectiveUserId = req.user.id;
  }

  next();
}

```

--------------------------------

### Setup Jotai DevTools with Custom Store

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/jotai.md

When using a custom Jotai store with a `<Provider>`, pass the custom store instance to `watchAtoms` along with your atoms. This ensures the DevTools monitor the correct store.

```tsx
import {
  createStore,
  Provider,
} from 'jotai';
import { watchAtoms } from '@buoy-gg/jotai';
import { countAtom, authAtom } from './atoms';

const myStore = createStore();

watchAtoms(myStore, { countAtom, authAtom });

export function App() {
  return (
    <Provider store={myStore}>
      <YourApp />
    </Provider>
  );
}
```

--------------------------------

### Add FloatingDevTools to Your App

Source: https://github.com/buoy-gg/buoy/blob/main/README.md

Import and render the FloatingDevTools component in your React application. This will automatically display the installed tools in a floating menu.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";

export default function App() {
  return (
    <>
      {/* Your app */}
      <FloatingDevTools />
    </>
  );
}
```

--------------------------------

### Conditionally Show DevTools Based on User Role

Source: https://github.com/buoy-gg/buoy/blob/main/docs/quick-start.md

Control the visibility of FloatingDevTools based on user authentication and roles. This example shows devtools only for 'admin', 'qa' roles, or users with an email ending in '@yourcompany.com'.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";

export default function App() {
  const { user } = useAuth();

  // Only render for internal users, admins, or QA
  const showDevTools = 
    user?.role === "admin" ||
    user?.role === "qa" ||
    user?.email?.endsWith("@yourcompany.com");

  return (
    <>
      <YourApp />
      {showDevTools && (
        <FloatingDevTools
          licenseKey="YOUR_LICENSE_KEY"
          userRole={user?.role}
        />
      )}
    </>
  );
}
```

--------------------------------

### Custom Redux Middleware Options for Buoy

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Configure custom middleware for Buoy to control history size and ignore specific actions. This is useful for fine-grained control over what gets captured.

```tsx
import { createBuoyReduxMiddleware, withBuoyDevTools } from '@buoy-gg/redux';

const customMiddleware = createBuoyReduxMiddleware({
  maxActions: 500,           // History size (default: 200)
  ignoreActions: [
    'persist/PERSIST',
    'persist/REHYDRATE',
  ],
});

const store = configureStore({
  reducer: withBuoyDevTools(rootReducer),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(customMiddleware),
});
```

--------------------------------

### CreateEnvTool Configuration Options

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/env.md

Provides options for configuring the `createEnvTool` function, including name, description, color preset, ID, and required environment variables.

```typescript
createEnvTool({
  name?: string;                    // default: "ENV"
  description?: string;
  colorPreset?: "orange" | "cyan" | "purple" | "pink" | "yellow" | "green"; // default: "green"
  id?: string;                      // default: "env"
  requiredEnvVars?: RequiredEnvVar[];
  enableSharedModalDimensions?: boolean;
});
```

--------------------------------

### Create and Configure Impersonate Tool

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Initialize the Impersonate tool by providing a function to search for users. This function should return a list of user objects with specific properties. The tool is then integrated into the application's development tools.

```tsx
import { createImpersonateTool } from '@buoy-gg/impersonate';
import { FloatingDevTools } from '@buoy-gg/dev-tools';

const impersonateTool = createImpersonateTool({
  // Required: How to search for users
  onSearchUsers: async (query) => {
    const response = await api.searchUsers({ email: query });
    return response.users.map(user => ({
      id: user.id,
      displayName: user.name,
      email: user.email,
      avatarUrl: user.avatar,
      metadata: { role: user.role },
    }));
  },
});

function App() {
  return (
    <>
      <YourApp />
      <FloatingDevTools tools={[impersonateTool]} />
    </>
  );
}
```

--------------------------------

### Basic FloatingDevTools Usage

Source: https://github.com/buoy-gg/buoy/blob/main/docs/floating-devtools.md

Import and render the FloatingDevTools component with your license key. Ensure it's placed after your main app content.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";

function App() {
  return (
    <>
      <YourApp />
      <FloatingDevTools licenseKey="YOUR_LICENSE_KEY" />
    </>
  );
}
```

--------------------------------

### Create Environment Tool with Custom Configuration

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/env.md

Use `createEnvTool` with the `envVar` builder to define required environment variables, their types, expected values, and descriptions for validation.

```tsx
import { createEnvTool, envVar } from "@buoy-gg/env";

const envTool = createEnvTool({
  requiredEnvVars: [
    envVar("EXPO_PUBLIC_API_URL").exists(),
    envVar("EXPO_PUBLIC_DEBUG_MODE").withType("boolean").build(),
    envVar("EXPO_PUBLIC_ENVIRONMENT").withValue("development").build(),
    envVar("EXPO_PUBLIC_MAX_RETRIES")
      .withType("number")
      .withDescription("Maximum API retry attempts")
      .build(),
  ],
});
```

--------------------------------

### Initialize Buoy MCP Server

Source: https://github.com/buoy-gg/buoy/blob/main/docs/quick-start.md

Initialize the Buoy MCP Server to connect your running app with AI code editors like Claude Code or Cursor. This command sets up the necessary integration.

```bash
npx -y @buoy-gg/mcp@latest init
```

--------------------------------

### Wrap Zustand Store with buoyDevTools Middleware

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/zustand.md

Use the `buoyDevTools` middleware to wrap your Zustand stores for precise partial state capture and timing data. This is useful for performance monitoring and detailed state change analysis.

```tsx
import { create } from 'zustand';
import { buoyDevTools } from '@buoy-gg/zustand';

const useCounterStore = create(
  buoyDevTools(
    (set) => ({
      count: 0,
      increment: () => set((s) => ({ count: s.count + 1 })),
    }),
    { name: 'counterStore' }
  )
);
```

--------------------------------

### Manual MCP Configuration

Source: https://github.com/buoy-gg/buoy/blob/main/docs/mcp.md

Add this JSON configuration to your MCP config to manually wire the buoy server.

```json
{
  "mcpServers": {
    "buoy": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@buoy-gg/mcp@latest"]
    }
  }
}
```

--------------------------------

### Enable Pro Features with License Key

Source: https://github.com/buoy-gg/buoy/blob/main/README.md

To unlock Pro features in production builds, add the licenseKey prop to the FloatingDevTools component.

```tsx
<FloatingDevTools licenseKey="YOUR_LICENSE_KEY" />
```

--------------------------------

### Enable Full Time-Travel with Buoy DevTools

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Wrap your root reducer with `withBuoyDevTools` to enable full time-travel capabilities in your Redux store. This allows you to jump to past states.

```tsx
import { configureStore } from '@reduxjs/toolkit';
import { withBuoyDevTools } from '@buoy-gg/redux';

const store = configureStore({
  reducer: withBuoyDevTools(rootReducer),
});
```

--------------------------------

### Importing Redux Utilities from Buoy

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

This snippet shows the primary imports available for integrating Buoy with Redux. These include utilities for auto-instrumentation, manual middleware creation, time-travel debugging features, hooks, and history adapters.

```tsx
import {
  // Auto-instrumentation (used internally, rarely needed)
  instrumentStore,
  isStoreInstrumented,

  // Manual middleware (optional, for advanced config)
  buoyReduxMiddleware,
  createBuoyReduxMiddleware,

  // Time-travel (optional)
  withBuoyDevTools,
  jumpToState,
  replayAction,

  // Hooks
  useReduxActions,
  useAutoInstrumentRedux,

  // History adapter (for custom integrations)
  reduxHistoryAdapter,
  createReduxHistoryAdapter,
} from '@buoy-gg/redux';
```

--------------------------------

### Register SecureStore Keys

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/storage.md

Register keys for Expo SecureStore to make them visible in the Storage Explorer. Pass the SecureStore module and an array of keys or objects with key configurations.

```typescript
import * as SecureStore from "expo-secure-store";
import { registerSecureStoreKeys } from "@buoy-gg/storage";

registerSecureStoreKeys(SecureStore, [
  "auth.accessToken",
  { key: "session", keychainService: "com.myapp.auth" },
  // Biometric-protected keys are listed but never auto-read (no surprise Face ID prompts)
  { key: "pin", requireAuthentication: true },
]);
```

--------------------------------

### Add Custom Debugging Tools

Source: https://github.com/buoy-gg/buoy/blob/main/docs/floating-devtools.md

Integrate custom debugging tools by providing an array of tool configurations to the customTools prop. Each tool requires a name, component, and optionally an icon.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";

const FeatureFlagTool = () => (
  <View>
    <Text>Toggle feature flags here</Text>
  </View>
);

function App() {
  return (
    <FloatingDevTools
      customTools={[
        {
          name: "Flags",
          component: FeatureFlagTool,
          icon: "🚩",
        },
      ]} 
    />
  );
}
```

--------------------------------

### Chain buoyDevTools with Persist Middleware

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/zustand.md

The `buoyDevTools` middleware can be chained with other Zustand middleware, such as `persist`, to enable debugging for stores that persist their state.

```tsx
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { buoyDevTools } from '@buoy-gg/zustand';

const useAuthStore = create(
  buoyDevTools(
    persist(
      (set) => ({ user: null, login: (u) => set({ user: u }) }),
      { name: 'auth-storage' }
    ),
    { name: 'authStore' }
  )
);
```

--------------------------------

### Create Custom Debug Borders Tool

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/debug-borders.md

Use `createDebugBordersTool` to build a customized version of the debug borders tool. You can specify names, descriptions, colors, and an ID for your custom tool.

```tsx
import { createDebugBordersTool } from "@buoy-gg/debug-borders";

const layoutTool = createDebugBordersTool({
  name: "LAYOUT",
  description: "Layout visualizer",
  offColor: "#9ca3af",
  bordersColor: "#ec4899",
  labelsColor: "#8b5cf6",
  id: "custom-borders",
});

```

--------------------------------

### Integrate Bench HUD in Web Applications

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/perf-monitor.md

Add the PerfMonitorOverlay component to your React web application's tree to display the performance HUD. Use PerfMonitorController.toggle() to show or hide the overlay.

```tsx
import { PerfMonitorOverlay, PerfMonitorController } from "@buoy-gg/perf-monitor";

// anywhere in your tree
<PerfMonitorOverlay />
// toggle it
PerfMonitorController.toggle();
```

--------------------------------

### Redux Middleware

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Provides middleware for integrating Buoy's state management capabilities into your Redux store. `buoyReduxMiddleware` is the default, while `createBuoyReduxMiddleware` allows for custom configurations.

```APIDOC
## Redux Middleware

### Description
Integrates Buoy's state management into your Redux store.

### Exports
- `buoyReduxMiddleware`: The default middleware for Redux integration.
- `createBuoyReduxMiddleware`: A factory function to create custom middleware instances with specific configurations.
```

--------------------------------

### EnvVar Builder API for Defining Requirements

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/env.md

The fluent builder API simplifies defining environment variable requirements, including type, expected value, and descriptive documentation. A shorthand is available for simply checking existence.

```tsx
envVar("API_KEY")
  .withType("string")           // Set expected type
  .withValue("sk_test_123")     // Or set expected value
  .withDescription("API Key")   // Add documentation
  .build()                      // Finalize config

// Shorthand for just checking existence
envVar("API_KEY").exists()
```

--------------------------------

### Redux History Adapter

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Utilities for creating custom history adapters for Redux, allowing integration with external systems or custom storage solutions. `reduxHistoryAdapter` and `createReduxHistoryAdapter` facilitate this.

```APIDOC
## Redux History Adapter

### Description
Provides tools for creating and managing custom history adapters for Redux state.

### Exports
- `reduxHistoryAdapter`: A pre-built history adapter (if applicable).
- `createReduxHistoryAdapter`: A factory function to create custom Redux history adapters, enabling integration with various storage or logging mechanisms.
```

--------------------------------

### Integrate BUOY FloatingDevTools

Source: https://github.com/buoy-gg/buoy/blob/main/README.md

Conditionally render the FloatingDevTools component based on whether the current user is an internal user. This ensures the tools are only available in development or internal environments.

```tsx
<>
  {/* Your app */}
  {isInternalUser && <FloatingDevTools />}
</>
```

--------------------------------

### Watch Jotai Atoms

Source: https://github.com/buoy-gg/buoy/blob/main/docs/quick-start.md

Use the 'watchAtoms' function from '@buoy-gg/jotai' to monitor your Jotai atoms. Call this function once at module scope, passing your store and a named map of atoms.

```tsx
import { getDefaultStore } from "jotai";
import { watchAtoms } from "@buoy-gg/jotai";
import { authAtom } from "./atoms/auth";
import { cartAtom } from "./atoms/cart";

watchAtoms(getDefaultStore(), {
  authAtom,
  cartAtom,
});
```

--------------------------------

### Integrate Zustand Stores

Source: https://github.com/buoy-gg/buoy/blob/main/docs/quick-start.md

Pass your Zustand stores directly to the FloatingDevTools component using the 'zustandStores' prop. This allows the Jotai tool to automatically detect and display your stores.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";
import { useAuthStore } from "./stores/auth";
import { useCartStore } from "./stores/cart";

const stores = {
  authStore: useAuthStore,
  cartStore: useCartStore,
};

return (
  <FloatingDevTools
    licenseKey="YOUR_LICENSE_KEY"
    zustandStores={stores}
  />
);
```

--------------------------------

### Register a Basic Custom Tool

Source: https://github.com/buoy-gg/buoy/blob/main/docs/custom-tools.md

This snippet shows how to register a single custom tool named 'Cache' with a 'CacheDebugger' component. Ensure you import 'FloatingDevTools' from '@buoy-gg/core' and necessary React Native components.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";
import { View, Text, Button } from "react-native";

const CacheDebugger = () => {
  const clearCache = () => {
    // Your cache clearing logic
  };

  return (
    <View>
      <Text>Cache Status: 42 items</Text>
      <Button title="Clear Cache" onPress={clearCache} />
    </View>
  );
};

function App() {
  return (
    <FloatingDevTools
      environment="local"
      customTools={[
        {
          name: "Cache",
          component: CacheDebugger,
          icon: "🗑️",
        },
      ]} 
    />
  );
}
```

--------------------------------

### User Interface Definition

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Defines the structure for user objects used in the impersonation tool's search functionality. Includes fields for ID, display name, email, avatar, and metadata.

```typescript
interface User {
  id: string;              // Sent in the impersonation header
  displayName?: string;    // Shown in UI (falls back to email, then id)
  email?: string;          // User's email
  avatarUrl?: string;      // Avatar image URL
  metadata?: Record<string, unknown>;  // Extra info to display
}
```

--------------------------------

### Redux Time-Travel Utilities

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Enables time-travel debugging capabilities for your Redux store when integrated with Buoy. `withBuoyDevTools` enhances the store with devtools, and `jumpToState` and `replayAction` allow for manual state manipulation.

```APIDOC
## Redux Time-Travel Utilities

### Description
Provides utilities for enabling and controlling time-travel debugging in Redux applications.

### Exports
- `withBuoyDevTools`: Higher-order function to enhance your Redux store with Buoy's development tools, enabling time-travel.
- `jumpToState`: Function to manually navigate to a specific state in the Redux history.
- `replayAction`: Function to replay a specific action from the Redux history.
```

--------------------------------

### ImpersonateToolConfig Interface

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Defines the configuration structure for the Impersonate tool, including required callbacks and optional settings for identity, data clearing, developer defaults, and UI.

```typescript
interface ImpersonateToolConfig {
  // Tool identity (optional)
  id?: string;                    // Default: 'impersonate'
  name?: string;                  // Default: 'IMPERSONATE'
  description?: string;           // Shown in tool settings

  // Required
  onSearchUsers: (query: string) => Promise<User[]>;

  // Data clearing callbacks
  // React Query & Redux are auto-detected — only provide if you need custom logic
  onClearReactQuery?: () => void | Promise<void>;
  onClearRedux?: () => void | Promise<void>;
  onClearAsyncStorage?: () => void | Promise<void>;  // Required for AsyncStorage
  onClearMMKV?: () => void | Promise<void>;          // Required for MMKV

  // Developer defaults (optional)
  defaults?: {
    headerKey?: string;           // Default: 'x-impersonate-user-id'
    showBanner?: boolean;         // Default: true
    dataNukeSettings?: {
      reactQuery?: boolean;       // Default: true
      redux?: boolean;            // Default: true
      asyncStorage?: boolean;     // Default: false
      mmkv?: boolean;             // Default: false
    };
  };

  // UI options
  showSettingsTab?: boolean;      // Default: true
}

```

--------------------------------

### Set Developer Defaults for Impersonate Tool

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Configure default settings for the impersonate tool, such as custom headers, banner visibility, and data clearing preferences. These defaults are used when no user-specific settings are persisted.

```tsx
const impersonateTool = createImpersonateTool({
  onSearchUsers: searchUsers,

  defaults: {
    headerKey: 'x-admin-impersonate',  // Custom header name
    showBanner: true,                   // Show floating banner (default: true)
    dataNukeSettings: {
      reactQuery: true,
      redux: false,      // Don't clear Redux by default
      asyncStorage: false,
      mmkv: false,
    },
  },
});
```

--------------------------------

### Multiple Target Components

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/image-overlay.md

You can mark multiple components throughout your application as targets for the image overlay. This allows for flexible comparison across different sections of your UI.

```tsx
// Header section
<View testID="image-target:Header">
  <Logo />
  <NavBar />
</View>

// Product card
<View testID="image-target:ProductCard">
  <Image source={product.image} />
  <Text>{product.name}</Text>
  <Text>{product.price}</Text>
</View>

// Bottom tab bar
<View testID="image-target:TabBar">
  <TabButton icon="home" />
  <TabButton icon="search" />
  <TabButton icon="profile" />
</View>
```

--------------------------------

### Marking Components as Targets

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/image-overlay.md

Add a `testID` with the `image-target:` prefix to a View component to make it discoverable in Component Mode. The text following the prefix will be used as the label in the target list.

```tsx
<View testID="image-target:LoginCard">
  <Text>Welcome back</Text>
  <TextInput placeholder="Email" />
  <Button title="Sign In" />
</View>
```

--------------------------------

### Redux Store Instrumentation

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Internal utilities for instrumenting the Redux store. `instrumentStore` applies instrumentation, and `isStoreInstrumented` checks if the store has already been instrumented. These are typically used internally.

```APIDOC
## Redux Store Instrumentation

### Description
Utilities for instrumenting the Redux store, primarily for internal use.

### Exports
- `instrumentStore`: Function to apply instrumentation to a Redux store.
- `isStoreInstrumented`: Utility to check if a Redux store has already been instrumented.
```

--------------------------------

### Supported Environment Variable Types

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/env.md

Defines the set of supported types for environment variables, including string, number, boolean, array, object, and URL.

```typescript
type EnvVarType = "string" | "number" | "boolean" | "array" | "object" | "url";
```

--------------------------------

### Custom Tool Accessing App State

Source: https://github.com/buoy-gg/buoy/blob/main/docs/custom-tools.md

This snippet shows an 'AuthDebugger' component that uses the 'useAuth' hook and '@tanstack/react-query's 'useQueryClient' to access and manipulate app state, such as logging out a user and clearing the query cache.

```tsx
import { useAuth } from "./hooks/useAuth";
import { useQueryClient } from "@tanstack/react-query";

const AuthDebugger = () => {
  const { user, logout } = useAuth();
  const queryClient = useQueryClient();

  const forceLogout = () => {
    logout();
    queryClient.clear();
  };

  return (
    <View>
      <Text>User: {user?.email ?? "Not logged in"}</Text>
      <Text>Role: {user?.role}</Text>
      <Button title="Force Logout" onPress={forceLogout} />
    </View>
  );
};
```

--------------------------------

### Hide Settings Tab in Impersonate Tool

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Disable the settings tab in the impersonate tool to simplify testing scenarios. This ensures users can only access the Search and History tabs.

```tsx
const impersonateTool = createImpersonateTool({
  onSearchUsers: searchUsers,
  showSettingsTab: false,  // Only show Search and History tabs
});
```

--------------------------------

### Redux Hooks

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/redux.md

Provides hooks for interacting with Redux actions and auto-instrumentation within your React components. `useReduxActions` simplifies dispatching actions, and `useAutoInstrumentRedux` can be used for automatic instrumentation.

```APIDOC
## Redux Hooks

### Description
Custom hooks for interacting with Redux state and actions within React components.

### Exports
- `useReduxActions`: Hook to access and dispatch Redux actions easily.
- `useAutoInstrumentRedux`: Hook for enabling automatic instrumentation of Redux actions and state changes.
```

--------------------------------

### Disable Floating Banner by Default

Source: https://github.com/buoy-gg/buoy/blob/main/docs/tools/impersonate.md

Configure the impersonate tool to disable the floating banner by default. The banner normally indicates when impersonation is active and provides controls to pause or stop it.

```tsx
const impersonateTool = createImpersonateTool({
  onSearchUsers: searchUsers,
  defaults: {
    showBanner: false,  // Disable banner by default
  },
});
```

--------------------------------

### Add FloatingDevTools to App Root

Source: https://github.com/buoy-gg/buoy/blob/main/docs/quick-start.md

Drop the FloatingDevTools component at the root of your React Native or Expo app. Ensure you replace 'YOUR_LICENSE_KEY' with your actual license key.

```tsx
import { FloatingDevTools } from "@buoy-gg/core";

export default function App() {
  return (
    <>
      <YourApp />
      <FloatingDevTools licenseKey="YOUR_LICENSE_KEY" />
    </>
  );
}
```

--------------------------------

### Override Environment Badge

Source: https://github.com/buoy-gg/buoy/blob/main/docs/floating-devtools.md

Explicitly set the environment badge if your NODE_ENV does not match the desired display name. Supported values include 'local', 'dev', 'staging', 'qa', and 'prod'.

```tsx
<FloatingDevTools environment="qa" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.