┌─────────────────────────────────────────────────────────────┐
│                      开发者工作区                              │
│  ┌──────────────────┐  ┌──────────────────┐                 │
│  │  创建组件文件      │  │  编写注册配置    │                 │
│  │  (手动)           │  │  (手动)         │                 │
│  └──────────────────┘  └──────────────────┘                 │
└─────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                    Build Registry 脚本                       │
│                      (自动化流程)                             │
│  ┌──────────────────────────────────────────────────────┐   │
│  │ 1. buildRegistryIndex()   - 生成组件索引              │   │
│  │ 2. buildBlocksIndex()     - 生成 Blocks 索引          │   │
│  │ 3. buildRegistryJsonFile()- 生成 JSON 配置            │   │
│  │ 4. buildRegistry()        - 构建发布版本              │   │
│  │ 5. syncRegistry()         - 同步到 www 应用           │   │
│  └──────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                      生成的产物                               │
│  ┌──────────────────┐  ┌──────────────────┐                 │
│  │  registry.json   │  │  __index__.tsx   │                 │
│  │  (元数据清单)     │  │  (动态导入索引)   │                 │
│  └──────────────────┘  └──────────────────┘                 │
│  ┌──────────────────┐  ┌──────────────────┐                 │
│  │ __blocks__.json  │  │  public/r/*      │                 │
│  │ (Blocks 列表)     │  │  (发布文件)       │                 │
│  └──────────────────┘  └──────────────────┘                 │
└─────────────────────────────────────────────────────────────┘

// 输入：registry/index.ts 中的配置
const registry = {
  items: [
    { name: "button", files: [{ path: "ui/button.tsx" }] },
    // ...
  ]
}

// 输出：registry/__index__.tsx
export const Index = {
  "button": {
    name: "button",
    files: ["registry/new-york-v4/ui/button.tsx"],
    component: React.lazy(() => import("@/registry/new-york-v4/ui/button.tsx")),
    // ...
  }
}

// 输入：所有 type: "registry:block" 的组件
const blocks = getAllBlocks(["registry:block"])

// 输出：registry/__blocks__.json
[
  {
    "name": "login-01",
    "description": "A simple login form",
    "categories": ["authentication", "login"]
  },
  // ...
]

# 运行 shadcn CLI 的 build 命令
shadcn build registry.json --output ../www/public/r/styles/new-york-v4

www/public/r/styles/new-york-v4/
├── button.json              # 每个组件的独立元数据
├── input.json
├── login-01.json
└── ...

# 在 registry/new-york-v4/ui/ 目录下创建组件文件
touch registry/new-york-v4/ui/my-component.tsx

// registry/new-york-v4/ui/my-component.tsx
import * as React from "react"
import { cn } from "@/lib/utils"

interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "primary"
}

function MyComponent({ className, variant = "default", ...props }: MyComponentProps) {
  return (
    <div
      className={cn("my-component", className)}
      data-variant={variant}
      {...props}
    />
  )
}

export { MyComponent }

export const ui: Registry["items"] = [
  // ... 其他组件
  {
    name: "my-component",                      // 组件名称（用户安装时使用）
    type: "registry:ui",                        // 类型
    description: "My custom component",         // 描述
    dependencies: [],                           // npm 依赖（如需要）
    registryDependencies: ["button", "card"],   // 依赖其他组件（如需要）
    files: [
      {
        path: "ui/my-component.tsx",           // 文件路径（相对于 new-york-v4/）
        type: "registry:ui",
      },
    ],
    // 可选：如果需要特殊的 Tailwind 配置
    tailwind: {
      config: {
        theme: {
          extend: {
            colors: {
              "my-color": "#ff0000"
            }
          }
        }
      }
    },
    // 可选：如果需要 CSS 变量
    cssVars: {
      light: {
        "my-var": "0 0% 100%"
      },
      dark: {
        "my-var": "0 0% 0%"
      }
    }
  },
]

pnpm registry:build

npx shadcn@latest add my-component

# 创建 Block 目录
mkdir -p registry/new-york-v4/blocks/my-dashboard/{components,lib}

# 创建主页面
touch registry/new-york-v4/blocks/my-dashboard/page.tsx

# 创建组件
touch registry/new-york-v4/blocks/my-dashboard/components/sidebar.tsx
touch registry/new-york-v4/blocks/my-dashboard/components/header.tsx

# 可选：创建数据文件
touch registry/new-york-v4/blocks/my-dashboard/data.json

blocks/my-dashboard/
├── page.tsx                 # 主页面文件
├── components/
│   ├── sidebar.tsx         # 子组件
│   └── header.tsx          # 子组件
└── data.json               # 可选：数据文件

// page.tsx
import { Sidebar } from "./components/sidebar"
import { Header } from "./components/header"

export default function Page() {
  return (
    <div className="flex h-screen">
      <Sidebar />
      <div className="flex-1">
        <Header />
        <main className="p-6">
          {/* 内容 */}
        </main>
      </div>
    </div>
  )
}

// components/sidebar.tsx
export function Sidebar() {
  return <aside className="w-64 border-r">Sidebar</aside>
}

export const blocks: Registry["items"] = [
  // ... 其他 blocks
  {
    name: "my-dashboard",
    type: "registry:block",
    description: "A dashboard with sidebar and header",

    // npm 依赖
    dependencies: [
      "@tanstack/react-table",
      "recharts",
    ],

    // 组件依赖（会自动安装这些组件）
    registryDependencies: [
      "sidebar",
      "card",
      "button",
      "table",
    ],

    // 文件列表
    files: [
      {
        path: "blocks/my-dashboard/page.tsx",
        type: "registry:page",                    // 标记为页面文件
        target: "app/dashboard/page.tsx",         // 安装到用户项目的路径
      },
      {
        path: "blocks/my-dashboard/data.json",
        type: "registry:file",                    // 普通文件
        target: "app/dashboard/data.json",
      },
      {
        path: "blocks/my-dashboard/components/sidebar.tsx",
        type: "registry:component",               // 子组件
      },
      {
        path: "blocks/my-dashboard/components/header.tsx",
        type: "registry:component",
      },
    ],

    // 分类（用于筛选和展示）
    categories: ["dashboard", "admin"],

    // 元数据（用于文档展示）
    meta: {
      iframeHeight: "800px",                     // 预览高度
      container: "w-full min-h-screen",          // 容器样式
    },
  },
]

pnpm registry:build

npx shadcn@latest add my-dashboard

👨‍💻 人工：编写组件代码
    ↓
👨‍💻 人工：编写注册配置
    ↓
🤖 运行：pnpm registry:build
    ↓
🤖 自动：生成所有元数据和索引
    ↓
✅ 完成：组件可以被安装使用

# 开发模式（启动开发服务器）
pnpm dev

# 构建 registry（添加/修改组件后运行）
pnpm registry:build

# 捕获 Blocks 截图（用于文档展示）
pnpm registry:capture

# 验证 registry 配置
pnpm validate:registries

# 格式化代码
pnpm format:write