@conscience-technology/ctds 0.1.11 → 0.1.13

package/assets/components/AIMessage/AIMessage.module.css

@@ -22,16 +22,24 @@
   min-width: 0;
 }
 
-/* isGenerating — 한 글자씩 통통 wave */
+/* isGenerating — 한 글자씩 통통 wave. Spinner+텍스트 세로 중앙 정렬. */
 .root[data-generating="true"] .body {
   color: var(--fg-muted);
   font-weight: var(--font-weight-medium);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  line-height: 1.4;
 }
 
 .generatingSpinner {
-  color: var(--fg-muted);
-  vertical-align: middle;
-  margin-right: var(--space-1);
+  color: var(--primary);
+  flex: 0 0 auto;
+}
+
+.generatingText {
+  display: inline-flex;
+  align-items: center;
 }
 
 .bounceChar {

package/assets/components/AIMessage/AIMessage.tsx

@@ -85,7 +85,9 @@ export function AIMessage({
         {isGenerating ? (
           <>
             <Spinner variant="lottie-dots" size="sm" className={styles.generatingSpinner} />
-            {typeof children === "string" ? renderBouncingText(children) : children}
+            <span className={styles.generatingText}>
+              {typeof children === "string" ? renderBouncingText(children) : children}
+            </span>
           </>
         ) : (
           children

package/assets/components/AttachmentThumb/AttachmentThumb.module.css

@@ -53,15 +53,36 @@
   height: calc(var(--at-size) * 0.60);
 }
 
-/* Loading — fg를 어둡게 깐 위에 흰색 lottie spinner.
-   Spinner의 colorBind가 바깥 color를 읽으므로 .loading에 색 지정. */
+/* Loading — bg-muted ↔ 더 어두운 톤 사이를 미묘하게 흐르는 그라데이션 + 중앙 흰색 lottie spinner.
+   Spinner colorBind가 .loading의 color(=fixed-white)를 상속받아 흰색으로 recolor된다. */
 .loading {
-  background: color-mix(in oklch, var(--fg) 55%, transparent);
+  background: var(--bg-muted);
   color: var(--fixed-white);
   overflow: hidden;
 }
-/* wide 로티도 썸네일 안에 꽉 차 보이게 scale-up (overflow:hidden으로 안전) */
+.loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    120deg,
+    var(--bg-muted) 0%,
+    color-mix(in oklch, var(--fg) 18%, var(--bg-muted)) 50%,
+    var(--bg-muted) 100%
+  );
+  background-size: 220% 220%;
+  border-radius: inherit;
+  animation: at-shimmer calc(var(--duration-slower) * 6) var(--ease-in-out) infinite;
+}
+@keyframes at-shimmer {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+/* Spinner는 pulse 위 레이어로 중앙 고정, wide 로티도 꽉 차 보이게 scale-up */
 .loading > span[role="status"] {
+  position: relative;
+  z-index: var(--z-raise);
   transform: scale(1.6);
   transform-origin: center;
 }

package/assets/components/MessageSources/MessageSources.module.css

@@ -4,14 +4,14 @@
 .root {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-0_5) var(--space-2) var(--space-0_5) var(--space-1);
+  gap: var(--space-1_5);
+  padding: var(--space-1_5) var(--space-3) var(--space-1_5) var(--space-2);
   border: 0;
   background: transparent;
   color: var(--fg-muted);
   border-radius: var(--radius-full);
   cursor: pointer;
-  font-size: var(--text-xs);
+  font-size: var(--text-sm);
   line-height: 1;
   transition: var(--transition-colors);
 }

package/assets/components/MessageSources/MessageSources.tsx

@@ -32,7 +32,6 @@ export function MessageSources({
   ...rest
 }: MessageSourcesProps) {
   const visible = sources.slice(0, maxFavicons);
-  const extra = sources.length - visible.length;
 
   const cls = [styles.root, className].filter(Boolean).join(" ");
 
@@ -55,10 +54,7 @@ export function MessageSources({
           </span>
         ))}
       </span>
-      <span className={styles.label}>
-        {label}
-        {extra > 0 ? <span className={styles.extra}> +{extra}</span> : null}
-      </span>
+      <span className={styles.label}>{label}</span>
     </button>
   );
 }

package/assets/components/MessageState/MessageState.module.css

@@ -0,0 +1,66 @@
+/* MessageState — AI 응답 중 "뭘 하고 있는지" 라인.
+   Lottie/Spinner 리더 + 통통거리는 라벨. done=true면 ✓ 로 전환, 라벨 정적. */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  line-height: 1.4;
+  font-weight: var(--font-weight-medium);
+}
+.root[data-done] {
+  color: var(--fg);
+  font-weight: var(--font-weight-regular);
+}
+
+.leadIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-4);
+  height: var(--space-4);
+  color: var(--primary);
+  flex: 0 0 auto;
+}
+.root[data-done] .leadIcon {
+  color: var(--success);
+}
+
+.leadSpinner {
+  color: var(--primary);
+  flex: 0 0 auto;
+}
+
+/* 통통거리는 라벨 (AIMessage의 generating 패턴과 동일 — 중복 정의) */
+.label {
+  display: inline-flex;
+  align-items: center;
+}
+.bounceChar {
+  display: inline-block;
+  animation: msgstate-char-bounce calc(var(--duration-slower) * 5) var(--ease-in-out) infinite;
+}
+.bounceSpace {
+  display: inline-block;
+  white-space: pre;
+}
+@keyframes msgstate-char-bounce {
+  0%, 70%, 100% {
+    transform: translateY(0);
+    opacity: 0.6;
+  }
+  35% {
+    transform: translateY(calc(-1.5px * var(--motion-distance-scale))); /* lint-hardcoded: ignore */
+    opacity: 1;
+  }
+}
+
+/* done일 땐 애니 정지 (bounce span도 opacity 1 static) */
+.root[data-done] .bounceChar,
+.root[data-done] .bounceSpace {
+  animation: none;
+  opacity: 1;
+  transform: none;
+}

package/assets/components/MessageState/MessageState.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import {
+  MagnifyingGlass as PhSearch,
+  PencilSimple as PhPencil,
+  Image as PhImage,
+  VideoCamera as PhVideo,
+  File as PhFile,
+  Check as PhCheck,
+} from "@phosphor-icons/react";
+import { Spinner } from "@/components/ctds/Spinner";
+import styles from "./MessageState.module.css";
+
+export type MessageStateKind =
+  | "generating"
+  | "searching"
+  | "memory"
+  | "image"
+  | "video"
+  | "file"
+  | "custom";
+
+export interface MessageStateProps extends HTMLAttributes<HTMLDivElement> {
+  kind?: MessageStateKind;
+  /** 라벨 override. kind별 기본 라벨이 있지만 커스터마이즈 가능. */
+  message?: ReactNode;
+  /** 완료 상태 — true면 spinner 자리에 ✓, 라벨 통통거림 멈춤. */
+  done?: boolean;
+  /** 커스텀 아이콘 — kind="custom"이거나 override 하고 싶을 때. */
+  icon?: ReactNode;
+}
+
+const DEFAULT_MESSAGE: Record<MessageStateKind, string> = {
+  generating: "응답 생성 중…",
+  searching: "Searching the web…",
+  memory: "Updated saved memory",
+  image: "Looking at the image…",
+  video: "Reviewing the video…",
+  file: "Processing file…",
+  custom: "",
+};
+
+const KIND_ICON: Record<MessageStateKind, React.ComponentType<any> | null> = {
+  generating: null, // Spinner만
+  searching: PhSearch,
+  memory: PhPencil,
+  image: PhImage,
+  video: PhVideo,
+  file: PhFile,
+  custom: null,
+};
+
+function renderBouncingText(text: string) {
+  const chars = Array.from(text);
+  return chars.map((ch, i) => {
+    if (ch === " ") {
+      return (
+        <span key={i} className={styles.bounceSpace}>
+          {" "}
+        </span>
+      );
+    }
+    return (
+      <span
+        key={i}
+        className={styles.bounceChar}
+        style={{ animationDelay: `calc(${i} * var(--duration-base))` }}
+      >
+        {ch}
+      </span>
+    );
+  });
+}
+
+export function MessageState({
+  kind = "generating",
+  message,
+  done = false,
+  icon,
+  className,
+  ...rest
+}: MessageStateProps) {
+  const label = message ?? DEFAULT_MESSAGE[kind];
+  const KindIcon = KIND_ICON[kind];
+
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+
+  const leadIcon = done ? (
+    <PhCheck className={styles.leadIcon} weight="bold" aria-hidden />
+  ) : icon ? (
+    <span className={styles.leadIcon}>{icon}</span>
+  ) : KindIcon ? (
+    <KindIcon className={styles.leadIcon} weight="regular" aria-hidden />
+  ) : (
+    <Spinner variant="lottie-dots" size="sm" className={styles.leadSpinner} />
+  );
+
+  return (
+    <div className={cls} data-done={done || undefined} {...rest}>
+      {leadIcon}
+      <span className={styles.label}>
+        {done || typeof label !== "string" ? label : renderBouncingText(label)}
+      </span>
+    </div>
+  );
+}

package/assets/components/MessageState/index.ts

@@ -0,0 +1,2 @@
+export { MessageState } from "./MessageState";
+export type { MessageStateProps, MessageStateKind } from "./MessageState";

package/assets/components/Spinner/LottiePlayer.tsx

@@ -53,8 +53,14 @@ export function LottiePlayer({ name, className }: LottiePlayerProps) {
       // 바깥 요소의 computed color를 읽어 재색상화
       const el = containerRef.current;
       const css = el ? getComputedStyle(el).color : "rgb(0,0,0)";
-      const rgb = parseCssColor(css) ?? [0, 0, 0];
-      setData(recolorLottie(raw, rgb));
+      const rgb = parseCssColor(css);
+      // eslint-disable-next-line no-console
+      console.log(
+        `[LottiePlayer] name=${name} | computed.color="${css}" | parsed=${
+          rgb ? `[${rgb.map((v) => (v * 255).toFixed(0)).join(",")}]` : "NULL(fallback to black)"
+        }`,
+      );
+      setData(recolorLottie(raw, rgb ?? [0, 0, 0]));
     });
     return () => {
       cancelled = true;

package/assets/components/Spinner/Spinner.module.css

@@ -9,7 +9,6 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  color: currentColor;
   width: var(--loader-size, var(--loader-size-sm));
   height: var(--loader-size, var(--loader-size-sm));
   flex-shrink: 0;

package/assets/components/Spinner/lottieColor.ts

@@ -8,39 +8,50 @@
 
 export type Rgb = [number, number, number];
 
+/** oklch(L C H) → sRGB [r,g,b] 0~1. L은 0~1, C는 0~0.4, H는 degree.
+ *  CTDS 토큰이 전부 oklch라 브라우저 Canvas 미지원을 우회하기 위해 수동 변환. */
+function oklchToRgb(L: number, C: number, Hdeg: number): Rgb {
+  const H = (Hdeg * Math.PI) / 180;
+  const a = C * Math.cos(H);
+  const b = C * Math.sin(H);
+  // OKLab → linear sRGB (Björn Ottosson)
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
+  // linear → sRGB gamma
+  const toSrgb = (x: number) => {
+    const c = Math.max(0, Math.min(1, x));
+    return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  };
+  return [toSrgb(r), toSrgb(g), toSrgb(bl)];
+}
+
 /** CSS 색 문자열 → [r,g,b] 0~1 정규화. 서버에서는 null 반환.
- *  oklch()/color() 같은 비-sRGB 색공간을 Canvas 2D fillStyle로 넣고 다시 읽어
- *  브라우저가 rgb()/rgba() 문자열로 토해내게 한 뒤 파싱 (가장 안정적인 변환). */
+ *  oklch()는 수동 변환(브라우저 Canvas가 oklch 입력을 받지 못하는 경우가 많음).
+ *  rgb()/rgba()/#hex는 그대로 파싱. */
 export function parseCssColor(css: string): Rgb | null {
   if (typeof document === "undefined") return null;
-  const canvas = document.createElement("canvas");
-  canvas.width = 1;
-  canvas.height = 1;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return null;
-  ctx.fillStyle = "#000";
-  ctx.fillStyle = css;
-  const computed = ctx.fillStyle as string;
-  // Canvas가 지원 못 하면 "#000"이 그대로 남음 → 원본이 지원되지 않는 색이거나 oklch 미지원 브라우저.
-  // getComputedStyle로 폴백 (대부분 rgb() 반환).
-  let hex = /^#([0-9a-f]{6})$/i.exec(computed);
-  if (!hex) {
-    const el = document.createElement("div");
-    el.style.color = css;
-    document.body.appendChild(el);
-    ctx.fillStyle = "#000";
-    ctx.fillStyle = getComputedStyle(el).color;
-    document.body.removeChild(el);
-    hex = /^#([0-9a-f]{6})$/i.exec(ctx.fillStyle as string);
-  }
-  if (hex) {
-    const n = parseInt(hex[1], 16);
-    return [((n >> 16) & 0xff) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
+  const trimmed = css.trim();
+  // oklch(L C H) 또는 oklch(L C H / A) — 수동 변환
+  const oklchMatch = /^oklch\(\s*([^\s,/)]+)[\s,]+([^\s,/)]+)[\s,]+([^\s,/)]+)/i.exec(trimmed);
+  if (oklchMatch) {
+    const parsePart = (s: string, scale: number) =>
+      s.endsWith("%") ? (parseFloat(s) / 100) * scale : parseFloat(s);
+    const L = parsePart(oklchMatch[1], 1);
+    const C = parsePart(oklchMatch[2], 0.4);
+    const H = parseFloat(oklchMatch[3]);
+    if ([L, C, H].every((v) => Number.isFinite(v))) return oklchToRgb(L, C, H);
   }
-  // 최후 폴백 — rgba() / rgb() 문자열 파싱
-  const m = (computed as string).match(/-?\d+(\.\d+)?/g);
-  if (!m || m.length < 3) return null;
-  return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
+  // rgb() / rgba() / #hex — 숫자 파싱 (CSS Typed OM 없이 간단히)
+  const m = trimmed.match(/-?\d+(\.\d+)?/g);
+  if (m && m.length >= 3) return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
+  return null;
 }
 
 /** 색 자리를 target으로 치환. colorBind=true 전용 — 단색 로티 가정.

package/assets/components/_data.ts

@@ -606,6 +606,7 @@ export const componentSlugs: Record<string, string> = {
   "Message Quote": "chat/message-quote",
   "Message Sources": "chat/message-sources",
   "Message Table": "chat/message-table",
+  "Message State": "chat/message-state",
 };
 
 /** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
@@ -672,7 +673,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     items: [
       "File Icon", "Attachment Thumb", "Attachment Chip", "Quotation Bar", "Chat Input",
       "Bubble", "Message Actions", "User Message", "AI Message",
-      "Code Block", "Message Quote", "Message Sources", "Message Table",
+      "Code Block", "Message Quote", "Message Sources", "Message Table", "Message State",
       "Chat Sidebar",
     ],
   },

package/assets/prompts/components/message-sources.md

@@ -1,11 +1,11 @@
 # Message Sources
 
 ### 원칙
-AIMessage의 **하단 액션바 옆에 inline으로 붙는 작은 chip**. 겹친 favicon stack + 첫 소스 라벨 + `+N` 패턴. 블록이 아니라 액션 액세서리 — 실제론 [[components/ai-message]]의 `sources` prop으로 전달해 자동 배치.
+AIMessage의 **하단 액션바 옆에 inline으로 붙는 chip**. 겹친 favicon stack + 라벨("Sources"). 블록이 아니라 액션 액세서리 — 실제론 [[components/ai-message]]의 `sources` prop으로 전달해 자동 배치. 전체 소스 리스트는 chip 클릭 시 popover로 (소비처가 조립).
 
 ### Do
 - `<AIMessage sources={...}>` prop으로 전달. standalone으로 쓸 일은 거의 없음.
-- `maxFavicons`로 겹쳐 보여줄 favicon 개수 조정 (기본 3). 나머지는 `+N`.
+- `maxFavicons`로 겹쳐 보여줄 favicon 개수 조정 (기본 3). 넘어도 라벨은 그대로 — 숫자 노출 안 함(라벨만).
 - 각 소스에 `icon` 넘겨 favicon을 명시, 없으면 중성 원형 placeholder.
 - 클릭 시 소비처에서 popover(소스 전체 리스트) 열기 — 디자인 시스템 범위 밖.
 

package/assets/prompts/components/message-state.md

@@ -0,0 +1,53 @@
+# Message State
+
+### 원칙
+AI 응답 중간에 쌓이는 **"뭘 하고 있는지"** 라인. Lottie-ish Spinner 또는 kind별 아이콘 + 통통거리는 라벨. `done=true`면 ✓ 체크 + 라벨 정적. [[components/ai-message]] 안에서 children으로 여러 개 쌓아 "작업 플로우" 전달.
+
+### Do
+- `kind`로 상태 분류: generating / searching / memory / image / video / file / custom.
+- 완료되면 **동일 state를 done=true로 유지** — 사라지면 흐름이 안 보임.
+- 라벨 override는 `message` prop. kind는 아이콘만 쓰고 커스텀 라벨 가능.
+- AIMessage 안의 children에 여러 MessageState를 쌓고, 끝나면 아래에 실제 응답 본문.
+
+### Don't
+- MessageState를 bubble로 감싸지 않는다 — 플랫 라인.
+- Spinner와 kind 아이콘을 동시에 띄우지 않는다 — 하나만 (generating=spinner, 그 외=kind icon).
+- done 상태에서 라벨 통통거리면 안 됨 — 애니 정지.
+- 메시지 완료 후에도 MessageState 계속 노출하지 말고 **접거나 하나로 요약** (예: “3 steps completed ✓”).
+
+### Fallback
+kind 애매하면 `generating`, message 애매하면 kind별 기본.
+
+### 관련
+- [[components/ai-message]] — 상위 소비처 (`isGenerating`은 전체 메시지가 생성 중일 때, MessageState는 **메시지 안의 세부 작업**)
+- [[components/spinner]] — lottie-dots variant 재사용
+
+### Props 시그니처
+```tsx
+<MessageState
+  kind="generating | searching | memory | image | video | file | custom"
+  message={ReactNode}                 // kind별 기본 라벨 override
+  done={boolean}                      // true → ✓ + 애니 정지
+  icon={ReactNode}                    // kind="custom" 또는 override
+/>
+```
+
+### Kind 매트릭스
+| kind | 아이콘 | 기본 라벨 |
+|---|---|---|
+| generating | Spinner (lottie-dots) | 응답 생성 중… |
+| searching | MagnifyingGlass | Searching the web… |
+| memory | PencilSimple | Updated saved memory |
+| image | Image | Looking at the image… |
+| video | VideoCamera | Reviewing the video… |
+| file | File | Processing file… |
+| custom | `icon` prop | `message` prop |
+
+### 애니메이션
+- 라벨 각 글자 wave bounce — `duration-slower × 5` 주기, `duration-base` 간격으로 index 지연
+- done=true → `animation: none; opacity: 1; transform: none` 로 정지
+- 리더 아이콘: active primary 색, done success 색
+
+### 레이아웃
+- `inline-flex`, gap `space-2`, `text-sm`, line-height 1.4
+- 리더 `space-4` 정사각 (아이콘·spinner 둘 다)

package/package.json

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