@conscience-technology/ctds 0.1.8 → 0.1.10

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

@@ -0,0 +1,117 @@
+/* AIMessage — 왼쪽 정렬, bubble 없이 본문 그대로. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+.label {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  line-height: 1.2;
+}
+
+.body {
+  color: var(--fg);
+  font-size: var(--text-base);
+  line-height: 2;
+  width: 100%;
+  min-width: 0;
+}
+
+/* isGenerating — 한 글자씩 통통 wave */
+.root[data-generating="true"] .body {
+  color: var(--fg-muted);
+  font-weight: var(--font-weight-medium);
+}
+
+.generatingSpinner {
+  color: var(--fg-muted);
+  vertical-align: middle;
+  margin-right: var(--space-1);
+}
+
+.bounceChar {
+  display: inline-block;
+  animation: aimsg-char-bounce calc(var(--duration-slower) * 5) var(--ease-in-out) infinite;
+}
+
+.bounceSpace {
+  display: inline-block;
+  white-space: pre;
+}
+
+@keyframes aimsg-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;
+  }
+}
+/* 본문 안의 기본 markdown 요소들 톤 — AIMessage 안에서만 적용 */
+.body > :global(h1),
+.body > :global(h2),
+.body > :global(h3) {
+  color: var(--fg-strong);
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-3) 0 var(--space-1);
+}
+.body > :global(p) {
+  margin: var(--space-2) 0;
+}
+/* 리스트 — 들여쓰기 최소화. 마커는 primary로 채워 포인트. */
+.body :global(ol),
+.body :global(ul) {
+  padding-left: var(--space-4);
+  margin: var(--space-2) 0;
+}
+.body :global(li) {
+  margin: var(--space-0_5) 0;
+  padding-left: 0;
+}
+.body :global(li::marker) {
+  color: var(--primary);
+  font-variant-numeric: tabular-nums;
+}
+/* 중첩 리스트 — 조금만 더 들여쓰기 */
+.body :global(li > ol),
+.body :global(li > ul) {
+  padding-left: var(--space-4);
+  margin: var(--space-0_5) 0;
+}
+.body > :global(code) {
+  font-family: var(--font-code);
+  font-size: 0.9em;
+  padding: var(--space-0_5) var(--space-1);
+  background: var(--bg-subtle);
+  border-radius: var(--radius-xs);
+}
+
+.actions {
+  display: flex;
+}
+
+/* visibility=show: 상시 */
+.root[data-actions-visibility="show"] .actions {
+  opacity: 1;
+}
+
+/* visibility=hover: hover/focus-within에서만 — 부드러운 fade + translate */
+.root[data-actions-visibility="hover"] .actions {
+  opacity: 0;
+  transform: translateY(calc(var(--space-0_5) * -1));
+  transition:
+    opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+.root[data-actions-visibility="hover"]:hover .actions,
+.root[data-actions-visibility="hover"]:focus-within .actions {
+  opacity: 1;
+  transform: translateY(0);
+}

package/assets/components/AIMessage/AIMessage.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import {
+  MessageActions,
+  type MessageAction,
+} from "@/components/ctds/MessageActions";
+import { Spinner } from "@/components/ctds/Spinner";
+import styles from "./AIMessage.module.css";
+
+export type AIMessageActionsVisibility = "show" | "hover";
+
+export interface AIMessageProps extends HTMLAttributes<HTMLDivElement> {
+  /** 메시지 본문 — markdown 또는 콘텐츠 블록 조합. */
+  children: ReactNode;
+  /** 메시지 위 작은 라벨 ("LongText", "Code Block" 등). 없으면 숨김. */
+  label?: ReactNode;
+  /** 액션 노출. 기본 hover. */
+  actionsVisibility?: AIMessageActionsVisibility;
+  /** 액션 커스터마이즈. 기본 [copy, regenerate]. 비우려면 []. */
+  actions?: MessageAction[];
+  /** 생성 중이면 액션 숨김. */
+  isGenerating?: boolean;
+}
+
+const DEFAULT_ACTIONS: MessageAction[] = [
+  { kind: "copy" },
+  { kind: "regenerate" },
+];
+
+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 AIMessage({
+  children,
+  label,
+  actionsVisibility = "hover",
+  actions = DEFAULT_ACTIONS,
+  isGenerating = false,
+  className,
+  ...rest
+}: AIMessageProps) {
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+  const hasActions = actions.length > 0 && !isGenerating;
+
+  return (
+    <div
+      className={cls}
+      data-actions-visibility={actionsVisibility}
+      data-generating={isGenerating ? "true" : undefined}
+      {...rest}
+    >
+      {label ? <div className={styles.label}>{label}</div> : null}
+      <div className={styles.body}>
+        {isGenerating ? (
+          <>
+            <Spinner variant="lottie-dots" size="sm" className={styles.generatingSpinner} />
+            {typeof children === "string" ? renderBouncingText(children) : children}
+          </>
+        ) : (
+          children
+        )}
+      </div>
+      {hasActions ? (
+        <div className={styles.actions}>
+          <MessageActions align="start" actions={actions} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/assets/components/AIMessage/index.ts

@@ -0,0 +1,2 @@
+export { AIMessage } from "./AIMessage";
+export type { AIMessageProps, AIMessageActionsVisibility } from "./AIMessage";

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

@@ -13,14 +13,16 @@
   transition: var(--transition-colors);
 }
 
-/* 패딩만 size 차이. 오른쪽은 X 버튼 자리라 좁게. */
+/* 패딩만 size 차이. 오른쪽은 X 버튼 자리라 좁게. 폭은 고정 — label이 길면 ellipsis. */
 .sizeSm {
   padding: var(--space-1) var(--space-1) var(--space-1) var(--space-1);
   font-size: var(--text-xs);
+  width: calc(var(--space-20) * 2);
 }
 .sizeMd {
   padding: var(--space-1_5) var(--space-1_5) var(--space-1_5) var(--space-1_5);
   font-size: var(--text-sm);
+  width: calc(var(--space-24) * 2);
 }
 
 /* 파일명 */

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

@@ -22,9 +22,12 @@
 .sizeMd { --at-size: 40px; /* lint-hardcoded: ignore */ }
 .sizeLg { --at-size: 56px; /* lint-hardcoded: ignore */ }
 
-/* 이미지 */
+/* 이미지 — 다크/라이트 공통 검정 보더(이미지 가장자리 분리).
+   <img>에 inset shadow 걸면 이미지 픽셀이 덮어버리므로 부모에 outline 사용. */
 .hasImage {
   background: var(--bg-subtle);
+  outline: 3px solid rgb(0 0 0 / 0.16); /* lint-hardcoded: ignore */
+  outline-offset: -3px;
 }
 
 /* Image glyph placeholder — src 없을 때. 색은 TSX의 CSS 변수로 주입. */
@@ -50,14 +53,17 @@
   height: calc(var(--at-size) * 0.60);
 }
 
-/* Loading pulse — 토큰 조합 */
+/* Loading — fg를 어둡게 깐 위에 흰색 lottie spinner.
+   Spinner의 colorBind가 바깥 color를 읽으므로 .loading에 색 지정. */
 .loading {
-  background: var(--bg-subtle);
-  animation: at-pulse calc(var(--duration-slower) * 5) var(--ease-in-out) infinite;
+  background: color-mix(in oklch, var(--fg) 55%, transparent);
+  color: var(--fixed-white);
+  overflow: hidden;
 }
-@keyframes at-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.55; }
+/* wide 로티도 썸네일 안에 꽉 차 보이게 scale-up (overflow:hidden으로 안전) */
+.loading > span[role="status"] {
+  transform: scale(1.6);
+  transform-origin: center;
 }
 
 /* Remove 버튼 — hover 시만 노출. 코너 overlap. */

package/assets/components/AttachmentThumb/AttachmentThumb.tsx

@@ -2,6 +2,7 @@
 
 import type { CSSProperties, HTMLAttributes, MouseEvent } from "react";
 import { ImageSquare as PhImageSquare, X as PhX } from "@phosphor-icons/react";
+import { Spinner } from "@/components/ctds/Spinner";
 import styles from "./AttachmentThumb.module.css";
 
 export type AttachmentThumbSize = "sm" | "md" | "lg";
@@ -70,7 +71,9 @@ export function AttachmentThumb({
       data-removable={onRemove ? "" : undefined}
       {...rest}
     >
-      {loading ? null : src ? (
+      {loading ? (
+        <Spinner variant="lottie-spinner" size="sm" />
+      ) : src ? (
         <img src={src} alt={alt} className={styles.img} />
       ) : (
         <PhImageSquare className={styles.glyph} weight="regular" aria-hidden />

package/assets/components/Bubble/Bubble.module.css

@@ -0,0 +1,65 @@
+/* Bubble — 메시지 말풍선 primitive.
+   Shape (4) × Fill (4) 조합. Shape 축에 반응하되 circular/square는 강조 모양으로 수치 고정. */
+
+.root {
+  display: inline-block;
+  max-width: 100%;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  transition: var(--transition-colors);
+}
+
+/* Size — md 기본, lg는 패딩·폰트 둘 다 넉넉 */
+.sizeMd {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-base);
+}
+.sizeLg {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-base);
+}
+
+/* Shape */
+.shapeRounded {
+  border-radius: var(--radius-md);
+}
+.shapeSquare {
+  border-radius: var(--radius-sm);
+}
+.shapeCircular {
+  border-radius: var(--radius-full);
+}
+/* circular-drop — 세 코너는 radius-xl, tail 방향 한 코너만 radius-sm.
+   data-tail="end" → 오른쪽 상단만 각짐 (user 메시지, 오른쪽 정렬 꼬리). 기본.
+   data-tail="start" → 왼쪽 상단만 각짐 (assistant 메시지, 왼쪽 정렬 꼬리). */
+.shapeCircularDrop {
+  border-radius: var(--radius-md);
+}
+.shapeCircularDrop[data-tail="end"] {
+  border-top-right-radius: 0;
+}
+.shapeCircularDrop[data-tail="start"] {
+  border-top-left-radius: 0;
+}
+
+/* Fill */
+.fillNone {
+  background: transparent;
+  color: var(--fg-strong);
+  padding-left: 0;
+  padding-right: 0;
+}
+.fillSolid {
+  background: var(--primary);
+  color: var(--bg);
+}
+.fillTranslucent {
+  background: var(--primary-subtle);
+  color: var(--fg-strong);
+}
+.fillOutline {
+  background: var(--bg);
+  color: var(--fg-strong);
+  border: var(--hairline) solid var(--border);
+}

package/assets/components/Bubble/Bubble.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import styles from "./Bubble.module.css";
+
+export type BubbleShape = "rounded" | "circular-drop" | "circular" | "square";
+export type BubbleFill = "none" | "solid" | "translucent" | "outline";
+export type BubbleSize = "md" | "lg";
+export type BubbleTail = "start" | "end";
+
+export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+  shape?: BubbleShape;
+  fill?: BubbleFill;
+  size?: BubbleSize;
+  /** circular-drop에서 각지는 코너의 방향. UserMessage=end, AIMessage/Quote=start. */
+  tail?: BubbleTail;
+  children: ReactNode;
+}
+
+const shapeClass: Record<BubbleShape, string> = {
+  rounded: styles.shapeRounded,
+  "circular-drop": styles.shapeCircularDrop,
+  circular: styles.shapeCircular,
+  square: styles.shapeSquare,
+};
+
+const fillClass: Record<BubbleFill, string> = {
+  none: styles.fillNone,
+  solid: styles.fillSolid,
+  translucent: styles.fillTranslucent,
+  outline: styles.fillOutline,
+};
+
+const sizeClass: Record<BubbleSize, string> = {
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+export function Bubble({
+  shape = "rounded",
+  fill = "translucent",
+  size = "md",
+  tail = "end",
+  className,
+  children,
+  ...rest
+}: BubbleProps) {
+  const cls = [
+    styles.root,
+    shapeClass[shape],
+    fillClass[fill],
+    sizeClass[size],
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={cls} data-tail={shape === "circular-drop" ? tail : undefined} {...rest}>
+      {children}
+    </div>
+  );
+}

package/assets/components/Bubble/index.ts

@@ -0,0 +1,2 @@
+export { Bubble } from "./Bubble";
+export type { BubbleProps, BubbleShape, BubbleFill, BubbleSize, BubbleTail } from "./Bubble";

package/assets/components/Button/Button.module.css

@@ -48,9 +48,23 @@
 .root:disabled .icon {
   opacity: 1;
 }
+/* Loading — 라벨/아이콘은 보이지만 톤 다운, Spinner가 중앙에 overlay.
+   폭을 유지하기 위해 label·icon은 visibility로 숨김(공간 보존). */
 .root[data-loading="true"] {
   cursor: not-allowed;
-  opacity: 0.5;
+  position: relative;
+}
+.root[data-loading="true"] .label,
+.root[data-loading="true"] .icon,
+.root[data-loading="true"] .badge {
+  visibility: hidden;
+}
+.root[data-loading="true"] .spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentColor;
 }
 
 /* Full width ─────────────────────────────────────────────────── */
@@ -212,5 +226,4 @@
 /* Loading spinner slot ───────────────────────────────────────── */
 .spinner {
   display: inline-flex;
-  animation: m-spin var(--duration-slower) var(--ease-linear) infinite;
 }

package/assets/components/Button/Button.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { Slot } from "@radix-ui/react-slot";
 
+import { Spinner, type SpinnerSize } from "../Spinner";
 import styles from "./Button.module.css";
 
 export type ButtonVariant =
@@ -63,6 +64,13 @@ const ICON_SIZE: Record<ButtonSize, number> = {
   lg: 20,
 };
 
+const SPINNER_SIZE: Record<ButtonSize, SpinnerSize> = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+};
+
 function sizedIcon(node: ReactNode, size: number): ReactNode {
   if (!isValidElement(node)) return node;
   const el = node as ReactElement<{ size?: number | string }>;
@@ -139,6 +147,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             {sizedIcon(rightIcon, ICON_SIZE[size])}
           </span>
         )}
+        {loading && (
+          <span className={styles.spinner} aria-hidden>
+            <Spinner size={SPINNER_SIZE[size]} />
+          </span>
+        )}
       </Comp>
     );
   },

package/assets/components/Calendar/Calendar.module.css

@@ -0,0 +1,163 @@
+/* Calendar ───────────────────────────────────────────────────
+   페이지에 인라인으로 들어가는 월간 캘린더. DatePicker와 분리.
+   레이아웃은 flex column + 그리드 flex-1로 뷰포트 높이에 반응.
+   스크롤 2-레이어 규약: cellEvents는 overflow:hidden 유지 — 넘치면
+   hiddenCount로 "+N" 뱃지가 대체한다 (내부 스크롤 금지). */
+.root {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  background: var(--bg);
+  color: var(--fg);
+}
+
+/* Toolbar ──────────────────────────────────────────────────── */
+.toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: var(--space-2);
+  gap: var(--space-3);
+}
+
+.toolbarSide {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.toolbarSide[data-align="end"] {
+  justify-content: flex-end;
+}
+
+.monthNav {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.monthTitle {
+  min-width: calc(var(--space-2) * 14);
+  text-align: center;
+  font-family: var(--font-normal);
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+}
+
+/* "오늘"은 현재 달이 아닐 때만 등장. 사라져도 toolbar 높이가 흔들리지 않도록
+   자리를 유지하고 visibility만 토글. */
+.todaySlot {
+  visibility: hidden;
+}
+.todaySlot[data-visible] {
+  visibility: visible;
+}
+
+/* Weekdays ─────────────────────────────────────────────────── */
+.weekdays {
+  display: grid;
+  gap: 0;
+}
+
+.weekday {
+  padding-block: var(--space-2);
+  text-align: center;
+  font-family: var(--label-font);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  letter-spacing: var(--label-tracking);
+}
+
+.weekday[data-tone="sat"] { color: var(--info); }
+.weekday[data-tone="sun"] { color: var(--destructive); }
+
+/* Month grid ────────────────────────────────────────────────
+   보더는 그리드가 전체 둘레(top/left)를 그리고, 각 셀이 right/bottom만 그린다.
+   이렇게 하면 열 수(5열/7열)가 바뀌어도 왼쪽 세로선이 안정적으로 유지됨. */
+.grid {
+  display: grid;
+  flex: 1 1 0;
+  min-height: 0;
+  border-top: var(--hairline) solid var(--border);
+  border-left: var(--hairline) solid var(--border);
+}
+
+/* Cell ───────────────────────────────────────────────────── */
+.cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  min-height: 0;
+  padding: var(--space-2);
+  border-right: var(--hairline) solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
+  overflow: hidden;
+  background: var(--bg);
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+
+.cell:hover:not([data-selected]) {
+  background: var(--hover);
+}
+
+.cell:focus-visible {
+  outline: var(--ring-width) solid var(--ring);
+  outline-offset: calc(-1 * var(--ring-width));
+}
+
+/* selected 셀 — inset ring. active 상태 위 hover가 border/bg를 덮지 않도록
+   ring만 사용 (feedback_hover_over_active 규약). */
+.cell[data-selected] {
+  z-index: var(--z-raise);
+  box-shadow: inset 0 0 0 var(--ring-width) var(--primary);
+}
+
+.cellHead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.dayNum {
+  font-family: var(--font-normal);
+  font-size: var(--text-sm);
+  color: var(--fg);
+  line-height: 1;
+}
+
+.dayNum[data-tone="muted"] { color: var(--fg-disabled); }
+.dayNum[data-tone="sat"]   { color: var(--info); }
+.dayNum[data-tone="sun"]   { color: var(--destructive); }
+
+.dayNum[data-selected],
+.cell[data-today] .dayNum:not([data-tone="muted"]) {
+  color: var(--primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.cellBadges {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.cellEvents {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+}