@conscience-technology/ctds 0.1.9 → 0.1.11

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

@@ -0,0 +1,170 @@
+/* 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 — 전부 정사각 bounds. LottiePlayer가 preserveAspectRatio=slice로
+   비정사각 캔버스를 가장자리 잘라 cover. visualScale/offset은 매니페스트에서.
+   ───────────────────────────────────────────────────────── */
+.v-lottie {
+  overflow: hidden;
+  position: relative;
+}
+
+/* 안쪽 로티 박스를 scale 배수만큼 "실제로" 크게 그려서 wrapper를 꽉 채우게 함.
+   transform:scale은 lottie-react wrapper에서 letterbox가 생겨 체감이 반감되므로 사용하지 않음.
+   offset은 중앙 기준 translate(%) — 상위 bounds 비율 기반 (ex. 5% = 아래로 bounds의 5% 밀기). */
+.lottieFill {
+  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));
+}
+
+/* ─────────────────────────────────────────────────────────
+   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);
+}

package/assets/components/Spinner/Spinner.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+/**
+ * Spinner — Motion 축이 로더 성격을 결정.
+ *
+ * variant 생략 시 Motion 축의 `--loader-style`을 추종한다.
+ *   - bouncy  → dots-bounce
+ *   - standard → ring
+ *   - calm    → dots-fade
+ *   - none    → ring (접근성 예외: 로딩 신호는 유지)
+ *
+ * `lottie-<name>` variant는 번들된 Lottie 로티를 렌더 (colorBind=true면 currentColor 추종).
+ *
+ * 색은 currentColor로 묶여 부모 color를 그대로 승계 (Palette/Hue 축 호환).
+ */
+
+import { forwardRef, type HTMLAttributes } from "react";
+import styles from "./Spinner.module.css";
+import type { LottieName } from "./lottieManifest";
+import { LottiePlayer } from "./LottiePlayer";
+
+export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export type SpinnerBaseVariant = "ring" | "dots-bounce" | "dots-fade" | "pulse";
+export type SpinnerLottieVariant = `lottie-${LottieName}`;
+export type SpinnerVariant = SpinnerBaseVariant | SpinnerLottieVariant;
+
+export type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
+  size?: SpinnerSize;
+  /** 생략 시 현재 Motion 축의 `--loader-style`을 따름 */
+  variant?: SpinnerVariant;
+  /** 스크린리더 라벨 */
+  label?: string;
+};
+
+const sizeClass: Record<SpinnerSize, string> = {
+  xs: styles.xs,
+  sm: styles.sm,
+  md: styles.md,
+  lg: styles.lg,
+};
+
+const baseVariantClass: Record<SpinnerBaseVariant, string> = {
+  ring: styles["v-ring"],
+  "dots-bounce": `${styles["v-dots"]} ${styles["v-dots-bounce"]}`,
+  "dots-fade": `${styles["v-dots"]} ${styles["v-dots-fade"]}`,
+  pulse: styles["v-pulse"],
+};
+
+function isLottieVariant(v: SpinnerVariant): v is SpinnerLottieVariant {
+  return v.startsWith("lottie-");
+}
+
+const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
+  ({ className, size = "sm", variant, label = "Loading", ...rest }, ref) => {
+    let variantPart = "";
+    let lottieName: LottieName | null = null;
+
+    if (variant) {
+      if (isLottieVariant(variant)) {
+        lottieName = variant.slice("lottie-".length) as LottieName;
+        variantPart = styles["v-lottie"];
+      } else {
+        variantPart = baseVariantClass[variant];
+      }
+    } else {
+      variantPart = styles["v-auto"];
+    }
+
+    const rootClass = [styles.root, sizeClass[size], variantPart, className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <span
+        ref={ref}
+        className={rootClass}
+        role="status"
+        aria-label={label}
+        {...rest}
+      >
+        {lottieName ? <LottiePlayer name={lottieName} /> : <SpinnerBody />}
+      </span>
+    );
+  },
+);
+
+Spinner.displayName = "Spinner";
+
+/* 비-로티 variant용 공통 바디. 활성 variant 클래스가 해당하는 자식만 display. */
+function SpinnerBody() {
+  return (
+    <>
+      <svg className={styles.ring} viewBox="0 0 24 24" fill="none" aria-hidden>
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeOpacity="0.2"
+          strokeWidth="3"
+        />
+        <path
+          d="M12 3a9 9 0 0 1 9 9"
+          stroke="currentColor"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+      </svg>
+      <span className={styles.dot} aria-hidden />
+      <span className={styles.dot} aria-hidden />
+      <span className={styles.dot} aria-hidden />
+      <span className={styles.pulse} aria-hidden />
+    </>
+  );
+}
+
+export { Spinner };

package/assets/components/Spinner/index.ts

@@ -0,0 +1,10 @@
+export { Spinner } from "./Spinner";
+export type {
+  SpinnerProps,
+  SpinnerSize,
+  SpinnerVariant,
+  SpinnerBaseVariant,
+  SpinnerLottieVariant,
+} from "./Spinner";
+export { LOTTIE_MANIFEST, LOTTIE_NAMES } from "./lottieManifest";
+export type { LottieName, LottieManifestEntry } from "./lottieManifest";

package/assets/components/Spinner/lottieColor.ts

@@ -0,0 +1,106 @@
+/**
+ * Lottie JSON 안의 모든 색 배열을 target 색으로 치환.
+ *
+ * Lottie 색 포맷: `[r, g, b]` 또는 `[r, g, b, a]` (0~1 정규화).
+ * 매니페스트에서 `colorBind: true`인 단색 로티에만 사용 — 다색 로티는 색 구조가
+ * 흐트러져서 적용 불가.
+ */
+
+export type Rgb = [number, number, number];
+
+/** CSS 색 문자열 → [r,g,b] 0~1 정규화. 서버에서는 null 반환.
+ *  oklch()/color() 같은 비-sRGB 색공간을 Canvas 2D fillStyle로 넣고 다시 읽어
+ *  브라우저가 rgb()/rgba() 문자열로 토해내게 한 뒤 파싱 (가장 안정적인 변환). */
+export function parseCssColor(css: string): Rgb | null {
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.fillStyle = "#000";
+  ctx.fillStyle = css;
+  const computed = ctx.fillStyle as string;
+  // Canvas가 지원 못 하면 "#000"이 그대로 남음 → 원본이 지원되지 않는 색이거나 oklch 미지원 브라우저.
+  // getComputedStyle로 폴백 (대부분 rgb() 반환).
+  let hex = /^#([0-9a-f]{6})$/i.exec(computed);
+  if (!hex) {
+    const el = document.createElement("div");
+    el.style.color = css;
+    document.body.appendChild(el);
+    ctx.fillStyle = "#000";
+    ctx.fillStyle = getComputedStyle(el).color;
+    document.body.removeChild(el);
+    hex = /^#([0-9a-f]{6})$/i.exec(ctx.fillStyle as string);
+  }
+  if (hex) {
+    const n = parseInt(hex[1], 16);
+    return [((n >> 16) & 0xff) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
+  }
+  // 최후 폴백 — rgba() / rgb() 문자열 파싱
+  const m = (computed as string).match(/-?\d+(\.\d+)?/g);
+  if (!m || m.length < 3) return null;
+  return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
+}
+
+/** 색 자리를 target으로 치환. colorBind=true 전용 — 단색 로티 가정.
+ *  원본 색의 알파만 보존하고 rgb는 target 그대로.
+ *  (이전 버전은 원본 luma 비율로 scale → primary처럼 중간 밝기 target일 때
+ *   원본이 검정이면 결과도 검정으로 묶여버렸음.) */
+export function recolorLottie(data: unknown, target: Rgb): unknown {
+  const [tr, tg, tb] = target;
+
+  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 alpha = node.length === 4 ? node[3] : undefined;
+        return alpha !== undefined ? [tr, tg, tb, alpha] : [tr, tg, tb];
+      }
+      return node.map((v) => walk(v));
+    }
+    if (node && typeof node === "object") {
+      const obj = node as Record<string, unknown>;
+      const out: Record<string, unknown> = {};
+      // 그라데이션 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;
+    }
+    return node;
+  }
+
+  return walk(data);
+}

package/assets/components/Spinner/lottieManifest.ts

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

package/assets/components/Tabs/Tabs.module.css

@@ -107,7 +107,7 @@
   position: relative;
 }
 .size_sm .triggerUnderline { padding-inline: var(--space-1_5); }
-.size_lg .triggerUnderline { padding-inline: var(--space-3); }
+.size_lg .triggerUnderline { padding-inline: var(--space-1_5); }
 
 .listUnderline { position: relative; }
 
@@ -126,8 +126,8 @@
   transform: translateX(calc(var(--tab-indicator-x) + var(--space-1_5)));
 }
 .size_lg .underlineBar {
-  width: calc(var(--tab-indicator-w) - var(--space-3) * 2);
-  transform: translateX(calc(var(--tab-indicator-x) + var(--space-3)));
+  width: calc(var(--tab-indicator-w) - var(--space-1_5) * 2);
+  transform: translateX(calc(var(--tab-indicator-x) + var(--space-1_5)));
 }
 /* ready=true 이후에만 transition — 초기 배치는 순간이동. */
 .listUnderline[data-ready="true"] .underlineBar {

package/assets/components/UserMessage/UserMessage.module.css

@@ -0,0 +1,41 @@
+/* UserMessage — Bubble + MessageActions. 오른쪽 정렬. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-1);
+  width: 100%;
+}
+
+/* 첨부·인용 등 bubble 위에 올리는 영역 */
+.before {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-1);
+  max-width: 100%;
+}
+
+.actions {
+  display: flex;
+}
+
+/* actions-visibility=show: 상시 노출 */
+.root[data-actions-visibility="show"] .actions {
+  opacity: 1;
+}
+
+/* actions-visibility=hover: hover/focus-within에서만. 부드러운 fade + slight 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/UserMessage/UserMessage.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { Bubble, type BubbleFill, type BubbleShape, type BubbleSize } from "@/components/ctds/Bubble";
+import {
+  MessageActions,
+  type MessageAction,
+} from "@/components/ctds/MessageActions";
+import styles from "./UserMessage.module.css";
+
+export type UserMessageActionsVisibility = "show" | "hover";
+
+export interface UserMessageProps extends HTMLAttributes<HTMLDivElement> {
+  /** 메시지 본문. string 또는 ReactNode. */
+  children: ReactNode;
+  /** 버블 모양. 기본 circular-drop. */
+  shape?: BubbleShape;
+  /** 버블 fill. 기본 translucent. */
+  fill?: BubbleFill;
+  /** 버블 size. 기본 md. */
+  size?: BubbleSize;
+  /** 액션 노출 — "show" 상시 / "hover" 호버 시만. 기본 hover. */
+  actionsVisibility?: UserMessageActionsVisibility;
+  /** 액션 커스터마이즈. 기본 [copy, edit]. 비우려면 []. */
+  actions?: MessageAction[];
+  /** 메시지 위에 올라올 첨부(이미지/파일) 등 — 상위에서 자유 조합. */
+  before?: ReactNode;
+}
+
+const DEFAULT_ACTIONS: MessageAction[] = [
+  { kind: "copy" },
+  { kind: "edit" },
+];
+
+export function UserMessage({
+  children,
+  shape = "circular-drop",
+  fill = "translucent",
+  size = "md",
+  actionsVisibility = "hover",
+  actions = DEFAULT_ACTIONS,
+  before,
+  className,
+  ...rest
+}: UserMessageProps) {
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+  const hasActions = actions.length > 0;
+
+  return (
+    <div
+      className={cls}
+      data-actions-visibility={actionsVisibility}
+      {...rest}
+    >
+      {before ? <div className={styles.before}>{before}</div> : null}
+      <Bubble shape={shape} fill={fill} size={size} tail="end">
+        {children}
+      </Bubble>
+      {hasActions ? (
+        <div className={styles.actions}>
+          <MessageActions align="end" actions={actions} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/assets/components/UserMessage/index.ts

@@ -0,0 +1,2 @@
+export { UserMessage } from "./UserMessage";
+export type { UserMessageProps, UserMessageActionsVisibility } from "./UserMessage";