@conscience-technology/ctds 0.1.7 → 0.1.9

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

@@ -124,27 +124,35 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-1);
-  padding: 0 var(--space-4) var(--space-2);
+  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;
   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);
 }
 .singleField::placeholder {
   color: var(--fg-muted);

package/assets/components/ChatInput/ChatInput.tsx

@@ -108,22 +108,22 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     const canSend = !disabled && (value.trim().length > 0 || attachments.length > 0);
     const showStop = isStreaming && !!onStop;
 
-    /* autoResize for multi — textarea는 content에 맞춰 자람(scroll 아님).
-       외부 scroll wrapper가 max-height를 책임 → 넘치면 wrapper가 스크롤.
-       룰: 스크롤이 wrapper에 생기므로 wrapper padding이 "트랙 역할" (padding 안쪽까지 흘러 border에서 잘림). */
+    /* autoResize — multi/single 둘 다. textarea는 content에 맞춰 자람.
+       Shift+Enter로 줄바꿈 → textarea 즉시 확장. max 넘으면 CSS max-height가 scroll 생성. */
     useLayoutEffect(() => {
-      if (shape !== "multi") return;
       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(
       (e: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         if (e.key !== "Enter") return;
-        if (e.shiftKey) return; // multi: 줄바꿈 허용
-        if (shape === "multi" && e.nativeEvent.isComposing) return;
+        if (e.shiftKey) return; // Shift+Enter: multi/single 모두 줄바꿈 허용
+        if (e.nativeEvent.isComposing) return; // 한글 조합 중 전송 방지
         e.preventDefault();
         if (showStop) {
           onStop?.();
@@ -131,7 +131,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
           onSend();
         }
       },
-      [shape, canSend, showStop, onSend, onStop]
+      [canSend, showStop, onSend, onStop]
     );
 
     const handleSendClick = useCallback(() => {
@@ -277,14 +277,15 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
           {shape === "single" ? (
             <>
               {AttachButton}
-              <input
-                type="text"
+              <textarea
+                ref={taRef}
                 className={styles.singleField}
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder={placeholder}
                 disabled={disabled}
+                rows={1}
                 aria-label={placeholder}
               />
               {ModelAndSend}

package/assets/components/TableHeader/TableHeader.module.css

@@ -92,6 +92,18 @@
   background: var(--bg);
 }
 
+/* pinned 경계 — hairline으로 "고정 영역" 분리. TableRow와 짝. */
+.cellSlot[data-pinned="left"] {
+  border-right: var(--hairline) solid var(--border);
+}
+.cellSlot[data-pinned="right"] {
+  border-left: var(--hairline) solid var(--border);
+}
+
+.selectCell {
+  border-right: var(--hairline) solid var(--border);
+}
+
 /* Cell (columnheader) ─────────────────────────────────────── */
 /* width:100%로 슬롯 폭을 그대로 채워 라벨/tick/handle 정렬이 슬롯 경계에 맞춰 계산됨.
    padding-inline은 hover/drag hit 영역이 콘텐츠에 바짝 붙지 않도록 필수.

package/assets/components/TableHeader/TableHeader.tsx

@@ -394,6 +394,25 @@ const TableHeader = forwardRef<HTMLDivElement, TableHeaderProps>(function TableH
     .map((k) => columnMap.get(k))
     .filter((c): c is TableHeaderColumn => !!c);
 
+  /* selectCell이 렌더되면 그 실제 폭을 측정해 좌측 pinned columns의 left offset에
+     더해준다. CSS 토큰(--iconbtn-h-lg / --control-h-sm) + space-scale 반영이 자동으로
+     흡수되므로 하드코딩이나 CSS 변수 파싱 없이 처리 가능. */
+  const selectCellRef = useRef<HTMLDivElement>(null);
+  const [selectCellWidth, setSelectCellWidth] = useState(0);
+  useEffect(() => {
+    if (!selectable) {
+      setSelectCellWidth(0);
+      return;
+    }
+    const el = selectCellRef.current;
+    if (!el) return;
+    const update = () => setSelectCellWidth(el.getBoundingClientRect().width);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [selectable]);
+
   /* Sort ─────────────────────────────────────────────────── */
   const toggleSort = useCallback(
     (key: string) => {
@@ -497,7 +516,7 @@ const TableHeader = forwardRef<HTMLDivElement, TableHeaderProps>(function TableH
   const cells = (
     <>
       {selectable && (
-        <div className={styles.selectCell} role="columnheader">
+        <div ref={selectCellRef} className={styles.selectCell} role="columnheader">
           <Checkbox
             checked={selectAllChecked}
             onChange={(e) => onSelectAllChange?.(e.currentTarget.checked)}
@@ -524,7 +543,7 @@ const TableHeader = forwardRef<HTMLDivElement, TableHeaderProps>(function TableH
                 className={styles.cellSlot}
                 style={{
                   ...cellSlotStyle(col, widths[col.key]),
-                  ...pinnedStyle(col, order, columnMap, widths),
+                  ...pinnedStyle(col, order, columnMap, widths, selectCellWidth),
                 }}
               >
                 <Cell
@@ -551,7 +570,7 @@ const TableHeader = forwardRef<HTMLDivElement, TableHeaderProps>(function TableH
             className={styles.cellSlot}
             style={{
               ...cellSlotStyle(col, widths[col.key]),
-              ...pinnedStyle(col, order, columnMap, widths),
+              ...pinnedStyle(col, order, columnMap, widths, selectCellWidth),
             }}
           >
             <Cell

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

@@ -145,6 +145,21 @@ a.root:not(.disabled):focus-visible,
   contain: none;
 }
 
+/* pinned 경계 — scroll shadow 대신 상시 hairline으로 "여기까지 고정 영역"을 분명히.
+   좌측 pinned → 우측 경계에 세로 hairline. 우측 pinned → 좌측 경계. */
+.cellSlot[data-pinned="left"] {
+  border-right: var(--hairline) solid var(--border);
+}
+.cellSlot[data-pinned="right"] {
+  border-left: var(--hairline) solid var(--border);
+}
+
+/* selectable + pinned 조합일 때 selectCell이 "실질적 좌측 pinned의 선두" 역할이라
+   selectCell에도 우측 hairline을 그어 경계 톤 일치. */
+.selectCell {
+  border-right: var(--hairline) solid var(--border);
+}
+
 /* ── Cell ───────────────────────────────────────────────
    Header의 .cell과 1:1 동일. slot 안쪽 width:100%로 가득 채우는 콘텐츠 그릇.
    display:inline-flex 는 Header 그대로 따라감 — flex vs inline-flex 차이가

package/assets/components/TableRow/TableRow.tsx

@@ -2,6 +2,9 @@
 
 import {
   forwardRef,
+  useEffect,
+  useRef,
+  useState,
   type AnchorHTMLAttributes,
   type CSSProperties,
   type HTMLAttributes,
@@ -143,6 +146,25 @@ function TableRowInner<T>(
   const orderedKeys = resolveOrder(columns, order);
   const columnMap = new Map(columns.map((c) => [c.key, c]));
 
+  /* selectCell 폭을 측정해 좌측 pinned column의 left offset에 반영.
+     Header와 동일한 로직 — selectCell이 sticky left:0이라 pinned column들이 그 뒤에
+     위치하려면 폭만큼 밀어야 함. */
+  const selectCellRef = useRef<HTMLDivElement>(null);
+  const [selectCellWidth, setSelectCellWidth] = useState(0);
+  useEffect(() => {
+    if (!selectable) {
+      setSelectCellWidth(0);
+      return;
+    }
+    const el = selectCellRef.current;
+    if (!el) return;
+    const update = () => setSelectCellWidth(el.getBoundingClientRect().width);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [selectable]);
+
   const rootClass = [
     styles.root,
     variant === "plate" ? styles.plate : styles.line,
@@ -163,7 +185,7 @@ function TableRowInner<T>(
   const cells = (
     <>
       {selectable && (
-        <div className={styles.selectCell} onClick={stop}>
+        <div ref={selectCellRef} className={styles.selectCell} onClick={stop}>
           <Checkbox
             checked={selected}
             disabled={disabled}
@@ -184,7 +206,7 @@ function TableRowInner<T>(
           minWidth: toCssSize(col.minWidth) ?? cssWidth,
           flex: col.flex ? "1 1 0" : undefined,
           justifyContent: alignToJustify(col.align),
-          ...pinnedStyle(col, orderedKeys, columnMap, widths ?? {}),
+          ...pinnedStyle(col, orderedKeys, columnMap, widths ?? {}, selectCellWidth),
         };
         const content = col.render ? col.render(data) : (data as Record<string, ReactNode>)?.[col.key];
         return (

package/assets/components/_data.ts

@@ -598,7 +598,7 @@ export const componentSlugs: Record<string, string> = {
 
 /** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
 export const componentsInProgress: Set<string> = new Set([
-  "Table Row",
+  "Drawer",
   "Chat Input",
 ]);
 

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.7",
+  "version": "0.1.9",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
   "type": "module",
   "bin": {