sh-ui-cli 0.15.0 → 0.21.1

package/data/tokens/src/primitives.json

@@ -0,0 +1,146 @@
+{
+  "$description": "원시 토큰 — 실제 값. 플랫폼/테마 무관. W3C Design Tokens 포맷 준수.",
+  "color": {
+    "white": { "$value": "#FFFFFF", "$type": "color" },
+    "black": { "$value": "#000000", "$type": "color" },
+
+    "neutral": {
+      "50":  { "$value": "#FAFAFA", "$type": "color" },
+      "100": { "$value": "#F5F5F5", "$type": "color" },
+      "200": { "$value": "#E5E5E5", "$type": "color" },
+      "300": { "$value": "#D4D4D4", "$type": "color" },
+      "400": { "$value": "#A3A3A3", "$type": "color" },
+      "500": { "$value": "#737373", "$type": "color" },
+      "600": { "$value": "#525252", "$type": "color" },
+      "700": { "$value": "#404040", "$type": "color" },
+      "800": { "$value": "#262626", "$type": "color" },
+      "900": { "$value": "#171717", "$type": "color" },
+      "950": { "$value": "#0A0A0A", "$type": "color" }
+    },
+
+    "zinc": {
+      "50":  { "$value": "#FAFAFA", "$type": "color" },
+      "100": { "$value": "#F4F4F5", "$type": "color" },
+      "200": { "$value": "#E4E4E7", "$type": "color" },
+      "300": { "$value": "#D4D4D8", "$type": "color" },
+      "400": { "$value": "#A1A1AA", "$type": "color" },
+      "500": { "$value": "#71717A", "$type": "color" },
+      "600": { "$value": "#52525B", "$type": "color" },
+      "700": { "$value": "#3F3F46", "$type": "color" },
+      "800": { "$value": "#27272A", "$type": "color" },
+      "900": { "$value": "#18181B", "$type": "color" },
+      "950": { "$value": "#09090B", "$type": "color" }
+    },
+
+    "slate": {
+      "50":  { "$value": "#F8FAFC", "$type": "color" },
+      "100": { "$value": "#F1F5F9", "$type": "color" },
+      "200": { "$value": "#E2E8F0", "$type": "color" },
+      "300": { "$value": "#CBD5E1", "$type": "color" },
+      "400": { "$value": "#94A3B8", "$type": "color" },
+      "500": { "$value": "#64748B", "$type": "color" },
+      "600": { "$value": "#475569", "$type": "color" },
+      "700": { "$value": "#334155", "$type": "color" },
+      "800": { "$value": "#1E293B", "$type": "color" },
+      "900": { "$value": "#0F172A", "$type": "color" },
+      "950": { "$value": "#020617", "$type": "color" }
+    },
+
+    "red": {
+      "500": { "$value": "#EF4444", "$type": "color" },
+      "600": { "$value": "#DC2626", "$type": "color" }
+    }
+  },
+
+  "spacing": {
+    "0":  { "$value": "0px",   "$type": "dimension" },
+    "1":  { "$value": "4px",   "$type": "dimension" },
+    "2":  { "$value": "8px",   "$type": "dimension" },
+    "3":  { "$value": "12px",  "$type": "dimension" },
+    "4":  { "$value": "16px",  "$type": "dimension" },
+    "5":  { "$value": "20px",  "$type": "dimension" },
+    "6":  { "$value": "24px",  "$type": "dimension" },
+    "8":  { "$value": "32px",  "$type": "dimension" },
+    "10": { "$value": "40px",  "$type": "dimension" },
+    "12": { "$value": "48px",  "$type": "dimension" },
+    "16": { "$value": "64px",  "$type": "dimension" }
+  },
+
+  "radius": {
+    "none": { "$value": "0px",    "$type": "dimension" },
+    "sm":   { "$value": "0.25rem","$type": "dimension" },
+    "md":   { "$value": "0.5rem", "$type": "dimension" },
+    "lg":   { "$value": "0.75rem","$type": "dimension" },
+    "xl":   { "$value": "1rem",   "$type": "dimension" },
+    "full": { "$value": "9999px", "$type": "dimension" }
+  },
+
+  "fontSize": {
+    "xs":  { "$value": "12px", "$type": "dimension" },
+    "sm":  { "$value": "14px", "$type": "dimension" },
+    "base":{ "$value": "16px", "$type": "dimension" },
+    "lg":  { "$value": "18px", "$type": "dimension" },
+    "xl":  { "$value": "20px", "$type": "dimension" },
+    "2xl": { "$value": "24px", "$type": "dimension" },
+    "3xl": { "$value": "30px", "$type": "dimension" },
+    "4xl": { "$value": "36px", "$type": "dimension" }
+  },
+
+  "fontWeight": {
+    "regular":  { "$value": 400, "$type": "fontWeight" },
+    "medium":   { "$value": 500, "$type": "fontWeight" },
+    "semibold": { "$value": 600, "$type": "fontWeight" },
+    "bold":     { "$value": 700, "$type": "fontWeight" }
+  },
+
+  "shadow": {
+    "sm": { "$value": "0 1px 2px rgba(0, 0, 0, 0.08)",   "$type": "shadow" },
+    "md": { "$value": "0 4px 12px rgba(0, 0, 0, 0.12)",  "$type": "shadow" },
+    "lg": { "$value": "0 8px 24px rgba(0, 0, 0, 0.15)",  "$type": "shadow" },
+    "xl": { "$value": "0 16px 48px rgba(0, 0, 0, 0.18)", "$type": "shadow" }
+  },
+
+  "duration": {
+    "fast": { "$value": "120ms", "$type": "duration" },
+    "base": { "$value": "160ms", "$type": "duration" },
+    "slow": { "$value": "200ms", "$type": "duration" }
+  },
+
+  "easing": {
+    "standard":   { "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "easing" },
+    "emphasized": { "$value": "cubic-bezier(0.2, 0, 0, 1)",   "$type": "easing" }
+  },
+
+  "controlHeight": {
+    "sm": { "$value": "32px", "$type": "dimension" },
+    "md": { "$value": "40px", "$type": "dimension" },
+    "lg": { "$value": "48px", "$type": "dimension" }
+  },
+
+  "borderWidth": {
+    "default": { "$value": "1px", "$type": "dimension" },
+    "strong":  { "$value": "2px", "$type": "dimension" }
+  },
+
+  "opacity": {
+    "disabled": { "$value": 0.5, "$type": "number" }
+  },
+
+  "zIndex": {
+    "base":     { "$value": 0,   "$type": "number" },
+    "sticky":   { "$value": 100, "$type": "number" },
+    "dropdown": { "$value": 200, "$type": "number" },
+    "overlay":  { "$value": 300, "$type": "number" },
+    "modal":    { "$value": 400, "$type": "number" },
+    "popover":  { "$value": 500, "$type": "number" },
+    "toast":    { "$value": 600, "$type": "number" },
+    "tooltip":  { "$value": 700, "$type": "number" }
+  },
+
+  "breakpoint": {
+    "sm": { "$value": "640px",  "$type": "dimension" },
+    "md": { "$value": "768px",  "$type": "dimension" },
+    "lg": { "$value": "1024px", "$type": "dimension" },
+    "xl": { "$value": "1280px", "$type": "dimension" }
+  }
+}

package/data/tokens/src/semantic.json

@@ -0,0 +1,146 @@
+{
+  "$description": "의미 토큰 — primitive 참조. 컴포넌트는 오직 이 계층만 사용한다. {base}, {primary} 등은 sh-ui.config.json의 theme 설정으로 치환된다.",
+
+  "light": {
+    "background": {
+      "default": { "$value": "{color.white}", "$type": "color" },
+      "subtle":   { "$value": "{color.{base}.50}", "$type": "color" },
+      "muted":    { "$value": "{color.{base}.100}", "$type": "color" },
+      "inverse":  { "$value": "{color.{base}.950}", "$type": "color" }
+    },
+    "foreground": {
+      "default": { "$value": "{color.{base}.950}", "$type": "color" },
+      "muted":   { "$value": "{color.{base}.600}", "$type": "color" },
+      "subtle":  { "$value": "{color.{base}.400}", "$type": "color" },
+      "inverse": { "$value": "{color.white}", "$type": "color" }
+    },
+    "border": {
+      "default": { "$value": "{color.{base}.200}", "$type": "color" },
+      "strong":  { "$value": "{color.{base}.300}", "$type": "color" }
+    },
+    "primary": {
+      "default":    { "$value": "{color.{base}.900}", "$type": "color" },
+      "foreground": { "$value": "{color.{base}.50}", "$type": "color" },
+      "hover":      { "$value": "{color.{base}.800}", "$type": "color" }
+    },
+    "danger": {
+      "default":    { "$value": "{color.red.600}", "$type": "color" },
+      "foreground": { "$value": "{color.white}", "$type": "color" }
+    }
+  },
+
+  "dark": {
+    "background": {
+      "default": { "$value": "{color.{base}.950}", "$type": "color" },
+      "subtle":  { "$value": "{color.{base}.900}", "$type": "color" },
+      "muted":   { "$value": "{color.{base}.800}", "$type": "color" },
+      "inverse": { "$value": "{color.white}", "$type": "color" }
+    },
+    "foreground": {
+      "default": { "$value": "{color.{base}.50}", "$type": "color" },
+      "muted":   { "$value": "{color.{base}.400}", "$type": "color" },
+      "subtle":  { "$value": "{color.{base}.500}", "$type": "color" },
+      "inverse": { "$value": "{color.{base}.950}", "$type": "color" }
+    },
+    "border": {
+      "default": { "$value": "{color.{base}.800}", "$type": "color" },
+      "strong":  { "$value": "{color.{base}.700}", "$type": "color" }
+    },
+    "primary": {
+      "default":    { "$value": "{color.{base}.50}", "$type": "color" },
+      "foreground": { "$value": "{color.{base}.900}", "$type": "color" },
+      "hover":      { "$value": "{color.{base}.200}", "$type": "color" }
+    },
+    "danger": {
+      "default":    { "$value": "{color.red.600}", "$type": "color" },
+      "foreground": { "$value": "{color.white}", "$type": "color" }
+    }
+  },
+
+  "radius": {
+    "default": { "$value": "{radius.{radius}}", "$type": "dimension" }
+  },
+
+  "space": {
+    "0":  { "$value": "{spacing.0}",  "$type": "dimension" },
+    "1":  { "$value": "{spacing.1}",  "$type": "dimension" },
+    "2":  { "$value": "{spacing.2}",  "$type": "dimension" },
+    "3":  { "$value": "{spacing.3}",  "$type": "dimension" },
+    "4":  { "$value": "{spacing.4}",  "$type": "dimension" },
+    "5":  { "$value": "{spacing.5}",  "$type": "dimension" },
+    "6":  { "$value": "{spacing.6}",  "$type": "dimension" },
+    "8":  { "$value": "{spacing.8}",  "$type": "dimension" },
+    "10": { "$value": "{spacing.10}", "$type": "dimension" },
+    "12": { "$value": "{spacing.12}", "$type": "dimension" },
+    "16": { "$value": "{spacing.16}", "$type": "dimension" }
+  },
+
+  "text": {
+    "xs":  { "$value": "{fontSize.xs}",   "$type": "dimension" },
+    "sm":  { "$value": "{fontSize.sm}",   "$type": "dimension" },
+    "base":{ "$value": "{fontSize.base}", "$type": "dimension" },
+    "lg":  { "$value": "{fontSize.lg}",   "$type": "dimension" },
+    "xl":  { "$value": "{fontSize.xl}",   "$type": "dimension" },
+    "2xl": { "$value": "{fontSize.2xl}",  "$type": "dimension" },
+    "3xl": { "$value": "{fontSize.3xl}",  "$type": "dimension" },
+    "4xl": { "$value": "{fontSize.4xl}",  "$type": "dimension" }
+  },
+
+  "weight": {
+    "regular":  { "$value": "{fontWeight.regular}",  "$type": "fontWeight" },
+    "medium":   { "$value": "{fontWeight.medium}",   "$type": "fontWeight" },
+    "semibold": { "$value": "{fontWeight.semibold}", "$type": "fontWeight" },
+    "bold":     { "$value": "{fontWeight.bold}",     "$type": "fontWeight" }
+  },
+
+  "shadow": {
+    "sm": { "$value": "{shadow.sm}", "$type": "shadow" },
+    "md": { "$value": "{shadow.md}", "$type": "shadow" },
+    "lg": { "$value": "{shadow.lg}", "$type": "shadow" },
+    "xl": { "$value": "{shadow.xl}", "$type": "shadow" }
+  },
+
+  "duration": {
+    "fast": { "$value": "{duration.fast}", "$type": "duration" },
+    "base": { "$value": "{duration.base}", "$type": "duration" },
+    "slow": { "$value": "{duration.slow}", "$type": "duration" }
+  },
+
+  "ease": {
+    "standard":   { "$value": "{easing.standard}",   "$type": "easing" },
+    "emphasized": { "$value": "{easing.emphasized}", "$type": "easing" }
+  },
+
+  "control": {
+    "sm": { "$value": "{controlHeight.sm}", "$type": "dimension" },
+    "md": { "$value": "{controlHeight.md}", "$type": "dimension" },
+    "lg": { "$value": "{controlHeight.lg}", "$type": "dimension" }
+  },
+
+  "border-width": {
+    "default": { "$value": "{borderWidth.default}", "$type": "dimension" },
+    "strong":  { "$value": "{borderWidth.strong}",  "$type": "dimension" }
+  },
+
+  "opacity": {
+    "disabled": { "$value": "{opacity.disabled}", "$type": "number" }
+  },
+
+  "z": {
+    "base":     { "$value": "{zIndex.base}",     "$type": "number" },
+    "sticky":   { "$value": "{zIndex.sticky}",   "$type": "number" },
+    "dropdown": { "$value": "{zIndex.dropdown}", "$type": "number" },
+    "overlay":  { "$value": "{zIndex.overlay}",  "$type": "number" },
+    "modal":    { "$value": "{zIndex.modal}",    "$type": "number" },
+    "popover":  { "$value": "{zIndex.popover}",  "$type": "number" },
+    "toast":    { "$value": "{zIndex.toast}",    "$type": "number" },
+    "tooltip":  { "$value": "{zIndex.tooltip}",  "$type": "number" }
+  },
+
+  "bp": {
+    "sm": { "$value": "{breakpoint.sm}", "$type": "dimension" },
+    "md": { "$value": "{breakpoint.md}", "$type": "dimension" },
+    "lg": { "$value": "{breakpoint.lg}", "$type": "dimension" },
+    "xl": { "$value": "{breakpoint.xl}", "$type": "dimension" }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.15.0",
+  "version": "0.21.1",
   "description": "sh-ui CLI — 디자인 시스템 컴포넌트를 프로젝트로 복사하는 CLI (sh-ui init / add / list / remove)",
   "license": "MIT",
   "repository": {
@@ -15,10 +15,15 @@
   "keywords": [
     "sh-ui",
     "cli",
+    "mcp",
     "design-system",
     "registry",
     "components"
   ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "zod": "^3.25.0"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -27,11 +32,13 @@
     "sh-ui": "./bin/sh-ui.mjs"
   },
   "scripts": {
-    "prepublishOnly": "node --check bin/sh-ui.mjs"
+    "bundle-data": "node scripts/copy-data.mjs",
+    "prepublishOnly": "node scripts/copy-data.mjs && node --check bin/sh-ui.mjs"
   },
   "files": [
     "bin",
     "src",
+    "data",
     "LICENSE",
     "README.md"
   ]

package/src/add.mjs

@@ -1,13 +1,39 @@
-import { readFile, writeFile, mkdir, copyFile } from "node:fs/promises";
+import { readFile, writeFile, mkdir } from "node:fs/promises";
 import { existsSync } from "node:fs";
 import { dirname, resolve, relative } from "node:path";
-import { fileURLToPath } from "node:url";
+import { pathToFileURL } from "node:url";
 import { spawn } from "node:child_process";
-import { buildTokensCss, buildTokensDart } from "../../tokens/build.mjs";
 import { formatUnifiedDiff } from "./diff.mjs";
+import { getRegistryRoot, getTokensRoot, getPeerVersionsPath } from "./paths.mjs";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const REPO_ROOT = resolve(__dirname, "../../..");
+/**
+ * `dependencies` 에 적힌 패키지명을 peer-versions.json 의 버전 범위와 결합.
+ * 패키지 자체에 이미 `@version` 이 붙어 있거나 맵에 없으면 그대로 둔다.
+ *
+ * 왜: registry.json 은 deps 를 패키지명만 적어 두고, 실제 호환 버전은
+ * peer-versions.json 가 단일 출처로 관리한다. 이게 없으면 npm install 이
+ * latest 태그를 찾는데, RC 만 있는 패키지(@base-ui-components/react 등)
+ * 에서 ETARGET 으로 실패한다.
+ */
+async function resolveDepVersions(deps, platform) {
+  let map = {};
+  try {
+    const data = JSON.parse(await readFile(getPeerVersionsPath(platform), "utf8"));
+    map = data.versions ?? {};
+  } catch {
+    // peer-versions.json 이 없는 platform 은 그대로 패스 (Flutter 등)
+  }
+  return deps.map((d) => {
+    if (d.includes("@", 1)) return d; // 이미 name@range 형식
+    return map[d] ? `${d}@${map[d]}` : d;
+  });
+}
+
+// tokens/build.mjs 는 모노레포·출고 모드에 따라 위치가 달라서 동적 import.
+async function loadTokensBuilder() {
+  const url = pathToFileURL(resolve(getTokensRoot(), "build.mjs")).href;
+  return import(url);
+}
 
 /** 컬러 출력 가능 여부: TTY + NO_COLOR 미설정. */
 function canUseColor() {
@@ -81,6 +107,7 @@ async function addTokens(config, cwd, diffMode, summary) {
   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)
@@ -93,13 +120,10 @@ async function addTokens(config, cwd, diffMode, summary) {
 }
 
 async function addComponent(name, config, cwd, installed, pendingDeps, diffMode, summary) {
-  const registryPath = resolve(
-    REPO_ROOT,
-    "packages/registry",
-    config.platform,
-    "registry.json",
+  const registryRoot = getRegistryRoot(config.platform);
+  const registry = JSON.parse(
+    await readFile(resolve(registryRoot, "registry.json"), "utf8"),
   );
-  const registry = JSON.parse(await readFile(registryPath, "utf8"));
   const entry = registry.components?.[name];
   if (!entry) {
     throw new Error(
@@ -112,7 +136,7 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
   }
 
   for (const file of entry.files) {
-    const src = resolve(REPO_ROOT, "packages/registry", config.platform, file.src);
+    const src = resolve(registryRoot, file.src);
     const dest = resolve(cwd, resolveDest(file.dest, config));
     const content = await readFile(src, "utf8");
     const result = await writeOrDiff({ dest, content, cwd, diffMode, summary });
@@ -208,22 +232,24 @@ export async function add({ cwd, names, skipInstall = false, diffMode = false })
     return;
   }
 
+  const versioned = await resolveDepVersions(missing, config.platform);
+
   if (skipInstall) {
     const pm = detectPackageManager(cwd);
     const addCmd = pm === "npm" ? "install" : "add";
     console.log(
-      `\n  ⚠ 외부 패키지 필요. 다음을 실행하세요:\n    ${pm} ${addCmd} ${missing.join(" ")}`,
+      `\n  ⚠ 외부 패키지 필요. 다음을 실행하세요:\n    ${pm} ${addCmd} ${versioned.join(" ")}`,
     );
     return;
   }
 
   const pm = detectPackageManager(cwd);
   try {
-    await runInstall(pm, missing, cwd);
+    await runInstall(pm, versioned, cwd);
   } catch (err) {
     const addCmd = pm === "npm" ? "install" : "add";
     console.error(
-      `\n✗ 자동 설치 실패 (${err.message}). 수동으로 실행하세요:\n    ${pm} ${addCmd} ${missing.join(" ")}`,
+      `\n✗ 자동 설치 실패 (${err.message}). 수동으로 실행하세요:\n    ${pm} ${addCmd} ${versioned.join(" ")}`,
     );
     throw err;
   }

package/src/list.mjs

@@ -1,10 +1,7 @@
 import { readFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
-import { dirname, resolve, relative } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const REPO_ROOT = resolve(__dirname, "../../..");
+import { resolve, relative } from "node:path";
+import { getRegistryRoot } from "./paths.mjs";
 
 function resolveDest(template, config) {
   return template.replace(/\{([a-zA-Z0-9_]+)\}/g, (m, key) => {
@@ -26,12 +23,7 @@ async function loadConfig(cwd) {
 }
 
 async function loadRegistry(platform) {
-  const registryPath = resolve(
-    REPO_ROOT,
-    "packages/registry",
-    platform,
-    "registry.json",
-  );
+  const registryPath = resolve(getRegistryRoot(platform), "registry.json");
   return JSON.parse(await readFile(registryPath, "utf8"));
 }