@conscience-technology/ctds 0.1.9 → 0.1.11

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/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,33 @@
+# Message Sources
+
+### 원칙
+AIMessage의 **하단 액션바 옆에 inline으로 붙는 작은 chip**. 겹친 favicon stack + 첫 소스 라벨 + `+N` 패턴. 블록이 아니라 액션 액세서리 — 실제론 [[components/ai-message]]의 `sources` prop으로 전달해 자동 배치.
+
+### Do
+- `<AIMessage sources={...}>` prop으로 전달. standalone으로 쓸 일은 거의 없음.
+- `maxFavicons`로 겹쳐 보여줄 favicon 개수 조정 (기본 3). 나머지는 `+N`.
+- 각 소스에 `icon` 넘겨 favicon을 명시, 없으면 중성 원형 placeholder.
+- 클릭 시 소비처에서 popover(소스 전체 리스트) 열기 — 디자인 시스템 범위 밖.
+
+### Don't
+- 큰 chip 리스트로 늘려 메시지 하단에 깔지 않는다 (예전 디자인 — 폐기).
+- Sources를 메시지 본문 중간에 두지 않는다 — 반드시 하단 액션바 라인.
+- chip 안에 긴 설명·날짜 넣지 않는다 — 라벨 하나만.
+
+### Props 시그니처
+```tsx
+<MessageSources
+  sources={[{ id, label, href?, icon? }]}
+  label="Sources"                     // default
+  maxFavicons={3}                     // default
+  onClick={() => void}                // 소스 전체 popover 열기 등
+/>
+```
+
+### 레이아웃
+- 외곽: ghost pill (transparent → hover bg-subtle)
+- padding: `space-0_5 space-2 space-0_5 space-1`
+- 폰트: `text-xs`, `fg-muted` → hover `fg-strong`
+- favicon stack: 각 원 `space-4`(16px), 서로 `space-1` negative margin으로 겹침
+- 각 favicon에 box-shadow로 bg 색 ring (cutout 효과)
+- `+N`은 `fg-muted`, tabular-nums

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`

package/assets/prompts/components/sidebar.md

@@ -15,6 +15,7 @@ Sidebar는 **Header / Body / Footer 세 영역으로 강제 분리**된다. 역
 Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가로 1줄로 눌려 겹친다. Section·Item·Separator는 반드시 `Sidebar.Body` 안에.
 
 ### Do
+- **Header/Footer의 워크스페이스·프로필·조직 트리거는 반드시 [[components/identity-button]]** — Select·Input Dropdown·수제 Button+span 조합 전부 금지. Avatar + 2줄 라벨 + trailing 뼈대가 고정이라 전용 컴포넌트가 담당. 사이드바에서 "현재 X 선택 상태 + 전환 가능" 모양이 보이면 100% IdentityButton.
 - Section·Separator는 반드시 **`Sidebar.Body` 안에** 둔다 — Body만 스크롤되는 영역.
 - 라우트 이동은 Item에 `asChild` + Next `<Link>`. 단, `asChild`일 땐 라벨 truncation이 `<Link>` 쪽 책임이 된다 ([[components/menu-item]] Slot 동작) — 긴 라벨이면 Link에 `truncate` 유틸 또는 `title` 속성을 걸 것.
 - 현재 라우트는 `active`로 명시 (MenuItem의 active 시각 그대로).
@@ -24,6 +25,8 @@ Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가
 - 콘텐츠 영역과의 **경계선은 [[components/app-frame]] `variant="outlined"`** 가 그린다 — Sidebar 자체는 border를 그리지 않음. 사이드바가 녹아 보이면 AppFrame variant부터 확인.
 
 ### Don't
+- **워크스페이스/프로필 트리거에 Select·Input Dropdown 금지** — 폼 값 선택과 네비게이션 액션은 다른 역할. [[components/identity-button]] + DropdownMenu 조합이 유일한 표준 ([[antipattern_workspace_switcher]]).
+- **수제 Button + span 조립 금지** — 매번 레이아웃·폰트·collapsed 전환이 어긋나서 일관성이 깨짐. IdentityButton 하나로 끝.
 - **Header에 Section·Item·nav를 넣지 않는다** — Header는 가로 flex 행이라 세로 nav가 깔리면 전부 눌려 겹친다. Brand 전용.
 - 페이지 안 뷰 전환에 쓰지 않는다 — 그건 [[components/tabs]].
 - Item 안에 variant로 다른 톤을 쓰지 않는다. active 외의 강조 금지.
@@ -35,6 +38,7 @@ Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가
 collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계선 애매하면 AppFrame `variant="outlined"`.
 
 ### 관련
+- [[components/identity-button]] — Header/Footer 워크스페이스·프로필·조직 트리거. Sidebar.Profile은 이 컴포넌트의 preset 래퍼.
 - [[components/menu-item]] — Item 시각·상태 전부 재사용
 - [[components/avatar]] — Profile 왼쪽 아바타
 - [[components/app-frame]] — Sidebar를 담는 grid 쉘
@@ -89,10 +93,24 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계
 
 ### 조합 예시
 ```tsx
-// 기본 — 섹션 2개 + Profile. Section·Separator는 Body 안.
+// 1. 워크스페이스 트리거 Header + Section 2개 + Footer Profile (가장 흔한 구성)
 <Sidebar>
   <Sidebar.Header>
-    <Sidebar.Brand symbol={<Icon name="rocket-launch" />} wordmark="CTDS" />
+    <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>
 
   <Sidebar.Body>
@@ -113,11 +131,38 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계
   </Sidebar.Body>
 
   <Sidebar.Footer>
+    {/* Sidebar.Profile은 IdentityButton의 preset 래퍼 — 커스텀하려면 IdentityButton 직접 사용. */}
     <Sidebar.Profile name="희영" sub="admin@ctds.dev" avatar={{ status: "online" }} />
   </Sidebar.Footer>
 </Sidebar>
 
-// Collapsed — icon-only
+// 2. Brand 로고 전용 Header (워크스페이스 전환이 필요 없는 단일 제품)
+<Sidebar>
+  <Sidebar.Header>
+    <Sidebar.Brand symbol={<Icon name="rocket-launch" />} wordmark="CTDS" />
+  </Sidebar.Header>
+  {/* ... Body / Footer */}
+</Sidebar>
+
+// 3. 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>
+
+// 4. Collapsed — icon-only (IdentityButton·Profile 모두 자동으로 아바타만 남음)
 <Sidebar collapsed>
   <Sidebar.Header>
     <Sidebar.Brand symbol={<Icon name="rocket-launch" />} />

package/assets/prompts/components/spinner.md

@@ -0,0 +1,109 @@
+# Spinner
+
+### 원칙
+짧은 비동기 작업의 **로딩 신호**. 색은 currentColor로 묶여 부모 톤을 그대로 승계. **variant 미지정이 기본** — [[axes/motion]] 축의 `--loader-style`을 따라가서 bouncy=dots-bounce / standard=ring / calm=dots-fade로 자동 스왑. "버튼 안 로딩이 테마 바꾸면 같이 바뀌는" 축 추종 구조가 설계의 핵심이다. 긴 작업(파일 업로드 등 진행률이 있는 것)은 [[components/progress-bar]].
+
+### Do
+- Button `loading` prop이 자동으로 Spinner를 중앙에 overlay — 소비자가 직접 Spinner 꽂을 필요 없음.
+- 색이 필요하면 부모 요소에 `color: var(--accent)` 식으로 지정 — Spinner는 그대로 승계.
+- 페이지 로딩이면 중앙에 size=`lg` 하나로 충분. 과한 fullscreen overlay는 피한다.
+- variant 미지정이 default — Motion 축 바꾸면 모든 로더가 함께 바뀌는 게 설계 의도.
+
+### Don't
+- 진행률(퍼센트) 로딩에 쓰지 않는다 — [[components/progress-bar]].
+- 스켈레톤 자리에 Spinner 쓰지 않는다 — 레이아웃이 이미 그려지는 자리면 shimmer skeleton이 맞음.
+- 색을 하드코딩하지 않는다. currentColor가 부모 색을 승계하도록 두거나, 부모에 토큰 색을 걸 것.
+- `size="xs"`는 아이콘 크기 로더 전용(Button xs 안쪽). 독립적으로 쓸 땐 sm 이상.
+- variant를 소비 측에서 자꾸 override하지 않는다 — 축 추종이 "브랜드 톤 일관성"의 유일한 보장.
+
+### Fallback
+`size="sm"`, variant 미지정(= Motion 축 따라감), `label="Loading"`.
+
+### 관련
+- [[axes/motion]] — `--loader-style` 토큰을 축이 스왑
+- [[components/button]] — `loading` prop이 Spinner를 자동 overlay
+- [[components/progress-bar]] — 진행률 표시용 (Spinner와 역할 분리)
+
+### Props 시그니처
+```tsx
+<Spinner
+  size="xs | sm | md | lg"                                        // default: sm
+  variant="ring | dots-bounce | dots-fade | pulse | lottie-<name>" // default: Motion 축 따름
+  label={string}                                                  // SR 라벨. default: "Loading"
+/>
+```
+
+### Variant 매트릭스
+| variant | 시각 | 쓰임 |
+|---|---|---|
+| ring | 회전 반원 테두리 | 표준·중립. standard motion 자동 매핑 |
+| dots-bounce | 3 dot 순차 bounce | 표현력. bouncy motion 자동 매핑 |
+| dots-fade | 3 dot 순차 fade (위치 고정) | 미니멀. calm motion 자동 매핑 |
+| pulse | 단일 원 scale pulse | 특수(온보딩·대기 신호). 자동 매핑 없음 — 명시 지정만 |
+| `lottie-<name>` | 번들된 Lottie 로티 | 성격 있는 자리(AI 생성·온보딩·브랜드) |
+
+### Lottie 로티 (10종 번들)
+`lottie-react` 플레이어가 `/public/lottie/<name>.json`을 로드. 단색 로티는 `currentColor` 추종, 다색 로티는 원본 색 유지.
+
+| name | 성격 | colorBind |
+|---|---|---|
+| `lottie-rabbit` | 뛰어가는 토끼. 긴 작업·AI 생성 대기 | ✓ |
+| `lottie-infiniti` | 무한 루프 선. 네트워크·동기화 | ✓ |
+| `lottie-dots` | 그라데이션 dot 흐름. 포인트 로더 | — |
+| `lottie-spinner` | 표준 라인 스피너 | ✓ |
+| `lottie-clock` | 회전 시계 바늘. 처리 대기·타임아웃 | ✓ |
+| `lottie-cosmos` | 그라데이션 궤도. 몽환적·온보딩 | ✓ |
+| `lottie-diamond-star` | 다이아몬드 바운스. 성공·축하 | — |
+| `lottie-image-gen` | 이미지 생성 대기. AI 이미지 | ✓ |
+| `lottie-loading-square` | 회전하는 사각형. 미니멀 처리 | ✓ |
+
+**colorBind=✓** 로티는 Palette/Hue 축 바꾸면 로더 색도 자동 추종. **✗** 로티는 작가 의도된 다색이 그대로 유지됨.
+
+**사이즈 주의**: Lottie는 vectorized라 size가 작으면 디테일 뭉개짐. `size="md"` 이상 권장. Button loading 안에 Lottie 쓰는 건 비권장 — 기본 variant(dots/ring)가 적합.
+
+### Size 매트릭스
+IconButton 체계와 1:1 매칭. 로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음.
+
+| size | 실제 크기 | 쓰임 |
+|---|---|---|
+| xs | 16px | Button xs 내부, 조밀한 인라인 |
+| sm | 20px | **기본**. 인라인 라벨 옆, 리스트 아이템, AIMessage generating |
+| md | 24px | 섹션 로딩, 카드 중앙 |
+| lg | 32px | 페이지 중앙 로딩, 모달 바디 로딩 |
+
+Lottie 로더는 캔버스 충전율이 다르므로 `visualScale`로 bounds를 꽉 채우도록 보정됨 — size만 고르면 체감이 일관되게 맞아야 함. 특정 Lottie가 작아 보이면 `lottieManifest.ts`의 `visualScale`을 올려 글로벌 보정, 사용처에서 size를 올리지 말 것.
+
+### 축 추종 매핑 (variant 미지정 시)
+| Motion | Spinner 자동 variant |
+|---|---|
+| bouncy | dots-bounce |
+| standard | ring |
+| calm | dots-fade |
+| none | ring (접근성 예외: 로딩 신호는 유지. `prefers-reduced-motion`은 상위 CSS가 처리) |
+
+### 색 바인딩
+Spinner는 `currentColor` 바인딩. 즉:
+- Button primary 안에서는 Button의 fg 색(흰색 등)
+- Button outline 안에서는 fg 기본색
+- 커스텀 자리에 색이 필요하면 부모에 `color: var(--accent)` 식으로 걸 것
+
+Palette·Hue 축이 바뀌어도 Spinner는 자동 추종 — 별도 색 지정 금지.
+
+### 조합 예시
+```tsx
+// Button loading — 소비자가 신경쓸 거 없음 (Button이 자동 처리)
+<Button loading>저장</Button>
+
+// 페이지 중앙 로딩
+<div style={{ display: "grid", placeItems: "center", minHeight: 240 }}>
+  <Spinner size="lg" />
+</div>
+
+// 리스트 아이템 inline 로딩
+<li>
+  <Spinner size="xs" /> 불러오는 중
+</li>
+
+// 축 추종 끄고 명시 variant
+<Spinner variant="pulse" size="md" />
+```

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

@@ -0,0 +1,45 @@
+# User Message
+
+### 원칙
+사용자가 보낸 채팅 메시지. [[components/bubble]] + [[components/message-actions]] 조합. **오른쪽 정렬** 고정. 액션은 기본 호버 시만 노출 — 메시지 리스트가 액션 아이콘으로 어수선해지지 않게.
+
+### Do
+- 기본 구성: `shape=circular-drop, fill=translucent, tail=end` — 레퍼런스 톤.
+- 액션은 `[copy, edit]` 기본. `actionsVisibility="show" | "hover"`로 상시/호버.
+- 첨부 있으면 `before` slot에 [[components/attachment-thumb]] / [[components/attachment-chip]] 자유 조합. 상위에서 레이아웃 책임.
+- 매우 긴 글은 bubble이 max-width 안에서 wrap, 그보다 넘으면 자연스레 아래로.
+
+### Don't
+- 왼쪽 정렬하지 않는다 — user는 **항상 오른쪽**. 왼쪽은 AI/시스템.
+- 액션 라벨을 아이콘 옆에 노출하지 않는다 — title/aria-label만 (MessageActions 규약).
+- bubble 안에 복잡한 레이아웃(table·code block) 넣지 않는다 — 그건 AIMessage 영역.
+- 아바타·이름 넣지 않는다 — user 메시지는 암묵적으로 "나".
+
+### Fallback
+shape 애매하면 `circular-drop`, fill 애매하면 `translucent`, visibility 애매하면 `hover`.
+
+### 관련
+- [[components/bubble]] — 담는 그릇
+- [[components/message-actions]] — 액션 바
+- [[components/ai-message]] — 짝 컴포넌트
+- [[components/attachment-thumb]] / [[components/attachment-chip]] — before slot 조합
+
+### Props 시그니처
+```tsx
+<UserMessage
+  shape="rounded | circular-drop | circular | square"  // default: circular-drop
+  fill="none | solid | translucent | outline"          // default: translucent
+  size="md | lg"                                        // default: md
+  actionsVisibility="show | hover"                     // default: hover
+  actions={[{ kind: "copy" }, { kind: "edit" }]}       // 비우려면 []
+  before={ReactNode}                                   // 첨부·인용 등 bubble 위
+>
+  메시지 본문
+</UserMessage>
+```
+
+### 레이아웃
+- root: `flex-direction: column; align-items: flex-end; gap: space-1; width: 100%`
+- 메시지 리스트 안에서 각 UserMessage가 오른쪽에 자동 정렬됨.
+- Bubble `tail="end"` 고정 — 오른쪽 상단 각짐.
+- MessageActions `align="end"`.

package/assets/prompts/primitives/scroll.md

@@ -99,14 +99,20 @@
 
 ### 정답 패턴 (ChatInput이 쓰는 구조)
 
+핵심 결정: **wrapper에 padding 0, textarea에 상·하·좌·우 padding 전부**. 왜냐하면
+`overflow: auto` 요소에 padding을 두면 그 padding은 **scroll 시 고정** — 스크롤해도
+빈 띠가 상·하에 남아 "글이 padding에서 미리 잘린다"는 느낌을 줌. 반면 textarea의
+padding은 **자신의 content box 일부**로 취급돼, textarea 전체가 wrapper 안에서 scroll
+되면 padding도 함께 올라감.
+
 1. **root는 `padding: 0; overflow: hidden`** — scroll clip이 root border에서 생기도록.
-2. **별도 wrapper div(`.scroll`)에 overflow-y: auto + padding-top만**.
-3. **textarea는 flat, `padding-bottom`만** — 이게 scroll content의 일부가 됨.
+2. **wrapper div(`.scroll`)는 `overflow-y: auto; padding: 0`** — padding 두면 "빈 띠" 생김.
+3. **textarea는 상·하·좌·우 padding 전부 + `overflow: hidden`** — 자체 scroll 금지.
 
 ```css
 .root {
   padding: 0;
-  overflow: hidden;             /* radius 안쪽에서 scroll clip */
+  overflow: hidden;
   border-radius: var(--radius-sm);
   border: var(--hairline) solid var(--border);
 }
@@ -114,28 +120,33 @@
 .scroll {
   overflow-y: auto;
   max-height: calc(var(--text-base) * 1.5 * 8);
-  padding: var(--space-3) var(--space-3) 0;   /* top만 */
+  padding: 0;                                       /* 반드시 0 */
 }
 
 .textarea {
   display: block;
   width: 100%;
-  padding: 0 0 var(--space-3);                /* bottom만 */
+  box-sizing: border-box;
+  padding: var(--space-3) var(--space-4);           /* 상·하·좌·우 모두 */
   background: transparent;
   border: 0;
   outline: none;
   resize: none;
-  overflow: hidden;                           /* 자체 스크롤 금지 */
+  overflow: hidden;                                 /* textarea 자체 scroll 금지 */
   font: inherit;
   line-height: 1.5;
 }
 ```
 
-이 구조에서 짧은 글은 wrapper 안에 스크롤 없음, padding이 "숨 공간"처럼 보임.
-긴 글은:
-- wrapper max-height 초과 → wrapper 스크롤
-- 아래로 스크롤 시 글이 wrapper padding-top을 통과해 **root 상단 border에서 자연스레 clip**
-- 끝까지 스크롤 시 글이 textarea padding-bottom을 통과해 **root 하단 border에서 자연스레 clip**
+이 구조에서:
+- **짧은 글**: textarea가 자신의 padding 포함 높이 → wrapper 안에 스크롤 없음.
+- **긴 글**: textarea height > wrapper max-height → wrapper 스크롤 시 textarea 전체가 올라감.
+  - 상단에서 textarea padding-top을 지나며 글이 **root 상단 border에서 자연스레 clip**.
+  - 하단에서 textarea padding-bottom을 지나며 글이 **root 하단 border에서 자연스레 clip**.
+
+### 금지 패턴 추가 (이번 삽질로 확인)
+
+❌ **"wrapper에 padding-top, textarea에 padding-bottom"** — 전에 썼던 패턴. wrapper의 padding-top이 scroll 시 "빈 띠"로 남아 글이 그 아래에서 clip돼 어색함.
 
 ### 함께 적용되는 레이아웃 룰
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
   "type": "module",
   "bin": {