open-index/open-npm huggingface dataset:
npm package: @react-xp/core
Description: This is a React Experience core utilities and logical code
Latest version: 1.0.0-beta.17

# Rsbuild Project

## Setup

Install the dependencies:

```bash
pnpm install
```

## Get Started

Start the dev server:

```bash
pnpm dev
```

Build the app for production:

```bash
pnpm build
```

Preview the production build locally:

```bash
pnpm preview
```
npm package: @react-xray/plugin-copy-to-clipboard
Description: `@react-xray/plugin-copy-to-clipboard` adds a `Copy path` item to the XRay action panel for selections that have source information.
Latest version: 0.0.1

# @react-xray/plugin-copy-to-clipboard

`@react-xray/plugin-copy-to-clipboard` adds a `Copy path` item to the XRay action panel for selections that have source information.

When you trigger the action, the plugin copies a project-relative `path:lineNumber` reference to the clipboard.

## Install

Install the plugin alongside its peer dependencies:

```bash
pnpm add --dev @react-xray/core @react-xray/ui-components @react-xray/plugin-copy-to-clipboard
```

If you are already using `react-xray`, this plugin is included there by default.

## Usage

```tsx
import { XRay } from '@react-xray/core'
import { CopyToClipboardPlugin } from '@react-xray/plugin-copy-to-clipboard'

import App from './App'

export function AppWithXray() {
  return (
    <>
      <App />
      <XRay
        root={import.meta.env.VITE_ROOT}
        plugins={[CopyToClipboardPlugin()]}
      />
    </>
  )
}
```

`root` should be the absolute project root passed to XRay so the plugin can resolve relative file paths for comments.

## Copied output

The copied value uses the current project root as the base path and looks like this:

```text
src/components/Button.tsx:42
```
npm package: @react-xray/plugin-open-editor
Description: Open the currently selected component source in a local editor from the XRay action panel.
Latest version: 0.0.1

# @react-xray/plugin-open-editor

Open the currently selected component source in a local editor from the XRay action panel.

This plugin adds:

- an `Open in Editor` action for the selected source
- a settings control for choosing the default editor inside the widget

## Installation

Install the plugin alongside its peer dependencies:

```bash
pnpm add --dev @react-xray/core @react-xray/ui-components @react-xray/plugin-open-editor
```

If you are already using `react-xray`, this plugin is included there by default.

## Usage

```tsx
import { XRay } from '@react-xray/core'
import { OpenEditorPlugin } from '@react-xray/plugin-open-editor'

import App from './App'

export function AppWithXRay() {
  return (
    <>
      <App />
      <XRay
        root={import.meta.env.VITE_ROOT}
        plugins={[OpenEditorPlugin({ editor: 'vscode' })]}
      />
    </>
  )
}
```

`root` should be the absolute project root passed to XRay so the plugin can resolve relative file paths for comments.

## `editor` option

`OpenEditorPlugin` accepts a single option:

```ts
interface OpenEditorPluginOptions {
  editor?: EditorPreset
}
```

- Default: `vscode`
- If the user changes the editor in the widget settings, that's what's used instead.

The package also exports the `EditorPreset` type.

## Supported editor presets

These are the currently implemented presets:

- `vscode`
- `cursor`
- `windsurf`
- `webstorm`
- `intellij`

## Behavior

When a source location is selected, the plugin resolves the file path relative to the XRay `root` and opens the generated editor URL with `window.open(...)`.
npm package: @react-xray/plugin-preview
Description: Monaco-based source preview plugin for `@react-xray/core`.
Latest version: 0.0.1

# @react-xray/plugin-preview

Monaco-based source preview plugin for `@react-xray/core`.

This package adds a toolbar control for connecting the current project folder and an action-panel preview for the selected source file.

## Installation

```bash
pnpm add --dev @react-xray/core @react-xray/ui-components @react-xray/plugin-preview
```

If you are already using `react-xray`, this plugin is included there by default.

## Usage

```tsx
import { XRay } from '@react-xray/core'
import { PreviewPlugin } from '@react-xray/plugin-preview'

import App from './App'

export function AppWithXRay() {
  return (
    <>
      <App />
      <XRay
        root={import.meta.env.VITE_ROOT}
        plugins={[PreviewPlugin({ theme: 'one-dark-pro' })]}
      />
    </>
  )
}
```

`root` should be the absolute project root passed to XRay so the plugin can resolve relative file paths for comments.

## What it adds

- A toolbar button for project-folder access.
- An action-panel source preview for the currently selected component source.
- An inline Monaco editor with syntax highlighting.
- Optional save and expand controls when editing is enabled.
- A plugin settings UI for preview theme and editing mode.

## Folder access expectations

The preview plugin reads files from the project through XRay's file-system service, so users must grant folder access before the preview can load file contents.

- Pass the absolute project root to `<XRay root="..." />`.
- When prompted, select the same project folder that contains the source files XRay resolves.
- If a root path is available, the plugin copies that path to the clipboard to make the folder picker easier to use.
- Until access is granted, the toolbar button and action panel show the access flow instead of a live file preview.
- When editing is enabled, saves are written back through the same file-system access.

If you only want inspection without file writes, start the plugin in read-only mode with `disabled: true`.

## Options

`PreviewPlugin(options?: PreviewPluginOptions)`

```ts
interface PreviewPluginOptions {
  disabled?: boolean
  theme?: BundledTheme
}
```

- `disabled` — defaults to `false`. Starts the preview in read-only mode and removes editing controls.
- `theme` — defaults to `'one-dark-pro'`. Accepts any bundled Shiki theme id.

## Settings

The plugin also contributes a settings panel inside XRay where users can:

- toggle code editing on or off
- switch the preview theme

These controls let users adjust preview behavior without changing the plugin registration code.
npm package: @react-xray/ui-components
Description: Shared UI primitives for the React XRay package ecosystem.
Latest version: 0.0.1

# @react-xray/ui-components

Shared UI primitives for the React XRay package ecosystem.

Use this package when building a plugin. These components match the widget's existing look and feel, especially toolbar controls, action-panel controls, overlays, and small layout helpers.

## Stable exports across current entrypoints

These are the symbols currently present in both `src/index.tsx` and the production stub surface (`src/index.prod.ts` / `dist/index.prod.d.ts`).

### Action and input primitives

- `Button`
- `IconButton`
- `ToolbarButton`
- `Textarea`

### Layout and small helpers

- `PanelHeader`
- `Separator`
- `Kbd`, `KbdGroup`

### Overlay and selection primitives

- `Tooltip`
- `Popover`
- `DropdownMenu`
- `Select`
- `Combobox`
- `panelPopupStyle`

### Icons

- `ChatBubbleIcon`
- `ChevronRightIcon`
- `ClipboardIcon`
- `CollapseIcon`
- `ExpandIcon`
- `FolderIcon`
- `OpencodeIcon`
- `OpenInEditorIcon`
- `SaveIcon`
- `SettingsIcon`
- `TrashIcon`
- `XIcon`

## Intended usage for package authors

- Prefer these primitives over package-local replacements when you need standard buttons, headers, menus, selects, or text inputs.
- Keep styling inline. These components are designed to be extended with `style` props and the shared inline-style approach used throughout this repo.
- For portal-based UI inside the XRay widget, render into the widget portal container instead of `document.body`. In practice, package authors typically pair this package with `useWidgetPortalContainer()` from `@react-xray/core`.
- Keep examples and public imports limited to the shared surface available across the package's current conditional entrypoints.

## Example

```tsx
import { useWidgetPortalContainer } from '@react-xray/core'
import {
  Button,
  IconButton,
  OpenInEditorIcon,
  PanelHeader,
  Tooltip,
} from '@react-xray/ui-components'

export function ExamplePanel() {
  const portalContainer = useWidgetPortalContainer()

  return (
    <div>
      <PanelHeader
        title="Preview"
        actionsRender={
          <Tooltip label="Open in editor" container={portalContainer}>
            <IconButton aria-label="Open in editor">
              <OpenInEditorIcon size={14} />
            </IconButton>
          </Tooltip>
        }
      />

      <Button variant="secondary">Refresh</Button>
    </div>
  )
}
```