sh-ui-cli 0.45.2 → 0.46.0

package/data/registry/react/registry.json

@@ -25,6 +25,20 @@
           "frameworks": [
             "tailwind"
           ]
+        },
+        {
+          "src": "components/button/index.module.tsx",
+          "dest": "{components}/button/index.tsx",
+          "frameworks": [
+            "css-modules"
+          ]
+        },
+        {
+          "src": "components/button/styles.module.css",
+          "dest": "{components}/button/styles.module.css",
+          "frameworks": [
+            "css-modules"
+          ]
         }
       ],
       "dependencies": [
@@ -35,7 +49,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "card": {
       "name": "card",
@@ -61,10 +77,26 @@
           "frameworks": [
             "tailwind"
           ]
+        },
+        {
+          "src": "components/card/index.module.tsx",
+          "dest": "{components}/card/index.tsx",
+          "frameworks": [
+            "css-modules"
+          ]
+        },
+        {
+          "src": "components/card/styles.module.css",
+          "dest": "{components}/card/styles.module.css",
+          "frameworks": [
+            "css-modules"
+          ]
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "input": {
       "name": "input",
@@ -90,10 +122,26 @@
           "frameworks": [
             "tailwind"
           ]
+        },
+        {
+          "src": "components/input/index.module.tsx",
+          "dest": "{components}/input/index.tsx",
+          "frameworks": [
+            "css-modules"
+          ]
+        },
+        {
+          "src": "components/input/styles.module.css",
+          "dest": "{components}/input/styles.module.css",
+          "frameworks": [
+            "css-modules"
+          ]
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "numeric-input": {
       "name": "numeric-input",
@@ -122,7 +170,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "file-upload": {
       "name": "file-upload",
@@ -151,7 +201,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "form": {
       "name": "form",
@@ -240,7 +292,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "form-yup": {
       "name": "form-yup",
@@ -292,7 +346,9 @@
       "dependencies": [
         "shiki"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "code-tabs": {
       "name": "code-tabs",
@@ -336,7 +392,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "code-editor": {
       "name": "code-editor",
@@ -374,7 +432,9 @@
         "@codemirror/lang-html",
         "@codemirror/lang-markdown"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "markdown-editor": {
       "name": "markdown-editor",
@@ -407,7 +467,8 @@
         "remark-gfm"
       ],
       "registryDependencies": [
-        "code-editor"
+        "code-editor",
+        "utils"
       ]
     },
     "rich-text-editor": {
@@ -444,7 +505,9 @@
         "@tiptap/extension-link",
         "lucide-react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "select": {
       "name": "select",
@@ -475,7 +538,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "sidebar": {
       "name": "sidebar",
@@ -507,7 +572,8 @@
         "lucide-react"
       ],
       "registryDependencies": [
-        "popover"
+        "popover",
+        "utils"
       ]
     },
     "header": {
@@ -537,7 +603,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "base": {
       "name": "base",
@@ -662,7 +730,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "color-picker": {
       "name": "color-picker",
@@ -691,7 +761,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "slider": {
       "name": "slider",
@@ -720,7 +792,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "tabs": {
       "name": "tabs",
@@ -751,7 +825,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "combobox": {
       "name": "combobox",
@@ -782,7 +858,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "popover": {
       "name": "popover",
@@ -813,7 +891,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "dialog": {
       "name": "dialog",
@@ -844,7 +924,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "dropdown-menu": {
       "name": "dropdown-menu",
@@ -875,7 +957,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "context-menu": {
       "name": "context-menu",
@@ -906,7 +990,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "menubar": {
       "name": "menubar",
@@ -938,7 +1024,8 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
-        "dropdown-menu"
+        "dropdown-menu",
+        "utils"
       ]
     },
     "tooltip": {
@@ -970,7 +1057,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "breadcrumb": {
       "name": "breadcrumb",
@@ -999,7 +1088,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "pagination": {
       "name": "pagination",
@@ -1028,7 +1119,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "avatar": {
       "name": "avatar",
@@ -1065,7 +1158,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "badge": {
       "name": "badge",
@@ -1101,7 +1196,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "progress": {
       "name": "progress",
@@ -1130,7 +1227,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "spinner": {
       "name": "spinner",
@@ -1166,7 +1265,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "separator": {
       "name": "separator",
@@ -1195,7 +1296,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "theme": {
       "name": "theme",
@@ -1238,7 +1341,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "radio": {
       "name": "radio",
@@ -1269,7 +1374,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "switch": {
       "name": "switch",
@@ -1306,7 +1413,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "toggle": {
       "name": "toggle",
@@ -1343,7 +1452,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "textarea": {
       "name": "textarea",
@@ -1372,7 +1483,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "toast": {
       "name": "toast",
@@ -1401,7 +1514,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "calendar": {
       "name": "calendar",
@@ -1431,7 +1546,8 @@
       ],
       "dependencies": [],
       "registryDependencies": [
-        "select"
+        "select",
+        "utils"
       ]
     },
     "date-picker": {
@@ -1464,7 +1580,8 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
-        "calendar"
+        "calendar",
+        "utils"
       ]
     },
     "skeleton": {
@@ -1494,7 +1611,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "accordion": {
       "name": "accordion",
@@ -1525,7 +1644,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "carousel": {
       "name": "carousel",
@@ -1554,7 +1675,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "form-rhf": {
       "name": "form-rhf",
@@ -1587,6 +1710,42 @@
       "registryDependencies": [
         "form"
       ]
+    },
+    "utils": {
+      "name": "utils",
+      "type": "lib",
+      "files": [
+        {
+          "src": "lib/cn.ts",
+          "dest": "{utils}",
+          "frameworks": [
+            "plain",
+            "css-modules"
+          ]
+        },
+        {
+          "src": "lib/cn.tailwind.ts",
+          "dest": "{utils}",
+          "frameworks": [
+            "tailwind"
+          ]
+        }
+      ],
+      "dependencies": [
+        {
+          "name": "clsx",
+          "frameworks": [
+            "tailwind"
+          ]
+        },
+        {
+          "name": "tailwind-merge",
+          "frameworks": [
+            "tailwind"
+          ]
+        }
+      ],
+      "registryDependencies": []
     }
   }
 }

package/data/tokens/build.mjs

@@ -574,6 +574,10 @@ const tokenEmitters = {
     // 동일. 향후 Tailwind v3 theme.config.ts 를 별도 emit 하고 싶으면
     // 여기에 다른 함수를 등록.
     tailwind: buildTokensCss,
+    // CSS Modules 변종도 토큰은 평문 CSS custom properties — :root 변수를
+    // 그대로 참조하면 되므로 tokens.css 를 공유. .module.css 안에서도
+    // var(--primary) 같은 글로벌 변수는 정상 참조됨.
+    "css-modules": buildTokensCss,
   },
   flutter: {
     plain: buildTokensDart,

package/package.json

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

package/src/add.mjs

@@ -84,6 +84,29 @@ function resolveDest(template, config) {
   });
 }
 
+/**
+ * registry source 안의 placeholder 를 사용자 config 값으로 치환.
+ * 현재 지원: `@SH_UI_UTILS@` → `aliases.utils` (예: `@/src/shared/lib/utils`).
+ *
+ * registry 컴포넌트는 cn 유틸을 `import { cn } from "@SH_UI_UTILS@"` 로 import 한다 —
+ * CLI 가 add 시점에 사용자 프로젝트의 alias 로 치환해 TS module resolution 이 동작.
+ *
+ * aliases.utils 가 미설정인데 placeholder 가 등장하면 친절 에러로 안내. 사용자가 매 컴포넌트
+ * 추가 후 import 깨진 것을 발견하기 전에 시점에 잡는다.
+ */
+function substitutePlaceholders(content, config, srcRel) {
+  const PLACEHOLDER = "@SH_UI_UTILS@";
+  if (!content.includes(PLACEHOLDER)) return content;
+  const alias = config.aliases?.utils;
+  if (!alias) {
+    throw new Error(
+      `${srcRel} 가 cn 유틸을 import 합니다. sh-ui.config.json 에 aliases.utils 를 설정하세요.\n` +
+        `  예: "aliases": { "utils": "@/src/lib/utils" }`,
+    );
+  }
+  return content.replaceAll(PLACEHOLDER, alias);
+}
+
 async function ensureDir(filePath) {
   await mkdir(dirname(filePath), { recursive: true });
 }
@@ -170,19 +193,19 @@ function frameworkMatches(entry, cssFramework) {
 }
 
 /**
- * cssFramework="tailwind" 인데 컴포넌트에 tailwind 전용 변종 파일이 없으면
- * plain 으로 fallback. plain CSS 컴포넌트도 @theme inline 브리지 덕분에
- * Tailwind v4 프로젝트에서 그대로 동작하므로 깨지지 않음.
+ * 컴포넌트에 요청된 cssFramework 전용 변종 파일이 없으면 plain 으로 fallback.
+ * plain CSS 컴포넌트는 :root 변수만 의존하므로 어떤 환경(Tailwind v4, CSS Modules,
+ * vanilla CSS) 에서도 그대로 동작 — 깨지지 않음.
  *
- * 점진적 rollout 전략 — 모든 컴포넌트가 한 번에 tailwind 변종을 갖출 필요 없이
- * 가능한 것부터 utility-class 변종을 제공하고, 나머지는 plain 으로 자연 처리.
+ * 점진적 rollout 전략 — 모든 컴포넌트가 한 번에 새 변종을 갖출 필요 없이
+ * 가능한 것부터 변종을 제공하고, 나머지는 plain 으로 자연 처리.
  */
 function effectiveFramework(entry, cssFramework) {
-  if (cssFramework !== "tailwind") return cssFramework;
-  const hasTailwindVariant = (entry.files ?? []).some(
-    (f) => f.frameworks && f.frameworks.includes("tailwind"),
+  if (cssFramework === "plain") return cssFramework;
+  const hasVariant = (entry.files ?? []).some(
+    (f) => f.frameworks && f.frameworks.includes(cssFramework),
   );
-  return hasTailwindVariant ? "tailwind" : "plain";
+  return hasVariant ? cssFramework : "plain";
 }
 
 async function addComponent(name, config, cwd, installed, pendingDeps, diffMode, summary, conflictResolver) {
@@ -200,11 +223,11 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
   const requestedFw = config.cssFramework ?? "plain";
   const cssFramework = effectiveFramework(entry, requestedFw);
 
-  // 사용자가 tailwind 를 골랐는데 이 컴포넌트는 plain 으로 fallback 된 경우 한 줄 알림.
+  // 사용자가 plain 외 변종을 골랐는데 이 컴포넌트는 plain 으로 fallback 된 경우 한 줄 알림.
   // 동작에 문제는 없지만 일관성에 대한 기대를 정확히 셋업하기 위함.
-  if (requestedFw === "tailwind" && cssFramework === "plain" && !diffMode) {
+  if (requestedFw !== "plain" && cssFramework === "plain" && !diffMode) {
     console.log(
-      `ℹ ${name} — Tailwind 변종 미제공, plain 변종으로 설치 (Tailwind v4 환경에서 그대로 동작)`,
+      `ℹ ${name} — ${requestedFw} 변종 미제공, plain 변종으로 설치 (어떤 환경에서도 그대로 동작)`,
     );
   }
 
@@ -223,7 +246,8 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
     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");
+    const raw = await readFile(src, "utf8");
+    const content = substitutePlaceholders(raw, config, file.src);
     const result = await writeOrDiff({ dest, content, cwd, diffMode, summary, conflictResolver });
     if (!diffMode && result !== "unchanged") {
       const prefix = result === "kept" ? "↷" : "✓";

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

@@ -10,5 +10,10 @@
     "tokens": "src/styles/tokens.css",
     "components": "src/components",
     "utils": "src/lib/utils.ts"
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components"
   }
 }