@conscience-technology/ctds 0.4.0 → 0.4.2

package/assets/prompts/recipes/page-banner.md

@@ -0,0 +1,121 @@
+# Page Banner
+
+### 원칙
+페이지 폭에 걸치는 **안내 바**. 공유 상태·만료 안내·시스템 공지·권한 경고 등 "이 페이지 전체에 적용되는 메타 상태"를 알린다. Callout과 다름 — Callout은 사이드바·리스트 끝의 **국소** 블록, Banner는 페이지 **상단/하단**의 전면 바.
+
+관찰: 유저 페이지에서 ①상단 "공유 열람 10.20 만료" ②중간 "`</>` 자동 처리 안내" ③하단 "열람 권한 접속" 셋 다 Banner 성격인데 서로 다른 스타일로 조립됐다 — 이 레시피가 그 셋을 하나의 리듬으로 묶는다.
+
+### Anatomy
+한 줄 row.
+
+```
+[leading icon] [text (1~2줄)] [...spacer...] [action/dismiss]
+```
+
+- leading icon: 20px, [[components/icon]]
+- text: `flex: 1 1 auto`, 1~2줄, `line-height: 1.4`
+- action: [[components/button]] `variant="ghost"` 또는 간단한 link. **banner에서 primary 금지** — primary 액션이 필요하면 banner가 아니라 modal/dialog
+- dismiss: [[components/icon-button]] `ghost` + close 아이콘 (옵션)
+
+**padding:**
+- 단일라인 (title만, 또는 1줄 메시지): 상하 `space-2`, 좌우 `space-3`
+- 멀티라인 (title + sub, 또는 메타 라인 포함): 상하 `space-3`, 좌우 `space-4`
+- 하단 조용한 안내: `data-size="sm"`로 다운스케일 — 상하 `space-2`, 좌우 `space-3`
+
+**radius:** `var(--radius-md)` (단, 페이지 full-bleed로 쓰면 radius 0).
+
+**gap:**
+- leading↔text: 단일라인 `space-2`, 멀티라인 `space-3`
+- text↔action: `space-3`
+- banner.text 내부 title↔sub: `space-1` (space-0.5는 너무 타이트 — 두 줄이 녹아보임)
+
+**leading icon 수직 정렬:** 멀티라인일 때 `align-self: flex-start` + `margin-top: space-0.5` — 센터 정렬이면 title보다 아이콘이 내려가 보임.
+
+### Tone 체계
+Banner는 톤 3종만 지원 — Callout과 통일.
+
+| Tone | 자리 | 색 조합 |
+|---|---|---|
+| `info` | 상태 공지 (만료, 공유 모드) | `background: var(--bg-subtle)` + border 없음 |
+| `warning` | 주의 (권한 제한, 임시 상태) | `background: var(--bg-warning-subtle)` + border 없음 |
+| `critical` | 위험 (만료 임박, 오류) | `background: var(--bg-critical-subtle)` + border 없음 |
+
+### Do
+- leading icon은 tone에 맞춤 — info=`info`/`share-network`, warning=`warning-circle`, critical=`warning`. **아이콘 이름은 `web/components/Icon/Icon.tsx` 레지스트리에서 확인**
+- 텍스트는 **1문장 명제 + (옵션) 부가 1문장** — 길어지면 banner가 아니라 Callout이나 dedicated page
+- 액션 라벨은 **동사**로 짧게 ("공유 열람 종료", "자세히")
+- 상단 banner면 Page Header 위에 둠. 블록 아래 gap: `space-4`
+- 하단 banner면 섹션들 다 끝난 뒤, `space-6` 간격
+
+### Don't
+- [HARD] **배경 + 테두리 동시 사용 금지** ([[PRINCIPLES]] §5b). Banner는 **배경 톤만**, border는 transparent
+- [HARD] primary 버튼 금지 — banner는 "알림" 자리, 주 액션은 다른 곳
+- [HARD] banner 안에 chip·Badge 섞지 않는다 — 톤이 겹쳐 시끄러워짐. 상태 분류가 필요하면 Banner tone을 바꾼다
+- [HARD] 아이콘 인라인 `<svg>` 금지 — [[components/icon]] 경유
+- [SOFT] banner 3개 이상 동시에 쌓지 않는다. 2개 이상이 쌓이면 "뭐가 중요한지" 판독 불가. 정보가 많으면 하나의 banner + "자세히" 액션으로
+
+### Fallback
+- action 없으면 그 자리 생략, text가 끝까지 참
+- dismiss만 있고 action 없으면 dismiss는 trailing 우측 끝
+
+### 조립 예시
+```tsx
+{/* info: 공유 열람 상태 */}
+<aside className="page-banner" data-tone="info">
+  <Icon name="share-network" size={20} className="leading" />
+  <div className="text">
+    <strong>Kailey Kim님 프로젝트 공유 열람</strong>
+    <span className="sub">
+      조회 전용
+      <span className="sep" aria-hidden="true" />
+      10월 20일 오후 9시 53분 만료
+      <span className="sep" aria-hidden="true" />
+      Kailey 프로젝트 전체 공유
+    </span>
+  </div>
+  <Button variant="ghost" size="sm">공유 열람 종료</Button>
+</aside>
+```
+
+```css
+/* 테두리 선언 없이 배경만 — bg+stroke 조합 금지 ([[PRINCIPLES]] §5b) */
+.page-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+}
+.page-banner[data-size="sm"] {
+  padding: var(--space-2) var(--space-3);
+  gap: var(--space-2);
+}
+.page-banner[data-tone="info"]     { background: var(--bg-subtle); }
+.page-banner[data-tone="warning"]  { background: var(--bg-warning-subtle); }
+.page-banner[data-tone="critical"] { background: var(--bg-critical-subtle); }
+
+.page-banner .leading {
+  color: var(--fg-muted);
+  flex: 0 0 auto;
+  align-self: flex-start;
+  margin-top: var(--space-0\.5);
+}
+.page-banner .text {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  line-height: 1.4;
+}
+.page-banner .text .sub {
+  font-size: var(--text-sm);
+  color: var(--fg-muted);
+}
+```
+
+### 관련
+- [[components/callout]] — 국소 안내 블록 (사이드바·리스트 끝). Banner와 자리가 다름
+- [[components/button]] — ghost 액션
+- [[components/icon-button]] — dismiss
+- [[tokens/color]] — bg-subtle, bg-warning-subtle, bg-critical-subtle
+- [[PRINCIPLES]] §5b — 배경 또는 테두리

package/assets/prompts/recipes/page-header.md

@@ -0,0 +1,93 @@
+# Page Header
+
+### 원칙
+페이지 바디 최상단에 쓰는 **"이 페이지가 뭘 하는 곳인가"** 블록. Topbar가 shell chrome(ID·전역 action)을 담는다면, Page Header는 **콘텐츠 레이어의 첫 블록**이다. [[components/topbar]]가 명시한 "큰 타이틀은 body 첫 블록 자리"를 받는 자리.
+
+### Anatomy
+3개 요소가 수직으로 쌓인다. (옵션 요소는 생략 가능)
+
+```
+[eyebrow]            ← 옵션: 상위 맥락 (breadcrumb·카테고리) — xs/muted
+[h1 title] [actions] ← 필수: 큰 타이틀 + 우측 액션 (옵션)
+[description]        ← 옵션: 1~2줄 서브텍스트, muted
+```
+
+- eyebrow와 title 사이: `space-1`
+- title과 description 사이: `space-2`
+- 블록 전체 아래 (다음 섹션까지): `space-6` (앱 리듬) / `space-10` (랜딩 리듬)
+- actions는 title과 같은 row — `align-items: center`, `flex: 1 1 auto` title / `flex: 0 0 auto` actions
+
+### Do
+- h1: `text-4xl` (랜딩) / `text-3xl` (앱), **`font-medium` 또는 그 이하** ([[tokens/typography]] font weight cap)
+- h1에 **반드시 `line-height: var(--lh-tight)`** 명시 ([[tokens/spacing]] "텍스트 gap·line-height")
+- description: `text-base` / `color: var(--fg-muted)` / `max-width: 60ch`
+- actions는 [[components/_variants]] 액션 매핑에 따름 — 중요=`primary`, 서브=`outline`
+- 액션 2개 이상이면 서로 간 gap은 `space-1` 고정 ([[tokens/spacing]])
+
+### Don't
+- [HARD] h1 아래 `margin-bottom`을 자식(h1)이 걸고 **동시에** 부모 wrapper도 gap을 걸지 않는다 — 이중 여백 ([[tokens/spacing]] Don't)
+- [HARD] h1을 `font-semibold`/`font-bold`로 쓰지 않는다 — [[tokens/typography]] font weight cap
+- [HARD] uppercase + letter-spacing 조합 금지 — 메모리 [no-uppercase]
+- [SOFT] eyebrow 없이 breadcrumb만 Topbar leading에 두는 패턴은 피한다 — 페이지 식별이 shell로 샌다. Topbar leading에는 workspace/section만, 페이지 이름은 body로
+
+### Fallback
+서브텍스트가 애매하면 생략. 설명이 1줄 미만이면 쓰지 않는다. actions도 없으면 h1 단독으로.
+
+### 조립 예시
+```tsx
+<header className="page-header">
+  {/* eyebrow 옵션 */}
+  <div className="eyebrow">프로젝트</div>
+  <div className="title-row">
+    <h1>개발 계획·실행</h1>
+    <div className="actions">
+      <Button variant="outline" size="md">가져오기</Button>
+      <Button variant="primary" size="md">새 계획</Button>
+    </div>
+  </div>
+  <p className="description">
+    확정본을 선택해 개발 계획을 요청하고, 계획과 작업 범위를 승인한 뒤 실행하세요.
+  </p>
+</header>
+```
+
+```css
+.page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1); /* eyebrow→title */
+  margin-bottom: var(--space-6);
+}
+.page-header .title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.page-header h1 {
+  flex: 1 1 auto;
+  font-size: var(--text-3xl);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-tight);
+}
+.page-header .actions {
+  display: flex;
+  gap: var(--space-1);
+  flex: 0 0 auto;
+}
+.page-header .description {
+  color: var(--fg-muted);
+  margin-top: var(--space-1); /* title→description은 더 가깝게 */
+  max-width: 60ch;
+}
+.page-header .eyebrow {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+}
+```
+
+### 관련
+- [[recipes/section-header]] — 하위 섹션의 유사 패턴
+- [[components/topbar]] — shell 쪽. "큰 타이틀은 body 첫 블록 자리" 지침의 수신처
+- [[components/breadcrumb]] — eyebrow 자리에 쓸 수 있는 vendor
+- [[tokens/spacing]] — 블록 아래 리듬 선택
+- [[tokens/typography]] — font weight cap, lh-tight

package/assets/prompts/recipes/section-header.md

@@ -0,0 +1,90 @@
+# Section Header
+
+### 원칙
+페이지 바디 안의 **섹션 경계**를 알리는 중간 블록. Page Header보다 작고 조용하다. 섹션이 반복될 때 **같은 리듬·같은 위계**로 등장해야 페이지가 흩어지지 않는다.
+
+### Anatomy
+한 줄 row + (옵션) 설명.
+
+```
+[h2 title] [count] [actions]   ← 필수: h2, 옵션: count badge / 우측 액션
+[description]                   ← 옵션: 1줄 설명 (muted)
+```
+
+- title과 count: `space-2` (한 줄 안)
+- title row와 description: `space-1`
+- 섹션 header와 body(리스트/카드 등) 사이: `space-3`. **body 내부 아이템끼리 gap(space-1)보다 반드시 한 단계 더 넓어야** 위계 성립. 둘이 같으면 "타이틀과 아이템이 같은 레벨"로 뭉쳐 보임
+- 섹션끼리는 **반복되는 작업 단위**면 `space-20`(80px), 섹션 내부 블록 묶음이면 `space-6` ([[ASSEMBLY]] §2a 갭 가이드)
+
+### Do
+- h2: **`text-lg` 기본**, 랜딩 리듬이면 `text-xl` 까지. **`font-medium`** ([[tokens/typography]] "섹션 h2/h3는 semibold 금지"). text-xl 이상은 "크고 얇은" 함정에 빠지기 쉬움 — 콘솔 리듬에서는 피함
+- count badge: [[components/badge]] `soft` variant, title 바로 오른쪽
+- actions는 title row 끝에 — `flex: 0 0 auto`
+- actions 중 가장 흔한 "새로고침·더보기"는 [[components/icon-button]] `ghost` 또는 `outline`
+- 액션이 2개 이상이면 서로 간 gap `space-1`
+
+### Don't
+- [HARD] `<section>` 태그를 쓰지 않는다 — AppShell의 `.content section`이 `padding-top: space-20`(80px)을 꽂아 "섹션 머리에 거대한 여백" 함정 발생. `<div>`로 짠다 ([[feedback-no-semantic-tags-in-components]])
+- [HARD] h2를 `font-semibold`/`font-bold`로 쓰지 않는다 — [[tokens/typography]] font weight cap
+- [HARD] h2 아래에 `border-bottom`을 깔지 않는다. 섹션 분리는 **gap**이 담당. 선 + 공간은 이중 분리
+- [HARD] 섹션끼리 `space-6` 이상 gap으로 분리하지 않는다 — 각 섹션이 border/배경으로 분리돼 있으면 과한 공간은 "구조가 끊긴" 결과 ([[tokens/spacing]] Don't)
+- [SOFT] title row에 액션이 **3개 이상**이면 Toolbar를 쓴다. 액션이 많으면 섹션이 아니라 toolbar가 맞음
+
+### Fallback
+설명이 애매하면 생략. actions도 없으면 h2 단독으로. count badge는 숫자가 **의미 있을 때만**(총 몇 개인지 알아야 하는 리스트 등) — 장식용 금지.
+
+### 조립 예시
+```tsx
+<div>
+  <header className="section-header">
+    <div className="title-row">
+      <h2>작업 계획</h2>
+      <Badge variant="soft">4</Badge>
+      <div className="actions">
+        <IconButton icon={<Icon name="arrow-clockwise" />} variant="ghost" aria-label="새로고침" />
+      </div>
+    </div>
+    <p className="description">
+      요청한 계획을 검토하고 승인하세요.
+    </p>
+  </header>
+  <div className="section-body">
+    {/* 섹션 바디 */}
+  </div>
+</div>
+```
+
+```css
+.section-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-3);
+}
+.section-header .title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.section-header h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-tight);
+}
+.section-header .actions {
+  display: flex;
+  gap: var(--space-1);
+  margin-left: auto;
+}
+.section-header .description {
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+}
+```
+
+### 관련
+- [[recipes/page-header]] — 상위 블록. 위계상 h1 → h2
+- [[components/badge]] — count badge
+- [[components/icon-button]] — 섹션 액션
+- [[tokens/spacing]] — 섹션 간 gap
+- [[tokens/typography]] — font weight cap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
   "sideEffects": [