@conscience-technology/ctds 0.1.3 → 0.1.5

package/assets/components/ChatInput/ChatInput.module.css

@@ -5,23 +5,19 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
+  gap: 0;
   background: var(--bg);
   border: var(--hairline) solid var(--border);
   border-radius: var(--radius-sm);
   transition: var(--transition-colors), var(--transition-ring);
+  overflow: hidden; /* root border radius로 자식 clip (scroll 끝이 root border에서) */
 }
 
-/* MultiLine — root 상하 padding은 좁게. textarea 내부 padding이 숨 쉴 공간 책임.
-   룰: 긴 글 스크롤 시 textarea 안의 bottom padding 영역까지 흘러 들어가 자연스레 잘림. */
-.shape-multi {
-  padding: var(--space-2) var(--space-3) var(--space-2);
-}
-
-/* SingleLine은 상하 대칭 유지 */
+/* Multi/Single 공통 — root 자체는 padding 0. 각 섹션(.attachments/.quotation/.body)이
+   자신의 상하 padding을 책임져서 scroll 트랙이 root border까지 닿도록. */
+.shape-multi,
 .shape-single {
-  padding: var(--space-2) var(--space-3);
+  padding: 0;
 }
 
 /* radius variant — Shape 축에 반응 */
@@ -43,6 +39,7 @@
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--space-1);
+  padding: var(--space-3) var(--space-3) var(--space-1);
 }
 /* Thumb은 셀 안에서 자체 폭 유지(좌측 정렬), chip은 셀 폭 채움. */
 .attachmentCell {
@@ -60,6 +57,11 @@
 /* Quotation */
 .quotation {
   display: block;
+  padding: var(--space-3) var(--space-3) var(--space-1);
+}
+/* attachments 아래에 quotation이 오면 상단 패딩 제거 (attachments bottom이 책임) */
+.attachments + .quotation {
+  padding-top: 0;
 }
 
 /* body */
@@ -75,26 +77,34 @@
 .multiStack {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: 0;
   width: 100%;
   min-width: 0;
 }
-/* multiScroll — 바깥 스크롤 컨테이너. padding은 안쪽 트랙 역할.
-   룰: 긴 글이 들어오면 textarea가 자람 → 이 wrapper가 max-height로 넘침 →
-   스크롤 시 텍스트가 padding 영역을 통과해 wrapper border에서 자연스레 잘림. */
+/* multiScroll — 세로 스크롤 컨테이너. root border까지 닿음(root padding 0).
+   스크롤 룰:
+     - padding-top은 wrapper, padding-bottom은 textarea 내부에 (크로스브라우저 scroll padding 이슈 회피).
+     - 짧은 글: wrapper 안에서 스크롤 없음 → padding이 "숨 공간"처럼 보임.
+     - 긴 글: wrapper scroll 발생 → 글이 상·하 padding 영역을 통과해 root border에서 자연스레 잘림. */
 .multiScroll {
   overflow-y: auto;
   max-height: calc(var(--text-base) * 1.5 * 8); /* ~8 lines */
-  padding: var(--space-1) var(--space-1);
+  padding: var(--space-3) var(--space-3) 0;
+}
+/* attachments/quotation 아래에 오면 상단 패딩 절반 (이미 attachments/quotation에 bottom padding 있음) */
+.attachments + .body .multiScroll,
+.quotation + .body .multiScroll {
+  padding-top: var(--space-1);
 }
 
-/* textarea 자체는 flat — padding/scroll 없음. 콘텐츠 높이로만 자람. */
+/* textarea는 flat + bottom 패딩만 — padding-bottom이 scroll content의 일부가 되어
+   스크롤 끝에서 글이 wrapper(=root) border까지 흘러감. */
 .multiField {
   display: block;
   width: 100%;
   min-width: 0;
   min-height: calc(var(--text-base) * 1.5);
-  padding: 0;
+  padding: 0 0 var(--space-3);
   background: transparent;
   border: 0;
   outline: none;
@@ -114,6 +124,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-1);
+  padding: 0 var(--space-3) var(--space-2);
 }
 
 /* SingleLine */
@@ -121,6 +132,7 @@
   flex-direction: row;
   align-items: center;
   gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
 }
 .singleField {
   flex: 1 1 auto;

package/assets/components/Drawer/Drawer.module.css

@@ -1,8 +1,8 @@
 /* Drawer ────────────────────────────────────────────────────────
-   화면 가장자리에서 밀고 들어오는 패널. 흐름을 끊지 않고 상세·편집·설정을 띄울 때.
+   화면 좌/우 가장자리에서 밀고 들어오는 세로 full-height 패널.
+   흐름을 끊지 않고 상세·편집·설정을 띄울 때.
    구조: [header: title · close] · [body: 자유 children] · [footer: actions]
-   Modal과 달리 가장자리에 붙어 full-length(세로 또는 가로)로 자람.
-   방향(side) × 사이즈(size) × backdrop 정책이 variant 축. */
+   방향(side: right/left) × 사이즈(size: 뷰포트 폭 비율) × backdrop 정책이 variant 축. */
 
 /* Overlay ───────────────────────────────────────────────────── */
 .overlay {
@@ -33,100 +33,41 @@
   will-change: transform, opacity;
 }
 
-/* side별 자리·사이즈·테두리 — radius는 바깥쪽은 떼고 안쪽만 둥글게. */
+/* side별 자리·테두리 — 바깥쪽 radius는 떼고 안쪽만 둥글게.
+   공통: 세로 full-height. 폭은 size로 결정. */
 .content[data-side="right"] {
   top: 0;
   right: 0;
   bottom: 0;
-  width: 100vw;
-  max-width: calc(100vw - var(--space-8));
   border-right: 0;
   border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  animation: drawer-in-right var(--duration-slow) var(--ease-emphasized);
+}
+.content[data-side="right"][data-state="closed"] {
+  animation: drawer-out-right var(--duration-base) var(--ease-in);
 }
 
 .content[data-side="left"] {
   top: 0;
   left: 0;
   bottom: 0;
-  width: 100vw;
-  max-width: calc(100vw - var(--space-8));
   border-left: 0;
   border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-}
-
-.content[data-side="top"] {
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100vh;
-  max-height: calc(100vh - var(--space-8));
-  border-top: 0;
-  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-}
-
-.content[data-side="bottom"] {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100vh;
-  max-height: calc(100vh - var(--space-8));
-  border-bottom: 0;
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-}
-
-/* size — right/left는 width, top/bottom은 height.
-   값은 space-2(8) 배수 조합: sm 44*8=352, md 55*8=440, lg 72*8=576. */
-.content[data-side="right"][data-size="sm"],
-.content[data-side="left"][data-size="sm"] {
-  width: calc(var(--space-2) * 44);
-}
-.content[data-side="right"][data-size="md"],
-.content[data-side="left"][data-size="md"] {
-  width: calc(var(--space-2) * 55);
-}
-.content[data-side="right"][data-size="lg"],
-.content[data-side="left"][data-size="lg"] {
-  width: calc(var(--space-2) * 72);
-}
-
-.content[data-side="top"][data-size="sm"],
-.content[data-side="bottom"][data-size="sm"] {
-  height: calc(var(--space-2) * 36);
-}
-.content[data-side="top"][data-size="md"],
-.content[data-side="bottom"][data-size="md"] {
-  height: calc(var(--space-2) * 50);
-}
-.content[data-side="top"][data-size="lg"],
-.content[data-side="bottom"][data-size="lg"] {
-  height: calc(var(--space-2) * 64);
-}
-
-/* 등장·퇴장 애니 — side별 slide 방향.
-   거리는 --motion-distance-scale로 Motion 축 스왑. */
-.content[data-side="right"] {
-  animation: drawer-in-right var(--duration-slow) var(--ease-emphasized);
-}
-.content[data-side="right"][data-state="closed"] {
-  animation: drawer-out-right var(--duration-base) var(--ease-in);
-}
-.content[data-side="left"] {
   animation: drawer-in-left var(--duration-slow) var(--ease-emphasized);
 }
 .content[data-side="left"][data-state="closed"] {
   animation: drawer-out-left var(--duration-base) var(--ease-in);
 }
-.content[data-side="top"] {
-  animation: drawer-in-top var(--duration-slow) var(--ease-emphasized);
-}
-.content[data-side="top"][data-state="closed"] {
-  animation: drawer-out-top var(--duration-base) var(--ease-in);
-}
-.content[data-side="bottom"] {
-  animation: drawer-in-bottom var(--duration-slow) var(--ease-emphasized);
-}
-.content[data-side="bottom"][data-state="closed"] {
-  animation: drawer-out-bottom var(--duration-base) var(--ease-in);
+
+/* size — 뷰포트 폭 비율. md가 기본 50%, 좌우로 좁게/넓게.
+   좁은 화면에선 max-width로 가장자리 여백 보장. */
+.content[data-size="sm"] { width: 33vw; }
+.content[data-size="md"] { width: 50vw; }
+.content[data-size="lg"] { width: 67vw; }
+
+.content {
+  min-width: calc(var(--space-2) * 40);
+  max-width: calc(100vw - var(--space-8));
 }
 
 /* Header ────────────────────────────────────────────────────── */
@@ -221,30 +162,12 @@
 }
 
 @keyframes drawer-in-left {
-  from { opacity: 0; transform: translateX(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
+  from { opacity: 0; transform: translateX(calc(-1 * var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
   to   { opacity: 1; transform: translateX(0); }
 }
 @keyframes drawer-out-left {
   from { opacity: 1; transform: translateX(0); }
-  to   { opacity: 0; transform: translateX(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
-}
-
-@keyframes drawer-in-top {
-  from { opacity: 0; transform: translateY(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes drawer-out-top {
-  from { opacity: 1; transform: translateY(0); }
-  to   { opacity: 0; transform: translateY(calc(-var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
-}
-
-@keyframes drawer-in-bottom {
-  from { opacity: 0; transform: translateY(calc(var(--space-6) * var(--motion-distance-scale, 1) + 100%)); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes drawer-out-bottom {
-  from { opacity: 1; transform: translateY(0); }
-  to   { opacity: 0; transform: translateY(calc(var(--space-6) * var(--motion-distance-scale, 1) + 100%)); }
+  to   { opacity: 0; transform: translateX(calc(-1 * var(--space-6) * var(--motion-distance-scale, 1) - 100%)); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/assets/components/Drawer/Drawer.tsx

@@ -8,7 +8,7 @@ import { IconButton } from "../IconButton";
 
 import styles from "./Drawer.module.css";
 
-export type DrawerSide = "right" | "left" | "top" | "bottom";
+export type DrawerSide = "right" | "left";
 export type DrawerSize = "sm" | "md" | "lg";
 export type DrawerBackdrop = "scrim" | "locked" | "none";
 
@@ -33,7 +33,7 @@ export interface DrawerProps {
   disableEscape?: boolean;
   /** 열리는 방향. 기본 right. */
   side?: DrawerSide;
-  /** 가로/세로 사이즈. right/left는 가로 폭, top/bottom은 세로 높이. 기본 sm. */
+  /** 가로 폭. 기본 md = 뷰포트 50%. 데이터·관리 도구는 sm, 복잡한 편집은 lg. */
   size?: DrawerSize;
   /**
    * backdrop(dim) 정책.
@@ -57,7 +57,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
     dismissLabel,
     disableEscape,
     side = "right",
-    size = "sm",
+    size = "md",
     backdrop = "scrim",
   },
   ref,

package/assets/components/IconButton/IconButton.tsx

@@ -4,6 +4,7 @@ import {
   forwardRef,
   isValidElement,
   cloneElement,
+  type ReactElement,
   type ReactNode,
   type ButtonHTMLAttributes,
 } from "react";
@@ -44,12 +45,12 @@ const variantClassMap: Record<IconButtonVariant, string> = {
   destructive: styles.destructive,
 };
 
+type PhosphorIconProps = { weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" };
+
 function withPhosphorWeight(node: ReactNode): ReactNode {
   if (!isValidElement(node)) return node;
-  return cloneElement(node as React.ReactElement, {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    weight: (node as any).props?.weight ?? "regular",
-  });
+  const el = node as ReactElement<PhosphorIconProps>;
+  return cloneElement(el, { weight: el.props.weight ?? "regular" });
 }
 
 const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(

package/assets/components/ListItem/ListItem.tsx

@@ -185,7 +185,7 @@ const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
   );
 
   if (asChild) {
-    const only = Children.only(rest.children as ReactElement);
+    const only = Children.only(rest.children) as ReactElement<HTMLAttributes<HTMLElement>>;
     return cloneElement(only, { className: rootClass, ...rest }, content);
   }
 

package/assets/components/Onboarding/OnboardingPage.tsx

@@ -57,6 +57,8 @@ const STEPS: { key: StepKey; title: string; hint: string }[] = [
 
 export function OnboardingPage() {
   const {
+    theme,
+    setTheme,
     setShape,
     setMotionMode,
     setPalette,
@@ -241,6 +243,16 @@ export function OnboardingPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // 온보딩은 설정 전 단계라 OS prefers-color-scheme이나 저장된 ctds-mode가 dark여도
+  // 무조건 light로 고정 (SelectableCard 안 글자 가독성 확보).
+  // theme이 dark로 돌아올 때마다 다시 light로 끌어오는 게 아니라, 마운트 시 한 번만
+  // light로 세팅 — 사용자가 온보딩 안에서 축을 바꿔도 ThemeController sync effect가
+  // light를 재적용함.
+  useEffect(() => {
+    if (theme !== "light") setTheme("light");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const step = STEPS[stepIdx];
   const canGoNext = useMemo(() => {
     if (step.key === "theme") return answers.theme != null;

package/assets/components/_data.ts

@@ -581,6 +581,7 @@ export const componentSlugs: Record<string, string> = {
   Drawer: "feedback/drawer",
   Toast: "feedback/toast",
   "Table Header": "data/table-header",
+  "Table Row": "data/table-row",
   "Table Row Select": "data/table-row-select",
   "Table Row Edit": "data/table-row-edit",
   "List Item": "data/list-item",
@@ -592,8 +593,15 @@ export const componentSlugs: Record<string, string> = {
   "Attachment Thumb": "chat/attachment-thumb",
   "Attachment Chip": "chat/attachment-chip",
   "Quotation Bar": "chat/quotation-bar",
+  "Chat Input": "chat/chat-input",
 };
 
+/** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
+export const componentsInProgress: Set<string> = new Set([
+  "Table Row",
+  "Chat Input",
+]);
+
 export const components: { id: string; title: string; items: string[] }[] = [
   {
     id: "general",

package/assets/prompts/components/drawer.md

@@ -1,37 +1,36 @@
 # Drawer
 
 ### 원칙
-화면 가장자리에서 밀고 들어오는 패널. **흐름을 끊지 않고** 상세 보기·편집·설정·필터처럼 **본문과 연관된 보조 작업**을 띄울 때. 결정 하나에 집중시키는 중앙 자리는 [[components/modal]], 가벼운 미리보기는 [[components/popover]].
+화면 좌/우 가장자리에서 밀고 들어오는 세로 full-height 패널. **흐름을 끊지 않고** 본문과 연관된 보조 작업을 띄울 때. 결정 하나에 집중시키는 중앙 자리는 [[components/modal]], 가벼운 미리보기는 [[components/popover]].
 
 ### Do
-- **본문과 연결된 보조 작업**에 쓴다 — 선택한 항목의 상세·편집, 필터 그룹, 설정 패널, 알림 센터.
-- `title` 필수. 명사형 짧게(상세 보기 · 알림 · 필터). 질문형은 `description`으로.
-- 설명 문구는 `description` prop. 헤더 영역 안에서 title 바로 아래 바짝 붙어 하나의 "소개" 묶음으로 읽힘. `children`에 `<p>`로 설명 넣지 않는다.
-- children은 자유 ReactNode — Modal보다 세로 길이에 여유가 있어 긴 폼·리스트·탭도 OK. 세로 스크롤은 body가 담당.
+- **본문과 연결된 보조 작업**에 쓴다. Modal처럼 흐름을 끊는 자리와 구분.
+- `title` 필수. 명사형 짧게. 질문형은 `description`으로.
+- 설명 문구는 `description` prop — 헤더 안에서 title 바로 아래 바짝 붙어 하나의 "소개" 묶음으로 읽힘. `children`에 `<p>`로 설명 넣지 않는다.
+- **`children`은 완전 자유** — 호출부가 원하는 어떤 ReactNode든. Drawer는 자리와 축만 담당하고 콘텐츠 타입에 간섭하지 않는다. 세로 스크롤은 body가 담당.
 - `footer`는 액션 Button. **우측 정렬 · 최대 2~3개**. 순서는 **좌: outline(취소/닫기), 우: primary(저장/적용)**.
-- 방향(`side`)은 **용도에 맞게 하나**로 고정: 상세·편집·설정은 `right`, 네비게이션·목록은 `left`, 모바일 액션/필터 바텀시트는 `bottom`, 알림·커맨드는 `top`.
-- `backdrop="scrim"`(기본)은 모달형 — 뒤 영역 비활성 + 바깥 클릭 닫힘. `locked`은 저장·업로드 중 실수 방지. `none`은 사이드 패널 상주형(뒤 영역 계속 조작) — 알림 센터·보조 참고 패널.
+- 방향(`side`)은 한 제품/맥락 안에서 **하나로 통일**. right가 기본, 특별한 이유 있을 때만 left.
+- `backdrop="scrim"`(기본)은 모달형 — 뒤 영역 비활성 + 바깥 클릭 닫힘. `locked`은 저장·업로드 중 실수 방지. `none`은 상주형(뒤 영역 계속 조작) non-modal.
 - dismiss는 **헤더 우측 X · ESC 키** 두 가지. 둘 다 기본 on.
-- primary Button은 `md`가 기본 — Drawer 안 Input도 `md`로 맞춰 수직 리듬 유지.
 
 ### Don't
-- Modal 자리에 Drawer 금지 — 결정 하나에 집중시키는 자리는 Modal. Drawer는 흐름을 **잇는** 보조 패널.
-- Drawer 안에 Drawer 금지 — ESC가 어느 쪽을 닫는지 모호해지고 side가 같으면 겹침.
-- 세로가 짧은 짧은 알림·메시지에 Drawer 금지. 그건 [[components/toast]] 자리.
-- footer에 primary 2개 금지 — 무엇이 "다음"인지 모호.
+- Modal 자리에 Drawer 금지 — 결정 하나에 집중시키는 자리는 Modal.
+- Drawer 안에 Drawer 금지.
+- 짧은 알림에 Drawer 금지 — [[components/toast]] 자리.
+- footer에 primary 2개 금지.
 - 사이즈 조절한다고 `width` 인라인 override 금지. `size` prop만 사용. 더 넓게 필요하면 그건 페이지 자리.
 - title을 `text-transform: uppercase`로 꾸미지 않는다.
-- `side` 아무 방향에나 열지 않는다 — 한 제품/맥락 안에서 **용도별로 하나의 방향**만 쓴다. 같은 페이지에서 right/left/bottom을 섞으면 멀미.
+- 같은 페이지에서 right/left Drawer 혼용 — 방향 통일.
+- children 안의 "콘텐츠 타입"을 Drawer가 미리 제한하지 않는다 (알림 전용·폼 전용 variant 같은 거 만들지 말 것).
 
 ### Fallback
 - 결정이 끝나야 다음 흐름이 가능하면 → [[components/modal]].
 - 짧은 알림이면 → [[components/toast]].
 - 가볍게 미리보기면 → [[components/popover]].
-- 세로가 짧고 상단 커맨드 느낌이면 → `side="top"`.
-- 애매하면 `side="right"`, `size="sm"`, `backdrop="scrim"`.
+- 애매하면 `side="right"`, `size="md"`, `backdrop="scrim"`.
 
 ### 관련
-- [[components/modal]] — 흐름 중단·결정 집중. Drawer는 흐름 유지.
+- [[components/modal]] — 흐름 중단·결정 집중.
 - [[components/toast]] — 휘발성 알림.
 - [[components/button]] — footer 액션. 파괴적 확인은 `destructive` variant.
 - [[primitives/slide]] — 가장자리 등장 애니. `--motion-distance-scale`로 축 스왑.
@@ -45,17 +44,17 @@
   open={boolean}
   onOpenChange={(open: boolean) => void}
   title={ReactNode}                 // required
-  description={ReactNode}           // 헤더 영역 안, title 바로 아래 한두 줄
+  description={ReactNode}           // 헤더 안, title 바로 아래 한두 줄
   titleSrOnly={boolean}             // 시각적 숨김
   footer={ReactNode}                // Button들을 넘김. 없으면 footer 미렌더
   dismissible={boolean}             // default: true (헤더 X 버튼)
   dismissLabel={string}             // X 버튼 스크린리더 라벨
   disableEscape={boolean}           // ESC 닫힘 차단
-  side="right" | "left" | "top" | "bottom"   // default: right
-  size="sm" | "md" | "lg"                    // default: sm
-  backdrop="scrim" | "locked" | "none"       // default: scrim
+  side="right" | "left"             // default: right
+  size="sm" | "md" | "lg"           // default: md
+  backdrop="scrim" | "locked" | "none"  // default: scrim
 >
-  {children}                        // 자유 ReactNode
+  {children}                        // 자유 ReactNode — 콘텐츠 타입 제한 없음
 </Drawer>
 ```
 
@@ -63,38 +62,37 @@
 
 | prop | 값 | 결과 |
 |---|---|---|
-| `side` | `right`(기본) | 우측 끝에서 밀고 들어옴. 상세·편집·설정 — 가장 자주 쓰는 자리. |
-|  | `left` | 좌측에서. 네비게이션·탐색·목록 — 모바일 사이드바 느낌. |
-|  | `top` | 상단에서 내려옴. 알림·커맨드 팔레트 — 드문 자리. |
-|  | `bottom` | 하단에서 올라옴. 모바일 액션 시트·필터 바텀시트. |
-| `size` | 아래 **Size 가이드** 참조 | right·left는 가로 폭을, top·bottom은 세로 높이를 결정. |
+| `side` | `right`(기본) | 우측에서 밀고 들어옴. 기본 자리. |
+|  | `left` | 좌측에서. 특별한 이유 있을 때만. |
+| `size` | 아래 **Size 가이드** 참조 | 뷰포트 폭 기준 비율. |
 | `backdrop` | `scrim`(기본) | dim O · 바깥 클릭 닫힘. 일반 보조 작업. |
 |  | `locked` | dim O · 바깥 클릭 무시. 저장·업로드 중 실수 방지. ESC도 막고 싶으면 `disableEscape`. |
-|  | `none` | dim 없음 · 뒤 영역 계속 조작 가능 (non-modal). 알림 센터·상주 참고 패널. |
+|  | `none` | dim 없음 · 뒤 영역 계속 조작 가능 (non-modal). |
 | `dismissible` | `true`(기본) / `false` | 헤더 X 노출/제거. |
 | `disableEscape` | `false`(기본) / `true` | ESC 닫힘 활성/차단. |
-| `titleSrOnly` | `false`(기본) / `true` | 헤더 title 시각적 숨김 (스크린리더엔 유지). |
+| `titleSrOnly` | `false`(기본) / `true` | 헤더 title 시각적 숨김. |
 
 ### Size 가이드
-| size | right/left (width) | top/bottom (height) | 언제 |
-|---|---|---|---|
-| `sm` | 352 | 288 | **기본.** 상세 보기·알림 센터·간단한 편집. 데이터·개발자 도구일수록 유지. |
-| `md` | 440 | 400 | 폼이 길거나 리스트 항목이 많을 때. |
-| `lg` | 576 | 512 | 복잡한 편집·탭 포함 보조 뷰. 이보다 넓어야 하면 페이지 자리. |
+| size | width | 언제 |
+|---|---|---|
+| `sm` | 33vw | 좁은 보조 패널. 데이터·관리 도구. |
+| `md` | 50vw | **기본.** 뷰포트의 절반. 대부분의 경우. |
+| `lg` | 67vw | 복잡한 편집·탭 포함 보조 뷰. 이보다 넓어야 하면 페이지 자리. |
+
+> 좁은 화면에선 `min-width`(space-2 × 40)와 `max-width`(100vw − space-8)가 자동 보정 — 좌/우 가장자리 여백 유지.
 
 **금지 조합**
 - `backdrop="none"` + `size="lg"` — 뒤 영역을 거의 가려놓고 non-modal 흉내. `locked` 또는 `scrim`으로.
 - `dismissible=false` + `disableEscape=true` + `footer` 없음 — 사용자가 Drawer를 닫을 방법이 전혀 없음.
-- 같은 페이지에서 서로 다른 `side`의 Drawer 혼용 — 방향 통일.
+- 같은 페이지에서 서로 다른 `side` 혼용.
 
 ### 조합 예시
 ```tsx
-// 가장 기본 — 우측 상세 보기
+// 기본 — 우측 보조 패널
 <Drawer
   open={open}
   onOpenChange={setOpen}
-  title="주문 상세"
-  description="주문번호 #28491"
+  title="상세 보기"
   dismissLabel="닫기"
   footer={
     <>
@@ -103,50 +101,32 @@
     </>
   }
 >
-  <DescriptionList>…</DescriptionList>
+  {/* children 자유 — 리스트·탭·폼·이미지 어떤 것이든 */}
 </Drawer>
 
-// 알림 센터 — non-modal, 뒤 계속 작업
+// 상주형 사이드 패널 (non-modal)
 <Drawer
   open={open}
   onOpenChange={setOpen}
   side="right"
   size="sm"
   backdrop="none"
-  title="알림"
+  title="사이드 패널"
   dismissLabel="닫기"
 >
-  <List>…</List>
-</Drawer>
-
-// 모바일 필터 바텀시트
-<Drawer
-  open={open}
-  onOpenChange={setOpen}
-  side="bottom"
-  size="md"
-  title="필터"
-  dismissLabel="닫기"
-  footer={
-    <>
-      <Button variant="outline" onClick={reset}>초기화</Button>
-      <Button variant="primary" onClick={apply}>적용</Button>
-    </>
-  }
->
-  <FilterGroup>…</FilterGroup>
+  {/* 뒤 영역 계속 조작 가능 */}
 </Drawer>
 
 // 저장 중 실수 방지
 <Drawer
   open={saving}
   onOpenChange={() => {}}
-  title="업로드 중"
-  description="파일을 서버로 전송하는 중입니다."
+  title="진행 중"
+  description="창을 닫으면 작업이 중단될 수 있어요."
   backdrop="locked"
   dismissible={false}
   disableEscape
 >
-  <ProgressBar value={progress} />
+  {/* ProgressBar 등 */}
 </Drawer>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
   "type": "module",
   "bin": {