@conscience-technology/ctds 0.1.10 → 0.1.12

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 {
@@ -60,12 +68,22 @@
 .body > :global(h3) {
   color: var(--fg-strong);
   font-weight: var(--font-weight-semibold);
-  margin: var(--space-3) 0 var(--space-1);
+  margin: var(--space-6) 0 var(--space-2);
+  line-height: 1.3;
+}
+/* 본문 첫 요소는 상단 margin 제거 (AIMessage body gap이 대신) */
+.body > :first-child {
+  margin-top: 0;
 }
 .body > :global(p) {
   margin: var(--space-2) 0;
 }
-/* 리스트 — 들여쓰기 최소화. 마커는 primary로 채워 포인트. */
+/* 블록 요소 (CodeBlock·MessageQuote·MessageSources·MessageTable wrapper) — 섹션 분리감 */
+.body > :global(div),
+.body > :global(blockquote) {
+  margin: var(--space-3) 0;
+}
+/* 리스트 — 들여쓰기 최소화. 마커는 fg-muted(다크그레이보다 한 단계 연함). */
 .body :global(ol),
 .body :global(ul) {
   padding-left: var(--space-4);
@@ -76,7 +94,7 @@
   padding-left: 0;
 }
 .body :global(li::marker) {
-  color: var(--primary);
+  color: var(--fg-muted);
   font-variant-numeric: tabular-nums;
 }
 /* 중첩 리스트 — 조금만 더 들여쓰기 */
@@ -95,6 +113,8 @@
 
 .actions {
   display: flex;
+  align-items: center;
+  gap: var(--space-2);
 }
 
 /* visibility=show: 상시 */

package/assets/components/AIMessage/AIMessage.tsx

@@ -5,6 +5,10 @@ import {
   MessageActions,
   type MessageAction,
 } from "@/components/ctds/MessageActions";
+import {
+  MessageSources,
+  type MessageSource,
+} from "@/components/ctds/MessageSources";
 import { Spinner } from "@/components/ctds/Spinner";
 import styles from "./AIMessage.module.css";
 
@@ -19,6 +23,10 @@ export interface AIMessageProps extends HTMLAttributes<HTMLDivElement> {
   actionsVisibility?: AIMessageActionsVisibility;
   /** 액션 커스터마이즈. 기본 [copy, regenerate]. 비우려면 []. */
   actions?: MessageAction[];
+  /** 소스 목록 — 액션바 옆에 inline chip으로 노출. */
+  sources?: MessageSource[];
+  /** sources chip 클릭 시 (popover 열기 등). */
+  onSourcesClick?: () => void;
   /** 생성 중이면 액션 숨김. */
   isGenerating?: boolean;
 }
@@ -55,12 +63,15 @@ export function AIMessage({
   label,
   actionsVisibility = "hover",
   actions = DEFAULT_ACTIONS,
+  sources,
+  onSourcesClick,
   isGenerating = false,
   className,
   ...rest
 }: AIMessageProps) {
   const cls = [styles.root, className].filter(Boolean).join(" ");
-  const hasActions = actions.length > 0 && !isGenerating;
+  const hasSources = sources && sources.length > 0 && !isGenerating;
+  const hasActions = (actions.length > 0 || hasSources) && !isGenerating;
 
   return (
     <div
@@ -74,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
@@ -83,6 +96,9 @@ export function AIMessage({
       {hasActions ? (
         <div className={styles.actions}>
           <MessageActions align="start" actions={actions} />
+          {hasSources ? (
+            <MessageSources sources={sources!} onClick={onSourcesClick} />
+          ) : null}
         </div>
       ) : null}
     </div>

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

@@ -38,7 +38,7 @@
   justify-content: center;
   padding: 0;
   border: 0;
-  background: var(--bg-muted);
+  background: transparent;
   color: var(--fg-muted);
   border-radius: var(--radius-sm);
   cursor: pointer;
@@ -47,8 +47,8 @@
   transition: var(--transition-colors);
 }
 .copyBtn:hover {
-  background: var(--bg);
-  color: var(--fg);
+  background: var(--hover);
+  color: var(--fg-strong);
 }
 .copyBtn:focus-visible {
   outline: none;

package/assets/components/MessageQuote/MessageQuote.module.css

@@ -12,7 +12,18 @@
 }
 
 .blockquote {
+  position: relative;
   padding-left: var(--space-4);
-  border-left: var(--space-0_5) solid var(--border-strong);
   color: var(--fg-muted);
 }
+/* bar를 pseudo로 — 상·하에서 살짝 들어가 짧은 느낌 */
+.blockquote::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: var(--space-1);
+  bottom: var(--space-1);
+  width: var(--space-0_5);
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+}

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

@@ -1,63 +1,58 @@
-/* MessageSources — AIMessage 하단 소스 chip 리스트. */
+/* MessageSources — AIMessage 액션바 inline chip.
+   [□□□ 겹친 favicon] Sources +N 형태. 작고 가벼운 chip. */
 
 .root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.label {
-  font-size: var(--text-xs);
-  color: var(--fg-muted);
-  line-height: 1.2;
-}
-
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1);
-}
-
-.chip {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-1) var(--space-2);
-  background: var(--bg-subtle);
+  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);
-  color: var(--fg);
-  font-size: var(--text-xs);
-  text-decoration: none;
+  cursor: pointer;
+  font-size: var(--text-sm);
+  line-height: 1;
   transition: var(--transition-colors);
-  max-width: 100%;
-  min-width: 0;
 }
-.chip:hover {
-  background: var(--bg-muted);
+.root:hover {
+  background: var(--bg-subtle);
   color: var(--fg-strong);
 }
-.chip:focus-visible {
+.root:focus-visible {
   outline: none;
   box-shadow: var(--ring);
 }
 
-.chipIcon {
+/* favicon stack — 서로 살짝 겹침 (negative margin).
+   각 favicon은 box-shadow로 bg와 같은 cutout 링을 둘러 겹침 경계를 명확히. */
+.stack {
+  display: inline-flex;
+  align-items: center;
+}
+.favicon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--space-4);
   height: var(--space-4);
+  border-radius: var(--radius-full);
+  background: var(--bg-muted);
+  box-shadow: 0 0 0 var(--hairline) var(--bg);
+  overflow: hidden;
+  margin-left: calc(var(--space-1) * -1);
   flex: 0 0 auto;
-  color: var(--fg-muted);
 }
-.linkIcon {
-  width: 80%;
-  height: 80%;
+.favicon:first-child {
+  margin-left: 0;
 }
 
-.chipLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
+.label {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-0_5);
+}
+.extra {
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
 }

package/assets/components/MessageSources/MessageSources.tsx

@@ -1,50 +1,60 @@
 "use client";
 
-import type { HTMLAttributes } from "react";
-import { Link as PhLink } from "@phosphor-icons/react";
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
 import styles from "./MessageSources.module.css";
 
 export interface MessageSource {
   id: string;
   label: string;
   href?: string;
-  /** 좌측 favicon 등 커스텀 아이콘. 없으면 기본 Link. */
-  icon?: React.ReactNode;
+  /** 왼쪽 favicon. 없으면 중성 원형 placeholder. */
+  icon?: ReactNode;
 }
 
-export interface MessageSourcesProps extends HTMLAttributes<HTMLDivElement> {
+export interface MessageSourcesProps extends HTMLAttributes<HTMLButtonElement> {
   sources: MessageSource[];
-  /** 상단 라벨. 기본 "Sources". */
+  /** 라벨 override. 기본 "Sources". */
   label?: string;
+  /** 겹쳐 보여줄 favicon 최대 개수. 기본 3. */
+  maxFavicons?: number;
+  /** chip 클릭 시 (popover 열기 등). 외부에서 처리. */
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
+/** AIMessage의 MessageActions 바 옆에 inline으로 들어가는 작은 chip.
+ *  [겹친 favicon stack] + 라벨 (+N) 형태. 클릭 시 popover 등은 소비처가 조립. */
 export function MessageSources({
   sources,
   label = "Sources",
+  maxFavicons = 3,
+  onClick,
   className,
   ...rest
 }: MessageSourcesProps) {
+  const visible = sources.slice(0, maxFavicons);
+
   const cls = [styles.root, className].filter(Boolean).join(" ");
 
   return (
-    <div className={cls} {...rest}>
-      <div className={styles.label}>{label}</div>
-      <div className={styles.chips}>
-        {sources.map((s) => (
-          <a
+    <button
+      type="button"
+      className={cls}
+      onClick={onClick}
+      aria-label={`${label} (${sources.length})`}
+      {...rest}
+    >
+      <span className={styles.stack} aria-hidden>
+        {visible.map((s, i) => (
+          <span
             key={s.id}
-            className={styles.chip}
-            href={s.href || "#"}
-            target={s.href ? "_blank" : undefined}
-            rel={s.href ? "noopener noreferrer" : undefined}
+            className={styles.favicon}
+            style={{ ["--stack-i" as string]: String(i) }}
           >
-            <span className={styles.chipIcon}>
-              {s.icon ?? <PhLink className={styles.linkIcon} weight="regular" aria-hidden />}
-            </span>
-            <span className={styles.chipLabel}>{s.label}</span>
-          </a>
+            {s.icon ?? null}
+          </span>
         ))}
-      </div>
-    </div>
+      </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/MessageTable/MessageTable.module.css

@@ -1,11 +1,10 @@
-/* MessageTable — markdown table 톤.
-   wrapper는 가로 스크롤 컨테이너, 안쪽 table이 트랙. */
+/* MessageTable — AIMessage 안 markdown table. TableHeader/TableRow의 line variant 톤에 맞춤:
+   외곽 border 없음, header도 bg 없이 하단 hairline만. row도 하단 hairline만.
+   wrapper는 가로 overflow 시 scroll. */
 
 .root {
   width: 100%;
   overflow-x: auto;
-  border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-md);
 }
 
 .root :global(table) {
@@ -16,31 +15,45 @@
   table-layout: auto;
 }
 
-.root :global(thead) {
-  background: var(--bg-subtle);
+/* header — bg 투명, 하단 hairline만 */
+.root :global(thead tr) {
+  border-bottom: var(--hairline) solid var(--border);
+}
+.root :global(th) {
+  color: var(--fg-strong);
+  font-weight: var(--font-weight-medium);
+  text-align: left;
+  padding: var(--space-2) var(--space-2);
+  line-height: var(--label-sm-line-height);
+  font-size: var(--label-sm-size);
 }
 
-.root :global(th),
+/* 첫 셀 좌측 padding 0, 마지막 셀 우측 padding 0 — TableHeader.line과 짝 */
+.root :global(thead th:first-child),
+.root :global(tbody td:first-child) {
+  padding-left: 0;
+}
+.root :global(thead th:last-child),
+.root :global(tbody td:last-child) {
+  padding-right: 0;
+}
+
+/* row — 하단 hairline만, 배경 투명 */
+.root :global(tbody tr) {
+  border-bottom: var(--hairline) solid var(--border);
+}
+.root :global(tbody tr:last-child) {
+  border-bottom: 0;
+}
 .root :global(td) {
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-2) var(--space-2);
   text-align: left;
   vertical-align: top;
-  border-bottom: var(--hairline) solid var(--border);
   line-height: 1.5;
 }
 
-.root :global(th) {
-  color: var(--fg-strong);
-  font-weight: var(--font-weight-semibold);
-}
-
-/* 숫자 셀 좌측 정렬 유지(피드백 no-right-align-numbers), 숫자는 tabular */
+/* 숫자 셀도 좌측 정렬 유지 (feedback-no-right-align-numbers), 숫자 폭 균일 */
 .root :global(td),
 .root :global(th) {
   font-variant-numeric: tabular-nums;
 }
-
-/* 마지막 행 border 제거 */
-.root :global(tr:last-child td) {
-  border-bottom: 0;
-}

package/assets/components/Spinner/LottiePlayer.tsx

@@ -53,20 +53,33 @@ 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;
     };
   }, [name, entry.colorBind]);
 
-  const scaleStyle = entry.visualScale
-    ? ({ "--lottie-scale": entry.visualScale } as CSSProperties)
-    : undefined;
+  // offset은 bounds(--loader-size) 비율 기준. 스케일된 자기 요소 % 혼동을 피하려고 calc로 묶음.
+  const style = {
+    ...(entry.visualScale ? { "--lottie-scale": entry.visualScale } : {}),
+    ...(entry.offsetX
+      ? { "--lottie-offset-x": `calc(var(--loader-size) * ${entry.offsetX})` }
+      : {}),
+    ...(entry.offsetY
+      ? { "--lottie-offset-y": `calc(var(--loader-size) * ${entry.offsetY})` }
+      : {}),
+  } as CSSProperties;
 
   return (
-    <div ref={containerRef} className={className} style={scaleStyle}>
+    <div ref={containerRef} className={className} style={style}>
       {data ? (
         <Lottie src={data} loop autoplay className={styles.lottieFill} />
       ) : null}

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;
@@ -90,23 +89,26 @@
 }
 
 /* ─────────────────────────────────────────────────────────
-   Lottie variants — LottiePlayer가 바깥 박스 100% 채움.
-   bounds는 .root가 결정 (size prop), aspect=wide 로티는 .wide로 폭을 2배.
+   Lottie variants — 전부 정사각 bounds. LottiePlayer가 preserveAspectRatio=slice로
+   비정사각 캔버스를 가장자리 잘라 cover. visualScale/offset은 매니페스트에서.
    ───────────────────────────────────────────────────────── */
 .v-lottie {
-  overflow: visible;
-}
-.v-lottie.wide {
-  width: calc(var(--loader-size) * 2);
+  overflow: hidden;
+  position: relative;
 }
 
+/* 안쪽 로티 박스를 scale 배수만큼 "실제로" 크게 그려서 wrapper를 꽉 채우게 함.
+   transform:scale은 lottie-react wrapper에서 letterbox가 생겨 체감이 반감되므로 사용하지 않음.
+   offset은 중앙 기준 translate(%) — 상위 bounds 비율 기반 (ex. 5% = 아래로 bounds의 5% 밀기). */
 .lottieFill {
-  width: 100%;
-  height: 100%;
-  /* 로티 원본이 캔버스를 덜 채워 체감 크기가 작은 경우, 매니페스트의 visualScale이
-     --lottie-scale을 지정 → bounds 안에서 scale-up. 지정 없으면 1 (원본). */
-  transform: scale(var(--lottie-scale, 1));
-  transform-origin: center;
+  position: absolute;
+  width: calc(100% * var(--lottie-scale, 1));
+  height: calc(100% * var(--lottie-scale, 1));
+  left: 50%;
+  top: 50%;
+  transform:
+    translate(-50%, -50%)
+    translate(var(--lottie-offset-x, 0), var(--lottie-offset-y, 0));
 }
 
 /* ─────────────────────────────────────────────────────────

package/assets/components/Spinner/Spinner.tsx

@@ -16,7 +16,7 @@
 
 import { forwardRef, type HTMLAttributes } from "react";
 import styles from "./Spinner.module.css";
-import { LOTTIE_MANIFEST, type LottieName } from "./lottieManifest";
+import type { LottieName } from "./lottieManifest";
 import { LottiePlayer } from "./LottiePlayer";
 
 export type SpinnerSize = "xs" | "sm" | "md" | "lg";
@@ -58,9 +58,7 @@ const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
     if (variant) {
       if (isLottieVariant(variant)) {
         lottieName = variant.slice("lottie-".length) as LottieName;
-        const aspectClass =
-          LOTTIE_MANIFEST[lottieName].aspect === "wide" ? styles.wide : "";
-        variantPart = `${styles["v-lottie"]} ${aspectClass}`.trim();
+        variantPart = styles["v-lottie"];
       } else {
         variantPart = baseVariantClass[variant];
       }

package/assets/components/Spinner/lottieColor.ts

@@ -9,63 +9,89 @@
 export type Rgb = [number, number, number];
 
 /** CSS 색 문자열 → [r,g,b] 0~1 정규화. 서버에서는 null 반환.
- *  oklch()/color()처럼 getComputedStyle이 색공간 문자열 그대로 뱉는 경우를 피하려고
- *  canvas 2d에 그려 실제 sRGB 픽셀값을 읽어낸다. */
+ *  getComputedStyle이 oklch()를 그대로 반환하는 브라우저가 많아, Canvas 2D fillStyle에
+ *  던져 브라우저가 sRGB hex로 정규화해주는 트릭을 사용. Canvas가 못 받으면 "#000"이 유지되므로
+ *  rgb() 폴백 파싱. */
 export function parseCssColor(css: string): Rgb | null {
   if (typeof document === "undefined") return null;
   const canvas = document.createElement("canvas");
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = canvas.height = 1;
   const ctx = canvas.getContext("2d");
   if (!ctx) return null;
+  // 센티넬로 "#000"을 먼저 넣고 입력 시도 — Canvas가 입력을 못 받으면 "#000"이 그대로 유지됨.
   ctx.fillStyle = "#000";
-  ctx.fillStyle = css;
-  // 브라우저가 유효하지 않다고 판단한 색은 이전 fillStyle(#000)이 유지됨 → 바로 그리고 읽기
-  ctx.fillRect(0, 0, 1, 1);
-  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
-  return [r / 255, g / 255, b / 255];
+  try {
+    ctx.fillStyle = css;
+  } catch {
+    // 일부 브라우저는 invalid color 시 예외 throw
+  }
+  const normalized = ctx.fillStyle as string;
+  const hex = /^#([0-9a-f]{6})$/i.exec(normalized);
+  if (hex) {
+    const n = parseInt(hex[1], 16);
+    return [((n >> 16) & 0xff) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
+  }
+  // Canvas가 못 받으면 rgba()/rgb() 문자열일 수 있음 → 숫자 파싱
+  const m = normalized.match(/-?\d+(\.\d+)?/g);
+  if (m && m.length >= 3 && !normalized.startsWith("oklch") && !normalized.startsWith("color(")) {
+    return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
+  }
+  return null;
 }
 
-/** 원본 색의 밝기(luminance)만 추출해 target 색조에 적용.
- *  단색 로티: 모든 색이 비슷한 밝기 → target 색 그대로.
- *  그라데이션/다색 로티: 밝기 계조는 유지, 색조만 target으로 → 그라데이션 보존.
- *
- *  Rec. 601 luma 가중치. 흰색(1,1,1)→target 밝게, 검정(0,0,0)→target 어둡게. */
+/** 색 자리를 target으로 치환. colorBind=true 전용 — 단색 로티 가정.
+ *  원본 색의 알파만 보존하고 rgb는 target 그대로.
+ *  (이전 버전은 원본 luma 비율로 scale → primary처럼 중간 밝기 target일 때
+ *   원본이 검정이면 결과도 검정으로 묶여버렸음.) */
 export function recolorLottie(data: unknown, target: Rgb): unknown {
   const [tr, tg, tb] = target;
-  // target 자신의 luma — 원본이 target과 같은 밝기(=중간)일 때 target 그대로 나오도록 anchor.
-  const targetLuma = 0.299 * tr + 0.587 * tg + 0.114 * tb;
-
-  function recolorOne(src: Rgb): Rgb {
-    const [sr, sg, sb] = src;
-    const srcLuma = 0.299 * sr + 0.587 * sg + 0.114 * sb;
-    if (targetLuma === 0) {
-      // target이 완전 검정이면 비율 scale 불가 — 원본 luma만큼 어둡게.
-      return [srcLuma * tr, srcLuma * tg, srcLuma * tb];
-    }
-    // 비율 조정 — srcLuma=targetLuma면 target 그대로, 더 밝으면 target을 더 밝게.
-    const k = srcLuma / targetLuma;
-    const clamp = (v: number) => Math.max(0, Math.min(1, v));
-    return [clamp(tr * k), clamp(tg * k), clamp(tb * k)];
-  }
 
-  function walk(node: unknown): unknown {
+  function walk(node: unknown, parentKey?: string): unknown {
     if (Array.isArray(node)) {
       if (
         (node.length === 3 || node.length === 4) &&
         node.every((v) => typeof v === "number" && v >= 0 && v <= 1)
       ) {
-        const [r, g, b] = node as number[];
-        const [nr, ng, nb] = recolorOne([r, g, b]);
         const alpha = node.length === 4 ? node[3] : undefined;
-        return alpha !== undefined ? [nr, ng, nb, alpha] : [nr, ng, nb];
+        return alpha !== undefined ? [tr, tg, tb, alpha] : [tr, tg, tb];
       }
-      return node.map(walk);
+      return node.map((v) => walk(v));
     }
     if (node && typeof node === "object") {
+      const obj = node as Record<string, unknown>;
       const out: Record<string, unknown> = {};
-      for (const [k, v] of Object.entries(node as Record<string, unknown>)) {
-        out[k] = walk(v);
+      // 그라데이션 fill(ty:"gf"|"gs")은 g.k.k가 플랫 배열 [stop, r, g, b, stop, r, g, b, ...].
+      // 전체를 target 단색으로 눕힘 (stop만 유지).
+      if (
+        parentKey === "g" &&
+        obj.k &&
+        typeof obj.k === "object" &&
+        !Array.isArray(obj.k) &&
+        Array.isArray((obj.k as Record<string, unknown>).k)
+      ) {
+        const inner = obj.k as Record<string, unknown>;
+        const flat = inner.k as unknown[];
+        if (
+          flat.length >= 4 &&
+          flat.length % 4 === 0 &&
+          flat.every((v) => typeof v === "number" && v >= 0 && v <= 1)
+        ) {
+          const flatted: number[] = [];
+          for (let i = 0; i < flat.length; i += 4) {
+            flatted.push(flat[i] as number, tr, tg, tb);
+          }
+          for (const [k, v] of Object.entries(obj)) {
+            if (k === "k") {
+              out[k] = { ...inner, k: flatted };
+            } else {
+              out[k] = walk(v, k);
+            }
+          }
+          return out;
+        }
+      }
+      for (const [k, v] of Object.entries(obj)) {
+        out[k] = walk(v, k);
       }
       return out;
     }

package/assets/components/Spinner/lottieManifest.ts

@@ -6,7 +6,10 @@
  * `colorBind`:
  *   true  — 단색 로티. 런타임에 모든 색을 currentColor로 치환해 Palette/Hue 축을 추종.
  *   false — 다색 로티. 원본 색 유지 (브랜드 톤 또는 작가 의도).
- * `aspect`: 'square' | 'wide' — 바깥 박스 크기 결정에 참조.
+ *
+ * 모든 Spinner 로티는 정사각형 bounds로 강제 렌더(SVG preserveAspectRatio=xMidYMid slice).
+ * 원본 캔버스 비율이 1:1이 아니어도 bounds는 항상 1:1. 비정사각 로티는 가장자리가
+ * 잘릴 수 있으므로 중요한 디테일이 중앙에 모여있는 로티만 등록.
  */
 
 export type LottieName =
@@ -23,10 +26,13 @@ export type LottieManifestEntry = {
   name: LottieName;
   path: string;
   colorBind: boolean;
-  aspect: "square" | "wide";
-  /** 로티 원본이 캔버스를 덜 채워 체감 크기가 작을 때, 쇼케이스·사용처에서 쓸 보정 배율.
-   *  1 = 원본 그대로. 1보다 크면 bounds 안에서 scale-up (overflow 숨김 전제). */
+  /** 원본 캔버스가 bounds를 다 채우지 못할 때(여백이 커 보일 때) scale-up 보정.
+   *  1 = 원본 그대로. 비정사각 캔버스가 cover로 잘린 뒤 추가 확대도 가능.
+   *  overflow:hidden이 켜져있어 bounds 밖은 잘림. */
   visualScale?: number;
+  /** 캔버스 안에서 그림이 중앙에서 벗어나 있을 때 translate 보정. 단위는 bounds 비율(0~1 권장). */
+  offsetX?: number;
+  offsetY?: number;
   /** 한줄 설명 — showcase · 자동완성용 */
   description: string;
 };
@@ -36,7 +42,6 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "rabbit",
     path: "/lottie/rabbit.json",
     colorBind: true,
-    aspect: "square",
     visualScale: 1.4,
     description: "뛰어가는 토끼. 긴 작업·AI 생성 대기",
   },
@@ -44,45 +49,42 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "infiniti",
     path: "/lottie/infiniti.json",
     colorBind: true,
-    aspect: "wide",
-    visualScale: 1.3,
+    visualScale: 3.2,
     description: "무한 루프 선. 네트워크·동기화",
   },
   dots: {
     name: "dots",
     path: "/lottie/dots.json",
-    colorBind: false,
-    aspect: "square",
-    visualScale: 1.3,
+    colorBind: true,
+    visualScale: 0.95,
+    offsetY: 0.025,
     description: "그라데이션 dot 흐름. 포인트 로더",
   },
   spinner: {
     name: "spinner",
     path: "/lottie/spinner.json",
     colorBind: true,
-    aspect: "wide",
+    visualScale: 2,
     description: "표준 라인 스피너",
   },
   clock: {
     name: "clock",
     path: "/lottie/clock.json",
     colorBind: true,
-    aspect: "wide",
-    visualScale: 1.8,
+    visualScale: 3.8,
     description: "회전 시계 바늘. 처리 대기·타임아웃",
   },
   cosmos: {
     name: "cosmos",
     path: "/lottie/cosmos.json",
     colorBind: true,
-    aspect: "square",
+    visualScale: 1.2,
     description: "그라데이션 궤도. 몽환적·온보딩",
   },
   "image-gen": {
     name: "image-gen",
     path: "/lottie/image-gen.json",
     colorBind: true,
-    aspect: "square",
     visualScale: 1.1,
     description: "이미지 생성 대기. AI 이미지",
   },
@@ -90,8 +92,7 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "loading-square",
     path: "/lottie/loading-square.json",
     colorBind: true,
-    aspect: "square",
-    visualScale: 2.8,
+    visualScale: 3.5,
     description: "회전하는 사각형. 미니멀 처리 대기",
   },
 };

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/ai-message.md

@@ -30,7 +30,9 @@ visibility 애매하면 `hover`, actions 애매하면 기본 `[copy, regenerate]
   label={ReactNode}                           // 상단 메타 라벨
   actionsVisibility="show | hover"            // default: hover
   actions={[{ kind: "copy" }, { kind: "regenerate" }]}  // 비우려면 []
-  isGenerating={boolean}                      // true면 액션 숨김
+  sources={[{ id, label, href?, icon? }]}     // 액션바 옆 inline chip
+  onSourcesClick={() => void}                 // chip 클릭 (popover 열기 등)
+  isGenerating={boolean}                      // true면 액션/sources 숨김
 >
   본문 — markdown 또는 블록 조합
 </AIMessage>

package/assets/prompts/components/calendar.md

@@ -26,13 +26,14 @@
 `today` 생략하면 `new Date()`. `selectedDate` 없이도 성립 — 그냥 뷰어로 쓸 수 있다. `events` 빈 배열이어도 그리드만 그려진다. `tone` 애매하면 `default`.
 
 ### 관련
+- [[components/event-chip]] — 셀 안에 쌓이는 일정 블록. Calendar가 자동으로 그려주지만 톤·props 체계는 EventChip 문서를 1차 참조.
 - [[components/date-picker]] — "날짜 입력"이 목적이면 그쪽. Popover + Input 트리거. Calendar와 utils(buildMonthGrid 등) 공유.
-- [[components/badge]] — 이벤트 pill의 톤 체계는 Badge soft와 동일 토큰. "+N"·"오늘" 뱃지도 Badge 재사용.
+- [[components/badge]] — "+N"·"오늘" 메타 뱃지는 Badge soft. EventChip 톤 체계도 Badge와 동일 토큰.
 - [[components/icon-button]] — 월 이동 네비게이션(이전해·이전달·다음달·다음해 4개). ghost + sm.
-- [[components/button]] — "오늘" 복귀 버튼은 outline·sm, "주말" 토글은 ghost/secondary·sm.
-- [[axes/shape]] — 셀 radius는 없음(격자형이라 radius 신호를 셀이 받지 않음). pill·badge만 Shape 축에 반응.
-- [[axes/density]] — compact일수록 셀 padding이 줄고 pill이 더 많이 보임.
-- [[tokens/color]] — `--primary`(선택), `--hover`(셀 hover), `--border`(hairline), `--bg-muted` + `*-subtle`(pill 배경), `--info`/`--destructive`(요일 신호).
+- [[components/button]] — "오늘" 복귀 버튼은 outline·sm.
+- [[axes/shape]] — 셀 radius는 없음(격자형이라 radius 신호를 셀이 받지 않음). EventChip·Badge만 Shape 축에 반응.
+- [[axes/density]] — compact일수록 셀 padding이 줄고 EventChip이 더 많이 보임.
+- [[tokens/color]] — `--primary`(선택), `--hover`(셀 hover), `--border`(hairline), `--info`/`--destructive`(요일 신호).
 
 ### Props 시그니처
 
@@ -54,23 +55,15 @@ type CalendarEvent = {
   id: string;
   date: string;                                   // yyyy-MM-dd
   title: string;
-  code?: string;                                  // 보조 라벨 (사건번호·코드 등)
   tone?: "default" | "accent" | "success" | "warning" | "danger" | "info" | "neutral";
-  resolved?: boolean;                             // 체크 아이콘
 };
+// 셀 안 렌더링은 EventChip이 담당. 상세 라벨(코드·시각·주최자)은 Calendar 밖
+// 사이드 패널·상세 뷰에서 다룬다. [[components/event-chip]] 참조.
 ```
 
-### Tone 매트릭스
-
-| tone | 배경 | 글자 | 쓰임새 |
-|---|---|---|---|
-| `default` | `--bg-muted` | `--fg` | 중립 — 기본값. 미분류 일정 |
-| `neutral` | `--secondary-bg` | `--secondary-fg` | 약한 강조 — 사내 공지·루틴 |
-| `accent` | `--primary-subtle` | `--secondary-fg` | 브랜드 액션 — "내 일정"·주요 미팅 |
-| `success` | `--success-subtle` | `--success` | 확정·완료 |
-| `warning` | `--warning-subtle` | `--warning` | 임박·주의 |
-| `danger` | `--destructive-subtle` | `--destructive` | 마감·실패 |
-| `info` | `--info-subtle` | `--info` | 참고·외부 캘린더 |
+### Tone
+
+이벤트 톤 7개(default/neutral/accent/success/warning/danger/info) — 상세 매트릭스는 [[components/event-chip]]에서 1차 정의한다. Calendar는 `event.tone`을 그대로 EventChip에 전달.
 
 **금지 조합**
 - `tone="danger"`를 "눈에 띄게" 쓰려고 전부 danger로 깔기 — 색이 의미 신호를 잃는다. 셀당 1개가 danger라면 다른 셀은 default/accent여야 한다.

package/assets/prompts/components/event-chip.md

@@ -0,0 +1,74 @@
+# Event Chip
+
+### 원칙
+
+캘린더 셀 안에서 "하루에 쌓이는 일정 하나"를 표현하는 작은 정보 블록. [[components/chip]]은 필터 선택 토큰 전용, [[components/badge]]는 카운트·상태 라벨 전용 — 캘린더 셀 안 일정은 이 자리. 가로 폭은 부모(셀)에 꽉 차고, 세로로 쌓이며, 넘치는 title은 ellipsis로 접힌다.
+
+### Do
+- props는 `title` + `tone` + `faded` 세 개만. title 하나로 끝난다 — 부가 라벨(코드·시각·주최자)은 셀 안이 아니라 상세 패널에서 다룬다.
+- 톤은 7종(default/neutral/accent/success/warning/danger/info)만 사용. Badge soft와 동일 토큰 체계.
+- 폭은 부모 flex column에 맞춰 자동. `min-width: 0`을 부모에 걸어주면 ellipsis가 자연히 동작한다.
+- outside 월(전/다음 달)이나 과거 등 "눈에 띄지 않아야 할" 자리는 `faded`로 흐리게. 캘린더가 자동으로 넘겨준다.
+- 라운드는 Shape 축에 반응하는 `--radius-xs`. 자체 radius 리터럴 금지.
+
+### Don't
+- title 외 보조 라벨(코드·사건번호·주최자) 넣기 금지 — 셀 안은 밀도가 승부처라 한 줄만. 그게 필요하면 셀 클릭 → 상세 패널.
+- 클릭 가능한 "안쪽 버튼" 금지 — EventChip 자체는 presentational. 상호작용은 부모 셀이 책임진다. 안에 또 버튼이 들어가면 캘린더 클릭 타겟이 미궁에 빠진다.
+- pill radius(완전 둥근) 쓰지 않는다 — Shape 축이 radius를 쥐고 있는데 pill로 고정하면 Soft/Standard/Crisp 신호가 셀 안에서 깨진다.
+- "눈에 띄게" 하려고 전부 `danger` 톤으로 깔기 금지 — 색이 의미 신호를 잃는다.
+- 아이콘·아바타 삽입 금지 — 이 자리는 "하루 셀 안 한 줄"이지 ListItem이 아니다.
+
+### Fallback
+`tone` 애매하면 `default`. `faded`는 캘린더 외 자리에서는 생략해도 됨.
+
+### 관련
+- [[components/calendar]] — 1차 소비자. 셀 안에서 EventChip을 세로로 쌓고, 넘치면 "+N" Badge로 접는다.
+- [[components/badge]] — 톤 토큰 체계 공유 (soft variant). "+N"·"오늘" 같은 메타 라벨은 Badge.
+- [[components/chip]] — 혼동 금지. Chip은 필터 선택 토큰("X 제거 가능"), EventChip은 캘린더 일정 토큰.
+- [[axes/shape]] — radius가 Shape 축에 반응.
+- [[tokens/color]] — `--bg-muted`(default) · `--secondary-bg`(neutral) · `--primary-subtle`(accent) · `*-subtle`(상태) · `--fg`/`--fg-muted`(글자).
+
+### Props 시그니처
+
+```tsx
+<EventChip
+  title={string}                                  // required
+  tone="default | neutral | accent | success | warning | danger | info"
+  faded={boolean}                                 // outside 월·과거 등 흐리게
+/>
+```
+
+### Tone 매트릭스
+
+| tone | 배경 | 글자 | 쓰임새 |
+|---|---|---|---|
+| `default` | `--bg-muted` | `--fg` | 미분류 · 중립 일정 (기본값) |
+| `neutral` | `--secondary-bg` | `--secondary-fg` | 사내 공지 · 루틴 |
+| `accent` | `--primary-subtle` | `--secondary-fg` | 주요 미팅 · 내 일정 |
+| `success` | `--success-subtle` | `--success` | 확정 · 완료 |
+| `warning` | `--warning-subtle` | `--warning` | 임박 · 주의 |
+| `danger` | `--destructive-subtle` | `--destructive` | 마감 · 긴급 |
+| `info` | `--info-subtle` | `--info` | 참고 · 외부 캘린더 |
+
+### 조합 예시
+
+```tsx
+// 캘린더 셀 안쪽 — Calendar가 내부에서 쓰는 방식.
+// 부모가 min-width: 0 걸어주면 title ellipsis가 자동.
+<div className="cellEvents">
+  {events.map((e) => (
+    <EventChip key={e.id} title={e.title} tone={e.tone} faded={outside} />
+  ))}
+</div>
+
+// 캘린더 외부 — 선택된 날짜의 상세 리스트에서 재사용.
+// Calendar와 짝 이루는 사이드 패널에서도 톤 체계가 통일되게 유지된다.
+<aside>
+  {dayEvents.map((e) => (
+    <div key={e.id} className="dayRow">
+      <EventChip title={e.title} tone={e.tone} />
+      <time>{e.time}</time>
+    </div>
+  ))}
+</aside>
+```

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

@@ -1,26 +1,33 @@
 # Message Sources
 
 ### 원칙
-[[components/ai-message]] 하단에 붙는 소스 참조 chip 리스트. "Sources" 라벨 + 가로 wrap chip. 각 chip은 외부 링크 (favicon·링크 아이콘 좌측).
+AIMessage의 **하단 액션바 옆에 inline으로 붙는 chip**. 겹친 favicon stack + 라벨("Sources"). 블록이 아니라 액션 액세서리 — 실제론 [[components/ai-message]]의 `sources` prop으로 전달해 자동 배치. 전체 소스 리스트는 chip 클릭 시 popover로 (소비처가 조립).
 
 ### Do
-- Search 응답 뒤에 자동으로 노출 — AI가 참고한 출처 투명하게.
-- chip label은 호스트명 중심으로 짧게 (`"nytimes.com"`, `"wikipedia.org — 제목"`).
-- 긴 라벨은 중간 ellipsis가 아니라 끝 ellipsis (호스트명 보존).
+- `<AIMessage sources={...}>` prop으로 전달. standalone으로 쓸 일은 거의 없음.
+- `maxFavicons`로 겹쳐 보여줄 favicon 개수 조정 (기본 3). 넘어도 라벨은 그대로 — 숫자 노출 안 함(라벨만).
+- 각 소스에 `icon` 넘겨 favicon을 명시, 없으면 중성 원형 placeholder.
+- 클릭 시 소비처에서 popover(소스 전체 리스트) 열기 — 디자인 시스템 범위 밖.
 
 ### Don't
-- Sources 안에 추가 메타(날짜·발행자) 넣지 않는다 — 깔끔한 chip만.
-- Sources를 메시지 본문 중간에 두지 않는다 — 반드시 하단.
+- 큰 chip 리스트로 늘려 메시지 하단에 깔지 않는다 (예전 디자인 — 폐기).
+- Sources를 메시지 본문 중간에 두지 않는다 — 반드시 하단 액션바 라인.
+- chip 안에 긴 설명·날짜 넣지 않는다 — 라벨 하나만.
 
 ### Props 시그니처
 ```tsx
 <MessageSources
   sources={[{ id, label, href?, icon? }]}
-  label="Sources"                            // default
+  label="Sources"                     // default
+  maxFavicons={3}                     // default
+  onClick={() => void}                // 소스 전체 popover 열기 등
 />
 ```
 
 ### 레이아웃
-- label: text-xs, fg-muted
-- chip: `space-1 space-2` padding, `bg-subtle`, `radius-full`
-- gap: `space-1` (chip↔chip)
+- 외곽: ghost pill (transparent → hover bg-subtle)
+- padding: `space-0_5 space-2 space-0_5 space-1`
+- 폰트: `text-xs`, `fg-muted` → hover `fg-strong`
+- favicon stack: 각 원 `space-4`(16px), 서로 `space-1` negative margin으로 겹침
+- 각 favicon에 box-shadow로 bg 색 ring (cutout 효과)
+- `+N`은 `fg-muted`, tabular-nums

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