@buoy-gg/shared-ui

Shared components, colors, hooks, and utilities used by Buoy's React Native tools. Use this package when implementing a custom tool or a compatible internal interface. To install the existing tool suite, start with @buoy-gg/core.

Install

npm install @buoy-gg/shared-ui

Keep peer dependencies compatible with your other Buoy packages, including the license package. This is the @buoy-gg scope.

Public entry points

| Import | Contents | | --- | --- | | @buoy-gg/shared-ui | Main component and utility exports. | | @buoy-gg/shared-ui/colors | Palette exports for initialization before component modules load. | | @buoy-gg/shared-ui/ui | UI components and styling helpers. | | @buoy-gg/shared-ui/hooks | Shared hooks. | | @buoy-gg/shared-ui/utils | Utility functions. | | @buoy-gg/shared-ui/dataViewer | Data inspection components. | | @buoy-gg/shared-ui/history | History-related exports. |

For example, read the shared palette through its dedicated entry point:

import { macOSColors } from "@buoy-gg/shared-ui/colors";

const panelBackground = macOSColors.background.card;

Use the installed declarations to select components and their props. Avoid private source imports. Some components and stores depend on account state or provider context; importing a primitive does not initialize the surrounding tool lifecycle.

Follow the custom-tool guide to register a tool and its adapter. Verify your panel with empty data, a known populated state, and the supported app theme before connecting remote actions.

Account setup

AccountSetup shows the sign-in launcher when Buoy needs a verified account. Native and web use the same launcher and account card, including the copyable login command, connection feedback, and support links. The web card opens above the launcher and closes with Escape, its close button, or a click outside. FreeAccountPrompt presents the card in a native modal.

Custom floating tools

FloatingTool provides the same drag, hide/restore and position behavior used by the DevTools bubble. Use FloatingToolHost with openFloatingTool to keep compact custom controls mounted across navigation. Each tool supplies its own content and actions. Set dragFromSurface to make the background draggable while buttons keep their gestures; the default uses the grip only.

See the custom floating tools guide for native and browser integration, lifecycle rules and examples. Browser consumers can import the dedicated @buoy-gg/shared-ui/floating entry.

In browser panels, header dragging starts on non-interactive space. Buttons, tabs, inputs, and other focusable controls keep their pointer input. Window controls have 24 px hit areas.