sh-ui-cli 0.38.0 → 0.39.0

package/data/changelog/versions.json

@@ -2,6 +2,23 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.39.0",
+      "date": "2026-04-29",
+      "title": "프리셋 정체성 강화 — slate / rose / violet 이 typography·controls·borders 도 차별화",
+      "type": "minor",
+      "highlights": [
+        "0.38.0 까지 5 프리셋이 색·radius 만 차별화 → 이제 typography·controls·borders 까지 프리셋 별 인상이 다름. neutral / emerald 는 디폴트 baseline (변화 없음), 나머지 셋은 정체성 부여",
+        "**slate** (정보 밀도) — text-base 14px (xs 11/sm 12/lg 16/xl 18/2xl 21/3xl 26/4xl 32), control-md 36px (sm 28/lg 44). 대시보드/관리자 인상",
+        "**rose** (친근·여유) — control-md 44px (sm 36/lg 52). 큼직한 터치 타겟 + 0.75rem 라운드 → 소비자 앱 인상",
+        "**violet** (모던·또렷) — control-md 42px (sm 34/lg 50), border-width-strong 3px (디폴트 2px). 약간 두꺼운 강조 보더로 창의·디자인 도구 인상",
+        "getThemePreset 시그니처 — 이전 `{light, dark, radius}` 만 → 이제 label 빼고 모든 카테고리 forward. CLI inject 가 자동으로 마커 섹션 교체",
+        "api.d.ts ThemePreset 인터페이스에 옵셔널 카테고리 6종 추가 (typography/controls/borders/spacing/weights/durations) — apps/docs 등 외부 사용자가 타입 안전",
+        "테스트 111개 (전 104 → +7). end-to-end 검증 — `--theme rose` 가 control-md 40 → 44 로 덮어쓰는지, `--theme slate` 가 text-base 16 → 14 로, `--theme violet` 이 border-width-strong 2 → 3 으로",
+        "참고: 기존 사용자가 0.38.0 까지 `--theme rose` 로 만든 프로젝트는 영향 없음 (이미 생성된 tokens.css 는 그대로). 새로 `--theme rose` 하면 0.39.0 정체성 그대로 들어감"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.39.0"
+    },
     {
       "version": "0.38.0",
       "date": "2026-04-29",

package/package.json

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

package/src/api.d.ts

@@ -60,6 +60,13 @@ export interface ThemePreset {
   dark: Record<ThemeTokenKey, string>;
   /** rem 단위 (0~1.5). */
   radius: number;
+  /** v0.39.0+ — 프리셋 별 정체성 차별화 (옵셔널). decode.js SCALAR_CATEGORIES 와 동일 키. */
+  typography?: Record<string, number>;
+  controls?: Record<string, number>;
+  borders?: Record<string, number>;
+  spacing?: Record<string, number>;
+  weights?: Record<string, number>;
+  durations?: Record<string, number>;
 }
 
 export const THEME_PRESETS: Record<ThemePresetName, ThemePreset>;

package/src/create/theme/presets.js

@@ -50,7 +50,7 @@ export const THEME_PRESETS = {
     radius: 0.5,
   },
   slate: {
-    label: '슬레이트 — 차분한 슬레이트 + 인디고',
+    label: '슬레이트 — 차분한 슬레이트 + 인디고 (정보 밀도)',
     light: {
       'background': '#FFFFFF',
       'background-subtle': '#F8FAFC',
@@ -86,9 +86,12 @@ export const THEME_PRESETS = {
       'danger-foreground': '#450A0A',
     },
     radius: 0.375,
+    // 정보 밀도 ↑ — 본문 14px 부터, 컨트롤 36px (대시보드/관리자 인상)
+    typography: { xs: 11, sm: 12, base: 14, lg: 16, xl: 18, '2xl': 21, '3xl': 26, '4xl': 32 },
+    controls: { sm: 28, md: 36, lg: 44 },
   },
   rose: {
-    label: '로즈 — 핑크 강조 + 둥근 모서리',
+    label: '로즈 — 핑크 강조 + 둥근 모서리 (친근·여유)',
     light: {
       ...NEUTRAL_LIGHT,
       'primary': '#E11D48',
@@ -102,6 +105,8 @@ export const THEME_PRESETS = {
       'primary-hover': '#FDA4AF',
     },
     radius: 0.75,
+    // 큰 모서리 + 큼직한 컨트롤 — 소비자 앱 / 캐주얼 인상
+    controls: { sm: 36, md: 44, lg: 52 },
   },
   emerald: {
     label: '에메랄드 — 그린 강조',
@@ -120,7 +125,7 @@ export const THEME_PRESETS = {
     radius: 0.5,
   },
   violet: {
-    label: '바이올렛 — 퍼플 강조 + 살짝 라운드',
+    label: '바이올렛 — 퍼플 강조 + 살짝 라운드 (모던·또렷)',
     light: {
       ...NEUTRAL_LIGHT,
       'primary': '#7C3AED',
@@ -134,14 +139,22 @@ export const THEME_PRESETS = {
       'primary-hover': '#C4B5FD',
     },
     radius: 0.625,
+    // 살짝 큰 컨트롤 + 진한 강조 보더 (creative/디자인 도구 인상)
+    controls: { sm: 34, md: 42, lg: 50 },
+    borders: { width: 1, widthStrong: 3 },
   },
 };
 
 export const THEME_PRESET_NAMES = Object.keys(THEME_PRESETS);
 
-/** 프리셋 객체에서 inject 가 기대하는 ThemeConfig 형태(light/dark/radius)만 추출 */
+/**
+ * 프리셋 객체에서 ThemeConfig 형태로 변환 — 사용자에게 보이는 label 빼고 모두 forward.
+ * v0.39.0 부터 light/dark/radius 외에 옵셔널 카테고리(typography/controls/borders/...)
+ * 도 그대로 전달돼 CLI inject 가 카테고리별 마커 섹션을 교체한다.
+ */
 export const getThemePreset = (name) => {
   const preset = THEME_PRESETS[name];
   if (!preset) return null;
-  return { light: preset.light, dark: preset.dark, radius: preset.radius };
+  const { label: _label, ...themeConfig } = preset;
+  return themeConfig;
 };