@conscience-technology/ctds 0.1.8 → 0.1.10

package/assets/prompts/components/calendar.md

@@ -0,0 +1,123 @@
+# Calendar
+
+### 원칙
+
+페이지에 **인라인**으로 들어가는 월간 캘린더. 날짜 하나를 "고르기만 하는" [[components/date-picker]]와는 역할이 완전히 다르다 — Calendar는 **콘텐츠로서의 달력**이다. 셀마다 이벤트 pill이 쌓이고, 선택된 날짜가 페이지 다른 영역(사이드 리스트·상세 패널)의 입력이 된다. 그래서 Popover 안에 넣지 않는다. 날짜 입력이 필요하면 DatePicker, 월간 뷰가 필요하면 Calendar.
+
+### Do
+- `month`는 controlled — 외부 상태로 쥔다. `onMonthChange` 짝. `selectedDate`도 controlled.
+- 이벤트 pill의 `tone`은 **의미**에 매핑. 색은 7개 토큰(default/accent/success/warning/danger/info/neutral)만 — Presto류 14색 팔레트 재현 금지.
+- 셀을 넘치는 이벤트는 자동으로 `+N` 뱃지로 접힌다. 내부 스크롤을 만들지 않는다 — 셀 안 스크롤은 밀도 신호를 깬다.
+- `weekStartsOn`은 기본 `1` (월요일) — 업무 캘린더 관행. 생활 캘린더는 `0`으로 명시.
+- 토요일은 `--info`, 일요일은 `--destructive` 톤. 이 두 색만 요일 신호로 쓰고 임의 색 추가 금지.
+- 선택된 셀은 inset ring(--primary)로만 신호한다. 배경을 primary로 채우지 않는다 — 그 자리는 이벤트 pill 공간이다.
+- 보더는 그리드가 top/left를, 각 셀이 right/bottom을 그린다 — 열 수가 바뀌어도(5↔7) 왼쪽 세로선이 안정적으로 유지된다. 셀 nth-child 보더 제거 트릭 쓰지 말 것.
+
+### Don't
+- Popover로 감싸지 않는다 — 이건 DatePicker 자리. Calendar는 페이지 레이아웃의 블록 영역을 차지한다.
+- 셀 안에 "클릭 가능한 이벤트 pill"을 만들지 않는다 — 셀 전체가 하나의 클릭 타겟이고, 상세는 사이드 패널·Drawer에서 연다. pill 안에 또 버튼이 들어가면 클릭 영역이 미궁에 빠진다.
+- 요일 헤더에 "월요일/화요일" 두 글자 표기 금지 — "월·화" 한 글자. 두 글자는 가로 공간을 먹고 셀 수가 줄어든 느낌을 준다.
+- 하루 셀에 이벤트 pill 5개 이상 노출 금지. 넘치면 `+N`으로 접고 선택 시 사이드 리스트에 전부 뿌린다.
+- `showWeekend=false`일 때 토·일 셀 자리를 유지하지 않는다 — 숨길 거면 열 자체를 5열로 접는다.
+- 이벤트 pill에 `pill` radius(완전 둥근) 쓰지 않는다 — Shape 축이 radius를 쥐고 있는데 pill로 고정하면 Soft/Standard/Crisp 신호가 셀 안에서 깨진다.
+- Calendar 자체 상단바에 "주말 숨김" 류 **뷰 옵션 토글**을 넣지 않는다 — Calendar는 콘텐츠 블록이고, 뷰 옵션은 호스트 화면의 툴바 영역이 담당한다. 외부 state로 `showWeekend`를 넘겨 조립할 것. (월 이동·오늘 복귀는 Calendar 내부 — 뷰 옵션이 아니라 "지금 보는 좌표" 조작이므로 예외.)
+
+### Fallback
+`today` 생략하면 `new Date()`. `selectedDate` 없이도 성립 — 그냥 뷰어로 쓸 수 있다. `events` 빈 배열이어도 그리드만 그려진다. `tone` 애매하면 `default`.
+
+### 관련
+- [[components/date-picker]] — "날짜 입력"이 목적이면 그쪽. Popover + Input 트리거. Calendar와 utils(buildMonthGrid 등) 공유.
+- [[components/badge]] — 이벤트 pill의 톤 체계는 Badge soft와 동일 토큰. "+N"·"오늘" 뱃지도 Badge 재사용.
+- [[components/icon-button]] — 월 이동 네비게이션(이전해·이전달·다음달·다음해 4개). ghost + sm.
+- [[components/button]] — "오늘" 복귀 버튼은 outline·sm, "주말" 토글은 ghost/secondary·sm.
+- [[axes/shape]] — 셀 radius는 없음(격자형이라 radius 신호를 셀이 받지 않음). pill·badge만 Shape 축에 반응.
+- [[axes/density]] — compact일수록 셀 padding이 줄고 pill이 더 많이 보임.
+- [[tokens/color]] — `--primary`(선택), `--hover`(셀 hover), `--border`(hairline), `--bg-muted` + `*-subtle`(pill 배경), `--info`/`--destructive`(요일 신호).
+
+### Props 시그니처
+
+```tsx
+<Calendar
+  month={Date}                                    // required — 현재 보여줄 달 (controlled)
+  today={Date}                                    // default: new Date()
+  selectedDate={Date | null}                      // 셀 하이라이트
+  events={CalendarEvent[]}                        // id/date/title/code?/tone?/resolved?
+  weekStartsOn={0 | 1}                            // default: 1 (월)
+  showWeekend={boolean}                           // default: true
+  leadingSlot={ReactNode}                         // 상단바 왼쪽 — Google 연결 뱃지 등
+  showTodayButton={boolean}                       // default: true
+  onMonthChange={(next: Date) => void}
+  onSelectedDateChange={(next: Date) => void}
+/>
+
+type CalendarEvent = {
+  id: string;
+  date: string;                                   // yyyy-MM-dd
+  title: string;
+  code?: string;                                  // 보조 라벨 (사건번호·코드 등)
+  tone?: "default" | "accent" | "success" | "warning" | "danger" | "info" | "neutral";
+  resolved?: boolean;                             // 체크 아이콘
+};
+```
+
+### Tone 매트릭스
+
+| tone | 배경 | 글자 | 쓰임새 |
+|---|---|---|---|
+| `default` | `--bg-muted` | `--fg` | 중립 — 기본값. 미분류 일정 |
+| `neutral` | `--secondary-bg` | `--secondary-fg` | 약한 강조 — 사내 공지·루틴 |
+| `accent` | `--primary-subtle` | `--secondary-fg` | 브랜드 액션 — "내 일정"·주요 미팅 |
+| `success` | `--success-subtle` | `--success` | 확정·완료 |
+| `warning` | `--warning-subtle` | `--warning` | 임박·주의 |
+| `danger` | `--destructive-subtle` | `--destructive` | 마감·실패 |
+| `info` | `--info-subtle` | `--info` | 참고·외부 캘린더 |
+
+**금지 조합**
+- `tone="danger"`를 "눈에 띄게" 쓰려고 전부 danger로 깔기 — 색이 의미 신호를 잃는다. 셀당 1개가 danger라면 다른 셀은 default/accent여야 한다.
+- Calendar를 가로 너비 300px 미만에 끼워넣기 — 셀이 사각형을 못 지키고 pill 1개도 안 들어간다. 이 자리는 DatePicker.
+- `showWeekend=false` + 월말 날짜가 토/일에 몰린 달 — 선택 가능한 셀이 사라져 "클릭이 안 되는 날짜"가 생긴다. 주말 숨김은 평일만 다루는 업무 캘린더 전용.
+
+### 조합 예시
+
+```tsx
+// 기본 — 페이지 메인에 깔리는 월간 뷰
+const [month, setMonth] = useState(new Date());
+const [selected, setSelected] = useState<Date | null>(new Date());
+
+<Calendar
+  month={month}
+  selectedDate={selected}
+  events={events}
+  onMonthChange={setMonth}
+  onSelectedDateChange={setSelected}
+/>
+
+// 2단 레이아웃 — 선택 날짜 상세 패널과 짝. 리스트는 ListItem으로 조립.
+<div className="flex min-h-0 flex-1">
+  <Calendar
+    month={month}
+    selectedDate={selected}
+    events={events}
+    onMonthChange={setMonth}
+    onSelectedDateChange={setSelected}
+  />
+  <aside className="w-80 shrink-0 border-l border-[var(--border)]">
+    <SelectedDayPanel date={selected} items={eventsOf(selected)} />
+  </aside>
+</div>
+
+// 외부 상태 신호가 있는 상단바 — leadingSlot으로 Badge 꽂음
+<Calendar
+  leadingSlot={<Badge variant="soft" status="info">Google 연결됨</Badge>}
+  month={month}
+  onMonthChange={setMonth}
+/>
+
+// 업무 전용 — 주말 숨김, 월요일 시작
+<Calendar
+  month={month}
+  showWeekend={false}
+  weekStartsOn={1}
+  onMonthChange={setMonth}
+/>
+```

package/assets/prompts/components/code-block.md

@@ -0,0 +1,35 @@
+# Code Block
+
+### 원칙
+[[components/ai-message]] 안에 들어가는 코드 블록. 상단 언어 라벨 + copy 버튼, 본문은 mono font pre+code. 가로 overflow 시 scroll. **Syntax highlighting은 CodeBlock의 책임이 아님** — 소비처가 highlighted ReactNode를 `code`로 넘기거나(span 조합) plain string.
+
+### Do
+- 언어 아는 경우 `language="html"` 처럼 라벨 노출 — 작게 fg-muted로.
+- `onCopy`를 안 주면 clipboard API로 자동 복사. 성공 시 Check 아이콘으로 1.5s 피드백.
+- 가로가 넘치면 pre 안에서 가로 스크롤 — body wrapping 대신.
+
+### Don't
+- CodeBlock 안에 "실행" 버튼이나 "preview 전환" 넣지 않는다. 그건 소비처 책임.
+- syntax highlighting을 내장하지 않는다 — shiki/highlight.js는 소비처에서.
+
+### Fallback
+language 애매하면 생략. onCopy 애매하면 clipboard API 기본.
+
+### 관련
+- [[components/ai-message]] — 상위 소비처
+- [[primitives/scroll]] — pre 가로 스크롤 룰
+
+### Props 시그니처
+```tsx
+<CodeBlock
+  code={string | ReactNode}        // 코드 본문 (string이면 clipboard 복사 대상)
+  language={string}                // "html" / "tsx" 등. 없으면 숨김
+  onCopyCode={(code) => void}      // 미지정 시 navigator.clipboard (React의 onCopy와 이름 충돌 회피)
+/>
+```
+
+### 레이아웃
+- root: `primary-subtle` bg, `radius-md`, overflow hidden
+- header: `space-2 space-3` padding, 언어 라벨(mono text-xs fg-muted) + copy 버튼
+- copy 버튼: `space-6` 정사각, `bg-muted` 기본
+- 본문 `<pre>`: `space-2 space-4 space-4` padding, mono text-sm, line-height 1.6, overflow-x auto

package/assets/prompts/components/dropdown-menu.md

@@ -0,0 +1,145 @@
+# DropdownMenu
+
+### 원칙
+버튼 클릭(또는 Enter/Space)으로 열리는 **트리거 중심 액션·옵션 메뉴**. 모델 전환, 뷰 전환, 유저 메뉴, 리스트 행의 ⋯ 메뉴처럼 "이 버튼을 눌러서 선택지 중 하나를 고른다"에 쓴다. [[components/context-menu]]와 트리거 방식만 다르고 Content 이하(Item·CheckboxItem·RadioItem·Sub) 시각·슬롯·상태는 전부 동일 — 두 컴포넌트는 같은 `.surface`와 [[components/menu-item]] 어댑터를 공유한다. Radix `@radix-ui/react-dropdown-menu` 위에 얹은 compound 어댑터.
+
+### Do
+- **트리거는 명확한 버튼**: 모델 셀렉터·"더 보기 ⋯"·유저 아바타처럼 눌러서 메뉴가 열림을 암시하는 요소. caret 아이콘·⋯ 아이콘을 붙이면 발견성↑.
+- **`asChild`로 트리거 위임**: `<DropdownMenu.Trigger asChild>`로 Button·IconButton·IdentityButton 어느 것이든 트리거로. 자체 button 중첩되지 않도록 반드시 `asChild`.
+- **값 선택 vs 액션 발사**: 값 선택이 폼의 일부고 label·description·invalid가 붙어야 하면 [[components/select]]를 쓸 것. 그 외(명령 발화·토글·배타 옵션 선택)는 DropdownMenu.
+- **논리 그룹화**: 관련 액션끼리 묶고 `Separator`로 분리. 파괴적 액션은 맨 아래, `variant="destructive"`.
+- **키보드는 Radix에 맡김**: 화살표·Home/End·타이핑 서치·Esc·Tab 이미 처리됨. 자체 키 핸들러 금지.
+- **선택 후 자동 닫힘 활용**: `onSelect`가 발화하면 Radix가 자동 닫음. 다중 토글처럼 열림 유지가 필요하면 `e.preventDefault()`.
+- **상태 아이템**: 토글은 `CheckboxItem`, 배타 선택은 `RadioGroup` + `RadioItem`. 인디케이터는 자동.
+- **중첩은 `Sub` 트리오**: `Sub` / `SubTrigger` / `SubContent`.
+- **단축키는 실제 심볼**: `⌘K` · `⇧⌘P` · `⌫`. uppercase 금지 — [[feedback_no_uppercase]].
+- **아이콘은 액션 의미와 정확히 일치할 때만 붙인다.** 어긋나면 라벨만 둬도 좋다. 유효한 아이콘 이름은 [[web/components/Icon/Icon.tsx]]에 있는 세트에서만 — 없는 이름 지어내지 말 것(렌더 실패).
+- **라벨은 짧게 — 한글 8–12자 · 영문 12–20자 이내.** 폭은 표준 224px이고 최대 한 스텝(+48px)만 넓어진다.
+
+### Don't
+- 폼 필드 자리에 DropdownMenu를 쓰지 말 것. label·description·invalid·필드 폭 통일이 필요하면 [[components/select]].
+- 핵심 CTA를 메뉴 안에 숨기지 말 것. 자주 쓰는 액션은 메뉴 밖 버튼으로.
+- 한 메뉴에 12개 이상 아이템 금지 — 넘치면 `Sub`로 접기.
+- **긴 라벨 두 줄 금지.** `white-space: nowrap` + 표준 폭이 시각 계약. 짧게 못 쓰면 라벨 자체를 재설계.
+- Trigger에 button을 중첩하지 말 것 — `<button><Button /></button>` 되지 않도록 `asChild` 사용.
+- 시각 위해 Content에 hard-coded 색·radius·shadow 얹지 말 것. 토큰 경유 ([[PRINCIPLES]] §6).
+- Radix 포지셔닝을 뒤흔들지 말 것 (Content `position: fixed`/`transform` 강제 금지). `collisionPadding`·`side`·`align`·`sideOffset`만 조절.
+
+### Fallback
+size 애매하면 `md`. Item variant 애매하면 `default`. 선택 상태가 폼 값이면 [[components/select]]로 넘길 것.
+
+### 관련
+- [[components/menu-item]] — 시각·슬롯·상태 규칙의 원본. DropdownMenu는 이 위에 얇게 얹은 어댑터.
+- [[components/context-menu]] — 트리거만 다름(우클릭 vs 클릭). Content 이하는 동일 패턴 공유.
+- [[components/select]] — 폼 필드로서의 "선택" UI. form-field trigger가 필요하면 이쪽.
+- [[components/icon-button]] — 케밥(⋮)·미트볼(⋯) 트리거.
+- [[components/alert-dialog]] — 파괴적 액션 확인은 여기.
+- [[axes/shape]] · [[axes/density]] — Content radius·아이템 min-height가 반응.
+- [[tokens/color]] — `--bg` · `--border` · `--shadow-lg` · `--hover`가 시각.
+
+### Props 시그니처
+```tsx
+<DropdownMenu>                               // Radix Root — open/onOpenChange/modal 전부 통과
+  <DropdownMenu.Trigger asChild>             // 클릭·Enter·Space 트리거
+    <Button>...</Button>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content
+    size="sm | md"                           // default: md
+    side="top | right | bottom | left"       // Radix default: bottom
+    align="start | center | end"             // default: center
+    sideOffset={6}                           // default: 6
+    collisionPadding={8}                     // default: 8
+  >
+    <DropdownMenu.Label>...</DropdownMenu.Label>
+    <DropdownMenu.Item
+      size="sm | md"
+      variant="default | destructive"
+      leadingActions={MenuItemAction[]}
+      trailingActions={MenuItemAction[]}
+      shortcut="⌘C"
+      disabled={boolean}
+      onSelect={(e) => void}
+    >
+      ...
+    </DropdownMenu.Item>
+    <DropdownMenu.CheckboxItem
+      checked={boolean | "indeterminate"}
+      onCheckedChange={(v) => void}
+    />
+    <DropdownMenu.RadioGroup value onValueChange>
+      <DropdownMenu.RadioItem value="..." />
+    </DropdownMenu.RadioGroup>
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>...</DropdownMenu.SubTrigger>
+      <DropdownMenu.SubContent>...</DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+    <DropdownMenu.Separator />
+  </DropdownMenu.Content>
+</DropdownMenu>
+```
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| 열림 · 닫힘 | Content in/out은 전역 `.m-float` 유틸. 자체 애니메이션 재정의 금지. |
+| 아이템 highlight | `--hover` 배경, `fg-strong` — MenuItem 규칙 그대로 |
+| checked (Checkbox) | leading 맨 앞 checkmark 자동 |
+| checked (Radio) | leading 맨 앞 dot 인디케이터 |
+| disabled | `fg-disabled`, 커서 not-allowed, 키보드 순환 제외 |
+| destructive · hover | 배경 destructive 8%, 텍스트·아이콘 destructive |
+
+### Size 가이드
+| size | 언제 |
+|---|---|
+| `sm` | 밀도 높은 관리 UI · 툴바 메뉴 |
+| `md` | **기본.** 일반 드롭다운 |
+
+### 조합 예시
+```tsx
+// ChatInput 모델 셀렉터
+<DropdownMenu>
+  <DropdownMenu.Trigger asChild>
+    <ModelSelector label="Llama" />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end" size="sm">
+    <DropdownMenu.RadioGroup value={model} onValueChange={setModel}>
+      <DropdownMenu.RadioItem value="llama">Llama</DropdownMenu.RadioItem>
+      <DropdownMenu.RadioItem value="claude">Claude</DropdownMenu.RadioItem>
+      <DropdownMenu.RadioItem value="gpt">GPT</DropdownMenu.RadioItem>
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
+</DropdownMenu>
+
+// 리스트 행의 ⋯ 메뉴
+<DropdownMenu>
+  <DropdownMenu.Trigger asChild>
+    <IconButton icon="dots-three" aria-label="더 보기" />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    <DropdownMenu.Item shortcut="⌘E" onSelect={rename}>이름 변경</DropdownMenu.Item>
+    <DropdownMenu.Item shortcut="⌘D" onSelect={duplicate}>복제</DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item variant="destructive" shortcut="⌫" onSelect={remove}>삭제</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu>
+
+// 유저 아바타 메뉴 — Label + 중첩
+<DropdownMenu>
+  <DropdownMenu.Trigger asChild>
+    <IdentityButton avatar={...} />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    <DropdownMenu.Label>Signed in as hehe@...</DropdownMenu.Label>
+    <DropdownMenu.Item onSelect={profile}>프로필</DropdownMenu.Item>
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>테마</DropdownMenu.SubTrigger>
+      <DropdownMenu.SubContent>
+        <DropdownMenu.Item onSelect={() => setTheme("light")}>라이트</DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={() => setTheme("dark")}>다크</DropdownMenu.Item>
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item variant="destructive" onSelect={signOut}>로그아웃</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu>
+```

package/assets/prompts/components/identity-button.md

@@ -0,0 +1,168 @@
+# IdentityButton
+
+### 원칙
+식별 가능한 **대상**(워크스페이스·프로필·프로젝트·조직·환경)을 **현재 선택 상태**로 보여주면서, 클릭 가능함을 암시하는 가로 식별 블록. 좌측 identity(Avatar/Icon) + 2줄 라벨(name + sub) + 우측 trailing(caret-down·IconButton·Badge)이 뼈대. 사이드바 Header의 워크스페이스 스위처, Footer의 프로필, Topbar의 조직 스위처, 계정 chooser 리스트 — 전부 이 컴포넌트가 담당.
+
+Select/Input/DropdownMenu 자체가 아니다 — 이 컴포넌트는 **트리거** 또는 **표시**다. 전환 메뉴를 열고 싶다면 `asChild`로 DropdownMenu.Trigger에 위임한다.
+
+### Do
+- **역할 중립** — workspace·profile·project·org·env 전부 같은 컴포넌트로. "모양"은 같고 trailing만 바뀜 (caret-down=전환 가능, IconButton=메뉴 열기, 생략=표시 전용).
+- **네비게이션 액션에 Input Dropdown 금지** — 워크스페이스 전환은 폼이 아니라 라우트 액션. IdentityButton + DropdownMenu 조합이 표준 ([[antipattern_workspace_switcher]]).
+- **`asChild`로 트리거 위임** — DropdownMenu.Trigger, Popover.Trigger 등에 그대로 `asChild`.
+- **collapsed 상태는 Sidebar가 자동 주입** — 사이드바 밖에서 쓸 땐 신경 안 써도 됨. 사이드바 안에선 context로 전달됨.
+- **leading 자유도** — Avatar가 기본이지만 Icon·Emoji·커스텀 노드 아무거나 `leading` prop에 삽입 가능. 조직 로고·프로젝트 심볼 등.
+- **1줄 모드** — `sub` 생략하면 자동으로 1줄 레이아웃. 라벨만 필요한 가벼운 트리거일 때.
+- **trailing에 bare `<Icon>`을 쓸 땐 `size={14}` 명시** — Icon 기본값(20px)은 라벨 옆에 두면 과하다.
+- **trailing에 `IconButton`을 쓸 땐 size를 IdentityButton size와 맞춘다** — IdentityButton md/lg면 IconButton md, sm이면 IconButton sm. sm 섞어 쓰면 라벨 옆에서 왜소해 보임.
+- **trailing 아이콘은 역할에 따라 바꾼다** — 의미가 어긋나면 사용자가 다른 동작을 기대함:
+  - `caret-down` (Icon) — **아래로 열리는 드롭다운**. 가장 기본. 사이드바 Header 워크스페이스 스위처, Topbar 조직 스위처.
+  - `caret-up` (Icon) — **위로 열리는 패널/메뉴**. 사이드바 Footer 프로필처럼 위쪽으로 메뉴가 올라올 때.
+  - `gear` (IconButton) — **설정 페이지로 이동**. 메뉴가 아니라 바로 라우트 이동. root click과 분리 (`e.stopPropagation()`).
+  - `dots-three` (IconButton) — **⋯ 추가 액션 메뉴**. 로그아웃·계정 관리 등 부가 액션.
+  - 생략 — **표시 전용**. 전환 불가하거나 다른 자리에서 전환하는 경우.
+
+### Don't
+- Select·Input Dropdown으로 이 역할 매핑 금지 ([[antipattern_workspace_switcher]]).
+- 두 가지 "주된 액션"을 넣지 않는다 — root click 하나가 selection이자 trigger. 부가 액션은 `trailing`에 IconButton 하나까지만.
+- 라벨을 두 줄 이상 넣지 않는다 — `name` 1줄 + `sub` 1줄이 상한. 설명이 길면 [[components/tooltip]].
+- height를 CSS로 덮어쓰지 않는다 — `size` prop 경유.
+- 사이드바 밖에서 쓸 때 자체 border/box-shadow 두르지 않는다 — 호스트가 담당 (Topbar·Card 안이면 그 컨테이너의 경계 그대로).
+
+### Fallback
+size 애매하면 `md`. variant 애매하면 `ghost`. trailing 애매하면 **caret-down** (전환 가능함을 암시하는 게 안전).
+
+### 관련
+- [[components/sidebar]] — Header/Footer 안 가장 흔한 사용처 (Sidebar.Profile은 이 컴포넌트의 preset 래퍼)
+- [[components/dropdown-menu]] — `asChild`로 트리거 위임하는 짝
+- [[components/avatar]] — leading 기본 요소
+- [[axes/density]] — `--control-h-*`가 size에 매핑
+- [[antipattern_workspace_switcher]] — "Input Dropdown으로 매핑 금지" 안티패턴
+
+### Props 시그니처
+```tsx
+<IdentityButton
+  size="sm | md | lg"                     // default: md
+  variant="ghost | muted"                 // default: ghost
+  avatar={{...AvatarProps}}               // 좌측 Avatar. src/initials/icon/status 패스스루
+  leading={ReactNode}                     // avatar 대신 임의 노드 (Icon, Emoji, 로고 SVG)
+  name={ReactNode}                        // 1줄 메인 라벨
+  sub={ReactNode}                         // 2번째 줄 (생략 시 1줄 모드)
+  trailing={ReactNode}                    // caret-down · IconButton · Badge 등
+  active={boolean}                        // 리스트에서 현재 선택
+  disabled={boolean}
+  collapsed={boolean}                     // icon-only (Sidebar가 자동 주입)
+  asChild={boolean}                       // Radix Slot — DropdownMenu.Trigger 등에 위임
+  onClick={(e) => void}
+/>
+```
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default (ghost) | 투명 bg, `--fg` 텍스트 |
+| hover · focus-visible | `--hover` 배경 |
+| active (현재 선택) | `--bg-muted` 배경 + `--fg-strong` + medium weight. hover가 덮지 않음 ([[feedback_hover_over_active]]) |
+| variant=muted | 항상 `--bg-muted` 배경 — 사이드바 안에서 톤 대비가 필요할 때 |
+| collapsed | leading 하나만, 가운데 정렬, 라벨/sub/trailing 전부 숨김 |
+| disabled | `cursor: not-allowed` + opacity 0.5 |
+
+### Size 가이드
+| size | min-height | 언제 |
+|---|---|---|
+| `sm` | `--control-h-sm` | 조밀한 Topbar 조직 스위처, 리스트 아이템 |
+| `md` | `--control-h-md` | **기본.** 사이드바 Header·Footer, 일반 트리거 |
+| `lg` | `--control-h-lg` | 사이드바 워크스페이스 Header처럼 아이덴티티가 가장 강하게 노출돼야 할 때 |
+
+### 조합 예시
+```tsx
+// 1. 사이드바 Header 워크스페이스 스위처 — DropdownMenu로 전환
+<Sidebar.Header>
+  <DropdownMenu>
+    <DropdownMenu.Trigger asChild>
+      <IdentityButton
+        size="lg"
+        avatar={{ initials: "T", shape: "rounded" }}
+        name="Taskify PM"
+        sub="Project Workspace"
+        trailing={<Icon name="caret-down" size={14} />}
+        aria-haspopup="menu"
+      />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      {/* 워크스페이스 리스트 + Separator + "+ 새 워크스페이스" */}
+    </DropdownMenu.Content>
+  </DropdownMenu>
+</Sidebar.Header>
+
+// 2a. 사이드바 Footer 프로필 + 위로 올라가는 메뉴 — caret-up
+<Sidebar.Footer>
+  <DropdownMenu>
+    <DropdownMenu.Trigger asChild>
+      <IdentityButton
+        avatar={{ src: user.avatar, status: "online" }}
+        name="희영"
+        sub="admin@ctds.dev"
+        trailing={<Icon name="caret-up" size={14} />}
+        aria-haspopup="menu"
+      />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content side="top" align="start">
+      {/* 계정 전환 · 설정 · 로그아웃 */}
+    </DropdownMenu.Content>
+  </DropdownMenu>
+</Sidebar.Footer>
+
+// 2b. 사이드바 Footer 프로필 + 설정으로 바로 이동 — gear IconButton
+// trailing의 IconButton onClick은 반드시 e.stopPropagation()으로 root click과 분리.
+<Sidebar.Footer>
+  <IdentityButton
+    avatar={{ src: user.avatar, status: "online" }}
+    name="희영"
+    sub="admin@ctds.dev"
+    trailing={
+      <IconButton
+        size="md"
+        variant="ghost"
+        icon={<Icon name="gear" />}
+        aria-label="설정"
+        onClick={(e) => { e.stopPropagation(); router.push("/settings"); }}
+      />
+    }
+    onClick={() => openProfilePanel()}
+  />
+</Sidebar.Footer>
+
+// 3. Topbar 조직 스위처 — size=sm
+<DropdownMenu>
+  <DropdownMenu.Trigger asChild>
+    <IdentityButton
+      size="sm"
+      leading={<Icon name="buildings" />}
+      name="Conscience Technology"
+      trailing={<Icon name="caret-down" size={14} />}
+    />
+  </DropdownMenu.Trigger>
+</DropdownMenu>
+
+// 4. Account chooser 리스트 — active 상태로 현재 선택 표시
+<div role="listbox">
+  {accounts.map((a) => (
+    <IdentityButton
+      key={a.id}
+      avatar={{ src: a.avatar }}
+      name={a.name}
+      sub={a.email}
+      active={a.id === currentId}
+      onClick={() => select(a.id)}
+    />
+  ))}
+</div>
+
+// 5. 1줄 모드 — sub 없이 가볍게
+<IdentityButton
+  size="sm"
+  leading={<Icon name="folder" />}
+  name="Design System"
+  trailing={<Icon name="caret-down" size={14} />}
+/>
+```

package/assets/prompts/components/menu-item.md

@@ -19,7 +19,7 @@ root는 `<div role="menuitem">`이다 — `leadingActions`/`trailingActions`에
 ### Don't
 - MenuItem 안에 두 개 이상의 &ldquo;주된 액션&rdquo;을 두지 않는다 — 아이템 전체가 하나의 selection. 부가 액션(즐겨찾기 토글·⋯메뉴)만 slot에 얹는다.
 - 라벨을 두 줄 이상 넣지 않는다. 설명이 필요하면 [[components/command-palette]] description 슬롯이나 [[components/tooltip]].
-- 페이지 이동에 root click 시맨틱 금지. 라우팅 아이템이면 `asChild`로 `<Link>`/`<a>`에 위임.
+- 페이지 이동에 root click 시맨틱 금지. 라우팅 아이템이면 `asChild`로 `<Link>`/`<a>`에 위임. **단, `asChild`일 땐 라벨 `.label` 래퍼가 적용되지 않는다** — 자식(`<Link>`) 자체가 라벨 역할이라 truncation·color·weight가 자동 상속되지 않음. 긴 라벨이면 `<Link>` 쪽에 truncate 유틸을 걸거나, 짧게 유지하는 설계로.
 - height를 CSS로 덮어쓰지 않는다. `size` prop 경유 (Density 축이 스왑).
 - hover-only 액션을 &ldquo;시각적으로 숨김&rdquo;으로만 처리하지 않는다 — `opacity: 0` + `pointer-events: none`이 짝. 안 그러면 안 보이는 버튼이 클릭됨.
 
@@ -81,6 +81,7 @@ type MenuItemAction =
   checked={boolean}                      // leadingActions 맨 앞에 checkmark 자동 삽입
   active={boolean}                       // 현재 페이지/선택 아이템 강조
   disabled={boolean}
+  collapsed={boolean}                    // icon-only. leading 하나만 남기고 label/trailing/shortcut 전부 숨김. (Sidebar가 자동 주입)
   asChild={boolean}                      // Radix Slot — <Link>/<a>/DropdownMenu.Item 등에 위임
   onClick={(e) => void}
 />

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

@@ -0,0 +1,49 @@
+# Message Actions
+
+### 원칙
+메시지 하단에 붙는 **아이콘 액션 바**. [[components/user-message]] · [[components/ai-message]] · MessageState에서 공용. copy / edit / regenerate 등 kind 열거로 아이콘 자동 매핑.
+
+### Do
+- UserMessage: `[copy, edit]` 조합이 기본 (오른쪽 정렬 `align=end`).
+- AIMessage: `[copy, regenerate]` 조합이 기본 (왼쪽 정렬 `align=start`).
+- 호버·focus-visible에서만 ring 노출, 평상시엔 투명 bg + fg-muted 아이콘.
+- 커스텀 액션 필요하면 `icon`에 직접 ReactNode 전달.
+
+### Don't
+- 액션 라벨을 아이콘 옆에 노출하지 않는다 — `title`(툴팁)과 `aria-label`만.
+- 액션 사이에 구분선 넣지 않는다 — gap으로 공간만 분리.
+- 많은 액션(5개 이상) 나열 금지 — 메뉴 오버플로우로 숨김 고려.
+
+### Fallback
+align 애매하면 `start`. kind 없는 커스텀 액션은 `icon` 직접 전달.
+
+### 관련
+- [[components/user-message]] / [[components/ai-message]] — 메인 소비처
+- [[components/icon-button]] — 단독 아이콘 버튼은 IconButton 사용
+
+### Props 시그니처
+```tsx
+<MessageActions
+  actions={[
+    { kind: "copy", onClick },
+    { kind: "regenerate", onClick },
+  ]}
+  align="start | end"               // default: start
+/>
+```
+
+### Kind 매핑
+| kind | icon | 기본 라벨 |
+|---|---|---|
+| copy | Copy | 복사 |
+| edit | PencilSimple | 수정 |
+| regenerate | ArrowClockwise | 다시 생성 |
+| share | ShareNetwork | 공유 |
+| delete | TrashSimple | 삭제 |
+| like | ThumbsUp | 좋아요 |
+| dislike | ThumbsDown | 싫어요 |
+
+### 비율
+- 버튼: `space-6` 정사각
+- 아이콘: 버튼 65%
+- gap: `space-1`

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

@@ -0,0 +1,26 @@
+# Message Quote
+
+### 원칙
+[[components/ai-message]] 안의 인용 블록. `plain`(그냥 글)과 `blockquote`(왼쪽 vertical bar 리더) 두 variant. [[components/quotation-bar]]는 ChatInput의 "접힌 인용"이고 — Message Quote는 **메시지 본문 안에 펼친 인용**.
+
+### Do
+- `plain`은 다른 글과 톤이 거의 같음 — 가볍게 "참조 중" 암시.
+- `blockquote`는 왼쪽에 bar — markdown `>` 와 동일 톤.
+- 색은 blockquote=fg-muted, plain=fg (본문과 같은 톤).
+
+### Don't
+- Quote 안에 아이콘·메타 라벨 넣지 않는다 — 소스/저자 표시가 필요하면 [[components/message-sources]] 또는 상위에서.
+- 중첩 blockquote는 지원하지 않음.
+
+### 관련
+- [[components/quotation-bar]] — ChatInput의 접힌 인용
+- [[components/ai-message]] — 상위 소비처
+
+### Props 시그니처
+```tsx
+<MessageQuote variant="plain | blockquote">본문</MessageQuote>
+```
+
+### 레이아웃
+- plain: 외곽 장식 없음
+- blockquote: `padding-left: space-4`, `border-left: space-0_5 solid border-strong`, color `fg-muted`

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

@@ -0,0 +1,26 @@
+# Message Sources
+
+### 원칙
+[[components/ai-message]] 하단에 붙는 소스 참조 chip 리스트. "Sources" 라벨 + 가로 wrap chip. 각 chip은 외부 링크 (favicon·링크 아이콘 좌측).
+
+### Do
+- Search 응답 뒤에 자동으로 노출 — AI가 참고한 출처 투명하게.
+- chip label은 호스트명 중심으로 짧게 (`"nytimes.com"`, `"wikipedia.org — 제목"`).
+- 긴 라벨은 중간 ellipsis가 아니라 끝 ellipsis (호스트명 보존).
+
+### Don't
+- Sources 안에 추가 메타(날짜·발행자) 넣지 않는다 — 깔끔한 chip만.
+- Sources를 메시지 본문 중간에 두지 않는다 — 반드시 하단.
+
+### Props 시그니처
+```tsx
+<MessageSources
+  sources={[{ id, label, href?, icon? }]}
+  label="Sources"                            // default
+/>
+```
+
+### 레이아웃
+- label: text-xs, fg-muted
+- chip: `space-1 space-2` padding, `bg-subtle`, `radius-full`
+- gap: `space-1` (chip↔chip)

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

@@ -0,0 +1,27 @@
+# Message Table
+
+### 원칙
+[[components/ai-message]] 안의 markdown table 톤 wrapper. 소비처가 `<table><thead><tr><th>…` 생짜 그대로 전달하면 CTDS 톤(hairline border, radius-md, header bg)으로 자동 스타일. 가로 overflow 시 wrapper가 scroll.
+
+### Do
+- 생짜 `<table>` 전달 — markdown parser(remark 등)가 뱉은 걸 그대로 wrap.
+- 숫자 셀도 **좌측 정렬 유지** ([[feedback-no-right-align-numbers]]). tabular-nums로 폭만 균일.
+- 가로가 많으면 wrapper 안에서 scroll — 테이블 wrap 깨트리지 않음.
+
+### Don't
+- 테이블 안에 생짜 `<button>`·control 넣지 않는다. 그건 TableRow/TableRowEdit 영역.
+- 숫자 셀 right-align 금지.
+
+### Props 시그니처
+```tsx
+<MessageTable>
+  <table>...</table>
+</MessageTable>
+```
+
+### 레이아웃
+- wrapper: hairline border, radius-md, overflow-x auto
+- thead: `bg-subtle`
+- cell padding: `space-2 space-3`
+- cell border-bottom: hairline (마지막 행 제외)
+- 숫자: `font-variant-numeric: tabular-nums`