sh-ui-cli 0.52.0 → 0.52.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.52.0",
+  "version": "0.52.2",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "@inquirer/prompts": "^7.0.0",
     "@modelcontextprotocol/sdk": "^1.0.0",
     "fs-extra": "^11.2.0",
-    "zod": "^3.25.0"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "vitest": "^3.2.4"

package/src/api.d.ts

@@ -13,11 +13,10 @@ export type ThemeMode = 'light-dark' | 'light' | 'dark';
 /** 현재 실제로 동작하는 CSS 프레임워크.
  * - plain: 모든 컴포넌트가 plain 변종 보유.
  * - tailwind: 모든 styled 컴포넌트가 utility-class 변종 보유.
- * - css-modules: 모든 styled 컴포넌트가 .module.css 변종 보유.
- * - vanilla-extract: 모든 styled 컴포넌트가 .css.ts 변종 보유. */
-export type CssFrameworkSupported = 'plain' | 'tailwind' | 'css-modules' | 'vanilla-extract';
+ * - css-modules: 모든 styled 컴포넌트가 .module.css 변종 보유. */
+export type CssFrameworkSupported = 'plain' | 'tailwind' | 'css-modules';
 /** 향후 추가 예정 — UI 에서 "곧 지원" 으로 노출되지만 CLI 는 거부. */
-export type CssFrameworkPlanned = never;
+export type CssFrameworkPlanned = 'vanilla-extract';
 /** 알려진 전체 (validation 메시지용). */
 export type CssFramework = CssFrameworkSupported | CssFrameworkPlanned;
 

package/src/constants.js

@@ -27,11 +27,15 @@ export const THEME_MODES = ['light-dark', 'light', 'dark'];
 // - plain: CSS custom properties + 일반 .css 파일 (모든 컴포넌트 변종 보유)
 // - tailwind: utility class TSX 변종 (모든 styled 컴포넌트 변종 보유)
 // - css-modules: 모듈 단위 .module.css + styles.X 참조 (모든 styled 컴포넌트 변종 보유)
-// - vanilla-extract: TS 안에서 CSS 작성 (.css.ts), 빌드 타임 정적 컴파일 (모든 styled 컴포넌트 변종 보유)
-export const CSS_FRAMEWORKS_SUPPORTED = ['plain', 'tailwind', 'css-modules', 'vanilla-extract'];
-
-// 향후 추가 예정. 비어 있어도 enum 으로 유지 (시스템이 새 변종에 열려 있다는 의미).
-export const CSS_FRAMEWORKS_PLANNED = [];
+export const CSS_FRAMEWORKS_SUPPORTED = ['plain', 'tailwind', 'css-modules'];
+
+// 향후 추가 예정. 사용자가 이 값을 주면 친절 에러로 안내.
+// vanilla-extract: button/card/input 3 개 파일럿만 변종 보유 (수동 작성, 검증됨).
+//   v0.50.0 에서 자동 변환 스크립트로 40 개 추가 시도했으나 vanilla-extract 의 strict
+//   selector 규칙 (selectors 안에 다른 클래스 reference 불가, third-party 클래스 descendant 불가
+//   등) 을 어김 — v0.52.2 에서 broken 변종 rollback. 사용자가 직접 .css.ts 를 작성하거나
+//   향후 정식 rollout (selectors → globalStyle 분기까지 처리) 후 SUPPORTED 로 다시 승격 예정.
+export const CSS_FRAMEWORKS_PLANNED = ['vanilla-extract'];
 
 // 알려진 전체 — 검증 시 supported 와 planned 둘 다 인지하기 위함.
 export const CSS_FRAMEWORKS_ALL = [

package/src/create/plugins/pluginSchema.js

@@ -23,10 +23,12 @@ const filePath = z
       "Use 'middleware.ts' instead of 'src/middleware.ts'.",
   });
 
+// zod 4 에서 z.function 의 .args/.returns 체이닝 API 가 제거됨.
+// 함수 시그니처는 런타임에 의미 있게 검증할 수 없으므로 custom 으로 type 만 확인.
 const wrapperFn = z
-  .function()
-  .args(z.string())
-  .returns(z.string())
+  .custom((val) => typeof val === "function", {
+    message: "wrapExport must be a function (expr: string) => string",
+  })
   .optional();
 
 export const PluginSchema = z.object({

package/src/mcp.mjs

@@ -74,7 +74,8 @@ const INIT_DESCRIPTIONS = {
   },
   cssFramework: {
     plain: "플레인 CSS — CSS custom properties + 일반 .css 파일 (모든 컴포넌트 지원)",
-    tailwind: "Tailwind v4 utility class — class-variance-authority 기반. 변종 미제공 컴포넌트는 plain 으로 자동 fallback",
+    tailwind: "Tailwind v4 utility class — class-variance-authority 기반",
+    "css-modules": "CSS Modules — .module.css + styles.X 참조, 빌드 타임 hash 격리",
   },
 };
 
@@ -205,7 +206,7 @@ export async function startMcpServer() {
         theme: z.string().optional()
           .describe(`프리셋 이름 (${THEME_PRESETS_LIST}) 또는 playground 에서 생성한 base64 (선택)`),
         cssFramework: z.enum(CSS_FRAMEWORKS).optional()
-          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 (향후 tailwind 등 추가 예정)`),
+          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 — 변종 미보유 컴포넌트는 add 시 plain 으로 자동 fallback`),
         cwd: z.string().optional()
           .describe("부모 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()
@@ -276,7 +277,7 @@ export async function startMcpServer() {
         mode: z.enum(MODES).optional()
           .describe("색 모드. 기본 light-dark"),
         cssFramework: z.enum(CSS_FRAMEWORKS).optional()
-          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 (향후 tailwind 등 추가 예정)`),
+          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 — 변종 미보유 컴포넌트는 add 시 plain 으로 자동 fallback`),
         cwd: z.string().optional()
           .describe("작업 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()

package/data/registry/react/components/accordion/index.vanilla-extract.tsx

@@ -1,97 +0,0 @@
-import * as React from "react";
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { byKey, accordion, accordion__item, accordion__header, accordion__trigger, accordionTriggerLabel, accordion__chevron, accordion__panel, accordion__content } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-export type AccordionSize = "sm" | "md";
-
-type AccordionProps = WithStringClassName<
-  React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>
-> & {
-  /**
-   * 트리거 + chevron + content 의 패딩·폰트 크기 묶음.
-   * - `md` (기본) — padding 16/4, font 15px, chevron 16px
-   * - `sm` — padding 8/4, font 12px, chevron 12px. 좁은 사이드바·다중 섹션에 적합.
-   * @default "md"
-   */
-  size?: AccordionSize;
-};
-
-export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  ({ className, size = "md", ...props }, ref) => (
-    <BaseAccordion.Root
-      ref={ref}
-      className={cn(accordion, className)}
-      data-size={size}
-      {...props}
-    />
-  ),
-);
-Accordion.displayName = "Accordion";
-
-export const AccordionItem = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>>
->(({ className, ...props }, ref) => (
-  <BaseAccordion.Item
-    ref={ref}
-    className={cn(accordion__item, className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-/**
- * Trigger: 헤더 버튼. 우측에 chevron이 자동으로 붙고 expanded 상태에서 회전한다.
- * Base UI의 AccordionHeader(h3)로 감싸 의미론적 헤더 구조를 유지한다.
- */
-export const AccordionTrigger = React.forwardRef<
-  HTMLButtonElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>
-  >
->(({ className, children, ...props }, ref) => (
-  <BaseAccordion.Header className={accordion__header}>
-    <BaseAccordion.Trigger
-      ref={ref}
-      className={cn(accordion__trigger, className)}
-      {...props}
-    >
-      <span className={accordionTriggerLabel}>{children}</span>
-      <svg
-        className={accordion__chevron}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M4 6l4 4 4-4"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </BaseAccordion.Trigger>
-  </BaseAccordion.Header>
-));
-AccordionTrigger.displayName = "AccordionTrigger";
-
-export const AccordionContent = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>>
->(({ className, children, ...props }, ref) => (
-  <BaseAccordion.Panel
-    ref={ref}
-    className={cn(accordion__panel, className)}
-    {...props}
-  >
-    <div className={accordion__content}>{children}</div>
-  </BaseAccordion.Panel>
-));
-AccordionContent.displayName = "AccordionContent";

package/data/registry/react/components/accordion/styles.css.ts

@@ -1,131 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const accordion = style({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  selectors: {
-    [`&[data-size="sm"] ${accordion__trigger}`]: {
-      padding: "var(--space-2) var(--space-1)",
-      fontSize: "var(--text-xs)",
-      lineHeight: 1.2,
-    },
-    [`&[data-size="sm"] ${accordion__chevron}`]: {
-      width: "12px",
-      height: "12px",
-    },
-    [`&[data-size="sm"] ${accordion__content}`]: {
-      padding: "0 var(--space-1) var(--space-2)",
-      fontSize: "var(--text-xs)",
-      lineHeight: 1.5,
-    },
-  },
-});
-
-export const accordion__item = style({
-  borderBottom: "1px solid var(--border)",
-  selectors: {
-    "&:first-child": {
-      borderTop: "1px solid var(--border)",
-    },
-  },
-});
-
-export const accordion__header = style({
-  margin: 0,
-  font: "inherit",
-});
-
-export const accordion__trigger = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "var(--space-4)",
-  width: "100%",
-  padding: "var(--space-4) var(--space-1)",
-  background: "transparent",
-  border: "none",
-  color: "var(--foreground)",
-  fontSize: "0.9375rem",
-  fontWeight: "var(--weight-medium)",
-  lineHeight: 1.4,
-  textAlign: "left",
-  cursor: "pointer",
-  transition: "background-color var(--duration-fast) var(--ease-standard)",
-  WebkitTapHighlightColor: "transparent",
-  selectors: {
-    "&:not([disabled]):not([data-disabled]):hover": {
-      background: "var(--background-muted)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-      borderRadius: "calc(var(--radius) - 2px)",
-    },
-    "&[disabled]": {
-      cursor: "not-allowed",
-      color: "var(--foreground-muted)",
-    },
-    "&[data-disabled]": {
-      cursor: "not-allowed",
-      color: "var(--foreground-muted)",
-    },
-    [`&[data-panel-open] ${accordion__chevron}`]: {
-      transform: "rotate(180deg)",
-    },
-  },
-});
-
-export const accordionTriggerLabel = style({
-  minWidth: 0,
-  overflowWrap: "anywhere",
-});
-
-export const accordion__chevron = style({
-  flexShrink: 0,
-  color: "var(--foreground-muted)",
-  transition: "transform 180ms var(--ease-standard)",
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const accordion__panel = style({
-  overflow: "hidden",
-  height: "var(--accordion-panel-height)",
-  transition: "height var(--duration-slow) var(--ease-standard)",
-  selectors: {
-    "&[data-starting-style]": {
-      height: 0,
-    },
-    "&[data-ending-style]": {
-      height: 0,
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const accordion__content = style({
-  padding: "0 var(--space-1) var(--space-4)",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1.6,
-  color: "var(--foreground-muted)",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "accordion": accordion,
-  "accordion__item": accordion__item,
-  "accordion__header": accordion__header,
-  "accordion__trigger": accordion__trigger,
-  "accordion__trigger-label": accordionTriggerLabel,
-  "accordion__chevron": accordion__chevron,
-  "accordion__panel": accordion__panel,
-  "accordion__content": accordion__content,
-};

package/data/registry/react/components/avatar/index.vanilla-extract.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-import { byKey, avatar, avatarSm, avatarMd, avatarLg, avatarXl, avatar__image, avatar__fallback } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-export type AvatarSize = "sm" | "md" | "lg" | "xl";
-
-export interface AvatarProps
-  extends WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>
-  > {
-  /**
-   * 크기.
-   * - `sm` (24px) — 댓글·리스트 행
-   * - `md` (32px) — 일반 (기본)
-   * - `lg` (40px) — 헤더·프로필 카드
-   * - `xl` (56px) — 프로필 페이지
-   *
-   * @default "md"
-   */
-  size?: AvatarSize;
-}
-
-/**
- * 사용자/엔티티를 대표하는 원형 이미지. `Avatar` 안에 `AvatarImage`와
- * `AvatarFallback`을 함께 둬, 이미지 로드 실패 시 자동으로 fallback이 표시되도록 한다.
- */
-export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
-  function Avatar({ className, size = "md", ...props }, ref) {
-    return (
-      <BaseAvatar.Root
-        ref={ref}
-        className={cn(avatar, byKey[`avatar--${size}`], className)}
-        {...props}
-      />
-    );
-  },
-);
-
-/** Avatar 내부의 실제 이미지. 로드 실패 시 자동으로 가려지고 fallback이 노출된다. */
-export const AvatarImage = React.forwardRef<
-  HTMLImageElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>
-  >
->(function AvatarImage({ className, ...props }, ref) {
-  return (
-    <BaseAvatar.Image
-      ref={ref}
-      className={cn(avatar__image, className)}
-      {...props}
-    />
-  );
-});
-
-/** 이미지가 로드되지 않을 때 표시되는 대체 콘텐츠. 이니셜이나 아이콘을 권장. */
-export const AvatarFallback = React.forwardRef<
-  HTMLSpanElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>
-  >
->(function AvatarFallback({ className, ...props }, ref) {
-  return (
-    <BaseAvatar.Fallback
-      ref={ref}
-      className={cn(avatar__fallback, className)}
-      {...props}
-    />
-  );
-});

package/data/registry/react/components/avatar/styles.css.ts

@@ -1,68 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const avatar = style({
-  position: "relative",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0,
-  verticalAlign: "middle",
-  overflow: "hidden",
-  borderRadius: "999px",
-  background: "var(--background-muted)",
-  color: "var(--foreground-muted)",
-  fontWeight: "var(--weight-medium)",
-  userSelect: "none",
-});
-
-export const avatarSm = style({
-  width: "1.75rem",
-  height: "1.75rem",
-  fontSize: "var(--text-xs)",
-});
-
-export const avatarMd = style({
-  width: "2.5rem",
-  height: "2.5rem",
-  fontSize: "0.8125rem",
-});
-
-export const avatarLg = style({
-  width: "3rem",
-  height: "3rem",
-  fontSize: "var(--text-sm)",
-});
-
-export const avatarXl = style({
-  width: "4rem",
-  height: "4rem",
-  fontSize: "var(--text-base)",
-});
-
-export const avatar__image = style({
-  width: "100%",
-  height: "100%",
-  objectFit: "cover",
-  display: "block",
-});
-
-export const avatar__fallback = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "100%",
-  height: "100%",
-  textTransform: "uppercase",
-  letterSpacing: "0.02em",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "avatar": avatar,
-  "avatar--sm": avatarSm,
-  "avatar--md": avatarMd,
-  "avatar--lg": avatarLg,
-  "avatar--xl": avatarXl,
-  "avatar__image": avatar__image,
-  "avatar__fallback": avatar__fallback,
-};

package/data/registry/react/components/badge/index.vanilla-extract.tsx

@@ -1,40 +0,0 @@
-import * as React from "react";
-import { byKey, badge, badgeSm, badgeMd, badgePrimary, badgeSecondary, badgeSuccess, badgeWarning, badgeDanger, badgeOutline } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-export type BadgeVariant =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "warning"
-  | "danger"
-  | "outline";
-
-export type BadgeSize = "sm" | "md";
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-}
-
-/**
- * 상태·카테고리·수량 등을 짧게 표기하는 인라인 라벨. 의미 전달이 색에만
- * 의존하지 않도록 텍스트나 아이콘과 함께 사용할 것.
- */
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  function Badge({ className, variant = "primary", size = "md", ...props }, ref) {
-    return (
-      <span
-        ref={ref}
-        className={cn(
-          badge,
-          byKey[`badge--${variant}`],
-          byKey[`badge--${size}`],
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);

package/data/registry/react/components/badge/styles.css.ts

@@ -1,71 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const badge = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "0.25rem",
-  padding: "0 0.5rem",
-  border: "1px solid transparent",
-  borderRadius: "999px",
-  fontWeight: "var(--weight-medium)",
-  lineHeight: 1,
-  whiteSpace: "nowrap",
-  verticalAlign: "middle",
-  userSelect: "none",
-});
-
-export const badgeSm = style({
-  height: "1.25rem",
-  fontSize: "0.6875rem",
-  padding: "0 0.375rem",
-});
-
-export const badgeMd = style({
-  height: "1.5rem",
-  fontSize: "var(--text-xs)",
-});
-
-export const badgePrimary = style({
-  background: "var(--primary)",
-  color: "var(--primary-foreground)",
-});
-
-export const badgeSecondary = style({
-  background: "var(--background-muted)",
-  color: "var(--foreground)",
-  borderColor: "var(--border)",
-});
-
-export const badgeSuccess = style({
-  background: "var(--success, #16a34a)",
-  color: "#fff",
-});
-
-export const badgeWarning = style({
-  background: "var(--warning, #d97706)",
-  color: "#fff",
-});
-
-export const badgeDanger = style({
-  background: "var(--danger)",
-  color: "var(--danger-foreground, #fff)",
-});
-
-export const badgeOutline = style({
-  background: "transparent",
-  color: "var(--foreground)",
-  borderColor: "var(--border-strong)",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "badge": badge,
-  "badge--sm": badgeSm,
-  "badge--md": badgeMd,
-  "badge--primary": badgePrimary,
-  "badge--secondary": badgeSecondary,
-  "badge--success": badgeSuccess,
-  "badge--warning": badgeWarning,
-  "badge--danger": badgeDanger,
-  "badge--outline": badgeOutline,
-};