sh-ui-cli 0.76.0 → 0.78.0

package/data/changelog/versions.json

@@ -2,6 +2,64 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.78.0",
+      "date": "2026-05-12",
+      "title": "minor — Next.js 호환성 fixes (exports map · relative imports · FOUC · SelectValue label · sidebar tokens)",
+      "type": "minor",
+      "highlights": [
+        "**ui-core `package.json` exports map 수정** — `./components/*: ./src/components/*.tsx` → `./src/components/*/index.tsx`. 폴더+index 패턴에 맞춰 `@workspace/ui-core/components/<name>` import 가 즉시 resolve. v0.77 까지 scaffold 직후 매번 손으로 패치해야 했던 버그.",
+        "**registry typecheck 통과** — `markdown-editor` / `sidebar` 의 inter-component 상대 import 에 `/index.tsx` 명시 (node16/nodenext + bundler 둘 다 동작). `sidebar` 의 `PopoverTrigger` render callback 의 implicit `any` 도 명시 타입.",
+        "**`SidebarMenuButton` render 자식 `data-active` 보존** — `cloneElement` 가 사용자가 박은 `data-active` 를 sh-ui 자동값으로 덮어쓰던 버그. 이제 자식 명시값이 우선. 자기 디자인 시스템 active state 를 `[data-active]` 셀렉터로 다루는 흐름 가능.",
+        "**`SelectValue` children render 패턴 추가** — `<SelectValue>{(v) => labels[v as string]}</SelectValue>` 형태로 value → label 매핑. i18n 라벨 노출에 필수 (예: `light` → `라이트`).",
+        "**`CodeEditor` 에 `yaml` / `plaintext` 추가** — `@codemirror/lang-yaml` deps + language enum 확장. YAML convention 파일에 syntax highlighting.",
+        "**Sidebar 토큰 1급 노출** — `--sidebar-bg` / `--sidebar-fg` / `--sidebar-border` / `--sidebar-accent` / `--sidebar-accent-fg` 가 `tokens.css` 메인 셋과 globals.css 의 `@theme inline` 매핑에 정식 등재. Tailwind `bg-sidebar-bg` utility 직접 사용 가능.",
+        "**RootLayout FOUC 차단 inline script** — next-themes mount 전 첫 paint 에 dark/light class 적용. 다크모드 진입 시 light 한 frame 깜빡임 해소. 모든 arch (fsd/flat/mes) × (nextjs-app/nextjs-standalone) 템플릿에 적용.",
+        "**auth-jwt dev bypass flag** — `NEXT_PUBLIC_DEV_AUTH_BYPASS=true` 시 dev 환경에서 proxy.ts 가드 우회. `.env.example` 에 자리표시자 포함, production 빌드에선 무시.",
+        "**i18n boilerplate 확장** — `nav` / `app` / `form` 네임스페이스 + `common` 에 create/name/description/empty 추가.",
+        "**MCP 가이드 추가** — Base UI 합성 함정 (SSR hydration mismatch, `DropdownMenuItem` 안 `DialogTrigger` 가 안 열리는 패턴) 회피 코드 예시를 sh_ui_* 툴 description 에 박음."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.78.0"
+    },
+    {
+      "version": "0.77.1",
+      "date": "2026-05-12",
+      "title": "security — `sh_ui_create_project` / `sh_ui_add_app` path traversal 차단",
+      "type": "patch",
+      "highlights": [
+        "**path traversal 차단** — MCP 호출자가 `name` 인자에 `../` / 절대경로 / 선행 `.` 을 넣어 부모 디렉토리 밖의 임의 경로를 지정하던 흐름 차단. 영숫자 + `_` / `-` / `.` 만 허용 (단, `.` 로 시작 불가).",
+        "**임의 디렉토리 삭제 봉쇄** — `force: true` + 내부 `yes: true` 조합으로 `fs.remove(targetDir)` 가 traversal 경로에 실행되던 흐름을 진입부 검증 + `assertWithin(parent, child)` 가드로 이중 차단.",
+        "CLI / MCP 두 경로 모두 `createProject` / `addApp` 진입부에서 일괄 검증 — 호출 표면 어느 쪽으로도 우회 불가.",
+        "회귀 가드 — `test/name-validation.test.js` 추가 (traversal, 절대경로, 숨김 디렉토리, 셸 메타문자, NUL 바이트 등 29 케이스)."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.77.1"
+    },
+    {
+      "version": "0.77.0",
+      "date": "2026-05-11",
+      "title": "minor — `--arch mes` 프리셋 — 백오피스용 페이지 격리 구조",
+      "type": "minor",
+      "highlights": [
+        "**`sh-ui-cli create ... --arch mes` 신규 지원** — 스마트팩토리 MES·ERP·관리자 도구처럼 페이지 간 상호작용이 적은 CRUD-heavy 앱을 위한 페이지 격리 프리셋. FSD 의 6 레이어가 과한 백오피스 시나리오 전용.",
+        "**페이지 격리 구조** — 각 `src/pages/<name>/` 가 자기완결 슬롯 (index.tsx + components/ + api.ts + hooks.ts + schema.ts + columns.ts). `app/<route>/page.tsx` 는 `export { default } from '@/pages/<name>'` 한 줄 위임. 페이지 끼리는 import 금지 (eslint boundaries 강제).",
+        "**`src/pages/sign-in/` 스텁 동봉** — 슬롯 레이아웃을 보여주는 빈 페이지 (동작 X, 폴더 모양만). 새 페이지 추가 = 이 폴더 복사 → 이름 교체.",
+        "**tsconfig** — catch-all `@/*` → `./src/*`. 모든 import 가 `@/pages/...`, `@/components/...`, `@/lib/...` 처럼 짧고 일관.",
+        "monorepo (`apps/<name>` + `packages/ui/...`) 에서도 `--arch mes` 동작. nextjs-standalone / nextjs-app 두 템플릿 모두 mes overlay 포함."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.77.0"
+    },
+    {
+      "version": "0.76.1",
+      "date": "2026-05-11",
+      "title": "patch — Switch ON 상태 thumb 가시성 (다크모드)",
+      "type": "patch",
+      "highlights": [
+        "**Switch — checked thumb 가 `--primary-foreground` 로 전환** — 다크모드는 `--primary` 가 거의 흰색(`#FAFAFA`)인데 thumb 가 하드코딩 `white` 라 ON 상태에서 thumb 와 트랙이 같은 색으로 묻혀 위치를 알 수 없던 문제 수정.",
+        "변종 4종 동기화 — `styles.css` / `styles.module.css` / `index.tailwind.tsx` / docs 복사본.",
+        "라이트/다크 양쪽 모두 트랙과 thumb 가 항상 반전 대비를 유지."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.76.1"
+    },
     {
       "version": "0.76.0",
       "date": "2026-05-11",

package/data/registry/react/components/code-editor/index.module.tsx

@@ -9,11 +9,13 @@ import { json } from "@codemirror/lang-json";
 import { css as cssLang } from "@codemirror/lang-css";
 import { html } from "@codemirror/lang-html";
 import { markdown } from "@codemirror/lang-markdown";
+import { yaml } from "@codemirror/lang-yaml";
 import styles from "./styles.module.css";
 
 import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
   | "text"
+  | "plaintext"
   | "javascript"
   | "typescript"
   | "jsx"
@@ -21,7 +23,8 @@ export type CodeEditorLanguage =
   | "json"
   | "css"
   | "html"
-  | "markdown";
+  | "markdown"
+  | "yaml";
 
 export interface CodeEditorProps {
   /**
@@ -79,7 +82,10 @@ function languageExtension(language: CodeEditorLanguage): Extension {
       return html();
     case "markdown":
       return markdown();
+    case "yaml":
+      return yaml();
     case "text":
+    case "plaintext":
     default:
       return [];
   }

package/data/registry/react/components/code-editor/index.tailwind.tsx

@@ -9,11 +9,12 @@ import { json } from "@codemirror/lang-json";
 import { css as cssLang } from "@codemirror/lang-css";
 import { html } from "@codemirror/lang-html";
 import { markdown } from "@codemirror/lang-markdown";
+import { yaml } from "@codemirror/lang-yaml";
 
 import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
-  | "text" | "javascript" | "typescript" | "jsx" | "tsx"
-  | "json" | "css" | "html" | "markdown";
+  | "text" | "plaintext" | "javascript" | "typescript" | "jsx" | "tsx"
+  | "json" | "css" | "html" | "markdown" | "yaml";
 
 export interface CodeEditorProps {
   value?: string;
@@ -42,7 +43,9 @@ function languageExtension(language: CodeEditorLanguage): Extension {
     case "css": return cssLang();
     case "html": return html();
     case "markdown": return markdown();
+    case "yaml": return yaml();
     case "text":
+    case "plaintext":
     default: return [];
   }
 }

package/data/registry/react/components/code-editor/index.tsx

@@ -9,11 +9,13 @@ import { json } from "@codemirror/lang-json";
 import { css as cssLang } from "@codemirror/lang-css";
 import { html } from "@codemirror/lang-html";
 import { markdown } from "@codemirror/lang-markdown";
+import { yaml } from "@codemirror/lang-yaml";
 import "./styles.css";
 
 import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
   | "text"
+  | "plaintext"
   | "javascript"
   | "typescript"
   | "jsx"
@@ -21,7 +23,8 @@ export type CodeEditorLanguage =
   | "json"
   | "css"
   | "html"
-  | "markdown";
+  | "markdown"
+  | "yaml";
 
 export interface CodeEditorProps {
   /**
@@ -79,7 +82,10 @@ function languageExtension(language: CodeEditorLanguage): Extension {
       return html();
     case "markdown":
       return markdown();
+    case "yaml":
+      return yaml();
     case "text":
+    case "plaintext":
     default:
       return [];
   }

package/data/registry/react/components/markdown-editor/index.module.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor";
+import { CodeEditor } from "../code-editor/index.tsx";
 import styles from "./styles.module.css";
 
 import { cn } from "@SH_UI_UTILS@";

package/data/registry/react/components/markdown-editor/index.tailwind.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor";
+import { CodeEditor } from "../code-editor/index.tsx";
 
 import { cn } from "@SH_UI_UTILS@";
 export interface MarkdownEditorProps {

package/data/registry/react/components/markdown-editor/index.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor";
+import { CodeEditor } from "../code-editor/index.tsx";
 import "./styles.css";
 
 import { cn } from "@SH_UI_UTILS@";

package/data/registry/react/components/select/index.module.tsx

@@ -8,24 +8,35 @@ import styles from "./styles.module.css";
 import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
-/** shadcn 호환: <SelectValue placeholder="..." /> */
+/**
+ * shadcn 호환 SelectValue. children 으로 value → label 매핑 함수 전달 가능.
+ *
+ *   <SelectValue placeholder="모드">
+ *     {(v) => ({ light: "라이트", dark: "다크" })[v as string] ?? null}
+ *   </SelectValue>
+ */
 export function SelectValue({
   placeholder,
   className,
+  children,
   ...props
-}: { placeholder?: string; className?: string } & Omit<
+}: {
+  placeholder?: string;
+  className?: string;
+  children?: (value: unknown) => React.ReactNode;
+} & Omit<
   React.ComponentPropsWithoutRef<typeof BaseSelect.Value>,
   "children"
 >) {
   return (
     <BaseSelect.Value className={cn(styles.select__value, className)} {...props}>
-      {(value) =>
-        value !== null && value !== undefined && value !== "" ? (
-          (value as React.ReactNode)
-        ) : (
-          <span className={styles.select__placeholder}>{placeholder}</span>
-        )
-      }
+      {(value) => {
+        if (value === null || value === undefined || value === "") {
+          return <span className={styles.select__placeholder}>{placeholder}</span>;
+        }
+        if (children) return children(value);
+        return value as React.ReactNode;
+      }}
     </BaseSelect.Value>
   );
 }

package/data/registry/react/components/select/index.tailwind.tsx

@@ -7,18 +7,31 @@ import { Select as BaseSelect } from "@base-ui/react/select";
 import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
-export function SelectValue({ placeholder, className, ...props }: { placeholder?: string; className?: string } & Omit<
+/**
+ * Select 트리거 안에 현재 선택값을 표시. children 으로 value→label 매핑 함수
+ * 전달 가능 (i18n / 다른 표시 텍스트). 미지정 시 value 를 그대로 렌더.
+ */
+export function SelectValue({
+  placeholder,
+  className,
+  children,
+  ...props
+}: {
+  placeholder?: string;
+  className?: string;
+  children?: (value: unknown) => React.ReactNode;
+} & Omit<
   React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children"
 >) {
   return (
     <BaseSelect.Value className={cn("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
-      {(value) =>
-        value !== null && value !== undefined && value !== "" ? (
-          (value as React.ReactNode)
-        ) : (
-          <span className="text-foreground-subtle">{placeholder}</span>
-        )
-      }
+      {(value) => {
+        if (value === null || value === undefined || value === "") {
+          return <span className="text-foreground-subtle">{placeholder}</span>;
+        }
+        if (children) return children(value);
+        return value as React.ReactNode;
+      }}
     </BaseSelect.Value>
   );
 }

package/data/registry/react/components/select/index.tsx

@@ -8,24 +8,43 @@ import "./styles.css";
 import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
-/** shadcn 호환: <SelectValue placeholder="..." /> */
+/**
+ * Select 트리거 안에 현재 선택값을 표시. shadcn 호환 형태.
+ *
+ * 기본은 raw value 를 그대로 렌더. value 와 label 이 다르면 (예: 다국어 라벨)
+ * children 으로 매핑 함수를 전달해 직접 표시할 노드를 만든다.
+ *
+ *   // 1) 기본: value 그대로 표시
+ *   <SelectValue placeholder="선택" />
+ *
+ *   // 2) value → label 매핑 (i18n)
+ *   <SelectValue placeholder="모드">
+ *     {(v) => ({ light: "라이트", dark: "다크" })[v as string] ?? null}
+ *   </SelectValue>
+ */
 export function SelectValue({
   placeholder,
   className,
+  children,
   ...props
-}: { placeholder?: string; className?: string } & Omit<
+}: {
+  placeholder?: string;
+  className?: string;
+  /** value 를 표시 노드로 매핑. 미지정 시 value 를 그대로 렌더. */
+  children?: (value: unknown) => React.ReactNode;
+} & Omit<
   React.ComponentPropsWithoutRef<typeof BaseSelect.Value>,
   "children"
 >) {
   return (
     <BaseSelect.Value className={cn("sh-ui-select__value", className)} {...props}>
-      {(value) =>
-        value !== null && value !== undefined && value !== "" ? (
-          (value as React.ReactNode)
-        ) : (
-          <span className="sh-ui-select__placeholder">{placeholder}</span>
-        )
-      }
+      {(value) => {
+        if (value === null || value === undefined || value === "") {
+          return <span className="sh-ui-select__placeholder">{placeholder}</span>;
+        }
+        if (children) return children(value);
+        return value as React.ReactNode;
+      }}
     </BaseSelect.Value>
   );
 }

package/data/registry/react/components/sidebar/index.module.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { cn } from "@SH_UI_UTILS@";
 import { ChevronRightIcon, PanelLeftIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.tsx";
 import styles from "./styles.module.css";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -643,7 +643,9 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
       className);
 
     if (render && React.isValidElement(render)) {
-      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode; "data-active"?: string | boolean }>;
+      const childDataActive = child.props["data-active"];
+      const dataActive = childDataActive !== undefined ? childDataActive : resolvedIsActive || undefined;
       return React.cloneElement(
         child,
         {
@@ -651,7 +653,7 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
           ...props,
           onClick: handleClick,
           className: cn(child.props.className, cls),
-          "data-active": resolvedIsActive || undefined,
+          "data-active": dataActive,
         } as Record<string, unknown>,
         children ?? child.props.children,
       );
@@ -724,14 +726,16 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
       className);
 
     if (render && React.isValidElement(render)) {
-      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode; "data-active"?: string | boolean }>;
+      const childDataActive = child.props["data-active"];
+      const dataActive = childDataActive !== undefined ? childDataActive : resolvedIsActive || undefined;
       return React.cloneElement(
         child,
         {
           ref,
           ...props,
           className: cn(child.props.className, cls),
-          "data-active": resolvedIsActive || undefined,
+          "data-active": dataActive,
         } as Record<string, unknown>,
         children ?? child.props.children,
       );
@@ -876,7 +880,7 @@ export function SidebarCollapsibleTrigger({
         openOnHover
         delay={0}
         closeDelay={150}
-        render={(triggerProps) => (
+        render={(triggerProps: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
           <button
             {...triggerProps}
             {...props}

package/data/registry/react/components/sidebar/index.tailwind.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { cn } from "@SH_UI_UTILS@";
 import { ChevronRightIcon, PanelLeftIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.tsx";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -384,7 +384,9 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
     const cls = cn(menuButtonBase, menuButtonSize[size], className);
 
     if (render && React.isValidElement(render)) {
-      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode; "data-active"?: string | boolean }>;
+      const childDataActive = child.props["data-active"];
+      const dataActive = childDataActive !== undefined ? childDataActive : resolvedIsActive || undefined;
       return React.cloneElement(
         child,
         {
@@ -392,7 +394,7 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
           ...props,
           onClick: handleClick,
           className: cn(child.props.className, cls),
-          "data-active": resolvedIsActive || undefined,
+          "data-active": dataActive,
         } as Record<string, unknown>,
         children ?? child.props.children,
       );
@@ -440,14 +442,16 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
     const cls = cn(menuSubButtonBase, size === "sm" && "text-[length:var(--text-xs)]", className);
 
     if (render && React.isValidElement(render)) {
-      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode; "data-active"?: string | boolean }>;
+      const childDataActive = child.props["data-active"];
+      const dataActive = childDataActive !== undefined ? childDataActive : resolvedIsActive || undefined;
       return React.cloneElement(
         child,
         {
           ref,
           ...props,
           className: cn(child.props.className, cls),
-          "data-active": resolvedIsActive || undefined,
+          "data-active": dataActive,
         } as Record<string, unknown>,
         children ?? child.props.children,
       );
@@ -524,7 +528,7 @@ export function SidebarCollapsibleTrigger({ className, size = "md", children, on
         openOnHover
         delay={0}
         closeDelay={150}
-        render={(triggerProps) => (
+        render={(triggerProps: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
           <button {...triggerProps} {...props} type="button" className={cls} data-state={isOpen ? "open" : "closed"}>
             {content}
           </button>

package/data/registry/react/components/sidebar/index.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { cn } from "@SH_UI_UTILS@";
 import { ChevronRightIcon, PanelLeftIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.tsx";
 import "./styles.css";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -647,7 +647,16 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
       const child = render as React.ReactElement<{
         className?: string;
         children?: React.ReactNode;
+        "data-active"?: string | boolean;
       }>;
+      // 자식이 명시한 data-active 가 있으면 보존 (사용자가 자기 디자인 시스템의
+      // active state 를 data-active 셀렉터로 다루는 경우). 그 외엔 sh-ui 의
+      // 자동 추론값 사용.
+      const childDataActive = child.props["data-active"];
+      const dataActive =
+        childDataActive !== undefined
+          ? childDataActive
+          : resolvedIsActive || undefined;
       return React.cloneElement(
         child,
         {
@@ -655,7 +664,7 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
           ...props,
           onClick: handleClick,
           className: cn(child.props.className, cls),
-          "data-active": resolvedIsActive || undefined,
+          "data-active": dataActive,
         } as Record<string, unknown>,
         children ?? child.props.children,
       );
@@ -734,14 +743,21 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
       const child = render as React.ReactElement<{
         className?: string;
         children?: React.ReactNode;
+        "data-active"?: string | boolean;
       }>;
+      // 자식이 명시한 data-active 우선 (자기 디자인 시스템 호환).
+      const childDataActive = child.props["data-active"];
+      const dataActive =
+        childDataActive !== undefined
+          ? childDataActive
+          : resolvedIsActive || undefined;
       return React.cloneElement(
         child,
         {
           ref,
           ...props,
           className: cn(child.props.className, cls),
-          "data-active": resolvedIsActive || undefined,
+          "data-active": dataActive,
         } as Record<string, unknown>,
         children ?? child.props.children,
       );
@@ -886,7 +902,7 @@ export function SidebarCollapsibleTrigger({
         openOnHover
         delay={0}
         closeDelay={150}
-        render={(triggerProps) => (
+        render={(triggerProps: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
           <button
             {...triggerProps}
             {...props}

package/data/registry/react/components/switch/index.tailwind.tsx

@@ -18,7 +18,7 @@ const switchRoot = cva(
 );
 
 const switchThumb = cva(
-  "block rounded-full bg-white shadow-[var(--shadow-sm)] transition-transform duration-150 ease-out motion-reduce:transition-none forced-colors:[background:ButtonText] forced-colors:data-[checked]:[background:HighlightText] forced-colors:data-[disabled]:[background:GrayText]",
+  "block rounded-full bg-white data-[checked]:bg-primary-foreground shadow-[var(--shadow-sm)] transition-transform duration-150 ease-out motion-reduce:transition-none forced-colors:[background:ButtonText] forced-colors:data-[checked]:[background:HighlightText] forced-colors:data-[disabled]:[background:GrayText]",
   {
     variants: {
       size: {

package/data/registry/react/components/switch/styles.css

@@ -74,6 +74,12 @@
   transform: translateX(1.125rem);
 }
 
+/* checked 상태에서 thumb 와 트랙(--primary)이 같은 색으로 보이지 않도록
+   --primary-foreground 로 전환 (다크모드: primary=near-white → thumb=dark). */
+.sh-ui-switch[data-checked] .sh-ui-switch__thumb {
+  background: var(--primary-foreground);
+}
+
 /* reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .sh-ui-switch,

package/data/registry/react/components/switch/styles.module.css

@@ -74,6 +74,12 @@
   transform: translateX(1.125rem);
 }
 
+/* checked 상태에서 thumb 와 트랙(--primary)이 같은 색으로 보이지 않도록
+   --primary-foreground 로 전환 (다크모드: primary=near-white → thumb=dark). */
+.switch[data-checked] .switch__thumb {
+  background: var(--primary-foreground);
+}
+
 /* reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .switch,

package/data/registry/react/registry.json

@@ -576,7 +576,8 @@
         "@codemirror/lang-json",
         "@codemirror/lang-css",
         "@codemirror/lang-html",
-        "@codemirror/lang-markdown"
+        "@codemirror/lang-markdown",
+        "@codemirror/lang-yaml"
       ],
       "registryDependencies": [
         "utils"

package/data/registry/react/tokens-used.json

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-05-09T05:12:23.351Z",
+  "$generated": "2026-05-11T07:02:18.245Z",
   "components": {
     "button": {
       "plain": [
@@ -1556,6 +1556,7 @@
         "--border-width-strong",
         "--opacity-disabled",
         "--primary",
+        "--primary-foreground",
         "--primary-hover",
         "--ring",
         "--shadow-sm"
@@ -1571,6 +1572,7 @@
         "--border-width-strong",
         "--opacity-disabled",
         "--primary",
+        "--primary-foreground",
         "--primary-hover",
         "--ring",
         "--shadow-sm"

package/data/tokens/src/semantic.json

@@ -28,7 +28,14 @@
       "foreground": { "$value": "{color.white}", "$type": "color" },
       "hover":      { "$value": "{color.red.700}", "$type": "color" }
     },
-    "ring": { "$value": "{color.{base}.400}", "$type": "color" }
+    "ring": { "$value": "{color.{base}.400}", "$type": "color" },
+    "sidebar": {
+      "bg":         { "$value": "{color.{base}.50}",  "$type": "color" },
+      "fg":         { "$value": "{color.{base}.950}", "$type": "color" },
+      "border":     { "$value": "{color.{base}.200}", "$type": "color" },
+      "accent":     { "$value": "{color.{base}.100}", "$type": "color" },
+      "accent-fg":  { "$value": "{color.{base}.950}", "$type": "color" }
+    }
   },
 
   "dark": {
@@ -58,7 +65,14 @@
       "foreground": { "$value": "{color.white}", "$type": "color" },
       "hover":      { "$value": "{color.red.500}", "$type": "color" }
     },
-    "ring": { "$value": "{color.{base}.500}", "$type": "color" }
+    "ring": { "$value": "{color.{base}.500}", "$type": "color" },
+    "sidebar": {
+      "bg":         { "$value": "{color.{base}.900}", "$type": "color" },
+      "fg":         { "$value": "{color.{base}.50}",  "$type": "color" },
+      "border":     { "$value": "{color.{base}.800}", "$type": "color" },
+      "accent":     { "$value": "{color.{base}.800}", "$type": "color" },
+      "accent-fg":  { "$value": "{color.{base}.50}",  "$type": "color" }
+    }
   },
 
   "radius": {

package/package.json

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

package/src/create/architectures/index.js

@@ -1,8 +1,9 @@
 import { fsdArch } from './fsd.js';
 import { flatArch } from './flat.js';
+import { mesArch } from './mes.js';
 import { validateArchitectures } from './archSchema.js';
 
-export const allArchitectures = [fsdArch, flatArch];
+export const allArchitectures = [fsdArch, flatArch, mesArch];
 
 // 모듈 로드 시점에 모든 arch 디스크립터를 schema 로 검증.
 // 누락된 키, 잘못된 형태가 있으면 즉시 에러.