@conscience-technology/ctds 0.1.13 → 0.2.0

package/assets/prompts/components/quotation-bar.md

@@ -21,7 +21,7 @@ ChatInput 상단·Message 안에서 "**다른 글을 인용**"을 1줄로 접어
 ### 관련
 - [[components/chat-input]] — 상위 소비처 (상단 bar 자리)
 - [[components/message-bubble]] — 메시지 내 인용 표시에서도 재사용
-- [[components/attachment-chip]] — 비슷한 레이아웃 (lead icon + content + X)
+- [[components/attachment-item]] — 비슷한 레이아웃 (lead icon + content + X)
 
 ### Props 시그니처
 ```tsx

package/assets/prompts/components/sidebar-split.md

@@ -0,0 +1,70 @@
+# SidebarSplit
+
+### 원칙
+2단 사이드바 — 좌측 좁은 **Rail**(아이콘 only 탭) + 우측 **Panel**(활성 탭의 상세 메뉴). VS Code·Linear 스타일 "활동 바 + 사이드 패널" 조합. 단일 폭 Sidebar가 메뉴 수를 다 담지 못할 때, 또는 완전히 다른 영역을 전환하는 네비게이션에서.
+
+메모리 주의: **"2단 쉘은 SidebarSplit 쓰지 말고 바깥 flex로 Rail+Sidebar 직접 조립"** ([Sidebar scroll trap](../../memory/feedback_sidebar_scroll.md)). 그 함정은 CtdsSidebar.Body 안 섹션이 뭉개지는 상황. SidebarSplit 자체는 panel 안 콘텐츠가 **menu/section 구조**일 때 안전하게 쓴다 — 복잡한 폼·검색 결과를 panel에 넣을 거면 Rail + Sidebar를 바깥 flex로 직접 조립.
+
+### Do
+- 각 section의 `icon`은 Icon 인스턴스로. `label`은 rail 버튼의 `aria-label` + panel 헤더 타이틀로 재사용.
+- panel 안은 `<SidebarSplit.Section title="…">` + `<SidebarSplit.Item icon label>` 조합을 기본으로. 섹션 하나에 Item 5~10개 수준이 적정.
+- 좁은 공간이 필요하면 `panelOpen={false}` + onPanelOpenChange로 접기 토글. Rail만 남고 Panel은 숨음.
+- 섹션이 **active일 때 Rail 아이콘은 `secondary` variant**로 자동 전환 — 사용자가 override하지 말 것.
+
+### Don't
+- panel 안에 긴 폼·에디터를 넣지 않는다 — SidebarSplit은 "메뉴 전환" 자리. 콘텐츠는 메인 영역에.
+- Rail 섹션을 **6개 이상** 쌓지 않는다. 세로 공간상 7~8개부터 하단이 잘림. 그 이상이면 메뉴 구조 재검토.
+- `defaultActiveId`를 지정하지 않고 섹션 리스트를 조건부 렌더링하지 않는다 — 초기값이 비면 panel이 비어 보임.
+- 2단 쉘 바깥(앱 전체) 레이아웃에 SidebarSplit을 **직접** 쓰지 않는다. 바깥 쉘은 flex로 Rail + CtdsSidebar를 수동 조립 — 메모리 참조.
+
+### Props 시그니처
+```tsx
+<SidebarSplit
+  sections={SidebarSplitSection[]}        // { id, icon, label, panel }[]
+  brand?={ReactNode}                       // rail 상단 로고
+  railFooter?={ReactNode}
+  panelFooter?={ReactNode}
+  activeId?={string}                       // controlled
+  defaultActiveId?={string}
+  onActiveChange?={(id: string) => void}
+  panelOpen?={boolean}                     // controlled
+  defaultPanelOpen?={boolean}              // default: true
+  onPanelOpenChange?={(open: boolean) => void}
+>
+```
+
+Compound sub:
+- `<SidebarSplit.Section title>` — panel 안 그룹 (role="group")
+- `<SidebarSplit.Item icon label active trailing shortcut hasSubmenu onClick>` — MenuItem 래퍼
+
+### 조합 예시
+```tsx
+const sections: SidebarSplitSection[] = [
+  {
+    id: "files",
+    icon: <Icon name="folder" />,
+    label: "파일",
+    panel: (
+      <>
+        <SidebarSplit.Section title="최근">
+          <SidebarSplit.Item icon={<Icon name="file" />} label="README.md" />
+          <SidebarSplit.Item icon={<Icon name="file" />} label="plan.md" />
+        </SidebarSplit.Section>
+      </>
+    ),
+  },
+  {
+    id: "search",
+    icon: <Icon name="search" />,
+    label: "검색",
+    panel: <Input placeholder="검색…" />,
+  },
+];
+
+<SidebarSplit sections={sections} defaultActiveId="files" />
+```
+
+### 관련
+- [[components/sidebar]] — 단일 폭 사이드바
+- [[components/menu-item]] — panel item의 베이스
+- [[components/icon-button]] — rail 버튼

package/assets/prompts/components/sidebar.md

@@ -33,6 +33,8 @@ Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가
 - Sidebar 자체에 padding/width를 CSS로 덮지 않는다. `--sidebar-w*` 토큰 경유.
 - `.root`에 padding을 꽂지 않는다 — Body가 스크롤 컨테이너라 스크롤바가 안쪽으로 밀려 가장자리에 안 붙는다. 좌우 여백은 Header/Section/Footer가 각자 담당([[project_scroll_rule]]).
 - Brand symbol·wordmark 크기 override 금지. `--sidebar-brand-symbol-max`·`--sidebar-brand-wordmark-max` 상한 안에서만.
+- **Body 안 섹션 리스트가 길어서 스크롤이 필요할 때**, 섹션들에 `flex-shrink`를 그대로 두지 않는다. Body는 `display:flex column`이라 자식(Section)이 기본 `flex-shrink:1`로 수축되어 header가 몇 px로 뭉개지고 아이템이 사라져 보인다. 해결: Body 직속 자식에 `flex: 0 0 auto`를 걸어 각 섹션이 자기 콘텐츠 전체 높이를 유지하게 하고, 스크롤은 Body의 `overflow-y:auto`가 담당하게 한다.
+- **2단 쉘(아이콘 Rail + Sidebar) 조립 시 `SidebarSplit`를 쓰지 않는다** — SidebarSplit는 panel 영역을 자체 flex 체인으로 제한해서 안쪽 콘텐츠가 "영역 안에 갇힌" 느낌이 된다. 그냥 바깥 `display:flex`로 Rail(IconButton 세로 스택)과 `<Sidebar>`를 가로로 조립하고, 스크롤은 CtdsSidebar.Body에게 맡겨라. 기존 사이드바가 이미 자연 스크롤로 설계됐으니 그 구조를 그대로 차용하는 게 정답.
 
 ### Fallback
 collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계선 애매하면 AppFrame `variant="outlined"`.

package/assets/prompts/components/spinner.md

@@ -62,14 +62,14 @@
 **사이즈 주의**: Lottie는 vectorized라 size가 작으면 디테일 뭉개짐. `size="md"` 이상 권장. Button loading 안에 Lottie 쓰는 건 비권장 — 기본 variant(dots/ring)가 적합.
 
 ### Size 매트릭스
-IconButton 체계와 1:1 매칭. 로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음.
+IconButton 박스 크기와 1:1 매칭 — 로더가 들어가는 자리의 IconButton·Button 박스와 같은 size로.
 
 | size | 실제 크기 | 쓰임 |
 |---|---|---|
-| xs | 16px | Button xs 내부, 조밀한 인라인 |
-| sm | 20px | **기본**. 인라인 라벨 옆, 리스트 아이템, AIMessage generating |
+| sm | 20px | 인라인 라벨 옆, 리스트 아이템, AIMessage generating |
 | md | 24px | 섹션 로딩, 카드 중앙 |
-| lg | 32px | 페이지 중앙 로딩, 모달 바디 로딩 |
+| lg | 32px | **기본**. 조금 더 강조된 영역 |
+| xl | 40px | 페이지 중앙 로딩, 모달 바디 로딩, Button loading(전 사이즈) |
 
 Lottie 로더는 캔버스 충전율이 다르므로 `visualScale`로 bounds를 꽉 채우도록 보정됨 — size만 고르면 체감이 일관되게 맞아야 함. 특정 Lottie가 작아 보이면 `lottieManifest.ts`의 `visualScale`을 올려 글로벌 보정, 사용처에서 size를 올리지 말 것.
 

package/assets/prompts/components/time-picker.md

@@ -0,0 +1,69 @@
+# TimePicker
+
+### 원칙
+시·분 선택 입력. [[components/date-picker]]의 시간 짝. 트리거는 세그먼트 입력(HH:MM 2자리씩) + popover 안에 시/분 리스트 또는 전체 슬롯 그리드. "약속 시간·회의 시작·마감 시각" 자리.
+
+### Do
+- `variant="line"` 기본. 폼 블록이면 `outline`, 밀도 극한이면 `filled` ([Input line default](../../memory/feedback_input_line_default.md) 메모리와 동일 규칙).
+- `step={30}` 기본. 회의·일정은 30분 단위가 흔함. 5·10·15·60도 선택 가능하지만 그 외 값은 자동 clamp.
+- 24h 지역이면 `format="24h"`(기본), 12h 지역이면 `format="12h"` + meridiem 세그먼트.
+- `quickOptions`는 "지금부터 상대 시간"이 흔한 자리(알람·예약 리마인더)에서만 켠다. 일반 폼엔 노이즈.
+- 예약 가능 슬롯을 그리드로 보여줘야 하는 자리(병원·식당 예약)엔 `inline + panelLayout="grid"`. gridCols 4~8 중 레이아웃 폭에 맞춰.
+
+### Don't
+- step에 7·13·45 같은 비표준 분수치를 넣지 않는다 — 리스트 가독성이 깨짐. 5·10·15·30·60만.
+- `minTime`/`maxTime`은 "HH:MM" 문자열만. Date 객체·epoch 금지.
+- `panelLayout="grid"`를 popover 모드(`inline=false`)에서 쓰지 않는다 — 그리드는 inline 전용.
+- Input처럼 생겼다고 `<Input type="time">`을 섞어쓰지 않는다 — 네이티브 time input은 축·토큰이 적용 안 됨.
+
+### Props 시그니처
+```tsx
+<TimePicker
+  value?={TimeValue | null}                 // { hours, minutes }
+  onChange?={(v: TimeValue | null) => void}
+  step?={5 | 10 | 15 | 30 | 60}             // default: 30
+  format?="24h | 12h"                         // default: 24h
+  minTime?={string}                           // "HH:MM" (24h, inclusive)
+  maxTime?={string}                           // "HH:MM" (24h, inclusive)
+  disabled?={boolean}
+  size?="sm | md | lg"                        // default: md
+  variant?="outline | filled | line"          // default: outline
+  inline?={boolean}                           // popover 없이 패널만
+  panelLayout?="columns | grid"              // default: columns
+  gridCols?={4 | 6 | 8}                       // grid 모드 열 수
+  splitMeridiem?={boolean}                    // grid를 AM/PM 2섹션
+  quickOptions?={QuickOption[] | boolean}
+  aria-label?={string}
+/>
+```
+
+### 조합 예시
+```tsx
+// 폼 — 시작·종료 시간
+<TimePicker variant="outline" step={15} value={start} onChange={setStart} />
+<TimePicker variant="outline" step={15} value={end} onChange={setEnd} minTime="09:00" />
+
+// 예약 슬롯 그리드 (오전·오후 분리)
+<TimePicker
+  inline
+  panelLayout="grid"
+  step={30}
+  splitMeridiem
+  gridCols={6}
+  value={slot}
+  onChange={setSlot}
+/>
+
+// 알람 — 지금부터 15/30/60분 후
+<TimePicker
+  variant="line"
+  quickOptions
+  value={remind}
+  onChange={setRemind}
+/>
+```
+
+### 관련
+- [[components/date-picker]] — 날짜 짝. 날짜+시간이 함께면 둘을 나란히.
+- [[components/input]] — variant 규칙 동일
+- [[components/select]] — 밀도 극한에서 Select로 대체 가능

package/assets/prompts/components/toolbar.md

@@ -0,0 +1,69 @@
+# Toolbar
+
+### 원칙
+IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는 "뜨 있는" 알약으로 콘텐츠 위에 떠서 액션을 모으는 자리. 단일 size — toolbar 안의 버튼은 전부 같은 사이즈여야 한다.
+
+### Do
+- `variant="floating"` 기본 — bg-elevated + shadow-md + radius-xl, 콘텐츠 위에 떠있는 알약. 캔버스·에디터·이미지 뷰어의 상단 중앙.
+- `variant="attached"`는 콘텐츠에 붙은 bar — transparent + 하단 hairline. 페이지 상단에 "탭 아래 액션 바"로 쓸 때.
+- 관련 액션은 `<Toolbar.Group>`으로 묶는다 — 내부는 좁은 gap, 그룹 간은 `<Toolbar.Divider>`.
+- 좌·우 정렬이 필요하면 `<Toolbar.Spacer>`로 공간 밀기 — flex:1.
+- toolbar 안엔 IconButton size="sm"이 기본. floating variant는 size="md"까지도 OK.
+
+### Don't
+- toolbar 안에 label 긴 Button을 섞지 않는다 — IconButton + Tooltip이 toolbar 패턴. 긴 label이 필요하면 그 자리는 toolbar가 아니라 액션 영역.
+- 두 Toolbar를 세로로 쌓지 않는다 — 하나의 toolbar에 Group·Divider로 구분. 쌓으면 밀도·시선 둘 다 깨짐.
+- `attached` variant에 shadow·radius-xl를 수동으로 추가하지 않는다 — floating을 쓰면 됨.
+- Group 안에 또 Group을 중첩하지 않는다 — flat 2단(Toolbar > Group > IconButton).
+
+### Props 시그니처
+```tsx
+<Toolbar
+  variant?="floating | attached"              // default: floating
+  stretch?={boolean}                           // default: variant로 자동 (attached=true, floating=false)
+  role?={string}                               // default: "toolbar"
+>
+  {children}
+</Toolbar>
+```
+
+Compound sub:
+- `<Toolbar.Group>` — 관련 액션 묶음 (role="group")
+- `<Toolbar.Divider>` — 세로 hairline
+- `<Toolbar.Spacer>` — flex:1 공간 밀기
+
+### 조합 예시
+```tsx
+// 에디터 — floating 알약, 좌/중/우 섹션
+<Toolbar variant="floating">
+  <Toolbar.Group>
+    <IconButton size="sm" variant="ghost" aria-label="실행 취소" icon={<Icon name="arrow-u-up-left" />} />
+    <IconButton size="sm" variant="ghost" aria-label="다시 실행" icon={<Icon name="arrow-u-up-right" />} />
+  </Toolbar.Group>
+  <Toolbar.Divider />
+  <Toolbar.Group>
+    <IconButton size="sm" variant="ghost" aria-label="굵게" icon={<Icon name="text-b" />} />
+    <IconButton size="sm" variant="ghost" aria-label="기울임" icon={<Icon name="text-italic" />} />
+  </Toolbar.Group>
+  <Toolbar.Spacer />
+  <Toolbar.Group>
+    <IconButton size="sm" variant="ghost" aria-label="공유" icon={<Icon name="share" />} />
+  </Toolbar.Group>
+</Toolbar>
+
+// 페이지 상단 — attached, 콘텐츠에 붙음
+<Toolbar variant="attached">
+  <Toolbar.Group>
+    <Button size="sm" variant="ghost" leftIcon={<Icon name="plus" />}>새로 만들기</Button>
+    <Button size="sm" variant="ghost" leftIcon={<Icon name="funnel" />}>필터</Button>
+  </Toolbar.Group>
+  <Toolbar.Spacer />
+  <IconButton size="sm" variant="ghost" aria-label="보기 전환" icon={<Icon name="list" />} />
+</Toolbar>
+```
+
+### 관련
+- [[components/icon-button]] — toolbar 안 주 버튼
+- [[components/button]] — label 짧은 액션
+- [[components/tooltip]] — IconButton엔 Tooltip 필수
+- [[components/breadcrumb]] — 페이지 상단에선 Breadcrumb + Toolbar 조합이 흔함

package/assets/prompts/components/user-message.md

@@ -6,7 +6,7 @@
 ### Do
 - 기본 구성: `shape=circular-drop, fill=translucent, tail=end` — 레퍼런스 톤.
 - 액션은 `[copy, edit]` 기본. `actionsVisibility="show" | "hover"`로 상시/호버.
-- 첨부 있으면 `before` slot에 [[components/attachment-thumb]] / [[components/attachment-chip]] 자유 조합. 상위에서 레이아웃 책임.
+- 첨부 있으면 `before` slot에 [[components/attachment-thumb]] / [[components/attachment-item]] 자유 조합. 상위에서 레이아웃 책임.
 - 매우 긴 글은 bubble이 max-width 안에서 wrap, 그보다 넘으면 자연스레 아래로.
 
 ### Don't
@@ -22,7 +22,7 @@ shape 애매하면 `circular-drop`, fill 애매하면 `translucent`, visibility
 - [[components/bubble]] — 담는 그릇
 - [[components/message-actions]] — 액션 바
 - [[components/ai-message]] — 짝 컴포넌트
-- [[components/attachment-thumb]] / [[components/attachment-chip]] — before slot 조합
+- [[components/attachment-thumb]] / [[components/attachment-item]] — before slot 조합
 
 ### Props 시그니처
 ```tsx

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.1.13",
-  "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
+  "version": "0.2.0",
+  "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
+  "sideEffects": [
+    "assets/components/**/*.css",
+    "assets/app/**/*.css"
+  ],
   "bin": {
     "ctds": "./bin/ctds.js"
   },
@@ -13,6 +17,13 @@
     "templates",
     "README.md"
   ],
+  "exports": {
+    ".": {
+      "import": "./bin/ctds.js"
+    },
+    "./assets/*": "./assets/*",
+    "./templates/*": "./templates/*"
+  },
   "scripts": {
     "bundle-assets": "node ./scripts/bundle-assets.mjs",
     "prepublishOnly": "npm run bundle-assets"
@@ -23,7 +34,11 @@
   "keywords": [
     "ctds",
     "design-system",
-    "cli"
+    "cli",
+    "shadcn",
+    "nextjs",
+    "react",
+    "tokens"
   ],
   "license": "MIT",
   "publishConfig": {
@@ -33,5 +48,67 @@
     "type": "git",
     "url": "git+https://github.com/Conscience-Technology/CTDS.git",
     "directory": "packages/ctds-cli"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "next": ">=14.0.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "solar-icon-set": "^2.0.1",
+    "lucide-react": "^1.47.0",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.2.0",
+    "@radix-ui/react-toast": "^1.2.24",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "@phosphor-icons/react": {
+      "optional": true
+    },
+    "solar-icon-set": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "@radix-ui/react-popover": {
+      "optional": true
+    },
+    "@radix-ui/react-select": {
+      "optional": true
+    },
+    "@radix-ui/react-tooltip": {
+      "optional": true
+    },
+    "@radix-ui/react-context-menu": {
+      "optional": true
+    },
+    "@radix-ui/react-dialog": {
+      "optional": true
+    },
+    "@radix-ui/react-toast": {
+      "optional": true
+    },
+    "@radix-ui/react-slot": {
+      "optional": true
+    },
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    }
   }
 }

package/src/commands/init.js

@@ -23,6 +23,7 @@ import { checkMissingDeps, renderInstallCmd } from "../utils/deps.js";
 import { c, step, success, warn, info, kv } from "../utils/log.js";
 import { computeFilesMap, writeMeta } from "../utils/meta.js";
 import { hasDevScript, startDevAndOpen } from "../utils/launch.js";
+import { patchGlobalsCss, patchLayoutTsx } from "../utils/patch.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const CLI_PKG_PATH = join(__dirname, "..", "..", "package.json");
@@ -126,45 +127,74 @@ export async function run(args) {
     }
   }
 
-  // 3) 수동 안내 — layout.tsx wrapper + globals.css import + AI 에이전트 안내
+  // 3) 자동 패치 — globals.css import + layout.tsx ThemeController wrapper
   console.log("");
   console.log(c.bold("설치 완료"));
   console.log(c.dim("—").repeat(40));
   success("자동으로 복사·생성된 파일은 위 리스트와 같습니다.");
   console.log("");
 
-  console.log(c.bold("다음 두 가지를 수동으로 설정해주세요:"));
-  console.log("");
+  const manualFallbacks = [];
 
   // 3-1) globals.css — tokens.css import (폰트 + CTDS 토큰 + 축 셀렉터 전부 포함)
   const globalsRel = project.useSrcDir ? "src/app/globals.css" : "app/globals.css";
-  info(`${c.bold("1)")} ${c.cyan(globalsRel)} 최상단에 다음 한 줄을 추가:`);
-  console.log(c.dim("```css"));
-  console.log(`@import "../components/ctds/tokens.css";`);
-  console.log(c.dim("```"));
-  console.log(c.dim("    tokens.css가 폰트 로드 + CTDS 토큰 + Palette/Shape/Density/Motion/Mode"));
-  console.log(c.dim("    축 셀렉터까지 전부 담당합니다. 이 import 하나면 CTDS 작동 OK."));
-  console.log("");
+  const globalsAbs = resolve(cwd, globalsRel);
+  const globalsResult = patchGlobalsCss(globalsAbs, { dry });
+  if (globalsResult.status === "applied") {
+    step(dry ? `[dry] 패치` : `패치`, `${globalsRel} — @import 추가`);
+  } else if (globalsResult.status === "skipped") {
+    info(`${globalsRel} — ${globalsResult.reason}`);
+  } else {
+    warn(`${globalsRel} 자동 패치 실패: ${globalsResult.reason}`);
+    manualFallbacks.push({
+      title: `${c.cyan(globalsRel)} 최상단에 다음 한 줄을 추가:`,
+      lang: "css",
+      body: `@import "../components/ctds/tokens.css";`,
+      note: "tokens.css가 폰트 로드 + CTDS 토큰 + 축 셀렉터 전부 담당합니다.",
+    });
+  }
 
   // 3-2) layout.tsx wrapper
   const layoutRel = project.useSrcDir ? "src/app/layout.tsx" : "app/layout.tsx";
-  info(`${c.bold("2)")} ${c.cyan(layoutRel)} 의 <html>·<body>를 아래 형태로 수정:`);
-  console.log(c.dim("```tsx"));
-  console.log(renderLayoutSnippet(project));
-  console.log(c.dim("```"));
-  console.log("");
+  const layoutAbs = resolve(cwd, layoutRel);
+  const layoutResult = patchLayoutTsx(layoutAbs, { dry });
+  if (layoutResult.status === "applied") {
+    step(dry ? `[dry] 패치` : `패치`, `${layoutRel} — <body>를 ThemeController로 감쌈`);
+  } else if (layoutResult.status === "skipped") {
+    info(`${layoutRel} — ${layoutResult.reason}`);
+  } else {
+    warn(`${layoutRel} 자동 패치 실패: ${layoutResult.reason}`);
+    manualFallbacks.push({
+      title: `${c.cyan(layoutRel)} 의 <html>·<body>를 아래 형태로 수정:`,
+      lang: "tsx",
+      body: renderLayoutSnippet(project),
+    });
+  }
 
   // 3-3) 의존성 체크
   const { missing } = checkMissingDeps(cwd);
   if (missing.length > 0) {
-    info(`${c.bold("3)")} 다음 패키지를 설치해주세요 (CTDS 컴포넌트가 필요):`);
-    console.log(c.dim("```bash"));
-    console.log(renderInstallCmd(missing));
-    console.log(c.dim("```"));
-    console.log("");
+    manualFallbacks.push({
+      title: "다음 패키지를 설치해주세요 (CTDS 컴포넌트가 필요):",
+      lang: "bash",
+      body: renderInstallCmd(missing),
+    });
   } else {
     success("필요한 의존성이 모두 설치돼 있어요.");
+  }
+
+  if (manualFallbacks.length > 0) {
+    console.log("");
+    console.log(c.bold("수동 설정이 남았어요:"));
     console.log("");
+    manualFallbacks.forEach((m, idx) => {
+      info(`${c.bold(`${idx + 1})`)} ${m.title}`);
+      console.log(c.dim("```" + m.lang));
+      console.log(m.body);
+      console.log(c.dim("```"));
+      if (m.note) console.log(c.dim("    " + m.note));
+      console.log("");
+    });
   }
 
   // 4) 다음 단계
@@ -172,9 +202,9 @@ export async function run(args) {
   console.log(c.dim("—").repeat(40));
   console.log("");
 
-  // 수동 설정이 남은 경우(globals.css import / layout.tsx wrapper / 의존성) 자동 실행 보류.
-  // 서버가 안 뜨거나 뜨더라도 화면이 깨져서 혼란만 커짐.
-  const needsManual = missing.length > 0;
+  // 수동 설정이 남은 경우(globals.css import 자동 패치 실패 / layout.tsx wrapper 실패 /
+  // 의존성 설치 필요) 자동 실행 보류. 서버가 안 뜨거나 뜨더라도 화면이 깨져서 혼란만 커짐.
+  const needsManual = manualFallbacks.length > 0;
 
   if (dry || noOpen || needsManual || !hasDevScript(cwd)) {
     console.log(`  ${c.cyan("npm run dev")}`);

package/src/utils/deps.js

@@ -1,27 +1,33 @@
 /**
  * CTDS 런타임 의존성 체크 + 설치 명령 생성.
  * 사용자 플젝 package.json을 읽어 빠진 패키지만 안내.
+ *
+ * Single source of truth: ctds-cli/package.json의 peerDependencies.
+ * react/react-dom/next는 소비자가 당연히 가진다고 가정하고 체크에서 제외.
  */
 
 import { existsSync, readFileSync } from "node:fs";
-import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { dirname, join, resolve } from "node:path";
 
-/** CTDS 컴포넌트가 실제로 import하는 외부 패키지. */
-export const CTDS_RUNTIME_DEPS = {
-  "@phosphor-icons/react": "^2.1.10",
-  "solar-icon-set": "^2.0.1",
-  "lucide-react": "^1.47.0",
-  "@radix-ui/react-popover": "^1.1.23",
-  "@radix-ui/react-select": "^2.3.7",
-  "@radix-ui/react-tooltip": "^1.2.16",
-  "@radix-ui/react-context-menu": "^2.3.7",
-  "@radix-ui/react-dialog": "^1.2.0",
-  "@radix-ui/react-toast": "^1.2.24",
-  "@radix-ui/react-slot": "^1.3.3",
-  "@dnd-kit/core": "^6.3.1",
-  "@dnd-kit/sortable": "^10.0.0",
-  "@dnd-kit/utilities": "^3.2.2",
-};
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const CLI_PKG_PATH = resolve(__dirname, "../../package.json");
+
+/** 소비자 레포가 당연히 가진 호스트 환경 패키지. install 안내 대상에서 제외. */
+const HOST_DEPS = new Set(["react", "react-dom", "next"]);
+
+/** CTDS 컴포넌트가 실제로 import하는 외부 패키지. CLI 자체 package.json에서 읽어온다. */
+export const CTDS_RUNTIME_DEPS = (() => {
+  const pkg = JSON.parse(readFileSync(CLI_PKG_PATH, "utf8"));
+  const peers = pkg.peerDependencies ?? {};
+  const runtime = {};
+  for (const [name, range] of Object.entries(peers)) {
+    if (HOST_DEPS.has(name)) continue;
+    runtime[name] = range;
+  }
+  return runtime;
+})();
 
 /**
  * 사용자 플젝의 package.json을 읽어 CTDS가 필요로 하는 deps 중 빠진 것 리스트.