@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/prompts/components/textarea.md

@@ -0,0 +1,105 @@
+# Textarea
+
+### 원칙
+다중 행 텍스트 입력. [[components/input]]과 **시각·width·label 규약 100% 공유** — 다른 점은 **높이 조절**뿐. `autoResize`로 내용에 맞춰 자동 성장(기본), 수동 모드엔 **커스텀 리사이즈 핸들**(브라우저 기본 그립 대신 bottom-center 캡슐). minRows / maxRows로 성장 한계 지정. `showCount`로 maxLength 카운터 노출.
+
+### Do
+- 짧은 입력(한 줄)엔 [[components/input]], **긴 서술·메모·설명문**엔 Textarea.
+- `autoResize=true`(기본): 내용 따라감. `maxRows`에 닿으면 세로 스크롤.
+- 수동 리사이즈가 유용한 자리(에디터·댓글): `autoResize={false}` + `minRows`.
+- maxLength가 있으면 `showCount`로 카운터 노출. 넘기면 `.countOver`로 destructive 톤.
+- Input 옆 나란히 놓을 땐 size·variant 통일.
+
+### Don't
+- 한 줄 입력에 쓰지 않는다 — [[components/input]].
+- 브라우저 기본 `resize` 쓰지 않는다 (컴포넌트가 none으로 강제). 커스텀 핸들만.
+- 높이를 CSS로 override 금지. autoResize 쓰거나 minRows/maxRows로.
+- line-height 변경 금지. autoResize 계산이 깨짐.
+- `showCount` 없이 maxLength만 걸고 끝내지 않는다 — 사용자가 왜 끊기는지 모름.
+
+### Fallback
+size 애매하면 `md`, variant 애매하면 `outline`, autoResize 애매하면 `true`, rows 애매하면 `3`.
+
+### 관련
+- [[components/input]] — 한 줄 입력, 모든 시각·width·label 규약 공유
+- [[components/form-field]] — label·description·warning 자리
+- [[axes/density]] — padding·font-size가 Density에 반응
+- [[axes/shape]] — radius가 Shape 축에 반응
+
+### Props 시그니처
+```tsx
+<Textarea
+  size="sm | md | lg"                          // default: md
+  variant="outline | filled | line"            // default: outline
+  width="fill | md | lg | number"              // default: "fill"
+  invalid={boolean}                            // warning 있으면 자동 true
+  label={ReactNode}
+  description={ReactNode}
+  warning={ReactNode}
+  autoResize={boolean}                         // default: true
+  minRows={number}                             // autoResize 하한. 기본 rows=3
+  maxRows={number}                             // autoResize 상한. 넘으면 스크롤
+  showCount={boolean}                          // default: false
+  rows={number}                                // default: 3
+  value={string} defaultValue={string}
+  onChange={(e) => void}
+  maxLength={number}
+  disabled={boolean}
+  readOnly={boolean}
+  required={boolean}
+  placeholder={string}
+  id={string}
+/>
+```
+
+### Variant · Size 매트릭스
+Input과 동일. 자세히는 [[components/input]] 참고.
+
+### Mode 매트릭스
+| 모드 | 조건 | 동작 |
+|---|---|---|
+| autoResize (기본) | `autoResize=true` | 내용 따라 성장, maxRows 도달 시 세로 스크롤, 커스텀 핸들 숨김 |
+| manual | `autoResize=false` | minRows 높이 고정, 커스텀 핸들(bottom-center)로 드래그 리사이즈 |
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | Input default |
+| hover | border-strong |
+| focus-visible | ring |
+| disabled | opacity 0.5, cursor not-allowed |
+| readOnly | bg-subtle 유지, cursor default |
+| invalid / warning | border destructive, warning 메시지 노출 |
+| count over (showCount + maxLength) | 카운터 destructive 톤 |
+
+### 조합 예시
+```tsx
+// 기본 — autoResize + 카운터
+<Textarea
+  label="메모"
+  description="최대 500자"
+  value={memo}
+  onChange={(e) => setMemo(e.target.value)}
+  maxLength={500}
+  showCount
+/>
+
+// 매뉴얼 리사이즈 — 에디터 자리
+<Textarea
+  label="본문"
+  autoResize={false}
+  minRows={10}
+  variant="filled"
+/>
+
+// 경고 상태
+<Textarea
+  label="피드백"
+  value={feedback}
+  onChange={(e) => setFeedback(e.target.value)}
+  warning={feedback.length < 10 ? "최소 10자 이상 입력하세요" : undefined}
+/>
+
+// Line variant — 미니멀 폼
+<Textarea variant="line" size="lg" label="소개" />
+```

package/assets/prompts/components/toast.md

@@ -0,0 +1,149 @@
+# Toast
+
+### 원칙
+휘발성 피드백 — 사용자 액션의 결과를 짧게 알리고 자동으로 사라진다. 흐름을 끊지 않는다. [[components/callout]]은 상주 안내, [[components/banner]]는 페이지 폭 경고, Toast는 **일회성 결과 신호**.
+
+### Do
+- `tone`은 **아이콘 색**에만 적용. 표면 색은 `surface`(`inverse` 기본 / `default`)가 담당.
+- 비파괴 결과(저장·복사됨)엔 `tone="neutral"`, 성공 상태 전환엔 `success`, 설정 누락·용량 임박엔 `warning`, 삭제·실패엔 `destructive`.
+- `tone` 미지정 시 아이콘 자동 매칭 — `neutral`→`info`, `success`→`check-circle`, `warning`→`warning-circle`, `destructive`→`warning`. 다른 의미 아이콘 필요할 때만 `icon` override. 아이콘 없는 Toast는 허용하지 않는다.
+- `action` 1개 + 자동 close `×` 1개까지. `action` Button은 size `xs`·variant `ghost` 또는 `outline`만 — Toast 표면이 inverse일 때 solid 버튼은 신호 역전.
+- 스택 최대 3개. 4번째가 들어오면 가장 오래된 1개를 자동 제거.
+- `placement`는 `bottom-right`(데스크톱 생산성 도구) 또는 `top-center`(모바일·간결 앱) 둘 중 하나. 혼용 금지.
+- `placement="top-center"`는 **단일 라인 강제** — Viewport가 title 1줄만 보여주고 `description`은 자동 숨김, 긴 title은 ellipsis. 2줄 이상 신호가 필요하면 `bottom-right` 또는 [[components/callout]].
+- `duration` 기본 4000ms. 중요도 높으면 `6000`, action 포함 시 `6000` 권장. `destructive` + 사용자 결정 필요엔 `Infinity`(수동 close 전엔 유지).
+- `role` 자동 — tone이 `destructive`면 `alert`(즉시 읽힘), 그 외엔 `status`(polite).
+- Provider는 앱 루트 1곳에 `<ToastProvider>` + `<ToastViewport>` 배치. Viewport가 placement를 결정.
+
+### Don't
+- Toast 표면색에 tone별 tint 금지 — 색은 아이콘·action 버튼에만.
+- action Button 2개 이상 두지 않는다 — Toast 폭에서 신호 분산.
+- action variant에 `primary`·`destructive` solid 금지 — inverse 표면에서 색 신호가 깨짐.
+- 긴 본문(2줄 초과) 금지 — Toast는 1~2줄까지. 그 이상이면 [[components/callout]] 또는 [[components/banner]].
+- `placement="top-center"`에 `description` 전달 금지 — Viewport가 숨긴다. multiline 신호 필요하면 placement부터 `bottom-right`로.
+- 비동기 로딩 상태(spinner Toast)로 쓰지 않는다 — Toast는 완료 신호 전용.
+- 플로팅이지만 `data-side` 기반 `.m-float` 유틸은 쓰지 않는다 — Toast는 placement별 slide-in 전용 애니.
+- 영구 안내·설명·FAQ 유도에 쓰지 않는다 — [[components/callout]] 영역.
+
+### Fallback
+`tone` 애매하면 `neutral`. `surface` 애매하면 `inverse`. `placement` 애매하면 `bottom-right`. `duration` 애매하면 `4000`.
+
+### 관련
+- [[components/callout]] — 상주 안내 카드. Toast는 휘발.
+- [[components/banner]] — 페이지 폭 전역 경고. Toast는 코너 소형.
+- [[components/button]] — `action` 슬롯의 요소.
+- [[axes/motion]] — placement별 slide-in·fade-out 파라미터 스왑.
+- [[tokens/z-index]] — `z-toast` 레이어 (Modal 위, Tooltip 아래).
+
+### Props 시그니처
+```tsx
+// Provider — 앱 루트 1곳
+<ToastProvider duration={4000}>
+  {children}
+  <ToastViewport placement="bottom-right | top-center" />  // default: bottom-right
+</ToastProvider>
+
+// Toast — ToastProvider 자손에서 open 상태로 렌더
+<Toast
+  open={boolean}
+  onOpenChange={(open: boolean) => void}
+  title={ReactNode}                       // required
+  description={ReactNode}
+  tone="neutral | success | warning | destructive"  // default: neutral
+  surface="inverse | default"             // default: inverse
+  icon={IconName}                         // tone별 자동 매칭 override
+  action={ReactNode}                      // Button size="xs" variant="ghost|outline"만
+  actionAltText={string}                  // required if action — 스크린리더 설명
+  dismissible={boolean}                   // default: true
+  dismissLabel={string}
+  duration={number | "Infinity"}          // default: 4000
+/>
+
+// Hook — 명령형 호출 (권장)
+const { toast } = useToast();
+toast({ title: "저장됨", tone: "success", duration: 3000 });
+```
+
+### Variant 매트릭스
+Toast는 **5개 축의 독립 조합**이다. 축별로 결정 → 조합의 완성도는 아래 금지 조합만 피하면 보증.
+
+**1. `placement` (Viewport 레벨, 앱당 1곳 지정)**
+
+| 값 | 레이아웃 | description | 용도 |
+|---|---|---|---|
+| `bottom-right` (기본) | 우하단 → 위로 스택 | **허용** (2줄까지) | 데스크톱 생산성 도구 |
+| `top-center` | 상단 중앙 → 아래로 스택 | **자동 숨김** (단일 라인 강제, title ellipsis) | 모바일·간결 앱 |
+
+**2. `surface` (Toast별)**
+
+| 값 | 표면 | 텍스트 | 용도 |
+|---|---|---|---|
+| `inverse` (기본) | `--fg`(라이트에선 검정) | `--bg`(라이트에선 흰색) | 주변 UI와 명확 분리. 생산성 도구 |
+| `default` | `--bg` + `--shadow-lg` | `--fg` | Callout·Tooltip과 같은 톤. 가벼운 느낌 |
+
+**3. `tone` (아이콘·action 색만 스왑. 표면 색은 영향 없음)**
+
+| 값 | 아이콘 색 | 자동 아이콘 | 용도 |
+|---|---|---|---|
+| `neutral` (기본) | 중립(bg/fg-muted) | 없음 | 저장됨·복사됨 등 일반 완료 |
+| `success` | `--success` | `check-circle` | 성공 전환(업로드 완료·결제 완료) |
+| `warning` | `--warning` | `warning-circle` | 설정 누락·용량 임박 |
+| `destructive` | `--destructive` | `warning` | 삭제·실패·롤백. `role="alert"` 자동 승격 |
+
+**4. `dismissible` (우측 X 버튼)**
+
+| 값 | 결과 | 용도 |
+|---|---|---|
+| `true` (기본) | 우측에 X IconButton | 대부분의 경우. `duration=Infinity`일 땐 **필수** |
+| `false` | X 숨김 | duration 짧고(≤4000) action도 없는 순수 알림 전용 |
+
+**5. `action` (Button 1개 slot)**
+
+| action variant | 허용 조건 |
+|---|---|
+| `ghost` | 모든 tone·surface |
+| `outline` | 모든 tone·surface |
+| `primary`/`solid` | **금지** (아래 참조) |
+
+**금지 조합**
+- `surface=inverse` + action `primary`/`solid` — 반전 표면에서 solid는 색 신호 깨짐. `ghost`/`outline`만.
+- `tone=destructive` + action `primary`(brand) — 파괴 맥락에 brand 색 신호 금지.
+- `tone=success` + action `destructive` — 긍정 맥락에 비가역 액션 혼재 금지.
+- `placement=top-center` + `description` 전달 — Viewport가 숨긴다. 2줄 신호 필요하면 bottom-right.
+- `duration=Infinity` + `dismissible=false` — 사용자가 영원히 닫을 수 없음.
+- action 2개 이상 — slot 1개로 제한.
+
+### 애니메이션
+`.m-float` 쓰지 않는다 (data-side 기반이라 placement 스택 구조에 안 맞음). Toast 전용 keyframe을 컴포넌트 CSS에 두되, duration·easing은 **반드시 `--duration-*`/`--ease-*` 토큰 경유**.
+
+톤은 Sonner/Linear 계열 — **짧은 거리 slide + fade + 미세 scale**. 뷰포트 밖 전체 폭에서 밀고 들어오는 긴 slide는 쓰지 않는다 ("확 끼어드는" 인상). open은 공간에 '놓이는' 느낌, close는 '사라지는' 느낌.
+
+- `placement=bottom-right` — open: `translateX(space-4)` + `scale(0.96)` + opacity 0 → 1. `--duration-slow` + `--ease-emphasized`.
+- `placement=top-center` — open: `translateY(-space-4)` + `scale(0.96)` + opacity 0 → 1. 같은 토큰.
+- close(dismiss) — placement 공통으로 `scale(1 → 0.96)` + opacity 1 → 0만. slide 없음. `--duration-base` + `--ease-in`.
+- swipe dismiss는 `--radix-toast-swipe-move-x` 추적 → end 시 손가락이 민 방향으로 짧게 밀어내며 fade.
+- `prefers-reduced-motion: reduce` — 모든 Toast 애니 즉시 완료.
+
+### 조합 예시
+```tsx
+// 앱 루트
+<ToastProvider>
+  <App />
+  <ToastViewport placement="bottom-right" />
+</ToastProvider>
+
+// 호출부
+const { toast } = useToast();
+
+toast({
+  title: "변경사항이 저장되었습니다",
+  tone: "success",
+  action: (
+    <Button size="xs" variant="outline" onClick={undo}>
+      실행 취소
+    </Button>
+  ),
+  actionAltText: "방금 저장을 되돌리기",
+  duration: 6000,
+});
+```

package/assets/prompts/components/tooltip.md

@@ -0,0 +1,71 @@
+# Tooltip
+
+### 원칙
+hover·focus 시 뜨는 **짧은 보조 설명**. Radix Tooltip 위에 얹은 compound. 라벨이 없는 [[components/icon-button]]의 의미 설명, 축약된 단어의 보충, 단축키 힌트에 사용. **클릭 액션은 담지 않는다** — 그건 [[components/popover]].
+
+### Do
+- 라벨이 없는 아이콘 버튼엔 반드시 Tooltip + `aria-label` 둘 다.
+- 내용은 **한 줄** 또는 **최대 두 줄** — Tooltip은 설명이 아니라 힌트.
+- 단축키는 [[components/shortcut]]과 조합: `content={<>붙여넣기 <Shortcut>⌘V</Shortcut></>}`.
+- `side`로 방향 지정 — 공간이 좁은 쪽은 자동 flip.
+- `followMouse`는 긴 호버 요소(차트·툴바)에서만.
+
+### Don't
+- 모바일/터치에선 Tooltip 금지 — hover가 없음. 중요한 정보는 Label·description으로.
+- 액션 버튼이 담긴 Tooltip 금지 — [[components/popover]]로.
+- content에 긴 문단 금지. 설명이 길면 Dialog 또는 Popover.
+- hover 시 사라지는 중요 정보 금지 — WCAG 2.5.3 (호버 지속성) 위반.
+- 커스텀 애니메이션 금지. `.m-float` 유틸이 전담.
+
+### Fallback
+side 애매하면 `top`, align 애매하면 `center`, delayDuration 애매하면 Radix 기본(~700ms).
+
+### 관련
+- [[components/icon-button]] — 가장 흔한 트리거 (aria-label 보충)
+- [[components/shortcut]] — content 안쪽 단축키 힌트
+- [[components/popover]] — 액션·입력이 담긴 자리 (Tooltip 대신)
+- [[axes/motion]] — Content in/out은 `.m-float` 유틸
+
+### Props 시그니처
+```tsx
+<Tooltip
+  content={ReactNode}                          // 한 줄 또는 Shortcut 조합
+  side="top | right | bottom | left"           // default: top (자동 flip)
+  align="start | center | end"                 // default: center
+  sideOffset={number}                          // default: 6
+  arrowOffset={number}                         // 꼭지 중심 오프셋 (followMouse=true 시 무시)
+  followMouse={boolean}                        // 트리거 위 커서 추적
+  arrow={boolean}                              // default: true
+  delayDuration={number}                       // ms, default: Radix 기본
+  open={boolean}
+  onOpenChange={(open: boolean) => void}
+>
+  {trigger}                                    // 자동으로 asChild 처리
+</Tooltip>
+```
+
+### Size · 색
+Tooltip은 size prop 없음 — 콘텐츠에 맞춰 자동 폭 (최소 240px). 색은 Mode 반전 (라이트에선 다크 Tooltip, 다크에선 라이트) — `--tooltip-bg`·`--tooltip-fg` 토큰이 자동.
+
+### 조합 예시
+```tsx
+// 아이콘 버튼 라벨 — 가장 흔한 자리
+<Tooltip content="복사">
+  <IconButton icon={<Icon name="copy" />} aria-label="복사" />
+</Tooltip>
+
+// 단축키 힌트 — Shortcut 조합
+<Tooltip content={<>붙여넣기 <Shortcut>⌘V</Shortcut></>}>
+  <IconButton icon={<Icon name="clipboard" />} aria-label="붙여넣기" />
+</Tooltip>
+
+// followMouse — 긴 요소 (툴바 레이블)
+<Tooltip content="Timeline에서 이 시점을 선택" side="bottom" followMouse>
+  <div className="timeline-track">...</div>
+</Tooltip>
+
+// 축약어 보충
+<Tooltip content="Operational Expenditure (운영비)" side="top">
+  <span className="metric-label">OPEX</span>
+</Tooltip>
+```

package/assets/prompts/components/topbar.md

@@ -0,0 +1,148 @@
+# Topbar
+
+### 원칙
+앱 shell 최상단의 가로 bar — Breadcrumb·탐색·검색·알림·사용자 메뉴처럼 **"지금 어느 자리인지 + 공용 액션"**만 담는 chrome. 콘텐츠 자체(hero head, 큰 환영 메시지, 섹션 제목)는 Topbar의 자리가 아니라 **아래 body의 첫 블록 자리**다. Topbar는 세로 높이가 고정된 **얇은 축**이므로, 수직 리듬이 큰 요소를 끼우면 align이 깨지고 bar 자체가 "들뜬다".
+
+### Do
+- Breadcrumb·검색 Input·알림 IconButton·avatar menu·탐색 Tabs처럼 **반복적으로 쓰이는 공용 액션만** 담는다.
+- 세로는 `size` prop(`sm`/`md`)이 결정하는 한 줄만. 수직으로 쌓지 않는다.
+- 좌/우 정렬은 `Topbar.Spacer`로. 가운데 그룹이 필요하면 중앙에 또 하나의 Spacer를 끼운다.
+- 자체 chrome(bg/border/shadow)은 두지 않는다 — 표현은 상위 [[components/app-frame]] variant가 담당.
+- 페이지의 "지금 어디" 신호는 **Breadcrumb**로. 큰 타이틀로 쓰고 싶으면 Topbar가 아니라 body 첫 블록.
+
+### Don't
+- `h1`·큰 hero head·환영 메시지("good morning, …")·페이지 섹션 타이틀을 Topbar 안에 넣지 않는다 — Topbar는 **얇은 축**이고 큰 타이포가 들어가는 순간 `align-items` 전쟁이 벌어진다. 이걸 로컬 CSS로 때우는 순간(`align-items: flex-start`, `padding-bottom` override 등) Topbar의 "축" 약속이 깨지고, 아래 body와의 수직 리듬도 어긋난다. hero는 body의 첫 섹션으로 꺼낸다.
+- 수직 스택(eyebrow + title 세로 두 줄 같은 조합)을 Topbar 안에 넣지 않는다. 수직 리듬은 body의 섹션 head에서.
+- 알림·검색·Breadcrumb 외의 **콘텐츠**(KPI·요약·공지 문구)를 Topbar에 끼우지 않는다. 그건 body hero 섹션 또는 Callout의 자리.
+- Topbar에 로컬 `padding`·`align-items`를 override해서 "큰 요소 끼운 걸 수습"하지 않는다 — 수습이 필요한 순간 그 요소가 Topbar의 자리가 아니라는 신호.
+- 자체 bg/border/shadow 추가 금지 — AppFrame variant가 쥐고 있는 자리.
+- 여러 줄 쌓거나 `size` 바깥의 세로 공간을 늘리지 않는다 — "얇은 축"이 Topbar의 약속.
+
+### Fallback
+`size` 애매하면 `md`. 콘텐츠 밀도가 아주 낮은 랜딩/문서 shell이면 `sm`.
+Breadcrumb 자리·공용 액션 자리 둘 다 비면 Topbar를 두지 않는다 — 빈 bar는 수직 공간만 먹는다.
+
+### 관련
+- [[components/app-frame]] — Topbar를 품는 shell. bg/border/shadow 등 chrome 표현은 AppFrame variant가 쥔다.
+- [[components/breadcrumb]] — Topbar 왼쪽의 "지금 어디" 신호. 큰 타이틀 대신 이걸로.
+- [[components/sidebar]] — 가로축이 Topbar, 세로축이 Sidebar. 둘의 top baseline은 AppFrame이 맞춘다.
+- [[components/callout]] — "지금 공지해야 할 큰 콘텐츠"가 생기면 Topbar가 아니라 body 첫 블록의 Callout.
+- [[axes/density]] — size와 함께 세로 높이 리듬을 결정.
+- [[tokens/spacing]] — 좌우 padding은 shell 토큰에 양보. Topbar가 자체로 쥐지 않는다.
+
+### Props 시그니처
+```tsx
+<Topbar size="sm | md">
+  { /* 자유 슬롯: Breadcrumb, Input, IconButton, Topbar.Spacer, Avatar menu 등 */ }
+</Topbar>
+
+<Topbar.Spacer />  {/* 좌/우 정렬용 flex:1 빈 블록 */}
+```
+
+### Size 매트릭스
+
+| size | 세로 높이 | 용도 |
+|---|---|---|
+| `sm` | 얇음 | 문서·랜딩·설정 shell. 액션 수 적을 때 |
+| `md` | 기본 | 앱 콘솔. Breadcrumb + 공용 액션 2~3개 |
+
+### 금지 조합
+- Topbar 안에 `h1`·`h2`·hero head 삽입 — "얇은 축" 약속 깨짐. body hero 섹션으로 꺼낸다.
+- Topbar 안에 수직 스택(eyebrow + title 2줄) — 단일 줄 원칙 깨짐.
+- 로컬 CSS로 `align-items: flex-start` + `padding-bottom` 늘려서 큰 타이포 수용 — 수습이 필요한 순간 그 요소가 자리가 아니라는 신호.
+- 자체 bg/border/shadow 리터럴 추가 — AppFrame variant 영역 침범.
+- Breadcrumb·공용 액션 없이 **콘텐츠 요약**만 넣기 — Callout·hero 섹션의 자리.
+- MetricCard·Chip·Badge를 콘텐츠 신호로 Topbar에 끼우기 — body 섹션 안이 자리.
+
+### 조합 예시
+
+Topbar는 **자유 슬롯 컨테이너**다. "page / detail / panel" 같은 variant를 따로 두지 않고, **같은 Topbar에 다른 children**을 넣어 역할을 바꾼다. 뒤로가기·close도 전용 컴포넌트가 아니라 `IconButton` + `Icon`을 slot에 꽂는 조립.
+
+```tsx
+// 1) page — 운영 콘솔. Breadcrumb + 검색 + 알림
+<Topbar size="md">
+  <Breadcrumb>
+    <Breadcrumb.Item href="/today">today</Breadcrumb.Item>
+    <Breadcrumb.Current>meetings</Breadcrumb.Current>
+  </Breadcrumb>
+  <Topbar.Spacer />
+  <Input
+    size="md"
+    variant="filled"
+    placeholder="search anything"
+    leftIcon={<Icon name="search" />}
+    rightAction={<Shortcut size="sm">⌘K</Shortcut>}
+  />
+  <IconButton icon={<Icon name="bell" />} size="md" variant="ghost" />
+</Topbar>
+
+// 2) detail — 뒤로가기 + Breadcrumb로 현재 위치 + overflow 액션
+<Topbar size="md">
+  <IconButton
+    icon={<Icon name="caret-left" />}
+    size="md"
+    variant="ghost"
+    aria-label="back"
+  />
+  <Breadcrumb>
+    <Breadcrumb.Item href="/meetings">meetings</Breadcrumb.Item>
+    <Breadcrumb.Current>oct 5 standup</Breadcrumb.Current>
+  </Breadcrumb>
+  <Topbar.Spacer />
+  <IconButton
+    icon={<Icon name="dots-three" />}
+    size="md"
+    variant="ghost"
+    aria-label="more"
+  />
+</Topbar>
+
+// 3) panel — 사이드패널/드로어 내부. 더 얇게 + close
+<Topbar size="sm">
+  <Breadcrumb>
+    <Breadcrumb.Current>filters</Breadcrumb.Current>
+  </Breadcrumb>
+  <Topbar.Spacer />
+  <IconButton
+    icon={<Icon name="x" />}
+    size="sm"
+    variant="ghost"
+    aria-label="close"
+  />
+</Topbar>
+
+// hero head는 Topbar가 아니라 body의 첫 블록
+<main>
+  <Topbar size="md">{/* page topbar */}</Topbar>
+
+  <section className={hero}>
+    <span className={eyebrow}>thursday · october 2</span>
+    <h1 className={head}>good morning, 희영</h1>
+  </section>
+
+  { /* 이하 KPI, 섹션들 … */ }
+</main>
+```
+
+### 역할별 slot 공식
+
+| 역할 | leading slot | 가운데 | trailing slot | size |
+|---|---|---|---|---|
+| page | Breadcrumb | — | 검색 Input, 알림/avatar IconButton | `md` |
+| detail | `IconButton icon="caret-left" variant="ghost"` + Breadcrumb | — | overflow/share 등 IconButton | `md` |
+| panel (사이드패널·drawer) | Breadcrumb(단일 Current) | — | `IconButton icon="x" variant="ghost"` | `sm` |
+
+- 뒤로가기는 **전용 컴포넌트가 아니라** `IconButton` + `Icon name="caret-left"`. `variant="ghost"` 고정, `aria-label="back"` 필수.
+- 패널 close도 동일하게 `IconButton` + `Icon name="x"`, `aria-label="close"`.
+- "지금 어디"는 어떤 역할이든 **항상 Breadcrumb**로. detail/panel이라고 `h1`·굵은 타이틀로 바꾸지 않는다 — "얇은 축" 약속은 역할과 무관하게 유지.
+- panel은 콘텐츠 밀도가 낮으니 `size="sm"`이 기본. 더 얇아야 할 이유가 명확할 때만.
+- bg/border/shadow는 **역할별로도 Topbar가 쥐지 않는다** — detail은 상위 AppFrame, panel은 Drawer/SidePanel shell이 쥔다.
+
+### 조립 — 상위 shell과의 공식
+- 좌/우 padding은 **AppFrame variant 또는 콘텐츠 panel**이 쥔다. Topbar가 자체 padding으로 수평 정렬을 책임지지 않는다. 수평 baseline은 body와 반드시 동일해야 하며, Topbar가 혼자 다르게 쥐면 body와 어긋난다.
+- 세로 top padding은 shell(또는 콘텐츠 panel)의 top padding과 동일하게. Sidebar의 top padding도 **같은 수치**로 맞춰야 좌·우 상단이 한 줄에 선다.
+- Topbar와 아래 body 첫 섹션 사이 간격은 **Topbar의 bottom padding**이 아니라 **body의 top padding 또는 body gap**이 담당. Topbar는 "얇은 축"으로 끝나야 수직 리듬이 섹션 쪽으로 넘어간다.
+
+### Known Gaps
+- Topbar는 반응형 breakpoints에서 "검색 Input → 아이콘으로 축약" 같은 전환을 자체적으로 하지 않는다. 상위 레이아웃이 반응형으로 children을 바꿔 넘긴다.
+- Topbar 안 Breadcrumb의 **잘림/트렁케이션** 규칙은 [[components/breadcrumb]]이 담는다. Topbar는 "자리"만 제공.

package/assets/prompts/primitives/emerge.md

@@ -0,0 +1,43 @@
+# emerge
+
+### 원칙
+앵커(트리거)에서 자라나는 등장. slide + scale + fade가 하나로 묶인 프리미티브.
+Radix의 `data-side` 자동 스왑과 결합해 방향이 자동 결정.
+
+### Do
+- 앵커 기반 오버레이(Tooltip·Popover·DropdownMenu·ContextMenu·HoverCard) 등장에 사용.
+- `transform-origin`은 Radix의 `--radix-{component}-content-transform-origin` 사용.
+- 방향 클래스는 아래 [방향 매핑](#방향-매핑) 표를 따른다 (Radix `data-side` 자동 반영).
+
+### Don't
+- 뷰포트 가장자리에서 오는 Drawer·Sheet·Toast에는 emerge 쓰지 않는다 (`slide-*` 사용).
+- `transform-origin`을 직접 계산해 넣지 않는다. 반드시 Radix의 `--radix-{component}-content-transform-origin`을 참조 (앵커 위치 자동 반영).
+
+### Fallback
+앵커 기반 오버레이는 무조건 emerge. 방향은 Radix가 계산한 `data-side` 신뢰.
+
+### 관련
+- [[axes/motion]] — duration·거리·scale amount를 스왑
+- [[primitives/slide]] · [[primitives/scale]] — emerge의 구성 요소
+
+### 축별 스왑
+| data-motion | 파라미터 |
+|---|---|
+| `bouncy` | duration 400ms · distance 1.3× · scale 0.94→1 |
+| `standard` | duration 200ms · distance 1× · scale 0.96→1 |
+| `calm` | duration 100ms · distance 0.7× · scale 0.98→1 |
+| `none` | 즉시 (변화 없음) |
+
+### 겹침 규칙
+- 자기 자신이 이미 slide + scale + fade 조합이라 다른 프리미티브와 겹치지 않는다.
+- 다른 프리미티브(예: shake, pulse)는 emerge 등장 후 별개 이벤트로 실행 가능.
+
+### 방향 매핑
+Radix의 `data-side`가 앵커 위치 반대 방향에서 등장하도록 자동 매핑된다.
+
+| Radix `data-side` | emerge 방향 클래스 | 의미 |
+|---|---|---|
+| `top` | `m-emerge-from-bottom` | 아래에서 올라옴 |
+| `bottom` | `m-emerge-from-top` | 위에서 내려옴 |
+| `left` | `m-emerge-from-right` | 오른쪽에서 옴 |
+| `right` | `m-emerge-from-left` | 왼쪽에서 옴 |

package/assets/prompts/primitives/fade.md

@@ -0,0 +1,31 @@
+# fade
+
+### 원칙
+opacity만 트랜지션. 위치·크기 변화 없음. 상태 전환의 가장 기본 프리미티브.
+
+### Do
+- 요소의 표시/숨김, 상태 전환에 사용.
+- 다른 프리미티브와 조합해 "fade + scale" 같은 오버레이 등장 표현.
+
+### Don't
+- 공간 이동이 필요한 곳에는 fade만 쓰지 않는다.
+- 반복(무한 loop)에 fade 쓰지 않는다 (`pulse` 사용).
+
+### Fallback
+가장 안전한 트랜지션. 상태 전환의 기본값.
+
+### 관련
+- [[axes/motion]] — duration을 스왑
+- [[primitives/scale]] · [[primitives/emerge]] — fade와 자주 조합
+
+### 축별 스왑
+| data-motion | 파라미터 |
+|---|---|
+| `bouncy` | duration 400ms |
+| `standard` | duration 200ms |
+| `calm` | duration 100ms |
+| `none` | duration 0ms (즉시) |
+
+### 겹침 규칙
+- `scale`, `slide-*`, `emerge-*`와 조합 허용.
+- 스스로 반복하지 않음 (단발성).

package/assets/prompts/primitives/scale.md

@@ -0,0 +1,32 @@
+# scale
+
+### 원칙
+크기 변화(0.96 → 1). `transform-origin`을 앵커 쪽으로 두면 앵커에서 자라나는 느낌.
+강조 등장의 기본. fade와 조합해 사용.
+
+### Do
+- Popover·Modal·Tooltip 등장 시 fade와 조합해 "안착" 느낌.
+- `transform-origin`을 앵커 방향으로 명시. 오버레이는 Radix의 `--radix-*-content-transform-origin` 사용.
+
+### Don't
+- 큰 스케일 변화(0.5 → 1) 금지 — 위압적. 0.9 ~ 1.0 범위 유지.
+- 반복 스케일에 쓰지 않는다 (`pulse` 사용).
+- 좁은 UI 안에서 여러 요소가 동시에 scale 등장하지 않는다.
+
+### Fallback
+Popover/Modal/Tooltip은 이걸 사용. 나머지는 fade가 우선.
+
+### 관련
+- [[axes/motion]] — duration과 scale amount를 스왑
+- [[primitives/emerge]] — scale + slide + fade 조합의 표준 형태
+
+### 축별 스왑
+| data-motion | 파라미터 |
+|---|---|
+| `bouncy` | duration 400ms · scale 0.94 → 1 |
+| `standard` | duration 200ms · scale 0.96 → 1 |
+| `calm` | duration 100ms · scale 0.98 → 1 |
+| `none` | 즉시 scale 1 (변화 없음) |
+
+### 겹침 규칙
+- `fade`와 조합 필수 (opacity 없이 scale만 하면 어색).

package/assets/prompts/primitives/scroll.md

@@ -0,0 +1,75 @@
+# scroll
+
+### 원칙
+스크롤이 있는 곳엔 **두 겹의 패딩 규약**을 지킨다.
+
+1. **바깥 컨테이너(스크롤 발생 요소)** 에는 패딩을 두지 않는다.
+   → 패딩이 있으면 스크롤 트랙이 콘텐츠 위로 겹치거나 잘려 보인다.
+2. **안쪽 트랙(items가 실제로 놓이는 자식)** 에 상하좌우 패딩을 준다.
+   → 스크롤 도중 첫/끝 item이 컨테이너 엣지에 딱 붙어 잘린 느낌을 없앤다.
+
+이 규약은 세로·가로·양방향 스크롤 모두에 동일하게 적용된다.
+
+### Do
+- 스크롤 컨테이너에 `overflow: auto`를, 안쪽 children wrapper에 `padding: var(--space-*)`를.
+- 스크롤 방향에 맞춰 최소 `--space-2` 이상의 패딩을 줘서 트랙 끝에서도 콘텐츠가 카드 벽에 붙지 않도록.
+- 리스트/그리드형 스크롤은 items 간 gap과 별개로 **컨테이너-item 사이의 여백**을 반드시 확보.
+- 채팅창처럼 하단이 항상 최신인 경우에도 안쪽 패딩으로 마지막 메시지가 잘리지 않게.
+
+### Don't
+- 스크롤 컨테이너 자체에 `padding`을 걸지 않는다 → thumb이 콘텐츠와 겹쳐 보임.
+- items에 `margin: first-child/last-child` 트릭으로 여백 흉내내지 않는다 → 정렬 깨지고 유지보수 어려움.
+- `overflow: hidden` 위에 scrollTop을 JS로 조작하는 커스텀 스크롤은 접근성 무너짐. 반드시 네이티브 `overflow: auto`.
+
+### Fallback
+스크롤 필요 없는 경우엔 안쪽 트랙 패딩만으로도 무해. 그러니 규약을 컴포넌트 기본으로 두는 게 안전.
+
+### 관련
+- [[axes/density]] — `--space-*` 스케일 스왑에 자동 반응
+- [[tokens/spacing]] — 안쪽 패딩은 `--space-*` 경유
+- 스크롤바 시각(색·두께·hover 노출)은 globals.css의 전역 정책이 담당. 컴포넌트가 별도로 스크롤바 스타일을 선언하지 않는다.
+
+### 정책 요약
+
+| 요소 | overflow | padding |
+|---|---|---|
+| 바깥(스크롤) 컨테이너 | `auto` | 없음 |
+| 안쪽(items) 트랙 | 없음 | `var(--space-2)` 이상 |
+
+### 스크롤바 시각 정책 (전역, globals.css)
+
+- 평상시: thumb 투명 → 스크롤바 자리는 있지만 안 보임 (overlay)
+- 부모 `:hover` 또는 `:focus-within`: thumb에 `--border-strong` 페이드 인
+- thumb `:hover`: `--fg-muted`로 진해짐
+- 두께: `--scrollbar-size` 토큰 (Density 축 영향 없음, 고정)
+- macOS 방식(사용 중일 때만 얇게 노출) — Notion/Linear/Figma 스타일
+
+### 스크롤 페이드 (edge fade mask)
+
+스크롤로 잘려나가는 콘텐츠 경계를 부드럽게 처리. 사용자에게 "더 있음"을 암시하면서 카드 벽에 텍스트가 딱 붙는 느낌을 없앤다.
+
+- 세로 스크롤 컨테이너: `class="scroll-fade-y"` 부착 (상하단 페이드)
+- 가로 스크롤 컨테이너: `class="scroll-fade-x"` 부착 (좌우 페이드)
+- 크기 토큰: `--scroll-fade-size` (기본 `--space-4`)
+- 구현: `mask-image` linear-gradient. 컨테이너 안 콘텐츠 전체가 마스킹되므로 스크롤 페이드는 **실제 스크롤이 있는 컨테이너에만** 부착. 스크롤 없는 곳에 붙이면 가장자리 요소(아이콘·버튼)가 흐릿하게 잘려 보임.
+
+**Do**: 세로 스크롤 리스트, 가로 스크롤 테이블/탭, 채팅 메시지 리스트 등 스크롤이 상수인 자리에 클래스 명시적 부착.
+
+**Don't**: 스크롤 유무가 유동적인 컨테이너에 blanket 적용. 콘텐츠가 짧을 때는 마스크만 남고 실제 페이드 효과 없이 가장자리가 흐릿함.
+
+### 예시 (CSS 스케치)
+
+```css
+.list {           /* 바깥 스크롤 컨테이너 */
+  overflow-y: auto;
+  max-height: calc(var(--control-h-md) * 8);
+  /* padding 금지 */
+}
+
+.listTrack {      /* 안쪽 items 래퍼 */
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+  padding: var(--space-2);
+}
+```