sparkle-design-cli 2.0.7-beta.7 → 2.0.7-beta.8

package/lib/constants.js

@@ -44,8 +44,16 @@ export const REGEX = {
     /\/\*\s*フォントのインポート[^*]*\*\/\s*\n?(?:@import\s+(?:url\([^)]+fonts\.googleapis\.com[^)]+\)|['"][^"']*fonts\.googleapis\.com[^"']*['"]);?\s*\n?)*\n?/g,
 
   // Sparkle Design関連
+  // `@import "sparkle-design.css"` / `@import "./sparkle-design.css"` だけでなく
+  // `@import "./app/sparkle-design.css"` 等、任意の相対パスを含む variant も
+  // 除去対象にする。Vite のように entry CSS (src/index.css) と sparkle-design.css
+  // (src/app/sparkle-design.css) が別ディレクトリに置かれるレイアウトでは
+  // 後者のような path になるので、同一 dir 前提の regex だと AI が手で直したもの
+  // を除去できず二重 import が残ってしまう。
+  // en: Match any relative path ending in `sparkle-design.css`, including layouts
+  // like Vite where the entry CSS and sparkle-design.css live in different dirs.
   SPARKLE_IMPORT:
-    /\/\*\s*Sparkle Design[^*]*\*\/\s*\n?|@import\s+['"](\.\/)?sparkle-design\.css['"];?\s*\n?/g,
+    /\/\*\s*Sparkle Design[^*]*\*\/\s*\n?|@import\s+['"][^"']*sparkle-design\.css['"];?\s*\n?/g,
   TAILWIND_IMPORT: /@import\s+['"]tailwindcss['"];?/,
 
   // @source ディレクティブ関連
@@ -137,6 +145,11 @@ export const COMMENTS = {
 };
 
 // インポート文のテンプレート
+// SPARKLE_DESIGN は entry CSS と sparkle-design.css が同じディレクトリにある
+// 場合のデフォルト。異なる場合は buildSparkleImportStatement() で相対 path を
+// 計算して差し替える（Vite の src/index.css → src/app/sparkle-design.css 等）。
+// en: Default when entry CSS and sparkle-design.css share a directory. Use
+// buildSparkleImportStatement() for layouts that place them in different dirs.
 export const IMPORTS = {
   SPARKLE_DESIGN: '@import "./sparkle-design.css";',
   TAILWIND: '@import "tailwindcss";',

package/lib/font-manager.js

@@ -88,14 +88,44 @@ function createCustomCssImportBlock(customCssPath, globalsPath) {
   return [COMMENTS.CUSTOM_CSS, `@import "${relativePath}";`].join('\n');
 }
 
+/**
+ * entry CSS (globals.css / index.css) から sparkle-design.css への相対 path を
+ * 計算し、`@import` 文を組み立てる。同一ディレクトリなら `./sparkle-design.css`、
+ * 異なるなら `./app/sparkle-design.css` のような相対 path になる。Vite の
+ * `src/index.css` → `src/app/sparkle-design.css` レイアウトで正しい path が
+ * 出るようにするために追加された関数（beta.7 まではハードコード）。
+ * en: Compute the relative path from the entry CSS to sparkle-design.css.
+ * Handles layouts like Vite's `src/index.css` → `src/app/sparkle-design.css`,
+ * where the two files live in different directories.
+ */
+function buildSparkleImportStatement(globalsPath, sparkleDesignPath) {
+  if (!globalsPath || !sparkleDesignPath) {
+    return IMPORTS.SPARKLE_DESIGN;
+  }
+  const globalsDir = path.dirname(globalsPath);
+  const rel = path.relative(globalsDir, sparkleDesignPath).split(path.sep).join('/');
+  // path.relative が空文字を返すのは globalsPath === sparkleDesignPath のときのみ
+  // （想定外）。念のため fallback として同一 dir 前提の default import を返す。
+  // en: path.relative returns '' only when paths match; use the same-dir default.
+  if (!rel) return IMPORTS.SPARKLE_DESIGN;
+  const importPath = rel.startsWith('.') ? rel : `./${rel}`;
+  return `@import "${importPath}";`;
+}
+
 /**
  * sparkle-design.css importブロックを生成する
  * @param {Array<string>} sourcePackages 追加パッケージ名の配列
  * @param {string} globalsPath globals.css の絶対パス（@source パス計算用）
  * @param {string|null} customCssPath custom-css ファイルの相対パス
+ * @param {string|null} sparkleDesignPath sparkle-design.css の絶対パス（相対 import 計算用）
  * @returns {string} sparkle-design.css importブロック
  */
-function createSparkleImportBlock(sourcePackages = [], globalsPath = null, customCssPath = null) {
+function createSparkleImportBlock(
+  sourcePackages = [],
+  globalsPath = null,
+  customCssPath = null,
+  sparkleDesignPath = null
+) {
   const parts = [''];
 
   // CSS 仕様上 `@import` は `@charset` / `@layer` 以外の at-rule より前に
@@ -112,7 +142,10 @@ function createSparkleImportBlock(sourcePackages = [], globalsPath = null, custo
   // downstream `@import "./sparkle-design.css"` silently drop in some
   // PostCSS toolchains, which removes Sparkle tokens from the output.
   // We now emit @import blocks first, then any @source directives.
-  parts.push(COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN);
+  parts.push(
+    COMMENTS.SPARKLE_IMPORT,
+    buildSparkleImportStatement(globalsPath, sparkleDesignPath)
+  );
 
   // カスタムCSS import を sparkle-design.css の後に配置
   const customBlock = createCustomCssImportBlock(customCssPath, globalsPath);
@@ -223,7 +256,8 @@ export function updateGlobalsWithFonts(
   fontImports,
   globalsPath,
   sourcePackages = null,
-  customCssPath = null
+  customCssPath = null,
+  sparkleDesignPath = null
 ) {
   const hasFonts = fontImports.length > 0;
   const hasSourcePackages = sourcePackages !== null && sourcePackages !== undefined;
@@ -255,7 +289,12 @@ export function updateGlobalsWithFonts(
     }
 
     // 4. importブロックを生成（フォント @import は SparkleHead に移行したため生成しない）
-    const sparkleImportBlock = createSparkleImportBlock(sourcePackages, globalsPath, customCssPath);
+    const sparkleImportBlock = createSparkleImportBlock(
+      sourcePackages,
+      globalsPath,
+      customCssPath,
+      sparkleDesignPath
+    );
 
     // 5. globals.css を再構築（フォント @import なし）
     const reconstructedContent = reconstructGlobalsCss(
@@ -518,7 +557,19 @@ export function manageFontImports(
     }
 
     // 4. globals.css に import / @source を追加
-    const result = updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages, customCssPath);
+    // sparkle-design.css の絶対パスを渡すことで、globalsPath と異なる
+    // ディレクトリに置かれている場合でも相対 import が正しく計算される
+    // （Vite の src/index.css → src/app/sparkle-design.css 等）。
+    // en: Pass the absolute sparkle-design.css path so the import can be
+    // computed relative to the entry CSS, even in Vite-style layouts where
+    // the two files live in different directories.
+    const result = updateGlobalsWithFonts(
+      fontImports,
+      globalsPath,
+      sourcePackages,
+      customCssPath,
+      sparkleDesignPath
+    );
 
     if (result.status === 'skipped') {
       return result;

package/lib/generate-css.js

@@ -256,6 +256,92 @@ function writeSparkleHead(content, sparkleDesignCssPath) {
   console.log('   → ルートレイアウトの <head> 内に <SparkleHead /> を追加してください');
 }
 
+const VITE_INDEX_HTML_BLOCK_START = '<!-- sparkle-design-cli:fonts:start -->';
+const VITE_INDEX_HTML_BLOCK_END = '<!-- sparkle-design-cli:fonts:end -->';
+
+/**
+ * SparkleHead.tsx と同じフォント <link> タグ群を HTML 文字列として生成する。
+ * Vite のように `<head>` が `index.html` にある環境では、React コンポーネントを
+ * 挟めないため HTML に直接注入する必要がある。
+ * en: Return the font/link tags as HTML strings so we can inject them into
+ * Vite's `index.html`, where a React SparkleHead component can't reach the head.
+ */
+function buildSparkleFontLinksHtml(resolvedFonts) {
+  const materialSymbolsUrl = extractUrlFromImport(FONT_DEFAULTS.MATERIAL_SYMBOLS_IMPORT);
+  const fontImportLines = generateMergedFontImports([...resolvedFonts.pro, ...resolvedFonts.mono]);
+  const fontUrls = fontImportLines.map(extractUrlFromImport).filter(Boolean);
+  return [
+    `<link rel="preconnect" href="${FONT_DOMAINS.GOOGLEAPIS}" />`,
+    `<link rel="preconnect" href="${FONT_DOMAINS.GSTATIC}" crossorigin />`,
+    `<link rel="stylesheet" href="${materialSymbolsUrl}" />`,
+    ...fontUrls.map((url) => `<link rel="stylesheet" href="${url}" />`),
+  ];
+}
+
+/**
+ * Vite プロジェクトの `index.html` に managed block で Sparkle のフォント
+ * `<link>` タグを upsert する。存在しない場合は `</head>` 直前に挿入、
+ * 既にマーカー付きブロックがあれば内容を置換する。
+ *
+ * - Vite 以外（Next.js の src/app など）は index.html を持たないので呼ばれない
+ * - 既存ユーザーの head 内に書いた自作の link は触らない（managed block の
+ *   範囲だけを管理するので non-destructive）
+ *
+ * en: Upsert a managed block of Sparkle font `<link>` tags into Vite's
+ * `index.html`, injecting before `</head>` on first run and replacing the
+ * block content on re-runs. Non-destructive against user-authored links
+ * outside the markers.
+ */
+function upsertViteIndexHtmlFonts(cwd, resolvedFonts) {
+  const indexHtmlPath = path.resolve(cwd, 'index.html');
+  if (!fs.existsSync(indexHtmlPath)) {
+    return { status: 'skipped', reason: 'no-index-html' };
+  }
+  let html;
+  try {
+    html = fs.readFileSync(indexHtmlPath, 'utf8');
+  } catch (error) {
+    return { status: 'failed', reason: `read-error: ${error.code ?? error.message}` };
+  }
+
+  const links = buildSparkleFontLinksHtml(resolvedFonts);
+  // ブロック内部の各行は innerIndent で統一する。マーカー行自体も含める。
+  // en: Apply innerIndent to every line of the managed block, markers included.
+  const innerIndent = '    ';
+  const block = [VITE_INDEX_HTML_BLOCK_START, ...links, VITE_INDEX_HTML_BLOCK_END]
+    .map((line) => innerIndent + line)
+    .join('\n');
+
+  if (html.includes(VITE_INDEX_HTML_BLOCK_START) && html.includes(VITE_INDEX_HTML_BLOCK_END)) {
+    // 既存ブロックの各行インデントを尊重しつつ中身だけ置換すると複雑になるので、
+    // BLOCK_START の前にある空白を再利用してブロックごと丸ごと差し替える。
+    // en: Replace the entire managed block while preserving the leading
+    // whitespace that already sits in front of BLOCK_START.
+    const existingBlockRegex = new RegExp(
+      `([^\\S\\n]*)${VITE_INDEX_HTML_BLOCK_START}[\\s\\S]*?${VITE_INDEX_HTML_BLOCK_END}`
+    );
+    const replaced = html.replace(existingBlockRegex, (_match, leadingWs) => {
+      // 既存 leading を innerIndent に揃える。マーカー前の空白が行頭にある想定。
+      return [VITE_INDEX_HTML_BLOCK_START, ...links, VITE_INDEX_HTML_BLOCK_END]
+        .map((line, idx) => (idx === 0 ? leadingWs : innerIndent) + line)
+        .join('\n');
+    });
+    if (replaced === html) return { status: 'unchanged', path: indexHtmlPath };
+    fs.writeFileSync(indexHtmlPath, replaced, 'utf8');
+    return { status: 'updated', path: indexHtmlPath };
+  }
+
+  const headCloseRegex = /(\s*)<\/head>/i;
+  const match = html.match(headCloseRegex);
+  if (!match) {
+    return { status: 'failed', reason: 'no-head-close-tag' };
+  }
+  const leading = match[1]; // 通常 `\n  ` (`</head>` 直前の改行とインデント)
+  const replaced = html.replace(headCloseRegex, `\n${block}${leading}</head>`);
+  fs.writeFileSync(indexHtmlPath, replaced, 'utf8');
+  return { status: 'created', path: indexHtmlPath };
+}
+
 /**
  * テンプレート変数を設定値で置換する
  * @param {string} template CSSテンプレート
@@ -450,6 +536,27 @@ export function generateCSS(
   const sparkleHeadContent = generateSparkleHeadContent(resolvedFonts);
   writeSparkleHead(sparkleHeadContent, resolvedOutputPath);
 
+  // 7.5 Vite プロジェクトの index.html に Sparkle のフォント <link> タグを upsert
+  // する。Vite は <head> が index.html 側にあるため、React コンポーネントの
+  // SparkleHead を挟めない。managed block でマーカー間だけを管理し、既存の
+  // head 内容は非破壊に保つ。
+  // en: Vite ships its <head> in index.html, outside React's reach, so mirror
+  // the SparkleHead link tags into a managed block there.
+  const cwdForHtml = process.cwd();
+  if (fs.existsSync(path.resolve(cwdForHtml, 'index.html'))) {
+    const htmlResult = upsertViteIndexHtmlFonts(cwdForHtml, resolvedFonts);
+    if (htmlResult.status === 'created' || htmlResult.status === 'updated') {
+      const displayPath = path.relative(cwdForHtml, htmlResult.path) || htmlResult.path;
+      console.log(
+        `✅ index.html の Sparkle フォント <link> ブロックを${htmlResult.status === 'created' ? '挿入' : '更新'}しました: ${displayPath}`
+      );
+    } else if (htmlResult.status === 'failed') {
+      console.warn(
+        `⚠️  index.html への Sparkle フォント <link> 挿入に失敗しました (${htmlResult.reason})。手動で <head> 内に SparkleHead.tsx 相当の <link> タグを追加してください。`
+      );
+    }
+  }
+
   // 8. フォント管理の自動処理を実行（globals.css にはフォント @import を差し込まない）
   // source-packages は以下の合成で決まる:
   //   1. package.json から既知のデザインシステムパッケージを自動検出（baseline）

package/lib/setup.js

@@ -20,10 +20,23 @@ const DEFAULT_SPARKLE_CONFIG = {
 };
 
 // 初期 globals.css のテンプレート
-// en: Initial globals.css template
-const INITIAL_GLOBALS_CSS = `@import "tailwindcss";
-@import "./sparkle-design.css";
-`;
+// target のディレクトリと sparkle-design.css の想定出力先
+// (`src/app/sparkle-design.css`) との相対関係で import path を切り替える。
+// Next.js App Router (src/app/globals.css) なら同一 dir で `./sparkle-design.css`、
+// Vite (src/index.css) なら 1 階層下なので `./app/sparkle-design.css` になる。
+// 同一 dir 前提のハードコードで生成していた beta.7 以前は Vite レイアウトで
+// path が切れ、後続 generate が相対 path を再計算しても scaffold 時点では
+// 間違った path で書かれていたため、AI が手で直す副作用が出ていた。
+// en: Render initial entry CSS with a path that actually resolves to
+// `src/app/sparkle-design.css` given the target file location.
+function buildInitialGlobalsCss(targetRelPath) {
+  const targetDir = path.dirname(targetRelPath);
+  const sparkleDesignRel = 'src/app/sparkle-design.css';
+  let rel = path.relative(targetDir, sparkleDesignRel).split(path.sep).join('/');
+  if (!rel) rel = 'sparkle-design.css';
+  if (!rel.startsWith('.')) rel = `./${rel}`;
+  return `@import "tailwindcss";\n@import "${rel}";\n`;
+}
 
 // インストール対象パッケージ
 // en: Packages to install
@@ -185,6 +198,11 @@ function buildInstructionBlock(target, assistant) {
     '',
     '- **Scope**: Sparkle Design is a UI component library. For capability areas it does not cover (charts, data visualization, maps, rich text editors, animation libraries, etc.), **feel free to adopt other libraries** (e.g. Recharts, D3, Chart.js) — do not try to solve everything inside Sparkle Design. Pass Sparkle Design CSS tokens (`--color-primary-*` etc.) into those libraries to keep visuals consistent.',
     "- **Required reading**: Before using any Sparkle Design component, read the installed package's type definitions at `node_modules/<package>/dist/components/ui/<component>/index.d.ts` — prop specs, usage, and anti-patterns (with ✅ / ❌ examples) live in the JSDoc and are the source of truth. Target the installed package(s), e.g. `sparkle-design` and/or `@goodpatch/sparkle-design-internal`, and read the full JSDoc, not just the type signature.",
+    '- **Structural invariants — verify before hand-editing any Sparkle file**:',
+    '  - Entry CSS (e.g. `src/index.css`, `src/app/globals.css`) must start with `@import "tailwindcss";` and keep **all `@import` statements before any `@source` directive**. CSS-spec-compliant processors silently drop any `@import` that follows another at-rule, which removes Sparkle tokens from the output.',
+    '  - Sparkle fonts (Google Fonts preconnect + Material Symbols + the configured pro/mono fonts) must be present in the document `<head>`: React layouts via `<SparkleHead />` placed inside `<head>` in the root layout, Vite projects via the managed `<!-- sparkle-design-cli:fonts:start -->` … `end` block in `index.html`.',
+    '  - Do **not** hand-define `--color-primary-*` or other Sparkle tokens as fallbacks when they look missing. Those come from `sparkle-design.css`; missing values mean the `@import` path is wrong (e.g. `./sparkle-design.css` used when the file lives under `./app/`). Fix the import path, do not duplicate the tokens.',
+    '  - If you detect any of the above drifted, re-run `npx --yes sparkle-design-cli generate` before hand-editing. The CLI restores the canonical state (correct relative paths, `@source` placement, `index.html` injection).',
     '- **Required**: After creating or modifying any UI component, run `lint:sparkle` before finishing. This catches Sparkle Design anti-patterns.',
     `- For AI review, prefer \`lint:sparkle:json\` or run \`npx --yes sparkle-design-cli check ${target} --format json\` directly.`,
     '- You must inspect every entry in both `findings` and `manualReviewReminders` — the reminders flag judgment calls (Badge vs Tag, etc.) that the linter cannot detect.',
@@ -375,7 +393,8 @@ function buildScaffoldTargets(cwd) {
       target: defaultGlobalsCssTarget(cwd),
       write: (abs) => {
         ensureDir(abs);
-        fs.writeFileSync(abs, INITIAL_GLOBALS_CSS, 'utf8');
+        const targetRel = path.relative(cwd, abs).split(path.sep).join('/');
+        fs.writeFileSync(abs, buildInitialGlobalsCss(targetRel), 'utf8');
       },
     },
   ];
@@ -519,6 +538,36 @@ function loadHookJson(filePath, label) {
   }
 }
 
+/**
+ * Claude Code の Stop hook を読んでくれるのは「Claude を起動した作業ディレクトリ」
+ * 直下の `.claude/settings.json` であって、cwd とは限らない。ユーザーが親フォルダ
+ * で Claude を起動してからサブディレクトリに `cd` してこの setup を実行した
+ * 場合、`.claude/settings.json` はサブディレクトリに置かれるが Claude は親側を
+ * 見ているので hook が効かない、という失敗モードがある。
+ *
+ * Claude Code が Bash tool 経由で環境変数 `CLAUDE_PROJECT_DIR` を設定するので、
+ * それを検出して cwd と違えば「hook が効かない可能性あり」と警告する。環境変数
+ * が無い場合（別の agent から呼ばれている / Claude Code 以外）は警告なし。
+ *
+ * en: Claude Code loads `.claude/settings.json` from the directory where it was
+ * launched, not the current working directory. If the user started Claude at a
+ * parent folder and ran `sparkle-design-cli setup` inside a subdirectory, the
+ * hook lands in a place Claude won't read. Detect this mismatch via the
+ * `CLAUDE_PROJECT_DIR` env var that Claude Code exports into shell tools.
+ */
+function detectClaudeSessionRootMismatch(cwd) {
+  const sessionDir = process.env.CLAUDE_PROJECT_DIR;
+  if (!sessionDir) return null;
+  try {
+    const resolvedSession = fs.realpathSync(path.resolve(sessionDir));
+    const resolvedCwd = fs.realpathSync(path.resolve(cwd));
+    if (resolvedSession === resolvedCwd) return null;
+    return { sessionDir: resolvedSession, cwd: resolvedCwd };
+  } catch {
+    return null;
+  }
+}
+
 function runClaudeHook(cwd, target, dryRun) {
   const settingsPath = path.resolve(cwd, '.claude/settings.json');
   const managedCommand = buildManagedHookCommand(target);
@@ -538,6 +587,7 @@ function runClaudeHook(cwd, target, dryRun) {
       group.hooks.some((entry) => entry?.type === 'command' && entry?.command === managedCommand)
   );
 
+  const mismatch = detectClaudeSessionRootMismatch(cwd);
   if (alreadyPresent) {
     return {
       assistant: 'claude',
@@ -546,6 +596,7 @@ function runClaudeHook(cwd, target, dryRun) {
       path: settingsPath,
       reason: 'already-present',
       command: managedCommand,
+      sessionRootMismatch: mismatch,
     };
   }
 
@@ -559,7 +610,6 @@ function runClaudeHook(cwd, target, dryRun) {
     ensureDir(settingsPath);
     writeJson(settingsPath, nextSettings);
   }
-
   return {
     assistant: 'claude',
     changed: true,
@@ -567,6 +617,7 @@ function runClaudeHook(cwd, target, dryRun) {
     path: settingsPath,
     reason: existed ? 'appended' : 'created',
     command: managedCommand,
+    sessionRootMismatch: mismatch,
   };
 }
 
@@ -799,6 +850,7 @@ export function setupAssistant(options = {}) {
           existed: hook.existed,
           reason: hook.reason,
           featureFlagNote: hook.featureFlagNote ?? null,
+          sessionRootMismatch: hook.sessionRootMismatch ?? null,
         }
       : null,
   };
@@ -864,6 +916,13 @@ function printPostSetupReminder(target, packageManager, { hook } = {}) {
     if (hook.featureFlagNote) {
       lines.push(`     ⚠️  ${hook.featureFlagNote}`);
     }
+    if (hook.sessionRootMismatch) {
+      const { sessionDir, cwd: mismatchCwd } = hook.sessionRootMismatch;
+      lines.push(
+        `     ⚠️  Claude Code は ${sessionDir} を session root として ${path.join(sessionDir, '.claude/settings.json')} を読みます。今回の hook は ${path.join(mismatchCwd, '.claude/settings.json')} に書かれたため、このまま だと hook が発火しません。Claude Code をこのディレクトリから再起動するか、同じ設定を session root の .claude/settings.json にコピーしてください。`,
+        `     ⚠️  Claude Code reads \`.claude/settings.json\` from its session root, not cwd. The hook written to the current directory won't trigger — relaunch Claude from here, or copy the config to the session root.`
+      );
+    }
   }
   lines.push('');
   for (const line of lines) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sparkle-design-cli",
-  "version": "2.0.7-beta.7",
-  "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
+  "version": "2.0.7-beta.8",
+  "description": "Sparkle Design CLI — プロジェクトセットアップ、CSS・フォント生成、アンチパターン検査、AI エージェント（Claude Code / Cursor / Codex）向けのガードと hook 設定まで一括で行う sparkle-design 公式 CLI。",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -21,10 +21,20 @@
     "sync:anti-pattern-docs": "node scripts/sync-anti-pattern-docs.mjs"
   },
   "keywords": [
-    "css",
+    "sparkle-design",
     "design-system",
-    "css-generator",
-    "theming"
+    "cli",
+    "setup",
+    "scaffold",
+    "css",
+    "tailwindcss",
+    "theming",
+    "anti-pattern",
+    "linter",
+    "ai-agent",
+    "claude-code",
+    "cursor",
+    "codex"
   ],
   "author": "Goodpatch Inc. <sparkle-design@goodpatch.com>",
   "license": "MIT",