@conscience-technology/ctds 0.1.14 → 0.2.0

package/assets/prompts/components/avatar-upload.md

@@ -0,0 +1,53 @@
+# AvatarUpload
+
+### 원칙
+Avatar + 파일 피커. 프로필·조직 로고 설정의 "현재 사진 보여주고 바꾸기" 자리. 평소엔 [[components/avatar]]와 동일하게 보이고, hover·focus에서 카메라 오버레이가 뜨며, src가 있으면 우측 상단에 작은 X로 제거.
+
+### Do
+- `size="xl"` 기본 — 프로필 설정 폼의 가장 흔한 자리.
+- `name`은 반드시 넘긴다 — src가 없을 때 Avatar가 이니셜로 폴백. alt는 생략 시 name으로 폴백.
+- `onRemove`를 넘길 때만 X 버튼이 뜬다. 초기 상태(src 없음)에서 X가 보이지 않도록 조건부로.
+- 허용 포맷은 `accept="image/*"` 유지. 특정 포맷만 받을 땐 `accept="image/png,image/jpeg"`.
+
+### Don't
+- 업로드 중 상태를 자체 prop으로 두지 않는다 — 상위에서 Avatar 자리 Spinner로 교체하거나 `disabled`로 잠근다.
+- 로컬 파일 preview를 컴포넌트가 책임지지 않는다 — `onChange(file)` 받고 호출자가 FileReader·blob URL로 src 세팅.
+- `size="xs"`에 X 버튼이 보이게 두지 않는다 — 버튼이 아바타보다 커진다. 작은 자리에선 remove 비활성.
+
+### Props 시그니처
+```tsx
+<AvatarUpload
+  size?="xs | sm | md | lg | xl"       // default: xl
+  shape?="circle | rounded"              // default: circle
+  src?={string}
+  name?={string}                          // 이니셜·접근성 폴백
+  alt?={string}                           // name보다 우선
+  onChange?={(file: File) => void}
+  onRemove?={() => void}                  // 있을 때만 X 노출
+  accept?={string}                        // default: image/*
+  disabled?={boolean}
+  editLabel?={string}                     // default: "사진 변경"
+  removeLabel?={string}                   // default: "사진 제거"
+/>
+```
+
+### 조합 예시
+```tsx
+const [src, setSrc] = useState<string | undefined>(user.avatarUrl);
+
+<AvatarUpload
+  size="xl"
+  src={src}
+  name={user.name}
+  onChange={async (file) => {
+    const url = await uploadToStorage(file);
+    setSrc(url);
+  }}
+  onRemove={() => setSrc(undefined)}
+/>
+```
+
+### 관련
+- [[components/avatar]] — 베이스 Avatar (업로드 없는 표시용)
+- [[components/icon-button]] — remove X 버튼의 패턴
+- [[tokens/color]] — overlay 색은 scrim 톤

package/assets/prompts/components/bubble.md

@@ -1,12 +1,12 @@
 # Bubble
 
 ### 원칙
-메시지 말풍선 **primitive**. Shape 4종 × Fill 4종 조합. [[components/user-message]]·[[components/ai-message]]의 Quote 블록·AttachmentChip 등 "담는 그릇" 역할 전부에 재사용.
+메시지 말풍선 **primitive**. Shape 4종 × Fill 4종 조합. [[components/user-message]]·[[components/ai-message]]의 Quote 블록·AttachmentItem 등 "담는 그릇" 역할 전부에 재사용.
 
 ### Do
 - UserMessage는 `shape=circular-drop fill=translucent tail=end` 조합이 기본.
 - AI Quote 블록은 `shape=rounded fill=outline` 또는 `fill=none`.
-- Shape 축 따라 radius 변화 — rounded는 `radius-xl` 토큰 사용.
+- Shape 축 따라 radius 변화 — rounded는 `radius-md` 토큰 사용 (soft/standard/crisp 반응 명확).
 - circular-drop의 `tail` prop으로 꼬리 방향 지정 — user는 end, assistant/quote는 start.
 
 ### Don't

package/assets/prompts/components/chat-input.md

@@ -1,11 +1,11 @@
 # Chat Input
 
 ### 원칙
-AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(textarea 또는 input)의 세 층 구성. 모델 선택·전송·중지·파일첨부를 전부 담당. 하위 레이어 [[components/file-icon]]·[[components/attachment-thumb]]·[[components/attachment-chip]]·[[components/quotation-bar]]를 **조립**하는 상위 블록 — 자체 primitive 추가 금지.
+AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(textarea 또는 input)의 세 층 구성. 모델 선택·전송·중지·파일첨부를 전부 담당. 하위 레이어 [[components/file-icon]]·[[components/attachment-thumb]]·[[components/attachment-item]]·[[components/quotation-bar]]를 **조립**하는 상위 블록 — 자체 primitive 추가 금지.
 
 ### Do
 - Shape은 두 가지 — `multi`(기본, 긴 입력·오버레이 UI), `single`(토픽바·검색봉 느낌).
-- Radius는 세 단계: `square`(--radius-xs) / `rounded`(--radius-sm) / `circular`(--radius-md). Shape 축 반응.
+- 외곽 radius는 Shape 축 토큰이 직접 결정 — prop으로 받지 않음.
 - `models` + `selectedModel` + `onSelectModel` 셋이 다 있을 때만 모델 selector 노출.
 - 전송은 `Enter`로 — multi에선 `Shift+Enter`가 줄바꿈. 스트리밍 중엔 `Enter`나 send 클릭이 `onStop`을 호출.
 - 첨부·인용은 전부 **외부 상태** — ChatInput은 표시·삭제 콜백만 중계. 업로드 로직·중복 체크는 소비처 책임.
@@ -13,16 +13,15 @@ AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(t
 
 ### Don't
 - 첨부·인용·메시지 상태를 ChatInput 안에서 관리하지 않는다 — controlled 전용.
-- radius prop을 수치로 받지 않는다 — `square | rounded | circular` 세 단계만. 실제 값은 Shape 축 토큰이 결정.
 - 모델 선택 메뉴를 내부에서 열지 않는다 — 현재는 라벨 클릭 시 다음 모델로 토글만. 실제 ContextMenu는 소비처에서 조립 (ChatInput의 책임 과잉 방지).
 - SingleLine에서 모델 라벨을 끝까지 노출하지 않는다 — 10자 넘으면 자동 compact(아이콘만).
 - Send 버튼 색을 변경하지 않는다 — 비활성=`bg-subtle` / 활성·스트리밍=`primary`로 고정.
 
 ### Fallback
-shape 애매하면 `multi`, radius 애매하면 `rounded`. maxRows 애매하면 `8`.
+shape 애매하면 `multi`. maxRows 애매하면 `8`.
 
 ### 관련
-- [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-chip]] / [[components/quotation-bar]] — 조립 요소
+- [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-item]] / [[components/quotation-bar]] — 조립 요소
 - [[components/message-bubble]] — 짝 컴포넌트 (후속)
 - [[components/context-menu]] — 모델 선택 메뉴를 소비처에서 조립할 때
 - [[primitives/scroll]] — "Textarea / 단일 콘텐츠 스크롤" 섹션. 긴 글 스크롤 시 글이 root border에서 clip되도록 wrapper padding-top + textarea padding-bottom 패턴 사용. 레이아웃 변경 시 반드시 그 규약 유지.
@@ -31,7 +30,6 @@ shape 애매하면 `multi`, radius 애매하면 `rounded`. maxRows 애매하면
 ```tsx
 <ChatInput
   shape="multi | single"               // default: multi
-  radius="square | rounded | circular" // default: rounded
 
   value={string}
   onChange={(v) => void}
@@ -63,10 +61,11 @@ type ChatAttachment =
   | { id, kind: "file",  filename }
 ```
 - `kind: "image"`에 `src` 없거나 `loading: true`면 AttachmentThumb이 placeholder/pulse 자동.
-- `kind: "file"`은 AttachmentChip이 filename 확장자로 FileIcon을 자동 결정.
+- `kind: "file"`은 AttachmentItem이 filename 확장자로 FileIcon을 자동 결정.
 
 ### 레이아웃
-- 외곽: hairline border, `var(--bg)`, radius=props
+- 외곽: hairline border, `var(--bg)`, radius=Shape 축 (`--radius-sm`)
+- **스크롤 룰**: root `padding: 0; overflow: hidden`. textarea에 상·하·좌·우 padding 전부 → 긴 글 스크롤 시 글이 root border까지 흘러 자연스레 clip. (wrapper에 padding 두면 scroll 시 "빈 띠"가 남아 어색 — [[primitives/scroll]])
 - focus-within에서 ring
 - 내부 세로 gap: `--space-2`, padding: `--space-3`
 - **MultiLine**: `attachments → quotation → [textarea / footer]` 세로

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

@@ -5,7 +5,7 @@
 
 ### Do
 - 언어 아는 경우 `language="html"` 처럼 라벨 노출 — 작게 fg-muted로.
-- `onCopy`를 안 주면 clipboard API로 자동 복사. 성공 시 Check 아이콘으로 1.5s 피드백.
+- `onCopyCode`를 안 주면 clipboard API로 자동 복사. 성공 시 Check 아이콘으로 1.5s 피드백.
 - 가로가 넘치면 pre 안에서 가로 스크롤 — body wrapping 대신.
 
 ### Don't
@@ -31,5 +31,5 @@ language 애매하면 생략. onCopy 애매하면 clipboard API 기본.
 ### 레이아웃
 - 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` 기본
+- copy 버튼: `space-6` 정사각, **ghost (transparent → hover `--hover` 틴트)**
 - 본문 `<pre>`: `space-2 space-4 space-4` padding, mono text-sm, line-height 1.6, overflow-x auto

package/assets/prompts/components/disclosure.md

@@ -0,0 +1,47 @@
+# Disclosure
+
+### 원칙
+토글로 열고 닫는 섹션. caret·triggerLabel·body의 3단, 애니메이션은 `grid-template-rows: 0fr → 1fr` 트릭으로 자연 높이 측정 없이 CSS만으로. FAQ·설정 섹션·"적용 방법"처럼 기본은 접혀 있고 필요한 때만 펴는 자리.
+
+### Do
+- compound(`.Trigger` + `.Body`) 조합을 쓴다. flat API 없음 — 명시적으로 Trigger·Body 2단 조립.
+- `defaultOpen`으로 초기 상태만 지정하고 uncontrolled로 두는 게 가장 흔함. 외부에서 열림 추적이 필요할 때만 `open` + `onOpenChange`.
+- 하나의 섹션 안에 **여러 Disclosure**를 쌓을 때 각각 독립 — accordion처럼 "한 번에 하나만 열림"이 필요하면 상위에서 상태로 조율.
+- `aria-expanded`·`aria-controls`가 자동 세팅됨. 소비자가 수동 추가할 필요 없음.
+
+### Don't
+- Modal·Drawer 안의 "숨겨진 설정" 자리에 Disclosure를 과용하지 않는다 — 모달 안 모달 느낌. 그 자리엔 섹션 구분(hairline + heading)이 먼저.
+- Trigger 안에 `<button>`·`<a>` 중첩하지 않는다 — Trigger 자체가 button.
+- Body의 콘텐츠 높이가 매번 뒤바뀌는 경우(실시간 스트림) grid-rows 애니메이션이 뚝뚝 끊김. 그 경우엔 `open` 토글 애니메이션을 쓰지 말거나 Disclosure 밖으로.
+
+### Props 시그니처
+```tsx
+<Disclosure defaultOpen?={boolean} open?={boolean} onOpenChange?={(open: boolean) => void}>
+  <Disclosure.Trigger>…라벨…</Disclosure.Trigger>
+  <Disclosure.Body>…접히는 콘텐츠…</Disclosure.Body>
+</Disclosure>
+```
+
+### 조합 예시
+```tsx
+<Disclosure defaultOpen>
+  <Disclosure.Trigger>적용 방법</Disclosure.Trigger>
+  <Disclosure.Body>
+    1) ctds.config.json 커밋
+    2) layout.tsx에 ThemeController 추가
+    3) /ctds 라우트에서 축 설정
+  </Disclosure.Body>
+</Disclosure>
+
+// 섹션 리스트 — 각자 독립 open
+{faqs.map((f) => (
+  <Disclosure key={f.id}>
+    <Disclosure.Trigger>{f.q}</Disclosure.Trigger>
+    <Disclosure.Body>{f.a}</Disclosure.Body>
+  </Disclosure>
+))}
+```
+
+### 관련
+- [[components/sidebar]] — 섹션 접기 UI는 Sidebar.Section의 collapsible 사용
+- [[axes/motion]] — Disclosure 애니메이션은 `--duration-base` × Motion 축에 반응

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

@@ -20,7 +20,7 @@
 size 애매하면 `md`, radius 애매하면 `auto`(Shape 축 따라감). 확장자 모르면 `txt`도 OK — 어차피 `others` 폴백.
 
 ### 관련
-- [[components/attachment-chip]] — FileIcon + 파일명 + X. 가장 흔한 소비처
+- [[components/attachment-item]] — FileIcon + 파일명 + X. 가장 흔한 소비처
 - [[components/attachment-thumb]] — 이미지 첨부(FileIcon 대신)
 - [[components/chat-input]] / [[components/message-bubble]] — 상위 소비처
 - [[axes/shape]] — radius=auto일 때 Shape 축 따라감
@@ -59,8 +59,8 @@ size 애매하면 `md`, radius 애매하면 `auto`(Shape 축 따라감). 확장
 
 ### 조합 예시
 ```tsx
-// 가장 흔한 — AttachmentChip 안
-<AttachmentChip filename="report.pdf" />  // 내부에서 <FileIcon ext="pdf" size="md" />
+// 가장 흔한 — AttachmentItem 안
+<AttachmentItem filename="report.pdf" />  // 내부에서 <FileIcon ext="pdf" size="md" />
 
 // 리스트 셀 (sm)
 <FileIcon ext=".psd" size="sm" />

package/assets/prompts/components/generated-image.md

@@ -0,0 +1,38 @@
+# Generated Image
+
+### 원칙
+AI가 생성한 이미지를 메시지 안에 **크게** 보여주는 블록. 작은 썸네일은 [[components/attachment-thumb]].
+
+### Do
+- 기본은 세로형 포스터(`aspect="portrait"` = 3:4).
+- 생성 중엔 `loading`만 넘기고 src 생략 — 완료되면 src 세팅.
+- 다운로드가 필요하면 `onDownload` 전달 — hover/focus-within에서만 우상단에 노출.
+
+### Don't
+- loading과 src 동시 지정 — loading이 우선이라 의미 없음.
+- 다운로드 버튼 상시 노출.
+
+### Fallback
+aspect 애매하면 `portrait`. src 없으면 placeholder (bg 이미지 + spinner lottie-image-gen).
+
+### 관련
+- [[components/attachment-thumb]]
+- [[components/ai-message]] — 상위 소비처
+
+### Props 시그니처
+```tsx
+<GeneratedImage
+  src={string}
+  alt={string}
+  aspect="portrait | square | landscape" // default: portrait
+  loading={boolean}
+  onDownload={(e) => void}
+/>
+```
+
+### 레이아웃
+- 외곽: `radius-md`, `max-width: input-w-lg × 1.1`, overflow hidden
+- aspect-ratio로 비율 고정 (`3/4`·`1/1`·`4/3`)
+- loading/placeholder bg: `/illustrations/image-gen-placeholder.png`
+- 로딩 중 중앙: [[components/spinner]] `variant="lottie-image-gen"` `size="lg"`, color `--bg`
+- Download 버튼: `space-8` 정사각, 우상단 inset `space-2`, hover 시 fade-in + scale

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

@@ -22,5 +22,5 @@
 ```
 
 ### 레이아웃
-- plain: 외곽 장식 없음
-- blockquote: `padding-left: space-4`, `border-left: space-0_5 solid border-strong`, color `fg-muted`
+- plain: 외곽 장식 없음, 색 `--fg`
+- blockquote: `padding-left: space-4`, 왼쪽 bar는 `::before` pseudo로 상·하 `space-1` inset — border-left 아님 (**짧고 radius-full로 캡슐**). 색 `--fg-muted`, bar는 `--border-strong`.

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

@@ -26,8 +26,9 @@ AIMessage의 **하단 액션바 옆에 inline으로 붙는 chip**. 겹친 favico
 
 ### 레이아웃
 - 외곽: ghost pill (transparent → hover bg-subtle)
-- padding: `space-0_5 space-2 space-0_5 space-1`
-- 폰트: `text-xs`, `fg-muted` → hover `fg-strong`
+- padding: `space-1_5 space-3 space-1_5 space-2` (hover 영역 넉넉)
+- gap: `space-1_5`
+- 폰트: `text-sm`, `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
+- 각 favicon에 box-shadow로 bg 색 ring (cutout 효과) — [[feedback-bg-or-stroke-only]] 예외: cutout은 "연결 모양 분리"가 목적이라 bg+stroke 금지 룰과 다른 범주
+- 숫자 노출 없음 — 라벨만 (전체 리스트는 popover로)

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

@@ -1,7 +1,7 @@
 # Message Table
 
 ### 원칙
-[[components/ai-message]] 안의 markdown table 톤 wrapper. 소비처가 `<table><thead><tr><th>…` 생짜 그대로 전달하면 CTDS 톤(hairline border, radius-md, header bg)으로 자동 스타일. 가로 overflow 시 wrapper가 scroll.
+[[components/ai-message]] 안의 markdown table 톤 wrapper. 소비처가 `<table><thead><tr><th>…` 생짜 그대로 전달하면 CTDS 톤(**TableHeader·TableRow line variant와 동일 — 외곽 border 없음, bg 없음, 하단 hairline만**)으로 자동 스타일. 가로 overflow 시 wrapper가 scroll.
 
 ### Do
 - 생짜 `<table>` 전달 — markdown parser(remark 등)가 뱉은 걸 그대로 wrap.
@@ -19,9 +19,12 @@
 </MessageTable>
 ```
 
-### 레이아웃
-- wrapper: hairline border, radius-md, overflow-x auto
-- thead: `bg-subtle`
-- cell padding: `space-2 space-3`
-- cell border-bottom: hairline (마지막 행 제외)
+### 레이아웃 (TableHeader/TableRow `line` variant와 짝)
+- wrapper: 외곽 border 없음, overflow-x: auto
+- thead: bg 없음, 하단 hairline
+- tbody row: 하단 hairline (마지막 행 제외)
+- th/td padding: `space-2 space-2`. 첫 셀 좌측 padding 0, 마지막 셀 우측 padding 0 (셀이 경계에서 떨어지지 않음)
+- th: `fg-strong`, font-weight medium, `label-sm` 사이즈
+- td: `text-sm`, line-height 1.5
 - 숫자: `font-variant-numeric: tabular-nums`
+- 숫자 셀도 **좌측 정렬 유지** ([[feedback-no-right-align-numbers]])

package/assets/prompts/components/onboarding.md

@@ -0,0 +1,43 @@
+# Onboarding
+
+### 원칙
+CTDS 설치 직후 `/ctds` 라우트에 뜨는 위자드. 스타일·분위기·밀도·컬러·레이아웃을 6단계로 결정해 `ctds.config.json` + `DESIGN.md`를 생성한다. 소비자 프로젝트의 "설정 전 단계" — 테마·축 기본값은 보류하고 중립 라이트로 뜬다 ([themeBootScript](../../web/components/themeBootScript.ts)가 `/onboarding` 경로를 감지해 다크 선호도 무시).
+
+### Do
+- `OnboardingPage`를 그대로 소비자 프로젝트의 `/ctds` 라우트에 심는다 (`ctds-cli init`이 자동 복사).
+- 사용자가 "적용"을 누르면 `actions.applyOnboarding`이 `ctds.config.json` + `DESIGN.md`를 소비자 레포 루트에 쓰고, 그 커밋 이후 ThemeController가 config를 읽어 축 기본값으로 사용.
+- 소비자가 자체 설정 플로우를 쓰고 싶으면 OnboardingPage를 교체하지 말고 **wizardData의 choices만 override** 하거나, 자체 라우트에서 `applyOnboarding`을 직접 호출.
+
+### Don't
+- OnboardingPage를 메인 앱 안으로 포팅하지 않는다 — 설정 전 단계 전용. 메인 앱의 테마 변경은 ThemeController가 담당.
+- `OnboardingAxisPanel`을 다른 페이지에서 재사용하지 않는다 — 축 디버거는 docs 전용([Docs axis controller replacement TODO](../../memory/project_docs_axis_todo.md)).
+- 위자드 단계 수를 늘리지 않는다 — 6단계는 심리적 상한. 신규 설정은 "적용" 이후 메인 앱의 설정 페이지에서.
+
+### Props 시그니처
+```tsx
+<OnboardingPage />   // props 없음. 내부에서 useTheme + wizardData로 조립.
+```
+
+하위 블록은 OnboardingPage 안에서만 조립:
+- `PresetsGallery` — 테마 프리셋 그리드 (step 1)
+- `OnboardingAxisPanel` — 축 디버거 패널 (docs 전용 재사용 금지)
+- `LayoutBuilder` — 레이아웃 선택 (step 5)
+- `DocsIndex` — 설치 후 문서 지도
+
+### Flow
+1. **theme** — "디자인 스타일" 프리셋 선택 (standard · spare · expressive 등)
+2. **vibe** — "프로덕트 분위기" (일반 · 생산성 · 소셜) → 축 세트 결정
+3. **density** — 정보 밀도 (default · dense)
+4. **color** — Palette + brand hex
+5. **layout** — 사이드바·탑바 조합
+6. **summary** — 선택 확인 + 적용
+
+### 적용 결과
+- `ctds.config.json` — 선택한 축 값 + palette hue
+- `DESIGN.md` — 소비자 프로젝트의 "현재 디자인 결정" 기록
+- 두 파일 커밋 후 ThemeController가 config를 initialConfig로 받아 축 기본값으로 사용
+
+### 관련
+- [[components/stepper]] — 단계 네비
+- [[components/selectable-card]] — 각 step의 선택 카드
+- [[axes/*]] — 선택 결과가 세팅하는 축

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

@@ -21,7 +21,7 @@ ChatInput 상단·Message 안에서 "**다른 글을 인용**"을 1줄로 접어
 ### 관련
 - [[components/chat-input]] — 상위 소비처 (상단 bar 자리)
 - [[components/message-bubble]] — 메시지 내 인용 표시에서도 재사용
-- [[components/attachment-chip]] — 비슷한 레이아웃 (lead icon + content + X)
+- [[components/attachment-item]] — 비슷한 레이아웃 (lead icon + content + X)
 
 ### Props 시그니처
 ```tsx

package/assets/prompts/components/sidebar-split.md

@@ -0,0 +1,70 @@
+# SidebarSplit
+
+### 원칙
+2단 사이드바 — 좌측 좁은 **Rail**(아이콘 only 탭) + 우측 **Panel**(활성 탭의 상세 메뉴). VS Code·Linear 스타일 "활동 바 + 사이드 패널" 조합. 단일 폭 Sidebar가 메뉴 수를 다 담지 못할 때, 또는 완전히 다른 영역을 전환하는 네비게이션에서.
+
+메모리 주의: **"2단 쉘은 SidebarSplit 쓰지 말고 바깥 flex로 Rail+Sidebar 직접 조립"** ([Sidebar scroll trap](../../memory/feedback_sidebar_scroll.md)). 그 함정은 CtdsSidebar.Body 안 섹션이 뭉개지는 상황. SidebarSplit 자체는 panel 안 콘텐츠가 **menu/section 구조**일 때 안전하게 쓴다 — 복잡한 폼·검색 결과를 panel에 넣을 거면 Rail + Sidebar를 바깥 flex로 직접 조립.
+
+### Do
+- 각 section의 `icon`은 Icon 인스턴스로. `label`은 rail 버튼의 `aria-label` + panel 헤더 타이틀로 재사용.
+- panel 안은 `<SidebarSplit.Section title="…">` + `<SidebarSplit.Item icon label>` 조합을 기본으로. 섹션 하나에 Item 5~10개 수준이 적정.
+- 좁은 공간이 필요하면 `panelOpen={false}` + onPanelOpenChange로 접기 토글. Rail만 남고 Panel은 숨음.
+- 섹션이 **active일 때 Rail 아이콘은 `secondary` variant**로 자동 전환 — 사용자가 override하지 말 것.
+
+### Don't
+- panel 안에 긴 폼·에디터를 넣지 않는다 — SidebarSplit은 "메뉴 전환" 자리. 콘텐츠는 메인 영역에.
+- Rail 섹션을 **6개 이상** 쌓지 않는다. 세로 공간상 7~8개부터 하단이 잘림. 그 이상이면 메뉴 구조 재검토.
+- `defaultActiveId`를 지정하지 않고 섹션 리스트를 조건부 렌더링하지 않는다 — 초기값이 비면 panel이 비어 보임.
+- 2단 쉘 바깥(앱 전체) 레이아웃에 SidebarSplit을 **직접** 쓰지 않는다. 바깥 쉘은 flex로 Rail + CtdsSidebar를 수동 조립 — 메모리 참조.
+
+### Props 시그니처
+```tsx
+<SidebarSplit
+  sections={SidebarSplitSection[]}        // { id, icon, label, panel }[]
+  brand?={ReactNode}                       // rail 상단 로고
+  railFooter?={ReactNode}
+  panelFooter?={ReactNode}
+  activeId?={string}                       // controlled
+  defaultActiveId?={string}
+  onActiveChange?={(id: string) => void}
+  panelOpen?={boolean}                     // controlled
+  defaultPanelOpen?={boolean}              // default: true
+  onPanelOpenChange?={(open: boolean) => void}
+>
+```
+
+Compound sub:
+- `<SidebarSplit.Section title>` — panel 안 그룹 (role="group")
+- `<SidebarSplit.Item icon label active trailing shortcut hasSubmenu onClick>` — MenuItem 래퍼
+
+### 조합 예시
+```tsx
+const sections: SidebarSplitSection[] = [
+  {
+    id: "files",
+    icon: <Icon name="folder" />,
+    label: "파일",
+    panel: (
+      <>
+        <SidebarSplit.Section title="최근">
+          <SidebarSplit.Item icon={<Icon name="file" />} label="README.md" />
+          <SidebarSplit.Item icon={<Icon name="file" />} label="plan.md" />
+        </SidebarSplit.Section>
+      </>
+    ),
+  },
+  {
+    id: "search",
+    icon: <Icon name="search" />,
+    label: "검색",
+    panel: <Input placeholder="검색…" />,
+  },
+];
+
+<SidebarSplit sections={sections} defaultActiveId="files" />
+```
+
+### 관련
+- [[components/sidebar]] — 단일 폭 사이드바
+- [[components/menu-item]] — panel item의 베이스
+- [[components/icon-button]] — rail 버튼

package/assets/prompts/components/sidebar.md

@@ -33,6 +33,8 @@ Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가
 - Sidebar 자체에 padding/width를 CSS로 덮지 않는다. `--sidebar-w*` 토큰 경유.
 - `.root`에 padding을 꽂지 않는다 — Body가 스크롤 컨테이너라 스크롤바가 안쪽으로 밀려 가장자리에 안 붙는다. 좌우 여백은 Header/Section/Footer가 각자 담당([[project_scroll_rule]]).
 - Brand symbol·wordmark 크기 override 금지. `--sidebar-brand-symbol-max`·`--sidebar-brand-wordmark-max` 상한 안에서만.
+- **Body 안 섹션 리스트가 길어서 스크롤이 필요할 때**, 섹션들에 `flex-shrink`를 그대로 두지 않는다. Body는 `display:flex column`이라 자식(Section)이 기본 `flex-shrink:1`로 수축되어 header가 몇 px로 뭉개지고 아이템이 사라져 보인다. 해결: Body 직속 자식에 `flex: 0 0 auto`를 걸어 각 섹션이 자기 콘텐츠 전체 높이를 유지하게 하고, 스크롤은 Body의 `overflow-y:auto`가 담당하게 한다.
+- **2단 쉘(아이콘 Rail + Sidebar) 조립 시 `SidebarSplit`를 쓰지 않는다** — SidebarSplit는 panel 영역을 자체 flex 체인으로 제한해서 안쪽 콘텐츠가 "영역 안에 갇힌" 느낌이 된다. 그냥 바깥 `display:flex`로 Rail(IconButton 세로 스택)과 `<Sidebar>`를 가로로 조립하고, 스크롤은 CtdsSidebar.Body에게 맡겨라. 기존 사이드바가 이미 자연 스크롤로 설계됐으니 그 구조를 그대로 차용하는 게 정답.
 
 ### Fallback
 collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계선 애매하면 AppFrame `variant="outlined"`.

package/assets/prompts/components/time-picker.md

@@ -0,0 +1,69 @@
+# TimePicker
+
+### 원칙
+시·분 선택 입력. [[components/date-picker]]의 시간 짝. 트리거는 세그먼트 입력(HH:MM 2자리씩) + popover 안에 시/분 리스트 또는 전체 슬롯 그리드. "약속 시간·회의 시작·마감 시각" 자리.
+
+### Do
+- `variant="line"` 기본. 폼 블록이면 `outline`, 밀도 극한이면 `filled` ([Input line default](../../memory/feedback_input_line_default.md) 메모리와 동일 규칙).
+- `step={30}` 기본. 회의·일정은 30분 단위가 흔함. 5·10·15·60도 선택 가능하지만 그 외 값은 자동 clamp.
+- 24h 지역이면 `format="24h"`(기본), 12h 지역이면 `format="12h"` + meridiem 세그먼트.
+- `quickOptions`는 "지금부터 상대 시간"이 흔한 자리(알람·예약 리마인더)에서만 켠다. 일반 폼엔 노이즈.
+- 예약 가능 슬롯을 그리드로 보여줘야 하는 자리(병원·식당 예약)엔 `inline + panelLayout="grid"`. gridCols 4~8 중 레이아웃 폭에 맞춰.
+
+### Don't
+- step에 7·13·45 같은 비표준 분수치를 넣지 않는다 — 리스트 가독성이 깨짐. 5·10·15·30·60만.
+- `minTime`/`maxTime`은 "HH:MM" 문자열만. Date 객체·epoch 금지.
+- `panelLayout="grid"`를 popover 모드(`inline=false`)에서 쓰지 않는다 — 그리드는 inline 전용.
+- Input처럼 생겼다고 `<Input type="time">`을 섞어쓰지 않는다 — 네이티브 time input은 축·토큰이 적용 안 됨.
+
+### Props 시그니처
+```tsx
+<TimePicker
+  value?={TimeValue | null}                 // { hours, minutes }
+  onChange?={(v: TimeValue | null) => void}
+  step?={5 | 10 | 15 | 30 | 60}             // default: 30
+  format?="24h | 12h"                         // default: 24h
+  minTime?={string}                           // "HH:MM" (24h, inclusive)
+  maxTime?={string}                           // "HH:MM" (24h, inclusive)
+  disabled?={boolean}
+  size?="sm | md | lg"                        // default: md
+  variant?="outline | filled | line"          // default: outline
+  inline?={boolean}                           // popover 없이 패널만
+  panelLayout?="columns | grid"              // default: columns
+  gridCols?={4 | 6 | 8}                       // grid 모드 열 수
+  splitMeridiem?={boolean}                    // grid를 AM/PM 2섹션
+  quickOptions?={QuickOption[] | boolean}
+  aria-label?={string}
+/>
+```
+
+### 조합 예시
+```tsx
+// 폼 — 시작·종료 시간
+<TimePicker variant="outline" step={15} value={start} onChange={setStart} />
+<TimePicker variant="outline" step={15} value={end} onChange={setEnd} minTime="09:00" />
+
+// 예약 슬롯 그리드 (오전·오후 분리)
+<TimePicker
+  inline
+  panelLayout="grid"
+  step={30}
+  splitMeridiem
+  gridCols={6}
+  value={slot}
+  onChange={setSlot}
+/>
+
+// 알람 — 지금부터 15/30/60분 후
+<TimePicker
+  variant="line"
+  quickOptions
+  value={remind}
+  onChange={setRemind}
+/>
+```
+
+### 관련
+- [[components/date-picker]] — 날짜 짝. 날짜+시간이 함께면 둘을 나란히.
+- [[components/input]] — variant 규칙 동일
+- [[components/select]] — 밀도 극한에서 Select로 대체 가능

package/assets/prompts/components/toolbar.md

@@ -0,0 +1,69 @@
+# Toolbar
+
+### 원칙
+IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는 "뜨 있는" 알약으로 콘텐츠 위에 떠서 액션을 모으는 자리. 단일 size — toolbar 안의 버튼은 전부 같은 사이즈여야 한다.
+
+### Do
+- `variant="floating"` 기본 — bg-elevated + shadow-md + radius-xl, 콘텐츠 위에 떠있는 알약. 캔버스·에디터·이미지 뷰어의 상단 중앙.
+- `variant="attached"`는 콘텐츠에 붙은 bar — transparent + 하단 hairline. 페이지 상단에 "탭 아래 액션 바"로 쓸 때.
+- 관련 액션은 `<Toolbar.Group>`으로 묶는다 — 내부는 좁은 gap, 그룹 간은 `<Toolbar.Divider>`.
+- 좌·우 정렬이 필요하면 `<Toolbar.Spacer>`로 공간 밀기 — flex:1.
+- toolbar 안엔 IconButton size="sm"이 기본. floating variant는 size="md"까지도 OK.
+
+### Don't
+- toolbar 안에 label 긴 Button을 섞지 않는다 — IconButton + Tooltip이 toolbar 패턴. 긴 label이 필요하면 그 자리는 toolbar가 아니라 액션 영역.
+- 두 Toolbar를 세로로 쌓지 않는다 — 하나의 toolbar에 Group·Divider로 구분. 쌓으면 밀도·시선 둘 다 깨짐.
+- `attached` variant에 shadow·radius-xl를 수동으로 추가하지 않는다 — floating을 쓰면 됨.
+- Group 안에 또 Group을 중첩하지 않는다 — flat 2단(Toolbar > Group > IconButton).
+
+### Props 시그니처
+```tsx
+<Toolbar
+  variant?="floating | attached"              // default: floating
+  stretch?={boolean}                           // default: variant로 자동 (attached=true, floating=false)
+  role?={string}                               // default: "toolbar"
+>
+  {children}
+</Toolbar>
+```
+
+Compound sub:
+- `<Toolbar.Group>` — 관련 액션 묶음 (role="group")
+- `<Toolbar.Divider>` — 세로 hairline
+- `<Toolbar.Spacer>` — flex:1 공간 밀기
+
+### 조합 예시
+```tsx
+// 에디터 — floating 알약, 좌/중/우 섹션
+<Toolbar variant="floating">
+  <Toolbar.Group>
+    <IconButton size="sm" variant="ghost" aria-label="실행 취소" icon={<Icon name="arrow-u-up-left" />} />
+    <IconButton size="sm" variant="ghost" aria-label="다시 실행" icon={<Icon name="arrow-u-up-right" />} />
+  </Toolbar.Group>
+  <Toolbar.Divider />
+  <Toolbar.Group>
+    <IconButton size="sm" variant="ghost" aria-label="굵게" icon={<Icon name="text-b" />} />
+    <IconButton size="sm" variant="ghost" aria-label="기울임" icon={<Icon name="text-italic" />} />
+  </Toolbar.Group>
+  <Toolbar.Spacer />
+  <Toolbar.Group>
+    <IconButton size="sm" variant="ghost" aria-label="공유" icon={<Icon name="share" />} />
+  </Toolbar.Group>
+</Toolbar>
+
+// 페이지 상단 — attached, 콘텐츠에 붙음
+<Toolbar variant="attached">
+  <Toolbar.Group>
+    <Button size="sm" variant="ghost" leftIcon={<Icon name="plus" />}>새로 만들기</Button>
+    <Button size="sm" variant="ghost" leftIcon={<Icon name="funnel" />}>필터</Button>
+  </Toolbar.Group>
+  <Toolbar.Spacer />
+  <IconButton size="sm" variant="ghost" aria-label="보기 전환" icon={<Icon name="list" />} />
+</Toolbar>
+```
+
+### 관련
+- [[components/icon-button]] — toolbar 안 주 버튼
+- [[components/button]] — label 짧은 액션
+- [[components/tooltip]] — IconButton엔 Tooltip 필수
+- [[components/breadcrumb]] — 페이지 상단에선 Breadcrumb + Toolbar 조합이 흔함

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

@@ -6,7 +6,7 @@
 ### Do
 - 기본 구성: `shape=circular-drop, fill=translucent, tail=end` — 레퍼런스 톤.
 - 액션은 `[copy, edit]` 기본. `actionsVisibility="show" | "hover"`로 상시/호버.
-- 첨부 있으면 `before` slot에 [[components/attachment-thumb]] / [[components/attachment-chip]] 자유 조합. 상위에서 레이아웃 책임.
+- 첨부 있으면 `before` slot에 [[components/attachment-thumb]] / [[components/attachment-item]] 자유 조합. 상위에서 레이아웃 책임.
 - 매우 긴 글은 bubble이 max-width 안에서 wrap, 그보다 넘으면 자연스레 아래로.
 
 ### Don't
@@ -22,7 +22,7 @@ shape 애매하면 `circular-drop`, fill 애매하면 `translucent`, visibility
 - [[components/bubble]] — 담는 그릇
 - [[components/message-actions]] — 액션 바
 - [[components/ai-message]] — 짝 컴포넌트
-- [[components/attachment-thumb]] / [[components/attachment-chip]] — before slot 조합
+- [[components/attachment-thumb]] / [[components/attachment-item]] — before slot 조합
 
 ### Props 시그니처
 ```tsx