@conscience-technology/ctds 0.1.13 → 0.2.0

package/assets/components/TableRow/TableRow.module.css

@@ -146,18 +146,20 @@ a.root:not(.disabled):focus-visible,
 }
 
 /* pinned 경계 — scroll shadow 대신 상시 hairline으로 "여기까지 고정 영역"을 분명히.
-   좌측 pinned → 우측 경계에 세로 hairline. 우측 pinned → 좌측 경계. */
+   좌측 pinned → 우측 경계, 우측 pinned → 좌측 경계.
+   border 대신 inset box-shadow로 그어 sticky 레이어 subpixel 겹침(두 줄처럼
+   보이는 Chrome 렌더 현상) 회피 + 셀 폭에 영향 안 줌. */
 .cellSlot[data-pinned="left"] {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 .cellSlot[data-pinned="right"] {
-  border-left: var(--hairline) solid var(--border);
+  box-shadow: inset var(--hairline) 0 0 var(--border);
 }
 
 /* selectable + pinned 조합일 때 selectCell이 "실질적 좌측 pinned의 선두" 역할이라
-   selectCell에도 우측 hairline을 그어 경계 톤 일치. */
+   selectCell에도 우측 경계를 그어 톤 일치. */
 .selectCell {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 
 /* ── Cell ───────────────────────────────────────────────

package/assets/components/TableRowEdit/TableRowEdit.module.css

@@ -63,6 +63,7 @@
   pointer-events: none;
 }
 
+
 /* ── Edit cell ────────────────────────────────────────────
    클릭/포커스 타겟. 활성 상태엔 input/select가 셀을 꽉 채움. */
 .editCell {
@@ -102,11 +103,17 @@
   left: 0;
   right: 0;
   /* 1줄 상태엔 셀 높이에 딱 맞도록 min-height: 100%. textarea autosize가
-     여러 줄로 늘어나면 host는 content 높이를 따라감(아래로 확장). */
+     여러 줄로 늘어나면 host 자체가 scroll 컨테이너가 되고(max-height 도달 시),
+     textarea 전체(자기 padding 포함)가 host 안에서 위로 올라감 → 상·하 padding이
+     scroll content의 일부라 host border에서 자연스레 clip, 안쪽 여백 항상 보존.
+     scroll.md "textarea 특수 패턴" 규약. padding은 textarea가 책임. */
   min-height: 100%;
+  /* 3.5줄 × line-height + 상·하 padding(space-2 각각) — 그 이상은 host가 scroll. */
+  max-height: calc(var(--lh-sm) * 3.5 + var(--space-2) * 2);
   display: flex;
-  align-items: center;
-  padding-inline: var(--space-2);
+  align-items: stretch;
+  padding: 0;
+  overflow-y: auto;
   background: var(--bg);
   border: var(--hairline) solid var(--border-strong);
   border-radius: var(--radius-sm);

package/assets/components/TableRowEdit/TableRowEdit.tsx

@@ -179,8 +179,13 @@ function TableRowEditInner<T>(
         /* 세로 구분선은 editable 여부와 무관하게 모든 셀 사이에 균일하게.
            엑셀 톤 "셀 그리드" 신호는 일관성이 핵심 — read-only 셀만 선이 빠지면
            리듬이 깨져 보임. 첫 데이터 셀은 왼쪽에 선 없음(테이블 외곽).
-           selectable이면 체크박스 ↔ 첫 데이터 셀 사이에도 선. */
-        const showLeftDivider = idx > 0 || selectable;
+           selectable이면 체크박스 ↔ 첫 데이터 셀 사이에도 선.
+           pinned 경계는 cellSlot box-shadow가 담당 — pinned-right 셀 자신과
+           pinned-left 바로 다음 셀의 왼쪽 divider는 그으면 두 줄로 겹쳐 보임. */
+        const prevCol = idx > 0 ? columnMap.get(orderedKeys[idx - 1]) : undefined;
+        const skipDivider =
+          col.pinned === "right" || prevCol?.pinned === "left";
+        const showLeftDivider = (idx > 0 || selectable) && !skipDivider;
         return (
           <div
             key={col.key}

package/assets/components/Toast/Toast.tsx

@@ -27,7 +27,12 @@ export interface ToastOptions {
   tone?: ToastTone;
   surface?: ToastSurface;
   icon?: IconName;
+  /** 액션 요소(Button 등). `actionAltText`도 함께 넘겨야 렌더링된다 — 스크린리더용 라벨이 없으면 Radix가 action을 숨긴다. */
   action?: ReactNode;
+  /**
+   * action을 쓸 때 **필수** — 스크린리더가 action 버튼을 어떻게 안내할지. Toast 사라져도
+   * 사용자가 수행할 수 있는 대안 설명(예: "실행 취소", "설정 열기"). 생략 시 action 미렌더.
+   */
   actionAltText?: string;
   dismissible?: boolean;
   dismissLabel?: string;
@@ -227,6 +232,9 @@ export const Toast = forwardRef<HTMLLIElement, ToastProps>(function Toast(
           {action}
         </RadixToast.Action>
       )}
+      {action && !actionAltText && typeof window !== "undefined" && process.env.NODE_ENV !== "production" && (
+        <ToastActionWarning />
+      )}
       {dismissible && (
         <RadixToast.Close asChild>
           <IconButton
@@ -241,3 +249,14 @@ export const Toast = forwardRef<HTMLLIElement, ToastProps>(function Toast(
     </RadixToast.Root>
   );
 });
+
+/** dev-only. action은 주고 actionAltText를 빠뜨리면 Radix가 조용히 숨기므로 console로 경고. */
+function ToastActionWarning() {
+  if (typeof window !== "undefined") {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[CTDS Toast] `action` prop을 넘겼는데 `actionAltText`가 비어있어요. 스크린리더용 라벨이 없으면 action이 렌더되지 않습니다.",
+    );
+  }
+  return null;
+}

package/assets/components/_data.ts

@@ -585,7 +585,6 @@ export const componentSlugs: Record<string, string> = {
   "Table Row": "data/table-row",
   "Table Row Select": "data/table-row-select",
   "Table Row Edit": "data/table-row-edit",
-  Calendar: "data/calendar",
   "Event Chip": "data/event-chip",
   "List Item": "data/list-item",
   "Metric Card": "data/metric-card",
@@ -595,7 +594,7 @@ export const componentSlugs: Record<string, string> = {
   Spinner: "feedback/spinner",
   "File Icon": "chat/file-icon",
   "Attachment Thumb": "chat/attachment-thumb",
-  "Attachment Chip": "chat/attachment-chip",
+  "Attachment Item": "data/attachment-item",
   "Quotation Bar": "chat/quotation-bar",
   "Chat Input": "chat/chat-input",
   "Bubble": "chat/bubble",
@@ -607,13 +606,13 @@ export const componentSlugs: Record<string, string> = {
   "Message Sources": "chat/message-sources",
   "Message Table": "chat/message-table",
   "Message State": "chat/message-state",
+  "Generated Image": "chat/generated-image",
 };
 
-/** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
-export const componentsInProgress: Set<string> = new Set([
-  "Drawer",
-  "Calendar",
-]);
+/** 작업중 — 사이드바에서 "작업중" 뱃지로 표시되고,
+ *  외부에서 import하면 pre-commit 훅(scripts/lint-wip.mjs)이 차단한다.
+ *  문서 라우트(web/app/components/**)와 컴포넌트 자신의 폴더는 허용. */
+export const componentsInProgress: Set<string> = new Set([]);
 
 export const components: { id: string; title: string; items: string[] }[] = [
   {
@@ -622,6 +621,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     items: [
       "Button", "Split Button", "Icon Button", "Menu Item", "Toolbar", "Badge", "Avatar",
       "Tooltip", "Shortcut", "Filter Button", "Chip", "Separator", "Skeleton", "Aspect Ratio",
+      "Code Block",
     ],
   },
   {
@@ -631,7 +631,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
       "Input", "Input OTP", "Textarea", "Select", "Combobox", "Multi-Select",
       "Checkbox", "Radio Group", "Selectable Card", "Choice Card", "Switch", "Slider",
       "Date Picker", "Time Picker",
-      "File Upload", "Form",
+      "File Upload",
     ],
   },
   {
@@ -639,7 +639,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     title: "Data Display",
     items: [
       "Table Header", "Table Row", "Table Row Select", "Table Row Edit",
-      "List Item", "Metric Card", "Gallery Item", "Calendar", "Event Chip",
+      "List Item", "Metric Card", "Gallery Item", "Attachment Item", "Event Chip",
       "Empty State", "Description List", "Timeline",
     ],
   },
@@ -668,12 +668,37 @@ export const components: { id: string; title: string; items: string[] }[] = [
     ],
   },
   {
-    id: "chat",
-    title: "AI Chat",
+    id: "chat-input",
+    title: "AI Chat / 입력",
+    items: [
+      "Chat Input", "Quotation Bar",
+    ],
+  },
+  {
+    id: "chat-attachment",
+    title: "AI Chat / 첨부",
+    items: [
+      "File Icon", "Attachment Thumb", "Generated Image",
+    ],
+  },
+  {
+    id: "chat-message",
+    title: "AI Chat / 메시지",
+    items: [
+      "Bubble", "User Message", "AI Message", "Message State", "Message Actions",
+    ],
+  },
+  {
+    id: "chat-content",
+    title: "AI Chat / 메시지 콘텐츠",
+    items: [
+      "Message Quote", "Message Sources", "Message Table",
+    ],
+  },
+  {
+    id: "chat-shell",
+    title: "AI Chat / 쉘",
     items: [
-      "File Icon", "Attachment Thumb", "Attachment Chip", "Quotation Bar", "Chat Input",
-      "Bubble", "Message Actions", "User Message", "AI Message",
-      "Code Block", "Message Quote", "Message Sources", "Message Table", "Message State",
       "Chat Sidebar",
     ],
   },

package/assets/components/app-shell.css

@@ -0,0 +1,17 @@
+/* ============================================================
+   CTDS app-shell — opt-in. AppFrame(100dvh overflow:hidden)을 쓰는
+   "앱 셸" 레이아웃 전제 스타일. 소비자 프로젝트가 일반 body-scroll
+   페이지라면 이 파일을 import하지 않는다. 데모 앱(web/app/globals.css)
+   과 ctds-cli init이 복사하는 앱 템플릿만 사용.
+
+   app-scroll 패러다임: AppFrame이 뷰포트 100dvh를 꽉 채우고 자기 overflow:hidden,
+   스크롤은 AppFrame 안의 .contentSlot만 담당 — html/body는 스크롤할 필요가 없다.
+   overflow:hidden으로 바깥 러버밴드/스크롤 체이닝 자체를 차단.
+   ============================================================ */
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+}

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

@@ -80,12 +80,11 @@
   --icon-size-md: calc(20px * var(--space-scale));
   --icon-size-lg: calc(24px * var(--space-scale));
 
-  /* Spinner · 로더 표준 크기 — IconButton 체계와 1:1 매칭 (xs=16, sm=20, md=24, lg=32).
-     로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음. */
-  --loader-size-xs: calc(16px * var(--space-scale));
+  /* Spinner · 로더 표준 크기 — IconButton 박스와 1:1 매칭 (sm=20, md=24, lg=32, xl=40). */
   --loader-size-sm: calc(20px * var(--space-scale));
   --loader-size-md: calc(24px * var(--space-scale));
   --loader-size-lg: calc(32px * var(--space-scale));
+  --loader-size-xl: calc(40px * var(--space-scale));
 
   /* Loader 성격 — Motion 축이 스왑 ([data-motion] 블록 참고).
      기본값은 standard와 같은 ring. */
@@ -243,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);
@@ -578,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)의 스택을 언어별로 스왑.
    프로젝트마다 여기서 바꾸면 됨. */
@@ -629,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);
@@ -706,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. 접근성이 축보다 우선한다