@conscience-technology/ctds 0.1.8 → 0.1.9

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

@@ -127,26 +127,29 @@
   padding: 0 var(--space-2) var(--space-2);
 }
 
-/* SingleLine */
+/* SingleLine — Shift+Enter로 자라면 textarea 상단으로 확장, 좌/우 버튼은 하단 고정.
+   MultiLine과 동일 max-height(≈8줄)에서 스크롤. */
 .shape-single .body {
   flex-direction: row;
-  align-items: center;
+  align-items: flex-end;        /* 버튼들 하단 고정 */
   gap: var(--space-0_5);
   padding: var(--space-2) var(--space-2);
 }
 .singleField {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--space-1);
+  padding: calc((var(--space-8) - var(--text-sm) * 1.5) / 2) var(--space-1);
   background: transparent;
   border: 0;
   outline: none;
   resize: none;
-  overflow: hidden;
   color: var(--fg-strong);
   font: inherit;
   font-size: var(--text-sm);
   line-height: 1.5;
+  /* MultiLine과 동일 상한 — 넘으면 textarea 자체 스크롤 */
+  max-height: calc(var(--text-sm) * 1.5 * 8);
+  overflow-y: auto;
 }
 .singleField::placeholder {
   color: var(--fg-muted);

package/assets/components/ChatInput/ChatInput.tsx

@@ -108,14 +108,15 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     const canSend = !disabled && (value.trim().length > 0 || attachments.length > 0);
     const showStop = isStreaming && !!onStop;
 
-    /* autoResize — multi/single 둘 다. textarea는 content에 맞춰 자람(scroll 아님).
-       외부 scroll wrapper(multi)가 max-height 책임. single은 wrapper 없이 textarea가 직접 자람.
-       Shift+Enter로 줄바꿈 → textarea가 즉시 자라고, SingleLine도 자연스레 늘어남. */
+    /* autoResize — multi/single 둘 다. textarea는 content에 맞춰 자람.
+       Shift+Enter로 줄바꿈 → textarea 즉시 확장. max 넘으면 CSS max-height가 scroll 생성. */
     useLayoutEffect(() => {
       const el = taRef.current;
       if (!el) return;
       el.style.height = "auto";
-      el.style.height = `${el.scrollHeight}px`;
+      // scrollHeight로 설정하되 CSS max-height가 override하도록 직접 min
+      const nextH = el.scrollHeight;
+      el.style.height = `${nextH}px`;
     }, [shape, value]);
 
     const handleKeyDown = useCallback(

package/assets/prompts/components/menu-item.md

@@ -19,7 +19,7 @@ root는 `<div role="menuitem">`이다 — `leadingActions`/`trailingActions`에
 ### Don't
 - MenuItem 안에 두 개 이상의 &ldquo;주된 액션&rdquo;을 두지 않는다 — 아이템 전체가 하나의 selection. 부가 액션(즐겨찾기 토글·⋯메뉴)만 slot에 얹는다.
 - 라벨을 두 줄 이상 넣지 않는다. 설명이 필요하면 [[components/command-palette]] description 슬롯이나 [[components/tooltip]].
-- 페이지 이동에 root click 시맨틱 금지. 라우팅 아이템이면 `asChild`로 `<Link>`/`<a>`에 위임.
+- 페이지 이동에 root click 시맨틱 금지. 라우팅 아이템이면 `asChild`로 `<Link>`/`<a>`에 위임. **단, `asChild`일 땐 라벨 `.label` 래퍼가 적용되지 않는다** — 자식(`<Link>`) 자체가 라벨 역할이라 truncation·color·weight가 자동 상속되지 않음. 긴 라벨이면 `<Link>` 쪽에 truncate 유틸을 걸거나, 짧게 유지하는 설계로.
 - height를 CSS로 덮어쓰지 않는다. `size` prop 경유 (Density 축이 스왑).
 - hover-only 액션을 &ldquo;시각적으로 숨김&rdquo;으로만 처리하지 않는다 — `opacity: 0` + `pointer-events: none`이 짝. 안 그러면 안 보이는 버튼이 클릭됨.
 
@@ -81,6 +81,7 @@ type MenuItemAction =
   checked={boolean}                      // leadingActions 맨 앞에 checkmark 자동 삽입
   active={boolean}                       // 현재 페이지/선택 아이템 강조
   disabled={boolean}
+  collapsed={boolean}                    // icon-only. leading 하나만 남기고 label/trailing/shortcut 전부 숨김. (Sidebar가 자동 주입)
   asChild={boolean}                      // Radix Slot — <Link>/<a>/DropdownMenu.Item 등에 위임
   onClick={(e) => void}
 />

package/assets/prompts/components/sidebar.md

@@ -1,23 +1,38 @@
 # Sidebar
 
 ### 원칙
-좌측 세로 nav. **라우팅 전용** — Tabs/필터는 쓸 곳이 아님. Brand(home 링크) + Section(그룹 라벨) + Item(라우트 링크) + Profile(사용자) + Footer가 compound 조합. `collapsed`로 icon-only 축소. Item은 [[components/menu-item]]을 그대로 어댑트 — 시각·상태 규칙 공유.
+좌측 세로 nav. **라우팅 전용** — Tabs/필터는 쓸 곳이 아님. Header(고정) + Body(스크롤) + Footer(고정) 3영역 세로 쉘에, Brand + Section + Item + Separator + Profile을 compound로 조합. `collapsed`로 icon-only 축소. Item은 [[components/menu-item]]을 그대로 어댑트 — 시각·상태 규칙 공유.
+
+### 3영역 구조 (중요)
+Sidebar는 **Header / Body / Footer 세 영역으로 강제 분리**된다. 역할 혼동이 레이아웃 사고의 1순위 원인.
+
+| 영역 | 스크롤 | 레이아웃 | 담는 것 |
+|---|---|---|---|
+| `Sidebar.Header` | ❌ 고정 | **가로 flex 행** (brand symbol + wordmark 나란히) | `Sidebar.Brand` 전용 |
+| `Sidebar.Body` | ✅ 세로 스크롤 | 세로 flex 열 | `Sidebar.Section` · `Sidebar.Separator` 전부 여기 |
+| `Sidebar.Footer` | ❌ 고정 | 가로 flex 행 | `Sidebar.Profile` 또는 보조 액션 |
+
+Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가로 1줄로 눌려 겹친다. Section·Item·Separator는 반드시 `Sidebar.Body` 안에.
 
 ### Do
-- 라우트 이동은 Item에 `asChild` + Next `<Link>`.
+- Section·Separator는 반드시 **`Sidebar.Body` 안에** 둔다 — Body만 스크롤되는 영역.
+- 라우트 이동은 Item에 `asChild` + Next `<Link>`. 단, `asChild`일 땐 라벨 truncation이 `<Link>` 쪽 책임이 된다 ([[components/menu-item]] Slot 동작) — 긴 라벨이면 Link에 `truncate` 유틸 또는 `title` 속성을 걸 것.
 - 현재 라우트는 `active`로 명시 (MenuItem의 active 시각 그대로).
 - Brand는 Home 링크 자리로. `symbol`(항상 노출) + `wordmark`(expanded만).
 - Section 묶음은 `title`로 그룹. collapsed일 땐 title 자동 숨김.
 - `collapsed` 상태에서는 `aria-label`과 `title`을 자동으로 걸어 접근성 유지.
+- 콘텐츠 영역과의 **경계선은 [[components/app-frame]] `variant="outlined"`** 가 그린다 — Sidebar 자체는 border를 그리지 않음. 사이드바가 녹아 보이면 AppFrame variant부터 확인.
 
 ### Don't
+- **Header에 Section·Item·nav를 넣지 않는다** — Header는 가로 flex 행이라 세로 nav가 깔리면 전부 눌려 겹친다. Brand 전용.
 - 페이지 안 뷰 전환에 쓰지 않는다 — 그건 [[components/tabs]].
 - Item 안에 variant로 다른 톤을 쓰지 않는다. active 외의 강조 금지.
 - Sidebar 자체에 padding/width를 CSS로 덮지 않는다. `--sidebar-w*` 토큰 경유.
+- `.root`에 padding을 꽂지 않는다 — Body가 스크롤 컨테이너라 스크롤바가 안쪽으로 밀려 가장자리에 안 붙는다. 좌우 여백은 Header/Section/Footer가 각자 담당([[project_scroll_rule]]).
 - Brand symbol·wordmark 크기 override 금지. `--sidebar-brand-symbol-max`·`--sidebar-brand-wordmark-max` 상한 안에서만.
 
 ### Fallback
-collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
+collapsed 결정 애매하면 `false`. Section title 애매하면 생략. 경계선 애매하면 AppFrame `variant="outlined"`.
 
 ### 관련
 - [[components/menu-item]] — Item 시각·상태 전부 재사용
@@ -29,26 +44,31 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
 ### Props 시그니처
 ```tsx
 <Sidebar collapsed={boolean}>                 // default: false
+  {/* Header — 고정, 가로 행. Brand 전용. */}
   <Sidebar.Header>
     <Sidebar.Brand symbol={<Icon />} wordmark={<Logo /> | "CTDS"} />
   </Sidebar.Header>
 
-  <Sidebar.Section title="워크스페이스">
-    <Sidebar.Item
-      icon={<Icon name="house" />}
-      label="대시보드"
-      active={boolean}
-      trailing={ReactNode}                    // 배지·카운트
-      shortcut="⌘1"
-      hasSubmenu={boolean}
-      disabled={boolean}
-      asChild={boolean}
-      onClick={(e) => void}
-    />
-  </Sidebar.Section>
-
-  <Sidebar.Separator />
-
+  {/* Body — 세로 스크롤 트랙. Section·Separator 전부 여기. 여러 개 두면 각자 독립 스크롤. */}
+  <Sidebar.Body>
+    <Sidebar.Section title="워크스페이스">
+      <Sidebar.Item
+        icon={<Icon name="house" />}
+        label="대시보드"
+        active={boolean}
+        trailing={ReactNode}                  // 배지·카운트
+        shortcut="⌘1"
+        hasSubmenu={boolean}
+        disabled={boolean}
+        asChild={boolean}
+        onClick={(e) => void}
+      />
+    </Sidebar.Section>
+
+    <Sidebar.Separator />
+  </Sidebar.Body>
+
+  {/* Footer — 고정, 하단. Profile 또는 보조 액션. */}
   <Sidebar.Footer>
     <Sidebar.Profile
       name="희영"
@@ -69,26 +89,28 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
 
 ### 조합 예시
 ```tsx
-// 기본 — 섹션 2개 + Profile
+// 기본 — 섹션 2개 + Profile. Section·Separator는 Body 안.
 <Sidebar>
   <Sidebar.Header>
     <Sidebar.Brand symbol={<Icon name="rocket-launch" />} wordmark="CTDS" />
   </Sidebar.Header>
 
-  <Sidebar.Section title="워크스페이스">
-    <Sidebar.Item asChild icon={<Icon name="house" />} label="대시보드" active>
-      <Link href="/">대시보드</Link>
-    </Sidebar.Item>
-    <Sidebar.Item asChild icon={<Icon name="chart-line" />} label="분석">
-      <Link href="/analytics">분석</Link>
-    </Sidebar.Item>
-  </Sidebar.Section>
+  <Sidebar.Body>
+    <Sidebar.Section title="워크스페이스">
+      <Sidebar.Item asChild icon={<Icon name="house" />} label="대시보드" active>
+        <Link href="/">대시보드</Link>
+      </Sidebar.Item>
+      <Sidebar.Item asChild icon={<Icon name="chart-line" />} label="분석">
+        <Link href="/analytics">분석</Link>
+      </Sidebar.Item>
+    </Sidebar.Section>
 
-  <Sidebar.Separator />
+    <Sidebar.Separator />
 
-  <Sidebar.Section title="설정">
-    <Sidebar.Item icon={<Icon name="gear" />} label="환경설정" shortcut="⌘," />
-  </Sidebar.Section>
+    <Sidebar.Section title="설정">
+      <Sidebar.Item icon={<Icon name="gear" />} label="환경설정" shortcut="⌘," />
+    </Sidebar.Section>
+  </Sidebar.Body>
 
   <Sidebar.Footer>
     <Sidebar.Profile name="희영" sub="admin@ctds.dev" avatar={{ status: "online" }} />
@@ -100,8 +122,10 @@ collapsed 결정 애매하면 `false`. Section title 애매하면 생략.
   <Sidebar.Header>
     <Sidebar.Brand symbol={<Icon name="rocket-launch" />} />
   </Sidebar.Header>
-  <Sidebar.Section>
-    <Sidebar.Item icon={<Icon name="house" />} label="대시보드" active />
-  </Sidebar.Section>
+  <Sidebar.Body>
+    <Sidebar.Section>
+      <Sidebar.Item icon={<Icon name="house" />} label="대시보드" active />
+    </Sidebar.Section>
+  </Sidebar.Body>
 </Sidebar>
 ```

package/assets/skill/SKILL.md

@@ -29,6 +29,7 @@ Layer 1(shadcn 방식 컴포넌트 코드) + Layer 2(AI 프롬프트 컨텍스
 |---|---|
 | 컴포넌트 신규 제작·variant/prop 수정 (`web/components/<Name>/` 또는 `prompts/components/<name>.md`) | `ctds-component` |
 | 페이지·대시보드·레이아웃 조합 (`web/app/**/page.tsx`) | `ctds-page` |
+| **와이어프레임/기존 페이지를 CTDS로 번역·교체** (사용자가 "CTDS로 바꿔줘/교체해줘/일괄 변경" 요청, 또는 와이어프레임 코드·이미지를 입력) | `ctds-wireframe` |
 | 테마 프리셋 생성·수정 (`prompts/themes/*` 또는 `web/app/theme-demo/*`) | `ctds-theme` |
 | 코드 검증 (하드코딩·유령 토큰·메모리 규칙·문서-코드 동기화) | `ctds-validate` |
 | 3D 아이콘 일러스트 자산 생성 | `ctds-illust` |

package/package.json

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