@conscience-technology/ctds 0.4.4 → 0.4.6

package/assets/prompts/components/tab-strip.md

@@ -0,0 +1,157 @@
+# TabStrip
+
+### 원칙
+브라우저·에디터·디자인툴 상단에 늘어선 **"열려있는 문서/파일 탭"** 전용 컴포넌트. 각 탭은 **독립 문서·독립 라우트**를 가리킨다 — Chrome의 창 탭, Figma의 파일 탭, VSCode의 에디터 탭이 전부 같은 자리. 이름은 Chromium/VSCode/Telerik이 공통으로 쓰는 업계 표준어 `TabStrip`.
+
+[[components/tabs]]와 역할이 **완전히 다르다**. Tabs는 "같은 화면 안 섹션 전환"(URL `?tab=activity`), TabStrip은 "열린 N개 중 하나 선택"(각 탭 = 라우트). 섞어 쓰지 말 것 — 한 화면에 TabStrip이 있고 그 아래 Tabs가 있는 건 OK (브라우저 탭 밑에 설정 섹션 탭 있는 꼴).
+
+활성 표시는 **pill·underline이 아니라 bg-muted 배경 상시 유지** — hover 색(bg-muted)이 활성 탭에서 lock된 꼴. "hover되는 자리가 현재 자리"라는 직관.
+
+### 발동 트리거 — 다중 탭 UI를 원할 때
+사용자가 **"브라우저처럼 탭 열기"**, **"노션처럼 다중 탭"**, **"Figma/VSCode처럼 파일 탭"**, **"Chrome 탭 UI"**, **"탭으로 여러 문서/페이지 열기"** 등을 요구하면 **TabStrip이 정답**. 수제 조립·`<Tabs>` 전용화 하지 말 것. 신호 체크:
+- 사용자가 **"열어두기"**·**"탭 추가"**·**"X 버튼으로 닫기"** 언급 → TabStrip (각 탭 = 열린 문서)
+- 사용자가 **"섹션 전환"**·**"뷰 바꾸기"**·**"필터 토글"** 언급 → [[components/tabs]] (한 화면 안 뷰 전환)
+- 둘 다 필요하면 **TabStrip(상단, 문서 탭) → PageHeader → Tabs(그 안 섹션)** 순으로 중첩. 한 화면에 TabStrip도 되고 Tabs도 되는 자리면 **TabStrip이 바깥**.
+
+소비처 세팅은 보통 **라우팅 상태 + 열린 문서 배열**:
+```tsx
+const [docs, setDocs] = useState<Doc[]>(openDocs);
+const [activeId, setActiveId] = useState<string>(openDocs[0].id);
+// closeDoc, addDoc 핸들러는 소비처가 관리 (TabStrip은 상태 안 가짐).
+```
+
+### Do
+- **각 탭 = 독립 문서/라우트**. 라우팅이나 외부 상태 저장소에 반영 (`?doc=portfolio` 또는 workspace store).
+- **leadingIcon에 자유롭게** — [[components/icon]], `<img>`(파일 썸네일), `<svg>`(브랜드 로고) 전부 ReactNode로 받는다. Figma 파일 탭의 작은 썸네일, VSCode 파일 아이콘 패턴.
+- **닫기는 `closable` prop으로**. x 버튼은 `absolute`로 오른쪽에 띄워 **왼쪽에서 bg-muted 그라데이션으로 라벨 위를 덮으며 등장** — Chrome 긴 탭 패턴. **hover 시에만** fade-in (활성 탭도 hover 아니면 숨김) — 평상시 시각 노이즈 최소화.
+- **긴 라벨은 hover 시 marquee loop** — 라벨이 overflow되면 짧은 지연 후 왼쪽으로 **전광판처럼 끊김 없이** 흐른다 (텍스트 복제본이 뒤를 이어받음). ResizeObserver로 overflow 감지, 짧은 라벨은 자동으로 안 움직임. `prefers-reduced-motion`에선 비활성.
+- **trailing slot은 자유 조립**. `trailing` prop에 ReactNode를 넣으면 탭 묶음 오른쪽에 자리잡음 — `<IconButton icon={<Icon name="plus" />} />` (새 탭), `<IconButton icon={<Icon name="dots-three" />} />` (더보기), 또는 아무것도 안 넣기. TabStrip hover·focus-within 시에만 fade-in.
+- **자리 중립** — Topbar 바로 아래 2번째 줄에 flush로 두거나, Topbar의 center slot에 넣는다. 소비처가 자리를 결정.
+- **키보드**: ← → Home End 지원. Enter/Space로 선택. 활성 탭만 `tabIndex=0` (roving).
+- **라벨은 1줄 cap** — `max-width: 20ch`(md), `16ch`(sm)에서 ellipsis. 문서명이 길면 Tooltip으로 보완.
+
+### Don't
+- **섹션 전환**에 TabStrip 쓰지 말 것 — 그건 [[components/tabs]] underline/segmented/text. 역할 뒤집으면 "탭 안에 탭" 혼동.
+- **활성 색을 `--primary`로 덮지 않는다** — 활성은 `--fg-strong` + `--bg-muted` 무채. 브랜드 컬러는 CTA와 위계가 충돌 ([[components/tabs]]와 동일 원칙).
+- **라벨 가로 폭을 숫자(px)로 고정 금지** — 폰트 축이 바뀌면 깨짐. `ch` 단위 사용.
+- **x 아이콘을 상시 노출하지 말 것** — 시각 노이즈. hover·active에만, 활성 탭은 늘 보이는 게 맞다.
+- **`<svg>` 인라인 금지** — leadingIcon은 Icon·이미지·브랜드 svg는 OK지만 "아이콘용 raw svg"는 [[feedback_no_inline_svg]].
+- **trailing에 생짜 `<button>` 넣지 말 것** — Button·IconButton·DropdownMenu 트리거 등 CTDS 컴포넌트 경유. 자리별 간격·디바이더는 wrapper가 담당하니 소비처는 버튼만 넘김.
+- **탭 사이에 가운뎃점·대시 구분자 금지** — [[feedback_no_bullet_separator]]. 탭 자체가 구분된 블록.
+
+### Fallback
+자리 애매하면 **Topbar 아래 2번째 줄**(shell 2단), size 애매하면 **md** (shell chrome에서도 sm보다 md가 안정적 — Topbar와 같은 리듬).
+
+### 관련
+- [[components/tabs]] — 역할 분리. Tabs=섹션 전환, TabStrip=문서 전환
+- [[components/topbar]] — TabStrip이 가장 자주 조립되는 shell. 아래 줄 또는 center slot
+- [[components/icon]] · [[components/file-icon]] — leadingIcon 자리 (파일 타입 썸네일로 FileIcon 자주 조합)
+- [[components/tooltip]] — 라벨이 ellipsis될 때 전체 문서명 노출
+- [[axes/density]] — `--control-h-*`가 탭 높이에 매핑
+- [[axes/shape]] — 탭 radius가 Shape 축에 반응
+- [[axes/motion]] — hover·active 전환 duration
+- [[tokens/color]] — `--bg-muted`(활성·hover 배경), `--fg-muted` → `--fg-strong` 대비
+
+### Props 시그니처
+```tsx
+<TabStrip
+  variant="ghost | soft | segmented"  // default: ghost
+  size="sm | md"                      // default: md
+  value={string}                      // controlled
+  defaultValue={string}               // uncontrolled 초기값
+  onValueChange={(v) => void}
+  trailing={<ReactNode>}              // 오른쪽 slot. IconButton·DropdownMenu 등 자유 조립
+>
+  <TabStrip.Tab
+    value="revana"
+    leadingIcon={<Icon name="file-text" />}
+    closable
+    onClose={() => removeTab("revana")}
+    closeLabel="탭 닫기"
+  >
+    Revana (copy 2)
+  </TabStrip.Tab>
+  <TabStrip.Tab
+    value="portfolio"
+    leadingIcon={<img src="/figma.svg" alt="" />}
+    closable
+    onClose={() => removeTab("portfolio")}
+  >
+    Portfolio
+  </TabStrip.Tab>
+</TabStrip>
+```
+
+### 상태 매트릭스
+| 상태 | 배경 | 라벨 색 | leading opacity | x + fade | 라벨 marquee |
+|---|---|---|---|---|---|
+| default (inactive) | transparent | `--fg-muted` | 0.75 | opacity 0 | 정지 |
+| hover (inactive) | `--bg-muted` | `--fg` | 1 | fade-in | 지연 후 loop (오버플로우 시) |
+| active (no hover) | `--bg-muted` 상시 | `--fg-strong` | 1 | opacity 0 | 정지 |
+| active + hover | `--bg-muted` | `--fg-strong` | 1 | fade-in | 지연 후 loop (오버플로우 시) |
+| disabled | transparent | opacity 0.5 | 0.5 | opacity 0 | 정지 |
+| focus-visible | — | — | — | `--ring-shadow` | — |
+
+### Variant 가이드
+| variant | 결 | 언제 |
+|---|---|---|
+| `ghost` (default) | 투명 + hover/active bg | shell chrome 기본. 가장 가벼움. 주변 UI와 조용히 어울림. |
+| `soft` | 모든 탭에 연한 bg 상시, 활성이 조금 더 진함 | 탭이 **독립 블록**으로 보여야 할 때. 선택 자리가 또렷. Button 그룹과 리듬 맞음. |
+| `segmented` | 탭 사이 세로 hairline으로 칸 구분 | 브라우저·에디터의 **문서 탭** 표준. 탭 경계가 또렷하고 전통적. |
+
+### Size 가이드
+| size | 언제 |
+|---|---|
+| `sm` | 밀도 승부처 (사이드바 내부 docked, 좁은 패널) |
+| `md` | 기본. Topbar 아래 shell 2번째 줄 |
+
+### 조합 예시
+
+```tsx
+// Topbar 아래 줄 (Figma·Chrome 패턴)
+<Topbar>
+  <Topbar.Leading><IdentityButton …/></Topbar.Leading>
+  <Topbar.Trailing>…</Topbar.Trailing>
+</Topbar>
+<div className="shell-row-2">
+  <TabStrip
+    value={active}
+    onValueChange={setActive}
+    trailing={
+      <IconButton
+        variant="ghost"
+        icon={<Icon name="plus" />}
+        aria-label="새 문서"
+        onClick={handleNewDoc}
+      />
+    }
+  >
+    {docs.map((d) => (
+      <TabStrip.Tab
+        key={d.id}
+        value={d.id}
+        leadingIcon={<FileIcon ext={d.ext} />}
+        closable
+        onClose={() => closeDoc(d.id)}
+      >
+        {d.title}
+      </TabStrip.Tab>
+    ))}
+  </TabStrip>
+</div>
+```
+
+```tsx
+// Topbar center slot (탭 2~4개로 적을 때)
+<Topbar>
+  <Topbar.Leading><IdentityButton …/></Topbar.Leading>
+  <Topbar.Center>
+    <TabStrip value={view} onValueChange={setView} size="sm">
+      <TabStrip.Tab value="design">Design</TabStrip.Tab>
+      <TabStrip.Tab value="code">Code</TabStrip.Tab>
+      <TabStrip.Tab value="specs">Specs</TabStrip.Tab>
+    </TabStrip>
+  </Topbar.Center>
+  <Topbar.Trailing>…</Topbar.Trailing>
+</Topbar>
+```

package/assets/prompts/components/toolbar.md

@@ -1,14 +1,16 @@
 # Toolbar
 
 ### 원칙
-IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는 "뜨 있는" 알약으로 콘텐츠 위에 떠서 액션을 모으는 자리. 단일 size — toolbar 안의 버튼은 전부 같은 사이즈여야 한다.
+IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는 "뜨 있는" 알약으로 콘텐츠 위에 떠서 액션을 모으는 자리. toolbar 안의 버튼은 전부 같은 사이즈 — Toolbar의 `size` prop이 안쪽 IconButton 히트박스·아이콘을 한 번에 결정.
 
 ### 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.
+- `size="md"`(기본) — 히트박스 32·아이콘 20. 캔버스·에디터 상단 표준 자리.
+- `size="sm"` — 히트박스 24·아이콘 16. 사이드바 바닥·인라인 bar처럼 밀도 승부처.
+- 안쪽 IconButton은 size prop을 넘기지 않는다 — Toolbar가 CSS 변수로 자동 매칭.
 
 ### Don't
 - toolbar 안에 label 긴 Button을 섞지 않는다 — IconButton + Tooltip이 toolbar 패턴. 긴 label이 필요하면 그 자리는 toolbar가 아니라 액션 영역.
@@ -20,6 +22,7 @@ IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는
 ```tsx
 <Toolbar
   variant?="floating | attached"              // default: floating
+  size?="sm | md"                              // default: md (히트박스 32·아이콘 20)
   stretch?={boolean}                           // default: variant로 자동 (attached=true, floating=false)
   role?={string}                               // default: "toolbar"
 >

package/assets/skills/ctds-page/SKILL.md

@@ -33,6 +33,8 @@ description: CTDS 페이지·대시보드·레이아웃을 조합할 때 발동.
 | 메타 라벨 가로 나열 | `prompts/recipes/meta-line.md` |
 | 폼·모달 하단 액션 | `prompts/recipes/form-footer.md` |
 | 페이지 폭 안내 바 | `prompts/recipes/page-banner.md` |
+| 다중 탭 UI (브라우저·노션·Figma·VSCode식, 각 탭 = 열린 문서/라우트, 추가·닫기) | `prompts/components/tab-strip.md` — Tabs 아님 |
+| 섹션/뷰 전환 탭 (한 화면 안에서 뷰만 토글, URL `?tab=…`) | `prompts/components/tabs.md` — TabStrip 아님 |
 | 리스트 | `prompts/components/list-item.md` |
 | 테이블 | `prompts/components/{table-row,table-row-edit,table-row-select,table-header}.md` |
 | 폼 | `prompts/components/{form-field,input,select,checkbox,radio,switch}.md` |

package/package.json

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