@conscience-technology/ctds 0.1.13 → 0.1.14

package/assets/components/AttachmentChip/AttachmentChip.module.css

@@ -1,73 +1,115 @@
-/* AttachmentChip — [FileIcon] filename [X]
-   레퍼런스: ChatInput 안에서 쓰이는 둥근 사각 — radius-md, hairline border. */
+/* AttachmentChip — [leading] filename (meta) [actions]
+   size sm/md: 1줄 pill
+   size lg:    2줄 큰 카드 (파일명 위 / meta 아래)
+   폭은 전부 --input-w-lg (400px) 고정 — 소비처가 폭 걱정 없이 넣기만. */
 
 .root {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
+  width: var(--input-w-lg);
   min-width: 0;
   background: var(--bg);
   border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-md);
   color: var(--fg);
   transition: var(--transition-colors);
+  box-sizing: border-box;
 }
 
-/* 패딩만 size 차이. 오른쪽은 X 버튼 자리라 좁게. 폭은 고정 — label이 길면 ellipsis. */
+/* ───────── size ─────────
+   sm/md: 1줄. radius-md.
+   lg:   2줄 세로 스택. radius-lg + 넉넉한 padding. */
 .sizeSm {
-  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-1);
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
+  gap: var(--space-1_5);
   font-size: var(--text-xs);
-  width: calc(var(--space-20) * 2);
+  border-radius: var(--radius-md);
 }
 .sizeMd {
-  padding: var(--space-1_5) var(--space-1_5) var(--space-1_5) var(--space-1_5);
+  padding: var(--space-1_5) var(--space-1_5) var(--space-1_5) var(--space-2_5);
+  gap: var(--space-2);
   font-size: var(--text-sm);
-  width: calc(var(--space-24) * 2);
+  border-radius: var(--radius-md);
+}
+.sizeLg {
+  padding: var(--space-2_5) var(--space-1_5) var(--space-2_5) var(--space-2_5);
+  gap: var(--space-2_5);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-lg);
 }
 
-/* 파일명 */
-.label {
+/* ───────── text block ───────── */
+.text {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+.sizeLg .text {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-0_5);
+}
+
+.label {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--fg-strong);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+}
+.sizeLg .label {
+  font-size: var(--text-sm);
+}
+
+.meta {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--fg-muted);
+  font-weight: var(--font-weight-regular);
   line-height: 1.2;
-  padding-right: var(--space-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
 }
 
-/* X 버튼 — size에 따라 width/height가 변하도록 토큰 조합 */
-.removeBtn {
+/* ───────── loading slot ─────────
+   FileIcon 자리에 들어가는 정사각 — 각 사이즈 FileIcon 치수와 동일.
+   내부 Spinner(lottie-dots)가 꽉 채운다. */
+.loadingSlot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--fg-muted);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition-colors);
-  width: var(--space-5);
-  height: var(--space-5);
   flex: 0 0 auto;
+  color: var(--fg-muted);
+  width: var(--space-6);
+  height: var(--space-6);
 }
-.sizeSm .removeBtn {
+.sizeSm .loadingSlot {
   width: var(--space-4);
   height: var(--space-4);
 }
-
-.removeBtn:hover {
-  background: var(--bg-subtle);
-  color: var(--fg);
+.sizeLg .loadingSlot {
+  width: var(--space-8);
+  height: var(--space-8);
 }
-.removeBtn:focus-visible {
-  outline: none;
-  box-shadow: var(--ring);
+.loadingSpinner {
+  width: 100%;
+  height: 100%;
 }
 
-.removeIcon {
-  width: 70%;
-  height: 70%;
+/* ───────── actions ───────── */
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 0 0 auto;
 }

package/assets/components/AttachmentChip/AttachmentChip.tsx

@@ -1,74 +1,158 @@
 "use client";
 
-import type { HTMLAttributes, MouseEvent } from "react";
-import { X as PhX } from "@phosphor-icons/react";
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import {
+  DotsThree as PhDotsThree,
+  DownloadSimple as PhDownload,
+  X as PhX,
+} from "@phosphor-icons/react";
 import { FileIcon, type FileIconSize } from "@/components/ctds/FileIcon";
+import { IconButton, type IconButtonSize } from "@/components/ctds/IconButton";
+import { Spinner } from "@/components/ctds/Spinner";
 import styles from "./AttachmentChip.module.css";
 
-export type AttachmentChipSize = "sm" | "md";
+export type AttachmentChipSize = "sm" | "md" | "lg";
+export type AttachmentChipState = "idle" | "loading";
 
 export interface AttachmentChipProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "onError"> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
   /** 파일명. 확장자가 FileIcon 색/라벨을 결정. */
   filename: string;
-  /** 지정 시 우측에 X 노출, 클릭 시 호출. */
-  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
-  /** sm=padding·icon 작게 / md=기본. */
+  /** sm/md=1줄, lg=2줄(파일명 위 / meta 아래). 폭은 전부 400px 고정. */
   size?: AttachmentChipSize;
+  /** loading이면 좌측 뱃지가 Spinner(lottie-dots)로 교체. */
+  state?: AttachmentChipState;
+  /** sm/md: 파일명 옆 inline 보조 영역. lg: 파일명 아래 2번째 줄.
+   *  문자열이면 muted 라벨로, ReactNode면 그대로 렌더 (ex. Button ghost xs). */
+  meta?: ReactNode;
+  /** 지정 시 우측 X. */
+  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 지정 시 우측 다운로드 아이콘. */
+  onDownload?: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 지정 시 우측 '더보기' 아이콘. */
+  onMore?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 const sizeClass: Record<AttachmentChipSize, string> = {
   sm: styles.sizeSm,
   md: styles.sizeMd,
+  lg: styles.sizeLg,
 };
 
-const fileIconSize: Record<AttachmentChipSize, FileIconSize> = {
+/** 좌측 FileIcon 크기 — sm=sm(16), md=md(24), lg=lg(32). */
+const FILE_ICON_SIZE: Record<AttachmentChipSize, FileIconSize> = {
   sm: "sm",
   md: "md",
+  lg: "lg",
+};
+
+/** trailing IconButton 크기 — sm/md=sm(20), lg=md(24). IconButton 공식 사이즈만 사용. */
+const ACTION_BTN_SIZE: Record<AttachmentChipSize, IconButtonSize> = {
+  sm: "sm",
+  md: "sm",
+  lg: "md",
 };
 
-/** 긴 파일명을 중간 생략으로 자르되 확장자는 유지.
- *  "very-long-report-name.pdf" → "very-long-rep…pdf" */
-function middleEllipsis(filename: string, max = 28): string {
+/** middle ellipsis — 폭 400px 안에서 충분히 들어가는 글자 수.
+ *  확장자는 항상 끝에 남긴다. CSS text-overflow:ellipsis가 뒤에서
+ *  확장자를 다시 자르지 않도록 폭 cap은 CSS와 함께 넉넉히 잡는다. */
+function middleEllipsis(filename: string, max: number): string {
   if (filename.length <= max) return filename;
   const dot = filename.lastIndexOf(".");
-  if (dot < 0 || dot < filename.length - 6) {
-    return filename.slice(0, max - 1) + "…";
+  const extLen = filename.length - dot;
+  // 확장자가 없거나 비정상적으로 긴 경우만 폴백.
+  if (dot <= 0 || extLen > 8 || extLen >= max - 4) {
+    return filename.slice(0, Math.max(1, max - 3)) + "...";
   }
-  const ext = filename.slice(dot); // ".pdf"
-  const head = filename.slice(0, Math.max(1, max - ext.length - 1));
-  return head + "…" + ext;
+  const ext = filename.slice(dot);
+  const head = filename.slice(0, Math.max(1, max - ext.length - 3));
+  return head + "..." + ext;
 }
 
 export function AttachmentChip({
   filename,
-  onRemove,
   size = "md",
+  state = "idle",
+  meta,
+  onRemove,
+  onDownload,
+  onMore,
   className,
   ...rest
 }: AttachmentChipProps) {
-  const cls = [styles.root, sizeClass[size], className]
+  const cls = [
+    styles.root,
+    sizeClass[size],
+    state === "loading" ? styles.isLoading : null,
+    className,
+  ]
     .filter(Boolean)
     .join(" ");
 
-  const label = middleEllipsis(filename);
+  // 400px 폭에서 안전하게 들어가는 글자 수 (대략치).
+  const maxChars = size === "lg" ? 44 : size === "md" ? 40 : 36;
+  const label = middleEllipsis(filename, maxChars);
+
+  const leading =
+    state === "loading" ? (
+      <span className={styles.loadingSlot} aria-hidden>
+        <Spinner
+          variant="lottie-dots"
+          label="업로드 중"
+          className={styles.loadingSpinner}
+        />
+      </span>
+    ) : (
+      <FileIcon ext={filename} size={FILE_ICON_SIZE[size]} />
+    );
+
+  const actionSize = ACTION_BTN_SIZE[size];
 
   return (
-    <span className={cls} {...rest}>
-      <FileIcon ext={filename} size={fileIconSize[size]} />
-      <span className={styles.label} title={filename}>
-        {label}
+    <div className={cls} {...rest}>
+      {leading}
+
+      <span className={styles.text}>
+        <span className={styles.label} title={filename}>
+          {label}
+        </span>
+        {meta != null && meta !== "" ? (
+          <span className={styles.meta}>{meta}</span>
+        ) : null}
       </span>
-      {onRemove ? (
-        <button
-          type="button"
-          className={styles.removeBtn}
-          onClick={onRemove}
-          aria-label="첨부 제거"
-        >
-          <PhX className={styles.removeIcon} weight="regular" />
-        </button>
-      ) : null}
-    </span>
+
+      {(onDownload || onMore || onRemove) && (
+        <span className={styles.actions}>
+          {onDownload ? (
+            <IconButton
+              size={actionSize}
+              variant="ghost"
+              onClick={onDownload}
+              aria-label="첨부 다운로드"
+              icon={<PhDownload />}
+            />
+          ) : null}
+          {onMore ? (
+            <IconButton
+              size={actionSize}
+              variant="ghost"
+              onClick={onMore}
+              aria-label="첨부 메뉴 열기"
+              aria-haspopup="menu"
+              icon={<PhDotsThree weight="bold" />}
+            />
+          ) : null}
+          {onRemove ? (
+            <IconButton
+              size={actionSize}
+              variant="ghost"
+              onClick={onRemove}
+              aria-label="첨부 제거"
+              icon={<PhX />}
+            />
+          ) : null}
+        </span>
+      )}
+    </div>
   );
 }

package/assets/components/AttachmentChip/index.ts

@@ -1,2 +1,6 @@
 export { AttachmentChip } from "./AttachmentChip";
-export type { AttachmentChipProps, AttachmentChipSize } from "./AttachmentChip";
+export type {
+  AttachmentChipProps,
+  AttachmentChipSize,
+  AttachmentChipState,
+} from "./AttachmentChip";

package/assets/components/Button/Button.tsx

@@ -65,10 +65,10 @@ const ICON_SIZE: Record<ButtonSize, number> = {
 };
 
 const SPINNER_SIZE: Record<ButtonSize, SpinnerSize> = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+  xs: "xl",
+  sm: "xl",
+  md: "xl",
+  lg: "xl",
 };
 
 function sizedIcon(node: ReactNode, size: number): ReactNode {
@@ -149,7 +149,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         {loading && (
           <span className={styles.spinner} aria-hidden>
-            <Spinner size={SPINNER_SIZE[size]} />
+            <Spinner variant="lottie-spinner" size={SPINNER_SIZE[size]} />
           </span>
         )}
       </Comp>

package/assets/components/Input/Input.module.css

@@ -132,6 +132,9 @@
   font-family: inherit;
   font-size: inherit;
   line-height: var(--lh-sm);
+  /* 전역 tight 자간(-0.02em)을 상속하면 password dot(●)이 너무 벌어져 보이고
+     placeholder도 느슨해 보임. 폼 필드는 자간 조이지 않는다. */
+  letter-spacing: var(--tracking-normal);
   outline: none;
   /* type="button" 등 non-text input의 기본 center 정렬 무력화. */
   text-align: start;

package/assets/components/MessageAttachment/MessageAttachment.module.css

@@ -0,0 +1,89 @@
+/* MessageAttachment — AI가 생성한 이미지 큰 표시 (AttachmentThumb은 작은 썸네일).
+   loading / placeholder (src 없음) / image 세 상태. radius-md 고정, 생성 중 sparkle 숨쉼. */
+
+.root {
+  position: relative;
+  width: 100%;
+  max-width: calc(var(--input-w-lg) * 1.1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--bg-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+}
+
+/* aspect ratios */
+.aspectSquare {
+  aspect-ratio: 1 / 1;
+}
+.aspectPortrait {
+  aspect-ratio: 3 / 4;
+}
+.aspectLandscape {
+  aspect-ratio: 4 / 3;
+}
+
+/* 이미지 */
+.hasImage {
+  background: var(--bg-muted);
+}
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Placeholder / Loading — bg 이미지 + Spinner lottie-dots */
+.placeholder,
+.loading {
+  background: url("/illustrations/image-gen-placeholder.png") center / cover no-repeat,
+    var(--bg-muted);
+}
+
+.spinner {
+  color: var(--bg);
+}
+
+/* Download 버튼 — hover 시만 노출, 우상단 */
+.downloadBtn {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  width: var(--space-8);
+  height: var(--space-8);
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  transform: scale(0.9);
+  transition:
+    opacity var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    var(--transition-colors);
+}
+.root:hover .downloadBtn,
+.downloadBtn:focus-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.downloadBtn:hover {
+  background: var(--bg-subtle);
+}
+.downloadBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-sm), var(--ring);
+}
+.downloadIcon {
+  width: 55%;
+  height: 55%;
+}

package/assets/components/MessageAttachment/MessageAttachment.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { HTMLAttributes, MouseEvent } from "react";
+import { DownloadSimple as PhDownload } from "@phosphor-icons/react";
+import { Spinner } from "@/components/ctds/Spinner";
+import { Tooltip } from "@/components/ctds/Tooltip";
+import styles from "./MessageAttachment.module.css";
+
+export type MessageAttachmentAspect = "square" | "portrait" | "landscape";
+
+export interface MessageAttachmentProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 생성된 이미지 URL. 없거나 loading이면 placeholder. */
+  src?: string;
+  alt?: string;
+  /** 가로세로 비율. portrait=3/4(기본, 레퍼런스), square=1/1, landscape=4/3. */
+  aspect?: MessageAttachmentAspect;
+  /** 생성 중 — placeholder + sparkle breathe 애니. */
+  loading?: boolean;
+  /** 다운로드 버튼 클릭. 미지정 시 버튼 숨김. */
+  onDownload?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const aspectClass: Record<MessageAttachmentAspect, string> = {
+  square: styles.aspectSquare,
+  portrait: styles.aspectPortrait,
+  landscape: styles.aspectLandscape,
+};
+
+export function MessageAttachment({
+  src,
+  alt = "",
+  aspect = "portrait",
+  loading = false,
+  onDownload,
+  className,
+  ...rest
+}: MessageAttachmentProps) {
+  const cls = [
+    styles.root,
+    aspectClass[aspect],
+    loading ? styles.loading : src ? styles.hasImage : styles.placeholder,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={cls} {...rest}>
+      {loading || !src ? (
+        <Spinner variant="lottie-dots" size="md" className={styles.spinner} />
+      ) : (
+        <img src={src} alt={alt} className={styles.img} />
+      )}
+
+      {onDownload && src && !loading ? (
+        <Tooltip content="다운로드">
+          <button
+            type="button"
+            className={styles.downloadBtn}
+            onClick={onDownload}
+            aria-label="이미지 다운로드"
+          >
+            <PhDownload className={styles.downloadIcon} weight="regular" />
+          </button>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}

package/assets/components/MessageAttachment/index.ts

@@ -0,0 +1,5 @@
+export { MessageAttachment } from "./MessageAttachment";
+export type {
+  MessageAttachmentProps,
+  MessageAttachmentAspect,
+} from "./MessageAttachment";

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

@@ -15,12 +15,13 @@
   font-weight: var(--font-weight-regular);
 }
 
+/* 리더 폭 — Spinner size=sm(20px)과 통일. 아이콘/스피너 전환해도 라벨 위치 안 흔들림. */
 .leadIcon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-4);
-  height: var(--space-4);
+  width: var(--loader-size-sm);
+  height: var(--loader-size-sm);
   color: var(--primary);
   flex: 0 0 auto;
 }
@@ -31,27 +32,32 @@
 .leadSpinner {
   color: var(--primary);
   flex: 0 0 auto;
+  /* Spinner sm = 20px = loader-size-sm. 폭 명시해 동일 width 보장. */
+  width: var(--loader-size-sm);
+  height: var(--loader-size-sm);
 }
 
-/* 통통거리는 라벨 (AIMessage의 generating 패턴과 동일 — 중복 정의) */
+/* 통통거리는 라벨 — 글자 수에 비례한 cycle, 각 글자 index 지연으로 wave. */
 .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;
+  animation: msgstate-char-bounce calc(var(--duration-slower) * 10) var(--ease-in-out) infinite;
 }
 .bounceSpace {
   display: inline-block;
   white-space: pre;
 }
+/* bounce는 cycle 앞 35%까지만 (올라감 17.5%→피크→내려옴 35%), 나머지 65%는 쉼.
+   cycle을 2배로 늘렸으니 bounce 자체 속도는 그대로, 다음 wave까지 간격만 길어짐. */
 @keyframes msgstate-char-bounce {
-  0%, 70%, 100% {
+  0%, 35%, 100% {
     transform: translateY(0);
     opacity: 0.6;
   }
-  35% {
+  17.5% {
     transform: translateY(calc(-1.5px * var(--motion-distance-scale))); /* lint-hardcoded: ignore */
     opacity: 1;
   }

package/assets/components/MessageState/MessageState.tsx

@@ -23,9 +23,11 @@ export type MessageStateKind =
 
 export interface MessageStateProps extends HTMLAttributes<HTMLDivElement> {
   kind?: MessageStateKind;
-  /** 라벨 override. kind별 기본 라벨이 있지만 커스터마이즈 가능. */
+  /** 활성 상태 라벨 override. 미지정 시 kind별 기본("…ing…"). */
   message?: ReactNode;
-  /** 완료 상태 — true면 spinner 자리에 ✓, 라벨 통통거림 멈춤. */
+  /** 완료 상태 라벨 override. 미지정 시 kind별 done 기본("…ed"). */
+  doneMessage?: ReactNode;
+  /** 완료 상태 — true면 spinner 자리에 ✓, 라벨 통통거림 멈춤, doneMessage로 전환. */
   done?: boolean;
   /** 커스텀 아이콘 — kind="custom"이거나 override 하고 싶을 때. */
   icon?: ReactNode;
@@ -34,13 +36,24 @@ export interface MessageStateProps extends HTMLAttributes<HTMLDivElement> {
 const DEFAULT_MESSAGE: Record<MessageStateKind, string> = {
   generating: "응답 생성 중…",
   searching: "Searching the web…",
-  memory: "Updated saved memory",
+  memory: "Updating memory…",
   image: "Looking at the image…",
   video: "Reviewing the video…",
   file: "Processing file…",
   custom: "",
 };
 
+/** 완료 상태 라벨 — done=true일 때 message prop이 없으면 이걸 사용. */
+const DEFAULT_DONE_MESSAGE: Record<MessageStateKind, string> = {
+  generating: "응답 완료",
+  searching: "Searched the web",
+  memory: "Updated saved memory",
+  image: "Looked at the image",
+  video: "Reviewed the video",
+  file: "Processed file",
+  custom: "",
+};
+
 const KIND_ICON: Record<MessageStateKind, React.ComponentType<any> | null> = {
   generating: null, // Spinner만
   searching: PhSearch,
@@ -76,12 +89,15 @@ function renderBouncingText(text: string) {
 export function MessageState({
   kind = "generating",
   message,
+  doneMessage,
   done = false,
   icon,
   className,
   ...rest
 }: MessageStateProps) {
-  const label = message ?? DEFAULT_MESSAGE[kind];
+  const label = done
+    ? doneMessage ?? DEFAULT_DONE_MESSAGE[kind]
+    : message ?? DEFAULT_MESSAGE[kind];
   const KindIcon = KIND_ICON[kind];
 
   const cls = [styles.root, className].filter(Boolean).join(" ");
@@ -96,11 +112,13 @@ export function MessageState({
     <Spinner variant="lottie-dots" size="sm" className={styles.leadSpinner} />
   );
 
+  const labelStr = typeof label === "string" ? label : null;
+
   return (
     <div className={cls} data-done={done || undefined} {...rest}>
       {leadIcon}
       <span className={styles.label}>
-        {done || typeof label !== "string" ? label : renderBouncingText(label)}
+        {done || !labelStr ? label : renderBouncingText(labelStr)}
       </span>
     </div>
   );

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

@@ -14,10 +14,10 @@
   flex-shrink: 0;
 }
 
-.xs { --loader-size: var(--loader-size-xs); }
 .sm { --loader-size: var(--loader-size-sm); }
 .md { --loader-size: var(--loader-size-md); }
 .lg { --loader-size: var(--loader-size-lg); }
+.xl { --loader-size: var(--loader-size-xl); }
 
 /* 자식 전부 기본 숨김 — 활성 variant만 켬. */
 .ring,

package/assets/components/Spinner/Spinner.tsx

@@ -19,7 +19,7 @@ import styles from "./Spinner.module.css";
 import type { LottieName } from "./lottieManifest";
 import { LottiePlayer } from "./LottiePlayer";
 
-export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
 export type SpinnerBaseVariant = "ring" | "dots-bounce" | "dots-fade" | "pulse";
 export type SpinnerLottieVariant = `lottie-${LottieName}`;
 export type SpinnerVariant = SpinnerBaseVariant | SpinnerLottieVariant;
@@ -33,10 +33,10 @@ export type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
 };
 
 const sizeClass: Record<SpinnerSize, string> = {
-  xs: styles.xs,
   sm: styles.sm,
   md: styles.md,
   lg: styles.lg,
+  xl: styles.xl,
 };
 
 const baseVariantClass: Record<SpinnerBaseVariant, string> = {

package/assets/components/Spinner/lottieManifest.ts

@@ -42,21 +42,21 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "rabbit",
     path: "/lottie/rabbit.json",
     colorBind: true,
-    visualScale: 1.4,
+    visualScale: 1.6,
     description: "뛰어가는 토끼. 긴 작업·AI 생성 대기",
   },
   infiniti: {
     name: "infiniti",
     path: "/lottie/infiniti.json",
     colorBind: true,
-    visualScale: 3.2,
+    visualScale: 3.6,
     description: "무한 루프 선. 네트워크·동기화",
   },
   dots: {
     name: "dots",
     path: "/lottie/dots.json",
     colorBind: true,
-    visualScale: 0.95,
+    visualScale: 1.08,
     offsetY: 0.025,
     description: "그라데이션 dot 흐름. 포인트 로더",
   },
@@ -64,35 +64,35 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "spinner",
     path: "/lottie/spinner.json",
     colorBind: true,
-    visualScale: 2,
+    visualScale: 2.25,
     description: "표준 라인 스피너",
   },
   clock: {
     name: "clock",
     path: "/lottie/clock.json",
     colorBind: true,
-    visualScale: 3.8,
+    visualScale: 4.25,
     description: "회전 시계 바늘. 처리 대기·타임아웃",
   },
   cosmos: {
     name: "cosmos",
     path: "/lottie/cosmos.json",
     colorBind: true,
-    visualScale: 1.2,
+    visualScale: 1.35,
     description: "그라데이션 궤도. 몽환적·온보딩",
   },
   "image-gen": {
     name: "image-gen",
     path: "/lottie/image-gen.json",
     colorBind: true,
-    visualScale: 1.1,
+    visualScale: 1.25,
     description: "이미지 생성 대기. AI 이미지",
   },
   "loading-square": {
     name: "loading-square",
     path: "/lottie/loading-square.json",
     colorBind: true,
-    visualScale: 3.5,
+    visualScale: 3.9,
     description: "회전하는 사각형. 미니멀 처리 대기",
   },
 };

package/assets/components/_data.ts

@@ -607,6 +607,7 @@ export const componentSlugs: Record<string, string> = {
   "Message Sources": "chat/message-sources",
   "Message Table": "chat/message-table",
   "Message State": "chat/message-state",
+  "Message Attachment": "chat/message-attachment",
 };
 
 /** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
@@ -674,6 +675,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
       "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", "Message State",
+      "Message Attachment",
       "Chat Sidebar",
     ],
   },

package/assets/components/tokens.css

@@ -80,12 +80,11 @@
   --icon-size-md: calc(20px * var(--space-scale));
   --icon-size-lg: calc(24px * var(--space-scale));
 
-  /* Spinner · 로더 표준 크기 — IconButton 체계와 1:1 매칭 (xs=16, sm=20, md=24, lg=32).
-     로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음. */
-  --loader-size-xs: calc(16px * var(--space-scale));
+  /* Spinner · 로더 표준 크기 — IconButton 박스와 1:1 매칭 (sm=20, md=24, lg=32, xl=40). */
   --loader-size-sm: calc(20px * var(--space-scale));
   --loader-size-md: calc(24px * var(--space-scale));
   --loader-size-lg: calc(32px * var(--space-scale));
+  --loader-size-xl: calc(40px * var(--space-scale));
 
   /* Loader 성격 — Motion 축이 스왑 ([data-motion] 블록 참고).
      기본값은 standard와 같은 ring. */

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

@@ -1,46 +1,78 @@
 # Attachment Chip
 
 ### 원칙
-파일 첨부 1건 pill — `[FileIcon] filename [X]`. 파일명에서 확장자를 뽑아 [[components/file-icon]] 색/라벨을 자동 결정. 긴 파일명은 **중간 ellipsis** + 끝 확장자 유지. ChatInput·Message 양쪽 공용.
+파일 첨부 1건 — `[FileIcon] filename (meta) [actions]`. 폭 400px 고정, 레이아웃은 `size` 하나로 결정. 파일명에서 확장자를 뽑아 [[components/file-icon]] 색/라벨을 자동 결정. `state="loading"`이면 좌측 뱃지를 Spinner(lottie-dots)로 교체. trailing은 콜백 조합(`onRemove`/`onDownload`/`onMore`)으로 노출. 긴 파일명은 **중간 생략 + 끝 확장자 유지**.
 
 ### Do
-- 파일명 통째로 넘기면 끝 — `filename="report.pdf"` 하나로 아이콘·라벨·식별까지 다 해결.
-- 삭제 가능한 자리엔 `onRemove` 지정 — X 상시 노출 (hover 틴트).
+- 파일명 통째로 넘기면 끝 — `filename="report.pdf"` 하나로 아이콘·라벨·식별까지.
+- size로 레이아웃 선택:
+  - `sm` — ChatInput 밀도 자리 (1줄)
+  - `md` — 일반 입력·목록 자리 (1줄, 기본값)
+  - `lg` — 첨부 상세·메시지 본문 (2줄, 파일명 위 / meta 아래)
+- 업로드 중은 `state="loading"` + `meta` 문구 — 좌측이 Spinner(lottie-dots)로 교체. 상태 문구는 소비처 책임.
+- 즉시 액션(미리보기·업로드 재시도 등)은 `meta`에 Button `variant="ghost"` `size="xs"`로 넣는다 — 전역 Button 체계와 합치.
+- trailing은 콜백을 지정한 만큼만 노출. 복수 지정 시 download → more → remove 순으로 배치.
 - Thumb(이미지)·Chip(파일) 섞여 흐를 자리는 `flex-wrap: wrap` + `gap: space-2`로 조립.
-- 긴 파일명은 middle ellipsis가 알아서 자름 — maxLen 초과면 `name… + ext` 형태.
 
 ### Don't
-- 파일명과 확장자를 **따로** 받는 props 추가하지 않는다 — 소비처에서 자르면 FileIcon 매핑이 어긋남.
-- X를 호버 전용으로 숨기지 않는다 — ChatInput 안에선 상시 노출이 원칙 (이미지 썸네일과 다름).
-- Chip 안에 메뉴/추가 액션 넣지 않는다 — 삭제 외엔 상위 ChatInput이 책임.
-- 배경을 과한 톤으로 덮지 않는다 — bg는 `var(--bg)`, 테두리는 hairline. ChatInput 안에서 두드러지지 않게.
+- 폭을 임의로 바꾸지 않는다 — 전부 `--input-w-lg` (400px) 고정. 소비처가 폭 걱정 없이 세로/wrap만 결정.
+- 파일명·확장자를 **따로** 받는 props 추가하지 않는다 — 소비처가 자르면 FileIcon 매핑이 어긋남.
+- trailing에 임의 ReactNode 슬롯을 뚫지 않는다 — 접근성·간격·톤 통일이 깨짐. 정의된 콜백 조합만.
+- trailing을 수제 버튼으로 그리지 않는다 — 반드시 IconButton 재사용 (sm/md → IconButton sm 20, lg → IconButton md 24). IconButton에 없는 치수(28·36 등)는 금지.
+- loading 좌측에 베이스 Spinner variant(pulse·dots-bounce 등)를 쓰지 않는다 — CTDS 로더 톤 통일 위해 `lottie-dots` 고정. [[components/spinner]].
+- 배경을 과한 톤으로 덮지 않는다 — bg는 `var(--bg)`, 테두리는 hairline.
+- meta 라인에 가운뎃점 "·"는 OK — 하지만 `··•·|` 같은 꾸밈 구분자는 금지. [[feedback-no-bullet-separator]].
 
 ### Fallback
 size 애매하면 `md`. 모르는 확장자는 FileIcon이 `others`로 폴백하니 그대로 넘겨도 됨.
 
 ### 관련
 - [[components/file-icon]] — 좌측 뱃지
+- [[components/spinner]] — loading 상태 좌측 (lottie-dots variant)
+- [[components/icon-button]] — trailing 액션 버튼
+- [[components/button]] — meta 안 즉시 액션 (ghost xs)
 - [[components/attachment-thumb]] — 이미지 첨부
-- [[components/chat-input]] — 상위 소비처
-- [[components/message-bubble]] — 메시지 내 파일 인용에서도 재사용
+- [[components/chat-input]] — 상위 소비처 (size=sm/md)
+- [[components/message-bubble]] — 메시지 내 파일 인용 (size=lg)
 
 ### Props 시그니처
 ```tsx
 <AttachmentChip
-  filename={string}                // 필수. 확장자 자동 추출
-  size="sm | md"                   // default: md
-  onRemove={(e) => void}           // 지정 시 우측 X 노출
+  filename={string}                       // 필수. 확장자 자동 추출
+  size="sm | md | lg"                     // default: md. lg는 2줄 큰 카드
+  state="idle | loading"                  // default: idle. loading이면 좌측이 Spinner
+  meta={ReactNode}                        // 문자열(muted 라벨) 또는 Button ghost xs 등
+  onRemove={(e) => void}                  // 지정 시 우측 X
+  onDownload={(e) => void}                // 지정 시 우측 download
+  onMore={(e) => void}                    // 지정 시 우측 더보기 (dots)
 />
 ```
 
 ### 비율·레이아웃
-- 외곽 `--radius-full` (pill)
-- `--hairline` 1px border, `var(--border)` 색
-- 내부 gap: `--space-2`
-- padding: md = `space-1_5 space-3 space-1_5 space-1_5` (왼쪽은 FileIcon 바싹 붙게 좁게)
-- X: `--space-5` (md) / `--space-4` (sm) 정사각, radius full
+- 폭: 전부 `--input-w-lg` (400px) 고정.
+- 외곽: `--hairline` 1px border, `var(--border)` 색.
+- radius: sm/md=`--radius-md`, lg=`--radius-lg`.
+- 내부 gap (leading ↔ text): sm=`--space-1_5`, md=`--space-2`, lg=`--space-2_5`. actions 간은 전부 `--space-1`.
+- padding:
+  - sm: `space-1` 상하, `space-1` 우, `space-2` 좌
+  - md: `space-1_5` 상하, `space-1_5` 우, `space-2_5` 좌
+  - lg: `space-2_5` 상하, `space-1_5` 우, `space-2_5` 좌 (세로 숨 쉬게 + 좌우는 아이콘 버튼 자리 고려해 타이트)
+- leading FileIcon size: sm→sm(16) · md→md(24) · lg→lg(32).
+- lg 안쪽 두 줄: label=`--text-sm`(14.5) · meta=`--text-xs`(13). 한 단계 차이. 무게/색은 label=medium/fg-strong, meta=regular/fg-muted. (meta는 모든 size 공통 `--text-xs`.)
+- leading loading slot: FileIcon과 동일 치수(sm=`space-4`, md=`space-6`, lg=`space-8`), 내부 Spinner는 100%.
+- trailing IconButton: sm/md→IconButton `sm`(20), lg→IconButton `md`(24). variant는 전부 ghost.
 
 ### Middle ellipsis 규칙
-`filename.length > 28`이면 `name… + ext`로 치환.
-- `"super-long-project-pitch.pptx"` → `"super-long-pr… .pptx"` 식.
-- 확장자 없거나 너무 짧으면 일반 ellipsis.
+`filename.length > max`이면 `name... + ext`로 치환. 확장자는 항상 끝에 보존.
+- sm: max=36
+- md: max=40
+- lg: max=44
+- 확장자 없거나(dot<=0) 비정상적으로 긴 확장자(>8자) / 확장자가 max를 거의 다 먹는 경우만 일반 `...` 꼬리로 폴백.
+- 사용 문자는 ASCII `...` (유니코드 `…` 금지, [[feedback-no-em-dash]]).
+- CSS `text-overflow: ellipsis`는 안전망으로 유지하되, 글자 수 cap을 400px 폭보다 보수적으로 잡아 CSS가 확장자를 다시 잘라내지 않게 한다.
+
+### Loading 좌측 뱃지
+`state="loading"`일 때 FileIcon 자리에 Spinner — `variant="lottie-dots"`. 색은 `--fg-muted` currentColor 바인딩. 크기는 FileIcon의 각 size와 동일 치수를 가지는 정사각 슬롯이 감싸고 내부 Spinner는 100%.
+
+### meta 폰트
+meta는 size와 무관하게 항상 `--text-xs`(13) — 파일명보다 한 단계 작은 보조 톤 유지. label(파일명)만 size별로 변동(sm=`--text-xs`, md=`--text-sm`, lg=`--text-sm`).

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

@@ -0,0 +1,40 @@
+# Message Attachment
+
+### 원칙
+AI가 생성한 **큰 이미지**를 메시지 안에 보여주는 블록. 작은 썸네일(첨부물 바에 들어가는 것)은 [[components/attachment-thumb]]. 생성 중엔 sparkle 숨쉼, 완료되면 cover 이미지. hover 시 다운로드 버튼.
+
+### Do
+- 세로형 포스터가 기본 (`aspect="portrait"` = 3:4) — 레퍼런스 톤.
+- `loading` 중엔 그라데이션 + sparkle 애니. src 세팅되면 자동 전환.
+- 다운로드가 필요하면 `onDownload` 전달 — hover 시 우상단 버튼 노출.
+- 이미지 폭은 `--input-w-lg` 기준으로 약간 크게. 메시지 너비 안에서 자동 fit.
+
+### Don't
+- MessageAttachment를 작은 썸네일 용도로 쓰지 않는다 — [[components/attachment-thumb]].
+- loading과 src 동시에 넘기지 않는다 — loading이 우선.
+- 다운로드 버튼을 상시 노출하지 않는다 — hover/focus-within에서만.
+
+### Fallback
+aspect 애매하면 `portrait`. src 없으면 placeholder (sparkle 정적).
+
+### 관련
+- [[components/attachment-thumb]] — 작은 썸네일
+- [[components/ai-message]] — 상위 소비처
+
+### Props 시그니처
+```tsx
+<MessageAttachment
+  src={string}                           // 생성된 이미지 URL
+  alt={string}
+  aspect="portrait | square | landscape" // default: portrait
+  loading={boolean}                      // 생성 중 — sparkle 애니
+  onDownload={(e) => void}               // 지정 시 hover download 버튼
+/>
+```
+
+### 레이아웃
+- 외곽: `radius-md`, `max-width: input-w-lg × 1.1`, overflow hidden
+- aspect-ratio로 비율 고정 (`3/4`·`1/1`·`4/3`)
+- loading/placeholder bg: `/illustrations/image-gen-placeholder.png` (public에 저장된 그라데이션 placeholder)
+- 로딩 중 중앙 아이콘: [[components/spinner]] `variant="lottie-dots"` `size="md"`, 색은 `--bg` (bg 이미지 위에서 흰 톤)
+- Download 버튼: `space-8` 정사각, 우상단 inset `space-2`, hover 시 fade-in + scale

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

@@ -26,22 +26,25 @@ kind 애매하면 `generating`, message 애매하면 kind별 기본.
 ```tsx
 <MessageState
   kind="generating | searching | memory | image | video | file | custom"
-  message={ReactNode}                 // kind별 기본 라벨 override
-  done={boolean}                      // true → ✓ + 애니 정지
+  message={ReactNode}                 // 활성 라벨 override (기본 "…ing…")
+  doneMessage={ReactNode}             // 완료 라벨 override (기본 "…ed")
+  done={boolean}                      // true → ✓ + 애니 정지 + doneMessage로 전환
   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 |
+### Kind 매트릭스 (active / done 라벨 pair)
+| kind | 아이콘 | active | done |
+|---|---|---|---|
+| generating | Spinner (lottie-dots) | 응답 생성 중… | 응답 완료 |
+| searching | MagnifyingGlass | Searching the web… | Searched the web |
+| memory | PencilSimple | Updating memory… | Updated saved memory |
+| image | Image | Looking at the image… | Looked at the image |
+| video | VideoCamera | Reviewing the video… | Reviewed the video |
+| file | File | Processing file… | Processed file |
+| custom | `icon` prop | `message` prop | `doneMessage` prop |
+
+사용처가 커스텀 pair를 넘기면 (예: `message="Reading 'report.pdf'…" doneMessage="Read 'report.pdf'"`) 활성·완료 모두 자연스러운 영문 과거형으로.
 
 ### 애니메이션
 - 라벨 각 글자 wave bounce — `duration-slower × 5` 주기, `duration-base` 간격으로 index 지연

package/assets/prompts/components/spinner.md

@@ -62,14 +62,14 @@
 **사이즈 주의**: Lottie는 vectorized라 size가 작으면 디테일 뭉개짐. `size="md"` 이상 권장. Button loading 안에 Lottie 쓰는 건 비권장 — 기본 variant(dots/ring)가 적합.
 
 ### Size 매트릭스
-IconButton 체계와 1:1 매칭. 로더는 캔버스를 다 채우지 않는 특성상 아이콘보다 한 단계 큰 bounds가 체감에 맞음.
+IconButton 박스 크기와 1:1 매칭 — 로더가 들어가는 자리의 IconButton·Button 박스와 같은 size로.
 
 | size | 실제 크기 | 쓰임 |
 |---|---|---|
-| xs | 16px | Button xs 내부, 조밀한 인라인 |
-| sm | 20px | **기본**. 인라인 라벨 옆, 리스트 아이템, AIMessage generating |
+| sm | 20px | 인라인 라벨 옆, 리스트 아이템, AIMessage generating |
 | md | 24px | 섹션 로딩, 카드 중앙 |
-| lg | 32px | 페이지 중앙 로딩, 모달 바디 로딩 |
+| lg | 32px | **기본**. 조금 더 강조된 영역 |
+| xl | 40px | 페이지 중앙 로딩, 모달 바디 로딩, Button loading(전 사이즈) |
 
 Lottie 로더는 캔버스 충전율이 다르므로 `visualScale`로 bounds를 꽉 채우도록 보정됨 — size만 고르면 체감이 일관되게 맞아야 함. 특정 Lottie가 작아 보이면 `lottieManifest.ts`의 `visualScale`을 올려 글로벌 보정, 사용처에서 size를 올리지 말 것.
 

package/package.json

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