@conscience-technology/ctds 0.1.9 → 0.1.11

package/assets/components/_data.ts

@@ -572,6 +572,7 @@ export const componentSlugs: Record<string, string> = {
   Sidebar: "nav/sidebar",
   "Sidebar Split": "nav/sidebar-split",
   Topbar: "nav/topbar",
+  "Identity Button": "nav/identity-button",
   Pagination: "nav/pagination",
   "App Frame": "layout/app-frame",
   Stepper: "nav/stepper",
@@ -584,22 +585,33 @@ export const componentSlugs: Record<string, string> = {
   "Table Row": "data/table-row",
   "Table Row Select": "data/table-row-select",
   "Table Row Edit": "data/table-row-edit",
+  Calendar: "data/calendar",
+  "Event Chip": "data/event-chip",
   "List Item": "data/list-item",
   "Metric Card": "data/metric-card",
   "Gallery Item": "data/gallery-item",
   "Empty State": "data/empty-state",
   "Progress Bar": "feedback/progress-bar",
+  Spinner: "feedback/spinner",
   "File Icon": "chat/file-icon",
   "Attachment Thumb": "chat/attachment-thumb",
   "Attachment Chip": "chat/attachment-chip",
   "Quotation Bar": "chat/quotation-bar",
   "Chat Input": "chat/chat-input",
+  "Bubble": "chat/bubble",
+  "Message Actions": "chat/message-actions",
+  "User Message": "chat/user-message",
+  "AI Message": "chat/ai-message",
+  "Code Block": "chat/code-block",
+  "Message Quote": "chat/message-quote",
+  "Message Sources": "chat/message-sources",
+  "Message Table": "chat/message-table",
 };
 
 /** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
 export const componentsInProgress: Set<string> = new Set([
   "Drawer",
-  "Chat Input",
+  "Calendar",
 ]);
 
 export const components: { id: string; title: string; items: string[] }[] = [
@@ -626,7 +638,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     title: "Data Display",
     items: [
       "Table Header", "Table Row", "Table Row Select", "Table Row Edit",
-      "List Item", "Metric Card", "Gallery Item",
+      "List Item", "Metric Card", "Gallery Item", "Calendar", "Event Chip",
       "Empty State", "Description List", "Timeline",
     ],
   },
@@ -634,7 +646,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "nav",
     title: "Navigation",
     items: [
-      "App Frame", "Tabs", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Pagination",
+      "App Frame", "Tabs", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
       "Stepper",
     ],
   },
@@ -659,7 +671,9 @@ export const components: { id: string; title: string; items: string[] }[] = [
     title: "AI Chat",
     items: [
       "File Icon", "Attachment Thumb", "Attachment Chip", "Quotation Bar", "Chat Input",
-      "Message Bubble", "Chat Sidebar",
+      "Bubble", "Message Actions", "User Message", "AI Message",
+      "Code Block", "Message Quote", "Message Sources", "Message Table",
+      "Chat Sidebar",
     ],
   },
 ];

package/assets/components/tokens.css

@@ -80,6 +80,17 @@
   --icon-size-md: calc(20px * var(--space-scale));
   --icon-size-lg: calc(24px * var(--space-scale));
 
+  /* Spinner · 로더 표준 크기 — IconButton 체계와 1:1 매칭 (xs=16, sm=20, md=24, lg=32).
+     로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음. */
+  --loader-size-xs: calc(16px * var(--space-scale));
+  --loader-size-sm: calc(20px * var(--space-scale));
+  --loader-size-md: calc(24px * var(--space-scale));
+  --loader-size-lg: calc(32px * var(--space-scale));
+
+  /* Loader 성격 — Motion 축이 스왑 ([data-motion] 블록 참고).
+     기본값은 standard와 같은 ring. */
+  --loader-style: ring;
+
   /* 폼 컨트롤 권장 폭 — Input · Select 등 텍스트 필드 계열이 공유.
      기본 동작은 부모 폭 채움(fill)이지만, 카드/툴바 안에서 규격을 잡을 때 참조.
      md = 이메일 · 이름 · 짧은 문장 표준. lg = URL · 설명 · 긴 문장.
@@ -221,6 +232,11 @@
   --tone-hue: 260;
   --tone-chroma: 0.005;
 
+  /* 테마 중립 fixed 색 — 어두운 오버레이 위 로더·배지처럼
+     라이트/다크 공통으로 흰색이어야 하는 자리 전용 */
+  --fixed-white: #fff;
+  --fixed-black: #000;
+
   /* semantic — light mode */
   --bg:            oklch(1     var(--tone-chroma) var(--tone-hue));
   --bg-subtle:     oklch(0.978 var(--tone-chroma) var(--tone-hue));
@@ -520,20 +536,24 @@ html[data-focus-ring="off"] {
   --motion-scale: 1.2;                                           /* ~192ms · 오버슛 여운만큼 */
   --motion-distance-scale: 1.1;
   --ease-emphasized: cubic-bezier(0.34, 1.4, 0.64, 1);           /* 절제된 오버슛 spring */
+  --loader-style: dots-bounce;                                   /* 통통한 로더 — bouncy 성격 */
 }
 [data-motion="standard"] {
   --motion-scale: 1;                                             /* 160ms */
   --motion-distance-scale: 1;
   --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);             /* Linear/Vercel ease-out */
+  --loader-style: ring;                                          /* 표준 회전 ring */
 }
 [data-motion="calm"] {
   --motion-scale: 0.9;                                           /* ~144ms · flat 곡선이라 짧아도 안전 */
   --motion-distance-scale: 0.9;
   --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);               /* 표준 ease-out · 심심할수록 차분 */
+  --loader-style: dots-fade;                                     /* 위치 이동 없는 미니멀 dot fade */
 }
 [data-motion="none"] {
   --motion-scale: 0;
   --motion-distance-scale: 0;
+  --loader-style: ring;                                          /* 로더는 접근성 예외: 로딩 신호는 유지 */
 }
 [data-motion="none"] *,
 [data-motion="none"] *::before,

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

@@ -0,0 +1,45 @@
+# AI Message
+
+### 원칙
+AI가 보낸 응답 메시지. **왼쪽 정렬**, bubble 없이 본문 그대로 노출 — [[components/user-message]]의 bubble과 대비. 상단에 선택적 라벨, 본문(markdown 또는 콘텐츠 블록), 하단에 [[components/message-actions]].
+
+### Do
+- `label`로 메타 제목(예: “LongText”, “Code Block”)을 짧게 노출. 생략 가능.
+- `children`에 markdown HTML을 직접 넣거나, 콘텐츠 블록 컴포넌트(CodeBlock·Quote·Sources·Table)를 조합.
+- 기본 액션 `[copy, regenerate]`, `actionsVisibility`로 상시/호버 전환.
+- 생성 중엔 `isGenerating`로 액션 숨김. 로딩 UI는 [[components/message-state]] 조합.
+
+### Don't
+- bubble로 감싸지 않는다 — AI는 "본문"이 메시지 자체. bubble은 UserMessage 전용.
+- 아바타·모델명 넣지 않는다 — 상위 shell(ChatThread)에서 책임.
+- 오른쪽 정렬하지 않는다 — 왼쪽 고정.
+- edit 액션 넣지 않는다 — AI 응답은 수정 대상 아님 (regenerate가 대신).
+
+### Fallback
+visibility 애매하면 `hover`, actions 애매하면 기본 `[copy, regenerate]`.
+
+### 관련
+- [[components/user-message]] — 짝 컴포넌트
+- [[components/message-actions]] — 하단 액션 바
+- [[components/message-state]] — 로딩/상태 라인 (F5)
+- 콘텐츠 블록: `CodeBlock` / `Quote` / `Sources` / `Table` (F4)
+
+### Props 시그니처
+```tsx
+<AIMessage
+  label={ReactNode}                           // 상단 메타 라벨
+  actionsVisibility="show | hover"            // default: hover
+  actions={[{ kind: "copy" }, { kind: "regenerate" }]}  // 비우려면 []
+  sources={[{ id, label, href?, icon? }]}     // 액션바 옆 inline chip
+  onSourcesClick={() => void}                 // chip 클릭 (popover 열기 등)
+  isGenerating={boolean}                      // true면 액션/sources 숨김
+>
+  본문 — markdown 또는 블록 조합
+</AIMessage>
+```
+
+### 레이아웃
+- root: `flex-direction: column; align-items: flex-start; gap: space-2`
+- label: `text-xs`, `fg-muted`
+- body: `text-base`, `line-height: 2` (평소의 ~2배, 가독성), 색 `--fg` (다크 그레이, strong보다 한 톤 연함), markdown 기본 톤
+- actions: `align=start`

package/assets/prompts/components/bubble.md

@@ -0,0 +1,56 @@
+# Bubble
+
+### 원칙
+메시지 말풍선 **primitive**. Shape 4종 × Fill 4종 조합. [[components/user-message]]·[[components/ai-message]]의 Quote 블록·AttachmentChip 등 "담는 그릇" 역할 전부에 재사용.
+
+### Do
+- UserMessage는 `shape=circular-drop fill=translucent tail=end` 조합이 기본.
+- AI Quote 블록은 `shape=rounded fill=outline` 또는 `fill=none`.
+- Shape 축 따라 radius 변화 — rounded는 `radius-xl` 토큰 사용.
+- circular-drop의 `tail` prop으로 꼬리 방향 지정 — user는 end, assistant/quote는 start.
+
+### Don't
+- Bubble을 "일반 Card" 용도로 쓰지 않는다 — 그건 [[components/metric-card]] / 커스텀.
+- fill=`solid`는 user "강조" 메시지(선택된/하이라이트)에만 — 기본은 translucent.
+- 꼬리를 양쪽 다 각지게 하지 않는다 — tail은 한 방향만.
+
+### Fallback
+shape 애매하면 `rounded`, fill 애매하면 `translucent`, size 애매하면 `md`.
+
+### 관련
+- [[components/user-message]] / [[components/ai-message]] — 상위 소비처
+- [[components/badge]] — 작은 라벨은 Badge
+- [[components/callout]] — 안내 상자는 Callout
+
+### Props 시그니처
+```tsx
+<Bubble
+  shape="rounded | circular-drop | circular | square"  // default: rounded
+  fill="none | solid | translucent | outline"          // default: translucent
+  size="md | lg"                                        // default: md
+  tail="start | end"                                    // circular-drop에서만
+>
+  Text
+</Bubble>
+```
+
+### 매트릭스
+| shape | radius |
+|---|---|
+| rounded | `--radius-md` (Shape 축 반응 명확: soft 14 / standard 10 / crisp 6) |
+| circular-drop | `--radius-md` 세 코너 + `0` tail 코너 하나 (각짐) |
+| circular | `--radius-full` (알약) |
+| square | `--radius-sm` |
+
+| fill | bg | fg | border |
+|---|---|---|---|
+| none | transparent | fg-strong | — |
+| solid | primary | bg | — |
+| translucent | primary-subtle (알파 8%) | fg-strong | — |
+| outline | bg | fg-strong | hairline border |
+
+### Size
+- `md` (기본): padding `space-2 space-3`, `text-base` — 일반 메시지 bubble.
+- `lg`: padding `space-3 space-4`, `text-base` — 히어로/강조 bubble. 패딩만 넉넉, 폰트는 md와 동일.
+
+소형 라벨이 필요하면 [[components/badge]] 사용.

package/assets/prompts/components/calendar.md

@@ -0,0 +1,116 @@
+# 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/event-chip]] — 셀 안에 쌓이는 일정 블록. Calendar가 자동으로 그려주지만 톤·props 체계는 EventChip 문서를 1차 참조.
+- [[components/date-picker]] — "날짜 입력"이 목적이면 그쪽. Popover + Input 트리거. Calendar와 utils(buildMonthGrid 등) 공유.
+- [[components/badge]] — "+N"·"오늘" 메타 뱃지는 Badge soft. EventChip 톤 체계도 Badge와 동일 토큰.
+- [[components/icon-button]] — 월 이동 네비게이션(이전해·이전달·다음달·다음해 4개). ghost + sm.
+- [[components/button]] — "오늘" 복귀 버튼은 outline·sm.
+- [[axes/shape]] — 셀 radius는 없음(격자형이라 radius 신호를 셀이 받지 않음). EventChip·Badge만 Shape 축에 반응.
+- [[axes/density]] — compact일수록 셀 padding이 줄고 EventChip이 더 많이 보임.
+- [[tokens/color]] — `--primary`(선택), `--hover`(셀 hover), `--border`(hairline), `--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;
+  tone?: "default" | "accent" | "success" | "warning" | "danger" | "info" | "neutral";
+};
+// 셀 안 렌더링은 EventChip이 담당. 상세 라벨(코드·시각·주최자)은 Calendar 밖
+// 사이드 패널·상세 뷰에서 다룬다. [[components/event-chip]] 참조.
+```
+
+### Tone
+
+이벤트 톤 7개(default/neutral/accent/success/warning/danger/info) — 상세 매트릭스는 [[components/event-chip]]에서 1차 정의한다. Calendar는 `event.tone`을 그대로 EventChip에 전달.
+
+**금지 조합**
+- `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/event-chip.md

@@ -0,0 +1,74 @@
+# Event Chip
+
+### 원칙
+
+캘린더 셀 안에서 "하루에 쌓이는 일정 하나"를 표현하는 작은 정보 블록. [[components/chip]]은 필터 선택 토큰 전용, [[components/badge]]는 카운트·상태 라벨 전용 — 캘린더 셀 안 일정은 이 자리. 가로 폭은 부모(셀)에 꽉 차고, 세로로 쌓이며, 넘치는 title은 ellipsis로 접힌다.
+
+### Do
+- props는 `title` + `tone` + `faded` 세 개만. title 하나로 끝난다 — 부가 라벨(코드·시각·주최자)은 셀 안이 아니라 상세 패널에서 다룬다.
+- 톤은 7종(default/neutral/accent/success/warning/danger/info)만 사용. Badge soft와 동일 토큰 체계.
+- 폭은 부모 flex column에 맞춰 자동. `min-width: 0`을 부모에 걸어주면 ellipsis가 자연히 동작한다.
+- outside 월(전/다음 달)이나 과거 등 "눈에 띄지 않아야 할" 자리는 `faded`로 흐리게. 캘린더가 자동으로 넘겨준다.
+- 라운드는 Shape 축에 반응하는 `--radius-xs`. 자체 radius 리터럴 금지.
+
+### Don't
+- title 외 보조 라벨(코드·사건번호·주최자) 넣기 금지 — 셀 안은 밀도가 승부처라 한 줄만. 그게 필요하면 셀 클릭 → 상세 패널.
+- 클릭 가능한 "안쪽 버튼" 금지 — EventChip 자체는 presentational. 상호작용은 부모 셀이 책임진다. 안에 또 버튼이 들어가면 캘린더 클릭 타겟이 미궁에 빠진다.
+- pill radius(완전 둥근) 쓰지 않는다 — Shape 축이 radius를 쥐고 있는데 pill로 고정하면 Soft/Standard/Crisp 신호가 셀 안에서 깨진다.
+- "눈에 띄게" 하려고 전부 `danger` 톤으로 깔기 금지 — 색이 의미 신호를 잃는다.
+- 아이콘·아바타 삽입 금지 — 이 자리는 "하루 셀 안 한 줄"이지 ListItem이 아니다.
+
+### Fallback
+`tone` 애매하면 `default`. `faded`는 캘린더 외 자리에서는 생략해도 됨.
+
+### 관련
+- [[components/calendar]] — 1차 소비자. 셀 안에서 EventChip을 세로로 쌓고, 넘치면 "+N" Badge로 접는다.
+- [[components/badge]] — 톤 토큰 체계 공유 (soft variant). "+N"·"오늘" 같은 메타 라벨은 Badge.
+- [[components/chip]] — 혼동 금지. Chip은 필터 선택 토큰("X 제거 가능"), EventChip은 캘린더 일정 토큰.
+- [[axes/shape]] — radius가 Shape 축에 반응.
+- [[tokens/color]] — `--bg-muted`(default) · `--secondary-bg`(neutral) · `--primary-subtle`(accent) · `*-subtle`(상태) · `--fg`/`--fg-muted`(글자).
+
+### Props 시그니처
+
+```tsx
+<EventChip
+  title={string}                                  // required
+  tone="default | neutral | accent | success | warning | danger | info"
+  faded={boolean}                                 // outside 월·과거 등 흐리게
+/>
+```
+
+### 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` | 참고 · 외부 캘린더 |
+
+### 조합 예시
+
+```tsx
+// 캘린더 셀 안쪽 — Calendar가 내부에서 쓰는 방식.
+// 부모가 min-width: 0 걸어주면 title ellipsis가 자동.
+<div className="cellEvents">
+  {events.map((e) => (
+    <EventChip key={e.id} title={e.title} tone={e.tone} faded={outside} />
+  ))}
+</div>
+
+// 캘린더 외부 — 선택된 날짜의 상세 리스트에서 재사용.
+// Calendar와 짝 이루는 사이드 패널에서도 톤 체계가 통일되게 유지된다.
+<aside>
+  {dayEvents.map((e) => (
+    <div key={e.id} className="dayRow">
+      <EventChip title={e.title} tone={e.tone} />
+      <time>{e.time}</time>
+    </div>
+  ))}
+</aside>
+```