sparkdesign 0.4.5 → 0.4.6

package/cli/dist/utils/tokens.js

@@ -1,11 +1,13 @@
 /**
- * [INPUT]: cwd, registryRoot
- * [OUTPUT]: 见各函数
- * [POS]: cli/src/utils/tokens.ts
+ * [WHO]: Public exports from this file (see implementation below).
+ * [FROM]: See the import block immediately after this header.
+ * [TO]: sparkdesign package consumers; output of CLI `add` when applicable.
+ * [HERE]: cli/src/utils/tokens.ts — Spark Design source; keep aligned with the main library.
  *
- * [PROTOCOL]: 文件逻辑变更时同步更新此 Header
- * - init：ensureDesignTokens 注入到用户入口 CSS（globals/index.css）
- * - add：不改入口；writeQoderTokensFile 生成独立 qoder-tokens.css，由用户自行 import
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
  */
 import path from 'node:path';
 import fs from 'fs-extra';
@@ -45,7 +47,8 @@ async function readScaleContents(registryRoot) {
     }
     return '';
 }
-/** 项目里是否已有 token（入口 CSS 内联了变量、或已 import qoder-tokens.css） */
+const PRIMARY_TOKENS_FILE = 'sparkdesign-tokens.css';
+/** 项目里是否已有 token（入口 CSS 内联了变量、或已 import tokens 文件） */
 export async function projectHasTokens(cwd) {
     const candidates = [
         path.join(cwd, 'src', 'app', 'globals.css'),
@@ -58,7 +61,7 @@ export async function projectHasTokens(cwd) {
             const content = await fs.readFile(p, 'utf-8');
             if (content.includes('--color-primary:') ||
                 content.includes(TOKEN_MARKER) ||
-                content.includes('qoder-tokens.css')) {
+                content.includes(PRIMARY_TOKENS_FILE)) {
                 return true;
             }
         }
@@ -73,6 +76,7 @@ export async function ensureDesignTokens(cwd, registryRoot) {
     const themePath = path.join(registryRoot, 'tokens', 'theme.css');
     const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
     const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    const themeBasePath = path.join(registryRoot, 'tokens', 'theme-base.css');
     const themesDir = path.join(registryRoot, 'tokens', 'themes');
     // 检查是否有可用的 tokens 文件
     const hasNewStructure = await fs.pathExists(indexPath);
@@ -95,18 +99,20 @@ export async function ensureDesignTokens(cwd, registryRoot) {
     if (hasNewStructure && (await fs.pathExists(themesDir))) {
         // 新结构：读取拆分的主题文件并内联
         const scaleContent = await readScaleContents(registryRoot);
-        const lightContent = await readFileIfExists(path.join(themesDir, 'light-qoder.css'));
-        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-qoder.css'));
+        const lightContent = await readFileIfExists(path.join(themesDir, 'light-mint.css'));
+        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-mint.css'));
         const lightParchmentContent = await readFileIfExists(path.join(themesDir, 'light-parchment.css'));
         const darkParchmentContent = await readFileIfExists(path.join(themesDir, 'dark-parchment.css'));
         const scrollbarContent = await readFileIfExists(scrollbarPath);
+        const themeBaseContent = await readFileIfExists(themeBasePath);
         tokensBlock = `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n` +
             `${scaleContent}\n\n` +
             `${lightContent}\n\n` +
             `${darkContent}\n\n` +
             `${lightParchmentContent}\n\n` +
             `${darkParchmentContent}\n` +
-            (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+            (scrollbarContent ? `\n${scrollbarContent}\n` : '') +
+            (themeBaseContent ? `\n${themeBaseContent}\n` : '');
     }
     else {
         // 兼容旧结构
@@ -124,39 +130,41 @@ export async function ensureDesignTokens(cwd, registryRoot) {
     await fs.writeFile(cssEntry, newContent, 'utf-8');
     return cssEntry;
 }
-const DEDICATED_TOKENS_FILE = 'qoder-tokens.css';
 /** 仅 add 使用：在 src 下生成独立 token 文件，不修改用户入口。若已存在则不覆盖。返回路径及是否本次创建。 */
-export async function writeQoderTokensFile(cwd, registryRoot) {
+export async function writeSparkTokensFile(cwd, registryRoot) {
     const indexPath = path.join(registryRoot, 'tokens', 'index.css');
     const themePath = path.join(registryRoot, 'tokens', 'theme.css');
     const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
     const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    const themeBasePath = path.join(registryRoot, 'tokens', 'theme-base.css');
     const themesDir = path.join(registryRoot, 'tokens', 'themes');
-    const targetPath = path.join(cwd, 'src', DEDICATED_TOKENS_FILE);
-    if (await fs.pathExists(targetPath)) {
-        return { path: targetPath, created: false };
+    const primaryPath = path.join(cwd, 'src', PRIMARY_TOKENS_FILE);
+    if (await fs.pathExists(primaryPath)) {
+        return { path: primaryPath, created: false };
     }
     const hasNewStructure = await fs.pathExists(indexPath);
     const hasLegacyStructure = (await fs.pathExists(themePath)) && (await fs.pathExists(scalePath));
     if (!hasNewStructure && !hasLegacyStructure) {
-        return { path: targetPath, created: false };
+        return { path: primaryPath, created: false };
     }
     let content;
     if (hasNewStructure && (await fs.pathExists(themesDir))) {
         // 新结构：读取拆分的主题文件并内联
         const scaleContent = await readScaleContents(registryRoot);
-        const lightContent = await readFileIfExists(path.join(themesDir, 'light-qoder.css'));
-        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-qoder.css'));
+        const lightContent = await readFileIfExists(path.join(themesDir, 'light-mint.css'));
+        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-mint.css'));
         const lightParchmentContent = await readFileIfExists(path.join(themesDir, 'light-parchment.css'));
         const darkParchmentContent = await readFileIfExists(path.join(themesDir, 'dark-parchment.css'));
         const scrollbarContent = await readFileIfExists(scrollbarPath);
+        const themeBaseContent = await readFileIfExists(themeBasePath);
         content = `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n` +
             `${scaleContent}\n\n` +
             `${lightContent}\n\n` +
             `${darkContent}\n\n` +
             `${lightParchmentContent}\n\n` +
             `${darkParchmentContent}\n` +
-            (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+            (scrollbarContent ? `\n${scrollbarContent}\n` : '') +
+            (themeBaseContent ? `\n${themeBaseContent}\n` : '');
     }
     else {
         // 兼容旧结构
@@ -167,10 +175,10 @@ export async function writeQoderTokensFile(cwd, registryRoot) {
             `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
                 (scrollbarContent ? `\n${scrollbarContent}\n` : '');
     }
-    await fs.ensureDir(path.dirname(targetPath));
-    await fs.writeFile(targetPath, content, 'utf-8');
-    return { path: targetPath, created: true };
+    await fs.ensureDir(path.dirname(primaryPath));
+    await fs.writeFile(primaryPath, content, 'utf-8');
+    return { path: primaryPath, created: true };
 }
-export function getQoderTokensImportPath() {
-    return `./${DEDICATED_TOKENS_FILE}`;
+export function getSparkTokensImportPath() {
+    return `./${PRIMARY_TOKENS_FILE}`;
 }

package/cli/dist/utils/transform.js

@@ -1,11 +1,15 @@
 /**
- * [INPUT]: 模板源码 + 用户 aliases
- * [OUTPUT]: 替换别名后的源码字符串
- * [POS]: cli/src/utils/transform.ts
+ * [WHO]: Public exports from this file (see implementation below).
+ * [FROM]: See the import block immediately after this header.
+ * [TO]: sparkdesign package consumers; output of CLI `add` when applicable.
+ * [HERE]: cli/src/utils/transform.ts — Spark Design source; keep aligned with the main library.
  *
- * [PROTOCOL]: 文件逻辑变更时同步更新此 Header
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
  */
-/** 移除文件开头的 L3 协议块注释，使按需引入到用户项目的代码不包含内部文档。 */
+/** 移除文件开头的 P3（DIP）协议块注释，使按需引入到用户项目的代码不包含内部导航头。 */
 export function stripL3Header(source) {
     return source.replace(/^\s*\/\*\*[\s\S]*?\*\/\s*/, '').trimStart();
 }

package/cli/dist/utils/tsconfig.js

@@ -0,0 +1,182 @@
+/**
+ * [WHO]: Public exports from this file (see implementation below).
+ * [FROM]: See the import block immediately after this header.
+ * [TO]: sparkdesign package consumers; output of CLI `add` when applicable.
+ * [HERE]: cli/src/utils/tsconfig.ts — Spark Design source; keep aligned with the main library.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import path from 'node:path';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+export function stripJsonComments(raw) {
+    return raw.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/.*$/gm, '').replace(/,(\s*[}\]])/g, '$1');
+}
+/** 检查 / 修复 tsconfig 的 @/* 路径别名，返回是否已存在（含本次写入） */
+async function ensureTsPaths(cwd) {
+    for (const name of ['tsconfig.json', 'tsconfig.app.json']) {
+        const configPath = path.join(cwd, name);
+        if (!(await fs.pathExists(configPath)))
+            continue;
+        const raw = await fs.readFile(configPath, 'utf-8');
+        let config = null;
+        try {
+            config = JSON.parse(raw);
+        }
+        catch {
+            try {
+                config = JSON.parse(stripJsonComments(raw));
+            }
+            catch {
+                continue;
+            }
+        }
+        const co = config?.compilerOptions;
+        if (co?.paths && co.paths['@/*'])
+            return true;
+        if (!co || !config)
+            continue;
+        // 无论原文件是否含注释，都写回有效 JSON（注释丢失可接受，alias 能用更重要）
+        const paths = (co.paths ?? {});
+        paths['@/*'] = ['./src/*'];
+        co.paths = paths;
+        if (!co.baseUrl)
+            co.baseUrl = '.';
+        await fs.writeJson(configPath, config, { spaces: 2 });
+        console.log(chalk.green('✓'), `Added @/* → ./src/* to ${name}`);
+        return true;
+    }
+    console.log(chalk.yellow('⚠'), '未找到 tsconfig.json。Spark 组件使用 @/ 导入别名，请确保配置：');
+    console.log(chalk.cyan('   "compilerOptions": { "paths": { "@/*": ["./src/*"] } }'));
+    return false;
+}
+async function detectBundler(cwd) {
+    const pkgPath = path.join(cwd, 'package.json');
+    if (!(await fs.pathExists(pkgPath)))
+        return 'unknown';
+    const pkg = await fs.readJson(pkgPath);
+    const allDeps = { ...(pkg.dependencies ?? {}), ...(pkg.devDependencies ?? {}) };
+    if (allDeps['next'])
+        return 'next';
+    if (allDeps['vite'] || allDeps['@vitejs/plugin-react'] || allDeps['@vitejs/plugin-react-swc'])
+        return 'vite';
+    return 'unknown';
+}
+/** Vite 配置文件路径（按优先级） */
+const VITE_CONFIGS = ['vite.config.ts', 'vite.config.js', 'vite.config.mts', 'vite.config.mjs'];
+/** 检查 Vite resolve.alias 是否已包含 @ 别名 */
+async function viteHasAtAlias(cwd) {
+    for (const name of VITE_CONFIGS) {
+        const configPath = path.join(cwd, name);
+        if (!(await fs.pathExists(configPath)))
+            continue;
+        const content = await fs.readFile(configPath, 'utf-8');
+        // 常见写法检测：
+        // 1) resolve: { alias: { '@': ... } }
+        // 2) resolve: { alias: [{ find: '@', ... }] }
+        // 3) '@': path.resolve(...)  或 "@": ...
+        const hasAlias = /['"]@['"]/.test(content) && /alias/.test(content);
+        return { found: hasAlias, configFile: name };
+    }
+    return { found: false, configFile: null };
+}
+/** 尝试自动向 Vite 配置追加 resolve.alias（仅限简单场景） */
+async function tryPatchViteAlias(cwd, configFile) {
+    const configPath = path.join(cwd, configFile);
+    const content = await fs.readFile(configPath, 'utf-8');
+    // 检查是否已 import path
+    const hasPathImport = /import\s+path\s+from\s+['"](?:node:)?path['"]/.test(content) ||
+        /import\s*\{\s*resolve\s*\}\s*from\s*['"](?:node:)?path['"]/.test(content) ||
+        /const\s+path\s*=\s*require/.test(content) ||
+        /import\s+\*\s+as\s+path\s+from/.test(content);
+    const pathRef = hasPathImport ? 'path.resolve(__dirname, "./src")' : 'fileURLToPath(new URL("./src", import.meta.url))';
+    const pathImportLine = hasPathImport ? '' : "import { fileURLToPath, URL } from 'node:url'\n";
+    // 场景 1：已有 resolve: { alias: { ... } } 对象形式，追加 '@' 键
+    const aliasObjMatch = content.match(/(resolve\s*:\s*\{[^}]*alias\s*:\s*\{)([^}]*)\}/);
+    if (aliasObjMatch) {
+        const existingAliases = aliasObjMatch[2];
+        if (existingAliases.includes("'@'") || existingAliases.includes('"@"'))
+            return true; // 已有
+        const separator = existingAliases.trim().endsWith(',') || existingAliases.trim() === '' ? '' : ',';
+        let patched = content.replace(aliasObjMatch[0], `${aliasObjMatch[1]}${existingAliases}${separator}\n      '@': ${pathRef},\n    }`);
+        if (pathImportLine && !hasPathImport)
+            patched = pathImportLine + patched;
+        await fs.writeFile(configPath, patched, 'utf-8');
+        console.log(chalk.green('✓'), `Added resolve.alias['@'] → src/ to ${configFile}`);
+        return true;
+    }
+    // 场景 2：没有 resolve.alias 块 —— 在 defineConfig({...}) 或 export default {...} 内注入
+    const resolveBlock = `  resolve: {\n    alias: {\n      '@': ${pathRef},\n    },\n  },`;
+    // 2a: defineConfig({ ... })
+    const defineMatch = content.match(/(defineConfig\s*\(\s*\{)/);
+    if (defineMatch) {
+        let patched = content.replace(defineMatch[0], `${defineMatch[0]}\n${resolveBlock}`);
+        if (pathImportLine && !hasPathImport)
+            patched = pathImportLine + patched;
+        await fs.writeFile(configPath, patched, 'utf-8');
+        console.log(chalk.green('✓'), `Added resolve.alias['@'] → src/ to ${configFile}`);
+        return true;
+    }
+    // 2b: export default { ... }
+    const exportMatch = content.match(/(export\s+default\s*\{)/);
+    if (exportMatch) {
+        let patched = content.replace(exportMatch[0], `${exportMatch[0]}\n${resolveBlock}`);
+        if (pathImportLine && !hasPathImport)
+            patched = pathImportLine + patched;
+        await fs.writeFile(configPath, patched, 'utf-8');
+        console.log(chalk.green('✓'), `Added resolve.alias['@'] → src/ to ${configFile}`);
+        return true;
+    }
+    return false;
+}
+/** 输出 Vite alias 缺失的修复提示 */
+function printViteAliasHint(configFile) {
+    const file = configFile ?? 'vite.config.ts';
+    console.log(chalk.yellow('⚠'), `${file} 缺少 @/ 运行时别名，组件导入将在启动时报错。请添加：`);
+    console.log(chalk.cyan(`
+   // ${file}
+   import path from 'node:path'
+
+   export default defineConfig({
+     resolve: {
+       alias: {
+         '@': path.resolve(__dirname, './src'),
+       },
+     },
+     // ...其余配置
+   })
+`));
+}
+/**
+ * 一站式 alias 检查：TS 层 + bundler 运行时层。
+ * 在 init / add 中调用。
+ */
+export async function ensureTsAlias(cwd) {
+    // 1. TS 层
+    await ensureTsPaths(cwd);
+    // 2. Bundler 运行时层
+    const bundler = await detectBundler(cwd);
+    if (bundler === 'next') {
+        // Next.js 自动读取 tsconfig.json paths，无需额外 alias 配置
+        return;
+    }
+    if (bundler === 'vite') {
+        const { found, configFile } = await viteHasAtAlias(cwd);
+        if (found)
+            return;
+        // 没有找到 Vite alias —— 尝试自动 patch
+        if (configFile) {
+            const patched = await tryPatchViteAlias(cwd, configFile);
+            if (patched)
+                return;
+        }
+        // 自动 patch 失败或没找到配置文件 —— 输出手动提示
+        printViteAliasHint(configFile);
+        return;
+    }
+    // 未知 bundler —— 给出通用提示
+    console.log(chalk.gray('   提示: 如果使用 webpack/Rspack 等打包器，请确保 resolve.alias 中配置了 @ → src/'));
+}

package/cli/registry/AGENTS.md

@@ -0,0 +1,18 @@
+# registry/
+
+> **P2** | Parent: [Root AGENTS.md](../AGENTS.md)
+
+## Member list
+
+> Complete this section with **one line per file** (and major folders): `basic/`, `chat/`, `lib/`, `tokens/`, `meta.json`, `__tests__/`, etc. The filesystem is the source of truth.
+
+## Submodules
+
+- `basic/`, `chat/` — component source files consumed by the library and CLI
+- `lib/` — shared helpers bundled with registry copies
+- `tokens/` — CSS token packs synced to `cli/registry`
+- `__tests__/` — component tests
+
+---
+
+**Covenant:** update this file whenever you add/remove registry files or change global publishing behavior.

package/cli/registry/__tests__/chat/thinking-indicator.test.tsx

@@ -21,9 +21,9 @@ describe('ThinkingIndicator', () => {
   // 文案测试
   // ============================================================
   describe('text 文案', () => {
-    it('应显示默认文案 "Qoder is Thinking..."', () => {
+    it('应显示默认文案 "Spark is Thinking..."', () => {
       render(<ThinkingIndicator />)
-      expect(screen.getByText('Qoder is Thinking...')).toBeInTheDocument()
+      expect(screen.getByText('Spark is Thinking...')).toBeInTheDocument()
     })
 
     it('应显示自定义文案', () => {

package/cli/registry/chat/chat-input/chat-input-folder-selector.tsx

@@ -13,7 +13,7 @@ import { FolderPermissionDialog } from './folder-permission-dialog'
 import { FolderLine, FolderFillLine, TimeLine } from '../../basic/icons-inline'
 import type { FolderPermissionConfig, InputPropsWithWebkitDirectory } from './types'
 
-const MOCK_HISTORY_FOLDERS = ['~/Projects/qoder-work-ui', '~/Documents/workspace', '~/Desktop/demo', '~/code/my-app']
+const MOCK_HISTORY_FOLDERS = ['~/Projects/spark-design-app', '~/Documents/workspace', '~/Desktop/demo', '~/code/my-app']
 
 const iconClass = 'mr-2 w-4 h-4 shrink-0'
 

package/cli/registry/chat/chat-input/folder-permission-dialog.tsx

@@ -28,10 +28,10 @@ export function FolderPermissionDialog({
       <AlertDialogContent className="p-6">
         <AlertDialogHeader>
           <AlertDialogTitle className="text-xl leading-xl font-semibold text-text">
-            Allow Qoder Work to access and modify files in &quot;{projectName}&quot;?
+            Allow Spark Design to access and modify files in &quot;{projectName}&quot;?
           </AlertDialogTitle>
           <AlertDialogDescription className="mt-2 text-sm leading-sm text-text-tertiary">
-            This permission applies to all files and subfolders in this directory. Qoder Work may read, update, and
+            This permission applies to all files and subfolders in this directory. Spark Design may read, update, and
             permanently delete files here, and may share relevant file contents with connected tools when needed.
             Only allow access to folders you trust.
           </AlertDialogDescription>

package/cli/registry/chat/image-generating.tsx

@@ -24,7 +24,7 @@ export function ImageGenerating({
   width = 'var(--spacing-80)',
   height = 'var(--spacing-60)',
   speed = 1.0,
-  caption = 'Qoder is drawing...',
+  caption = 'Spark is drawing...',
   captionClassName,
   className,
   style: styleProp,

package/cli/registry/chat/response/context.tsx

@@ -111,7 +111,7 @@ export function useResponseContext() {
 
 // ===== Default ThinkingIndicator =====
 
-const DEFAULT_THINK = <ThinkingIndicator text="Qoder is thinking..." />
+const DEFAULT_THINK = <ThinkingIndicator text="Spark is thinking..." />
 
 // ===== Provider =====
 

package/cli/registry/chat/thinking-indicator.tsx

@@ -37,7 +37,7 @@ function DefaultLoader() {
 }
 
 export function ThinkingIndicator({
-  text = 'Qoder is Thinking...',
+  text = 'Spark is Thinking...',
   textClassName,
   shimmer = true,
   shimmerDuration = 2,

package/cli/registry/tokens/index.css

@@ -2,11 +2,11 @@
  * Token 系统统一入口 (CLI 分发版)
  *
  * 引入方式：
- * 1. 全量引入（默认）: @import "qoder-tokens.css";
+ * 1. 全量引入（默认）: @import "sparkdesign-tokens.css";
  * 2. 按需引入: 
  *    @import "./scale/index.css";       // 布局风格
- *    @import "./themes/light-qoder.css"; // 亮色主题
- *    @import "./themes/dark-qoder.css";  // 暗色主题
+ *    @import "./themes/light-mint.css"; // 亮色主题
+ *    @import "./themes/dark-mint.css";  // 暗色主题
  *
  * 自定义主题：
  * @import "./scale/index.css";
@@ -22,10 +22,13 @@
 @import "./scale.css";
 
 /* 内置主题 (data-theme) */
-@import "./themes/light-qoder.css";
-@import "./themes/dark-qoder.css";
+@import "./themes/light-mint.css";
+@import "./themes/dark-mint.css";
 @import "./themes/light-parchment.css";
 @import "./themes/dark-parchment.css";
 
 /* 滚动条工具样式 */
 @import "./scrollbar-utility.css";
+
+/* Tailwind v4 @theme 映射（--token-color-* → --color-*，驱动 bg-primary 等工具类） */
+@import "./theme-base.css";