@conscience-technology/ctds 0.1.0 → 0.1.2

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

@@ -6,13 +6,24 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
-  padding: var(--space-3) var(--space-3);
+  padding: var(--space-2) var(--space-3);
   background: var(--bg);
   border: var(--hairline) solid var(--border);
   border-radius: var(--radius-sm);
   transition: var(--transition-colors), var(--transition-ring);
 }
 
+/* MultiLine — root 상하 padding은 좁게. textarea 내부 padding이 숨 쉴 공간 책임.
+   룰: 긴 글 스크롤 시 textarea 안의 bottom padding 영역까지 흘러 들어가 자연스레 잘림. */
+.shape-multi {
+  padding: var(--space-2) var(--space-3) var(--space-2);
+}
+
+/* SingleLine은 상하 대칭 유지 */
+.shape-single {
+  padding: var(--space-2) var(--space-3);
+}
+
 /* radius variant — Shape 축에 반응 */
 .radius-square { border-radius: var(--radius-xs); }
 .radius-rounded { border-radius: var(--radius-sm); }
@@ -64,15 +75,26 @@
 .multiStack {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-1);
   width: 100%;
   min-width: 0;
 }
+/* multiScroll — 바깥 스크롤 컨테이너. padding은 안쪽 트랙 역할.
+   룰: 긴 글이 들어오면 textarea가 자람 → 이 wrapper가 max-height로 넘침 →
+   스크롤 시 텍스트가 padding 영역을 통과해 wrapper border에서 자연스레 잘림. */
+.multiScroll {
+  overflow-y: auto;
+  max-height: calc(var(--text-base) * 1.5 * 8); /* ~8 lines */
+  padding: var(--space-1) var(--space-1);
+}
+
+/* textarea 자체는 flat — padding/scroll 없음. 콘텐츠 높이로만 자람. */
 .multiField {
+  display: block;
   width: 100%;
   min-width: 0;
-  min-height: var(--space-6);
-  padding: var(--space-1) var(--space-1);
+  min-height: calc(var(--text-base) * 1.5);
+  padding: 0;
   background: transparent;
   border: 0;
   outline: none;
@@ -81,7 +103,7 @@
   font: inherit;
   font-size: var(--text-base);
   line-height: 1.5;
-  overflow-y: hidden;
+  overflow: hidden;
 }
 .multiField::placeholder {
   color: var(--fg-muted);
@@ -103,7 +125,7 @@
 .singleField {
   flex: 1 1 auto;
   min-width: 0;
-  padding: var(--space-1) var(--space-1);
+  padding: 0 var(--space-1);
   background: transparent;
   border: 0;
   outline: none;

package/assets/components/ChatInput/ChatInput.tsx

@@ -102,27 +102,22 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     } = props;
 
     const taRef = useRef<HTMLTextAreaElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
     const fileRef = useRef<HTMLInputElement>(null);
 
     const canSend = !disabled && (value.trim().length > 0 || attachments.length > 0);
     const showStop = isStreaming && !!onStop;
 
-    /* autoResize for multi */
+    /* autoResize for multi — textarea는 content에 맞춰 자람(scroll 아님).
+       외부 scroll wrapper가 max-height를 책임 → 넘치면 wrapper가 스크롤.
+       룰: 스크롤이 wrapper에 생기므로 wrapper padding이 "트랙 역할" (padding 안쪽까지 흘러 border에서 잘림). */
     useLayoutEffect(() => {
       if (shape !== "multi") return;
       const el = taRef.current;
       if (!el) return;
-      const cs = getComputedStyle(el);
-      const lh = parseFloat(cs.lineHeight);
-      const pt = parseFloat(cs.paddingTop);
-      const pb = parseFloat(cs.paddingBottom);
-      const chrome = pt + pb;
-      const maxH = lh * maxRows + chrome;
       el.style.height = "auto";
-      const next = Math.min(el.scrollHeight, maxH);
-      el.style.height = `${next}px`;
-      el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
-    }, [shape, value, maxRows]);
+      el.style.height = `${el.scrollHeight}px`;
+    }, [shape, value]);
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
@@ -296,17 +291,19 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
             </>
           ) : (
             <div className={styles.multiStack}>
-              <textarea
-                ref={taRef}
-                className={styles.multiField}
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={placeholder}
-                disabled={disabled}
-                rows={1}
-                aria-label={placeholder}
-              />
+              <div className={styles.multiScroll}>
+                <textarea
+                  ref={taRef}
+                  className={styles.multiField}
+                  value={value}
+                  onChange={(e) => onChange(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={placeholder}
+                  disabled={disabled}
+                  rows={1}
+                  aria-label={placeholder}
+                />
+              </div>
               <div className={styles.footer}>
                 {AttachButton}
                 {ModelAndSend}

package/assets/components/_data.ts

@@ -581,7 +581,6 @@ 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",
@@ -593,7 +592,6 @@ 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 components: { id: string; title: string; items: string[] }[] = [

package/bin/ctds.js

@@ -69,6 +69,7 @@ Examples:
   ctds init
   ctds init --dry       아무것도 쓰지 않고 어떤 파일이 생성될지만 출력
   ctds init --force     기존 파일이 있어도 덮어쓰기
+  ctds init --no-open   설치 후 dev 서버 자동 실행 + 브라우저 오픈 건너뛰기
   ctds update           최신으로 업데이트 (충돌 파일만 prompt)
   ctds update --dry     어떤 파일이 바뀔지, 충돌이 몇 개인지만 보기
   ctds update --force   수정 감지 무시, 전부 덮어쓰기 (git 커밋 후에만)

package/package.json

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

package/src/commands/init.js

@@ -9,8 +9,9 @@
  *      (layout.tsx wrapper, globals.css import — 자동 패치는 깨지기 쉬워서 안내만)
  *
  * 플래그:
- *   --dry    실제 쓰기 없이 어떤 파일이 생성될지만 출력
- *   --force  기존 파일 있어도 덮어쓰기
+ *   --dry      실제 쓰기 없이 어떤 파일이 생성될지만 출력
+ *   --force    기존 파일 있어도 덮어쓰기
+ *   --no-open  설치 후 dev 서버 자동 실행 + 브라우저 오픈 건너뛰기
  */
 
 import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync } from "node:fs";
@@ -21,6 +22,7 @@ import { getAssetSources } from "../utils/assets.js";
 import { checkMissingDeps, renderInstallCmd } from "../utils/deps.js";
 import { c, step, success, warn, info, kv } from "../utils/log.js";
 import { computeFilesMap, writeMeta } from "../utils/meta.js";
+import { hasDevScript, startDevAndOpen } from "../utils/launch.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const CLI_PKG_PATH = join(__dirname, "..", "..", "package.json");
@@ -35,6 +37,7 @@ function readCliVersion() {
 export async function run(args) {
   const dry = args.includes("--dry");
   const force = args.includes("--force");
+  const noOpen = args.includes("--no-open");
 
   console.log("");
   console.log(c.bold("CTDS 설치"));
@@ -168,13 +171,40 @@ export async function run(args) {
   console.log(c.bold("다음 단계"));
   console.log(c.dim("—").repeat(40));
   console.log("");
-  console.log(`  ${c.cyan("npm run dev")}`);
-  console.log(`  → ${c.cyan("http://localhost:3000/ctds")} 접속`);
-  console.log(`  → 온보딩 돌리고 "적용"하면 ${c.bold("ctds.config.json")}·${c.bold("DESIGN.md")}가 생성됩니다.`);
-  console.log("");
-  console.log(c.dim("이 두 파일을 커밋하면 AI 에이전트(Claude Code 등)가 참조해"));
-  console.log(c.dim("프로젝트의 축에 맞게 컴포넌트·페이지를 생성합니다."));
+
+  // 수동 설정이 남은 경우(globals.css import / layout.tsx wrapper / 의존성) 자동 실행 보류.
+  // 서버가 안 뜨거나 뜨더라도 화면이 깨져서 혼란만 커짐.
+  const needsManual = missing.length > 0;
+
+  if (dry || noOpen || needsManual || !hasDevScript(cwd)) {
+    console.log(`  ${c.cyan("npm run dev")}`);
+    console.log(`  → ${c.cyan("http://localhost:3000/ctds")} 접속`);
+    console.log(`  → 온보딩 돌리고 "적용"하면 ${c.bold("ctds.config.json")}·${c.bold("DESIGN.md")}가 생성됩니다.`);
+    console.log("");
+    console.log(c.dim("이 두 파일을 커밋하면 AI 에이전트(Claude Code 등)가 참조해"));
+    console.log(c.dim("프로젝트의 축에 맞게 컴포넌트·페이지를 생성합니다."));
+    console.log("");
+    if (needsManual) {
+      info("위 수동 설정(의존성 설치 등) 끝낸 뒤 `npm run dev`로 띄워주세요.");
+      console.log("");
+    }
+    return;
+  }
+
+  // 자동: dev 서버 띄우고 /, /ctds 두 탭 오픈.
+  info("dev 서버를 띄우고 홈 + /ctds 온보딩을 자동으로 엽니다.");
+  console.log(c.dim("  (끄려면 Ctrl+C — 다음부터 수동으로 돌리려면 `ctds init --no-open`)"));
   console.log("");
+
+  startDevAndOpen(cwd, {
+    port: 3000,
+    urls: ["/", "/ctds"],
+    onReady: () => {
+      console.log("");
+      success("브라우저를 열었어요. 온보딩 돌리고 \"적용\"하면 ctds.config.json + DESIGN.md가 생성됩니다.");
+      console.log("");
+    },
+  });
 }
 
 function renderCtdsRoute(project) {

package/src/utils/launch.js

@@ -0,0 +1,94 @@
+/**
+ * dev 서버 실행 + 브라우저 오픈 유틸.
+ * 외부 의존성 없이 node 내장만 사용.
+ */
+
+import { spawn } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { get as httpGet } from "node:http";
+
+/** package.json의 scripts.dev 존재 확인 */
+export function hasDevScript(cwd) {
+  const pkgPath = join(cwd, "package.json");
+  if (!existsSync(pkgPath)) return false;
+  try {
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+    return Boolean(pkg.scripts && pkg.scripts.dev);
+  } catch {
+    return false;
+  }
+}
+
+/** 플젝에 쓰이는 패키지 매니저 감지 (lockfile 기반) */
+export function detectPackageManager(cwd) {
+  if (existsSync(join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(cwd, "yarn.lock"))) return "yarn";
+  if (existsSync(join(cwd, "bun.lockb")) || existsSync(join(cwd, "bun.lock"))) return "bun";
+  return "npm";
+}
+
+/** localhost:port 에 GET / 가 응답할 때까지 polling. 타임아웃 ms 초과 시 reject. */
+export function waitForServer(port, { timeoutMs = 60_000, intervalMs = 500 } = {}) {
+  const start = Date.now();
+  return new Promise((resolve, reject) => {
+    const tick = () => {
+      const req = httpGet(
+        { host: "127.0.0.1", port, path: "/", timeout: 1500 },
+        (res) => {
+          res.resume();
+          resolve();
+        },
+      );
+      req.on("error", () => {
+        if (Date.now() - start > timeoutMs) {
+          reject(new Error(`dev 서버 타임아웃 (${timeoutMs}ms, port ${port})`));
+          return;
+        }
+        setTimeout(tick, intervalMs);
+      });
+      req.on("timeout", () => {
+        req.destroy();
+      });
+    };
+    tick();
+  });
+}
+
+/** 플랫폼별 브라우저 오픈 명령 */
+export function openUrl(url) {
+  const plat = process.platform;
+  const cmd =
+    plat === "darwin" ? "open" : plat === "win32" ? "cmd" : "xdg-open";
+  const args = plat === "win32" ? ["/c", "start", "", url] : [url];
+  const child = spawn(cmd, args, { stdio: "ignore", detached: true });
+  child.unref();
+}
+
+/**
+ * dev 서버 띄우고(stdio inherit) 백그라운드에서 URL 폴링 후 브라우저 오픈.
+ * dev 서버 자체는 포그라운드 — 사용자가 Ctrl+C로 종료.
+ */
+export function startDevAndOpen(cwd, { port = 3000, urls = ["/"], onReady } = {}) {
+  const pm = detectPackageManager(cwd);
+  const child = spawn(pm, ["run", "dev"], {
+    cwd,
+    stdio: "inherit",
+    shell: process.platform === "win32",
+  });
+
+  waitForServer(port, { timeoutMs: 90_000 })
+    .then(() => {
+      for (const path of urls) {
+        openUrl(`http://localhost:${port}${path}`);
+      }
+      if (onReady) onReady();
+    })
+    .catch((err) => {
+      console.error("");
+      console.error(`  브라우저 자동 오픈 실패: ${err.message}`);
+      console.error(`  수동으로 접속하세요: ${urls.map((p) => `http://localhost:${port}${p}`).join(" , ")}`);
+    });
+
+  return child;
+}