@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/prompts/components/modal.md

@@ -0,0 +1,131 @@
+# Modal
+
+### 원칙
+흐름을 끊고 한 가지 결정·입력·확인에 집중시키는 중앙 다이얼로그. 결과가 아니라 **다음 행동**을 요구할 때 쓴다. 결과 알림은 [[components/toast]], 상주 안내는 [[components/callout]].
+
+### Do
+- **한 번에 하나의 결정**만. 두 가지 질문이면 Stepper 또는 두 모달로 분리.
+- `title` 필수. 명사형 짧게(채널 생성 · 삭제 확인). 질문형("정말 삭제하시겠습니까?")은 `description`으로.
+- **설명 문구는 `description` prop에 넣는다.** 헤더 영역 안에서 title 바로 아래 바짝 붙어, 하나의 "소개" 묶음으로 읽힘. `children`(body)에 `<p>`로 설명 넣지 않는다 — children은 **진짜 자유 콘텐츠(Input/Image/List/Form 등)** 전용 영역이고 title에서 떨어져 자리함.
+- 설명이 2~3줄을 넘어가면 모달 자리가 아님 — 페이지 또는 Drawer로.
+- children은 **자유 ReactNode** — Input/Image/List/Form 등. description과 분리된 아래 영역.
+- `footer`는 액션 Button들을 넘김. **우측 정렬 · 최대 2~3개**. 순서는 **좌: outline(취소/이전), 우: primary(확정/다음)**.
+- primary variant는 Button `md`가 기본 — 모달 안 Input도 `md`로 맞춰 수직 리듬 유지.
+- 파괴적 확인은 `destructive` variant Button을 primary 자리에. "진짜 삭제하시겠습니까?"의 최종 확인 자리.
+- dismiss는 **헤더 우측 X · ESC 키** 두 가지. 둘 다 기본 on.
+- 저장·업로드 중처럼 중단 시 데이터 유실이 큰 경우 `disableEscape`로 ESC 차단 + `dismissible={false}`로 X도 제거 → 사용자는 footer 액션으로만 진행/취소.
+
+### Don't
+- **오버레이(바깥) 클릭으로 닫히지 않는다** — 실수 유발 방지. prop으로도 열지 않음. 가볍게 닫히는 UI가 필요하면 [[components/popover]].
+- 모달 안에 모달 금지. 흐름이 꼬이고 ESC가 어느 쪽을 닫는지 모호.
+- footer에 primary 2개 금지 — 무엇이 "다음"인지 모호해짐.
+- 모달 안에 전체 페이지 분량 콘텐츠 금지. 스크롤이 5번 이상 필요하면 모달이 아니라 페이지 또는 Drawer 자리.
+- 비동기 로딩 전용으로 모달 띄우지 않는다 — 인라인 Spinner 또는 Progress 사용. 모달은 입력·결정 전용.
+- title을 CSS `text-transform: uppercase`로 꾸미지 않는다.
+
+### Fallback
+질문이 애매하면 "결과 알림이면 Toast, 흐름을 끊고 입력·확정이 필요하면 Modal, 가볍게 미리보기면 Popover". 사이즈·오버레이 클릭 등 정책 변경이 필요해 보이면 사용자에게 확인.
+
+### 관련
+- [[components/toast]] — 휘발성 결과 알림. Modal은 액션 요청.
+- [[components/callout]] — 상주 안내.
+- [[components/button]] — footer의 액션. 파괴적 확인은 `destructive` variant.
+- [[primitives/fade]] · [[primitives/scale]] — overlay fade + content scale 조합.
+- [[axes/motion]] — content scale 시작값(0.94/0.96/0.98) 스왑.
+- [[tokens/z-index]] — overlay는 `z-overlay`, content는 `z-modal`.
+
+### Props 시그니처
+```tsx
+<Modal
+  open={boolean}
+  onOpenChange={(open: boolean) => void}
+  title={ReactNode}                 // required
+  description={ReactNode}           // 헤더 영역 안, title 바로 아래 한두 줄 설명
+  titleSrOnly={boolean}             // 시각적 숨김 (일러스트 중심 모달 등)
+  footer={ReactNode}                // Button들을 넘김. 없으면 footer 자체 미렌더
+  dismissible={boolean}             // default: true (헤더 X 버튼)
+  dismissLabel={string}             // X 버튼 스크린리더 라벨 (i18n은 호출부)
+  disableEscape={boolean}           // ESC 닫힘 차단 (중요 작업 중)
+>
+  {children}                        // 자유 ReactNode — Input / Image / Form / List 등. description과 분리된 아래 영역
+</Modal>
+```
+
+### Variant 매트릭스
+Modal은 **단일 시각**이다. 사이즈·테마·톤 variant 없음 — 콘텐츠 자유도로 다양성을 담당.
+
+| prop | 값 | 결과 |
+|---|---|---|
+| `dismissible` | `true`(기본) / `false` | 헤더 X 노출/제거 |
+| `disableEscape` | `false`(기본) / `true` | ESC 키 닫힘 활성/차단 |
+| `titleSrOnly` | `false`(기본) / `true` | 헤더 title 시각적 숨김 (스크린리더엔 유지) |
+
+**금지 조합**
+- `dismissible=false` + `disableEscape=true` + `footer` 없음 — 사용자가 모달을 닫을 방법이 전혀 없음.
+- `titleSrOnly=true` + 헤더에 title 역할을 하는 다른 요소 없음 — 시각적 맥락 상실.
+
+### 조합 예시
+```tsx
+// 간단한 확인 — description만, children 없음
+<Modal
+  open={open}
+  onOpenChange={setOpen}
+  title="채널 생성"
+  description="생성할 채널 이름을 입력해 주세요."
+  footer={
+    <>
+      <Button variant="outline" onClick={() => setOpen(false)}>취소</Button>
+      <Button variant="primary" onClick={next}>다음</Button>
+    </>
+  }
+/>
+
+// Input이 들어가는 폼 모달 — description은 title 짝, Input은 children(line variant)
+<Modal
+  open={open}
+  onOpenChange={setOpen}
+  title="새 폴더"
+  description="새 폴더가 생성될 이름을 입력해 주세요."
+  footer={
+    <>
+      <Button variant="outline" onClick={cancel}>취소</Button>
+      <Button variant="primary" onClick={create}>생성</Button>
+    </>
+  }
+>
+  <Input
+    label="폴더 이름"
+    variant="line"
+    placeholder="예: 2026 Q1 리서치"
+    value={name}
+    onChange={e => setName(e.target.value)}
+    width="fill"
+  />
+</Modal>
+
+// 파괴적 확인 (destructive primary)
+<Modal
+  open={open}
+  onOpenChange={setOpen}
+  title="프로젝트 삭제"
+  description="이 작업은 되돌릴 수 없습니다. 모든 데이터가 영구 삭제됩니다."
+  footer={
+    <>
+      <Button variant="outline" onClick={cancel}>취소</Button>
+      <Button variant="destructive" onClick={remove}>삭제</Button>
+    </>
+  }
+/>
+
+// 저장 중 사용자가 실수로 닫지 못하게 (children에는 ProgressBar)
+<Modal
+  open={saving}
+  onOpenChange={() => {}}
+  title="저장 중"
+  description="파일을 서버로 전송하는 중입니다."
+  dismissible={false}
+  disableEscape
+>
+  <ProgressBar value={progress} />
+</Modal>
+```

package/assets/prompts/components/pagination.md

@@ -0,0 +1,92 @@
+# Pagination
+
+### 원칙
+
+긴 목록·테이블을 페이지 단위로 끊어 탐색시키는 nav 컨트롤. **하나의 컴포넌트가 variant로 세 가지 유즈케이스**(numbered / compact / jump)를 커버한다 — `DateRangePicker`처럼 분화된 컴포넌트를 만들지 않는다. prop 조합이 컴포넌트 분화보다 예측 가능성이 높다.
+
+### Do
+
+- **기본은 `size="md"`**. Pagination은 테이블 하단·관리 UI처럼 데이터 밀도 높은 자리에 가장 자주 들어가므로 md가 기본. 폼이나 일반 페이지의 긴 리스트에선 `lg`. (md는 내부적으로 Button sm을, lg는 Button md를 쓴다 — Button보다 한 단계 압축된 체계.)
+- 현재 페이지는 **`variant="secondary"`로 표시**. primary 8% 알파 배경 + primary 텍스트. 페이지 안의 다른 primary 액션(저장·제출)과 시각 위계가 겹치지 않는다.
+- 숫자 아이템은 **Button을 재사용**한다 — 라벨이 있으므로 Button이 맞다. `className`으로 `min-width`만 정사각 보정.
+- prev/next·처음/끝 아이콘 아이템은 **IconButton을 재사용**한다 — Button을 icon-only로 쓰면 가로 패딩이 남아 정사각이 안 떨어진다. 사이즈 매핑은 `Pagination size=md → IconButton md`, `Pagination size=lg → IconButton lg` (width/height만 Pagination 내부 CSS에서 Button height와 일치시킴). 전부 `variant="ghost"` + `aria-label` 필수.
+- 긴 목록(≥ 10쪽)에는 `variant="numbered"` 또는 `jump` 사용. 숫자 영역은 **현재 페이지 중심의 슬라이딩 윈도우** — 생략(…)이나 양 끝 고정 숫자를 쓰지 않는다. `windowSize`(5~10, 기본 5)로 보이는 숫자 개수만 조절.
+- **prev/next는 "보이는 윈도우의 끝 숫자"로 점프**한다 (±1 아님). 예: `1 2 (3) 4 5`에서 next → 5, `1 2 3 4 (5) 6 7 8 9 10`에서 next → 10. 사용자가 이미 보이는 숫자 중 하나로 바로 점프해 윈도우를 통째로 넘길 수 있다. compact(숫자 윈도우 없음)에선 기존 ±1 유지.
+- 테이블 하단의 좁은 상태 자리엔 `variant="compact"` — `"3/24"` 또는 커스텀 포맷터. prev/next와 숫자가 하나의 블록처럼 밀착(gap=0).
+- 값은 1-indexed(`page=1`이 첫 페이지). controlled만 지원 — `page` + `onChange` 세트로 다룬다.
+
+### Don't
+
+- 현재 페이지를 `variant="primary"`로 쓰지 않는다 — 페이지의 "진짜" primary 액션과 시각 위계가 충돌한다.
+- 전체 페이지 수가 1 이하일 때 Pagination을 숨긴다. 비활성 상태로 노출하지 않는다 (의미 없는 노이즈).
+- 숫자 버튼에 `size` prop을 직접 섞어 쓰지 않는다. 한 Pagination 안의 모든 아이템은 같은 size.
+- 커스텀 CSS로 Button 색/높이를 덮지 않는다. 모든 시각 조정은 Button variant/size 경유.
+- 생략(…) 셀이나 "첫/끝 페이지 고정 노출" 패턴(`1 … 5 6 7 … 100`)을 되살리지 않는다. 숫자 영역은 **항상 연속된 슬라이딩 윈도우**다. 중간을 건너뛰고 싶으면 `jump` variant의 처음/끝 아이콘 버튼이 그 역할.
+- disabled 시 숫자 Button을 Button 기본 disabled 스타일(회색 배경)로 두지 않는다. **배경 투명 + 숫자 색만 `--fg-disabled`로 연해져야** 밀집 자리에서 밑 배경을 가리지 않는다. Pagination.module.css에서 `.list .numberBtn*:disabled` 셀렉터로 덮어씀 — IconButton ghost disabled와 톤 일치.
+
+### Fallback
+
+variant 애매하면 `numbered`. 좁은 자리/모바일인데 variant 지정이 없으면 `simple`. 전체 페이지 수 모를 땐 `compact`로 "현재 페이지"만 표시.
+
+### 관련
+
+- [[components/button]] — 숫자·prev·next·처음/끝 아이템은 전부 Button 재사용. 사이즈·variant 체계 공유.
+- [[components/table-row]] — 데이터 테이블 하단에 가장 자주 짝지어 놓는다. compact variant가 흔히 테이블 푸터에 들어감.
+- [[axes/density]] — 버튼 높이가 `--control-h-md` 경유로 Density 축에 반응.
+- [[axes/shape]] — radius가 Shape 축에 반응.
+- [[tokens/color]] — 현재 페이지의 배경·텍스트는 `--secondary-bg` / `--secondary-fg` 경유.
+
+### Props 시그니처
+
+```tsx
+<Pagination
+  variant="numbered | compact | jump"             // default: "numbered"
+  size="md | lg"                                  // default: "md"
+  page={number}                                   // 1-indexed, controlled
+  total={number}                                  // 전체 페이지 수
+  onChange={(page: number) => void}
+
+  windowSize={number}                             // default: 5. 5~10 범위, 자동 클램프
+
+  disabled={boolean}
+  compactFormatter={(page, total) => ReactNode}   // compact variant 전용
+  aria-label={string}
+/>
+```
+
+### Variant 매트릭스
+
+| variant | 용도 | 금지 조합 |
+|---|---|---|
+| `numbered` | 10쪽 이상 긴 목록의 표준. 현재 페이지 중심 슬라이딩 윈도우 + prev/next | 모바일 좁은 자리에서는 가로가 넘침 → `compact` |
+| `compact` | 테이블 하단, 밀도 높은 상태 영역. `"3/24"`. prev/next와 숫자가 밀착한 블록. | 사용자가 임의 페이지로 점프해야 하는 자리 (숫자 클릭 불가) |
+| `jump` | 매우 긴 아카이브·검색 결과. 처음·끝 포함 full nav | 전체 페이지 수가 적을 때(≤ 5)엔 과잉 |
+
+### 조합 예시
+
+```tsx
+// 데이터 테이블 하단: 밀집 자리에 compact
+<Pagination
+  variant="compact"
+  page={page}
+  total={totalPages}
+  onChange={setPage}
+/>
+
+// 긴 검색 결과: numbered가 표준
+<Pagination
+  variant="numbered"
+  page={page}
+  total={120}
+  onChange={setPage}
+/>
+
+// 아카이브: 처음·끝까지 한 번에, 윈도우 10개
+<Pagination
+  variant="jump"
+  page={page}
+  total={320}
+  windowSize={10}
+  onChange={setPage}
+/>
+```

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

@@ -0,0 +1,61 @@
+# ProgressBar
+
+### 원칙
+얇은 가로 **라인 로딩바**. 두 모드: `value` 있으면 **determinate**(그 %로 채움), 없으면 **indeterminate**(무한 왕복). 페이지 상단 네트워크·라우팅 로딩, 또는 인라인 업로드/다운로드 진행률에 사용. **본격적 Progress UI는 Stepper·Meter**([[components/table-cell]])가 담당 — ProgressBar는 "로딩" 신호 전용.
+
+### Do
+- 네트워크·라우팅 로딩: `position="fixed"` + indeterminate(value 미지정).
+- 업로드·다운로드 진행률: `position="inline"` + determinate(value 0~100).
+- `active=false`로 숨기면 자동 fade-out. 즉시 unmount 금지(깜빡임).
+- role=`progressbar` + aria-valuenow 자동.
+
+### Don't
+- 긴 폼의 단계 표시엔 쓰지 않는다 — [[components/stepper]].
+- 작업 비율·사용량 표시엔 쓰지 않는다 — TableCellMeter 또는 Chart.
+- value가 100 넘지 않도록 상위에서 보장 (컴포넌트가 clamp하지만 로직 책임).
+- 색을 variant로 바꾸지 않는다. 상태색(destructive 등)은 Meter 쪽에서.
+
+### Fallback
+position 애매하면 `fixed`, active 애매하면 `true`.
+
+### 관련
+- [[components/stepper]] — 단계 진행 표시 (ProgressBar와 역할 분리)
+- [[components/table-cell]] — TableCellMeter가 비율 바
+- [[axes/motion]] — indeterminate 애니메이션 duration이 Motion 축에 반응
+
+### Props 시그니처
+```tsx
+<ProgressBar
+  value={number}                               // 0~100. 미지정 시 indeterminate
+  position="fixed | inline"                    // default: fixed
+  active={boolean}                             // default: true. false면 fade-out
+/>
+```
+
+### Mode 매트릭스
+| 모드 | 조건 | 시각 | 쓰임 |
+|---|---|---|---|
+| determinate | `value` 숫자 | %만큼 채움 | 업로드·다운로드·설치 |
+| indeterminate | `value` 미지정 | 무한 왕복 | 네트워크·라우팅 로딩 |
+
+### Position 매트릭스
+| position | 자리 | 쓰임 |
+|---|---|---|
+| `fixed` | 화면 최상단 fixed | **기본** — 라우팅 로딩바(Linear/Vercel 패턴) |
+| `inline` | 부모 안 inline | 폼 안 업로드 진행 |
+
+### 조합 예시
+```tsx
+// 라우팅 로딩 — 상단 fixed indeterminate
+{isLoading && <ProgressBar />}
+
+// 업로드 진행 — inline determinate
+<div className="upload-row">
+  <span>{file.name}</span>
+  <ProgressBar position="inline" value={file.progress} />
+  <span>{file.progress}%</span>
+</div>
+
+// active 토글 — fade-out
+<ProgressBar active={isPending} />
+```

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

@@ -0,0 +1,39 @@
+# Quotation Bar
+
+### 원칙
+ChatInput 상단·Message 안에서 "**다른 글을 인용**"을 1줄로 접어 보여주는 바. `↳ icon + 1줄 ellipsis + X`. 긴 글은 자동으로 끝만 `…`. 삭제 가능한 자리엔 `onRemove`.
+
+### Do
+- 사용자가 메시지 선택·웹 결과를 인용으로 끌어오면 ChatInput 상단에 1건 노출.
+- `title` 속성에 전체 텍스트 자동 세팅 — 호버 시 네이티브 툴팁으로 전문 확인.
+- 삭제가 필요하면 `onRemove`. 레퍼런스는 X 상시 노출.
+- 여러 인용은 현재 설계 **금지** — 1건만. 복수 인용은 상위에서 위아래로 쌓지 말고 선택 UI로 분리.
+
+### Don't
+- 여러 줄 보여주지 않는다 — 1줄 ellipsis가 원칙. 전문은 호버 툴팁·클릭 확장으로.
+- 아이콘(`↳`) 바꾸지 않는다 — 레퍼런스 식별자.
+- 배경을 과한 톤으로 덮지 않는다 — bg 기본, hairline border만.
+- 안에 액션 버튼(Reply/Edit) 추가하지 않는다 — 인용은 "참조 표시"일 뿐, 상호작용은 상위 ChatInput·Message가 책임.
+
+### Fallback
+`onRemove` 없으면 X 숨김. 긴 글은 자동 ellipsis.
+
+### 관련
+- [[components/chat-input]] — 상위 소비처 (상단 bar 자리)
+- [[components/message-bubble]] — 메시지 내 인용 표시에서도 재사용
+- [[components/attachment-chip]] — 비슷한 레이아웃 (lead icon + content + X)
+
+### Props 시그니처
+```tsx
+<QuotationBar
+  text={string}                    // 필수. 자동 ellipsis
+  onRemove={(e) => void}           // 지정 시 우측 X
+/>
+```
+
+### 레이아웃
+- `↳ icon` (`ArrowBendDownRight`, 16×16, `fg-muted`)
+- gap: `space-2`
+- 본문: `fg-muted`, 1줄 ellipsis
+- X: `space-5`, `fg-muted` → hover 시 `bg-subtle` 틴트
+- 외곽: hairline border, radius-md, bg

package/assets/prompts/components/radio.md

@@ -0,0 +1,41 @@
+# Radio
+
+### 원칙
+같은 그룹 안에서 **하나만 선택**하는 컨트롤. 시각(`.indicator`: 외곽 원 + 내부 도트)과 시맨틱(native `<input type="radio">`)을 분리.
+
+색은 [[tokens/color]]의 `--primary` 기반. 상태 4종은 [[components/checkbox]]와 공통 규칙.
+
+### Do
+- **같은 name으로 묶는다**: 그룹 전체가 하나의 `name` 속성을 공유. 시맨틱 그룹은 `role="radiogroup"` 래퍼 권장.
+- **옵션 2개 이상**: 라디오는 최소 2개일 때 의미가 성립. 1개면 [[components/checkbox]]나 [[components/switch]].
+- **선택 취소가 필요하면 Radio가 아니다**: radio는 한 번 선택되면 다시 &ldquo;아무것도 선택 안 함&rdquo;으로 못 돌아온다. 그런 UX가 필요하면 checkbox + 그룹 로직.
+
+### Don't
+- 옵션이 5개를 넘기면 Select를 검토. 라디오는 &ldquo;한눈에 보이는 소수의 선택지&rdquo;용.
+- SVG 도트를 직접 그리지 않는다. CSS `background`/`transform: scale`로 이미 checked 애니메이션까지 처리됨.
+
+### Fallback
+size `md`, status 없음.
+
+### 관련
+- [[components/checkbox]] — 다중 선택 버전. Props/스타일 스펙 형제.
+- [[tokens/color]] — `--primary` · 상태 토큰
+
+### Props 시그니처
+```tsx
+<Radio
+  size="sm | md"                                         // default: md
+  status="success | warning | destructive | info"        // optional
+  name / value / checked / defaultChecked / onChange / disabled ...   // native input
+>
+  {children}                                              // 라벨
+</Radio>
+```
+
+### 상태 매트릭스
+| 상태 | 외곽 원 | 내부 도트 |
+|---|---|---|
+| unchecked | 배경 `--bg` · 테두리 `--border-strong` | scale(0) (숨김) |
+| hover | 테두리 `--fg` | scale(0) |
+| checked | 배경 `--primary` · 테두리 `--primary` | scale(1) · 색 `--bg` |
+| checked + status | 배경/테두리 상태 토큰 | 그대로 |

package/assets/prompts/components/select.md

@@ -0,0 +1,104 @@
+# Select
+
+### 원칙
+단일 값 선택 콤보. Radix Select 위의 compound 어댑터. **Trigger 시각은 [[components/input]]과 100% 동일** (variant/size/invalid/label/description/warning 전부 공유), **Content/Item 시각은 [[components/context-menu]]와 동일** (팝오버 표면 + MenuItem 어댑터). 즉 이 컴포넌트는 두 계층을 잇는 **얇은 어댑터** — 자체 시각 규칙 금지.
+
+### Do
+- Input 옆에 나란히 놓을 땐 size·variant를 **반드시 통일**.
+- `width`는 Input의 InputWidth 규약 그대로: `"fill" | "md" | "lg" | number`.
+- `label`·`description`·`warning`은 Root에 — 트리거 아래 자동 렌더.
+- Group + Label로 논리 묶음. 긴 리스트는 Separator로 끊음.
+- Item에 `leadingActions`로 아이콘·국기·색 스와치 삽입.
+
+### Don't
+- Trigger에 custom CSS로 Input 시각을 벗어나지 않는다 — 두 컴포넌트가 다르게 보이면 폼 전체 시각이 깨짐.
+- 5개 이하 옵션엔 Select 금지 — [[components/tabs]] variant=`segmented`가 자연스러움.
+- 다중 선택에 쓰지 않는다. 그건 [[components/filter-button]] 또는 Combobox(미구현).
+- Content에 자체 애니메이션 재정의 금지 — `.m-float` 유틸이 Radix in/out 담당.
+
+### Fallback
+size 애매하면 `md`, variant 애매하면 `outline`, width 애매하면 `"fill"`.
+
+### 관련
+- [[components/input]] — Trigger 시각·width·label 규약 공유
+- [[components/menu-item]] — Content 안쪽 Item 어댑터
+- [[components/context-menu]] · [[components/dropdown-menu]] — 팝오버 표면 공유
+- [[components/form-field]] — label/description/warning 자리
+- [[axes/density]] — control-h가 Trigger에, menu-item-h가 Item에
+- [[axes/shape]] — radius가 Shape 축에 반응
+
+### Props 시그니처
+```tsx
+<Select
+  size="sm | md | lg"                            // default: md
+  variant="outline | filled | line"              // default: outline
+  width="fill | md | lg | number"                // default: "fill"
+  value={string} defaultValue={string}
+  onValueChange={(v: string) => void}
+  disabled={boolean}
+  invalid={boolean}
+  label={ReactNode}
+  description={ReactNode}
+  warning={ReactNode}                            // 있으면 invalid=true 자동
+  placeholder="선택하세요"
+  id={string}                                    // label htmlFor 자동 연결
+>
+  <Select.Item value="kr" leadingActions={[<Icon name="flag" />]}>한국</Select.Item>
+  <Select.Separator />
+  <Select.Group>
+    <Select.Label>유럽</Select.Label>
+    <Select.Item value="de">독일</Select.Item>
+    <Select.Item value="fr">프랑스</Select.Item>
+  </Select.Group>
+</Select>
+```
+
+### Size × Item 매핑
+| Trigger size | Item size | 쓰임 |
+|---|---|---|
+| `sm` | `sm` | 밀도 높은 폼·툴바 |
+| `md` | `sm` | **기본** — 트리거는 보통, 메뉴는 조밀 |
+| `lg` | `md` | 랜딩·온보딩의 큰 입력 |
+
+> 트리거가 lg여도 메뉴는 과하게 커지지 않도록 한 단계 작게 매핑. 실전에서 자연스러움.
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | Input default |
+| hover | Input hover (border-strong) |
+| focus-visible | Input focus (ring) |
+| open | Content 열림 — `.m-float` emerge |
+| disabled | opacity 0.5, cursor not-allowed |
+| invalid / warning | border destructive, warning 텍스트 노출 |
+
+### 조합 예시
+```tsx
+// 폼 안 Select — label + description, Input 옆에 나란히
+<Select
+  size="md"
+  label="국가"
+  description="청구 주소 기준"
+  placeholder="선택하세요"
+  value={country}
+  onValueChange={setCountry}
+>
+  <Select.Item value="kr" leadingActions={[<span>🇰🇷</span>]}>한국</Select.Item>
+  <Select.Item value="us" leadingActions={[<span>🇺🇸</span>]}>미국</Select.Item>
+  <Select.Item value="jp" leadingActions={[<span>🇯🇵</span>]}>일본</Select.Item>
+</Select>
+
+// 그룹 + 분리선
+<Select label="담당자" placeholder="선택하세요">
+  <Select.Group>
+    <Select.Label>디자인</Select.Label>
+    <Select.Item value="hy">희영</Select.Item>
+    <Select.Item value="ds">도수</Select.Item>
+  </Select.Group>
+  <Select.Separator />
+  <Select.Group>
+    <Select.Label>엔지니어링</Select.Label>
+    <Select.Item value="jw">지원</Select.Item>
+  </Select.Group>
+</Select>
+```

package/assets/prompts/components/selectable-card.md

@@ -0,0 +1,67 @@
+# SelectableCard
+
+### 원칙
+카드 전체가 선택 타겟인 컨트롤. title·description으로 옵션을 서술해야 할 때 [[components/radio]]·[[components/checkbox]]의 라벨만으로 부족한 경우 사용. native `<input type="radio|checkbox">`를 label 안에 숨겨 시맨틱과 폼 전송을 그대로 받는다.
+
+### Do
+- **옵션 서술이 필요할 때만**: title 한 줄로 충분하면 Radio·Checkbox. description이 있어야 뜻이 분명해질 때 SelectableCard.
+- **같은 그룹은 같은 `name`**: 시맨틱 그룹은 `role="radiogroup"` 래퍼 권장 (mode="radio"·"icon").
+- **mode 선택**: 단일 선택은 `radio` 또는 `icon`, 다중 선택은 `checkbox`. `icon`은 아이콘이 옵션 성격을 즉시 알려줄 때만.
+- **카드 간 간격 `space-3`**: 카드끼리 붙지 않도록 vertical stack의 gap은 최소 `space-3`.
+- **상단 잘림 방지**: 카드는 hover 시 `translateY(-1px)`로 살짝 뜬다. 부모 컨테이너가 `overflow: hidden`이거나 카드가 컨테이너 top에 정확히 붙어있으면 뜨는 순간 상단이 잘린다. 컴포넌트가 `margin-top: var(--hairline)`로 1차 방어하지만, 리스트 컨테이너에도 `padding-top` 최소 `space-1` 확보 또는 `overflow: visible` 유지 권장.
+
+### Don't
+- 인디케이터를 카드 밖에 두지 않는다 — leading 슬롯 고정.
+- title/description 밖의 커스텀 콘텐츠(폼 필드, 버튼)를 카드 안에 넣지 않는다. 그건 [[components/callout]] 또는 별도 카드.
+- 옵션이 6개를 넘기면 Select/Combobox 검토. SelectableCard는 "한 화면에 나열되는 소수 옵션"용.
+- `mode="icon"`에 `icon` 미지정 금지 — 좌측 슬롯이 비어 정렬이 무너진다.
+
+### Fallback
+`mode` 미지정 시 `radio`. `icon` 미지정이면 mode="radio" 강제 fallback.
+
+### 관련
+- [[components/radio]] — 텍스트 한 줄 옵션. SelectableCard의 native input 시맨틱 형제.
+- [[components/checkbox]] — 다중 선택 인디케이터 원본.
+- [[components/callout]] — 안내 카드. 선택 대상이 아님.
+- [[tokens/color]] — checked 상태의 `--fg`, `--primary` 토큰.
+
+### Props 시그니처
+```tsx
+<SelectableCard
+  mode="radio | checkbox | icon"                        // default: radio
+  title={ReactNode}                                     // required
+  description={ReactNode}
+  icon={IconName}                                       // mode="icon" 필수
+  name / value / checked / defaultChecked / onChange / disabled ...
+/>
+```
+
+### Variant 매트릭스
+| mode | leading 슬롯 | 선택 정책 | 용도 |
+|---|---|---|---|
+| `radio` | 라디오 도트 | 그룹 내 단일 | 옵션 뜻을 title+description으로 설명해야 하는 단일 선택 |
+| `checkbox` | 체크 박스 | 다중 | 여러 항목 동시 선택 (기능 토글, 필터 세트) |
+| `icon` | Icon 컴포넌트 | 그룹 내 단일 | 아이콘이 옵션 성격을 즉시 전달하는 단일 선택 |
+
+**금지 조합**
+- `mode="checkbox"` + 상호배타 그룹 로직 → 의미 충돌. radio를 쓴다.
+- `mode="icon"` + `icon` 미지정 → leading 슬롯 공백.
+
+### 조합 예시
+```tsx
+<div role="radiogroup" style={{ display: "grid", gap: "var(--space-3)" }}>
+  <SelectableCard
+    name="agent-mode"
+    value="leaf"
+    title="Leaf"
+    description="Works alone in one turn."
+    defaultChecked
+  />
+  <SelectableCard
+    name="agent-mode"
+    value="supervisor"
+    title="Supervisor"
+    description="Splits the task across sub-workers it spawns."
+  />
+</div>
+```

package/assets/prompts/components/shortcut.md

@@ -0,0 +1,76 @@
+# Shortcut
+
+### 원칙
+키보드 단축키를 표시하는 최소 시각 라벨. Menu Item의 trailing 슬롯, Tooltip 힌트, Command Palette 결과 행이 공유한다. 얕은 표면(`--hover`) + hairline border의 “한 덩어리 키캡” 안에 각 심볼이 얕은 gap으로 떨어져 있는 구조. 상호작용·상태 없음 — 순수 시각 라벨이다.
+
+`<kbd>` 태그로 렌더해 시맨틱을 유지한다. Menu Item의 `shortcut` prop이 문자열을 받아 내부에서 Shortcut을 자동 렌더링하므로, 대부분의 경우 직접 조합할 필요 없이 Menu Item 경유로 쓴다.
+
+### Do
+- **문자열이면 자동 분해에 맡긴다**: `"⌘K"` → `[⌘][K]` 두 키캡. `Array.from`으로 code point 분해하므로 이모지·서로게이트도 안전.
+- **다글자 키는 배열로**: `["Ctrl", "K"]` · `["Shift", "⏎"]` 처럼 원소 하나가 한 키. Windows/Linux 표기가 필요한 서비스 대응.
+- **실제 심볼을 우선**: `⌘` · `⇧` · `⌥` · `⌃` · `⏎` · `⌫` · `⇥` · `␣` · `⎋`. 대문자 축약(`CMD`·`SHIFT`)은 [[feedback_no_uppercase]] 원칙상 금지.
+- **size는 붙는 곳에 맞춘다**: Menu Item `sm` 옆이면 `sm`, `md` 옆이면 `md`. 라벨 폰트보다 커지지 않게 한 단계 낮게 짝지음. Menu Item에서 렌더할 땐 자동으로 사이즈가 짝지어짐.
+- **가장 흔한 사용처는 Menu Item**: `<MenuItem shortcut="⌘K">` — trailing 슬롯 맨 앞에 자동 삽입된다. 직접 `trailingActions`에 넣지 않는다.
+
+### Don't
+- 인터랙션을 붙이지 않는다. Shortcut은 &ldquo;표기&rdquo;일 뿐 실제 키 핸들링은 상위 컴포넌트(Menu Item, Command Palette, 페이지 전역 훅) 책임.
+- 문장이나 아이콘을 넣지 않는다. 심볼 단위 표기 전용.
+- 색을 hex/tailwind로 직접 지정하지 않는다. 표면·텍스트·border 모두 토큰 경유.
+- 대문자 축약 + wide letter-spacing 조합 금지 ([[feedback_no_uppercase]]).
+- 여러 키캡 사이에 `+`나 `-` 같은 구분자 문자를 넣지 않는다. 심볼 사이 gap이 이미 구분자 역할을 한다.
+
+### Fallback
+size 애매하면 `sm`. Menu Item 안에서 쓸 때는 Menu Item이 자동으로 짝지어주므로 신경 쓰지 않아도 됨.
+
+### 관련
+- [[components/menu-item]] — 가장 흔한 사용처. `shortcut` prop이 내부에서 Shortcut 렌더링.
+- [[components/tooltip]] · [[components/command-palette]] — 힌트/결과 행에서 함께 등장.
+- [[axes/density]] — 폰트·padding이 Density 축에 반응.
+- [[axes/shape]] — radius가 Shape 축에 반응.
+- [[tokens/color]] — `--hover`(표면) · `--border`(hairline) · `--fg-subtle`(텍스트).
+- [[feedback_no_uppercase]] — 대문자 축약 대신 심볼 사용.
+
+### Props 시그니처
+```tsx
+<Shortcut
+  size="sm | md"                                     // default: sm
+>
+  {children}                                         // string | string[] | ReactNode
+</Shortcut>
+```
+
+`children` 처리 규칙:
+- `string` → `Array.from`으로 심볼 단위 분해 (`"⌘⇧P"` → `[⌘][⇧][P]`, 공백은 무시).
+- `string[]` → 각 원소가 한 키 (다글자 키 대응: `["Ctrl", "K"]`).
+- `ReactNode` → 그대로 렌더 (완전 자유 조합).
+
+### Size 가이드
+| size | 폰트 | radius | 언제 |
+|---|---|---|---|
+| `sm` | `--text-xs` | `--radius-xs` | **기본.** Menu Item sm/md 옆, Command Palette 결과 행 |
+| `md` | `--label-sm-size` | `--radius-sm` | Menu Item lg 옆 (필요 시), 페이지 문서 안 예시 |
+
+### 조합 예시
+```tsx
+// 가장 흔한 사용 — Menu Item shortcut prop 경유
+<MenuItem leadingActions={[<Icon name="search" />]} shortcut="⌘K">
+  검색
+</MenuItem>
+
+<MenuItem leadingActions={[<Icon name="user" />]} shortcut="⌘,">
+  계정 설정
+</MenuItem>
+
+// 직접 사용 — Tooltip 힌트
+<Tooltip content={<>붙여넣기 <Shortcut>⌘V</Shortcut></>}>
+  <IconButton icon={<Icon name="clipboard" />} aria-label="붙여넣기" />
+</Tooltip>
+
+// 다글자 키 (Windows/Linux 표기)
+<Shortcut>{["Ctrl", "K"]}</Shortcut>
+<Shortcut>{["Shift", "⏎"]}</Shortcut>
+
+// 조합 심볼
+<Shortcut>⌘⇧P</Shortcut>   {/* Command + Shift + P */}
+<Shortcut>⌫</Shortcut>      {/* Backspace 단독 */}
+```