open-index/open-npm huggingface dataset:
npm package: @rxdrag/astro-sandbox
Description: @rxdrag/astro-sandbox
Latest version: 0.1.0

@rxdrag/astro-sandbox

┌─────────────────────────────────────────────────────────────┐
│                         宿主窗口                              │
│  ┌─────────────────────────────────────────────────────────┐ │
│  │ ModuleLoader                                            │ │
│  │  - 编译 Astro 组件 → 代码字符串                          │ │
│  │  - 编译 React 组件 → 代码字符串（React import 改为 CDN） │ │
│  │  - 缓存编译结果，多 iframe 共享                          │ │
│  └─────────────────────────────────────────────────────────┘ │
│                            │                                  │
│                            ▼ 代码字符串（通过 srcdoc 注入）    │
│  ┌─────────────────────────────────────────────────────────┐ │
│  │ MultiIframeSandboxSession                               │ │
│  │  - moduleCodeRegistry: 编译后的代码字符串                 │ │
│  │  - 多个 iframe 共享同一份 moduleCodeRegistry              │ │
│  └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                            │
        ┌───────────────────┼───────────────────┐
        ▼                   ▼                   ▼
┌───────────────┐   ┌───────────────┐   ┌───────────────┐
│   iframe 1    │   │   iframe 2    │   │   iframe 3    │
│               │   │               │   │               │
│ 1. 从 CDN 加载 │   │ 1. 从 CDN 加载 │   │ 1. 从 CDN 加载 │
│    React      │   │    React      │   │    React      │
│               │   │               │   │               │
│ 2. 创建 blob  │   │ 2. 创建 blob  │   │ 2. 创建 blob  │
│    URL 并     │   │    URL 并     │   │    URL 并     │
│    import     │   │    import     │   │    import     │
│               │   │               │   │               │
│ 3. SSR 渲染   │   │ 3. SSR 渲染   │   │ 3. SSR 渲染   │
│    HTML       │   │    HTML       │   │    HTML       │
│               │   │               │   │               │
│ 4. hydration  │   │ 4. hydration  │   │ 4. hydration  │
│    激活交互   │   │    激活交互   │   │    激活交互   │
└───────────────┘   └───────────────┘   └───────────────┘

关键点
编译在宿主完成：避免每个 iframe 都要加载 esbuild-wasm
编译结果共享：moduleCodeRegistry 存储编译后的代码字符串，多 iframe 共享
React import 重写为 CDN：编译时把 import React from 'react' 改为 import React from 'https://esm.sh/react@18.3.1'
iframe 内部执行：
从 CDN 加载 React
创建 blob URL 并 import 编译后的代码
执行 SSR（renderToString）
执行 hydration（hydrateRoot）
npm package: @rxdrag/nop-hooks
Description: 使用了server端函数，如果要发布为第三方库，需要重构 目前本库依赖 next
Latest version: 0.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

使用了server端函数，如果要发布为第三方库，需要重构
目前本库依赖 next
npm package: @rxdrag/shadcn
Description: Shadcn UI components for RxCMS
Latest version: 0.2.0

# @rxdrag/shadcn

基于 shadcn/ui 的共享 UI 组件库，用于 RxCMS 项目。

## 安装

在你的项目中添加依赖：

```json
{
  "dependencies": {
    "@rxdrag/shadcn": "workspace:*"
  }
}
```

## 使用

```tsx
import { Button } from "@rxdrag/shadcn"

export function MyComponent() {
  return (
    <Button variant="default" size="lg">
      点击我
    </Button>
  )
}
```

## 组件

### Button

基于 Radix UI 的按钮组件，支持多种变体和尺寸。

#### 变体 (variants)
- `default` - 默认主色调按钮
- `destructive` - 危险操作按钮
- `outline` - 轮廓按钮
- `secondary` - 次要按钮
- `ghost` - 幽灵按钮
- `link` - 链接样式按钮

#### 尺寸 (sizes)
- `default` - 默认尺寸
- `sm` - 小尺寸
- `lg` - 大尺寸
- `icon` - 图标按钮
- `icon-sm` - 小图标按钮
- `icon-lg` - 大图标按钮

## 工具函数

### cn

用于合并 Tailwind CSS 类名的工具函数。

```tsx
import { cn } from "@rxdrag/shadcn"

const className = cn("base-class", condition && "conditional-class")
```

## 开发

```bash
# 构建
pnpm --filter @rxdrag/shadcn build

# 代码检查
pnpm --filter @rxdrag/shadcn lint

# 清理
pnpm --filter @rxdrag/shadcn clean
```