sh-ui-cli 0.24.0 → 0.31.1

package/README.md

@@ -18,7 +18,6 @@ npx sh-ui-cli <command>
 
 ```bash
 # 대화형
-npm create sh-ui my-app
 npx sh-ui-cli create
 
 # 비대화형 (에이전트 / CI)
@@ -32,7 +31,7 @@ npx sh-ui-cli create my-app --platform flutter --yes
 ### init — 설정 파일 생성
 
 ```bash
-npx sh-ui init
+npx sh-ui-cli init
 # 대화형 프롬프트:
 #   platform: react | flutter
 #   base:     neutral | zinc | slate
@@ -43,27 +42,27 @@ npx sh-ui init
 비대화형 예:
 
 ```bash
-npx sh-ui init --platform react --base neutral --radius md --mode light-dark --yes
+npx sh-ui-cli init --platform react --base neutral --radius md --mode light-dark --yes
 ```
 
 ### add — 컴포넌트 추가
 
 ```bash
-npx sh-ui add button
-npx sh-ui add card input
-npx sh-ui add button --diff   # 파일 변경 미리보기(실제 쓰지 않음)
+npx sh-ui-cli add button
+npx sh-ui-cli add card input
+npx sh-ui-cli add button --diff   # 파일 변경 미리보기(실제 쓰지 않음)
 ```
 
 ### list — 설치된 컴포넌트 목록
 
 ```bash
-npx sh-ui list
+npx sh-ui-cli list
 ```
 
 ### remove — 컴포넌트 제거
 
 ```bash
-npx sh-ui remove button
+npx sh-ui-cli remove button
 ```
 
 ### mcp — AI 에게 sh-ui 를 알려주기 (v0.21.0+)
@@ -85,7 +84,7 @@ npx -y sh-ui-cli mcp init --client claude-desktop   # → 사용자 전역 (재
 npx -y sh-ui-cli mcp init --client claude-code --scope user
 ```
 
-> 참고: 위 다른 명령들의 `npx sh-ui ...` 표기는 `sh-ui-cli` 가 dev 의존성으로 설치된 상태를 가정한다. 빈 폴더에서 한 번에 쓰려면 동일하게 `npx -y sh-ui-cli ...` 로 호출.
+> 참고: 위 다른 명령들의 `npx sh-ui-cli ...` 표기는 `sh-ui-cli` 가 dev 의존성으로 설치된 상태를 가정한다. 빈 폴더에서 한 번에 쓰려면 동일하게 `npx -y sh-ui-cli ...` 로 호출.
 
 기존 설정 파일이 있으면 다른 MCP 서버 엔트리를 보존하며 `sh-ui` 만 머지·갱신.
 

package/data/changelog/versions.json

@@ -2,6 +2,122 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.31.1",
+      "date": "2026-04-28",
+      "title": "Header drawer 그룹 라벨을 사이드바와 동일한 캡션 스타일로 정렬",
+      "type": "patch",
+      "highlights": [
+        "HeaderNavGroup 의 drawer 라벨이 uppercase + letter-spacing 으로 두드러져 같은 모바일 메뉴 안의 HeaderMenu 트리거(서브메뉴 헤더)와 시각적으로 헷갈리던 문제 해결",
+        "스타일을 Sidebar 의 group-label 과 동일하게 통일 — text-xs / weight-medium / foreground-muted, height 2rem, padding 0 var(--space-2) (uppercase·letter-spacing 제거)",
+        "그룹 라벨은 \"섹션 캡션\", 메뉴 트리거는 \"클릭 가능한 nav 항목\" 으로 역할이 명확히 갈라짐"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.31.1"
+    },
+    {
+      "version": "0.31.0",
+      "date": "2026-04-28",
+      "title": "Editor 3종(Code/Markdown/RichText) uncontrolled 모드 추가",
+      "type": "minor",
+      "highlights": [
+        "CodeEditor / MarkdownEditor / RichTextEditor 모두 value 를 옵셔널로 만들고 defaultValue 를 추가 — 라우터·외부 상태와 동기화할 게 없는 폼이면 useState 없이 한 줄로 끝 (Tabs/RadioGroup/Header NavMatch 와 동일 패턴)",
+        "controlled (value 명시) 모드는 종전과 동일하게 동작 — 외부 동기화 effect 가 isControlled 일 때만 작동하도록 가드. uncontrolled 모드에서는 에디터(CodeMirror/Tiptap)가 자체 source-of-truth",
+        "onChange 는 controlled / uncontrolled 양 모드 모두에서 변경마다 호출 — 외부 관찰만 필요할 땐 onChange 만 받아도 OK",
+        "MarkdownEditor 는 미리보기 패널이 현재 값을 필요로 하므로 uncontrolled 모드에서도 자체 React state 로 트래킹"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.31.0"
+    },
+    {
+      "version": "0.30.0",
+      "date": "2026-04-28",
+      "title": "PageTOC + CodeTabs registry 승격 — docs 인프라 컴포넌트 공개",
+      "type": "minor",
+      "highlights": [
+        "PageTOC 신규 — 페이지 안의 헤딩(기본 h2/h3)을 자동 스캔해 우측 레일에 목차(On this page)를 렌더. 자동 slugify·id 부여, IntersectionObserver 로 현재 보이는 섹션 active 표시(aria-current 자동), 클릭 시 smooth scroll. 라우터 비종속 — routeKey 로 라우트 변경 신호를 받아 재스캔하므로 Next.js / React Router / no-router 모두 지원. levels·containerSelector·excludeSelector·label·headerOffsetRem 으로 커스터마이즈",
+        "CodeTabs 신규 — 같은 예제의 여러 코드 뷰(예: React/Flutter, 또는 \"강조 / 전체 코드\")를 탭으로 전환. 각 탭은 그대로 CodePanel 로 렌더되어 shiki 하이라이팅·복사 버튼·파일명 헤더 등을 그대로 사용. registryDependencies = tabs · code-panel",
+        "두 컴포넌트 모두 그동안 docs 내부 전용으로 쓰이던 것을 일반화 — 이제 사용자 프로젝트에서 `npx sh-ui-cli add page-toc` / `npx sh-ui-cli add code-tabs` 로 설치 가능. /components 인덱스에도 등록"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.30.0"
+    },
+    {
+      "version": "0.29.0",
+      "date": "2026-04-28",
+      "title": "Header — 서브메뉴·그룹·a11y·active 자동 매칭 보강 + variant/stickyHide 정식 도입",
+      "type": "minor",
+      "highlights": [
+        "a11y — drawer 가 열릴 때 focus trap · ESC 닫기 · 닫힐 때 트리거로 포커스 복원 자동화. drawer 패널에 role=dialog + aria-modal=true 부여",
+        "HeaderMenu / HeaderMenuTrigger / HeaderMenuContent — 데스크탑은 document.body 로 portal 된 dropdown(부모 overflow 클리핑 회피, 트리거 위치를 scroll/resize 마다 추종, 클릭 외부·ESC 닫기), 모바일 drawer 안에서는 collapsible 로 자동 전환. NavLocationContext 가 자식 위치를 전파해 한 자식 트리로 두 모드 처리",
+        "HeaderNavGroup(label) — drawer 안에서 nav 항목을 섹션으로 묶음(라벨 + 들여쓰기). inline 모드는 display:contents 로 자식만 평면 렌더, 데스크탑 레이아웃 무영향",
+        "HeaderDesktopOnly / HeaderMobileOnly — drawer 로 옮기지 않고 단순히 가시성만 토글하는 슬롯. display:contents 라 부모 flex 흐름 그대로 유지. 데스크탑 검색/로그인/마이페이지 같은 항목을 모바일에서 자체 drawer 트리거로 대체할 때 사용",
+        "active 자동 매칭 — HeaderNav 의 value(controlled) 또는 defaultValue+onValueChange(uncontrolled) 로 자식 HeaderItem 의 active 가 일괄 결정 (Tabs/RadioGroup 패턴). 라우터 앱은 value=pathname, 라우터 없는 위젯은 defaultValue 만으로 클릭 자동 추적. 기본 매칭은 exact 또는 prefix(root 제외), match 함수로 커스터마이즈, 개별 active prop 으로 override. 자동/수동 어느 쪽이든 data-active 와 aria-current=\"page\" 부여",
+        "variant=\"solid\"|\"transparent\"|\"blur\" 로 헤더 배경 표현 전환. blur 는 표준 글래스 헤더 수준의 85% opacity + saturate(180%) blur(16px), --sh-ui-header-blur-opacity / --sh-ui-header-blur-radius CSS 변수로 instance 별 조정. backdrop-filter 미지원 브라우저는 @supports 폴백으로 불투명 배경 자동 적용",
+        "stickyHide + stickyHideThreshold — 스크롤 다운 시 자동 숨김. 가장 가까운 스크롤 가능 조상을 자동 감지해 페이지 스크롤뿐 아니라 컨테이너 내부 스크롤에도 반응. prefers-reduced-motion: reduce 환경에서는 슬라이드 트랜지션 비활성화"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.29.0"
+    },
+    {
+      "version": "0.28.1",
+      "date": "2026-04-28",
+      "title": "RichTextEditor — Link 버튼이 빈 선택에서 호출돼도 anchor 가 생기도록 수정",
+      "type": "patch",
+      "highlights": [
+        "Link 버튼: 텍스트 선택이 없고 기존 링크 위도 아닐 때 URL 자체를 anchor 텍스트로 삽입 — 빈 link 마크만 걸려 사용자가 추가로 타이핑해야 했던 어색한 상태 제거",
+        "선택이 있거나 기존 링크 위에서 호출하면 종전과 동일하게 selection·기존 링크에 setLink"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.28.1"
+    },
+    {
+      "version": "0.28.0",
+      "date": "2026-04-28",
+      "title": "RichTextEditor 컴포넌트 — Tiptap 3 + sh-ui 토큰 테마 + 기본 toolbar",
+      "type": "minor",
+      "highlights": [
+        "RichTextEditor 신규 — Tiptap 3 (StarterKit + Placeholder + Link) 위에 sh-ui 토큰 테마와 기본 toolbar 를 얹은 controlled WYSIWYG. value 는 HTML 문자열로 입출력",
+        "툴바: 헤딩(H1~H3) · 리스트(불릿/숫자) · 인용 · 코드(인라인/블록) · 링크 · 강조(B/I/S) · 구분선 · undo/redo. 본문 포커스를 잃지 않도록 mousedown 가로채기",
+        "SSR 안전 — `immediatelyRender: false` 로 Next 15+ stricter SSR 환경에서 hydration mismatch 없음. readOnly·hideToolbar·minHeight/maxHeight prop 지원",
+        "추가 확장(이미지·테이블·멘션 등)은 registry 카피본을 직접 수정해 `extensions` 배열에 끼워 넣는 방식으로 확장"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.28.0"
+    },
+    {
+      "version": "0.27.0",
+      "date": "2026-04-28",
+      "title": "MarkdownEditor 컴포넌트 — CodeEditor + react-markdown 라이브 프리뷰",
+      "type": "minor",
+      "highlights": [
+        "MarkdownEditor 신규 — CodeEditor(소스) + react-markdown(미리보기) 합성, GFM(테이블·체크리스트·strikethrough) 지원",
+        "raw HTML 은 react-markdown 기본 동작으로 차단 — 사용자 입력 마크다운으로부터의 XSS 자동 방어",
+        "previewPosition: right(기본) / bottom — 좁은 화면(<768px)에서는 자동으로 위·아래로 쌓임. preview={false} 로 미리보기를 끄면 단순 마크다운 입력기로 사용",
+        "registry dependency = code-editor — `npx sh-ui-cli add markdown-editor` 시 code-editor 도 함께 설치"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.27.0"
+    },
+    {
+      "version": "0.26.0",
+      "date": "2026-04-28",
+      "title": "CodeEditor 컴포넌트 — CodeMirror 6 + sh-ui 토큰 테마",
+      "type": "minor",
+      "highlights": [
+        "CodeEditor 신규 — CodeMirror 6 basicSetup 기반 controlled 인라인 코드 에디터 (value/onChange · placeholder · readOnly · showLineNumbers · minHeight/maxHeight)",
+        "지원 언어: text · javascript · typescript · jsx · tsx · json · css · html · markdown — 런타임 변경은 Compartment 로 hot-swap",
+        "컬러·여백을 sh-ui 토큰(--background/--foreground/--border/--background-muted 등)으로 매핑 — `.dark` 스코프에서 다크 테마 자동 추종",
+        "CLI 레지스트리에 `npx sh-ui-cli add code-editor` 등록, docs 사이드바 Components 섹션에 진입점 추가"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.26.0"
+    },
+    {
+      "version": "0.25.0",
+      "date": "2026-04-28",
+      "title": "Next.js 템플릿에 http 골격 + BFF proxy 추가 — IS_SERVER 분기 제거",
+      "type": "minor",
+      "highlights": [
+        "nextjs-app · nextjs-standalone 템플릿에 axios 단일 인스턴스(src/shared/api/http.ts)와 BFF 라우트 핸들러(app/api/proxy/[...path]/route.ts) 추가 — 클라/서버 모두 /api/proxy 경유, IS_SERVER 분기 없음",
+        "인증 · 토큰 refresh · Sentry · 로그인 쿠키 특례 처리는 의도적으로 제외해 인증 비종속 골격으로 유지 — 프로젝트별 추가는 apps/docs/recipes 가이드로 분리",
+        "레시피 9종 추가 (apps/docs/app/recipes/): api-layer, auth, file-upload, tanstack-query, async-boundary, i18n, sentry, testing, deployment",
+        "사이드바에 '레시피' 진입점 추가"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.25.0"
+    },
     {
       "version": "0.24.0",
       "date": "2026-04-28",
@@ -74,7 +190,7 @@
         "sh-ui mcp init --client <claude-code|cursor|claude-desktop> 추가 — IDE 별 MCP 설정 파일을 자동으로 찾아 sh-ui 엔트리 머지",
         "스코프 분기 — 기본 project(.mcp.json / .cursor/mcp.json), --scope user 로 전역(~/.claude/mcp.json 등) 선택 가능. claude-desktop 은 user 전용(OS 별 경로 자동 분기)",
         "기존 JSON 보존 — 다른 MCP 서버 엔트리·기타 키를 건드리지 않고 sh-ui 만 머지·갱신",
-        "수동 JSON 편집 없이 npx sh-ui mcp init --client cursor 한 줄로 끝"
+        "수동 JSON 편집 없이 npx sh-ui-cli mcp init --client cursor 한 줄로 끝"
       ],
       "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.22.0"
     },

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

@@ -0,0 +1,232 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import { EditorView, placeholder as placeholderExt } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+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 "./styles.css";
+
+export type CodeEditorLanguage =
+  | "text"
+  | "javascript"
+  | "typescript"
+  | "jsx"
+  | "tsx"
+  | "json"
+  | "css"
+  | "html"
+  | "markdown";
+
+export interface CodeEditorProps {
+  /**
+   * Controlled — 현재 코드. 명시 시 value 가 진실원천이 되고 onChange 로 외부에서 갱신해야 한다.
+   * 미지정이면 uncontrolled — 에디터가 자체 내부 문서로 동작.
+   */
+  value?: string;
+  /**
+   * Uncontrolled 초기값. value 미지정 시에만 사용된다.
+   * @default ""
+   */
+  defaultValue?: string;
+  /** 코드가 바뀔 때마다 호출 (controlled · uncontrolled 모두). */
+  onChange?: (value: string) => void;
+  /**
+   * 신택스 하이라이팅 언어.
+   * @default "text"
+   */
+  language?: CodeEditorLanguage;
+  /** 비어 있을 때 표시할 placeholder. */
+  placeholder?: string;
+  /** 읽기 전용. 키 입력은 막지만 선택·복사는 가능. */
+  readOnly?: boolean;
+  /**
+   * 좌측 줄 번호 표시 여부.
+   * @default true
+   */
+  showLineNumbers?: boolean;
+  /** 에디터 최소 높이 (CSS 길이 단위). */
+  minHeight?: string;
+  /** 에디터 최대 높이 (CSS 길이 단위). 초과 시 내부 스크롤. */
+  maxHeight?: string;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function languageExtension(language: CodeEditorLanguage): Extension {
+  switch (language) {
+    case "javascript":
+      return javascript();
+    case "typescript":
+      return javascript({ typescript: true });
+    case "jsx":
+      return javascript({ jsx: true });
+    case "tsx":
+      return javascript({ jsx: true, typescript: true });
+    case "json":
+      return json();
+    case "css":
+      return cssLang();
+    case "html":
+      return html();
+    case "markdown":
+      return markdown();
+    case "text":
+    default:
+      return [];
+  }
+}
+
+/**
+ * CodeMirror 6 기반 인라인 코드 에디터.
+ *
+ * Controlled (value/onChange) · Uncontrolled (defaultValue + 선택 onChange) 모두 지원.
+ * 라우터·외부 상태와 동기화할 게 없는 경우 defaultValue 한 줄로 끝 — useState 불필요.
+ *
+ * 신택스 하이라이팅·자동 들여쓰기·괄호 매칭 등은 CodeMirror `basicSetup` 을 그대로 사용,
+ * 컬러·여백은 sh-ui 토큰(`--background`, `--foreground`, `--border` 등)으로 매핑돼 테마에 자동 추종.
+ */
+export function CodeEditor({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  language = "text",
+  placeholder,
+  readOnly = false,
+  showLineNumbers = true,
+  minHeight,
+  maxHeight,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+}: CodeEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const hostRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const initialDocRef = useRef(valueProp ?? defaultValue ?? "");
+
+  const compartments = useMemo(
+    () => ({
+      language: new Compartment(),
+      readOnly: new Compartment(),
+      lineNumbers: new Compartment(),
+      placeholder: new Compartment(),
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    if (!hostRef.current) return;
+
+    const extensions: Extension[] = [
+      basicSetup,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          onChangeRef.current?.(update.state.doc.toString());
+        }
+      }),
+      compartments.language.of(languageExtension(language)),
+      compartments.readOnly.of(EditorState.readOnly.of(readOnly)),
+      compartments.lineNumbers.of(
+        showLineNumbers
+          ? []
+          : EditorView.theme({ ".cm-gutters": { display: "none" } }),
+      ),
+      compartments.placeholder.of(placeholder ? placeholderExt(placeholder) : []),
+    ];
+
+    const view = new EditorView({
+      state: EditorState.create({ doc: initialDocRef.current, extensions }),
+      parent: hostRef.current,
+    });
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // 초기 마운트 1회만 — 후속 동기화는 별도 이펙트가 처리
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // controlled 모드에서만 외부 value 를 에디터 doc 에 동기화. uncontrolled 면 에디터가 자체 source-of-truth.
+  useEffect(() => {
+    if (!isControlled) return;
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current === valueProp) return;
+    view.dispatch({
+      changes: { from: 0, to: current.length, insert: valueProp ?? "" },
+    });
+  }, [isControlled, valueProp]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.language.reconfigure(languageExtension(language)),
+    });
+  }, [language, compartments.language]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.readOnly.reconfigure(EditorState.readOnly.of(readOnly)),
+    });
+  }, [readOnly, compartments.readOnly]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.lineNumbers.reconfigure(
+        showLineNumbers
+          ? []
+          : EditorView.theme({ ".cm-gutters": { display: "none" } }),
+      ),
+    });
+  }, [showLineNumbers, compartments.lineNumbers]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.placeholder.reconfigure(
+        placeholder ? placeholderExt(placeholder) : [],
+      ),
+    });
+  }, [placeholder, compartments.placeholder]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const node = view.contentDOM;
+    if (id) node.id = id;
+    if (ariaLabel) node.setAttribute("aria-label", ariaLabel);
+    else node.removeAttribute("aria-label");
+    if (ariaLabelledBy) node.setAttribute("aria-labelledby", ariaLabelledBy);
+    else node.removeAttribute("aria-labelledby");
+  }, [id, ariaLabel, ariaLabelledBy]);
+
+  return (
+    <div
+      ref={hostRef}
+      className={cx("sh-ui-code-editor", className)}
+      data-readonly={readOnly || undefined}
+      style={
+        {
+          "--sh-ui-code-editor-min-height": minHeight,
+          "--sh-ui-code-editor-max-height": maxHeight,
+        } as React.CSSProperties
+      }
+    />
+  );
+}

package/data/registry/react/components/code-editor/styles.css

@@ -0,0 +1,76 @@
+.sh-ui-code-editor {
+  position: relative;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow: hidden;
+  transition: border-color var(--duration-fast);
+}
+.sh-ui-code-editor:focus-within {
+  border-color: var(--foreground);
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.sh-ui-code-editor[data-readonly] {
+  background: var(--background-subtle);
+}
+
+.sh-ui-code-editor .cm-editor {
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.sh-ui-code-editor .cm-editor.cm-focused {
+  outline: none;
+}
+.sh-ui-code-editor .cm-scroller {
+  font-family: inherit;
+  min-height: var(--sh-ui-code-editor-min-height, 7.5rem);
+  max-height: var(--sh-ui-code-editor-max-height, 25rem);
+}
+.sh-ui-code-editor .cm-content {
+  caret-color: var(--foreground);
+  color: var(--foreground);
+  padding: var(--space-3) 0;
+}
+.sh-ui-code-editor .cm-line {
+  padding: 0 var(--space-3);
+}
+.sh-ui-code-editor .cm-gutters {
+  background: var(--background-subtle);
+  color: var(--foreground-muted);
+  border-right: 1px solid var(--border);
+}
+.sh-ui-code-editor .cm-activeLineGutter,
+.sh-ui-code-editor .cm-activeLine {
+  background: var(--background-muted);
+}
+.sh-ui-code-editor .cm-cursor,
+.sh-ui-code-editor .cm-dropCursor {
+  border-left-color: var(--foreground);
+}
+.sh-ui-code-editor .cm-selectionBackground,
+.sh-ui-code-editor .cm-editor .cm-selectionBackground,
+.sh-ui-code-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
+.sh-ui-code-editor ::selection {
+  background: var(--background-muted) !important;
+}
+.sh-ui-code-editor .cm-placeholder {
+  color: var(--foreground-muted);
+}
+.sh-ui-code-editor .cm-tooltip {
+  background: var(--background);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  border-radius: calc(var(--radius) - 2px);
+}
+.sh-ui-code-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.sh-ui-code-editor .cm-matchingBracket,
+.sh-ui-code-editor .cm-nonmatchingBracket {
+  background: var(--background-muted);
+  color: var(--foreground);
+}

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

@@ -0,0 +1,49 @@
+import { CodePanel, type CodePanelProps } from "../code-panel";
+import {
+  Tabs,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsTrigger,
+} from "../tabs";
+
+export interface CodeTabsItem extends Omit<CodePanelProps, "code"> {
+  /** 탭 식별자 (Tabs 의 value 와 동일). */
+  value: string;
+  /** 탭 트리거에 표시될 라벨. */
+  label: string;
+  /** 표시할 코드. */
+  code: string;
+}
+
+export interface CodeTabsProps {
+  items: CodeTabsItem[];
+  /** 초기 활성 탭 value. 미지정 시 첫 번째 항목. */
+  defaultValue?: string;
+}
+
+/**
+ * 같은 예제의 여러 코드 뷰(예: React / Flutter, 또는 "강조 부분 / 전체 코드") 를 탭으로 전환.
+ * 각 탭의 내용은 그대로 `CodePanel` 로 렌더되므로 shiki 하이라이팅 · 복사 버튼 · 파일명 헤더
+ * 등을 그대로 사용할 수 있다.
+ */
+export function CodeTabs({ items, defaultValue }: CodeTabsProps) {
+  const initial = defaultValue ?? items[0]?.value;
+  return (
+    <Tabs defaultValue={initial}>
+      <TabsList>
+        <TabsIndicator />
+        {items.map((item) => (
+          <TabsTrigger key={item.value} value={item.value}>
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map(({ value, label: _label, ...panel }) => (
+        <TabsContent key={value} value={value}>
+          <CodePanel {...panel} />
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}