@conscience-technology/ctds 0.1.9 → 0.1.11

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

@@ -0,0 +1,29 @@
+/* MessageQuote — AIMessage 안 인용 블록. plain(그냥 글) / blockquote(왼쪽 bar 리더). */
+
+.root {
+  margin: 0;
+  color: var(--fg);
+  font-size: var(--text-base);
+  line-height: 2;
+}
+
+.plain {
+  /* 그냥 글 — bar 없음 */
+}
+
+.blockquote {
+  position: relative;
+  padding-left: var(--space-4);
+  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/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,58 @@
+/* MessageSources — AIMessage 액션바 inline chip.
+   [□□□ 겹친 favicon] Sources +N 형태. 작고 가벼운 chip. */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-0_5) var(--space-2) var(--space-0_5) var(--space-1);
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  font-size: var(--text-xs);
+  line-height: 1;
+  transition: var(--transition-colors);
+}
+.root:hover {
+  background: var(--bg-subtle);
+  color: var(--fg-strong);
+}
+.root:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+/* 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;
+}
+.favicon:first-child {
+  margin-left: 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

@@ -0,0 +1,64 @@
+"use client";
+
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import styles from "./MessageSources.module.css";
+
+export interface MessageSource {
+  id: string;
+  label: string;
+  href?: string;
+  /** 왼쪽 favicon. 없으면 중성 원형 placeholder. */
+  icon?: ReactNode;
+}
+
+export interface MessageSourcesProps extends HTMLAttributes<HTMLButtonElement> {
+  sources: MessageSource[];
+  /** 라벨 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 extra = sources.length - visible.length;
+
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+
+  return (
+    <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.favicon}
+            style={{ ["--stack-i" as string]: String(i) }}
+          >
+            {s.icon ?? null}
+          </span>
+        ))}
+      </span>
+      <span className={styles.label}>
+        {label}
+        {extra > 0 ? <span className={styles.extra}> +{extra}</span> : null}
+      </span>
+    </button>
+  );
+}

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,59 @@
+/* MessageTable — AIMessage 안 markdown table. TableHeader/TableRow의 line variant 톤에 맞춤:
+   외곽 border 없음, header도 bg 없이 하단 hairline만. row도 하단 hairline만.
+   wrapper는 가로 overflow 시 scroll. */
+
+.root {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.root :global(table) {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--fg);
+  table-layout: auto;
+}
+
+/* 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);
+}
+
+/* 첫 셀 좌측 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-2);
+  text-align: left;
+  vertical-align: top;
+  line-height: 1.5;
+}
+
+/* 숫자 셀도 좌측 정렬 유지 (feedback-no-right-align-numbers), 숫자 폭 균일 */
+.root :global(td),
+.root :global(th) {
+  font-variant-numeric: tabular-nums;
+}

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,82 @@
+"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]);
+
+  // 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={style}>
+      {data ? (
+        <Lottie src={data} loop autoplay className={styles.lottieFill} />
+      ) : null}
+    </div>
+  );
+}