@conscience-technology/ctds 0.1.6 → 0.1.8

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

@@ -39,7 +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);
+  padding: var(--space-3) var(--space-4) var(--space-1);
 }
 /* Thumb은 셀 안에서 자체 폭 유지(좌측 정렬), chip은 셀 폭 채움. */
 .attachmentCell {
@@ -57,7 +57,7 @@
 /* Quotation */
 .quotation {
   display: block;
-  padding: var(--space-3) var(--space-3) var(--space-1);
+  padding: var(--space-3) var(--space-4) var(--space-1);
 }
 /* attachments 아래에 quotation이 오면 상단 패딩 제거 (attachments bottom이 책임) */
 .attachments + .quotation {
@@ -88,8 +88,8 @@
      - 긴 글: wrapper scroll 발생 → 글이 상·하 padding 영역을 통과해 root border에서 자연스레 잘림. */
 .multiScroll {
   overflow-y: auto;
-  max-height: calc(var(--text-base) * 1.5 * 8); /* ~8 lines */
-  padding: var(--space-3) var(--space-3) 0;
+  max-height: calc(var(--text-sm) * 1.5 * 8); /* ~8 lines */
+  padding: var(--space-3) var(--space-4) 0;
 }
 /* attachments/quotation 아래에 오면 상단 패딩 절반 (이미 attachments/quotation에 bottom padding 있음) */
 .attachments + .body .multiScroll,
@@ -103,7 +103,7 @@
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--text-base) * 1.5);
+  min-height: calc(var(--text-sm) * 1.5);
   padding: 0 0 var(--space-3);
   background: transparent;
   border: 0;
@@ -111,7 +111,7 @@
   resize: none;
   color: var(--fg-strong);
   font: inherit;
-  font-size: var(--text-base);
+  font-size: var(--text-sm);
   line-height: 1.5;
   overflow: hidden;
 }
@@ -124,15 +124,15 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-1);
-  padding: 0 var(--space-3) var(--space-2);
+  padding: 0 var(--space-2) var(--space-2);
 }
 
 /* SingleLine */
 .shape-single .body {
   flex-direction: row;
   align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-2) var(--space-3);
+  gap: var(--space-0_5);
+  padding: var(--space-2) var(--space-2);
 }
 .singleField {
   flex: 1 1 auto;
@@ -141,14 +141,19 @@
   background: transparent;
   border: 0;
   outline: none;
+  resize: none;
+  overflow: hidden;
   color: var(--fg-strong);
   font: inherit;
-  font-size: var(--text-base);
+  font-size: var(--text-sm);
   line-height: 1.5;
 }
 .singleField::placeholder {
   color: var(--fg-muted);
 }
+.singleField::placeholder {
+  color: var(--fg-muted);
+}
 
 /* Attach 버튼 */
 .attachBtn {
@@ -179,8 +184,8 @@
   opacity: 0.4;
 }
 .attachIcon {
-  width: 68%;
-  height: 68%;
+  width: 50%;
+  height: 50%;
 }
 
 /* model + send */
@@ -265,8 +270,8 @@
   cursor: not-allowed;
 }
 .sendIcon {
-  width: 55%;
-  height: 55%;
+  width: 44%;
+  height: 44%;
 }
 
 /* 파일 input 숨김 */

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/Drawer/Drawer.module.css

@@ -33,14 +33,13 @@
   will-change: transform, opacity;
 }
 
-/* side별 자리·테두리 — 바깥쪽 radius는 떼고 안쪽만 둥글게.
+/* side별 자리·테두리 — 가장자리에 붙는 패널이라 radius 없음(각진 모서리).
    공통: 세로 full-height. 폭은 size로 결정. */
 .content[data-side="right"] {
   top: 0;
   right: 0;
   bottom: 0;
   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"] {
@@ -52,7 +51,6 @@
   left: 0;
   bottom: 0;
   border-left: 0;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
   animation: drawer-in-left var(--duration-slow) var(--ease-emphasized);
 }
 .content[data-side="left"][data-state="closed"] {

package/assets/components/Onboarding/Onboarding.module.css

@@ -667,6 +667,21 @@
   background: color-mix(in oklab, var(--onb-fg) 8%, transparent);
   border-radius: var(--radius-xs);
 }
+.layoutPreview[data-frame="topbar-first"] {
+  flex-direction: column;
+}
+.layoutPreviewBody {
+  flex: 1;
+  display: flex;
+  gap: var(--space-0_5);
+  min-height: 0;
+}
+.layoutPreviewTabs {
+  height: var(--space-1_5);
+  flex-shrink: 0;
+  background: color-mix(in oklab, var(--onb-fg) 14%, transparent);
+  border-radius: var(--radius-xs);
+}
 
 /* 밀도 카드 — row 4개로 간격 비주얼 */
 .densityPreview {
@@ -1388,7 +1403,22 @@
 .layoutWireContent {
   flex: 1;
   background: var(--bg-subtle);
-  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-sm);
+}
+/* topbar-first: 탑바가 가로 전체, 아래로 사이드바+콘텐츠 */
+.layoutWire[data-frame="topbar-first"] {
+  flex-direction: column;
+}
+.layoutWireBody {
+  flex: 1;
+  display: flex;
+  gap: var(--space-2);
+  min-height: 0;
+}
+.layoutWireTabs {
+  height: var(--space-4);
+  flex-shrink: 0;
+  background: color-mix(in oklab, var(--primary) 25%, var(--bg) 75%);
   border-radius: var(--radius-sm);
 }
 

package/assets/components/Onboarding/OnboardingPage.tsx

@@ -205,31 +205,44 @@ export function OnboardingPage() {
       lang: "ko",
     });
     // 2) 파일 쓰기 (server action)
-    const result = await applyOnboarding(
-      {
-        theme: answers.theme,
-        mode: "light",
-        palette: paletteChoice.id,
-        hue,
-        accentHue: null,
-        shape: vibe.values.shape,
-        density: density.id,
-        motion: vibe.values.motion,
-        iconFamily: "phosphor",
-        voice,
-        lang: "ko",
-        focusRing,
-        appliedAt: new Date().toISOString(),
-      },
-      { overwrite }
-    );
-    if (result.ok) {
-      setApplyState({ phase: "done", files: result.files });
-    } else {
+    // server action이 reject되면(네트워크 끊김·배포환경·내부 throw 등) applying에 멈춰서
+    // 무한로딩처럼 보이므로 반드시 try/catch로 감싸서 error phase로 떨어뜨린다.
+    try {
+      const result = await applyOnboarding(
+        {
+          theme: answers.theme,
+          mode: "light",
+          palette: paletteChoice.id,
+          hue,
+          accentHue: null,
+          shape: vibe.values.shape,
+          density: density.id,
+          motion: vibe.values.motion,
+          iconFamily: "phosphor",
+          voice,
+          lang: "ko",
+          focusRing,
+          appliedAt: new Date().toISOString(),
+        },
+        { overwrite }
+      );
+      if (result.ok) {
+        setApplyState({ phase: "done", files: result.files });
+      } else {
+        setApplyState({
+          phase: "error",
+          message: result.error,
+          files: result.files,
+        });
+      }
+    } catch (e) {
       setApplyState({
         phase: "error",
-        message: result.error,
-        files: result.files,
+        message:
+          e instanceof Error
+            ? `적용 중 예외: ${e.message}`
+            : `적용 중 알 수 없는 오류: ${String(e)}`,
+        files: [],
       });
     }
   };
@@ -890,6 +903,10 @@ function LayoutStep({
   };
 
   const hoveredChoice = hovered ? LAYOUT_CHOICES.find((c) => c.id === hovered) : null;
+  const hoveredSidebar = hoveredChoice?.sidebar ?? "none";
+  const hoveredTopbar = hoveredChoice?.topbar ?? false;
+  const hoveredFrameLayout = hoveredChoice?.appFrameLayout ?? "sidebar-first";
+  const hoveredTabs = hoveredChoice?.tabs ?? false;
 
   // ThemeStep과 동일한 커서 추적 로직.
   const OFFSET_X = 20;
@@ -932,7 +949,14 @@ function LayoutStep({
         style={{ transform: `translate(${left}px, ${top}px)` }}
         aria-hidden
       >
-        {hoveredChoice && <LayoutWireframe sidebar={hoveredChoice.sidebar} topbar={hoveredChoice.topbar} />}
+        {hoveredChoice && (
+          <LayoutWireframe
+            sidebar={hoveredSidebar}
+            topbar={hoveredTopbar}
+            frameLayout={hoveredFrameLayout}
+            tabs={hoveredTabs}
+          />
+        )}
       </div>
     </>
   );
@@ -940,24 +964,48 @@ function LayoutStep({
 
 /**
  * 레이아웃 호버 미리보기 와이어프레임.
- * 핵심 구조 — 탑바는 사이드바 "위"가 아니라 사이드바 "옆" (콘텐츠 영역 위에만).
- * 즉 전체 레이아웃은 [좌사이드바 | (탑바 + 콘텐츠 세로)] 식 가로 분할.
+ * frameLayout에 따라 두 가지 구조:
+ * - sidebar-first: [좌사이드바(세로 전체) | (탑바 + 콘텐츠 세로)] — Figma/Notion
+ * - topbar-first: [탑바(가로 전체); (좌사이드바 | 콘텐츠)] — GitHub/Vercel
+ * tabs=true면 탑바 아래 탭 바 한 줄 추가.
  */
 function LayoutWireframe({
   sidebar,
   topbar,
+  frameLayout,
+  tabs,
 }: {
   sidebar: "left" | "right" | "dual" | "none";
   topbar: boolean;
+  frameLayout: "sidebar-first" | "topbar-first";
+  tabs: boolean;
 }) {
+  const hasLeft = sidebar === "left" || sidebar === "dual";
+  const hasRight = sidebar === "right" || sidebar === "dual";
+
+  if (topbar && frameLayout === "topbar-first") {
+    return (
+      <div className={styles.layoutWire} data-frame="topbar-first">
+        <div className={styles.layoutWireTopbar} />
+        {tabs && <div className={styles.layoutWireTabs} />}
+        <div className={styles.layoutWireBody}>
+          {hasLeft && <div className={styles.layoutWireSidebar} />}
+          <div className={styles.layoutWireContent} />
+          {hasRight && <div className={styles.layoutWireSidebar} />}
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className={styles.layoutWire}>
-      {(sidebar === "left" || sidebar === "dual") && <div className={styles.layoutWireSidebar} />}
+    <div className={styles.layoutWire} data-frame="sidebar-first">
+      {hasLeft && <div className={styles.layoutWireSidebar} />}
       <div className={styles.layoutWireMain}>
         {topbar && <div className={styles.layoutWireTopbar} />}
+        {tabs && <div className={styles.layoutWireTabs} />}
         <div className={styles.layoutWireContent} />
       </div>
-      {(sidebar === "right" || sidebar === "dual") && <div className={styles.layoutWireSidebar} />}
+      {hasRight && <div className={styles.layoutWireSidebar} />}
     </div>
   );
 }
@@ -1064,23 +1112,12 @@ function SummaryStep({ answers }: { answers: Answers }) {
           value={layout?.title ?? "—"}
           preview={
             layout && (
-              <div
-                className={styles.layoutPreview}
-                data-sidebar={layout.sidebar}
-                data-topbar={layout.topbar ? "on" : "off"}
-                aria-hidden
-              >
-                {(layout.sidebar === "left" || layout.sidebar === "dual") && (
-                  <span className={styles.layoutPreviewRail} />
-                )}
-                <span className={styles.layoutPreviewMain}>
-                  {layout.topbar && <span className={styles.layoutPreviewBar} />}
-                  <span className={styles.layoutPreviewContent} />
-                </span>
-                {(layout.sidebar === "right" || layout.sidebar === "dual") && (
-                  <span className={styles.layoutPreviewRail} />
-                )}
-              </div>
+              <LayoutPreviewMini
+                sidebar={layout.sidebar}
+                topbar={layout.topbar}
+                frameLayout={layout.appFrameLayout ?? "sidebar-first"}
+                tabs={layout.tabs ?? false}
+              />
             )
           }
         />
@@ -1112,6 +1149,47 @@ function SummaryStep({ answers }: { answers: Answers }) {
   );
 }
 
+function LayoutPreviewMini({
+  sidebar,
+  topbar,
+  frameLayout,
+  tabs,
+}: {
+  sidebar: "left" | "right" | "dual" | "none";
+  topbar: boolean;
+  frameLayout: "sidebar-first" | "topbar-first";
+  tabs: boolean;
+}) {
+  const hasLeft = sidebar === "left" || sidebar === "dual";
+  const hasRight = sidebar === "right" || sidebar === "dual";
+
+  if (topbar && frameLayout === "topbar-first") {
+    return (
+      <div className={styles.layoutPreview} data-frame="topbar-first" aria-hidden>
+        <span className={styles.layoutPreviewBar} />
+        {tabs && <span className={styles.layoutPreviewTabs} />}
+        <span className={styles.layoutPreviewBody}>
+          {hasLeft && <span className={styles.layoutPreviewRail} />}
+          <span className={styles.layoutPreviewContent} />
+          {hasRight && <span className={styles.layoutPreviewRail} />}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.layoutPreview} data-frame="sidebar-first" aria-hidden>
+      {hasLeft && <span className={styles.layoutPreviewRail} />}
+      <span className={styles.layoutPreviewMain}>
+        {topbar && <span className={styles.layoutPreviewBar} />}
+        {tabs && <span className={styles.layoutPreviewTabs} />}
+        <span className={styles.layoutPreviewContent} />
+      </span>
+      {hasRight && <span className={styles.layoutPreviewRail} />}
+    </div>
+  );
+}
+
 function SummaryCard({
   label,
   value,

package/assets/components/Onboarding/wizardData.ts

@@ -10,7 +10,12 @@ import type {
 export type ThemeId = "none" | "pure" | "spare" | "expressive";
 export type VibeId = "balanced" | "playful" | "serious";
 export type DensityChoiceId = DensityValue;
-export type LayoutId = "sidebar-only" | "topbar-sidebar" | "dual-sidebar";
+export type LayoutId =
+  | "sidebar-only"
+  | "topbar-sidebar"
+  | "dual-sidebar"
+  | "topbar-over-sidebar"
+  | "topbar-tabs";
 
 // ── 디자인 스타일(테마) ─────────────────────────────────
 // 테마를 고르면 뒤의 축(vibe/density 등) 디폴트가 묶여서 결정됩니다.
@@ -187,33 +192,63 @@ export type LayoutChoice = {
   examples: string;
   sidebar: "left" | "right" | "dual" | "none";
   topbar: boolean;
+  /**
+   * 탑바가 사이드바와 어떻게 걸치는지. AppFrame의 layout prop과 1:1.
+   * - "sidebar-first": 사이드바가 세로 전체, 탑바는 콘텐츠 영역 위에만. Linear/Slack/Figma.
+   * - "topbar-first": 탑바가 가로 전체, 사이드바는 그 아래로. GitHub/Vercel/Jira.
+   * topbar=false일 때는 의미 없음.
+   */
+  appFrameLayout?: "sidebar-first" | "topbar-first";
+  /** 탑바 아래에 탭 바가 있는지. GitHub repo 네비처럼 섹션 전환이 탭으로. */
+  tabs?: boolean;
 };
 
 export const LAYOUT_CHOICES: LayoutChoice[] = [
   {
-    id: "dual-sidebar",
-    title: "옵션이 많은 정교한 편집 도구",
-    hint: "왼쪽은 파일·레이어 트리, 오른쪽은 속성 패널. 도구 자체가 UI의 주인공.",
-    examples: "Figma, Framer, VS Code, Blender",
-    sidebar: "dual",
+    id: "topbar-sidebar",
+    title: "사이드바가 세로 전체, 탑바는 오른쪽에만",
+    hint: "사이드바가 항상 보이는 작업 공간. 섹션 트리가 깊고 자주 오간다.",
+    examples: "Notion, Linear, Slack, Figma",
+    sidebar: "left",
     topbar: true,
+    appFrameLayout: "sidebar-first",
   },
   {
-    id: "topbar-sidebar",
-    title: "탐색 경로가 중요한 문서·앱",
-    hint: "상단에 워크스페이스/브래드크럼, 왼쪽에 섹션 트리. 어디에 있는지가 늘 명확해야 함.",
-    examples: "Notion, GitHub, Linear (프로젝트 뷰), Confluence",
+    id: "topbar-over-sidebar",
+    title: "탑바가 가로 전체, 그 아래 사이드바",
+    hint: "로고·검색·계정이 전역에 자리. 사이드바는 현재 섹션 안쪽 네비.",
+    examples: "GitHub, Vercel, Jira, Jenkins",
     sidebar: "left",
     topbar: true,
+    appFrameLayout: "topbar-first",
   },
   {
     id: "sidebar-only",
-    title: "메뉴는 짧고 콘텐츠가 주인공",
-    hint: "네비게이션은 왼쪽에 최소한으로. 상단 바 없이 콘텐츠에 몰입.",
+    title: "사이드바만, 탑바 없음",
+    hint: "왼쪽에 최소 네비. 상단 바 없이 콘텐츠에 몰입.",
     examples: "Linear (이슈 뷰), Vercel Dashboard, Slack",
     sidebar: "left",
     topbar: false,
   },
+  {
+    id: "dual-sidebar",
+    title: "양쪽 사이드바 + 탑바",
+    hint: "왼쪽 트리, 오른쪽 속성 패널. 도구 자체가 UI의 주인공인 편집기.",
+    examples: "Figma, Framer, VS Code, Blender",
+    sidebar: "dual",
+    topbar: true,
+    appFrameLayout: "sidebar-first",
+  },
+  {
+    id: "topbar-tabs",
+    title: "탑바 아래 탭으로 섹션 전환",
+    hint: "사이드바 없이 상단 탑바 + 탭 한 줄. 섹션 수가 적고 깊이가 얕을 때.",
+    examples: "GitHub repo, Stripe Dashboard, Vercel 프로젝트",
+    sidebar: "none",
+    topbar: true,
+    appFrameLayout: "topbar-first",
+    tabs: true,
+  },
 ];
 
 /**

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

@@ -48,18 +48,21 @@
   min-height: var(--control-h-md);
 }
 
-/* line variant는 셀 좌우 패딩을 먹지 않는다 — TableRow.line과 짝.
-   콘텐츠가 테이블 좌/우 경계에 바짝 붙어 "선 사이의 데이터" 톤 유지.
-   plate에선 .cell 기본 padding-inline(--space-2)을 유지. */
+/* line variant 셀 좌우 패딩 — TableRow.line과 짝. 콘텐츠가 셀 경계에서 떨어짐. */
 .line .cell {
-  padding-inline: 0;
+  padding-inline: var(--space-2);
 }
 
-/* line variant 셀 간 숨 쉴 공간. plate는 셀 자체 padding-inline으로 간격 확보. */
-.line {
-  column-gap: var(--space-2);
+/* 첫/마지막 셀의 가장자리 padding만 0 — 테이블 좌/우 끝과 콘텐츠 바짝 붙게. */
+.line .cellSlot:first-child .cell {
+  padding-inline-start: 0;
+}
+.line .cellSlot:last-child .cell {
+  padding-inline-end: 0;
 }
 
+/* 셀 간 column-gap 없음 — 셀 자체 padding이 간격 담당. */
+
 /* variant: plate ─────────────────────────────────────────────
    pill 형태. 컨테이너 자체에 radius + padding, 셀 hover 배경이 라운드 안쪽에서 발생.
    min-height으로 시각 무게 유지. */
@@ -89,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 영역이 콘텐츠에 바짝 붙지 않도록 필수.
@@ -260,13 +275,24 @@
 }
 
 /* Select-all cell (leading checkbox) ─────────────────────
-   체크박스 자체가 width/height를 가져 중앙 정렬만 하면 됨 — 좌우 패딩 불필요. */
+   line variant: 좌측 정렬. plate variant: 가운데 정렬. TableRow와 짝 맞춤.
+   position: sticky — TableRow.selectCell과 짝. 좌측 고정으로 가로스크롤에도 유지. */
 .selectCell {
+  position: sticky;
+  left: 0;
+  z-index: var(--z-raise);
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
+  width: var(--iconbtn-h-lg);
+  background: var(--bg);
+}
+
+.plate .selectCell {
+  justify-content: center;
   width: var(--control-h-sm);
+  background: var(--bg-subtle);
 }
 
 /* Column manager cell (trailing IconButton) ────────────── */

package/assets/components/TableHeader/TableHeader.tsx

@@ -142,6 +142,9 @@ export function pinnedStyle(
   orderedKeys: string[],
   columnMap: Map<string, TableHeaderColumn>,
   widths: Record<string, number>,
+  /* selectable일 때 selectCell이 좌측에 먼저 sticky로 깔려 있음 — 그 폭만큼
+     좌측 pinned column들의 left offset을 밀어줘야 겹치지 않음. */
+  leftOffsetBase = 0,
 ): CSSProperties {
   if (!column.pinned) return {};
   const resolveWidth = (key: string): number => {
@@ -153,7 +156,7 @@ export function pinnedStyle(
   };
   const idx = orderedKeys.indexOf(column.key);
   if (column.pinned === "left") {
-    let offset = 0;
+    let offset = leftOffsetBase;
     for (let i = 0; i < idx; i++) {
       const c = columnMap.get(orderedKeys[i]);
       if (c?.pinned === "left") offset += resolveWidth(orderedKeys[i]);
@@ -391,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) => {
@@ -494,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)}
@@ -521,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
@@ -548,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

@@ -50,18 +50,22 @@
   border-bottom: none;
 }
 
-/* line variant는 셀 자체 좌우 패딩을 먹지 않는다 — Header line과 짝.
-   콘텐츠가 테이블 좌/우 경계에 바짝 붙어 "선 사이의 데이터" 톤 유지.
-   plate에서는 .cell 기본 padding-inline을 유지해 셀 간 간격·hover 영역 확보. */
+/* line variant 내부 셀 좌우 패딩. 콘텐츠가 셀 경계(세로선 위치)에서 떨어져
+   있도록 안쪽에 숨구멍을 둔다. */
 .line .cell {
-  padding-inline: 0;
+  padding-inline: var(--space-2);
 }
 
-/* line variant는 셀 사이에 최소한의 숨 쉴 공간(gap)을 둔다 — 셀 패딩이 0이라
-   콘텐츠가 서로 바짝 붙는 걸 방지. plate는 셀 자체 패딩으로 간격이 생겨 불필요. */
-.line {
-  column-gap: var(--space-2);
+/* 첫 셀의 왼쪽 / 마지막 셀의 오른쪽만 테이블 가장자리에 바짝 붙게 padding 0.
+   가장자리 콘텐츠가 shell 경계에서 띄워 보이지 않도록. */
+.line .cellSlot:first-child .cell {
+  padding-inline-start: 0;
 }
+.line .cellSlot:last-child .cell {
+  padding-inline-end: 0;
+}
+
+/* 셀 간 추가 column-gap 없음 — 셀 자체 좌우 padding이 셀 사이 간격을 모두 담당. */
 
 /* ── Variant: plate ────────────────────────────────────────
    라운드 라인. 셀 간격감이 느껴지되 행 자체는 pill처럼 보임.
@@ -141,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 차이가
@@ -279,12 +298,66 @@ a.root:not(.disabled):focus-visible,
 }
 
 /* ── Select cell (leading checkbox) ────────────────────
-   체크박스가 자체 크기를 가져 중앙 정렬만 하면 됨 — 좌우 패딩 불필요. */
+   line variant: 좌측 정렬 — 테이블이 경계에 바짝 붙는 톤이라 체크박스도 좌측에 붙임.
+   plate variant: 가운데 정렬 — pill 안쪽 좌 padding(space-1)과 체크박스 사이가 너무
+   붙어 보이는 걸 방지.
+
+   position: sticky — 좌측 pinned 컬럼과 짝. 가로스크롤 시에도 체크박스가 좌측에
+   유지되도록. 가로스크롤 없으면 sticky는 아무 효과도 안 내므로 모든 테이블에
+   안전하게 적용 가능.
+   배경(--bg)과 z-index — sticky 상태에서 뒤 셀 콘텐츠가 비치지 않도록. */
 .selectCell {
-  position: relative;
+  position: sticky;
+  left: 0;
+  z-index: var(--z-raise);
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
+  width: var(--iconbtn-h-lg);
+  background: var(--bg);
+}
+
+/* row hover/active 톤을 selectCell에도 — ::before 오버레이로 깔아 opacity transition
+   가능하게. background 직접 변경은 gradient 때문에 CSS가 보간을 못 해서 즉시 교체돼
+   row 트랜지션과 안 맞춰짐. opacity transition은 row의 background transition과 동일한
+   duration/ease라 자연스레 함께 움직임. */
+.selectCell::before,
+.cellSlot[data-pinned]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--hover);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+
+a.root:not(.disabled):hover .selectCell::before,
+.root[tabindex]:not(.disabled):hover .selectCell::before,
+.active .selectCell::before,
+a.root:not(.disabled):hover .cellSlot[data-pinned]::before,
+.root[tabindex]:not(.disabled):hover .cellSlot[data-pinned]::before,
+.active .cellSlot[data-pinned]::before {
+  opacity: 1;
+}
+
+/* selectCell 안쪽 콘텐츠(Checkbox)는 ::before 위에 올라가야 함. */
+.selectCell > * {
+  position: relative;
+  z-index: var(--z-raise);
+}
+
+/* plate: 체크박스 영역엔 bg 깔지 않음 — plate pill 자체가 bg를 가져 selectCell이
+   별도 bg면 pill 안에 네모가 뜸. sticky는 유지하되 투명으로. */
+.plate .selectCell {
+  justify-content: center;
   width: var(--control-h-sm);
+  background: transparent;
+}
+
+a.plate.root:not(.disabled):hover .selectCell,
+.plate.root[tabindex]:not(.disabled):hover .selectCell,
+.plate.active .selectCell {
+  background: transparent;
 }

package/assets/components/TableRow/TableRow.tsx

@@ -2,6 +2,9 @@
 
 import {
   forwardRef,
+  useEffect,
+  useRef,
+  useState,
   type AnchorHTMLAttributes,
   type CSSProperties,
   type HTMLAttributes,
@@ -11,10 +14,11 @@ import {
 } from "react";
 
 import { Checkbox } from "../Checkbox";
-import type {
-  TableHeaderAlign,
-  TableHeaderColumn,
-  TableHeaderVariant,
+import {
+  pinnedStyle,
+  type TableHeaderAlign,
+  type TableHeaderColumn,
+  type TableHeaderVariant,
 } from "../TableHeader";
 import styles from "./TableRow.module.css";
 
@@ -142,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,
@@ -162,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}
@@ -183,10 +206,16 @@ function TableRowInner<T>(
           minWidth: toCssSize(col.minWidth) ?? cssWidth,
           flex: col.flex ? "1 1 0" : undefined,
           justifyContent: alignToJustify(col.align),
+          ...pinnedStyle(col, orderedKeys, columnMap, widths ?? {}, selectCellWidth),
         };
         const content = col.render ? col.render(data) : (data as Record<string, ReactNode>)?.[col.key];
         return (
-          <div key={col.key} className={styles.cellSlot} style={slotStyle}>
+          <div
+            key={col.key}
+            data-pinned={col.pinned || undefined}
+            className={styles.cellSlot}
+            style={slotStyle}
+          >
             <div role="cell" className={styles.cell} data-align={col.align ?? "start"}>
               <span className={styles.cellInner}>{content}</span>
             </div>

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

@@ -16,9 +16,8 @@
 .edit {
   cursor: default;
   border-bottom: var(--hairline) solid var(--border);
-  /* TableHeader(.line)와 동일한 column-gap. gap이 다르면 각 셀 폭이 오른쪽으로
-     갈수록 어긋나 헤더 resize handle 위치와 데이터 Row 세로선이 안 맞음. */
-  column-gap: var(--space-2);
+  /* column-gap 없음 — 셀 자체 padding-inline이 간격 담당. TableHeader/TableRow
+     line과 동일 공식으로 통일(gap 쓰면 셀 폭이 오른쪽으로 갈수록 어긋남). */
 }
 
 /* ── Size ─────────────────────────────────────────────────
@@ -42,6 +41,16 @@
   -webkit-mask-image: none;
 }
 
+/* 첫/마지막 셀 가장자리 padding만 0 — 테이블 좌/우 끝과 콘텐츠 바짝 붙게. */
+.edit > :first-child .editCell,
+.edit > :first-child .readonlyCell {
+  padding-inline-start: 0;
+}
+.edit > :last-child .editCell,
+.edit > :last-child .readonlyCell {
+  padding-inline-end: 0;
+}
+
 /* ── 세로 구분선 ────────────────────────────────────────── */
 .editCell[data-divider]::before,
 .readonlyCell[data-divider]::before {

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/chat-input.md

@@ -25,6 +25,7 @@ shape 애매하면 `multi`, radius 애매하면 `rounded`. maxRows 애매하면
 - [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-chip]] / [[components/quotation-bar]] — 조립 요소
 - [[components/message-bubble]] — 짝 컴포넌트 (후속)
 - [[components/context-menu]] — 모델 선택 메뉴를 소비처에서 조립할 때
+- [[primitives/scroll]] — "Textarea / 단일 콘텐츠 스크롤" 섹션. 긴 글 스크롤 시 글이 root border에서 clip되도록 wrapper padding-top + textarea padding-bottom 패턴 사용. 레이아웃 변경 시 반드시 그 규약 유지.
 
 ### Props 시그니처
 ```tsx

package/assets/prompts/primitives/scroll.md

@@ -73,3 +73,72 @@
   padding: var(--space-2);
 }
 ```
+
+---
+
+## Textarea / 단일 콘텐츠 스크롤
+
+리스트가 아니라 **텍스트 하나**가 자라서 스크롤되는 경우(채팅 입력창, 코드 에디터, Markdown preview 등). 리스트 규약과 다른 **특수 패턴** 필요 — 브라우저가 scroll 컨테이너의 `padding-bottom`을 scroll 영역에 포함시키지 않는 알려진 이슈(Chrome/Safari/Firefox 공통) 때문.
+
+### 왜 특수한가
+- 리스트는 "items wrapper에 padding"이면 끝 — 각 item 자체가 콘텐츠라 scroll content의 일부.
+- textarea는 자신이 scroll 컨테이너면 **padding-top은 scroll track에 포함**(글이 거기까지 흘러옴)되지만, **padding-bottom은 scroll content 바깥**이 되어 "글이 bottom padding 앞에서 미리 잘리는" 현상이 생김.
+
+### 금지 패턴 (실제 ChatInput 작업 중 겪은 삽질)
+
+❌ **"root 전체에 padding"** — 글이 root padding 안쪽에서만 보이고 scroll clip이 root 안쪽 border에서 생겨 어색:
+```css
+.chatInput { padding: var(--space-2); }
+.textarea  { overflow-y: auto; }
+```
+
+❌ **"textarea 자체가 scroll + 상하 padding"** — padding-bottom이 scroll 밖이라 작동 안 함:
+```css
+.textarea { overflow-y: auto; padding: var(--space-1); }
+```
+
+### 정답 패턴 (ChatInput이 쓰는 구조)
+
+1. **root는 `padding: 0; overflow: hidden`** — scroll clip이 root border에서 생기도록.
+2. **별도 wrapper div(`.scroll`)에 overflow-y: auto + padding-top만**.
+3. **textarea는 flat, `padding-bottom`만** — 이게 scroll content의 일부가 됨.
+
+```css
+.root {
+  padding: 0;
+  overflow: hidden;             /* radius 안쪽에서 scroll clip */
+  border-radius: var(--radius-sm);
+  border: var(--hairline) solid var(--border);
+}
+
+.scroll {
+  overflow-y: auto;
+  max-height: calc(var(--text-base) * 1.5 * 8);
+  padding: var(--space-3) var(--space-3) 0;   /* top만 */
+}
+
+.textarea {
+  display: block;
+  width: 100%;
+  padding: 0 0 var(--space-3);                /* bottom만 */
+  background: transparent;
+  border: 0;
+  outline: none;
+  resize: none;
+  overflow: hidden;                           /* 자체 스크롤 금지 */
+  font: inherit;
+  line-height: 1.5;
+}
+```
+
+이 구조에서 짧은 글은 wrapper 안에 스크롤 없음, padding이 "숨 공간"처럼 보임.
+긴 글은:
+- wrapper max-height 초과 → wrapper 스크롤
+- 아래로 스크롤 시 글이 wrapper padding-top을 통과해 **root 상단 border에서 자연스레 clip**
+- 끝까지 스크롤 시 글이 textarea padding-bottom을 통과해 **root 하단 border에서 자연스레 clip**
+
+### 함께 적용되는 레이아웃 룰
+
+- `root`에 다른 섹션(attachment bar, footer 등)이 함께 있으면 각 섹션이 **자기 상하 padding을 책임**. `root`는 어떤 상·하 패딩도 걸지 않음.
+- textarea JS autoResize는 `textarea.style.height = textarea.scrollHeight` 패턴. `scrollHeight`가 padding 포함이라 그대로 됨.
+

package/package.json

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