@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/prompts/components/file-icon.md

@@ -0,0 +1,73 @@
+# File Icon
+
+### 원칙
+파일 확장자별 **색·라벨·아이콘**을 담은 둥근 사각 뱃지. [[components/chat-input]] 첨부·[[components/message-bubble]] 파일 인용에서 공용. 포맷 식별이 핵심이라 **브랜드 자산(Adobe/Office)은 상용 색을 그대로** — 토큰으로 추상화하면 포맷을 못 알아봄. CTDS 하드코딩 금지의 명시적 예외 ([[feedback/no-hardcoded-values]]).
+
+### Do
+- 확장자만 넘기면 끝. `ext="psd"` / `ext=".psd"` / `ext="report.psd"` 전부 OK.
+- Mode 축은 자동 반응 — `others`·`zip`·`mp3` 세 그룹만 L/D pair, 브랜드 파일은 모드 무관 고정.
+- 사이즈는 접점 크기에 맞춤: 리스트/칩 `sm`(16), 기본 `md`(24), 그리드/히어로 `lg`(32).
+- 모르는 확장자는 자동으로 `others` 폴백 — 애플리케이션에서 매핑 추가할 필요 없음.
+- 이미지(png/jpg/gif/webp) 첨부는 [[components/attachment-thumb]]로 썸네일 렌더 — FileIcon을 쓰지 않음.
+
+### Don't
+- `label` prop을 자동 생성(`ext.toUpperCase().slice(0,2)`)으로 만들지 않는다 — 레퍼런스는 수동 라벨(`Ai`/`Ps`/`X`/`P`/`W`/`Pd`).
+- 브랜드 색을 CTDS 토큰(`--bg-brand` 등)으로 치환하지 않는다 — 포맷 식별 정보가 날아감.
+- 아이콘(file/file-zip/music-note)을 Icon 컴포넌트 경유로 바꾸지 않는다 — Icon 축(family) 전환에 영향받으면 자산 일관성이 깨짐.
+- 포커스 가능하게 만들지 않는다 — 장식 요소. 상호작용은 감싸는 chip/button이 책임.
+
+### Fallback
+size 애매하면 `md`, radius 애매하면 `auto`(Shape 축 따라감). 확장자 모르면 `txt`도 OK — 어차피 `others` 폴백.
+
+### 관련
+- [[components/attachment-chip]] — FileIcon + 파일명 + X. 가장 흔한 소비처
+- [[components/attachment-thumb]] — 이미지 첨부(FileIcon 대신)
+- [[components/chat-input]] / [[components/message-bubble]] — 상위 소비처
+- [[axes/shape]] — radius=auto일 때 Shape 축 따라감
+- [[axes/mode]] — 제너릭(others/zip/mp3) 색이 Mode 축 반응
+
+### Props 시그니처
+```tsx
+<FileIcon
+  ext="psd | ai | pdf | xls | ppt | doc | zip | mp3 | ..."  // 필수
+  size="sm | md | lg"              // default: md (16 / 24 / 32)
+/>
+```
+
+### 비율 (Shape 축 반응 + soft 캡)
+- radius: sm/md=`--radius-checkbox` / lg=`--radius-xs` — 한 단계씩 내려 soft 과도 방지
+- `label font-size / size` = 0.53, weight=semibold
+- `glyph / size` = 0.60
+
+> **왜 한 단계 내림**: Shape soft에서 `--radius-xs=10px`를 24px 박스에 쓰면 42%로 너무 둥글어 "뱃지"가 아니라 "알약"으로 보임. [[project-radius-checkbox]] 캡 패턴을 md까지 확장 — Shape 축 반응은 유지하되 soft의 과도만 눌러줌.
+
+### 색 매트릭스
+| 그룹 | 모드 | bg | fg | 콘텐츠 |
+|---|---|---|---|---|
+| **ai** (Illustrator) | 고정 | `#2E0402` | `#F09E38` | 라벨 `Ai` |
+| **psd** (Photoshop) | 고정 | `#081D34` | `#57A5F8` | 라벨 `Ps` |
+| **xls, xlsx** (Excel) | 고정 | `#3B804C` | `#FFFFFF` | 라벨 `X` |
+| **ppt, pptx** (PowerPoint) | 고정 | `#B84C2C` | `#FFFFFF` | 라벨 `P` |
+| **doc, docx** (Word) | 고정 | `#3044C7` | `#FFFFFF` | 라벨 `W` |
+| **pdf** | 고정 | `#EA336C` | `#FFFFFF` | 라벨 `Pd` |
+| **others** (fallback) | Light | `#EDEAB0` | `#B2AA54` | 아이콘 `file` |
+|  | Dark | `#363229` | `#A19B5A` |  |
+| **zip** · rar · 7z · tar · gz | Light | `#EDEAB0` | `#B2AA54` | 아이콘 `file-zip` |
+|  | Dark | `#363229` | `#A19B59` |  |
+| **mp3** · wav · flac · m4a · aac · ogg | Light | `#BEFDA8` | `#4B9C2D` | 아이콘 `music-note` |
+|  | Dark | `#254924` | `#BDFCA8` |  |
+
+### 조합 예시
+```tsx
+// 가장 흔한 — AttachmentChip 안
+<AttachmentChip filename="report.pdf" />  // 내부에서 <FileIcon ext="pdf" size="md" />
+
+// 리스트 셀 (sm)
+<FileIcon ext=".psd" size="sm" />
+
+// 그리드 (lg)
+<FileIcon ext="song.mp3" size="lg" />
+
+// 모르는 확장자 — 자동 others
+<FileIcon ext="unknown" />
+```

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

@@ -0,0 +1,42 @@
+# Filter Button
+
+### 원칙
+리스트·테이블 상단에서 결과를 좁힐 때 쓰는 **토글 컨트롤**. 액션 실행([[components/button]])이 아니라 “적용 중” 상태 유지가 목적이라 별도 컴포넌트. Hue/Palette와 무관하게 항상 명도 대비(fg↔bg 반전)로 강조 → 어느 테마에서도 “선택됨”이 확실히 읽힌다.
+
+`role="button"` + `aria-pressed`로 순수 토글. 여러 개를 조합해도 되고 하나만 켜도 되지만 “체크박스/라디오 시맨틱”이 필요한 폼 UI는 [[components/checkbox]]/[[components/radio]]를 직접 쓴다.
+
+count는 [[components/badge]]로 위임 — unselected는 `variant="soft"`, selected(반전 상태)에서는 `variant="inverse"`.
+
+### Do
+- **필터 바 전용**: 리스트·테이블 상단, 카드 그리드 상단의 “결과 좁히기”. 폼 안에 두면 [[components/checkbox]]/[[components/radio]]가 맞다.
+- **count는 미리 알려줄 수 있을 때만**: 서버가 매칭 개수를 이미 알고 있는 경우에만 표시. lazy 계산은 UX상 어색.
+
+### Don't
+- Chip(정보 라벨)로 오해되게 두지 않는다 — FilterButton은 언제나 **인터랙션 컨트롤**, `<button>` 시맨틱.
+- 폼 시맨틱(체크박스·라디오)이 필요한 곳에 대체품으로 쓰지 않는다 — 시맨틱이 다르다.
+
+### Fallback
+size 애매하면 `md`.
+
+### 관련
+- [[components/checkbox]] · [[components/radio]] — 폼 안이라면 이 둘을 직접 쓴다.
+- [[components/badge]] — count 슬롯이 Badge로 위임. `soft` ↔ `inverse` 자동 스왑.
+- [[components/button]] — 시각적 형제. 액션 실행용은 이쪽.
+
+### Props 시그니처
+```tsx
+<FilterButton
+  size="sm | md"                                     // default: md
+  selected={boolean}
+  onToggle={(next: boolean) => void}
+  leftIcon={ReactNode}
+  count={number}                                      // Badge로 위임
+  disabled={boolean}
+>{children}</FilterButton>
+```
+
+### 상태 매트릭스
+| state | 시각 |
+|---|---|
+| unselected | outline (fg-muted 텍스트) |
+| selected   | **반전** (fg 배경 + bg 텍스트) |

package/assets/prompts/components/form-field.md

@@ -0,0 +1,74 @@
+# FormField
+
+### 원칙
+
+라벨 · 설명 · 에러 · required 별표를 담당하는 폼 필드 래퍼. 자식 입력 컨트롤([[components/input]] · [[components/date-picker]] · Select 등)의 접근성 속성(`id` · `aria-describedby` · `aria-invalid` · `required`)을 자동으로 연결한다. 입력 컨트롤 자체는 이 속성들을 직접 관리하지 않는다.
+
+### Do
+- 라벨이 필요한 모든 폼 컨트롤은 `FormField`로 감싼다.
+- `FormField.Label`은 항상 첫 번째 자식. 그 다음 `Description`, 컨트롤, `Error` 순.
+- `invalid`는 FormField에 준다 — 자식 컨트롤이 자동으로 `aria-invalid`를 받는다. 컨트롤에도 `invalid`를 넘겨 시각 피드백을 켜준다.
+- `required`는 FormField에 준다 — 라벨에 별표(*)가 자동으로 붙고 컨트롤에 `required` 속성이 전파된다.
+- 에러 문구는 반드시 `FormField.Error` 컴포넌트로 넣는다. 임의의 `<p>`나 텍스트로 두지 않는다 — `role="alert"`과 aria 연결이 깨진다.
+
+### Don't
+- 한 FormField 안에 두 개 이상의 컨트롤을 두지 않는다. 라벨/에러 대응이 1:1이 아니게 됨.
+- `Description`을 에러 메시지로 쓰지 않는다. Description은 상시 힌트, Error는 검증 실패 시 표시.
+- `Label`의 `htmlFor`를 수동 지정하지 않는다 — FormField가 자동 생성한 id와 어긋난다.
+
+### Fallback
+`required` 여부가 애매하면 `false`. 필수 입력이 확정되면 켠다. `invalid`는 상위 폼 상태에서 파생된 값을 넘긴다 (컴포넌트가 스스로 판단하지 않음).
+
+### 관련
+- [[components/input]] — 가장 자주 조합되는 자식.
+- [[components/date-picker]] — 트리거 Input이 FormField의 자식이 될 수 있음.
+- [[tokens/color]] — `--destructive`(에러 · required 별표), `--fg-muted`(설명).
+- [[tokens/typography]] — 라벨은 `--text-sm` · `medium`, 설명/에러는 `--text-xs`.
+
+### Props 시그니처
+
+```tsx
+<FormField
+  invalid={boolean}
+  disabled={boolean}
+  required={boolean}
+  id={string}                          // 없으면 자동 생성
+>
+  <FormField.Label>...</FormField.Label>
+  <FormField.Description>...</FormField.Description>
+  <Input ... />                        // 자식 컨트롤
+  <FormField.Error>...</FormField.Error>
+</FormField>
+```
+
+**하위:**
+- `FormField.Label` — `htmlFor` 자동. `required=true`면 별표 자동.
+- `FormField.Description` — 상시 힌트. `id` 자동 → 컨트롤의 `aria-describedby`에 연결.
+- `FormField.Error` — `invalid=true`일 때만 렌더링. `role="alert"` 포함.
+
+### Variant 매트릭스
+
+FormField 자체는 variant가 없다. 자식 컨트롤의 variant를 따른다.
+
+| 상태 | 시각 반응 |
+|---|---|
+| `required` | 라벨에 destructive 색 별표(*) |
+| `invalid` | 자식 컨트롤에 `aria-invalid` 전파 + Error 노출 |
+| `disabled` | 자식 컨트롤에 `disabled` 전파 |
+
+### 조합 예시
+
+```tsx
+<FormField required invalid={!!emailError}>
+  <FormField.Label>이메일</FormField.Label>
+  <FormField.Description>업무용 이메일을 입력해주세요.</FormField.Description>
+  <Input
+    type="email"
+    value={email}
+    onChange={(e) => setEmail(e.target.value)}
+    invalid={!!emailError}
+    leftIcon={<MailIcon />}
+  />
+  <FormField.Error>{emailError}</FormField.Error>
+</FormField>
+```

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

@@ -0,0 +1,158 @@
+# GalleryItem
+
+### 원칙
+갤러리뷰 그리드에서 썸네일을 전면에 세우고 그 아래 title·description·meta·actions를 서술하는 콘텐츠 카드. 미디어가 주인공이고 텍스트는 꼬리표. 선택 카드가 아니라 "보여주고 열어가는" 카드 — 선택 상태는 가지지 않는다. 반복 레코드를 비교·정렬해야 하면 [[components/table-row]], 숫자 하나만 전달하면 [[components/metric-card]], 옵션 중 하나를 고르는 자리면 [[components/choice-card]].
+
+### Do
+- **media 필수**: 썸네일이 없으면 이 컴포넌트가 아니다. 자산이 아직 없으면 placeholder라도 넣어 자리를 지킨다.
+- **layout 선택 기준**: `vertical`은 썸네일을 전면에 세우는 **그리드 갤러리** 용(이미지 비중 ↑). `horizontal`은 썸네일 옆에 title·description·meta가 길게 서술되는 **세로 리스트** 용(텍스트 비중 ↑). 블로그 아카이브·검색 결과·세션 목록처럼 "읽는 콘텐츠"는 horizontal.
+- **그리드로 배치(vertical)**: `display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4)` 가 기본 리듬. 열 수는 Density 축에 따라 자동 조절되게 min 폭만 고정.
+- **세로 스택(horizontal)**: `display: flex; flex-direction: column; gap: var(--space-6)` 로 쌓는다. 카드끼리 붙지 않도록 gap 최소 `space-6`.
+- **aspect 통일**: 한 리스트/그리드 안의 카드는 전부 같은 `aspect`. 16/9 가로형이 기본, 세로 포스터형 콘텐츠(책/영상 커버)만 3/4.
+- **actionPosition 선택 기준**: 호버 전 보여야 하는 상시 액션(공개·북마크 토글 등)이면 `overlay`, 카드 전체가 링크일 때 보조 액션(⋯ 메뉴)이면 `footer`. 둘 다 쓰면 overlay/footer 중 하나로만 통일.
+- **meta는 muted 한 줄**: [[components/badge]](카테고리·상태 라벨) + inline 날짜/카운트 텍스트 조합. 두 줄이 되면 description으로 승격.
+- **href 또는 onClick이 있을 때만 hover elevation 활성**: 정적 카드는 떠오르지 않는다. elevation은 썸네일에만 적용 — body에는 그림자/톤 변화 없음.
+
+### Don't
+- **meta에 [[components/chip]] 사용 금지**. Chip은 검색 필터·다중 선택 전용(사용자가 제거하는 값). 카드 카테고리·태그 라벨은 전부 Badge (`variant="soft"`).
+- **meta 토큰 사이 가운뎃점(`·`·`•`·`|`) 금지**. 저자·날짜·좋아요·댓글 등을 나열할 때 구분자는 짧고 연한 세로 hairline. 가운뎃점은 글자처럼 읽혀 라인에 시각 노이즈를 더함. 전역 룰.
+- 카드 전체에 테두리·배경 chrome 추가 금지. 썸네일 radius 외의 경계는 두지 않는다. 분위기 있는 그리드가 필요해도 카드 chrome이 아니라 **그리드 간격·행 구분**으로 해결.
+- 선택 상태(selected·checked) 흉내 금지 — border accent나 ring 승격 금지. 선택이 필요하면 다른 카드.
+- media 위에 title/description 글자 overlay 금지. 글자가 사진 위에 겹치는 레이아웃은 썸네일 가독성과 축 스왑을 둘 다 깬다. overlay 슬롯은 액션 전용.
+- actions에 full-width Button 금지. IconButton 또는 Button(`size="sm"`, `variant="ghost|outline"`)만. actions가 primary CTA가 되는 순간 이건 카드가 아니라 다른 컴포넌트.
+- aspect 값 바깥의 임의 `aspect-ratio` inline 금지. 네 값(`16/9`·`4/3`·`1/1`·`3/4`) 외가 필요하면 그리드 설계가 틀렸을 가능성.
+
+### Fallback
+- `layout` 미지정 시 `vertical`.
+- `aspect` 미지정 시 `16/9`.
+- `actionPosition` 미지정 시 `footer`.
+- `href`/`onClick`이 둘 다 없으면 hover elevation 비활성 — 정적 카드.
+
+### 관련
+- [[components/choice-card]] — 선택이 화면 주 액션인 카드. GalleryItem은 선택 상태 없음.
+- [[components/selectable-card]] — 폼 안 옵션 리스트형 선택 카드.
+- [[components/metric-card]] — 숫자 하나 전달. 미디어 없음.
+- [[components/table-row]] — 반복 레코드 비교·정렬이 필요하면 테이블.
+- [[components/empty-state]] — 그리드가 비었을 때. GalleryItem 그리드 안이 아니라 영역 전체를 대체.
+- [[tokens/radius]] — 썸네일에 `radius-md` 토큰.
+- [[axes/density]] — 그리드 열 수가 density 따라 자동 변동.
+
+### Props 시그니처
+```tsx
+<GalleryItem
+  media={ReactNode}                                 // required — 썸네일 슬롯 (img/video/svg)
+  layout="vertical | horizontal"                    // default: vertical
+  aspect="16/9 | 4/3 | 1/1 | 3/4"                   // default: 16/9
+  title={ReactNode}                                 // required
+  description={ReactNode}
+  meta={ReactNode}                                  // Badge·날짜 자유 조합. muted
+  actions={ReactNode}                               // IconButton 또는 Button sm ghost/outline
+  actionPosition="footer | overlay"                 // default: footer
+  href={string}                                     // 있으면 <a>로 렌더. hover elevation 활성
+  disabled={boolean}
+/>
+```
+
+### Variant 매트릭스
+
+**layout × 전형 용례**
+
+| layout | 전형 | 썸네일 폭 | title 크기 |
+|---|---|---|---|
+| `vertical` | 그리드 갤러리, 포스터·블로그 커버 | 100% | `text-sm` |
+| `horizontal` | 세로 리스트, 블로그 아카이브, 검색 결과 | 고정(~16rem) | `text-lg` |
+
+**aspect × 콘텐츠 성격**
+
+| aspect | 전형 콘텐츠 |
+|---|---|
+| `16/9` | 영상 썸네일, 블로그 커버, 와이드 스크린샷 (기본) |
+| `4/3` | 제품 사진, 일반 이미지 |
+| `1/1` | 아바타형·앨범 커버·프로덕트 그리드 |
+| `3/4` | 책/영화 포스터, 세로 모바일 캡처 |
+
+**금지 조합**
+- `layout="horizontal"` + `aspect="3/4"` — 세로 포스터가 왼쪽에 길쭉하게 서면 리스트 높이가 들쭉날쭉해지고 title row 정렬이 깨짐. horizontal에서는 가로형(`16/9` · `4/3`)만.
+- `layout="horizontal"` + 그리드 배치 — horizontal은 세로 스택 전용. 그리드로 쌓으면 각 셀 내부가 좁아져 media 고정 폭이 body를 밀어버림.
+- `actionPosition="overlay"` + 반투명 overlay 배경 추가 — media 위에 글자 겹치는 레이아웃 유도. overlay는 액션 아이콘 자체만.
+- `aspect="1/1"` + title 3줄 이상 — 정사각 카드에 긴 텍스트는 밸런스 깨짐. 1줄 title이면 1/1, 2줄까지면 4/3 이상.
+
+### 조합 예시
+
+```tsx
+// 블로그/뉴스 — 와이드 썸네일 + 메타 + ⋯ 메뉴
+<section
+  style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(16rem, 1fr))",
+    gap: "var(--space-4)",
+  }}
+>
+  {posts.map((p) => (
+    <GalleryItem
+      key={p.id}
+      href={`/posts/${p.id}`}
+      media={<img src={p.thumb} alt="" />}
+      aspect="16/9"
+      title={p.title}
+      description={p.excerpt}
+      meta={
+        <>
+          <Badge variant="soft">{p.category}</Badge>
+          <span>{p.date}</span>
+        </>
+      }
+      actions={
+        <IconButton
+          size="sm"
+          variant="ghost"
+          icon={<Icon name="dots-three" />}
+          aria-label="더보기"
+          onClick={(e) => { e.preventDefault(); openMenu(p.id); }}
+        />
+      }
+    />
+  ))}
+</section>
+
+// 포스터 그리드 — 세로형 + overlay 저장 토글
+<GalleryItem
+  href={`/movies/${m.id}`}
+  media={<img src={m.poster} alt="" />}
+  aspect="3/4"
+  title={m.title}
+  meta={<Badge variant="soft" status="info">{m.year}</Badge>}
+  actionPosition="overlay"
+  actions={
+    <IconButton
+      size="sm"
+      variant="ghost"
+      icon={<Icon name="star" />}
+      aria-label="저장"
+    />
+  }
+/>
+
+// 블로그 아카이브 — horizontal 리스트
+<section style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
+  {posts.map((p) => (
+    <GalleryItem
+      key={p.id}
+      href={`/posts/${p.id}`}
+      layout="horizontal"
+      media={<img src={p.thumb} alt="" />}
+      title={p.title}
+      description={p.excerpt}
+      meta={
+        <>
+          <span>{p.author}</span>
+          <span className={styles.sep} aria-hidden />
+          <span>{p.date}</span>
+          <span className={styles.sep} aria-hidden />
+          <span>♥ {p.likes}</span>
+        </>
+      }
+    />
+  ))}
+</section>
+```

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

@@ -0,0 +1,82 @@
+# IconButton
+
+### 원칙
+아이콘만 있는 버튼. **좁은 자리의 액션 전용** — 툴바, 테이블 행 액션, 플로팅 액션, Input의 trailing 등. [[components/button]]의 icon-only 모드와 **용도 중복**이지만 IconButton은 **크기 체계가 한 단계 작음** (Button sm = IconButton md). 좁은 자리의 밀도용. `aria-label` 필수.
+
+### Do
+- `aria-label` 반드시 지정. 아이콘은 글자가 아님.
+- 툴바·테이블 행 action: `size="md"` + `variant="ghost"`가 표준.
+- 플로팅 액션: `size="lg"` + `variant="secondary"`.
+- `trailingIcon`을 넣으면 자동 **dual 모드**(정사각 → 가로형 2-슬롯). caret-down 등 보조 아이콘 자리.
+- `asChild`로 `<a>` 또는 Next `<Link>` 위임 가능 (이땐 아이콘·trailingIcon은 자식이 담당).
+
+### Don't
+- 라벨이 필요하면 쓰지 않는다 — [[components/button]] icon-only 모드로.
+- Button과 같은 size 이름이라도 실제 크기 다르니 **같은 툴바에서 섞을 땐 매핑 확인**: IconButton md(24) ↔ Button sm(28), IconButton lg(32) ↔ Button md(32).
+- aria-label 생략 금지. 아이콘 의미가 자명해도 스크린리더엔 안 보임.
+- 색을 variant로 override하지 않는다 — destructive 외의 상태색은 Badge/Callout 쪽.
+
+### Fallback
+size 애매하면 `md`, variant 애매하면 `ghost`.
+
+### 관련
+- [[components/button]] — 라벨 있는 버튼 또는 Button의 icon-only 모드 (신규 권장)
+- [[components/icon]] — 안에 들어가는 아이콘
+- [[components/toolbar]] — 가장 많이 쓰는 자리
+- [[components/tooltip]] — aria-label 보충 설명 (hover 시 라벨 노출)
+- [[axes/density]] — `--iconbtn-h-*`가 Density에 반응
+- [[axes/shape]] — radius가 Shape 축에 반응
+
+### Props 시그니처
+```tsx
+<IconButton
+  icon={<Icon name="..." />}                   // asChild=true면 무시
+  trailingIcon={<Icon name="caret-down" />}    // 있으면 dual 모드
+  size="sm | md | lg"                          // default: md (Button sm 상당)
+  variant="secondary | outline | ghost | destructive"  // default: ghost
+  asChild={boolean}                            // Radix Slot — <a>/<Link> 위임
+  aria-label="필수"
+  disabled={boolean}
+  onClick={(e) => void}
+/>
+```
+
+### Size × Button 매핑
+| IconButton size | 높이 | Button 대응 | 쓰임 |
+|---|---|---|---|
+| `sm` | 20 | — (xs 수준) | 인라인·초밀도. 거의 안 씀 |
+| `md` | 24 | Button `sm`(32)과 짝 | **기본** — 툴바·테이블 행·Input trailing |
+| `lg` | 32 | Button `md`(36)과 짝 | 플로팅 액션·주 액션 |
+
+### Variant 매트릭스
+| variant | 시각 | 쓰임 |
+|---|---|---|
+| `secondary` | primary 8% 배경 + primary 아이콘 | 강조가 필요한 플로팅 |
+| `outline` | 투명 배경 + border | 툴바 그룹의 그룹핑 |
+| `ghost` | 완전 투명, hover만 반응 | **기본** — 밀도 자리 |
+| `destructive` | 평상시 ghost, hover 시 destructive 톤 | 삭제·제거 |
+
+### 조합 예시
+```tsx
+// 툴바 — ghost md 나열
+<Toolbar>
+  <IconButton icon={<Icon name="pencil-simple" />} aria-label="수정" />
+  <IconButton icon={<Icon name="copy" />} aria-label="복제" />
+  <IconButton icon={<Icon name="trash" />} aria-label="삭제" variant="destructive" />
+</Toolbar>
+
+// Dual 모드 — 드롭다운 트리거
+<IconButton
+  icon={<Icon name="user" />}
+  trailingIcon={<Icon name="caret-down" />}
+  aria-label="사용자 메뉴"
+  variant="outline"
+/>
+
+// asChild — Next Link 위임
+<IconButton asChild size="md" variant="ghost" aria-label="깃허브">
+  <a href="https://github.com/..." target="_blank" rel="noreferrer">
+    <Icon name="github-logo" />
+  </a>
+</IconButton>
+```

package/assets/prompts/components/icon.md

@@ -0,0 +1,68 @@
+# Icon
+
+### 원칙
+의미 기반 아이콘 렌더러. `name`으로 **의미 슬롯**을 지정하고, 실제 SVG는 [[axes/icon]]의 Family(phosphor/solar/lucide)가 결정. **한 페이지 = 한 Family** 원칙. family는 `<html data-icon-family>` 축에서 자동 상속. Weight(regular/fill)는 축이 아니라 prop — phosphor·solar만 실제 반응, lucide는 regular 고정.
+
+### Do
+- 항상 `name`으로 의미 지정: `<Icon name="check" />`.
+- 라벨 없는 아이콘 쓰임엔 반드시 `aria-label` 또는 Tooltip (sender 쪽에서).
+- `size`는 number(px). 컴포넌트 안에서 자동 상속되므로 대부분 지정 안 함.
+- 활성/선택 상태 표시엔 `weight="fill"` (phosphor/solar만).
+- 축 override가 필요한 특수 자리(브랜드 로고 아이콘 등)에만 `family` prop.
+
+### Don't
+- 인라인 `<svg>` 로 아이콘 그리지 않는다 — 반드시 Icon 컴포넌트. 브랜드 로고·Tooltip tail은 예외.
+- `name`에 Icon.tsx 유니온 밖 문자열 금지 — 유령 아이콘은 **family별 placeholder 사각형**으로 렌더됨 (설계된 폴백).
+- 한 페이지에서 여러 family 섞지 않는다. 축 override를 과용하면 CTDS 지문이 깨짐.
+- Lucide에서 `weight="fill"` 요구 금지 — 원본이 fill 미제공, regular로 폴백.
+- 아이콘 크기를 CSS로 override 금지. `size` prop 또는 컨테이너의 `--icon-size-*` 토큰 경유.
+
+### Fallback
+family는 축 상속(기본 `phosphor`), weight는 축 상속(기본 `regular`), size 애매하면 `20`.
+
+### 관련
+- [[axes/icon]] — Family 축 (data-icon-family). Weight는 축 아님.
+- [[components/icon-button]] · [[components/button]] — 아이콘 담는 가장 흔한 자리
+- [[components/menu-item]] · [[components/badge]] · [[components/chip]] — leadingActions/leftIcon 자리
+- [[tokens/color]] — `--icon-color`가 Palette 축에 반응
+
+### Props 시그니처
+```tsx
+<Icon
+  name={IconName}                              // Icon.tsx 유니온 (phosphor + solar + lucide 합집합)
+  family="phosphor | solar | lucide"           // default: 축 상속
+  weight="regular | fill"                      // default: 축 상속 (phosphor/solar만 반응)
+  size={number | string}                       // default: 20
+  // 그 외 SVG attributes 전부 통과
+/>
+```
+
+### Family별 지원
+| Family | Weight 반응 | 스타일 특징 | 쓰임 |
+|---|---|---|---|
+| `phosphor` | regular / fill | 다재다능, 모던, 선·면 균형 | **기본** |
+| `solar` | Linear(regular) / Bold(fill) | 두꺼운 선·단단한 느낌 | 모바일·터치 |
+| `lucide` | regular만 (fill 요청 시 regular) | 얇은 Feather 계승, 미니멀 | 미니멀·docs |
+
+### 유령 이름 처리
+- `name="존재하지-않는-슬롯"` → **family별 placeholder 사각형**이 자동 렌더. 레이아웃 공간 유지.
+- 축 전환 시 "이 아이콘은 이 family에 없다"가 시각적으로 드러나는 설계된 폴백.
+
+### 조합 예시
+```tsx
+// 기본 — 축 상속
+<Icon name="check" />
+<Icon name="warning" size={16} />
+
+// 활성 상태 fill
+<Icon name="heart" weight={isLiked ? "fill" : "regular"} />
+
+// Family override — 로고 자리처럼 특수한 지점만
+<Icon name="github-logo" family="phosphor" size={24} />
+
+// Button 안 — 자동 크기 상속 (ICON_SIZE 매핑)
+<Button leftIcon={<Icon name="plus" />}>추가</Button>
+
+// MenuItem leadingActions
+<MenuItem leadingActions={[<Icon name="user" />]}>프로필</MenuItem>
+```

package/assets/prompts/components/input.md

@@ -0,0 +1,95 @@
+# Input
+
+### 원칙
+
+폼 입력의 최소 단위. 사용자가 한 줄의 텍스트/숫자/비밀번호 등을 입력하는 컨트롤. 라벨·설명·에러는 이 컴포넌트가 아니라 [[components/form-field]]가 담당한다 — Input은 **입력 자체**에만 책임을 진다.
+
+### Do
+- **variant는 `line`을 먼저 쓴다.** 모달·폼·대시보드 어디든 기본값. 밑줄 하나로 입력 표식이 끝나 시각 무게가 가장 가볍고 주변 레이아웃을 흐트러뜨리지 않음. `outline`은 폼이 독립 블록(가입/로그인 전용 페이지 등)으로 자리할 때, `filled`는 관리자·엑셀 대체 UI 등 밀도가 승부처일 때만.
+- 라벨이 필요한 실제 폼에서는 항상 `FormField`로 감싼다. Input을 라벨 없이 단독으로 두는 것은 검색창 · Popover 트리거 · 인라인 필터에 한한다.
+- 통화 · 단위 · 도메인처럼 사용자가 편집하지 않는 고정 문자열은 `prefix` / `suffix`로 넣는다. placeholder에 넣지 않는다.
+- 아이콘은 시맨틱 힌트(`leftIcon`=검색 돋보기, 메일 봉투 등). 인터랙션이 있으면 `rightAction` 슬롯으로 실제 버튼을 넣는다.
+- 값을 지울 수 있어야 하면 `clearable`. 비밀번호는 `passwordToggle` 을 켠다.
+- 검증 실패 시 `invalid` 활성 + `FormField.Error`로 사유를 알린다. `invalid`만 켜고 에러 문구를 안 주면 사용자가 이유를 모른다.
+- 다른 컴포넌트(DatePicker · Combobox · Select)가 트리거로 Input을 재사용할 때는 `readOnly` + `role="combobox"` 조합. 새 스타일을 만들지 않는다.
+
+### Don't
+- `leftIcon`에 클릭 액션을 붙이지 않는다. 아이콘은 항상 `aria-hidden`. 액션이 필요하면 `rightAction`.
+- placeholder를 라벨 대신 쓰지 않는다 — 값이 들어가면 힌트가 사라진다. 접근성 실패.
+- `variant="filled"`와 `invalid`를 조합해서 배경까지 destructive 계열로 물들이지 않는다. 보더/링만 destructive.
+- 사이즈 조정용으로 CSS로 height를 덮어쓰지 않는다. `size` prop 경유.
+
+### Fallback
+variant가 애매하면 **`line`**(기본 권장). 독립 폼 블록이면 `outline`, 밀도 승부면 `filled`. size가 애매하면 `md`. 폼 전체가 일관된 밀도를 갖도록 한 화면에서 size·variant를 섞지 않는다.
+
+### 관련
+- [[components/form-field]] — 라벨 · 설명 · 에러 · required 별표를 담당. Input의 접근성 짝.
+- [[components/date-picker]] — Input을 readOnly 트리거로 재사용.
+- [[axes/density]] — `--control-h-sm/md/lg`가 size에 매핑.
+- [[axes/shape]] — 컨테이너 radius가 Shape 축에 반응.
+- [[tokens/color]] — `--primary`(focus), `--destructive`(invalid), `--bg-subtle`(filled/readOnly).
+
+### Props 시그니처
+
+```tsx
+<Input
+  size="sm | md | lg"                 // default: md
+  variant="line | outline | filled"   // default: outline (문서 권장 기본: line)
+
+  value={string} defaultValue={string}
+  onChange={(e) => void}
+  type="text | email | password | number | ..."
+  placeholder={string}
+
+  invalid={boolean}
+  disabled={boolean}
+  readOnly={boolean}
+  fullWidth={boolean}
+
+  leftIcon={ReactNode} rightIcon={ReactNode}     // 시각용
+  prefix={ReactNode}   suffix={ReactNode}        // 짧은 텍스트
+
+  clearable={boolean}       onClear={() => void}
+  passwordToggle={boolean}                        // type="password"에만 유효
+  rightAction={ReactNode}                         // 커스텀 우측 액션(버튼 등)
+/>
+```
+
+### Variant 매트릭스
+
+| variant | 용도 | 금지 조합 |
+|---|---|---|
+| `line` | **권장 기본값.** 모달·폼·대시보드 어디든. 밑줄만으로 입력 자리를 알리고 주변 레이아웃을 흐트러뜨리지 않음 | — |
+| `outline` | 독립 폼 블록(가입/로그인 전용 페이지 등) | — |
+| `filled` | 밀도 높은 관리자·대시보드. 시각 무게가 가벼움 | `invalid`와 결합 시 배경까지 물들이지 말 것 |
+
+**상태 조합:**
+
+| 상태 | 시각 반응 | 접근성 |
+|---|---|---|
+| `disabled` | 반투명 + cursor:not-allowed | 포커스 불가 |
+| `readOnly` | 배경만 살짝 눌림(bg-subtle) | 포커스 가능, 편집 불가 |
+| `invalid` | destructive 보더/링 | `aria-invalid="true"` |
+
+### 조합 예시
+
+```tsx
+// 로그인 폼: 라벨/에러 자동 연결
+<FormField required invalid={!!error}>
+  <FormField.Label>이메일</FormField.Label>
+  <Input
+    type="email"
+    value={email}
+    onChange={(e) => setEmail(e.target.value)}
+    leftIcon={<MailIcon />}
+    invalid={!!error}
+  />
+  <FormField.Error>{error}</FormField.Error>
+</FormField>
+
+// 검색: 라벨 없이 단독
+<Input placeholder="검색" leftIcon={<SearchIcon />} clearable value={q} onChange={..} />
+
+// 금액: prefix/suffix
+<Input prefix="$" suffix="USD" type="number" placeholder="0.00" />
+```