sh-ui-cli 0.42.1 → 0.44.0

package/data/tokens/build.mjs

@@ -102,6 +102,29 @@ function mergeThemeIndependent(tokens) {
   return out;
 }
 
+/**
+ * Tailwind v4 의 @theme inline 블록에 sh-ui 토큰을 매핑해
+ * `bg-primary`, `border-border`, `rounded-md` 같은 Tailwind utility 가
+ * 동작하도록 한다. 매핑은 light 토큰 맵에서 파생 — 모든 색 키를
+ * Tailwind 의 --color-* 네임스페이스로 옮김.
+ *
+ * radius 는 단일 토큰 (--radius) 이지만 Tailwind 의 rounded-{sm,md,lg,xl}
+ * 4 단계로 expand. 템플릿이 손으로 박아두던 패턴을 단일 소스로 옮긴 것.
+ */
+function buildTailwindThemeBlock(lightTokens) {
+  const lines = [];
+  for (const path of Object.keys(lightTokens)) {
+    const cssVar = toCssVar(path);
+    const themeKey = cssVar.replace(/^--/, "--color-");
+    lines.push(`  ${themeKey}: var(${cssVar});`);
+  }
+  lines.push(`  --radius-sm: calc(var(--radius) - 2px);`);
+  lines.push(`  --radius-md: var(--radius);`);
+  lines.push(`  --radius-lg: calc(var(--radius) + 2px);`);
+  lines.push(`  --radius-xl: calc(var(--radius) + 4px);`);
+  return `@theme inline {\n${lines.join("\n")}\n}`;
+}
+
 export async function buildTokensCss(config) {
   const tokens = await resolveTokens(config);
   const mode = config.theme.mode;
@@ -116,6 +139,7 @@ export async function buildTokensCss(config) {
   if (mode === "light-dark") {
     blocks.push(emitCssBlock(".dark", tokens.dark));
   }
+  blocks.push(buildTailwindThemeBlock(tokens.light));
   const header = `/* Generated by @sh-ui/tokens — do not edit directly */\n/* base=${config.theme.base} radius=${config.theme.radius} mode=${config.theme.mode} */\n`;
   return header + "\n" + blocks.join("\n\n") + "\n";
 }
@@ -533,6 +557,48 @@ import 'package:flutter/material.dart';
   return `${header}\n${classes.join("\n\n")}\n\n${themeClass}\n`;
 }
 
+/* ───────── Emitter 디스패처 ─────────
+ *
+ * (platform × cssFramework) → 토큰 emitter.
+ * 향후 Tailwind theme config / CSS Modules / vanilla-extract 추가 시
+ * 이 테이블에 한 줄만 등록하면 끝나도록 구조를 미리 잡아 둠.
+ *
+ * Flutter 는 CSS 프레임워크 개념이 무의미하지만, 일관된 디스패치를 위해
+ * "plain" 키로 통일 — 호출부가 platform 별 분기 없이 같은 진입점을 쓸 수 있게.
+ */
+const tokenEmitters = {
+  react: {
+    plain: buildTokensCss,
+    // Tailwind 변종은 같은 tokens.css 를 공유. 컴포넌트의 utility class 가
+    // var(--primary) 를 @theme inline 매핑을 통해 참조하므로 — 토큰 자체는
+    // 동일. 향후 Tailwind v3 theme.config.ts 를 별도 emit 하고 싶으면
+    // 여기에 다른 함수를 등록.
+    tailwind: buildTokensCss,
+  },
+  flutter: {
+    plain: buildTokensDart,
+  },
+};
+
+export async function buildTokens(config) {
+  const platform = config.platform;
+  const fw = config.cssFramework ?? "plain";
+  const platformEmitters = tokenEmitters[platform];
+  if (!platformEmitters) {
+    throw new Error(
+      `tokens: 알 수 없는 platform '${platform}'. 지원: ${Object.keys(tokenEmitters).join(", ")}`,
+    );
+  }
+  const emit = platformEmitters[fw];
+  if (!emit) {
+    const supported = Object.keys(platformEmitters).join(", ");
+    throw new Error(
+      `tokens emitter 미구현: ${platform}/${fw}. 현재 지원: ${platform}/{${supported}}`,
+    );
+  }
+  return emit(config);
+}
+
 /* ───────── CLI ───────── */
 
 if (import.meta.url === `file://${process.argv[1]}`) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.42.1",
+  "version": "0.44.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/add.mjs

@@ -149,11 +149,8 @@ async function addTokens(config, cwd, diffMode, summary, conflictResolver) {
   if (!destRel) throw new Error("paths.tokens 가 설정에 없습니다.");
   const dest = resolve(cwd, destRel);
 
-  const { buildTokensCss, buildTokensDart } = await loadTokensBuilder();
-  const content =
-    config.platform === "react"
-      ? await buildTokensCss(config)
-      : await buildTokensDart(config);
+  const { buildTokens } = await loadTokensBuilder();
+  const content = await buildTokens(config);
 
   const result = await writeOrDiff({ dest, content, cwd, diffMode, summary, conflictResolver });
   if (!diffMode && result !== "unchanged") {
@@ -163,6 +160,31 @@ async function addTokens(config, cwd, diffMode, summary, conflictResolver) {
   }
 }
 
+/**
+ * registry 엔트리의 frameworks 필드와 현재 cssFramework 가 호환되는지.
+ * 필드가 없으면 "모든 프레임워크에 적용" — 기본 케이스.
+ */
+function frameworkMatches(entry, cssFramework) {
+  if (!entry.frameworks) return true;
+  return entry.frameworks.includes(cssFramework);
+}
+
+/**
+ * cssFramework="tailwind" 인데 컴포넌트에 tailwind 전용 변종 파일이 없으면
+ * plain 으로 fallback. plain CSS 컴포넌트도 @theme inline 브리지 덕분에
+ * Tailwind v4 프로젝트에서 그대로 동작하므로 깨지지 않음.
+ *
+ * 점진적 rollout 전략 — 모든 컴포넌트가 한 번에 tailwind 변종을 갖출 필요 없이
+ * 가능한 것부터 utility-class 변종을 제공하고, 나머지는 plain 으로 자연 처리.
+ */
+function effectiveFramework(entry, cssFramework) {
+  if (cssFramework !== "tailwind") return cssFramework;
+  const hasTailwindVariant = (entry.files ?? []).some(
+    (f) => f.frameworks && f.frameworks.includes("tailwind"),
+  );
+  return hasTailwindVariant ? "tailwind" : "plain";
+}
+
 async function addComponent(name, config, cwd, installed, pendingDeps, diffMode, summary, conflictResolver) {
   const registryRoot = getRegistryRoot(config.platform);
   const registry = JSON.parse(
@@ -175,11 +197,30 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
     );
   }
 
+  const requestedFw = config.cssFramework ?? "plain";
+  const cssFramework = effectiveFramework(entry, requestedFw);
+
+  // 사용자가 tailwind 를 골랐는데 이 컴포넌트는 plain 으로 fallback 된 경우 한 줄 알림.
+  // 동작에 문제는 없지만 일관성에 대한 기대를 정확히 셋업하기 위함.
+  if (requestedFw === "tailwind" && cssFramework === "plain" && !diffMode) {
+    console.log(
+      `ℹ ${name} — Tailwind 변종 미제공, plain 변종으로 설치 (Tailwind v4 환경에서 그대로 동작)`,
+    );
+  }
+
+  if (!frameworkMatches(entry, cssFramework)) {
+    console.log(
+      `↷ ${name} skipped — cssFramework=${cssFramework} 미지원 (지원: ${entry.frameworks.join(", ")})`,
+    );
+    return;
+  }
+
   for (const dep of entry.registryDependencies ?? []) {
     await addOne(dep, config, cwd, installed, pendingDeps, diffMode, summary, conflictResolver);
   }
 
   for (const file of entry.files) {
+    if (!frameworkMatches(file, cssFramework)) continue;
     const src = resolve(registryRoot, file.src);
     const dest = resolve(cwd, resolveDest(file.dest, config));
     const content = await readFile(src, "utf8");
@@ -192,7 +233,14 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
   }
 
   for (const dep of entry.dependencies ?? []) {
-    pendingDeps.add(dep);
+    // dep 은 string ("react-hook-form") 또는 object ({name, frameworks?: string[]}).
+    // 후자는 cssFramework 에 따라 의존성을 분기 (예: cva 는 tailwind 변종에만 필요).
+    if (typeof dep === "string") {
+      pendingDeps.add(dep);
+    } else if (dep && typeof dep === "object" && dep.name) {
+      if (dep.frameworks && !dep.frameworks.includes(cssFramework)) continue;
+      pendingDeps.add(dep.name);
+    }
   }
 }
 

package/src/api.d.ts

@@ -10,18 +10,32 @@ export type ThemeBase = 'neutral' | 'zinc' | 'slate';
 export type ThemeRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type ThemeMode = 'light-dark' | 'light' | 'dark';
 
+/** 현재 실제로 동작하는 CSS 프레임워크.
+ * - plain: 모든 컴포넌트가 plain 변종 보유.
+ * - tailwind: 일부 컴포넌트가 utility-class 변종 보유 — 미지원 컴포넌트는 add 시 plain 으로 자동 fallback. */
+export type CssFrameworkSupported = 'plain' | 'tailwind';
+/** 향후 추가 예정 — UI 에서 "곧 지원" 으로 노출되지만 CLI 는 거부. */
+export type CssFrameworkPlanned = 'css-modules' | 'vanilla-extract';
+/** 알려진 전체 (validation 메시지용). */
+export type CssFramework = CssFrameworkSupported | CssFrameworkPlanned;
+
 export const CREATE_PLATFORMS: readonly CreatePlatform[];
 export const CREATE_STRUCTURES: readonly CreateStructure[];
 export const INIT_PLATFORMS: readonly InitPlatform[];
 export const THEME_BASES: readonly ThemeBase[];
 export const THEME_RADII: readonly ThemeRadius[];
 export const THEME_MODES: readonly ThemeMode[];
+export const CSS_FRAMEWORKS_SUPPORTED: readonly CssFrameworkSupported[];
+export const CSS_FRAMEWORKS_PLANNED: readonly CssFrameworkPlanned[];
+export const CSS_FRAMEWORKS_ALL: readonly CssFramework[];
+export const CSS_FRAMEWORK_DEFAULT: CssFrameworkSupported;
 
 export const INIT_DEFAULTS: {
   platform: InitPlatform;
   base: ThemeBase;
   radius: ThemeRadius;
   mode: ThemeMode;
+  cssFramework: CssFrameworkSupported;
 };
 
 export type PluginManifest = {

package/src/api.js

@@ -16,6 +16,10 @@ export {
   THEME_RADII,
   THEME_MODES,
   INIT_DEFAULTS,
+  CSS_FRAMEWORKS_SUPPORTED,
+  CSS_FRAMEWORKS_PLANNED,
+  CSS_FRAMEWORKS_ALL,
+  CSS_FRAMEWORK_DEFAULT,
 } from './constants.js';
 
 export { allPlugins } from './create/plugins/index.js';

package/src/constants.js

@@ -21,6 +21,24 @@ export const THEME_RADII = ['none', 'sm', 'md', 'lg', 'xl', 'full'];
 
 export const THEME_MODES = ['light-dark', 'light', 'dark'];
 
+// ─── CSS 프레임워크 (변종 시스템 — 1단계: 그릇만) ───
+
+// 현재 실제로 동작하는 값.
+// - plain: CSS custom properties + 일반 .css 파일 (모든 컴포넌트 변종 보유)
+// - tailwind: utility class TSX 변종 (button/card/input 부터 시작, 점진적 확대 — 변종이 없는 컴포넌트는 add 시 plain 으로 자동 fallback)
+export const CSS_FRAMEWORKS_SUPPORTED = ['plain', 'tailwind'];
+
+// 향후 추가 예정. 사용자가 이 값을 주면 친절 에러로 안내.
+export const CSS_FRAMEWORKS_PLANNED = ['css-modules', 'vanilla-extract'];
+
+// 알려진 전체 — 검증 시 supported 와 planned 둘 다 인지하기 위함.
+export const CSS_FRAMEWORKS_ALL = [
+  ...CSS_FRAMEWORKS_SUPPORTED,
+  ...CSS_FRAMEWORKS_PLANNED,
+];
+
+export const CSS_FRAMEWORK_DEFAULT = 'plain';
+
 // ─── 기본값 ───
 
 export const INIT_DEFAULTS = {
@@ -28,4 +46,5 @@ export const INIT_DEFAULTS = {
   base: 'neutral',
   radius: 'md',
   mode: 'light-dark',
+  cssFramework: CSS_FRAMEWORK_DEFAULT,
 };

package/src/create/cli-args.js

@@ -1,11 +1,16 @@
-import { CREATE_PLATFORMS, CREATE_STRUCTURES } from '../constants.js';
+import {
+  CREATE_PLATFORMS,
+  CREATE_STRUCTURES,
+  CSS_FRAMEWORKS_SUPPORTED,
+  CSS_FRAMEWORKS_PLANNED,
+} from '../constants.js';
 import { allPlugins } from './plugins/index.js';
 
 const VALID_PLATFORMS = CREATE_PLATFORMS;
 const VALID_STRUCTURES = CREATE_STRUCTURES;
 const VALID_PLUGINS = allPlugins.map((p) => p.name);
 
-const VALUE_FLAGS = ['platform', 'structure', 'plugins', 'theme', 'app'];
+const VALUE_FLAGS = ['platform', 'structure', 'plugins', 'theme', 'app', 'css'];
 const BOOL_FLAGS = ['yes', 'help', 'dry-run'];
 
 const SUBCOMMANDS = ['add-app', 'add-component'];
@@ -63,6 +68,17 @@ export const parseArgs = (argv) => {
     if (name === 'structure' && !VALID_STRUCTURES.includes(value)) {
       throw new Error(`--structure 는 ${VALID_STRUCTURES.join('/')} 중 하나여야 함 (받은 값: ${value})`);
     }
+    if (name === 'css' && !CSS_FRAMEWORKS_SUPPORTED.includes(value)) {
+      // planned 값은 '곧 옵니다' 신호로 분기 — 사용자 의도가 더 명확히 전달.
+      if (CSS_FRAMEWORKS_PLANNED.includes(value)) {
+        throw new Error(
+          `--css='${value}' 는 곧 지원 예정. 현재는 ${CSS_FRAMEWORKS_SUPPORTED.join(', ')} 만 가능.`,
+        );
+      }
+      throw new Error(
+        `--css 는 ${CSS_FRAMEWORKS_SUPPORTED.join('/')} 중 하나여야 함 (받은 값: ${value})`,
+      );
+    }
     flags[name] = value;
   }
 

package/src/create/generator.js

@@ -32,9 +32,28 @@ import {
   buildDartGradientsBlock,
 } from './theme/inject.js';
 import { getTemplatesRoot } from '../paths.mjs';
+import {
+  CSS_FRAMEWORK_DEFAULT,
+  CSS_FRAMEWORKS_SUPPORTED,
+  CSS_FRAMEWORKS_PLANNED,
+} from '../constants.js';
 
 const TEMPLATES_DIR = getTemplatesRoot();
 
+/**
+ * 템플릿 복사 직후 sh-ui.config.json 의 cssFramework 필드를 갱신.
+ * 템플릿엔 이미 기본값이 박혀 있지만, 사용자가 --css 로 다른 값을 지정한
+ * 경우 그 값으로 덮어쓴다. 1단계는 plain 만 지원하므로 사실상 idempotent
+ * 이지만 2단계 emitter 가 추가되면 이 한 호출만으로 곧바로 동작.
+ */
+async function patchShUiConfig(configPath, cssFramework) {
+  const fw = cssFramework ?? CSS_FRAMEWORK_DEFAULT;
+  if (!(await fs.pathExists(configPath))) return;
+  const config = await fs.readJson(configPath);
+  config.cssFramework = fw;
+  await fs.writeJson(configPath, config, { spaces: 2 });
+}
+
 // ─── Create new project ───
 
 // 비대화형 환경(TTY 없음 — 에이전트, CI, 파이프) 에서는 prompt 가 멈추므로
@@ -71,6 +90,33 @@ export async function createProject(options = {}) {
     ],
   });
 
+  // CSS 프레임워크 — 현재는 plain 만 지원하지만, 곧 추가될 옵션을 disabled 로
+  // 미리 노출해 사용자가 변종 시스템의 존재를 인지할 수 있게 한다.
+  // Flutter 는 CSS 프레임워크 개념이 무의미하므로 자동 plain.
+  let cssFramework = options.css ?? CSS_FRAMEWORK_DEFAULT;
+  if (
+    options.css == null &&
+    platform !== 'flutter' &&
+    process.stdin.isTTY &&
+    !options.yes
+  ) {
+    cssFramework = await select({
+      message: 'CSS 프레임워크:',
+      default: CSS_FRAMEWORK_DEFAULT,
+      choices: [
+        ...CSS_FRAMEWORKS_SUPPORTED.map((fw) => ({
+          name: `${fw} — 플레인 CSS + custom properties`,
+          value: fw,
+        })),
+        ...CSS_FRAMEWORKS_PLANNED.map((fw) => ({
+          name: fw,
+          value: fw,
+          disabled: '곧 지원',
+        })),
+      ],
+    });
+  }
+
   let theme = null;
   if (options.theme) {
     theme = resolveTheme(options.theme);
@@ -114,7 +160,7 @@ export async function createProject(options = {}) {
   }
 
   if (platform === 'flutter') {
-    await generateFlutter(targetDir, projectName, theme);
+    await generateFlutter(targetDir, projectName, theme, cssFramework);
     await finalizeProject(targetDir, { dryRun: options.dryRun });
     console.log(`\n✅ ${projectName} Flutter 프로젝트가 생성되었습니다!`);
     console.log(`\n  cd ${projectName}`);
@@ -140,9 +186,9 @@ export async function createProject(options = {}) {
   plugins.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
 
   if (projectType === 'standalone') {
-    await generateStandalone(targetDir, projectName, plugins, theme);
+    await generateStandalone(targetDir, projectName, plugins, theme, cssFramework);
   } else {
-    await generateMonorepo(targetDir, projectName, plugins, { yes: options.yes, theme });
+    await generateMonorepo(targetDir, projectName, plugins, { yes: options.yes, theme, css: cssFramework });
   }
 
   await finalizeProject(targetDir, { dryRun: options.dryRun });
@@ -302,13 +348,14 @@ export async function addComponent(componentName, appName) {
 
 // ─── Generators ───
 
-async function generateFlutter(targetDir, projectName, theme) {
+async function generateFlutter(targetDir, projectName, theme, css) {
   await fs.copy(path.join(TEMPLATES_DIR, 'flutter-standalone'), targetDir);
   await replaceInAllFiles(targetDir, '{{project_name}}', projectName);
   await injectDartTheme(targetDir, theme);
+  await patchShUiConfig(path.join(targetDir, 'sh-ui.config.json'), css);
 }
 
-async function generateStandalone(targetDir, projectName, plugins, theme) {
+async function generateStandalone(targetDir, projectName, plugins, theme, css) {
   await fs.copy(path.join(TEMPLATES_DIR, 'nextjs-standalone'), targetDir);
 
   // Update package.json
@@ -331,9 +378,10 @@ async function generateStandalone(targetDir, projectName, plugins, theme) {
   await composeProviders(targetDir, plugins);
   await applyTransforms(targetDir, plugins);
   await injectCssTheme(targetDir, theme);
+  await patchShUiConfig(path.join(targetDir, 'sh-ui.config.json'), css);
 }
 
-async function generateMonorepo(targetDir, projectName, plugins, { yes = false, theme } = {}) {
+async function generateMonorepo(targetDir, projectName, plugins, { yes = false, theme, css } = {}) {
   await fs.copy(path.join(TEMPLATES_DIR, 'monorepo'), targetDir);
 
   // Update root package.json
@@ -367,6 +415,7 @@ async function generateMonorepo(targetDir, projectName, plugins, { yes = false,
   await generateApp(appsDir, appName, port, plugins);
   const uiAppDir = path.join(targetDir, 'packages', 'ui', 'ui-apps', `ui-${appName}`);
   await injectCssTheme(uiAppDir, theme);
+  await patchShUiConfig(path.join(uiAppDir, 'sh-ui.config.json'), css);
 }
 
 async function generateApp(targetDir, appName, port, plugins) {

package/src/create/index.mjs

@@ -3,7 +3,7 @@
 import { parseArgs } from './cli-args.js';
 import { createProject, addApp, addComponent } from './generator.js';
 import { allPlugins } from './plugins/index.js';
-import { CREATE_PLATFORMS, CREATE_STRUCTURES } from '../constants.js';
+import { CREATE_PLATFORMS, CREATE_STRUCTURES, CSS_FRAMEWORKS_SUPPORTED } from '../constants.js';
 import { THEME_PRESET_NAMES } from './theme/presets.js';
 
 const PLUGIN_NAMES = allPlugins.map((p) => p.name);
@@ -22,6 +22,7 @@ export const HELP_TEXT = `sh-ui create — sh-ui 프로젝트 스캐폴드 (Next
   --structure <${CREATE_STRUCTURES.join('|')}>  Next.js 프로젝트 구조 (next 일 때)
   --plugins <a,b>                    플러그인 (${PLUGINS_LIST}). 미지정/"" → 없음
   --theme <preset|base64>            프리셋 이름(${THEME_PRESETS_LIST}) 또는 playground base64. 선택
+  --css <${CSS_FRAMEWORKS_SUPPORTED.join('|')}>                        CSS 프레임워크 (현재 plain만 지원, 향후 tailwind 등 추가 예정)
   --yes                              디렉토리 덮어쓰기 + 모노레포 기본값 자동 채택
   --dry-run                          파일을 쓰지 않고 작성될 파일 목록만 출력
   -h, --help                         이 도움말
@@ -70,6 +71,7 @@ export async function runCreate(rest) {
       structure: flags.structure,
       plugins: flags.plugins,
       theme: flags.theme,
+      css: flags.css,
       yes: flags.yes,
       dryRun: flags.dryRun,
     });

package/src/init.mjs

@@ -9,6 +9,8 @@ import {
   THEME_RADII,
   THEME_MODES,
   INIT_DEFAULTS,
+  CSS_FRAMEWORKS_SUPPORTED,
+  CSS_FRAMEWORKS_PLANNED,
 } from "./constants.js";
 
 const CHOICES = {
@@ -16,6 +18,7 @@ const CHOICES = {
   base: THEME_BASES,
   radius: THEME_RADII,
   mode: THEME_MODES,
+  cssFramework: CSS_FRAMEWORKS_SUPPORTED,
 };
 
 const DEFAULTS = INIT_DEFAULTS;
@@ -80,11 +83,20 @@ async function prompt(rl, label, choices, def) {
 }
 
 function validateOrThrow(key, value) {
-  if (!CHOICES[key].includes(value)) {
+  if (CHOICES[key].includes(value)) return;
+
+  // cssFramework 는 향후 지원 예정 값에 대해 별도 안내. 사용자가 "tailwind"
+  // 같은 값을 미리 시도해 보고 싶을 때, 단순한 unknown 메시지보다 "곧 옵니다"
+  // 신호가 의도를 더 잘 전달함.
+  if (key === "cssFramework" && CSS_FRAMEWORKS_PLANNED.includes(value)) {
     throw new Error(
-      `--${key}에 '${value}'는 허용되지 않습니다. 허용: ${CHOICES[key].join(", ")}`,
+      `--cssFramework='${value}'는 곧 지원 예정입니다. 현재는 ${CHOICES[key].join(", ")} 만 가능합니다.`,
     );
   }
+
+  throw new Error(
+    `--${key}에 '${value}'는 허용되지 않습니다. 허용: ${CHOICES[key].join(", ")}`,
+  );
 }
 
 /** 플래그/TTY 상태에 따라 4개 축 값을 결정. 필요한 경우에만 프롬프트. */
@@ -97,7 +109,11 @@ async function resolveAnswers(flags) {
     }
   }
 
-  const missingKeys = Object.keys(CHOICES).filter((k) => flags[k] == null);
+  // 선택지가 1개뿐인 축은 프롬프트 스킵 — 기본값으로 자동 채움.
+  // (예: cssFramework 가 plain 만일 때 의미 없는 "[plain] (plain):" 질문 회피)
+  const missingKeys = Object.keys(CHOICES).filter(
+    (k) => flags[k] == null && CHOICES[k].length > 1,
+  );
   if (flags.yes || missingKeys.length === 0) return answers;
 
   if (!stdin.isTTY) {
@@ -125,14 +141,15 @@ function labelFor(key) {
     base: "기본 색 스케일",
     radius: "radius",
     mode: "모드",
+    cssFramework: "CSS 프레임워크",
   }[key];
 }
 
-function buildConfig({ platform, base, radius, mode }) {
+function buildConfig({ platform, base, radius, mode, cssFramework }) {
   return {
     $schema: "https://your-ds.dev/sh-ui.schema.json",
     platform,
-    style: "default",
+    cssFramework,
     theme: { base, radius, mode },
     paths: PATHS[platform],
     ...(ALIASES[platform] ? { aliases: ALIASES[platform] } : {}),
@@ -153,7 +170,8 @@ export async function init({ cwd, args }) {
   await writeFile(configPath, JSON.stringify(config, null, 2) + "\n", "utf8");
 
   console.log(`\n✓ sh-ui.config.json 생성 완료`);
-  console.log(`  platform: ${answers.platform}`);
-  console.log(`  theme:    base=${answers.base}, radius=${answers.radius}, mode=${answers.mode}`);
+  console.log(`  platform:     ${answers.platform}`);
+  console.log(`  cssFramework: ${answers.cssFramework}`);
+  console.log(`  theme:        base=${answers.base}, radius=${answers.radius}, mode=${answers.mode}`);
   console.log(`\n다음 단계:  sh-ui add tokens button`);
 }

package/src/mcp.mjs

@@ -36,6 +36,7 @@ import {
   THEME_BASES,
   THEME_RADII,
   THEME_MODES,
+  CSS_FRAMEWORKS_SUPPORTED,
 } from "./constants.js";
 import { allPlugins } from "./create/plugins/index.js";
 import { THEME_PRESET_NAMES } from "./create/theme/presets.js";
@@ -44,6 +45,7 @@ const PLATFORMS = INIT_PLATFORMS;
 const BASES = THEME_BASES;
 const RADII = THEME_RADII;
 const MODES = THEME_MODES;
+const CSS_FRAMEWORKS = CSS_FRAMEWORKS_SUPPORTED;
 const PLUGIN_NAMES = allPlugins.map((p) => p.name);
 const THEME_PRESETS_LIST = THEME_PRESET_NAMES.join(", ");
 
@@ -70,6 +72,10 @@ const INIT_DESCRIPTIONS = {
     light: "라이트 전용",
     dark: "다크 전용",
   },
+  cssFramework: {
+    plain: "플레인 CSS — CSS custom properties + 일반 .css 파일 (모든 컴포넌트 지원)",
+    tailwind: "Tailwind v4 utility class — class-variance-authority 기반. 변종 미제공 컴포넌트는 plain 으로 자동 fallback",
+  },
 };
 
 /** stdout 으로 출력되는 console.* 호출을 버퍼에 캡처해 텍스트로 반환. */
@@ -146,7 +152,7 @@ const SERVER_INSTRUCTIONS = `sh-ui — Base UI 위에 빌드된 React/Flutter
 
 export async function startMcpServer() {
   const server = new McpServer(
-    { name: "sh-ui", version: "0.23.1" }, // sh-ui-cli 와 동기화
+    { name: "sh-ui", version: "0.44.0" }, // sh-ui-cli 와 동기화
     {
       capabilities: { tools: {} },
       instructions: SERVER_INSTRUCTIONS,
@@ -181,6 +187,8 @@ export async function startMcpServer() {
           .describe(`Next.js 플러그인 (${PLUGIN_NAMES.join(', ')}). 미지정시 빈 배열`),
         theme: z.string().optional()
           .describe(`프리셋 이름 (${THEME_PRESETS_LIST}) 또는 playground 에서 생성한 base64 (선택)`),
+        cssFramework: z.enum(CSS_FRAMEWORKS).optional()
+          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 (향후 tailwind 등 추가 예정)`),
         cwd: z.string().optional()
           .describe("부모 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()
@@ -222,6 +230,7 @@ export async function startMcpServer() {
             structure: input.structure,
             plugins: input.plugins,
             theme: input.theme,
+            css: input.cssFramework,
             yes: true, // 사전 검사를 마쳤으니 generator 의 confirm 프롬프트 우회
           }),
         );
@@ -249,6 +258,8 @@ export async function startMcpServer() {
           .describe("기본 radius. 기본 md"),
         mode: z.enum(MODES).optional()
           .describe("색 모드. 기본 light-dark"),
+        cssFramework: z.enum(CSS_FRAMEWORKS).optional()
+          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 (향후 tailwind 등 추가 예정)`),
         cwd: z.string().optional()
           .describe("작업 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()
@@ -257,7 +268,7 @@ export async function startMcpServer() {
     },
     async (input) => {
       const args = ["--yes"];
-      for (const k of ["platform", "base", "radius", "mode"]) {
+      for (const k of ["platform", "base", "radius", "mode", "cssFramework"]) {
         if (input[k]) args.push(`--${k}`, input[k]);
       }
       if (input.force) args.push("--force");

package/templates/flutter-standalone/sh-ui.config.json

@@ -1,6 +1,6 @@
 {
   "platform": "flutter",
-  "style": "default",
+  "cssFramework": "plain",
   "theme": {
     "base": "neutral",
     "radius": "md",

package/templates/nextjs-standalone/app/globals.css

@@ -3,27 +3,7 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-  --color-background: var(--background);
-  --color-background-subtle: var(--background-subtle);
-  --color-background-muted: var(--background-muted);
-  --color-background-inverse: var(--background-inverse);
-  --color-foreground: var(--foreground);
-  --color-foreground-muted: var(--foreground-muted);
-  --color-foreground-subtle: var(--foreground-subtle);
-  --color-foreground-inverse: var(--foreground-inverse);
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary-hover: var(--primary-hover);
-  --color-danger: var(--danger);
-  --color-danger-foreground: var(--danger-foreground);
-  --radius-sm: calc(var(--radius) - 2px);
-  --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+/* Tailwind v4 @theme inline 블록은 tokens.css 가 자동으로 emit. */
 
 @layer base {
   body {

package/templates/nextjs-standalone/sh-ui.config.json

@@ -1,6 +1,6 @@
 {
   "platform": "react",
-  "style": "default",
+  "cssFramework": "plain",
   "theme": {
     "base": "neutral",
     "radius": "md",

package/templates/ui-app-template/sh-ui.config.json

@@ -1,6 +1,6 @@
 {
   "platform": "react",
-  "style": "default",
+  "cssFramework": "plain",
   "theme": {
     "base": "neutral",
     "radius": "md",