sh-ui-cli 0.34.0 → 0.39.0

package/src/create/theme/inject.js

@@ -56,40 +56,32 @@ const toDartColor = (hex) => `Color(0xFF${hex.replace('#', '').toUpperCase()})`;
  *   inverse — 반대 모드의 편집값
  *   default — playground 가 노출하지 않음, 고정 기본값 사용
  */
+/**
+ * Dart ShUiColorTokens 필드 매핑. v0.37.0 부터 background-inverse / foreground-inverse /
+ * foreground-subtle 도 사용자가 직접 잡으므로 모두 self 룩업.
+ */
 const DART_FIELD_SOURCES = [
-  { field: 'background',           source: { kind: 'self', key: 'background' } },
-  { field: 'backgroundSubtle',     source: { kind: 'self', key: 'background-subtle' } },
-  { field: 'backgroundMuted',      source: { kind: 'self', key: 'background-muted' } },
-  { field: 'backgroundInverse',    source: { kind: 'inverse', key: 'background' } },
-  { field: 'foreground',           source: { kind: 'self', key: 'foreground' } },
-  { field: 'foregroundMuted',      source: { kind: 'self', key: 'foreground-muted' } },
-  { field: 'foregroundSubtle',     source: { kind: 'default' } },
-  { field: 'foregroundInverse',    source: { kind: 'inverse', key: 'foreground' } },
-  { field: 'border',               source: { kind: 'self', key: 'border' } },
-  { field: 'borderStrong',         source: { kind: 'self', key: 'border-strong' } },
-  { field: 'primary',              source: { kind: 'self', key: 'primary' } },
-  { field: 'primaryForeground',    source: { kind: 'self', key: 'primary-foreground' } },
-  { field: 'primaryHover',         source: { kind: 'self', key: 'primary-hover' } },
-  { field: 'danger',               source: { kind: 'self', key: 'danger' } },
-  { field: 'dangerForeground',     source: { kind: 'self', key: 'danger-foreground' } },
+  { field: 'background',           key: 'background' },
+  { field: 'backgroundSubtle',     key: 'background-subtle' },
+  { field: 'backgroundMuted',      key: 'background-muted' },
+  { field: 'backgroundInverse',    key: 'background-inverse' },
+  { field: 'foreground',           key: 'foreground' },
+  { field: 'foregroundMuted',      key: 'foreground-muted' },
+  { field: 'foregroundSubtle',     key: 'foreground-subtle' },
+  { field: 'foregroundInverse',    key: 'foreground-inverse' },
+  { field: 'border',               key: 'border' },
+  { field: 'borderStrong',         key: 'border-strong' },
+  { field: 'primary',              key: 'primary' },
+  { field: 'primaryForeground',    key: 'primary-foreground' },
+  { field: 'primaryHover',         key: 'primary-hover' },
+  { field: 'danger',               key: 'danger' },
+  { field: 'dangerForeground',     key: 'danger-foreground' },
 ];
 
-const DART_DEFAULTS = {
-  light: { foregroundSubtle: '0xFFA3A3A3' },
-  dark:  { foregroundSubtle: '0xFF737373' },
-};
-
-const buildDartStaticConst = (mode, self, opposite) => {
-  const lines = DART_FIELD_SOURCES.map(({ field, source }) => {
-    switch (source.kind) {
-      case 'self':
-        return `    ${field}: ${toDartColor(self[source.key])},`;
-      case 'inverse':
-        return `    ${field}: ${toDartColor(opposite[source.key])},`;
-      case 'default':
-        return `    ${field}: Color(${DART_DEFAULTS[mode][field]}),`;
-    }
-  }).join('\n');
+const buildDartStaticConst = (mode, self) => {
+  const lines = DART_FIELD_SOURCES.map(({ field, key }) =>
+    `    ${field}: ${toDartColor(self[key])},`,
+  ).join('\n');
   return [
     `  static const ${mode} = ShUiColorTokens(`,
     lines,
@@ -99,9 +91,9 @@ const buildDartStaticConst = (mode, self, opposite) => {
 
 export const buildDartColorsBlock = (theme) => {
   return [
-    buildDartStaticConst('light', theme.light, theme.dark),
+    buildDartStaticConst('light', theme.light),
     '',
-    buildDartStaticConst('dark', theme.dark, theme.light),
+    buildDartStaticConst('dark', theme.dark),
   ].join('\n');
 };
 
@@ -109,3 +101,295 @@ export const buildDartRadiusBlock = (theme) => {
   const px = (theme.radius * 16).toFixed(1);
   return `    defaultRadius: ${px},`;
 };
+
+// ─── 옵셔널 카테고리 빌더 (Phase 2) ───
+//
+// 모두 마커 사이에 들어갈 본문만 만든다. CSS 는 변수 선언 N줄, Dart 는 필드 N줄.
+
+/* --- spacing --- */
+
+const SPACING_KEYS = ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'];
+
+export const buildCssSpacingBlock = (spacing) =>
+  SPACING_KEYS.map((k) => `  --space-${k}: ${spacing[k]}px;`).join('\n');
+
+export const buildDartSpacingBlock = (spacing) =>
+  SPACING_KEYS.map((k) => `    s${k}: ${spacing[k].toFixed(1)},`).join('\n');
+
+/* --- typography --- */
+
+const TYPOGRAPHY_KEYS = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'];
+
+export const buildCssTypographyBlock = (typography) =>
+  TYPOGRAPHY_KEYS.map((k) => `  --text-${k}: ${typography[k]}px;`).join('\n');
+
+// Dart 클래스는 'xl2'/'xl3'/'xl4' 명명 규칙 사용 (숫자 prefix 회피).
+const DART_TEXT_FIELD_NAMES = {
+  xs: 'xs', sm: 'sm', base: 'base', lg: 'lg', xl: 'xl',
+  '2xl': 'xl2', '3xl': 'xl3', '4xl': 'xl4',
+};
+
+export const buildDartTypographyBlock = (typography) =>
+  TYPOGRAPHY_KEYS
+    .map((k) => `    ${DART_TEXT_FIELD_NAMES[k]}: ${typography[k].toFixed(1)},`)
+    .join('\n');
+
+/* --- weights --- */
+
+const WEIGHT_KEYS = ['regular', 'medium', 'semibold', 'bold'];
+
+export const buildCssWeightsBlock = (weights) =>
+  WEIGHT_KEYS.map((k) => `  --weight-${k}: ${weights[k]};`).join('\n');
+
+export const buildDartWeightsBlock = (weights) =>
+  WEIGHT_KEYS.map((k) => `    ${k}: FontWeight.w${weights[k]},`).join('\n');
+
+/* --- controls --- */
+
+const CONTROL_KEYS = ['sm', 'md', 'lg'];
+
+export const buildCssControlsBlock = (controls) =>
+  CONTROL_KEYS.map((k) => `  --control-${k}: ${controls[k]}px;`).join('\n');
+
+export const buildDartControlsBlock = (controls) =>
+  CONTROL_KEYS.map((k) => `    ${k}: ${controls[k].toFixed(1)},`).join('\n');
+
+/* --- borders --- */
+
+export const buildCssBordersBlock = (borders) => [
+  `  --border-width: ${borders.width}px;`,
+  `  --border-width-strong: ${borders.widthStrong}px;`,
+].join('\n');
+
+export const buildDartBordersBlock = (borders) => [
+  `    normal: ${borders.width.toFixed(1)},`,
+  `    strong: ${borders.widthStrong.toFixed(1)},`,
+].join('\n');
+
+/* --- durations --- */
+
+const DURATION_KEYS = ['fast', 'base', 'slow'];
+
+export const buildCssDurationsBlock = (durations) =>
+  DURATION_KEYS.map((k) => `  --duration-${k}: ${durations[k]}ms;`).join('\n');
+
+export const buildDartDurationsBlock = (durations) =>
+  DURATION_KEYS
+    .map((k) => `    ${k}: Duration(milliseconds: ${Math.round(durations[k])}),`)
+    .join('\n');
+
+// ─── Phase 3 — string 카테고리: shadow / ease / gradient ───
+//
+// CSS 측은 사용자가 입력한 문자열을 거의 그대로 흘려보내고, Dart 측은 파서를 거쳐
+// BoxShadow / Cubic / LinearGradient 로 변환. 파서는 형식 위배 시 throw.
+
+/* --- 공통 유틸 --- */
+
+/** 괄호 깊이 0 인 위치에서만 콤마로 split. rgba(0,0,0,0.5) 같은 것을 보호. */
+const splitTopLevelByComma = (str) => {
+  const parts = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (c === '(') depth++;
+    else if (c === ')') depth--;
+    else if (c === ',' && depth === 0) {
+      parts.push(str.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  parts.push(str.slice(start).trim());
+  return parts.filter(Boolean);
+};
+
+/** 공백 split — 단 괄호 안은 그룹 유지. */
+const tokenizeSpaceAware = (str) => {
+  const tokens = [];
+  let depth = 0, start = 0;
+  const flush = (end) => {
+    const t = str.slice(start, end).trim();
+    if (t) tokens.push(t);
+  };
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (c === '(') depth++;
+    else if (c === ')') depth--;
+    else if (/\s/.test(c) && depth === 0) {
+      flush(i);
+      start = i + 1;
+    }
+  }
+  flush(str.length);
+  return tokens;
+};
+
+const cssLengthToPx = (s, ctx) => {
+  const m = s.match(/^(-?[\d.]+)(?:px)?$/);
+  if (!m) throw new Error(`${ctx}: 길이 단위 오류 — '${s}'`);
+  return parseFloat(m[1]);
+};
+
+/** CSS color → { r, g, b, a } (a ∈ 0..255). #RRGGBB / #RRGGBBAA / rgb() / rgba() 지원. */
+const parseCssColor = (s, ctx) => {
+  if (s.startsWith('#')) {
+    const hex = s.slice(1);
+    if (hex.length === 6) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: 0xff,
+      };
+    }
+    if (hex.length === 8) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: parseInt(hex.slice(6, 8), 16),
+      };
+    }
+    throw new Error(`${ctx}: hex 색은 #RRGGBB 또는 #RRGGBBAA 만 지원 — '${s}'`);
+  }
+  const m = s.match(/^rgba?\(\s*([^)]+)\)$/);
+  if (m) {
+    const parts = m[1].split(',').map((p) => p.trim());
+    if (parts.length < 3 || parts.length > 4) {
+      throw new Error(`${ctx}: rgb/rgba 인자 수 오류 — '${s}'`);
+    }
+    const r = parseInt(parts[0], 10);
+    const g = parseInt(parts[1], 10);
+    const b = parseInt(parts[2], 10);
+    const a = parts[3] !== undefined ? Math.round(parseFloat(parts[3]) * 255) : 0xff;
+    if ([r, g, b, a].some((n) => Number.isNaN(n))) {
+      throw new Error(`${ctx}: rgb/rgba 숫자 파싱 실패 — '${s}'`);
+    }
+    return { r, g, b, a };
+  }
+  throw new Error(`${ctx}: 색 형식 미지원 (#hex / rgb() / rgba() 만) — '${s}'`);
+};
+
+const colorToARGBHex = ({ a, r, g, b }) => {
+  const v = (((a & 0xff) << 24) | ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff)) >>> 0;
+  return v.toString(16).toUpperCase().padStart(8, '0');
+};
+
+/* --- shadow --- */
+
+const SHADOW_KEYS = ['sm', 'md', 'lg', 'xl'];
+
+export const buildCssShadowsBlock = (shadows) =>
+  SHADOW_KEYS.map((k) => `  --shadow-${k}: ${shadows[k]};`).join('\n');
+
+const parseSingleBoxShadow = (s) => {
+  const tokens = tokenizeSpaceAware(s);
+  if (tokens.length < 4 || tokens.length > 5) {
+    throw new Error(`shadow: 토큰 수 4~5 (offset-x offset-y blur [spread] color) — '${s}'`);
+  }
+  const offsetX = cssLengthToPx(tokens[0], 'shadow.offset-x');
+  const offsetY = cssLengthToPx(tokens[1], 'shadow.offset-y');
+  const blur = cssLengthToPx(tokens[2], 'shadow.blur');
+  let spread = 0;
+  let colorStr;
+  if (tokens.length === 4) {
+    colorStr = tokens[3];
+  } else {
+    spread = cssLengthToPx(tokens[3], 'shadow.spread');
+    colorStr = tokens[4];
+  }
+  const color = parseCssColor(colorStr, 'shadow.color');
+  return { offsetX, offsetY, blur, spread, color };
+};
+
+export const cssShadowToDartList = (cssValue) => {
+  const items = splitTopLevelByComma(cssValue).map(parseSingleBoxShadow);
+  const dartItems = items.map((it) => {
+    const hex = colorToARGBHex(it.color);
+    return `BoxShadow(offset: Offset(${it.offsetX.toFixed(1)}, ${it.offsetY.toFixed(1)}), blurRadius: ${it.blur.toFixed(1)}, spreadRadius: ${it.spread.toFixed(1)}, color: Color(0x${hex}))`;
+  });
+  return `<BoxShadow>[${dartItems.join(', ')}]`;
+};
+
+export const buildDartShadowsBlock = (shadows) =>
+  SHADOW_KEYS.map((k) => `    ${k}: ${cssShadowToDartList(shadows[k])},`).join('\n');
+
+/* --- ease --- */
+
+const EASE_KEYS = ['standard', 'emphasized'];
+
+const NAMED_EASES = {
+  linear: [0, 0, 1, 1],
+  ease: [0.25, 0.1, 0.25, 1],
+  'ease-in': [0.42, 0, 1, 1],
+  'ease-out': [0, 0, 0.58, 1],
+  'ease-in-out': [0.42, 0, 0.58, 1],
+};
+
+export const buildCssEasesBlock = (eases) =>
+  EASE_KEYS.map((k) => `  --ease-${k}: ${eases[k]};`).join('\n');
+
+export const cssEaseToDartCubic = (cssValue) => {
+  const trimmed = cssValue.trim();
+  if (NAMED_EASES[trimmed]) {
+    const [x1, y1, x2, y2] = NAMED_EASES[trimmed];
+    return `Cubic(${x1}, ${y1}, ${x2}, ${y2})`;
+  }
+  const m = trimmed.match(/^cubic-bezier\(([^)]+)\)$/);
+  if (!m) throw new Error(`ease: cubic-bezier(...) 또는 named easing 만 — '${cssValue}'`);
+  const nums = m[1].split(',').map((s) => parseFloat(s.trim()));
+  if (nums.length !== 4 || nums.some((n) => Number.isNaN(n))) {
+    throw new Error(`ease: cubic-bezier 인자 4개 숫자 필요 — '${cssValue}'`);
+  }
+  return `Cubic(${nums.join(', ')})`;
+};
+
+export const buildDartEasesBlock = (eases) =>
+  EASE_KEYS.map((k) => `    ${k}: ${cssEaseToDartCubic(eases[k])},`).join('\n');
+
+/* --- gradient --- */
+
+const GRADIENT_KEYS = ['primary', 'surface', 'overlay'];
+
+export const buildCssGradientsBlock = (gradients) =>
+  GRADIENT_KEYS.map((k) => `  --gradient-${k}: ${gradients[k]};`).join('\n');
+
+/**
+ * CSS gradient 의 deg → Flutter Alignment(begin, end).
+ * CSS 0deg=위쪽, 시계방향. Flutter Alignment 의 +y 는 아래.
+ */
+const angleToBeginEnd = (deg) => {
+  const rad = (deg * Math.PI) / 180;
+  const ex = Math.sin(rad);
+  const ey = -Math.cos(rad);
+  const round3 = (v) => parseFloat(v.toFixed(3));
+  return {
+    begin: [round3(-ex), round3(-ey)],
+    end: [round3(ex), round3(ey)],
+  };
+};
+
+export const cssGradientToDartLinear = (cssValue) => {
+  const trimmed = cssValue.trim();
+  const m = trimmed.match(/^linear-gradient\(([\s\S]+)\)$/);
+  if (!m) throw new Error(`gradient: linear-gradient(...) 만 — '${cssValue}'`);
+  const parts = splitTopLevelByComma(m[1]);
+  if (parts.length < 3) throw new Error(`gradient: 인자 부족 (각도 + 스톱 ≥ 2) — '${cssValue}'`);
+  const angleM = parts[0].match(/^(-?[\d.]+)deg$/);
+  if (!angleM) throw new Error(`gradient: 첫 인자가 <angle>deg 아님 — '${parts[0]}'`);
+  const angle = parseFloat(angleM[1]);
+  const stops = parts.slice(1).map((s) => {
+    const tokens = tokenizeSpaceAware(s);
+    if (tokens.length !== 2) throw new Error(`gradient: 스톱 형식 '<color> <pos>%' — '${s}'`);
+    const color = parseCssColor(tokens[0], 'gradient.stop.color');
+    const pm = tokens[1].match(/^([\d.]+)%$/);
+    if (!pm) throw new Error(`gradient: 스톱 위치 % 형식 — '${tokens[1]}'`);
+    return { color, position: parseFloat(pm[1]) };
+  });
+  const { begin, end } = angleToBeginEnd(angle);
+  const colorList = stops.map((st) => `Color(0x${colorToARGBHex(st.color)})`).join(', ');
+  const stopList = stops.map((st) => (st.position / 100).toFixed(2)).join(', ');
+  return `LinearGradient(begin: Alignment(${begin[0]}, ${begin[1]}), end: Alignment(${end[0]}, ${end[1]}), colors: <Color>[${colorList}], stops: <double>[${stopList}])`;
+};
+
+export const buildDartGradientsBlock = (gradients) =>
+  GRADIENT_KEYS.map((k) => `    ${k}: ${cssGradientToDartLinear(gradients[k])},`).join('\n');

package/src/create/theme/presets.js

@@ -0,0 +1,160 @@
+// 프로젝트 스캐폴드용 테마 프리셋. 사용자가 --theme <name> 또는 대화형 프롬프트에서
+// 고르면 generator 가 tokens.css / sh_ui_tokens.dart 에 그대로 주입한다.
+//
+// 색은 shadcn/ui · Tailwind 팔레트를 참고해 light/dark 모두 충분한 명도 대비를 갖도록 잡았다.
+// radius 만 살짝 변주해 프리셋 별 인상 차이를 더했다 (slate=0.375 sharp, rose=0.75 round, …).
+//
+// 새 프리셋을 추가하면 cli-args.js 의 VALID_THEME_PRESETS 에도 자동 반영된다 (이 파일에서 derive).
+
+const NEUTRAL_LIGHT = {
+  'background': '#FFFFFF',
+  'background-subtle': '#FAFAFA',
+  'background-muted': '#F5F5F5',
+  'background-inverse': '#0A0A0A',
+  'foreground': '#0A0A0A',
+  'foreground-muted': '#525252',
+  'foreground-subtle': '#A3A3A3',
+  'foreground-inverse': '#FFFFFF',
+  'border': '#E5E5E5',
+  'border-strong': '#D4D4D4',
+  'primary': '#171717',
+  'primary-foreground': '#FAFAFA',
+  'primary-hover': '#262626',
+  'danger': '#DC2626',
+  'danger-foreground': '#FFFFFF',
+};
+
+const NEUTRAL_DARK = {
+  'background': '#0A0A0A',
+  'background-subtle': '#171717',
+  'background-muted': '#262626',
+  'background-inverse': '#FFFFFF',
+  'foreground': '#FAFAFA',
+  'foreground-muted': '#A3A3A3',
+  'foreground-subtle': '#737373',
+  'foreground-inverse': '#0A0A0A',
+  'border': '#262626',
+  'border-strong': '#404040',
+  'primary': '#FAFAFA',
+  'primary-foreground': '#171717',
+  'primary-hover': '#E5E5E5',
+  'danger': '#DC2626',
+  'danger-foreground': '#FFFFFF',
+};
+
+export const THEME_PRESETS = {
+  neutral: {
+    label: '뉴트럴 — 흑백 강조 (sh-ui 기본)',
+    light: NEUTRAL_LIGHT,
+    dark: NEUTRAL_DARK,
+    radius: 0.5,
+  },
+  slate: {
+    label: '슬레이트 — 차분한 슬레이트 + 인디고 (정보 밀도)',
+    light: {
+      'background': '#FFFFFF',
+      'background-subtle': '#F8FAFC',
+      'background-muted': '#F1F5F9',
+      'background-inverse': '#0F172A',
+      'foreground': '#0F172A',
+      'foreground-muted': '#475569',
+      'foreground-subtle': '#94A3B8',
+      'foreground-inverse': '#F1F5F9',
+      'border': '#E2E8F0',
+      'border-strong': '#CBD5E1',
+      'primary': '#4F46E5',
+      'primary-foreground': '#FFFFFF',
+      'primary-hover': '#4338CA',
+      'danger': '#DC2626',
+      'danger-foreground': '#FFFFFF',
+    },
+    dark: {
+      'background': '#0F172A',
+      'background-subtle': '#1E293B',
+      'background-muted': '#334155',
+      'background-inverse': '#FFFFFF',
+      'foreground': '#F1F5F9',
+      'foreground-muted': '#94A3B8',
+      'foreground-subtle': '#64748B',
+      'foreground-inverse': '#0F172A',
+      'border': '#334155',
+      'border-strong': '#475569',
+      'primary': '#818CF8',
+      'primary-foreground': '#1E1B4B',
+      'primary-hover': '#A5B4FC',
+      'danger': '#F87171',
+      '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: '로즈 — 핑크 강조 + 둥근 모서리 (친근·여유)',
+    light: {
+      ...NEUTRAL_LIGHT,
+      'primary': '#E11D48',
+      'primary-foreground': '#FFF1F2',
+      'primary-hover': '#BE123C',
+    },
+    dark: {
+      ...NEUTRAL_DARK,
+      'primary': '#FB7185',
+      'primary-foreground': '#4C0519',
+      'primary-hover': '#FDA4AF',
+    },
+    radius: 0.75,
+    // 큰 모서리 + 큼직한 컨트롤 — 소비자 앱 / 캐주얼 인상
+    controls: { sm: 36, md: 44, lg: 52 },
+  },
+  emerald: {
+    label: '에메랄드 — 그린 강조',
+    light: {
+      ...NEUTRAL_LIGHT,
+      'primary': '#059669',
+      'primary-foreground': '#ECFDF5',
+      'primary-hover': '#047857',
+    },
+    dark: {
+      ...NEUTRAL_DARK,
+      'primary': '#34D399',
+      'primary-foreground': '#022C22',
+      'primary-hover': '#6EE7B7',
+    },
+    radius: 0.5,
+  },
+  violet: {
+    label: '바이올렛 — 퍼플 강조 + 살짝 라운드 (모던·또렷)',
+    light: {
+      ...NEUTRAL_LIGHT,
+      'primary': '#7C3AED',
+      'primary-foreground': '#F5F3FF',
+      'primary-hover': '#6D28D9',
+    },
+    dark: {
+      ...NEUTRAL_DARK,
+      'primary': '#A78BFA',
+      'primary-foreground': '#1E1B4B',
+      '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);
+
+/**
+ * 프리셋 객체에서 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;
+  const { label: _label, ...themeConfig } = preset;
+  return themeConfig;
+};

package/src/mcp.mjs

@@ -38,12 +38,14 @@ import {
   THEME_MODES,
 } from "./constants.js";
 import { allPlugins } from "./create/plugins/index.js";
+import { THEME_PRESET_NAMES } from "./create/theme/presets.js";
 
 const PLATFORMS = INIT_PLATFORMS;
 const BASES = THEME_BASES;
 const RADII = THEME_RADII;
 const MODES = THEME_MODES;
 const PLUGIN_NAMES = allPlugins.map((p) => p.name);
+const THEME_PRESETS_LIST = THEME_PRESET_NAMES.join(", ");
 
 const INIT_DESCRIPTIONS = {
   platform: {
@@ -178,7 +180,7 @@ export async function startMcpServer() {
         plugins: z.array(z.enum(PLUGIN_NAMES)).optional()
           .describe(`Next.js 플러그인 (${PLUGIN_NAMES.join(', ')}). 미지정시 빈 배열`),
         theme: z.string().optional()
-          .describe("base64 인코딩된 테마 JSON (선택)"),
+          .describe(`프리셋 이름 (${THEME_PRESETS_LIST}) 또는 playground 에서 생성한 base64 (선택)`),
         cwd: z.string().optional()
           .describe("부모 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()