sh-ui-cli 0.24.0 → 0.31.1

package/data/registry/react/registry.json

@@ -157,6 +157,106 @@
       ],
       "registryDependencies": []
     },
+    "code-tabs": {
+      "name": "code-tabs",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/code-tabs/index.tsx",
+          "dest": "{components}/code-tabs/index.tsx"
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": [
+        "tabs",
+        "code-panel"
+      ]
+    },
+    "page-toc": {
+      "name": "page-toc",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/page-toc/index.tsx",
+          "dest": "{components}/page-toc/index.tsx"
+        },
+        {
+          "src": "components/page-toc/styles.css",
+          "dest": "{components}/page-toc/styles.css"
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    "code-editor": {
+      "name": "code-editor",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/code-editor/index.tsx",
+          "dest": "{components}/code-editor/index.tsx"
+        },
+        {
+          "src": "components/code-editor/styles.css",
+          "dest": "{components}/code-editor/styles.css"
+        }
+      ],
+      "dependencies": [
+        "codemirror",
+        "@codemirror/state",
+        "@codemirror/view",
+        "@codemirror/lang-javascript",
+        "@codemirror/lang-json",
+        "@codemirror/lang-css",
+        "@codemirror/lang-html",
+        "@codemirror/lang-markdown"
+      ],
+      "registryDependencies": []
+    },
+    "markdown-editor": {
+      "name": "markdown-editor",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/markdown-editor/index.tsx",
+          "dest": "{components}/markdown-editor/index.tsx"
+        },
+        {
+          "src": "components/markdown-editor/styles.css",
+          "dest": "{components}/markdown-editor/styles.css"
+        }
+      ],
+      "dependencies": [
+        "react-markdown",
+        "remark-gfm"
+      ],
+      "registryDependencies": [
+        "code-editor"
+      ]
+    },
+    "rich-text-editor": {
+      "name": "rich-text-editor",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/rich-text-editor/index.tsx",
+          "dest": "{components}/rich-text-editor/index.tsx"
+        },
+        {
+          "src": "components/rich-text-editor/styles.css",
+          "dest": "{components}/rich-text-editor/styles.css"
+        }
+      ],
+      "dependencies": [
+        "@tiptap/react",
+        "@tiptap/pm",
+        "@tiptap/starter-kit",
+        "@tiptap/extension-placeholder",
+        "@tiptap/extension-link",
+        "lucide-react"
+      ],
+      "registryDependencies": []
+    },
     "select": {
       "name": "select",
       "type": "component",

package/data/summaries/react.json

@@ -27,7 +27,7 @@
     "accordion": "펼침/접힘 아코디언 — single/multiple (Base UI).",
     "carousel": "슬라이드 캐러셀 — Embla 기반, autoplay/autoscroll.",
     "sidebar": "앱 사이드바 — collapsible, SidebarMenu/SidebarGroup 조합.",
-    "header": "앱 헤더 — 로고/네비/액션 compound.",
+    "header": "앱 헤더 — 로고/네비/액션 compound, 데스크탑 inline / 모바일 drawer 자동 전환. drawer focus trap·ESC·focus restore. HeaderNav value(controlled) / defaultValue+onValueChange(uncontrolled) 로 자식 HeaderItem active 자동 매칭 (aria-current 자동, match 커스터마이즈). HeaderMenu(서브메뉴, 데스크탑 portal dropdown / drawer collapsible) · HeaderNavGroup(섹션 라벨) · HeaderDesktopOnly/HeaderMobileOnly(가시성 토글, drawer 이동 없음). variant(solid/transparent/blur) · stickyHide(prefers-reduced-motion 존중, 컨테이너 스크롤 자동 감지) 정식 지원. backdrop-filter @supports 폴백.",
     "breadcrumb": "경로 내비게이션 — compound (Breadcrumb.List/Item/Link/Page/Separator/Ellipsis). aria-current 자동.",
     "pagination": "페이지 단위 내비게이션 — compound (PaginationContent/Item/Link/Previous/Next/Ellipsis). getPaginationRange 유틸 동봉. aria-current 자동.",
     "avatar": "프로필 아바타 — 이미지 fallback → initials (Base UI).",
@@ -38,6 +38,11 @@
     "skeleton": "스켈레톤 로딩 플레이스홀더.",
     "theme": "테마 프로바이더 + useTheme 훅 — light/dark/system.",
     "code-panel": "Shiki 기반 코드 하이라이트 패널 — 복사 버튼 포함.",
+    "code-tabs": "여러 코드 뷰(예: React/Flutter, 강조/전체)를 탭으로 전환 — Tabs + CodePanel 합성, 각 탭 내용은 CodePanelProps 그대로.",
+    "page-toc": "페이지 자동 목차 — 헤딩 스캔 · slugify · IntersectionObserver active 추적 · smooth scroll. routeKey 로 라우트 변경 자동 재스캔, levels/excludeSelector 커스터마이즈.",
+    "code-editor": "CodeMirror 6 기반 코드 에디터 — js/ts/jsx/tsx/json/css/html/markdown, sh-ui 토큰 테마, readOnly·placeholder·minHeight/maxHeight. controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
+    "markdown-editor": "마크다운 에디터 — CodeEditor + react-markdown 라이브 프리뷰 합성, GFM 지원, raw HTML 차단으로 XSS 방어. controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
+    "rich-text-editor": "Tiptap 3 기반 WYSIWYG 에디터 — HTML 입출력, 기본 toolbar(헤딩·리스트·인용·코드·링크·강조), readOnly·placeholder. controlled(value/onChange) · uncontrolled(defaultValue) 모두 지원.",
     "base": "CSS 리셋 — base.css.",
     "breakpoints": "반응형 미디어 쿼리 토큰 — breakpoints.css.",
     "focus-ring": "공용 포커스 링 스타일 — focus-ring.css.",

package/package.json

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

package/src/mcp.mjs

@@ -113,7 +113,6 @@ const SERVER_INSTRUCTIONS = `sh-ui — Base UI 위에 빌드된 React/Flutter
   - 인터랙티브 프롬프트 없이 한 번에 스캐폴드 + 토큰 + sh-ui.config.json 생성
 
 **2차 — Bash** (사용자가 직접 셸에서 돌리고 싶다고 명시할 때만):
-  npm create sh-ui my-app
   npx sh-ui-cli create my-app --platform next --structure standalone --yes
 
 \`create-next-app\` + \`sh_ui_init\` 조합은 **쓰지 말 것** — 위 두 경로가 더 짧고 sh-ui 관용에 맞다.

package/templates/flutter-standalone/README.md

@@ -12,8 +12,8 @@ flutter run
 ## sh-ui 위젯 추가
 
 ```bash
-npx sh-ui add button
-npx sh-ui add card input
+npx sh-ui-cli add button
+npx sh-ui-cli add card input
 ```
 
 위젯은 `lib/sh_ui/widgets/` 아래로 복사됩니다. 설정은 `sh-ui.config.json` 을 참조하세요.

package/templates/monorepo/README.md

@@ -77,7 +77,7 @@ pnpm dev          # 모든 앱 동시 실행
 ## 앱 추가
 
 ```bash
-npx sh-ui-create add-app
+npx sh-ui-cli create add-app
 ```
 
 `apps/{name}/` 과 `packages/ui/ui-apps/ui-{name}/` 을 함께 생성합니다.
@@ -93,11 +93,11 @@ pnpm --filter admin build
 
 ```bash
 # 모든 ui 패키지에 추가 (대화형)
-npx sh-ui-create add-component button
+npx sh-ui-cli create add-component button
 
 # 특정 앱에만 추가
-npx sh-ui-create add-component button --app web
+npx sh-ui-cli create add-component button --app web
 ```
 
-내부적으로 `packages/ui/ui-apps/ui-{app}/` 디렉토리에서 `npx sh-ui add button` 이 실행되며,
+내부적으로 `packages/ui/ui-apps/ui-{app}/` 디렉토리에서 `npx sh-ui-cli add button` 이 실행되며,
 각 패키지의 `sh-ui.config.json` 에 선언된 경로로 컴포넌트가 복사됩니다.

package/templates/nextjs-app/app/api/proxy/[...path]/route.ts

@@ -0,0 +1,85 @@
+import { cookies } from 'next/headers';
+import { NextResponse, type NextRequest } from 'next/server';
+
+const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
+const ACCESS_TOKEN_COOKIE = 'accessToken';
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+const proxyRequest = async (
+  request: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+  method: string,
+) => {
+  const { path } = await ctx.params;
+  const url = new URL(`${API_URL}/${path.join('/')}`);
+
+  request.nextUrl.searchParams.forEach((value, key) => {
+    url.searchParams.set(key, value);
+  });
+
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get(ACCESS_TOKEN_COOKIE)?.value;
+  const locale =
+    cookieStore.get(LOCALE_COOKIE)?.value ??
+    request.headers.get('Accept-Language') ??
+    undefined;
+
+  const headers: Record<string, string> = {};
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  if (locale) headers['Accept-Language'] = locale;
+
+  let body: BodyInit | undefined;
+  if (method !== 'GET' && method !== 'HEAD') {
+    const contentType = request.headers.get('Content-Type');
+    if (contentType?.includes('multipart/form-data')) {
+      body = await request.formData();
+    } else {
+      headers['Content-Type'] = 'application/json';
+      body = await request.text();
+    }
+  }
+
+  try {
+    const response = await fetch(url.toString(), { method, headers, body });
+    const data = await response.json();
+    return NextResponse.json(data, { status: response.status });
+  } catch (error) {
+    console.error(`[PROXY] ${method} ${url.toString()} —`, error);
+    return NextResponse.json(
+      {
+        result: 'ERROR',
+        data: null,
+        error: {
+          code: 'NETWORK_ERROR',
+          message: '서버에 연결할 수 없습니다.',
+        },
+      },
+      { status: 502 },
+    );
+  }
+};
+
+export const GET = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'GET');
+
+export const POST = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'POST');
+
+export const PUT = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'PUT');
+
+export const PATCH = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'PATCH');
+
+export const DELETE = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'DELETE');

package/templates/nextjs-app/src/shared/api/apiTypes.ts

@@ -0,0 +1,21 @@
+/** 공통 API 에러 형식 */
+export type ApiErrorBody = {
+  message: string;
+  code: string;
+};
+
+/** 백엔드 공통 응답 래퍼 */
+export type ApiResponse<TData = unknown, TError = ApiErrorBody> = {
+  result: 'SUCCESS' | 'ERROR';
+  data: TData;
+  error: TError | null;
+};
+
+/** 페이지네이션 응답 래퍼 */
+export type PaginatedData<T> = {
+  content: T[];
+  totalItems: number;
+  offset: number;
+  limit: number;
+  hasNext: boolean;
+};

package/templates/nextjs-app/src/shared/api/error.ts

@@ -0,0 +1,12 @@
+import type { ApiErrorBody } from './apiTypes';
+
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    public readonly code: string,
+    public readonly data: ApiErrorBody | null,
+  ) {
+    super(data?.message ?? `API 요청 실패 (${status})`);
+    this.name = 'ApiError';
+  }
+}

package/templates/nextjs-app/src/shared/api/http.ts

@@ -0,0 +1,56 @@
+import axios from 'axios';
+
+import { ApiError } from './error';
+import type { ApiResponse } from './apiTypes';
+
+const HTTP_TIMEOUT = 10_000;
+
+const http = axios.create({
+  baseURL: '/api/proxy',
+  timeout: HTTP_TIMEOUT,
+});
+
+// 서버 컴포넌트에서 호출 시 axios 는 절대 URL 이 필요하다.
+// 호스트만 프리픽스하고 그 외 분기는 두지 않는다.
+http.interceptors.request.use(async (config) => {
+  if (typeof window !== 'undefined') return config;
+
+  const { headers: getHeaders } = await import('next/headers');
+  const hdrs = await getHeaders();
+  const host = hdrs.get('host') ?? 'localhost:3000';
+  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
+  config.baseURL = `${protocol}://${host}/api/proxy`;
+  return config;
+});
+
+http.interceptors.response.use(
+  (response) => {
+    const body = response.data as ApiResponse;
+    if (body && typeof body === 'object' && 'result' in body) {
+      if (body.result === 'ERROR') {
+        return Promise.reject(
+          new ApiError(response.status, body.error?.code ?? '', body.error),
+        );
+      }
+      response.data = body.data;
+    }
+    return response;
+  },
+  (error) => {
+    if (axios.isAxiosError(error)) {
+      const { response } = error;
+      const body = response?.data as ApiResponse | undefined;
+      const errorBody = body?.error ?? null;
+      return Promise.reject(
+        new ApiError(
+          response?.status ?? 0,
+          errorBody?.code ?? '',
+          errorBody,
+        ),
+      );
+    }
+    return Promise.reject(error);
+  },
+);
+
+export { http };

package/templates/nextjs-standalone/README.md

@@ -69,9 +69,9 @@ pnpm dev
 ## sh-ui 컴포넌트 추가
 
 ```bash
-npx sh-ui add button
-npx sh-ui add dialog
+npx sh-ui-cli add button
+npx sh-ui-cli add dialog
 ```
 
 `sh-ui.config.json` 의 `paths.components` 설정에 따라 `src/shared/ui/` 에 복사됩니다.
-토큰을 커스텀하려면 `sh-ui.config.json` 의 `theme` 값을 바꾸고 `npx sh-ui add tokens` 로 재생성.
+토큰을 커스텀하려면 `sh-ui.config.json` 의 `theme` 값을 바꾸고 `npx sh-ui-cli add tokens` 로 재생성.

package/templates/nextjs-standalone/app/api/proxy/[...path]/route.ts

@@ -0,0 +1,85 @@
+import { cookies } from 'next/headers';
+import { NextResponse, type NextRequest } from 'next/server';
+
+const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
+const ACCESS_TOKEN_COOKIE = 'accessToken';
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+const proxyRequest = async (
+  request: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+  method: string,
+) => {
+  const { path } = await ctx.params;
+  const url = new URL(`${API_URL}/${path.join('/')}`);
+
+  request.nextUrl.searchParams.forEach((value, key) => {
+    url.searchParams.set(key, value);
+  });
+
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get(ACCESS_TOKEN_COOKIE)?.value;
+  const locale =
+    cookieStore.get(LOCALE_COOKIE)?.value ??
+    request.headers.get('Accept-Language') ??
+    undefined;
+
+  const headers: Record<string, string> = {};
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  if (locale) headers['Accept-Language'] = locale;
+
+  let body: BodyInit | undefined;
+  if (method !== 'GET' && method !== 'HEAD') {
+    const contentType = request.headers.get('Content-Type');
+    if (contentType?.includes('multipart/form-data')) {
+      body = await request.formData();
+    } else {
+      headers['Content-Type'] = 'application/json';
+      body = await request.text();
+    }
+  }
+
+  try {
+    const response = await fetch(url.toString(), { method, headers, body });
+    const data = await response.json();
+    return NextResponse.json(data, { status: response.status });
+  } catch (error) {
+    console.error(`[PROXY] ${method} ${url.toString()} —`, error);
+    return NextResponse.json(
+      {
+        result: 'ERROR',
+        data: null,
+        error: {
+          code: 'NETWORK_ERROR',
+          message: '서버에 연결할 수 없습니다.',
+        },
+      },
+      { status: 502 },
+    );
+  }
+};
+
+export const GET = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'GET');
+
+export const POST = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'POST');
+
+export const PUT = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'PUT');
+
+export const PATCH = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'PATCH');
+
+export const DELETE = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'DELETE');

package/templates/nextjs-standalone/src/shared/api/apiTypes.ts

@@ -0,0 +1,21 @@
+/** 공통 API 에러 형식 */
+export type ApiErrorBody = {
+  message: string;
+  code: string;
+};
+
+/** 백엔드 공통 응답 래퍼 */
+export type ApiResponse<TData = unknown, TError = ApiErrorBody> = {
+  result: 'SUCCESS' | 'ERROR';
+  data: TData;
+  error: TError | null;
+};
+
+/** 페이지네이션 응답 래퍼 */
+export type PaginatedData<T> = {
+  content: T[];
+  totalItems: number;
+  offset: number;
+  limit: number;
+  hasNext: boolean;
+};

package/templates/nextjs-standalone/src/shared/api/error.ts

@@ -0,0 +1,12 @@
+import type { ApiErrorBody } from './apiTypes';
+
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    public readonly code: string,
+    public readonly data: ApiErrorBody | null,
+  ) {
+    super(data?.message ?? `API 요청 실패 (${status})`);
+    this.name = 'ApiError';
+  }
+}

package/templates/nextjs-standalone/src/shared/api/http.ts

@@ -0,0 +1,56 @@
+import axios from 'axios';
+
+import { ApiError } from './error';
+import type { ApiResponse } from './apiTypes';
+
+const HTTP_TIMEOUT = 10_000;
+
+const http = axios.create({
+  baseURL: '/api/proxy',
+  timeout: HTTP_TIMEOUT,
+});
+
+// 서버 컴포넌트에서 호출 시 axios 는 절대 URL 이 필요하다.
+// 호스트만 프리픽스하고 그 외 분기는 두지 않는다.
+http.interceptors.request.use(async (config) => {
+  if (typeof window !== 'undefined') return config;
+
+  const { headers: getHeaders } = await import('next/headers');
+  const hdrs = await getHeaders();
+  const host = hdrs.get('host') ?? 'localhost:3000';
+  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
+  config.baseURL = `${protocol}://${host}/api/proxy`;
+  return config;
+});
+
+http.interceptors.response.use(
+  (response) => {
+    const body = response.data as ApiResponse;
+    if (body && typeof body === 'object' && 'result' in body) {
+      if (body.result === 'ERROR') {
+        return Promise.reject(
+          new ApiError(response.status, body.error?.code ?? '', body.error),
+        );
+      }
+      response.data = body.data;
+    }
+    return response;
+  },
+  (error) => {
+    if (axios.isAxiosError(error)) {
+      const { response } = error;
+      const body = response?.data as ApiResponse | undefined;
+      const errorBody = body?.error ?? null;
+      return Promise.reject(
+        new ApiError(
+          response?.status ?? 0,
+          errorBody?.code ?? '',
+          errorBody,
+        ),
+      );
+    }
+    return Promise.reject(error);
+  },
+);
+
+export { http };