@conscience-technology/ctds 0.1.8 → 0.1.10

package/assets/components/MessageQuote/MessageQuote.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import styles from "./MessageQuote.module.css";
+
+export type MessageQuoteVariant = "plain" | "blockquote";
+
+export interface MessageQuoteProps extends HTMLAttributes<HTMLQuoteElement> {
+  children: ReactNode;
+  /** plain — 그냥 글. blockquote — 왼쪽 vertical bar 리더. 기본 blockquote. */
+  variant?: MessageQuoteVariant;
+}
+
+export function MessageQuote({
+  children,
+  variant = "blockquote",
+  className,
+  ...rest
+}: MessageQuoteProps) {
+  const cls = [
+    styles.root,
+    variant === "blockquote" ? styles.blockquote : styles.plain,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <blockquote className={cls} {...rest}>
+      {children}
+    </blockquote>
+  );
+}

package/assets/components/MessageQuote/index.ts

@@ -0,0 +1,2 @@
+export { MessageQuote } from "./MessageQuote";
+export type { MessageQuoteProps, MessageQuoteVariant } from "./MessageQuote";

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

@@ -0,0 +1,63 @@
+/* MessageSources — AIMessage 하단 소스 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);
+  border-radius: var(--radius-full);
+  color: var(--fg);
+  font-size: var(--text-xs);
+  text-decoration: none;
+  transition: var(--transition-colors);
+  max-width: 100%;
+  min-width: 0;
+}
+.chip:hover {
+  background: var(--bg-muted);
+  color: var(--fg-strong);
+}
+.chip:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+.chipIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-4);
+  height: var(--space-4);
+  flex: 0 0 auto;
+  color: var(--fg-muted);
+}
+.linkIcon {
+  width: 80%;
+  height: 80%;
+}
+
+.chipLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}

package/assets/components/MessageSources/MessageSources.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import { Link as PhLink } from "@phosphor-icons/react";
+import styles from "./MessageSources.module.css";
+
+export interface MessageSource {
+  id: string;
+  label: string;
+  href?: string;
+  /** 좌측 favicon 등 커스텀 아이콘. 없으면 기본 Link. */
+  icon?: React.ReactNode;
+}
+
+export interface MessageSourcesProps extends HTMLAttributes<HTMLDivElement> {
+  sources: MessageSource[];
+  /** 상단 라벨. 기본 "Sources". */
+  label?: string;
+}
+
+export function MessageSources({
+  sources,
+  label = "Sources",
+  className,
+  ...rest
+}: MessageSourcesProps) {
+  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
+            key={s.id}
+            className={styles.chip}
+            href={s.href || "#"}
+            target={s.href ? "_blank" : undefined}
+            rel={s.href ? "noopener noreferrer" : undefined}
+          >
+            <span className={styles.chipIcon}>
+              {s.icon ?? <PhLink className={styles.linkIcon} weight="regular" aria-hidden />}
+            </span>
+            <span className={styles.chipLabel}>{s.label}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

package/assets/components/MessageSources/index.ts

@@ -0,0 +1,2 @@
+export { MessageSources } from "./MessageSources";
+export type { MessageSourcesProps, MessageSource } from "./MessageSources";

package/assets/components/MessageTable/MessageTable.module.css

@@ -0,0 +1,46 @@
+/* MessageTable — markdown table 톤.
+   wrapper는 가로 스크롤 컨테이너, 안쪽 table이 트랙. */
+
+.root {
+  width: 100%;
+  overflow-x: auto;
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-md);
+}
+
+.root :global(table) {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--fg);
+  table-layout: auto;
+}
+
+.root :global(thead) {
+  background: var(--bg-subtle);
+}
+
+.root :global(th),
+.root :global(td) {
+  padding: var(--space-2) var(--space-3);
+  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 */
+.root :global(td),
+.root :global(th) {
+  font-variant-numeric: tabular-nums;
+}
+
+/* 마지막 행 border 제거 */
+.root :global(tr:last-child td) {
+  border-bottom: 0;
+}

package/assets/components/MessageTable/MessageTable.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import styles from "./MessageTable.module.css";
+
+export interface MessageTableProps extends HTMLAttributes<HTMLDivElement> {
+  /** children에 <table>...</table> 전달. CTDS가 톤만 입힘. */
+  children: ReactNode;
+}
+
+/** AIMessage 안의 markdown table을 "AI 응답 톤"으로 감싸는 wrapper.
+ *  소비처는 <table><thead><tr><th>…</th></tr></thead><tbody>…</tbody></table> 그대로 전달.
+ *  wrapper가 가로 스크롤·hairline·padding 처리. */
+export function MessageTable({ children, className, ...rest }: MessageTableProps) {
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+  return (
+    <div className={cls} {...rest}>
+      {children}
+    </div>
+  );
+}

package/assets/components/MessageTable/index.ts

@@ -0,0 +1,2 @@
+export { MessageTable } from "./MessageTable";
+export type { MessageTableProps } from "./MessageTable";

package/assets/components/QuotationBar/QuotationBar.module.css

@@ -7,8 +7,8 @@
   gap: var(--space-2);
   min-width: 0;
   padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
-  background: var(--bg);
-  border: var(--hairline) solid var(--border);
+  background: var(--bg-subtle);
+  border: 0;
   border-radius: var(--radius-md);
   color: var(--fg);
   font-size: var(--text-sm);

package/assets/components/Sidebar/Sidebar.module.css

@@ -137,76 +137,22 @@
 }
 
 /* Profile ──────────────────────────────────────────────
-   Footer 내부 사용자 식별 영역. Avatar(lg)+2줄 텍스트.
-   좌우 음수 margin으로 footer padding-inline(--space-4) 상쇄 → hover 영역이
-   사이드바 좌/우 끝까지 꽉 참. 안쪽 콘텐츠는 padding-inline으로 복원. */
+   IdentityButton의 preset 래퍼. 음수 margin으로 Footer padding-inline(--space-4) 상쇄 →
+   hover 영역이 사이드바 좌/우 끝까지 꽉 참. 안쪽 콘텐츠는 IdentityButton 자체 padding으로 복원.
+   radius 0은 "사이드바에 꽉 찬 바닥 블록" 느낌을 유지하기 위함. */
 .profile {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
   margin-inline: calc(var(--space-4) * -1);
   padding: var(--space-2) var(--space-4);
   border-radius: 0;
-  min-width: 0;
   width: auto;
-  cursor: pointer;
-  transition: var(--transition-colors);
-}
-
-.profile:hover {
-  background: var(--hover);
-}
-
-.profile:focus-visible {
-  outline: none;
-  background: var(--hover);
 }
 
 .profile[data-collapsed] {
-  justify-content: center;
-  gap: 0;
   /* collapsed root padding(--space-2)에 맞춰 margin도 축소. */
   margin-inline: calc(var(--space-2) * -1);
   padding-inline: var(--space-2);
 }
 
-.profileBody {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.profileName {
-  font-family: var(--label-font);
-  font-size: var(--label-sm-size);
-  letter-spacing: var(--label-tracking);
-  line-height: var(--lh-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--fg);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.profileSub {
-  font-family: var(--label-font);
-  font-size: var(--text-xs);
-  line-height: var(--lh-xs);
-  font-weight: var(--font-weight-regular);
-  color: var(--fg-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.profileTrailing {
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-}
-
 /* Section ────────────────────────────────────────────
    스크롤 트랙(.body) 안쪽의 "items" 레이어. 좌우 padding은 여기가 담당.
    .body 자체에 두면 스크롤바가 padding 안쪽으로 밀려 좌/우 끝에 안 붙음. */

package/assets/components/Sidebar/Sidebar.tsx

@@ -8,7 +8,8 @@ import {
   type ReactNode,
 } from "react";
 
-import { Avatar, type AvatarProps } from "../Avatar";
+import { type AvatarProps } from "../Avatar";
+import { IdentityButton } from "../IdentityButton";
 import { MenuItem, type MenuItemAction } from "../MenuItem";
 import styles from "./Sidebar.module.css";
 
@@ -98,16 +99,17 @@ function SidebarFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivE
 
 /* Profile ──────────────────────────────────────────────
    사이드바 하단 사용자 식별 영역.
-   Avatar(size=md) + name(1행) + sub(1행) 조합.
-   collapsed일 땐 Avatar만 노출(aria-label로 접근성 유지).
+   [[components/identity-button]]의 preset 래퍼 — Avatar + 2줄 라벨 + trailing 뼈대 공유.
    사이즈·간격·폰트는 MenuItem md 리듬에 맞춰 통일 — 인라인 스타일로 조립 금지. */
-export interface SidebarProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface SidebarProfileProps {
   name: string;
   sub?: ReactNode;
   /** Avatar에 그대로 패스스루. src/initials/icon/status 등 자유롭게. */
   avatar?: Omit<AvatarProps, "size" | "name" | "alt">;
   /** 오른쪽 끝 보조 UI(IconButton 등). collapsed일 땐 숨김. */
   trailing?: ReactNode;
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 function SidebarProfile({
@@ -116,27 +118,22 @@ function SidebarProfile({
   avatar,
   trailing,
   className,
-  ...rest
+  onClick,
 }: SidebarProfileProps) {
   const { collapsed } = useSidebar();
   return (
-    <div
+    <IdentityButton
+      size="md"
+      variant="ghost"
+      avatar={avatar}
+      name={name}
+      sub={sub}
+      trailing={trailing}
+      collapsed={collapsed}
       className={[styles.profile, className ?? ""].filter(Boolean).join(" ")}
-      data-collapsed={collapsed || undefined}
-      title={collapsed ? name : undefined}
-      {...rest}
-    >
-      <Avatar size="md" name={name} alt={name} {...avatar} />
-      {!collapsed && (
-        <div className={styles.profileBody}>
-          <span className={styles.profileName}>{name}</span>
-          {sub && <span className={styles.profileSub}>{sub}</span>}
-        </div>
-      )}
-      {!collapsed && trailing && (
-        <div className={styles.profileTrailing}>{trailing}</div>
-      )}
-    </div>
+      aria-label={collapsed ? name : undefined}
+      onClick={onClick}
+    />
   );
 }
 

package/assets/components/Spinner/LottiePlayer.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * LottiePlayer — Spinner가 lottie-* variant일 때 내부에서 쓰는 플레이어.
+ *
+ * - 서버 사이드에서는 아무것도 렌더 안 함 (lottie-react는 client-only).
+ * - fetch로 /lottie/<name>.json 로드 → 캐시 (모듈 레벨).
+ * - 매니페스트의 colorBind=true면 바깥 요소 computed color로 recolor.
+ */
+
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { Lottie } from "lottie-react";
+import { LOTTIE_MANIFEST, type LottieName } from "./lottieManifest";
+import { parseCssColor, recolorLottie } from "./lottieColor";
+import styles from "./Spinner.module.css";
+
+/** JSON 캐시 — 같은 로티를 여러 자리에서 쓸 때 fetch 1회만. */
+const cache = new Map<LottieName, unknown>();
+const inflight = new Map<LottieName, Promise<unknown>>();
+
+async function loadLottie(name: LottieName): Promise<unknown> {
+  if (cache.has(name)) return cache.get(name);
+  if (inflight.has(name)) return inflight.get(name)!;
+  const p = fetch(LOTTIE_MANIFEST[name].path)
+    .then((r) => r.json())
+    .then((json) => {
+      cache.set(name, json);
+      inflight.delete(name);
+      return json;
+    });
+  inflight.set(name, p);
+  return p;
+}
+
+export type LottiePlayerProps = {
+  name: LottieName;
+  className?: string;
+};
+
+export function LottiePlayer({ name, className }: LottiePlayerProps) {
+  const entry = LOTTIE_MANIFEST[name];
+  const [data, setData] = useState<unknown>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadLottie(name).then((raw) => {
+      if (cancelled) return;
+      if (!entry.colorBind) {
+        setData(raw);
+        return;
+      }
+      // 바깥 요소의 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));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [name, entry.colorBind]);
+
+  const scaleStyle = entry.visualScale
+    ? ({ "--lottie-scale": entry.visualScale } as CSSProperties)
+    : undefined;
+
+  return (
+    <div ref={containerRef} className={className} style={scaleStyle}>
+      {data ? (
+        <Lottie src={data} loop autoplay className={styles.lottieFill} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,167 @@
+/* Spinner — 공통 바깥 박스
+   variant 지정 → data-variant로 분기
+   variant 미지정 → [data-motion="…"] 조상 셀렉터로 자동 매핑 (Motion 축 추종)
+
+   색은 currentColor로 묶여 부모 color를 그대로 승계 (Palette/Hue 축 호환). */
+
+.root {
+  display: inline-flex;
+  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;
+}
+
+.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); }
+
+/* 자식 전부 기본 숨김 — 활성 variant만 켬. */
+.ring,
+.dot,
+.pulse {
+  display: none;
+}
+
+/* ─────────────────────────────────────────────────────────
+   공통 variant 규칙 (키: ring / dots-bounce / dots-fade / pulse)
+   아래는 "활성 variant → 어떤 자식을 어떻게 보이게 할지"만 정의.
+   무엇이 활성 variant인가는 더 아래 "매칭" 섹션이 결정.
+   ───────────────────────────────────────────────────────── */
+
+/* ring */
+.v-ring .ring {
+  display: block;
+  width: 100%;
+  height: 100%;
+  animation: m-spin calc(var(--duration-slower) * 2) linear infinite; /* lint-hardcoded: ignore */
+}
+
+/* dots 공통 */
+.v-dots {
+  width: auto;
+  min-width: var(--loader-size);
+  gap: calc(var(--loader-size) * 0.22);
+}
+.v-dots .dot {
+  display: block;
+  width: calc(var(--loader-size) * 0.32);
+  height: calc(var(--loader-size) * 0.32);
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+/* dots-bounce */
+.v-dots-bounce .dot {
+  animation: m-dots-bounce calc(var(--duration-slower) * 1.5) var(--ease-in-out) infinite;
+}
+.v-dots-bounce .dot:nth-child(3) {
+  animation-delay: calc(var(--duration-base) * -1);
+}
+.v-dots-bounce .dot:nth-child(4) {
+  animation-delay: calc(var(--duration-slow) * -1);
+}
+
+/* dots-fade */
+.v-dots-fade .dot {
+  animation: m-dots-fade calc(var(--duration-slower) * 1.5) var(--ease-in-out) infinite;
+}
+.v-dots-fade .dot:nth-child(3) {
+  animation-delay: calc(var(--duration-base) * -1);
+}
+.v-dots-fade .dot:nth-child(4) {
+  animation-delay: calc(var(--duration-slow) * -1);
+}
+
+/* pulse */
+.v-pulse .pulse {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.6;
+  animation: m-pulse calc(var(--duration-slower) * 2) var(--ease-in-out) infinite;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Lottie variants — LottiePlayer가 바깥 박스 100% 채움.
+   bounds는 .root가 결정 (size prop), aspect=wide 로티는 .wide로 폭을 2배.
+   ───────────────────────────────────────────────────────── */
+.v-lottie {
+  overflow: visible;
+}
+.v-lottie.wide {
+  width: calc(var(--loader-size) * 2);
+}
+
+.lottieFill {
+  width: 100%;
+  height: 100%;
+  /* 로티 원본이 캔버스를 덜 채워 체감 크기가 작은 경우, 매니페스트의 visualScale이
+     --lottie-scale을 지정 → bounds 안에서 scale-up. 지정 없으면 1 (원본). */
+  transform: scale(var(--lottie-scale, 1));
+  transform-origin: center;
+}
+
+/* ─────────────────────────────────────────────────────────
+   v-auto — variant 미지정 시 Motion 축을 따라감.
+   조상 data-motion 값에 따라 분기. 기본(미지정)은 ring.
+   ───────────────────────────────────────────────────────── */
+
+.v-auto .ring {
+  display: block;
+  width: 100%;
+  height: 100%;
+  animation: m-spin calc(var(--duration-slower) * 2) linear infinite; /* lint-hardcoded: ignore */
+}
+
+[data-motion="bouncy"] .v-auto .ring,
+[data-motion="calm"] .v-auto .ring {
+  display: none;
+  animation: none;
+}
+
+[data-motion="bouncy"] .v-auto,
+[data-motion="calm"] .v-auto {
+  width: auto;
+  min-width: var(--loader-size);
+  gap: calc(var(--loader-size) * 0.22);
+}
+
+[data-motion="bouncy"] .v-auto .dot,
+[data-motion="calm"] .v-auto .dot {
+  display: block;
+  width: calc(var(--loader-size) * 0.32);
+  height: calc(var(--loader-size) * 0.32);
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+/* bouncy → dots-bounce */
+[data-motion="bouncy"] .v-auto .dot {
+  animation: m-dots-bounce calc(var(--duration-slower) * 1.5) var(--ease-in-out) infinite;
+}
+[data-motion="bouncy"] .v-auto .dot:nth-child(3) {
+  animation-delay: calc(var(--duration-base) * -1);
+}
+[data-motion="bouncy"] .v-auto .dot:nth-child(4) {
+  animation-delay: calc(var(--duration-slow) * -1);
+}
+
+/* calm → dots-fade */
+[data-motion="calm"] .v-auto .dot {
+  animation: m-dots-fade calc(var(--duration-slower) * 1.5) var(--ease-in-out) infinite;
+}
+[data-motion="calm"] .v-auto .dot:nth-child(3) {
+  animation-delay: calc(var(--duration-base) * -1);
+}
+[data-motion="calm"] .v-auto .dot:nth-child(4) {
+  animation-delay: calc(var(--duration-slow) * -1);
+}