sh-ui-cli 0.42.0 → 0.43.0

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.43.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",

package/templates/ui-app-template/src/styles/globals.css

@@ -7,27 +7,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 {