sparkdesign 0.4.2 → 0.4.3

package/README.md

@@ -1,285 +1,193 @@
-# Spark Design
+# sparkdesign
 
-现代化 React 设计系统，支持双维度主题（颜色 theme + 布局 scale），5 种内置布局风格，提供 Basic 基础组件与 Chat 对话流组件，可扩展颜色主题。
+Spark Design 按需引入 CLI：将组件**源码**复制到当前项目，支持在项目内自由修改。
 
-**当前版本**：`0.3.1`（[变更说明](docs/NPM发布指南.md)）
+**当前版本**：`0.1.6` · 设计系统主包：[sparkdesign](https://www.npmjs.com/package/sparkdesign)
 
-> 🌟 **纯新手？** 查看 [快速上手指南-新手版](docs/快速上手指南-新手版.md)，一步步带你跑起来！
+---
 
-> 以下为**安装与使用说明**；仓库结构、开发脚本与贡献方式见文末 [仓库与开发](#仓库与开发)。
+## 快速开始
 
-## 特性
+### 步骤 1：添加组件
 
-- **双维度主题**：`data-theme`（颜色）+ `data-style`（布局），独立切换
-- **5 种布局风格**：neutral / compact / soft / sharp / dense
-- **内置颜色主题**：light / dark
-- **CSS 变量驱动**：组件仅用 token，覆盖变量即可定制
-- **Tailwind 友好**：类名与设计 token 映射，无硬编码色值
-- **组件分层**：Basic 原子组件 + Chat 对话组件，开箱即用
+在项目根目录执行：
 
-## 两种使用方式
+```bash
+npx sparkdesign add button
+```
 
-| 方式 | 适用场景 | 命令 |
-|------|----------|------|
-| **npm 安装** | 直接引用、不改源码 | `npm install sparkdesign` |
-| **CLI 按需引入** | 复制源码到项目、可自由修改 | `npx sparkdesign init` → `npx sparkdesign add button` |
+添加多个组件时在命令后追加组件名，例如：`npx sparkdesign add button tooltip dropdown-menu`。
 
----
+> 输出目录由 **components.json** 的 `aliases.ui` 决定（默认 `@/components/ui` → `src/components/ui/`）。执行 add 时会在终端打印当前配置与目标目录，修改 `components.json` 后再次 add 即可生效。
+>
+> - Foundation：`<目标目录>/basic/*.tsx`
+> - Chat：`<目标目录>/chat/*.tsx`
+> - 例如默认：`src/components/ui/basic/button.tsx`、`src/components/ui/chat/chat-input/index.tsx`
 
-## 安装（npm 包）
+### 步骤 2：引入设计 token
 
-```bash
-npm install sparkdesign
-```
+CLI 会生成 `src/qoder-tokens.css`，组件样式依赖其中的设计变量。请在**应用入口**引入一次：
 
-**依赖**：需自行安装 `react`、`react-dom`（>=18）。
+> **注意**：组件样式需在 **Tailwind CSS 4** 环境下才能正确生效（token 使用 `@theme` 生成工具类）。请确保项目使用 Tailwind 4，并在**同一份会被 Tailwind 处理的 CSS 入口**中引入 token（详见下方「按需引入完整说明」）。
 
-### 按需引入（CLI）
+**Vite / CRA（入口为 main.tsx 或 main.jsx）：**
 
-若希望**将组件源码复制到项目中**并自由修改，可使用 CLI：
+在 `src/main.tsx`（或 `src/main.jsx`）顶部添加：
 
-```bash
-npx sparkdesign init                    # 初始化 components.json、tokens、utils
-npx sparkdesign add button tooltip      # 添加组件到 src/components/qoder/
-npx sparkdesign list                    # 列出可用组件
-npx sparkdesign diff button             # 对比本地与注册表差异
+```ts
+import './qoder-tokens.css'
 ```
 
-详见 [docs/CLI按需引入方案.md](docs/CLI按需引入方案.md)。
+**Next.js（App Router）：**
 
----
+在 `src/app/layout.tsx` 中与其他 import 一并添加：
 
-## 快速开始
+```ts
+import '../qoder-tokens.css'
+```
 
-三步即可在项目中使用组件，**无需配置 Tailwind**：
+（若 layout 位于 `src/app/layout.tsx` 使用 `../qoder-tokens.css`，位于 `app/layout.tsx` 则使用 `./qoder-tokens.css`。）
 
-```tsx
-// 1. 引入样式（必做）
-import 'sparkdesign/style'
+### 步骤 3：使用组件
+
+默认会生成 `src/components/ui/basic/<name>.tsx`（Foundation）或 `src/components/ui/chat/<name>/`（Chat），因此导入路径在默认配置下为：
 
-// 2. 按需引入组件与类型
-import { Button } from 'sparkdesign'
-import type { ButtonProps } from 'sparkdesign'
+- **Foundation**：`import { X } from '@/components/ui/basic/<组件名>'`
+- **Chat**：`import { X } from '@/components/ui/chat/<组件名>'`
+
+（若你修改了 `aliases.ui`，把上面路径中的 `@/components/ui` 换成你的 alias 即可。）
+
+```tsx
+// 默认 aliases.ui = @/components/ui 时：
+import { Button } from '@/components/ui/basic/button'
 
-// 3. 在根节点设置主题与布局（可选，不设则使用默认 light + neutral）
 function App() {
   return (
-    <div data-theme="light" data-style="neutral">
-      <Button variant="primary" size="md">点击</Button>
+    <div>
+      <Button variant="primary">点击</Button>
     </div>
   )
 }
 ```
 
-**样式引入方式**（三选一，推荐方式 A）：
-
-| 方式 | 用法 | 说明 |
-|------|------|------|
-| **A** | `import 'sparkdesign/style'` | **推荐**。预编译完整样式（Tailwind 工具类 + 设计 token），无需配置 Tailwind |
-| **B** | `import 'sparkdesign/theme.css'`<br>`import 'sparkdesign/scale.css'` | 仅引入设计 token，适合已有 Tailwind 4 项目自行扫描组件并覆盖变量（需在消费者 CSS 中 `@source` 指向本包） |
-| **C** | 只引入组件、不引入样式 | 需在项目中自行提供与设计 token 同名的 CSS 变量，否则组件无样式 |
-
-> **Markdown 数学公式**：若使用 `MarkdownBody` 组件且需要渲染 KaTeX 数学公式，额外引入：
-> `import 'sparkdesign/katex.css'`
-
-自定义主题时，请**先**引入设计系统样式，**再**引入你的覆盖 CSS，变量覆盖才会生效。
+可选：在根节点设置 `data-theme` 与 `data-style`（如 `<div data-theme="light" data-style="neutral">`），不设置则使用默认值。
 
 ---
 
-## 设计系统用法
+## 按需引入完整说明（与 Showcase 一致）
 
-### 1. 引入样式（必做）
+要让按需引入的组件**样式与官方 Showcase 完全一致**，需满足以下环境与配置。
 
-样式引入的三种方式见上方「快速开始」表格。
+### 环境要求
 
-- **方式 A**（推荐）：`import 'sparkdesign/style'` 包含预编译的 Tailwind 工具类 + theme/scale 设计 token，消费者项目**不需要安装或配置 Tailwind**。
-- **方式 B**（Tailwind 用户）：仅引入 token 文件，消费者需在自己的 CSS 中 `@source` 指向本包以扫描组件中使用的 Tailwind 类名：
+| 项目 | 要求 |
+|------|------|
+| **Tailwind 版本** | 必须使用 **Tailwind CSS 4**。设计 token 使用 Tailwind 4 的 `@theme` 语法，将 CSS 变量映射为工具类（如 `h-7`、`bg-primary`、`rounded-md`）。使用 Tailwind 3 时这些类不会生成，组件样式会异常。 |
+| **安装** | `npm install tailwindcss@^4 @tailwindcss/vite`（Vite 项目）；或使用 `@tailwindcss/cli` 做预编译。 |
 
-```css
-/* 消费者 CSS（已有 Tailwind 4 的项目）*/
-@import "tailwindcss";
-@source "../node_modules/sparkdesign/dist";
-@import "sparkdesign/theme.css";
-@import "sparkdesign/scale.css";
-```
+### Token 引入的两种方式
 
-约定：自定义主题时，**先**引入设计系统样式，**再**引入你的覆盖 CSS。
+| 方式 | 何时用 | Token 如何生效 |
+|------|--------|----------------|
+| **先 init** | 希望 token 直接写进现有 CSS 入口、少一步手动 import 时 | 执行 `npx sparkdesign init`，CLI 会把 **theme.css + scale.css** 的内容注入到 `src/app/globals.css` 或 `src/index.css`，无需再单独引入 token 文件。 |
+| **直接 add** | 不想改现有流程、先装组件再补样式时 | 执行 `npx sparkdesign add button` 会生成 **`src/qoder-tokens.css`**。须在**应用入口**（如 `main.tsx`、`layout.tsx`）添加一行：`import './qoder-tokens.css'`（路径按实际入口位置调整，如 Next.js 可为 `import '../qoder-tokens.css'`）。 |
 
-### 2. 颜色主题（theme）
+无论哪种方式，**token 必须处在「会被 Tailwind 处理的同一份 CSS 管线」中**（即包含 `@import "tailwindcss"` 的那份 CSS 或其 import 链中），这样 `@theme` 才会被 Tailwind 4 读取并生成对应工具类。
 
-通过 `data-theme` 切换颜色主题，作用于主色、背景、边框、语义色等。
+### CSS 入口配置（与 Showcase 一致）
 
-| 主题   | 说明     |
-|--------|----------|
-| `light` | 亮色模式（默认） |
-| `dark`  | 暗色模式 |
+1. **顺序**：先 `@import "tailwindcss"`，再引入 token（或包含 token 的文件）。
+2. **扫描组件目录**：Showcase 会扫描组件所在目录以生成 `h-7`、`w-9` 等工具类。按需引入后组件在你项目里，需让 Tailwind 扫描到这些文件。在**同一份 CSS 入口**中增加 `@source` 指向组件目录（路径对应你当前的 `aliases.ui`）。
 
-```tsx
-// 在根节点或任意父节点设置
-<div data-theme="dark">
-  <Button variant="primary">按钮</Button>
-</div>
-```
+**最小可用的入口 CSS 示例**（Vite 项目，组件默认在 `src/components/ui`）：
 
-```html
-<!-- 或直接挂在 body -->
-<body data-theme="dark">
+```css
+@import "tailwindcss";
+@source "../components/ui";
+@import "./qoder-tokens.css";
 ```
 
-主题对应的 CSS 变量定义在 **theme.css**（如 `--color-primary`、`--color-bg-container` 等）。自定义主题见下文「自定义 theme / scale」。
+若你已通过 **init** 把 token 写入了本文件，则无需再写 `@import "./qoder-tokens.css"`，只需保留 `@import "tailwindcss"` 和 `@source "../components/ui"` 即可。
 
-### 3. 布局风格（scale）
+### 主题与布局风格（可选）
 
-通过 `data-style` 切换布局尺度，作用于间距、圆角、字号等。
+与 Showcase 一样切换主题/风格时，在根节点设置：
 
-| 风格      | 描述           | 特点           |
-|-----------|----------------|----------------|
-| `neutral` | 平衡的标准     | 默认，简洁直观 |
-| `compact` | 优化效率       | 更窄间距，紧凑 |
-| `soft`    | 舒适至上       | 大圆角、宽松间距 |
-| `sharp`   | 几何精度       | 直角、利落线条 |
-| `dense`   | 信息密集       | 最小留白       |
+- **`data-theme`**：颜色主题，如 `light`、`dark`。
+- **`data-style`**：布局风格，如 `neutral`、`compact`、`soft`、`sharp`、`dense`。
 
-```tsx
-<div data-style="soft">
-  <Button>按钮</Button>
-</div>
-```
+示例：`<div data-theme="light" data-style="neutral">`。不设置则使用默认值。
 
-布局变量定义在 **scale.css**（如 `--spacing-*`、`--radius-*`、`--font-size-*`）。可组合使用：
+---
 
-```tsx
-<div data-theme="dark" data-style="soft">
-  {/* 暗色 + 柔和布局 */}
-</div>
-```
+## 命令说明
 
-### 4. 自定义 theme / scale
+| 命令 | 说明 |
+|------|------|
+| `npx sparkdesign add button` | 添加 button 到 `src/components/ui/`（默认），并自动创建缺失的 config、token 文件、utils |
+| `npx sparkdesign add button tooltip dropdown-menu` | 一次添加多个组件 |
+| `npx sparkdesign init` | 先做一次「完整初始化」：选择布局风格、**组件存放目录（相对 src，默认 components）**、是否安装依赖；token 会写进现有 CSS 入口 |
+| `npx sparkdesign list` | 列出所有可添加的组件名 |
+| `npx sparkdesign diff button` | 对比本地 button 和最新模板的差异 |
+| `npx sparkdesign add button --overwrite` | 覆盖已有组件文件 |
 
-在**先引入设计系统样式之后**，用你自己的 CSS 覆盖变量即可。
+---
 
-**选择器约定**：
+## 支持的组件
 
-- `:root` — 覆盖默认
-- `[data-theme="主题名"]` — 颜色主题（自定义名称）
-- `[data-style="风格名"]` — 布局风格（自定义名称）
+**支持的组件 = CLI 包内 `registry/meta.json` 的全部条目**（覆盖当前 registry 的 Foundation + Chat 组件实现）。
 
-```css
-/* 自定义颜色主题 */
-[data-theme="my-brand"] {
-  --color-primary: #3B82F6;
-  --color-primary-hover: #2563EB;
-}
+权威列表请运行：
 
-/* 自定义布局风格 */
-[data-style="custom"] {
-  --spacing-4: 20px;
-  --radius-md: 8px;
-}
+```bash
+npx sparkdesign list
 ```
 
-完整变量清单见 [NPM 发布指南](https://github.com/nicepkg/spark-design/blob/master/docs/NPM发布指南.md)（颜色 `--color-*`、间距 `--spacing-*`、圆角 `--radius-*`、字号 `--font-size-*` 等）。
-
-### 5. Portal 浮层与主题一致
-
-DropdownMenu、Tooltip 等会挂到 `body`，不会继承局部容器的 `data-theme` / `data-style`。两种做法：
+示例（Foundation + Chat 混合添加）：
 
-- **做法 A**：把 `data-theme`、`data-style` 设到 `<html>` 或 `<body>`，全局一致。
-- **做法 B**：用 `ThemeStyleProvider` 包裹应用，浮层会使用同一主题/风格：
-
-```tsx
-import { ThemeStyleProvider, Button, DropdownMenu } from 'sparkdesign'
-
-function App() {
-  const theme = 'dark'
-  const style = 'soft'
-  return (
-    <ThemeStyleProvider value={{ theme, style }}>
-      <div data-theme={theme} data-style={style}>
-        <Button>打开</Button>
-        <DropdownMenu>...</DropdownMenu>
-      </div>
-    </ThemeStyleProvider>
-  )
-}
+```bash
+npx sparkdesign add button select dropdown-menu tooltip
+npx sparkdesign add chat-input response markdown
 ```
 
-## 组件使用
+> 说明：tokens（`registry/tokens/*.css`）与 `registry/lib/utils.ts` 由 `init` 或首次 `add` 时的“初始化逻辑”处理，不作为单组件条目列出。
 
-组件与类型均从主入口按需引入，用法见上方「快速开始」。示例：
+---
 
-```tsx
-import 'sparkdesign/style'
-import { Button } from 'sparkdesign'
-import type { ButtonProps } from 'sparkdesign'
+## init 与 add 的选用
 
-function App() {
-  return (
-    <div data-theme="light" data-style="neutral">
-      <Button variant="primary" size="md">Click me</Button>
-    </div>
-  )
-}
-```
+- **直接 add**（推荐）：执行 `npx sparkdesign add button` 会生成 `src/qoder-tokens.css`，按步骤 2 在入口添加 `import './qoder-tokens.css'` 即可。
+- **先 init 再 add**：执行 `npx sparkdesign init` 时会询问**组件存放目录**（相对 src，如 `components` 或 `ui`），并写入 `components.json` 的 `aliases.components` 与 **`aliases.ui`**（默认 `@/components/ui`）。之后 add 会按该配置输出到对应目录（如 `src/components/ui/`），并将 token 写入现有 `globals.css` / `index.css`。
 
-## 组件概览
+两种方式择一使用即可。若要**与官方 Showcase 样式完全一致**，请同时满足上文「按需引入完整说明」中的 Tailwind 4 与 CSS 入口配置（含 `@source` 扫描组件目录）。
 
-| 分层 | 说明 | 示例 |
-|------|------|------|
-| **Basic** | 原子级 UI 组件 | Button, IconButton, Tooltip, Select, DropdownMenu, Tabs, Toast, Tag, Progress, Avatar, Table, Slider, Pagination, Collapse, Resizable, Scrollbar, Skeleton, Spinner, Kbd, EllipsisText, Switch, Toggle, ToggleGroup, RadioGroup, AlertDialog, OptionList … |
-| **Chat** | 对话流相关组件 | ChatInput, SendButton, Request, Response, FileCard, FileAttachment, ImageAttachment, FolderButton, ReasoningStep, ToolInvocationCard, PermissionCard, MarkdownBody, GenerationStatusBar, ThinkingIndicator, ImageGenerating, RelatedPrompts, SuggestionPart, SidebarMenu … |
-
-完整导出见 [src/components/index.ts](src/components/index.ts)。图标通过 `IconsProvider` / `useIcon` 注入，可替换为 Lucide、Remix 等，见 [图标自定义说明](docs/图标自定义说明.md)。
+---
 
-## 文档（仓库内）
+## 生成文件说明
 
-| 文档 | 说明 |
-|------|------|
-| [NPM 发布指南](docs/NPM发布指南.md) | 变量清单、主题覆盖、发布步骤 |
-| [组件入库文档](docs/组件入库文档.md) | 组件与 Showcase 规范 |
-| [图标自定义说明](docs/图标自定义说明.md) | IconsProvider / 替换为 Lucide 等 |
-| [CLI 按需引入方案](docs/CLI按需引入方案.md) | `npx sparkdesign init / add` 使用说明 |
+| 文件 | 何时出现 | 说明 |
+|------|----------|------|
+| `components.json` | add 或 init | 配置：`style`、`aliases.components`、`aliases.utils`、**`aliases.ui`**（组件安装目录，默认 **`@/components/ui`**）。修改 **`aliases.ui`** 可改变 add 的输出目录；再次 add 时终端会打印目标目录以确认生效。 |
+| `src/qoder-tokens.css` | 直接 add 且项目中尚无 token 时 | 设计 token 文件（theme + scale），须在**与 Tailwind 同一管线的入口**中引入一次，且项目需使用 Tailwind 4 |
+| `src/lib/utils.ts` | add 或 init 且不存在时 | 工具函数 `cn()`，供组件使用 |
+| `src/<aliases.ui 解析路径>/basic/*.tsx`<br>`src/<aliases.ui 解析路径>/chat/*.tsx` | add 对应组件时 | 组件源码（路径由 `aliases.ui` 决定，默认 `src/components/ui/`），可按需修改 |
 
 ---
 
-## 仓库与开发
-
-以下内容面向**参与仓库开发**的贡献者；仅使用本包时可忽略。
-
-### 组件展示（Showcase）
+## 依赖
 
-本仓库内 **apps/showcase** 提供所有组件的演示与 Props 文档：
+- **样式生效前提**：组件样式依赖设计 token 与 Tailwind 工具类，项目须使用 **Tailwind CSS 4**（见上文「按需引入完整说明」）。若未使用 Tailwind 4，token 中的 `@theme` 不会生效，`h-7`、`bg-primary` 等类不会生成。
+- **运行时依赖**：组件会用到 `class-variance-authority`、`clsx`（以及部分组件需要 `tailwind-merge`、`@radix-ui/*` 等）。若执行 `npx sparkdesign add button` 后出现依赖缺失，请在项目根目录执行：
 
 ```bash
-cd apps/showcase && npm install && npm run dev
+npm install class-variance-authority clsx tailwind-merge
 ```
 
-### 项目脚本
+使用 tooltip、dropdown-menu 等组件时，按提示安装 `@radix-ui/react-tooltip`、`@radix-ui/react-dropdown-menu` 等依赖。
 
-| 脚本 | 说明 |
-|------|------|
-| `npm run dev` | 设计系统开发服务器 |
-| `npm run build` | 生产构建：Vite 输出 JS → @tailwindcss/cli 预编译 CSS → tsc 类型声明 |
-| `npm run build:css` | 仅重新生成预编译 CSS（`dist/qoder-design.css`） |
-| `npm run preview` | 预览构建产物 |
-| `cd apps/showcase && npm run dev` | 组件展示站点 |
-
-### 目录结构
-
-```
-src/
-├── index.css       # dev 模式 CSS 入口
-├── lib.css         # 库构建 CSS 入口（@tailwindcss/cli）
-├── tokens/         # theme.css、scale.css
-├── components/     # basic/、chat/
-└── lib/            # 工具与 ThemeStyleProvider
-```
-
-### 技术栈与规范
+---
 
-- React 19 + TypeScript + Vite 7；Tailwind CSS 4；Radix UI、Framer Motion
-- 项目哲学与 GEB 协议：[CLAUDE.md](https://github.com/nicepkg/spark-design/blob/master/CLAUDE.md)
+## 安装目录配置
 
----
+支持 **`aliases.ui`** 作为组件安装目录，默认 **`@/components/ui`**；未设置时使用 `aliases.components + '/qoder'` 以兼容旧配置。**改安装位置只需改 `aliases.ui`**，`aliases.components` 一般不必改。详见 [CLI 配置说明](../docs/CLI配置说明.md)。
 
-*"Keep the map aligned with the terrain."*

package/{cli/dist → dist}/commands/add.js

@@ -8,6 +8,7 @@
 import path from 'node:path';
 import fs from 'fs-extra';
 import chalk from 'chalk';
+import { execa } from 'execa';
 import { readConfig, writeConfig, getComponentsBaseAlias, resolveTargetDir } from '../utils/config.js';
 import { getRegistryRoot, getComponentMeta, getComponentSource } from '../utils/registry.js';
 import { stripL3Header, transformImports } from '../utils/transform.js';
@@ -78,7 +79,15 @@ export async function add(components, options = {}) {
     }
     if (allDeps.size > 0) {
         console.log('');
-        console.log(chalk.cyan('Dependencies (install if needed):'));
-        console.log('  npm install', Array.from(allDeps).join(' '));
+        console.log(chalk.cyan('Installing dependencies...'));
+        const depsArray = Array.from(allDeps);
+        try {
+            await execa('npm', ['install', ...depsArray], { cwd, stdio: 'inherit' });
+            console.log(chalk.green('✓'), 'Installed', depsArray.length, 'dependencies');
+        }
+        catch {
+            console.log(chalk.yellow('○'), 'Auto-install failed. Run manually:');
+            console.log('  npm install', depsArray.join(' '));
+        }
     }
 }

package/package.json

@@ -1,146 +1,39 @@
 {
   "name": "sparkdesign",
-  "version": "0.4.2",
+  "version": "0.4.3",
+  "description": "CLI for Spark Design - add components on demand (copy source to your project)",
   "type": "module",
-  "description": "Modern React Design System with dual-dimension theme system",
-  "keywords": [
-    "react",
-    "components",
-    "design-system",
-    "ui-library",
-    "tailwind"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nicepkg/spark-design.git"
-  },
-  "homepage": "https://spark.design",
   "bin": {
-    "sparkdesign": "./cli/dist/index.js"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/spark-design.es.js",
-      "require": "./dist/spark-design.cjs.js"
-    },
-    "./style": "./dist/qoder-design.css",
-    "./theme.css": "./dist/theme.css",
-    "./scale.css": "./dist/scale.css",
-    "./katex.css": "./dist/katex.css",
-    "./theme-base.css": "./dist/theme-base.css",
-    "./tokens/*": "./dist/tokens/*",
-    "./themes/*": "./dist/themes/*",
-    "./scale/*": "./dist/scale/*"
+    "sparkdesign": "dist/index.js"
   },
   "files": [
     "dist",
-    "cli/dist",
-    "cli/registry"
-  ],
-  "sideEffects": [
-    "*.css",
-    "dist/fonts/*"
+    "registry",
+    "README.md"
   ],
   "scripts": {
-    "dev": "vite",
-    "check:registry": "node scripts/check-registry-sync.mjs",
-        "check:showcase": "node scripts/check-showcase-sync.mjs",
-            "gen:demo": "node scripts/gen-demo.mjs",
-    "build": "vite build && npx @tailwindcss/cli -i src/lib.css -o dist/qoder-design.css --minify && tsc -p tsconfig.lib.json && npm run build:cli",
-    "build:cli": "cd cli && npm run build",
-    "build:css": "npx @tailwindcss/cli -i src/lib.css -o dist/qoder-design.css --minify",
-    "build:watch": "vite build --watch",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "size": "size-limit",
-    "size:why": "size-limit --why",
-    "prepublishOnly": "npm run build && node scripts/sync-registry-to-cli.mjs"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "optionalDependencies": {
-    "mermaid": "^11.12.0"
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "cli": "node dist/index.js",
+    "prepublishOnly": "node ../scripts/generate-registry-meta.mjs && node ../scripts/sync-registry-to-cli.mjs && node ../scripts/validate-registry-meta.mjs cli"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@rive-app/react-canvas": "^4.26.2",
     "chalk": "^5.3.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "commander": "^12.1.0",
     "diff": "^7.0.0",
     "execa": "^9.5.2",
-    "framer-motion": "^12.34.0",
     "fs-extra": "^11.2.0",
-    "i18next": "^25.8.7",
-    "katex": "^0.16.28",
-    "lottie-react": "^2.4.1",
     "ora": "^8.1.1",
-    "prism-react-renderer": "^2.4.1",
-    "prompts": "^2.4.2",
-    "react-i18next": "^16.5.4",
-    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^4.6.2",
-    "rehype-katex": "^7.0.1",
-    "remark-gfm": "^4.0.1",
-    "remark-math": "^6.0.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.1",
-    "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7"
+    "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.1",
-    "@eslint/js": "^9.39.1",
-    "@playwright/test": "^1.58.2",
-    "@size-limit/file": "^12.0.0",
-    "@tailwindcss/cli": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^24.10.13",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "size-limit": "^12.0.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
-  },
-  "size-limit": [
-    {
-      "path": "dist/spark-design.es.js",
-      "limit": "550 KB",
-      "brotli": false,
-      "gzip": false
-    }
-  ]
+    "@types/diff": "^6.0.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.1",
+    "@types/prompts": "^2.4.9",
+    "typescript": "~5.9.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
 }

package/{cli/registry → registry}/chat/markdown.tsx

@@ -134,7 +134,7 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
     <div className={cn('markdown-body text-sm leading-sm text-text', className)}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[rehypeKatex]}
+        rehypePlugins={[rehypeKatex as any]}
         components={markdownComponents}
       >
         {children}

package/{cli/registry → registry}/chat/tool-invocation-card.tsx

@@ -1,7 +1,7 @@
 import { memo, useState } from 'react'
 import { cn } from '@/lib/utils'
 import type { ReactNode } from 'react'
-import { TimeLine, CheckboxCircleLine, CloseCircleLine, ArrowRightLine } from '../basic/icons-inline'
+import { TimeLine, CheckboxCircleLine, CloseCircleLine, ArrowDownSLine } from '../basic/icons-inline'
 import { Scrollbar } from '../basic/scrollbar'
 
 export type ToolInvocationStatus = 'running' | 'success' | 'error'
@@ -17,7 +17,7 @@ export interface ToolInvocationCardProps {
   timeIcon?: ReactNode
   checkboxCircleIcon?: ReactNode
   closeCircleIcon?: ReactNode
-  arrowRightIcon?: ReactNode
+  arrowDownIcon?: ReactNode
   runningText?: string
   ranText?: string
   failedText?: string
@@ -42,7 +42,7 @@ export const ToolInvocationCard = memo(function ToolInvocationCard({
   timeIcon,
   checkboxCircleIcon,
   closeCircleIcon,
-  arrowRightIcon,
+  arrowDownIcon,
   runningText = 'Running',
   ranText = 'Ran',
   failedText = 'Failed',
@@ -62,7 +62,7 @@ export const ToolInvocationCard = memo(function ToolInvocationCard({
   const defaultTime = timeIcon ?? <TimeLine className={timeClass} />
   const defaultCheck = checkboxCircleIcon ?? <CheckboxCircleLine className={checkboxClass} />
   const defaultCloseCircle = closeCircleIcon ?? <CloseCircleLine className={closeCircleClass} />
-  const defaultArrow = arrowRightIcon ?? <ArrowRightLine className={arrowClass} />
+  const defaultArrow = arrowDownIcon ?? <ArrowDownSLine className={arrowClass} />
 
   return (
     <div className={cn('flex flex-col', className)}>
@@ -96,7 +96,7 @@ export const ToolInvocationCard = memo(function ToolInvocationCard({
               'shrink-0 inline-flex items-center justify-center',
               'opacity-0 group-hover:opacity-100',
               isExpanded && '!opacity-100',
-              isExpanded ? 'rotate-90' : 'rotate-0'
+              isExpanded ? 'rotate-180' : 'rotate-0'
             )}
           >
             {defaultArrow}