@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/prompts/components/badge.md

@@ -0,0 +1,104 @@
+# Badge
+
+### 원칙
+카운트·상태 라벨을 담는 최소 컴포넌트. 메뉴 아이템 옆 언리드 수, 사이드바 nav 옆 "new", 버튼 위 알림 카운트, 리스트 행의 상태 태그가 모두 이 컴포넌트를 공유한다. 콘텐츠(숫자/짧은 문자열)를 감싸는 얇은 껍데기 역할이라 아이콘·모션·인터랙션은 안 담는다 — 아이콘이 필요하면 [[components/chip]] 또는 [[components/tag]]를 검토.
+
+크기는 폰트/컨트롤 위계에 종속되어 [[axes/density]]에 반응. **variant 규칙**: `solid`는 알림/언리드 강조 전용이라 `--primary`만, `inverse`는 어두운 표면(선택된 FilterButton 등) 위 라벨 전용이라 `--bg`+`--fg`만 — 둘 다 status와 조합 금지. `soft`는 기본 `--primary` 기반이며 `status` prop으로 `--success` · `--warning` · `--destructive` · `--info`에 매핑. 라운드는 `shape` prop — 기본 `square`는 sm/md 공통 `--radius-xs`(Shape 축이 커도 md가 pill로 보이지 않도록 sm에 고정), 완전 pill이 필요하면 `shape="pill"`로 `--radius-full`.
+
+### Do
+- **수치는 우측 슬롯**: `MenuItem`, 리스트 행, 카드 헤더의 trailing 위치에 넣는다. 언리드 수·미확인 수·중요 태그 위계.
+- **콘텐츠 폭 그대로 흐르는 사각 라벨**: 정원·pill 아님. `--radius-xs`로 조여진 사각 캡슐(sm/md 공통). 1글자든 여러 글자든 텍스트 크기에 붙어 자연스럽게 늘어남.
+- **뜻이 명확한 문자열만**: `new`, `beta`, `12` 처럼 짧고 자명한 콘텐츠. 3~4글자를 넘기지 않는다.
+- **size는 붙는 컴포넌트에 맞춘다**: `MenuItem` `md` 옆이면 `sm`, `MenuItem` `lg`나 큰 카드 옆이면 `md`. 라벨 폰트 위계보다 커지지 않게.
+- **variant는 강조 위계로 선택**: 지금 반드시 봐야 하는 알림·언리드는 `solid`(primary만), 그 외 모든 라벨(온화한 강조·상태·카운트)은 `soft`.
+- **status는 soft 전용**: 성공/경고/삭제/정보 뜻이 정확할 때만 `soft`에 status를 얹는다. 브랜드 톤을 "예쁘게" 쓰려고 status를 남용하지 않는다.
+
+### Don't
+- 문장이나 아이콘을 넣지 않는다 — 그건 [[components/chip]] · [[components/tag]] · [[components/callout]]의 몫.
+- 상호작용(클릭·hover 툴팁 등)을 붙이지 않는다. Badge는 순수 시각 요소.
+- **`solid` + `status` 조합 금지**: solid는 primary만 사용. 상태색을 채운 solid 라벨이 필요하면 [[components/chip]]/[[components/tag]] 검토. (런타임에서 status를 무시하고 dev warning.)
+- 색을 hex/tailwind 클래스로 직접 지정하지 않는다. 성공·경고·삭제·정보 외의 색상 슬롯이 필요하면 임의로 만들지 말고 [[components/chip]] · [[components/tag]] 검토.
+- `--primary-fg` 같은 존재하지 않는 토큰을 쓰지 않는다. solid 위 텍스트는 `--bg` (Button primary와 동일 규칙).
+
+### Fallback
+size 애매하면 `sm`, variant 애매하면 `soft`. `solid`는 "지금 봐야 하는 알림"임이 확실할 때만.
+
+### 관련
+- [[components/menu-item]] · [[components/sidebar]] — 가장 흔한 사용처. trailing 슬롯 배지 카운트.
+- [[components/button]] — solid 위 텍스트 색을 `--bg`로 두는 규칙 공유.
+- [[components/chip]] · [[components/tag]] — 아이콘·상태 색·인터랙션이 필요하면 여기로.
+- [[tokens/color]] — `--primary` · `--bg` · `--secondary-fg`
+- [[axes/density]] — 폰트·min-height가 축에 반응
+
+### Props 시그니처
+```tsx
+<Badge
+  size="sm | md"                                       // default: sm
+  variant="solid | soft | inverse"                     // default: solid
+  status="success | warning | destructive | info"      // optional — 상태 뜻이 정확할 때만
+  shape="square | pill"                                // default: square
+>
+  {children}                                           // 짧은 문자열/숫자
+</Badge>
+```
+
+### 상태 매트릭스
+`solid`는 primary만. `soft`는 status에 따라 상태 토큰으로 스왑된다.
+
+| variant | 배경 | 텍스트 | 용도 |
+|---|---|---|---|
+| `solid` | `--primary` | `--bg` (Mode 반전) | 지금 봐야 하는 강조: 언리드, 알림 카운트 (**status 조합 불가**) |
+| `soft`  | `--primary` 8% 알파 | `--secondary-fg` (Palette=mono면 무채색) | 온화한 상태 라벨: "new", "beta" |
+| `soft` + `success` / `warning` / `destructive` / `info` | 각 상태 토큰 8% 알파 | 각 상태 토큰 | 뜻이 명확한 상태 라벨 |
+| `inverse` | `--bg` | `--fg` | **어두운 표면 위에서만 사용** — 선택된 FilterButton 안 카운트 등 (**status 조합 불가**) |
+
+### Size 가이드
+크기는 텍스트 line-height + padding으로 자연히 결정된다. `shape="square"`(기본)는 size별 radius로 조여진 사각 라벨, `shape="pill"`은 좌우 반원 캡. 1글자든 여러 글자든 콘텐츠 폭 그대로 흐른다.
+
+| size | padding (v · h) | font-size | radius (square) | 언제 |
+|---|---|---|---|---|
+| `sm` | 2 · 4 | `--text-xs` | `--radius-xs` | MenuItem sm/md 옆, 리스트 · 사이드바 |
+| `md` | 4 · 6 | `--label-sm-size` | `--radius-xs` | MenuItem lg 옆, 카드 헤더, 페이지 타이틀 |
+
+`shape="pill"`이면 size와 무관하게 `--radius-full`. 라벨 성격이 &ldquo;메타/카테고리&rdquo;가 아니라 &ldquo;알림 카운트/도트&rdquo;에 가까울 때만 pill.
+
+### Solid vs Soft — 언제 뭘 쓰나
+Badge의 위계는 **두 갈래**로 나뉜다. 헷갈리면 이 표를 먼저 본다.
+
+| variant | 뜻 | 언제 쓰나 | 예시 라벨 |
+|---|---|---|---|
+| `solid` | **"지금 반드시 봐야 함"** — 시각적 알림 | 언리드 메시지 수, 미확인 알림, 처리 대기 카운트. 사용자가 방치하면 안 되는 것. | `3`, `12`, `99+` |
+| `soft`  | **"이 아이템의 속성/상태"** — 조용한 라벨 | 카테고리 태그, "new"·"beta" 배지, API 상태(성공/경고/삭제/정보). 정보성 표기. | `new`, `beta`, `draft`, `API` |
+
+한 화면에 `solid`가 너무 많이 보이면 안 된다 — "알림"이라는 뜻이 희석된다. Sidebar 100개 항목 중 언리드가 있는 3~4개만 `solid`, 나머지는 아예 배지 없음이 정상.
+
+### 조합 예시
+```tsx
+// SOLID — 언리드 카운트 (알림)
+<MenuItem
+  leadingActions={[<Icon name="chat" />]}
+  trailingActions={[<Badge variant="solid">3</Badge>]}
+>#general</MenuItem>
+
+<MenuItem
+  leadingActions={[<Icon name="bell" />]}
+  trailingActions={[<Badge variant="solid">12</Badge>]}
+>알림</MenuItem>
+
+// SOFT — 조용한 상태/카테고리 라벨
+<MenuItem asChild active leadingActions={[<Icon name="star" />]}
+  trailingActions={[<Badge variant="soft">new</Badge>]}
+>
+  <Link href="/whats-new">What&apos;s new</Link>
+</MenuItem>
+
+<div className="card-header">
+  <h3>Beta features <Badge size="md" variant="soft">beta</Badge></h3>
+</div>
+
+// SOFT + STATUS — 뜻이 명확한 상태 라벨
+<Badge variant="soft" status="success">API</Badge>
+<Badge variant="soft" status="info">draft</Badge>
+<Badge variant="soft" status="warning">deprecated</Badge>
+<Badge variant="soft" status="destructive">3</Badge>
+```

package/assets/prompts/components/breadcrumb.md

@@ -0,0 +1,77 @@
+# Breadcrumb
+
+### 원칙
+현재 페이지가 계층 구조의 어디에 있는지 보여주고, **상위로 한 번에** 돌아가게 해주는 nav 컨트롤. 시각 무게는 최소 — [[components/button]] `size=xs · variant=ghost`와 같은 톤. 페이지 헤더 위 얇은 한 줄로만 존재하고, 자기 자신을 스캔 대상으로 만들지 않는다.
+
+### Do
+- **깊이 3 이상**일 때만 쓴다 — 2단계면 상위 링크 하나로 충분하고, 브래드크럼은 노이즈가 된다.
+- **마지막 항목은 `Breadcrumb.Current`** — 링크가 아닌 텍스트. `--fg-strong`로 자연스럽게 위계를 준다.
+- **첫 항목은 워크스페이스/홈 아이콘** 하나까지 허용. 그 외 항목엔 아이콘 붙이지 않는다 (스캔 방해).
+- **아이콘 단독 항목**: `Breadcrumb.Link`/`Current`에 `children` 없이 `leftIcon`만 넘기면 정사각 hit box 아이콘 버튼이 된다. `aria-label` 반드시 지정.
+- **URL 계층이 그대로 라벨** — 사이트맵의 실제 위치를 그대로 반영. 계층에 없는 임의 카테고리를 만들어 붙이지 않는다.
+- **모바일에서는 축약** — 첫 항목 + `Breadcrumb.Ellipsis` + 마지막 두 항목. 6개 이상이면 축약이 필수.
+- **Next.js `<Link>` 등 라우터**는 `<Breadcrumb.Link asChild>`로 감싼다. 스타일 유지한 채 SPA 네비게이션 위임.
+- **접근성**: 루트가 자동으로 `<nav aria-label="Breadcrumb">` + `<ol>`, 마지막 항목에 `aria-current="page"`를 붙인다. separator는 `aria-hidden`.
+
+### Don't
+- **탭 전환용으로 쓰지 않는다** — 그건 [[components/tabs]]. Breadcrumb은 URL 자체가 바뀌는 계층 이동 전용.
+- **마지막 항목을 링크로 만들지 않는다** — 자기 페이지를 다시 링크하면 새로고침 트리거가 되고 사용자를 헷갈리게 한다.
+- **`Button size=xs`가 아닌 다른 사이즈**로 커스텀하지 않는다 — 페이지 헤더 위 최소 무게가 유일한 존재 이유.
+- **활성 색을 `--primary`로 덮지 않는다** — 활성은 `--fg-strong`(무채). 브랜드 컬러를 여기 쓰면 CTA와 위계가 충돌.
+- **아이콘 남발 금지** — 첫 항목 외에 아이콘 붙이면 라벨 스캔이 무너진다.
+- **draggable/sortable 만들지 않는다** — 계층은 URL이 정한다. UI에서 조작할 대상이 아님.
+
+### Fallback
+- 라우터 결정 애매하면 기본 `<a href>` 렌더. 프레임워크 붙일 때 `asChild`로 교체.
+- 축약 위치 애매하면 첫 · 마지막 두 개 유지, 중간 전부 `Breadcrumb.Ellipsis`로 접기.
+- 규칙대로 판단 불가한 경우 사용자에게 확인.
+
+### 관련
+- [[components/button]] — Link 시각을 그대로 상속 (`size=xs · variant=ghost`)
+- [[components/tabs]] — 페이지 안 콘텐츠 전환은 Breadcrumb이 아니라 Tabs
+- [[components/sidebar]] — 계층의 "전체 뷰"는 Sidebar, "현재 위치 트레일"은 Breadcrumb
+- [[axes/density]] — `--control-h-xs`가 Link 높이에 매핑
+- [[axes/shape]] — `--radius-xs`가 Link hover 표면 radius에 매핑
+- [[tokens/color]] — `--fg-muted`(Link) → `--fg-strong`(Current) 대비, `--hover`(hover 표면)
+
+### Props 시그니처
+```tsx
+<Breadcrumb
+  aria-label="Breadcrumb"            // default: "Breadcrumb"
+  separator={<Icon name="caret-right" />}   // default: caret-right icon
+>
+  <Breadcrumb.Link href="/" leftIcon={<Icon name="house" />}>Home</Breadcrumb.Link>
+  <Breadcrumb.Link asChild>
+    <Link href="/components">Components</Link>
+  </Breadcrumb.Link>
+  <Breadcrumb.Ellipsis />
+  <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
+</Breadcrumb>
+```
+
+### Variant 매트릭스
+| variant | 용도 | 금지 조합 |
+|---|---|---|
+| `Breadcrumb.Link` | 상위 계층 링크. Button xs · ghost 톤. hover 시 `--hover` 표면. | 마지막 항목엔 쓰지 않음. |
+| `Breadcrumb.Current` | 현재 페이지. `--fg-strong` 텍스트, hover 반응 없음. | `href`·`onClick` 붙이지 않음. |
+| `Breadcrumb.Ellipsis` | 축약 트리거. 항상 클릭 가능. [[components/select]]와 동일한 팝오버 표면으로 숨긴 항목 리스트를 연다. | `items`에 5개 이상 넣지 않는다 — 그러면 축약이 아니라 실질적 서브메뉴가 됨. 정적(클릭 불가) 마커는 지원하지 않는다. |
+
+### 조합 예시
+```tsx
+// 표준 — Next Link + 홈 아이콘 + 축약
+<Breadcrumb aria-label="문서 경로">
+  <Breadcrumb.Link asChild leftIcon={<Icon name="house" />}>
+    <Link href="/">Home</Link>
+  </Breadcrumb.Link>
+  <Breadcrumb.Ellipsis
+    items={[
+      { label: "Components", href: "/components" },
+      { label: "Navigation", href: "/components/nav" },
+    ]}
+  />
+  <Breadcrumb.Link asChild>
+    <Link href="/components/nav">Navigation</Link>
+  </Breadcrumb.Link>
+  <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
+</Breadcrumb>
+```

package/assets/prompts/components/button.md

@@ -0,0 +1,99 @@
+# Button
+
+### 원칙
+텍스트 액션의 최소 단위. 클릭 시 무언가 **일어나는** 컨트롤 — 페이지 이동은 [[components/link]]. size는 [[axes/density]] 축과 연동되고, variant는 semantic 역할(강조 위계)만 담당한다.
+
+### Do
+- **중요=`primary`, 서브=`outline`**이 기본 쌍이다. 모달 하단, 폼 하단, 페이지 액션 영역 등 "확정 + 취소/이전" 구조의 기본값. `secondary`는 primary tint가 섞인 색조 액션이 필요한 특별 맥락에서만 — 중립 서브 액션엔 `outline`이 먼저다.
+- **버튼 사이 gap은 언제나 `space-1`(4px) 고정.** footer action 쌍, 툴바 액션 묶음, 폼 하단 등 어느 자리든 동일. `space-2` 이상 금지 — 두 버튼이 하나의 액션 묶음으로 묶여 읽히는 밀도를 유지.
+- **기본은 `size="md"`**. 90% 이상의 경우 md. 다른 사이즈로 갈 명확한 이유가 있을 때만 바꾼다.
+- **폼·컨트롤과 나란히 놓일 때는 그 컨트롤의 size와 맞춘다** — Input md 옆엔 Button md, Input sm 옆엔 Button sm. 미묘한 높이 차이가 정렬을 무너뜨린다.
+- 한 화면에 `variant="primary"`는 **1개**. 페이지의 대표 액션만.
+- **아이콘만 있는 버튼도 Button으로 처리** — label 없이 `leftIcon`만 넣으면 자동으로 정사각(width = height = `--control-h-*`), `leftIcon` + `rightIcon`(예: 아이콘 + `caret-down`)이면 텍스트 없이 좁은 대칭 패딩. 어느 쪽이든 `aria-label` 필수. 별도 [[components/icon-button]] 컴포넌트는 legacy — 신규 사용은 지양.
+- **파괴적 액션은 위계로 2단 분리한다.**
+  - `destructive` — **강한 위계.** 확인 모달의 "정말 삭제하시겠습니까?" 최종 확인, 되돌릴 수 없는 결정적 순간. 평상시 옅은 빨강 배경 + 빨강 텍스트, hover 시 solid 빨강으로 전환되며 위험을 예고.
+  - `destructive-ghost` — **약한 위계.** 테이블 행/헤더의 삭제, 페이지에 그냥 노출된 삭제 버튼 등 일상적 목록 조작. 평상시 fg(검정) 텍스트로 눈에 띄지 않다가 hover 시에만 빨강 톤(8% 배경 + 빨강 텍스트)이 나타남.
+
+### Don't
+- 한 화면에 primary 2개 이상 금지. 시각 위계 붕괴.
+- 버튼 사이 gap에 `space-2`(8px) 이상 금지 — 반드시 `space-1`(4px).
+- height를 CSS로 덮어쓰지 않는다. `size` prop 경유.
+- 페이지 이동에 Button 쓰지 않는다 — 시맨틱은 `<a>`.
+- disabled 색을 variant별로 다르게 덮어쓰지 않는다. **모든 variant는 disabled 시 회색 배경(`--bg-muted`) + 실버 텍스트(`--fg-disabled`) + 투명 보더로 통일** — "지금은 못 누른다"가 variant 위계보다 우선 읽혀야 한다.
+
+### Fallback
+size 애매하면 `md`, variant 애매하면 서브 자리에선 `outline`·대표 자리에선 `primary`.
+
+### 관련
+- [[components/split-button]] — 메인 액션 + 부가 옵션(caret) 2-part 버튼
+- [[components/icon-button]] — legacy, 신규는 Button icon-only 사용
+- [[components/input]] · [[components/select]] — 같은 화면에서 size 맞춤
+- [[axes/density]] — `--control-h-*`가 size에 매핑
+- [[axes/shape]] — radius가 Shape 축에 반응
+- [[tokens/color]] — `--primary`, `--destructive` 등 variant 매핑
+
+### Props 시그니처
+```tsx
+<Button
+  size="xs | sm | md | lg"                       // default: md
+  variant="primary | inverse | secondary | outline | ghost | destructive | destructive-ghost"  // default: primary
+  leftIcon={ReactNode} rightIcon={ReactNode}
+  loading={boolean} disabled={boolean}
+  fullWidth={boolean}
+  asChild={boolean}                              // Radix Slot 패턴
+/>
+```
+
+### Variant 매트릭스
+| variant | 용도 | 금지 조합 |
+|---|---|---|
+| `primary` | **중요 액션의 기본값.** 페이지 대표 액션(가입·제출·확인·다음) | 한 화면 2개 이상 금지 |
+| `inverse` | 흑백 반전. Palette=mono에서 primary 대신 강조 | Hue와 무관 |
+| `outline` | **서브 액션의 기본값.** 취소·이전 등 primary와 짝 이루는 중립 액션. 툴바·필터에도 사용 | — |
+| `secondary` | primary tint가 섞인 색조 액션이 필요할 때만. 중립 서브엔 `outline`이 먼저 | — |
+| `ghost` | 최소 시각 무게. 인라인·툴바. | — |
+| `destructive` | **강한** 위험 위계 — 확인 모달의 최종 삭제 버튼, 되돌릴 수 없는 결정 | 목록·툴바의 일상 삭제엔 과함 → `destructive-ghost` 사용 |
+| `destructive-ghost` | **약한** 위험 위계 — 테이블/페이지에 노출된 일상적 삭제 | 최종 확인 자리엔 부족 → `destructive` 사용 |
+
+### Size 가이드
+| size | height | 언제 |
+|---|---|---|
+| `xs` | 24 | **거의 쓸 일 없음.** 극한 밀도가 정말 필요한 예외적 상황(인라인 태그 액션, 셀 내부 미니 컨트롤)에서만. 쓴다면 **`variant="ghost"` 강력 권장** — filled/outline은 이 크기에서 시각 무게가 과해 튀고 답답함. |
+| `sm` | 32 | 밀도 높은 관리 UI, 툴바, 테이블 행 액션 |
+| `md` | 36 | **기본.** 폼·모달·페이지 액션 대부분 |
+| `lg` | 40 | 랜딩·온보딩의 대표 CTA. 손가락 hitbox 필요한 터치 |
+
+> **`xs` 사용 전 재고**: 밀도가 부족하다고 느껴진다면 먼저 Density 축(`--space-scale`)을 조이는 게 옳다. 페이지에 `xs`가 튀어나온다면 대부분 `sm` + Density 축 조정으로 해결된다.
+
+### 조합 예시
+```tsx
+// 폼 하단: outline(서브) + primary(중요) 나란히, Input과 같은 size
+<div style={{ display: "flex", gap: "var(--space-1)" }}>
+  <Button variant="outline">취소</Button>
+  <Button variant="primary" leftIcon={<CheckIcon />}>저장</Button>
+</div>
+
+// 테이블 행 액션: sm ghost로 밀도 확보
+<Button size="sm" variant="ghost" leftIcon={<PencilIcon />}>수정</Button>
+
+// 테이블/페이지의 일상적 삭제: destructive-ghost (약한 위계, hover에만 빨강)
+<Button size="sm" variant="destructive-ghost" leftIcon={<TrashIcon />}>삭제</Button>
+
+// 확인 모달의 최종 삭제 버튼: destructive (강한 위계)
+<Modal>
+  <p>정말 삭제하시겠습니까?</p>
+  <Button variant="outline" onClick={close}>취소</Button>
+  <Button variant="destructive" onClick={confirmDelete}>삭제</Button>
+</Modal>
+
+// 아이콘만: 정사각 (aria-label 필수)
+<Button variant="ghost" aria-label="검색" leftIcon={<Icon name="search" />} />
+
+// 아이콘 + caret: 드롭다운 트리거 (텍스트 없이 좁은 대칭 패딩)
+<Button
+  variant="outline"
+  aria-label="사용자 메뉴"
+  leftIcon={<Icon name="user" />}
+  rightIcon={<Icon name="caret-down" />}
+/>
+```

package/assets/prompts/components/callout.md

@@ -0,0 +1,81 @@
+# Callout
+
+### 원칙
+사이드바·리스트 끝·설정 패널의 여백에 상주하는 소형 안내 카드. 페이지 흐름을 끊지 않고 새 기능·이동 경로를 제시한다. hover가 없는 [[components/tooltip]], 휘발되는 Toast, 페이지 폭 전체를 덮는 [[components/banner]]와 구분된다.
+
+### Do
+- 표면 강도는 `variant`, 강조 색은 `tone`으로 독립 제어한다.
+- `dismissible=true`면 `onDismiss`와 함께 부모가 숨김 상태를 저장한다.
+- `actions`는 [[components/button]] slot이다 — variant는 자유, size는 `xs`(기본) 또는 `sm`만.
+- 액션 Button의 색은 `tone`을 따라간다 — solid/soft 버튼이면 같은 tone(warning엔 warning 버튼, destructive엔 destructive 버튼), 아니면 `ghost`/`outline` 중립. tone과 다른 색 solid 버튼으로 신호를 깨지 않는다.
+- 좁은 컨테이너에선 `actionsPlacement="bottom"` 유지, `right`는 본문이 짧고 카드가 가로로 넓을 때만.
+- `warning`/`destructive` tone은 `icon` 미지정 시 각각 `warning-circle`(주의) / `warning`(위험)이 자동. 다른 의미 아이콘이 필요할 때만 override한다.
+
+### Don't
+- 페이지 폭 전역 경고에 쓰지 않는다 — [[components/banner]] 영역.
+- 임시 피드백에 쓰지 않는다 — Toast를 쓴다.
+- 본문을 4줄 넘게 채우지 않는다.
+- `tone`을 임의 색상으로 확장하지 않는다.
+
+### Fallback
+`variant` 애매하면 `fill`. `tone` 애매하면 `brand`. `actionsPlacement` 애매하면 `bottom`.
+
+### 관련
+- [[components/banner]] — 페이지 폭 전면 경고. Callout은 국소 카드.
+- [[components/button]] — actions 슬롯의 실제 요소이며 variant 규칙 원본.
+- [[components/badge]] — title 옆 상태 라벨.
+- [[axes/hue]] · [[axes/palette]] — tone별 강조 색을 스왑.
+
+### Props 시그니처
+```tsx
+<Callout
+  title={ReactNode}                                     // required
+  icon={IconName}
+  variant="fill | outline"                              // default: fill
+  tone="neutral | brand | success | warning | destructive"  // default: brand
+  actions={ReactNode}
+  actionsPlacement="bottom | right"                     // default: bottom
+  dismissible={boolean}                                 // default: false
+  onDismiss={() => void}
+  dismissLabel={string}
+>{children}</Callout>
+```
+
+### Variant 매트릭스
+variant × tone 축이 독립 조합. 표는 tone 기준으로 정렬, 각 tone에 variant 두 종을 보여준다.
+
+| tone | fill | outline | 용도 |
+|---|---|---|---|
+| `neutral`     | 회색 표면(`bg-subtle`) + `fg-muted` 아이콘 | 표면 투명 + `border` 경계 | 톤 없는 기본 안내·중립 컨텍스트 |
+| `brand`       | tone 8% tint 표면 + brand 아이콘·경계 | 표면 투명 + brand 경계 | 신기능·프로모션·마이그레이션 유도 |
+| `success`     | success 8% tint + success 아이콘·경계 | 표면 투명 + success 경계 | 완료·다음 스텝 제안 |
+| `warning`     | warning 8% tint + warning 아이콘·경계 | 표면 투명 + warning 경계 | 만료·용량 임박·설정 누락 |
+| `destructive` | destructive 8% tint + destructive 아이콘·경계 | 표면 투명 + destructive 경계 | 삭제 예정·비가역 상태 |
+
+**금지 조합**
+tone이 톤 신호를 쥐고 있으므로, 그 안의 요소들(액션 버튼·아이콘)도 같은 신호를 유지해야 한다. 색이 어긋나면 사용자는 어느 쪽을 믿어야 할지 결정하지 못한다.
+
+- `tone`과 다른 색상 CTA Button을 섞지 않는다 — `warning` 콜아웃 안에 `brand`(파랑) solid 버튼, `destructive` 콜아웃 안에 `success`(초록) 버튼처럼 신호가 어긋나는 조합은 금지. 액션 Button은 같은 tone의 색을 쓰거나(`solid`/`soft`), 색 신호를 비우는 `ghost`/`outline` 중립 버튼만 허용.
+- `brand` tone 콜아웃에 `secondary` 톤 solid 버튼으로 메인 CTA를 두지 않는다 — 톤이 brand면 주 액션도 brand solid, 보조 액션만 ghost.
+- `tone=success` + 파괴 액션(`destructive` Button) — 긍정 맥락 안의 비가역 액션은 사용자를 속인다.
+- `tone=destructive` + `success` 아이콘(check 등) — 아이콘이 톤을 뒤집는다.
+- `tone=warning` + `success` 아이콘, `tone=warning` + brand solid 버튼 등 톤↔요소 신호 역전 금지.
+- 한 콜아웃 안에 서로 다른 tone의 solid 버튼 둘을 나란히 두지 않는다 — primary 1개 + 중립(ghost/outline) 1개 패턴만.
+
+### 조합 예시
+```tsx
+<Callout
+  icon="stack"
+  title="Import Issues"
+  dismissible
+  onDismiss={() => setHidden(true)}
+  dismissLabel="Dismiss"
+  actions={
+    <Button variant="ghost" size="sm" rightIcon={<Icon name="arrow-right" />}>
+      Try Now
+    </Button>
+  }
+>
+  Use our Migration Assistant to copy issues from another service.
+</Callout>
+```

package/assets/prompts/components/chat-input.md

@@ -0,0 +1,84 @@
+# Chat Input
+
+### 원칙
+AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(textarea 또는 input)의 세 층 구성. 모델 선택·전송·중지·파일첨부를 전부 담당. 하위 레이어 [[components/file-icon]]·[[components/attachment-thumb]]·[[components/attachment-chip]]·[[components/quotation-bar]]를 **조립**하는 상위 블록 — 자체 primitive 추가 금지.
+
+### Do
+- Shape은 두 가지 — `multi`(기본, 긴 입력·오버레이 UI), `single`(토픽바·검색봉 느낌).
+- Radius는 세 단계: `square`(--radius-xs) / `rounded`(--radius-sm) / `circular`(--radius-md). Shape 축 반응.
+- `models` + `selectedModel` + `onSelectModel` 셋이 다 있을 때만 모델 selector 노출.
+- 전송은 `Enter`로 — multi에선 `Shift+Enter`가 줄바꿈. 스트리밍 중엔 `Enter`나 send 클릭이 `onStop`을 호출.
+- 첨부·인용은 전부 **외부 상태** — ChatInput은 표시·삭제 콜백만 중계. 업로드 로직·중복 체크는 소비처 책임.
+- `onAttach`에 File[]이 들어옴. 소비처가 kind 판정(image/file)해서 attachments에 매핑.
+
+### Don't
+- 첨부·인용·메시지 상태를 ChatInput 안에서 관리하지 않는다 — controlled 전용.
+- radius prop을 수치로 받지 않는다 — `square | rounded | circular` 세 단계만. 실제 값은 Shape 축 토큰이 결정.
+- 모델 선택 메뉴를 내부에서 열지 않는다 — 현재는 라벨 클릭 시 다음 모델로 토글만. 실제 ContextMenu는 소비처에서 조립 (ChatInput의 책임 과잉 방지).
+- SingleLine에서 모델 라벨을 끝까지 노출하지 않는다 — 10자 넘으면 자동 compact(아이콘만).
+- Send 버튼 색을 변경하지 않는다 — 비활성=`bg-subtle` / 활성·스트리밍=`primary`로 고정.
+
+### Fallback
+shape 애매하면 `multi`, radius 애매하면 `rounded`. maxRows 애매하면 `8`.
+
+### 관련
+- [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-chip]] / [[components/quotation-bar]] — 조립 요소
+- [[components/message-bubble]] — 짝 컴포넌트 (후속)
+- [[components/context-menu]] — 모델 선택 메뉴를 소비처에서 조립할 때
+
+### Props 시그니처
+```tsx
+<ChatInput
+  shape="multi | single"               // default: multi
+  radius="square | rounded | circular" // default: rounded
+
+  value={string}
+  onChange={(v) => void}
+
+  onSend={() => void}                  // canSend일 때만 호출
+  onStop={() => void}                  // isStreaming일 때 send 자리에 stop
+  isStreaming={boolean}
+
+  attachments={ChatAttachment[]}       // image/file 섞어 전달
+  onRemoveAttachment={(id) => void}
+  onAttach={(files: File[]) => void}
+
+  quotation={{ text, onRemove? }}
+
+  models={{ id, label }[]}
+  selectedModel={string}
+  onSelectModel={(id) => void}
+
+  placeholder="Ask me anything…"
+  disabled={boolean}
+  maxRows={number}                     // multi 전용, default 8
+/>
+```
+
+### ChatAttachment 타입
+```tsx
+type ChatAttachment =
+  | { id, kind: "image", src?, alt?, loading? }
+  | { id, kind: "file",  filename }
+```
+- `kind: "image"`에 `src` 없거나 `loading: true`면 AttachmentThumb이 placeholder/pulse 자동.
+- `kind: "file"`은 AttachmentChip이 filename 확장자로 FileIcon을 자동 결정.
+
+### 레이아웃
+- 외곽: hairline border, `var(--bg)`, radius=props
+- focus-within에서 ring
+- 내부 세로 gap: `--space-2`, padding: `--space-3`
+- **MultiLine**: `attachments → quotation → [textarea / footer]` 세로
+- **SingleLine**: `attachments → quotation → [attach · input · model · send]` 가로 한 줄
+- Attach/Model/Send: footer 안에서 좌측(attach) 우측(model+send) 분리
+
+### 상태 매트릭스
+| 상태 | 트리거 | 시각 |
+|---|---|---|
+| Normal | 빈 입력 | placeholder, send=`bg-subtle` |
+| Active | 포커스 | focus-within ring |
+| ActiveSendBtn | `value.trim() || attachments` | send=`primary` |
+| FileUpload | `attachments.length > 0` | attachments 바 노출 |
+| Quotation | `quotation != null` | quotation bar 노출 |
+| Streaming | `isStreaming && onStop` | send 자리에 stop (square icon) |
+| Disabled | `disabled` | opacity 0.5, pointer-events none |

package/assets/prompts/components/checkbox.md

@@ -0,0 +1,46 @@
+# Checkbox
+
+### 원칙
+폼에서 **다중 선택**을 표시하는 최소 컨트롤. 시각 요소(`.indicator`)와 접근성(실제 `<input type="checkbox">`, visually-hidden)을 분리해 native 시맨틱을 유지한다.
+
+색은 [[tokens/color]]의 `--primary` 기반. 상태(성공/경고/삭제/정보)를 표시할 뜻이 정확하면 `status` prop으로 상태 토큰 스왑.
+
+### Do
+- **다중 선택에만**: "여러 개 켤 수 있음"이 의미의 핵심. 하나만 켜지는 그룹은 [[components/radio]].
+- **라벨과 세트로 렌더**: `<label>` 래퍼가 컨트롤 + 텍스트 hitbox를 확장. children이 없으면 별도 라벨 요소에 `htmlFor` 연결 필수.
+- **indeterminate는 부모 노드에만**: 트리·리스트에서 자식 일부만 체크된 부모에 표시. 자식 자체를 indeterminate로 두지 않는다.
+- **status는 뜻이 명확할 때만**: 예를 들어 "삭제 확인" 체크박스에 `destructive`. 브랜드 톤 대신 primary 그대로 두는 게 대부분 자연스럽다.
+
+### Don't
+- native input을 완전히 없애지 않는다 — visually-hidden으로 감추되 DOM엔 남긴다(폼 제출·스크린리더).
+- 커스텀 SVG를 직접 그려 넣지 않는다. indicator 안 마크는 [[components/icon]]의 `check` / `minus` 사용.
+- Switch 대체로 쓰지 않는다. 체크박스는 &ldquo;선택 여부&rdquo;, Switch는 &ldquo;즉시 적용되는 on/off&rdquo;.
+
+### Fallback
+status 애매하면 없음(=primary).
+
+### 관련
+- [[components/radio]] — 단일 선택 버전. 시각·시맨틱은 형제.
+- [[components/badge]] — status 4종 토큰을 공유.
+- [[tokens/color]] — `--primary` · `--*-fg`
+
+### Props 시그니처
+```tsx
+<Checkbox
+  status="success | warning | destructive | info"        // optional
+  indeterminate={boolean}                                 // 부모 노드 부분선택 표시
+  checked / defaultChecked / onChange / disabled ...      // native input props
+>
+  {children}                                              // 라벨 (없어도 됨)
+</Checkbox>
+```
+
+### 상태 매트릭스
+| 상태 | 배경 | 테두리 | 마크 |
+|---|---|---|---|
+| unchecked | `--bg` | `--border-strong` | 없음 |
+| hover | `--bg` | `--fg` | 없음 |
+| checked | `--primary` | `--primary` | `--bg` (check) |
+| indeterminate | `--primary` | `--primary` | `--bg` (minus) |
+| checked + status | 각 상태 토큰 | 각 상태 토큰 | 각 `--*-fg` |
+| disabled | 그대로 | 그대로 | opacity 0.5 |

package/assets/prompts/components/chip.md

@@ -0,0 +1,84 @@
+# Chip
+
+### 원칙
+**검색 필터·다중 선택의 "선택된 값" 요약 전용**. 사용자가 X로 제거할 수 있는 값 라벨만 Chip이다. 이메일 To 필드, 다중 태그 입력, 필터 결과 요약 — 전부 "선택을 되돌릴 수 있는 값" 자리. 그 외 모든 라벨(카테고리·상태·메타데이터)은 [[components/badge]]. 판정 기준은 **`onRemove` 유무**: 없으면 Badge다.
+
+### Do
+- **검색 필터·다중 선택의 "선택된 값" 요약에만** 사용. `onRemove` + `removeLabel` 세트가 반드시 있어야 한다.
+- 이메일 To, 멘션, 태그 입력 등 "값을 추가·제거하는 자리"에만.
+- `leftIcon`은 값의 성격 힌트(국기·avatar 미니·색 스와치). 라벨 중복 금지.
+- `size="sm"`은 밀도 높은 리스트(검색 필터 요약), `size="md"`는 폼 안 값(이메일 To).
+
+### Don't
+- **카테고리·태그·메타데이터 라벨에 쓰지 않는다** — 그건 [[components/badge]] (`variant="soft"`). "아티클", "가이드", "new", "beta", "draft" 전부 Badge. 공주 영구 금지 룰.
+- 카드/리스트 메타 라인에 쓰지 않는다 — meta 자리는 Badge 또는 inline muted 텍스트.
+- `onRemove`가 없는 Chip은 만들지 않는다. 제거 불가능하면 그 자체로 Chip이 아니다.
+- 상태 표시에 쓰지 않는다 — [[components/badge]] `variant="soft" status="..."`.
+- 클릭 가능한 액션 버튼으로 쓰지 않는다 — [[components/button]] 또는 [[components/filter-button]].
+- removeLabel을 생략하지 않는다 — 접근성 필수.
+- `disabled` 상태에서 onRemove가 호출되지 않게 — 컴포넌트가 자동 처리하지만 상위에서 비즈니스 로직을 거르지 말 것.
+
+### Fallback
+size 애매하면 `md`, variant 애매하면 `soft`.
+
+### 관련
+- [[components/badge]] — 상태 표시(제거 불가). Chip과 짝 개념
+- [[components/filter-button]] — 필터 선택 트리거. 선택 결과는 Chip으로 요약
+- [[components/input]] — 이메일 To 등 입력 안 Chip 리스트
+- [[components/icon]] — leftIcon·remove 아이콘
+- [[axes/shape]] — radius가 Shape 축에 반응
+
+### Props 시그니처
+```tsx
+<Chip
+  size="sm | md"                             // default: md
+  variant="soft | outline"                   // default: soft
+  leftIcon={ReactNode}
+  onRemove={(e) => void}                     // 있으면 X 버튼 노출
+  removeLabel="제거"                         // onRemove와 세트, aria-label
+  disabled={boolean}
+>
+  라벨 텍스트
+</Chip>
+```
+
+### Variant 매트릭스
+| variant | 시각 | 쓰임 |
+|---|---|---|
+| `soft` | primary 8% 배경 + primary 텍스트 | **기본** — 선택된 값 강조 |
+| `outline` | 투명 배경 + border | 보수적 톤, 다중 Chip이 나열될 때 |
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | variant 기본 |
+| hover (remove 버튼) | X 배경 `--hover` |
+| disabled | opacity 0.5, cursor not-allowed, X 비활성 |
+
+### 조합 예시
+```tsx
+// 이메일 To 필드 — 입력 가능한 Chip 리스트
+<div className="to-field">
+  {recipients.map((r) => (
+    <Chip key={r.id} leftIcon={<Avatar size="xs" name={r.name} />} onRemove={() => remove(r.id)}>
+      {r.email}
+    </Chip>
+  ))}
+  <input type="email" placeholder="주소 추가" />
+</div>
+
+// 필터 요약 — sm, outline
+<div className="filters">
+  {activeFilters.map((f) => (
+    <Chip
+      key={f.id}
+      size="sm"
+      variant="outline"
+      leftIcon={f.swatch}
+      onRemove={() => clearFilter(f.id)}
+    >
+      {f.label}
+    </Chip>
+  ))}
+</div>
+```