@conscience-technology/ctds 0.1.14 → 0.2.0

package/assets/components/index.ts

@@ -0,0 +1,77 @@
+/**
+ * CTDS 컴포넌트 루트 배럴.
+ * 소비자는 `import { Button, Modal } from "@/components/ctds/ctds"` 한 줄로 접근.
+ * 각 하위 폴더가 자체 index.ts로 공개 API를 명시한다 — 이 파일은 그것들의 합.
+ *
+ * 유지: 신규 컴포넌트 폴더를 추가하면 아래 한 줄 추가. 알파벳순.
+ */
+
+export * from "./AIMessage";
+export * from "./AppFrame";
+export * from "./AttachmentItem";
+export * from "./AttachmentThumb";
+export * from "./Avatar";
+export * from "./AvatarUpload";
+export * from "./Badge";
+export * from "./Breadcrumb";
+export * from "./Bubble";
+export * from "./Button";
+export * from "./Calendar";
+export * from "./Callout";
+export * from "./ChatInput";
+export * from "./Checkbox";
+export * from "./Chip";
+export * from "./ChoiceCard";
+export * from "./CodeBlock";
+export * from "./ContextMenu";
+export * from "./DatePicker";
+export * from "./Disclosure";
+export * from "./Drawer";
+export * from "./DropdownMenu";
+export * from "./EmptyState";
+export * from "./EventChip";
+export * from "./FileIcon";
+export * from "./FilterButton";
+export * from "./GalleryItem";
+export * from "./GeneratedImage";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./IdentityButton";
+export * from "./Input";
+export * from "./ListItem";
+export * from "./MenuItem";
+export * from "./MessageActions";
+export * from "./MessageQuote";
+export * from "./MessageSources";
+export * from "./MessageState";
+export * from "./MessageTable";
+export * from "./MetricCard";
+export * from "./Modal";
+export * from "./Onboarding";
+export * from "./Pagination";
+export * from "./ProgressBar";
+export * from "./QuotationBar";
+export * from "./Radio";
+export * from "./Select";
+export * from "./SelectableCard";
+export * from "./Shortcut";
+export * from "./Sidebar";
+export * from "./SidebarSplit";
+export * from "./Slider";
+export * from "./Spinner";
+export * from "./SplitButton";
+export * from "./Stepper";
+export * from "./Switch";
+export * from "./TableCell";
+export * from "./TableHeader";
+export * from "./TableRow";
+export * from "./TableRowEdit";
+export * from "./TableRowSelect";
+export * from "./Tabs";
+export * from "./Textarea";
+export * from "./TimePicker";
+export * from "./Toast";
+export * from "./Toolbar";
+export * from "./Tooltip";
+export * from "./Topbar";
+export * from "./UserMessage";

package/assets/components/reset.css

@@ -0,0 +1,63 @@
+/* ============================================================
+   CTDS reset — opt-in global element reset.
+   tokens.css는 CSS 변수만 노출한다. 이 파일은 그 토큰을 소비해
+   body·heading·anchor 같은 네이티브 element에 CTDS 룩을 입히는
+   전역 reset. 소비자 프로젝트에서 CTDS 외 영역이 있으면 이 파일을
+   import하지 말고 섹션 단위로 .ctds-root 유틸 클래스 등을 조립해라.
+
+   의존: tokens.css가 선행 import 돼야 한다.
+   토글: 컴포넌트가 document.body/documentElement에 토글하는 side-effect
+         스타일도 여기 둔다. 각 블록에 "어느 컴포넌트가 토글하는지" 주석.
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--header-h) + var(--space-4));
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+  /* 전역 자간 default — tight(-0.02em). letter-spacing은 상속 property라
+     모든 하위 요소가 기본으로 받고, 필요한 자리만 override. "텍스트 쓰면
+     자간이 자동으로 따라오는" 구조. */
+  letter-spacing: var(--tracking-tight);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  transition: background var(--duration-base) var(--ease-out),
+    color var(--duration-base) var(--ease-out);
+}
+
+a { color: inherit; text-decoration: none; }
+h1, h2, h3, h4 {
+  margin: 0;
+  font-weight: var(--font-weight-medium);
+}
+p { margin: 0; }
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--bg-muted);
+  padding: var(--space-0_5) var(--space-1_5);
+  border-radius: var(--radius-xs);
+  color: var(--fg);
+}
+
+/* ============================================================
+   컴포넌트 전역 side-effect
+   CSS Modules의 :global 로 둘 수 없는, 라이브러리 컴포넌트가 document.body나
+   document.documentElement에 토글하는 클래스/속성에 대한 스타일.
+   토큰 whitelist 아님. 각 항목은 어느 컴포넌트가 설정하는지 명시.
+   ============================================================ */
+
+/* Textarea.tsx — drag resize 중 전역 커서 강제. body.textarea-resizing 클래스 토글. */
+body.textarea-resizing {
+  cursor: ns-resize !important;
+  user-select: none;
+}

package/assets/components/themeBootScript.ts

@@ -0,0 +1,40 @@
+/**
+ * CTDS 테마 blocking boot script.
+ *
+ * Next.js SSR이 HTML을 보내기 전에 <head> 안에서 **동기적으로** 실행돼야 한다.
+ * 하이드레이션 전에 localStorage/prefers-color-scheme을 읽고 <html>에 모든 축
+ * data-* 어트리뷰트를 세팅 → 첫 페인트부터 올바른 모드로 뜸(FOUC 방지).
+ *
+ * 사용:
+ *   <html suppressHydrationWarning>
+ *     <head>
+ *       <script dangerouslySetInnerHTML={{ __html: themeBootScript() }} />
+ *     </head>
+ *     <body><ThemeController>{children}</ThemeController></body>
+ *   </html>
+ *
+ * 데모 앱(web/app/layout.tsx) + ctds-cli init이 패치하는 소비자 layout.tsx
+ * 양쪽이 이 함수 하나를 쓴다. ThemeController와 로직이 drift 나지 않도록 single-source.
+ *
+ * 옵션:
+ *   onboardingPath — 온보딩 라우트는 설정 전 단계라 다크 선호도 무시하고 라이트 고정.
+ *                    기본값 "/onboarding". 소비자가 다른 경로면 넘겨서 교체.
+ */
+export function themeBootScript({ onboardingPath = "/onboarding" }: { onboardingPath?: string } = {}): string {
+  // IIFE. try/catch로 서버 렌더 환경·시크릿 모드·localStorage 접근 실패 전부 흡수.
+  // 축이 늘면 아래 배열에 (storageKey, attrName, default)를 추가.
+  return `(function(){try{
+var ONBOARD=${JSON.stringify(onboardingPath)};
+var isOnboarding=location.pathname===ONBOARD||location.pathname.indexOf(ONBOARD+'/')===0;
+var mode=isOnboarding?'light':(localStorage.getItem('ctds-mode')||(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'));
+document.documentElement.setAttribute('data-mode',mode);
+var axes=[['ctds-palette','data-palette','standard'],['ctds-shape','data-shape','standard'],['ctds-density','data-density','default'],['ctds-motion','data-motion','standard'],['ctds-icon-family','data-icon-family','phosphor'],['ctds-lang','data-lang','ko'],['ctds-focus-ring','data-focus-ring','off'],['ctds-voice','data-voice','neutral']];
+for(var i=0;i<axes.length;i++){var k=axes[i][0],a=axes[i][1],d=axes[i][2];var v=localStorage.getItem(k)||d;document.documentElement.setAttribute(a,v);if(a==='data-lang')document.documentElement.lang=v;}
+try{localStorage.removeItem('ctds-accent');}catch(e){}
+document.documentElement.removeAttribute('data-accent');
+try{localStorage.removeItem('ctds-typography');}catch(e){}
+document.documentElement.removeAttribute('data-typography');
+var hue=localStorage.getItem('ctds-hue');if(hue)document.documentElement.style.setProperty('--hue',hue);
+var ah=localStorage.getItem('ctds-accent-hue');if(ah)document.documentElement.style.setProperty('--secondary-hue',ah);
+}catch(e){}})();`;
+}

package/assets/components/tokens.css

@@ -242,9 +242,11 @@
   --bg-muted:      oklch(0.955 var(--tone-chroma) var(--tone-hue));
   --fg-strong:     oklch(0.12  var(--tone-chroma) var(--tone-hue));
   --fg:            oklch(0.22  var(--tone-chroma) var(--tone-hue));
-  --fg-muted:      oklch(0.50  var(--tone-chroma) var(--tone-hue));
-  --fg-subtle:     oklch(0.68  var(--tone-chroma) var(--tone-hue));
-  --fg-disabled:   oklch(0.80  var(--tone-chroma) var(--tone-hue));
+  /* muted/subtle/disabled은 fg 톤의 알파 — 색 있는 배경 위에서도 자연스럽게 섞임.
+     라이트: 어두운 잉크(≈0.18)를 낮은 알파로 얹음. */
+  --fg-muted:      oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.60);
+  --fg-subtle:     oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.42);
+  --fg-disabled:   oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.26);
   /* border는 배경 대비 알파 기반 hairline — 겹치면 자연스럽게 짙어짐.
      라이트 모드: 어두운 잉크 톤(≈rgb(18,24,38))을 낮은 알파로 얹음. */
   --border:        oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.08);
@@ -577,6 +579,62 @@ html[data-focus-ring="off"] {
   }
 }
 
+/* 접근성 우선 — OS 하이콘트라스트 모드(macOS Increase Contrast, Windows High Contrast)
+   를 쓰는 사용자에겐 border·text 대비를 상향한다. 축 값은 안 건드리고 토큰만 override —
+   컴포넌트 코드는 변경 없이 자동 적용.
+   라이트: alpha 0.08/0.14 → 0.42/0.6, muted fg 0.50 → 0.32.
+   다크:   alpha 0.08/0.16 → 0.50/0.72, muted fg 0.65 → 0.80. */
+@media (prefers-contrast: more) {
+  :root {
+    --border:        oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.42);
+    --border-strong: oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.60);
+    --fg-muted:      oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.82);
+    --fg-subtle:     oklch(0.18 var(--tone-chroma) var(--tone-hue) / 0.66);
+  }
+  :root[data-mode="dark"] {
+    --border:        oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.50);
+    --border-strong: oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.72);
+    --fg-muted:      oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.80);
+    --fg-subtle:     oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.60);
+  }
+}
+
+/* 레거시 브라우저 폴백 — oklch/color-mix 미지원 환경(Safari <16.4, Chrome <119,
+   Firefox <113)에서 색상이 검정으로 깨지지 않게 중립 회색 테마로 폴백.
+   Palette·Hue 축은 비활성. 다크/라이트는 각각 색만 뒤집음. */
+@supports not (color: oklch(0 0 0)) {
+  :root {
+    --bg:            #ffffff;
+    --bg-subtle:     #f6f6f6;
+    --bg-muted:      #ececec;
+    --bg-elev-1:     #ffffff;
+    --bg-elev-2:     #ffffff;
+    --fg:            #1a1a1a;
+    --fg-strong:     #0a0a0a;
+    --fg-muted:      #666666;
+    --fg-subtle:     #999999;
+    --fg-disabled:   #c0c0c0;
+    --border:        rgba(0, 0, 0, 0.08);
+    --border-strong: rgba(0, 0, 0, 0.14);
+    --primary:       #1a1a1a;
+  }
+  :root[data-mode="dark"] {
+    --bg:            #0f0f0f;
+    --bg-subtle:     #1a1a1a;
+    --bg-muted:      #262626;
+    --bg-elev-1:     #171717;
+    --bg-elev-2:     #1f1f1f;
+    --fg:            #f0f0f0;
+    --fg-strong:     #ffffff;
+    --fg-muted:      #a0a0a0;
+    --fg-subtle:     #7a7a7a;
+    --fg-disabled:   #4a4a4a;
+    --border:        rgba(255, 255, 255, 0.08);
+    --border-strong: rgba(255, 255, 255, 0.16);
+    --primary:       #f0f0f0;
+  }
+}
+
 /* ── Font 축 — Language ─────────────────────────────────────
    슬롯(--font-normal/code)의 스택을 언어별로 스왑.
    프로젝트마다 여기서 바꾸면 됨. */
@@ -628,9 +686,10 @@ html[data-focus-ring="off"] {
   --bg-muted:      oklch(0.31 var(--tone-chroma) var(--tone-hue));
   --fg-strong:     oklch(1.0   var(--tone-chroma) var(--tone-hue));
   --fg:            oklch(0.95  var(--tone-chroma) var(--tone-hue));
-  --fg-muted:      oklch(0.65  var(--tone-chroma) var(--tone-hue));
-  --fg-subtle:     oklch(0.48  var(--tone-chroma) var(--tone-hue));
-  --fg-disabled:   oklch(0.35  var(--tone-chroma) var(--tone-hue));
+  /* 다크: 밝은 잉크(≈0.95)를 낮은 알파로 얹음. */
+  --fg-muted:      oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.60);
+  --fg-subtle:     oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.40);
+  --fg-disabled:   oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.24);
   /* 다크 모드: fg 톤(밝은 잉크)을 낮은 알파로 얹음. */
   --border:        oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.08);
   --border-strong: oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.16);
@@ -705,57 +764,9 @@ html[data-focus-ring="off"] {
 [data-mode="dark"][data-palette="calm"]     { --status-chroma: 0.17; --status-lightness: 0.70; }
 :root[data-mode="dark"][data-palette="pastel"],
 [data-mode="dark"][data-palette="pastel"]   { --status-chroma: 0.16; --status-lightness: 0.72; }
-
-*, *::before, *::after { box-sizing: border-box; }
-
-html {
-  scroll-behavior: smooth;
-  scroll-padding-top: calc(var(--header-h) + 16px);
-}
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--fg);
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  line-height: var(--lh-base);
-  /* 전역 자간 default — tight(-0.02em). letter-spacing은 상속 property라
-     모든 하위 요소가 기본으로 받고, 필요한 자리만 override. "텍스트 쓰면
-     자간이 자동으로 따라오는" 구조. */
-  letter-spacing: var(--tracking-tight);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  transition: background var(--duration-base) var(--ease-out),
-    color var(--duration-base) var(--ease-out);
-}
-
-a { color: inherit; text-decoration: none; }
-h1, h2, h3, h4 {
-  margin: 0;
-  font-weight: 600;
-}
-p { margin: 0; }
-code {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  background: var(--bg-muted);
-  padding: 2px 6px;
-  border-radius: var(--radius-xs);
-  color: var(--fg);
-}
 /* === AXES END === */
 
-/* ============================================================
-   컴포넌트 전역 side-effect
-   CSS Modules의 :global 로 둘 수 없는, 라이브러리 컴포넌트가 document.body나
-   document.documentElement에 토글하는 클래스/속성에 대한 스타일.
-   토큰 whitelist 아님. 각 항목은 어느 컴포넌트가 설정하는지 명시.
-   ============================================================ */
-
-/* Textarea.tsx — drag resize 중 전역 커서 강제. body.textarea-resizing 클래스 토글. */
-body.textarea-resizing {
-  cursor: ns-resize !important;
-  user-select: none;
-}
+/* 전역 element reset, 폰트, 컴포넌트 side-effect 스타일은 ./reset.css로 분리.
+   tokens.css는 CSS 변수(토큰·축)만 노출한다. 소비자 프로젝트에서 reset을
+   원하면 reset.css를 별도로 import. 데모 앱은 app/globals.css가 import한다. */
 

package/assets/prompts/GUIDE.md

@@ -44,7 +44,7 @@
 - <명령형 규칙>
 
 ### Don't
-- <하드 리젝 사유>
+- <하드 리젝 사유. 강도가 애매하면 bullet 앞에 `[HARD]` 또는 `[SOFT]` 명시 — PRINCIPLES §4a 참고>
 
 ### Fallback
 <규칙이 애매할 때의 기본값. 없으면 "규칙대로 판단 불가한 경우 사용자에게 확인".>

package/assets/prompts/PRINCIPLES.md

@@ -58,6 +58,15 @@ CTDS는 9개 축(Mode, Palette, Hue, Shape, Icon, Density, Motion, Font, Voice)
 - 사용자 지시가 접근성이나 PRINCIPLES를 어기려 할 땐 따르지 않고 사용자에게 확인 (§8 참고)
 - 같은 계층 내 충돌은 §8에 따라 사용자에게 확인
 
+### 4a. Don't 강도 레벨 (선택)
+
+컴포넌트 `Don't` 블록 안에서 **강도 레벨**을 선택적으로 명시할 수 있다. 신규 Don't를 쓰거나 기존 Don't를 수정할 때 애매하면 아래 둘 중 하나를 bullet 맨 앞에 붙인다 — 명시가 없으면 "SOFT 수준으로 해석"이 기본 (사용자 지시로 깨도 됨).
+
+- `[HARD]` — 어기면 CTDS 보증 밖. 사용자 지시가 요청해도 §8에 따라 **먼저 확인한다**. 예: "primary 2개 금지", "하드코딩 금지", "접근성 라벨 생략 금지".
+- `[SOFT]` — 밀도·톤·관행 유지용. 사용자가 특별한 이유로 요청하면 따를 수 있고, 추후 되돌리기 쉬움. 예: "section 사이 gap은 space-6 선호".
+
+레벨은 Don't에만 쓴다 (Do는 긍정형이라 레벨 불필요). AI는 신규 Don't 작성 시 **HARD인지 SOFT인지 애매하면 사용자에게 확인**하고 결정 — 임의로 HARD 안 붙임.
+
 ---
 
 ## 5. 접근성이 축보다 우선한다

package/assets/prompts/axes/cascade.md

@@ -0,0 +1,49 @@
+# Cascade
+
+### 원칙
+축은 `html` 또는 중간 컨테이너에 `data-*` 어트리뷰트로 선언되고, CSS 변수가
+서브트리로 상속되는 방식으로 동작한다. 축 하나(예: Mode)만 뒤집으면 다른 축
+(Palette·Shape·Density·Motion·Icon·Lang·Focus·Voice)은 **부모 값을 그대로 상속**한다.
+
+### Do
+- 국소 스코프 바꾸기는 `data-mode="dark"` 처럼 **바꾸는 축 하나만** 자식 컨테이너에 선언한다. 나머지는 자동 상속.
+- 자식 영역의 축 변경이 손주까지 전파되길 원할 때는 **아무 것도 안 한다** — CSS 변수 상속이 공짜로 처리한다.
+- 변경한 축에 영향받는 토큰 셋만 바뀐다는 사실을 명시적으로 활용 (예: 다크 카드 안에서도 Shape는 그대로).
+- 디버깅할 땐 DevTools에서 `html` 또는 중간 컨테이너의 `data-*` 값을 눈으로 확인하는 걸 1순위로.
+
+### Don't
+- 자식 컨테이너에 쓸모없는 전체 축 셋을 다시 선언하지 않는다. 예: `<div data-mode="dark" data-palette="standard" data-shape="standard" ...>` → `<div data-mode="dark">` 로 충분.
+- 자식 컨테이너에서 CSS 변수를 **직접** 재선언하지 않는다 (예: `style={{ "--bg": "..." }}`). 토큰 whitelist 바깥의 값을 섞으면 축 스왑이 깨짐. 축으로 못 표현하는 색은 축에 값을 추가하거나 테마 프리셋 레벨에서 해결.
+- 축 중 하나가 "값이 없을 때 자동 폴백" 되지 않는다고 가정하지 않는다 — 모든 축은 `:root`에 기본값이 선언돼 있고 자식은 명시적으로 override 할 때만 바뀜.
+
+### 선언이 두 번이면 가까운 쪽이 이긴다
+```tsx
+<html data-mode="light">          {/* L1 */}
+  <main data-mode="dark">         {/* L2: light 뒤집음 */}
+    <aside data-mode="light">     {/* L3: 다시 light */}
+      {/* 여기서 --bg, --fg는 L3 light. --shape는 L1 standard 그대로. */}
+    </aside>
+  </main>
+</html>
+```
+
+### 축별 "국소 스코프" 적용 가능성
+| 축 | 국소 override | 대표 쓰임 |
+|---|---|---|
+| Mode | ✅ 흔함 | 이미지 오버레이, 어두운 카드, 다크 툴바 |
+| Palette | ⚠️ 드물게 | 브랜드 섹션에 vivid 강조 (주의: 전체 톤 깨짐) |
+| Shape | ⚠️ 드물게 | 이벤트 배너에만 soft 둥글기 |
+| Density | ✅ 자주 | 대시보드 안 compact 테이블 vs 외곽 default 패널 |
+| Motion | ⚠️ 거의 안 함 | 접근성용 `none` 국소 적용 외엔 금지 |
+| Icon | ⚠️ 거의 안 함 | A/B 테스트용 |
+| Lang | ✅ 자주 | 다국어 혼재 페이지 (한국어 본문 + 영문 코드 블록) |
+| Focus | ✅ 가끔 | 키보드 네비게이션 섹션만 ring on |
+| Voice | ⚠️ 드물게 | 공식·캐주얼 영역이 섞인 UI |
+
+### 디버깅
+- `html` 요소에 전체 축 셋이 다 보이는지 DevTools로 체크. ThemeController가 마운트되지 않으면 축 어트리뷰트가 비어있을 수 있음 — boot script(themeBootScript)가 `<head>`에 inline으로 들어가 있어야 FOUC 없이 뜬다.
+- 자식 영역이 축을 상속받지 못한 것 같으면: (1) 중간에 `data-*` 재선언이 있는지, (2) iframe·portal로 넘어가 조상 체인이 끊긴 건 아닌지 확인.
+
+### 관련
+- 데모 앱 wiring: [web/app/layout.tsx](/web/app/layout.tsx) + [web/components/ThemeController.tsx](/web/components/ThemeController.tsx) + [web/components/themeBootScript.ts](/web/components/themeBootScript.ts)
+- 각 축의 값·기본값·국소 스코프 디테일: [mode.md](mode.md) · [palette.md](palette.md) · [shape.md](shape.md) · [density.md](density.md) · [motion.md](motion.md) · [icon.md](icon.md)

package/assets/prompts/axes/mode.md

@@ -18,7 +18,9 @@
 ### 값
 - `light` — 밝은 배경, 어두운 텍스트. 일반 웹 UI 기본.
 - `dark` — 어두운 배경, 밝은 텍스트. 야간·장시간 응시·대시보드.
-- `high-contrast` — 접근성 강화 대비. KWCAG/WCAG AAA 대응. (미구현, 로드맵)
+
+### 접근성 — 하이콘트라스트
+OS 하이콘트라스트 모드(macOS Increase Contrast · Windows High Contrast)를 켠 사용자는 `@media (prefers-contrast: more)`로 자동 처리 — border alpha + muted fg를 상향해 WCAG AA 선을 넘긴다. 축 값이 아니라 토큰 override라, 컴포넌트는 변경 없이 자동 적용. 테스트: Chrome DevTools "Emulate CSS prefers-contrast: more" 또는 OS 설정 토글.
 
 ### 기본값
 `light`

package/assets/prompts/components/_variants.md

@@ -0,0 +1,84 @@
+# Variants
+
+### 원칙
+컴포넌트마다 variant 이름이 역사적으로 조금씩 다르다 (Button `primary` ≈ Badge `solid` ≈ Input `filled`). 이 문서는 **역할 축**과 **컴포넌트 축**을 교차해, 지금 자리에 들어가야 할 variant 이름이 뭔지 매번 확인하지 않고 결정할 수 있게 하는 매핑표다.
+
+이 표는 **기존 이름을 바꾸지 않는다**. 각 컴포넌트의 variant 이름은 그대로 유지된다 (breaking change 금지). 대신 "같은 역할"이 컴포넌트마다 뭐라 불리는지 보여줘, AI 에이전트·사람이 일관되게 매핑하도록 돕는다.
+
+### 역할 축
+- **Primary** — 화면의 주 액션. 한 화면에 1개 원칙.
+- **Secondary** — 보조 액션. 폼의 "취소", 모달의 "닫기".
+- **Tertiary / Quiet** — 조용한 액션. 테이블 행 action, 아이콘 버튼 default.
+- **Destructive** — 되돌릴 수 없는 액션. 삭제·해제.
+- **Inverse** — 반전된 배경(어두운 섹션의 라이트 버튼) 위.
+
+표면(surface) 축은 별도로 둔다 — Badge·Chip·Callout·Input 같이 액션이 아닌 "표시" 컴포넌트에만 쓴다:
+- **Solid** — 꽉 찬 배경.
+- **Soft** — 연한 배경 + 어두운 텍스트.
+- **Outline** — 투명 배경 + 테두리.
+- **Line** — 아래선 하나 (입력류).
+- **Fill** — 꽉 찬 배경 (알림류).
+- **Plain / Ghost** — 배경·테두리 둘 다 없음.
+
+### 액션 컴포넌트 — 역할 × variant 매핑
+
+| 컴포넌트 | Primary | Secondary | Tertiary | Destructive | Inverse |
+|---|---|---|---|---|---|
+| [Button](button.md) | `primary` | `outline` *(또는 `secondary`)* | `ghost` | `destructive` + `destructive-ghost` | `inverse` |
+| [IconButton](icon-button.md) | — *(강조는 Button 쪽)* | `outline` | `ghost` | `destructive` | — |
+| [SplitButton](split-button.md) | `primary` | `outline` | `ghost` | `destructive` | — |
+| [IdentityButton](identity-button.md) | — | `muted` | `ghost` | — | — |
+
+**선택 규칙 (액션)**
+- 중요 액션=`primary`, 서브 액션=`outline`. 폼·모달·페이지 액션의 기본 쌍. **`secondary`는 레거시, 신규 코드에선 `outline`을 쓴다.** (관련: feedback 메모리 [Button variant defaults](../../memory/feedback_button_variant_defaults.md))
+- 테이블 행·툴바 안 액션은 `ghost`.
+- 삭제·해제는 `destructive`, 삭제가 두 번째 시선이면 `destructive-ghost`.
+- IconButton엔 `primary`가 없다 — "꽉 찬 색의 아이콘 버튼"은 CTDS에서 금지. 강조가 필요하면 label 붙은 Button을 써라.
+
+### 표시 컴포넌트 — 역할 × variant 매핑
+
+| 컴포넌트 | Solid | Soft | Outline | Line | 기타 |
+|---|---|---|---|---|---|
+| [Badge](badge.md) | `solid` | `soft` | — | — | `inverse` |
+| [Chip](chip.md) *(필터 선택값 전용)* | — | `soft` | `outline` | — | — |
+| [Callout](callout.md) *(알림 블록)* | — | — | `outline` | — | `fill` |
+| [MetricCard](metric-card.md) | — | `soft` | — | `line` | `bare` |
+
+**선택 규칙 (표시)**
+- 상태·카테고리 라벨=`Badge solid`(기본) 또는 `soft`(순한 톤). 선택된 필터 값=`Chip`.
+- Chip은 "선택된 값(X로 제거 가능)" 전용. 카테고리·태그·메타 라벨은 **반드시 Badge** (관련: feedback 메모리 [Chip filter-only](../../memory/feedback_chip_filter_only.md)).
+- 알림·안내 박스는 `Callout fill` *(색 테두리+색 배경 금지 — 메모리 [No outlined Callout](../../memory/feedback_no_outlined_callout.md))*.
+
+### 입력 컴포넌트 — 매핑
+
+| 컴포넌트 | Default | 폼 블록 | 밀도 승부처 |
+|---|---|---|---|
+| [Input](input.md) | `line` | `outline` | `filled` |
+| [Textarea](textarea.md) | `line` | `outline` | `filled` |
+| [Select](select.md) | `line` | `outline` | `filled` |
+| [TimePicker](time-picker.md) | `line` | `outline` | `filled` |
+
+**선택 규칙 (입력)**
+- `line`을 먼저 고려. 독립 폼 블록이면 `outline`, 테이블 셀처럼 밀도가 극한이면 `filled` (관련: feedback 메모리 [Input line default](../../memory/feedback_input_line_default.md)).
+
+### 레이아웃·구조 컴포넌트
+"역할" 매핑과 맞지 않는 축을 쓰는 것들. 이름 그대로 사용:
+- [AppFrame](app-frame.md): `outlined` · `floating` · `flat` — 외곽 쉘 톤
+- [Toolbar](toolbar.md): `floating` · `attached` — 위치
+- [Tabs](tabs.md): `underline` · `segmented` · `text` — 시각 패턴
+- [TableHeader](table-header.md): `line` · `plate` — 헤더 톤
+- [Pagination](pagination.md): `numbered` · `compact` · `jump` — 밀도
+- [MessageQuote](message-quote.md): `plain` · `blockquote` — 인용 톤
+- [ListItem](list-item.md): `activity` · `notification` · `mention` · `system` — 내용 종류
+- [Spinner](spinner.md): `ring` · `dots-bounce` · `dots-fade` · `pulse` · `lottie-*` — 애니메이션 종류
+
+### Don't
+- 신규 컴포넌트에 "역할 축"의 네이밍을 쓸 수 있으면 **primary/outline/ghost/destructive**를 그대로 재사용한다. "solid"는 표면 축, "primary"는 역할 축이라는 구분을 유지.
+- 기존 컴포넌트의 variant 이름을 바꾸지 않는다 — 소비자 breaking.
+- 매핑표에 없는 역할을 임의로 추가하지 않는다. 신규 역할이 필요하면 이 문서를 먼저 업데이트.
+
+### 신규 컴포넌트 체크리스트
+1. 액션? → 역할 축 네이밍(`primary`/`outline`/`ghost`/`destructive`)
+2. 표시? → 표면 축 네이밍(`solid`/`soft`/`outline`/`line`/`fill`)
+3. 입력? → `line` 기본 + `outline`/`filled` 선택
+4. 레이아웃? → 자유. 다만 "variant"가 아니라 더 의미 있는 prop 이름(예: `position`, `tone`)을 먼저 검토

package/assets/prompts/components/{attachment-chip.md → attachment-item.md}

@@ -1,7 +1,7 @@
-# Attachment Chip
+# Attachment Item
 
 ### 원칙
-파일 첨부 1건 — `[FileIcon] filename (meta) [actions]`. 폭 400px 고정, 레이아웃은 `size` 하나로 결정. 파일명에서 확장자를 뽑아 [[components/file-icon]] 색/라벨을 자동 결정. `state="loading"`이면 좌측 뱃지를 Spinner(lottie-dots)로 교체. trailing은 콜백 조합(`onRemove`/`onDownload`/`onMore`)으로 노출. 긴 파일명은 **중간 생략 + 끝 확장자 유지**.
+파일 첨부 1건 — `[FileIcon] filename (meta) [actions]`. 폭 400px 고정, 레이아웃은 `size` 하나로 결정. 파일명에서 확장자를 뽑아 [[components/file-icon]] 색/라벨을 자동 결정. `state="loading"`이면 좌측 뱃지를 Spinner(lottie-dots)로 교체. trailing은 콜백 조합(`onRemove`/`onDownload`/`onMore`)으로 노출. 긴 파일명은 **중간 생략 + 끝 확장자 유지**. "Chip"이 아님에 주의 — [[components/chip]]은 필터 선택값 전용.
 
 ### Do
 - 파일명 통째로 넘기면 끝 — `filename="report.pdf"` 하나로 아이콘·라벨·식별까지.
@@ -12,7 +12,7 @@
 - 업로드 중은 `state="loading"` + `meta` 문구 — 좌측이 Spinner(lottie-dots)로 교체. 상태 문구는 소비처 책임.
 - 즉시 액션(미리보기·업로드 재시도 등)은 `meta`에 Button `variant="ghost"` `size="xs"`로 넣는다 — 전역 Button 체계와 합치.
 - trailing은 콜백을 지정한 만큼만 노출. 복수 지정 시 download → more → remove 순으로 배치.
-- Thumb(이미지)·Chip(파일) 섞여 흐를 자리는 `flex-wrap: wrap` + `gap: space-2`로 조립.
+- Thumb(이미지)·Item(파일) 섞여 흐를 자리는 `flex-wrap: wrap` + `gap: space-2`로 조립.
 
 ### Don't
 - 폭을 임의로 바꾸지 않는다 — 전부 `--input-w-lg` (400px) 고정. 소비처가 폭 걱정 없이 세로/wrap만 결정.
@@ -20,8 +20,9 @@
 - trailing에 임의 ReactNode 슬롯을 뚫지 않는다 — 접근성·간격·톤 통일이 깨짐. 정의된 콜백 조합만.
 - trailing을 수제 버튼으로 그리지 않는다 — 반드시 IconButton 재사용 (sm/md → IconButton sm 20, lg → IconButton md 24). IconButton에 없는 치수(28·36 등)는 금지.
 - loading 좌측에 베이스 Spinner variant(pulse·dots-bounce 등)를 쓰지 않는다 — CTDS 로더 톤 통일 위해 `lottie-dots` 고정. [[components/spinner]].
-- 배경을 과한 톤으로 덮지 않는다 — bg는 `var(--bg)`, 테두리는 hairline.
+- 배경을 과한 톤으로 덮지 않는다 — bg는 `var(--bg)`, 테두리는 hairline, drop shadow는 가장 연한 `--shadow-xs`만.
 - meta 라인에 가운뎃점 "·"는 OK — 하지만 `··•·|` 같은 꾸밈 구분자는 금지. [[feedback-no-bullet-separator]].
+- `AttachmentChip`으로 부르지 않는다 — [[components/chip]]은 필터 선택값(X 제거) 전용. 파일 첨부는 Item.
 
 ### Fallback
 size 애매하면 `md`. 모르는 확장자는 FileIcon이 `others`로 폴백하니 그대로 넘겨도 됨.
@@ -31,13 +32,14 @@ size 애매하면 `md`. 모르는 확장자는 FileIcon이 `others`로 폴백하
 - [[components/spinner]] — loading 상태 좌측 (lottie-dots variant)
 - [[components/icon-button]] — trailing 액션 버튼
 - [[components/button]] — meta 안 즉시 액션 (ghost xs)
-- [[components/attachment-thumb]] — 이미지 첨부
+- [[components/attachment-thumb]] — 이미지 첨부 (사촌)
+- [[components/list-item]] — data 그룹 이웃
 - [[components/chat-input]] — 상위 소비처 (size=sm/md)
-- [[components/message-bubble]] — 메시지 내 파일 인용 (size=lg)
+- [[components/user-message]] — 메시지 내 파일 인용 (size=lg)
 
 ### Props 시그니처
 ```tsx
-<AttachmentChip
+<AttachmentItem
   filename={string}                       // 필수. 확장자 자동 추출
   size="sm | md | lg"                     // default: md. lg는 2줄 큰 카드
   state="idle | loading"                  // default: idle. loading이면 좌측이 Spinner
@@ -50,7 +52,7 @@ size 애매하면 `md`. 모르는 확장자는 FileIcon이 `others`로 폴백하
 
 ### 비율·레이아웃
 - 폭: 전부 `--input-w-lg` (400px) 고정.
-- 외곽: `--hairline` 1px border, `var(--border)` 색.
+- 외곽: `--hairline` 1px border, `var(--border)` 색. drop shadow는 `--shadow-xs` (가장 연함).
 - radius: sm/md=`--radius-md`, lg=`--radius-lg`.
 - 내부 gap (leading ↔ text): sm=`--space-1_5`, md=`--space-2`, lg=`--space-2_5`. actions 간은 전부 `--space-1`.
 - padding:
@@ -58,7 +60,7 @@ size 애매하면 `md`. 모르는 확장자는 FileIcon이 `others`로 폴백하
   - md: `space-1_5` 상하, `space-1_5` 우, `space-2_5` 좌
   - lg: `space-2_5` 상하, `space-1_5` 우, `space-2_5` 좌 (세로 숨 쉬게 + 좌우는 아이콘 버튼 자리 고려해 타이트)
 - leading FileIcon size: sm→sm(16) · md→md(24) · lg→lg(32).
-- lg 안쪽 두 줄: label=`--text-sm`(14.5) · meta=`--text-xs`(13). 한 단계 차이. 무게/색은 label=medium/fg-strong, meta=regular/fg-muted. (meta는 모든 size 공통 `--text-xs`.)
+- lg 안쪽 두 줄: label=`--text-sm`(14.5) · meta=`--text-xs`(13). 한 단계 차이. 무게/색은 label=medium/fg-strong, meta=regular/fg-subtle. (meta는 모든 size 공통 `--text-xs` + `--fg-subtle`.)
 - leading loading slot: FileIcon과 동일 치수(sm=`space-4`, md=`space-6`, lg=`space-8`), 내부 Spinner는 100%.
 - trailing IconButton: sm/md→IconButton `sm`(20), lg→IconButton `md`(24). variant는 전부 ghost.
 
@@ -72,7 +74,7 @@ size 애매하면 `md`. 모르는 확장자는 FileIcon이 `others`로 폴백하
 - CSS `text-overflow: ellipsis`는 안전망으로 유지하되, 글자 수 cap을 400px 폭보다 보수적으로 잡아 CSS가 확장자를 다시 잘라내지 않게 한다.
 
 ### Loading 좌측 뱃지
-`state="loading"`일 때 FileIcon 자리에 Spinner — `variant="lottie-dots"`. 색은 `--fg-muted` currentColor 바인딩. 크기는 FileIcon의 각 size와 동일 치수를 가지는 정사각 슬롯이 감싸고 내부 Spinner는 100%.
+`state="loading"`일 때 FileIcon 자리에 Spinner — `variant="lottie-dots"`. 색은 `--fg-subtle` currentColor 바인딩. 크기는 FileIcon의 각 size와 동일 치수를 가지는 정사각 슬롯이 감싸고 내부 Spinner는 100%.
 
 ### meta 폰트
 meta는 size와 무관하게 항상 `--text-xs`(13) — 파일명보다 한 단계 작은 보조 톤 유지. label(파일명)만 size별로 변동(sm=`--text-xs`, md=`--text-sm`, lg=`--text-sm`).

package/assets/prompts/components/attachment-thumb.md

@@ -4,7 +4,7 @@
 Chat Input·Message의 **이미지 첨부 썸네일**. 정사각 radius ~22%(size × 0.22) 고정, 세 가지 상태 — `src` 있음(이미지)/없음(블루톤 image glyph)/`loading`(pulse). 전부 inner hairline으로 edge definition. hover 시 코너에 X 삭제 버튼 노출(`onRemove` 지정 시).
 
 ### Do
-- 이미지 첨부(png/jpg/gif/webp)엔 썸네일, 그 외 포맷은 [[components/file-icon]] 또는 [[components/attachment-chip]].
+- 이미지 첨부(png/jpg/gif/webp)엔 썸네일, 그 외 포맷은 [[components/file-icon]] 또는 [[components/attachment-item]].
 - 업로드 처리 중/디코딩 전엔 `loading` → pulse. 끝나면 `src` 세팅.
 - 메타만 받고 썸네일 URL이 늦게 오면 `src` 비워두면 image glyph placeholder — 로딩이 길어 답답한 자리를 메움.
 - 삭제 UI가 필요하면 `onRemove`를 넘김 — hover/focus-visible에서 코너 X 활성.
@@ -19,7 +19,7 @@ Chat Input·Message의 **이미지 첨부 썸네일**. 정사각 radius ~22%(siz
 size 애매하면 `md`(40). `src`·`loading` 둘 다 없으면 자동 placeholder.
 
 ### 관련
-- [[components/attachment-chip]] — 파일형 첨부
+- [[components/attachment-item]] — 파일형 첨부
 - [[components/file-icon]] — 브랜드 사각 뱃지
 - [[components/chat-input]] — 상위 소비처