@conscience-technology/ctds 0.1.7 → 0.1.8

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

@@ -124,7 +124,7 @@
   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 */
@@ -141,6 +141,8 @@
   background: transparent;
   border: 0;
   outline: none;
+  resize: none;
+  overflow: hidden;
   color: var(--fg-strong);
   font: inherit;
   font-size: var(--text-sm);
@@ -149,6 +151,9 @@
 .singleField::placeholder {
   color: var(--fg-muted);
 }
+.singleField::placeholder {
+  color: var(--fg-muted);
+}
 
 /* Attach 버튼 */
 .attachBtn {

package/assets/components/ChatInput/ChatInput.tsx

@@ -108,11 +108,10 @@ 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에 맞춰 자람(scroll 아님).
+       외부 scroll wrapper(multi)가 max-height 책임. single은 wrapper 없이 textarea가 직접 자람.
+       Shift+Enter로 줄바꿈 → textarea가 즉시 자라고, SingleLine도 자연스레 늘어남. */
     useLayoutEffect(() => {
-      if (shape !== "multi") return;
       const el = taRef.current;
       if (!el) return;
       el.style.height = "auto";
@@ -122,8 +121,8 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     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 +130,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
           onSend();
         }
       },
-      [shape, canSend, showStop, onSend, onStop]
+      [canSend, showStop, onSend, onStop]
     );
 
     const handleSendClick = useCallback(() => {
@@ -277,14 +276,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/package.json

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