@conscience-technology/ctds 0.1.9 → 0.1.11

package/assets/components/DropdownMenu/index.ts

@@ -0,0 +1,9 @@
+export { DropdownMenu } from "./DropdownMenu";
+export type {
+  ContentProps as DropdownMenuContentProps,
+  SubContentProps as DropdownMenuSubContentProps,
+  ItemProps as DropdownMenuItemProps,
+  CheckboxItemProps as DropdownMenuCheckboxItemProps,
+  RadioItemProps as DropdownMenuRadioItemProps,
+  SubTriggerProps as DropdownMenuSubTriggerProps,
+} from "./DropdownMenu";

package/assets/components/EventChip/EventChip.module.css

@@ -0,0 +1,57 @@
+/* EventChip ──────────────────────────────────────────────────
+   캘린더 셀 안에서 "하루에 쌓이는 일정 하나"를 표현하는 작은 블록.
+   Chip/Badge와 결은 비슷하지만 역할이 다름 — 셀 안에 세로로 여러 개가 쌓이는
+   정보 토큰. 가로 폭은 부모(cell)에 꽉 차고, 넘치는 title은 ellipsis. */
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+  padding: var(--space-1) var(--space-1_5);
+  border-radius: var(--radius-xs);
+  background: var(--bg-muted);
+  color: var(--fg);
+  font-family: var(--font-normal);
+  font-size: var(--text-xs);
+  line-height: 1.2;
+}
+
+.root[data-faded] { opacity: 0.5; }
+
+.title {
+  min-width: 0;
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tones — Badge soft와 동일 토큰 체계. 색은 의미 신호로만 쓴다. */
+.root[data-tone="default"] {
+  background: var(--bg-muted);
+  color: var(--fg);
+}
+.root[data-tone="neutral"] {
+  background: var(--secondary-bg);
+  color: var(--secondary-fg);
+}
+.root[data-tone="accent"] {
+  background: var(--primary-subtle);
+  color: var(--secondary-fg);
+}
+.root[data-tone="success"] {
+  background: var(--success-subtle);
+  color: var(--success);
+}
+.root[data-tone="warning"] {
+  background: var(--warning-subtle);
+  color: var(--warning);
+}
+.root[data-tone="danger"] {
+  background: var(--destructive-subtle);
+  color: var(--destructive);
+}
+.root[data-tone="info"] {
+  background: var(--info-subtle);
+  color: var(--info);
+}

package/assets/components/EventChip/EventChip.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+
+import styles from "./EventChip.module.css";
+
+export type EventChipTone =
+  | "default"
+  | "accent"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "neutral";
+
+export type EventChipProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+  title: string;
+  tone?: EventChipTone;
+  /** outside 월·과거 등으로 흐리게 표시. */
+  faded?: boolean;
+};
+
+const EventChip = forwardRef<HTMLDivElement, EventChipProps>(function EventChip(
+  { className, title, tone = "default", faded, ...rest },
+  ref,
+) {
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+  return (
+    <div
+      ref={ref}
+      className={cls}
+      data-tone={tone}
+      data-faded={faded || undefined}
+      {...rest}
+    >
+      <span className={styles.title}>{title}</span>
+    </div>
+  );
+});
+
+export { EventChip };

package/assets/components/EventChip/index.ts

@@ -0,0 +1,2 @@
+export { EventChip } from "./EventChip";
+export type { EventChipProps, EventChipTone } from "./EventChip";

package/assets/components/Icon/Icon.tsx

@@ -78,6 +78,7 @@ import {
   CalendarDots as PhCalendarDots,
   Clock as PhClock,
   UploadSimple as PhUploadSimple,
+  DownloadSimple as PhDownloadSimple,
   IdentificationCard as PhIdentificationCard,
   Table as PhTable,
   GridFour as PhGridFour,
@@ -258,6 +259,7 @@ export type IconName =
   | "calendar-dots"
   | "clock"
   | "upload-simple"
+  | "download-simple"
   | "identification-card"
   | "table"
   | "grid-four"
@@ -370,6 +372,7 @@ const phosphorSet: Partial<Record<IconName, AnyComp>> = {
   "calendar-dots": PhCalendarDots,
   clock: PhClock,
   "upload-simple": PhUploadSimple,
+  "download-simple": PhDownloadSimple,
   "identification-card": PhIdentificationCard,
   table: PhTable,
   "grid-four": PhGridFour,

package/assets/components/IdentityButton/IdentityButton.module.css

@@ -0,0 +1,119 @@
+/* IdentityButton — 식별 가능한 대상(워크스페이스·프로필·프로젝트·조직 등)을
+   "현재 선택 상태"로 보여주면서 전환 가능함을 암시하는 가로 행.
+   Avatar/leading + 2줄 라벨(name + sub) + trailing(caret/IconButton) 구조. */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  width: 100%;
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  cursor: pointer;
+  text-align: start;
+  font-family: var(--label-font);
+  border-radius: var(--radius-sm);
+  transition: var(--transition-colors);
+}
+
+.root:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* size — control-h 토큰에 space-1(4px)만큼 숨돌림 추가.
+   Avatar + 2줄 라벨이 상하에 꽉 차 보이지 않도록 아주 살짝 여유. Density scale은 그대로 따라감. */
+.size-sm { min-height: calc(var(--control-h-sm) + var(--space-1)); }
+.size-md { min-height: calc(var(--control-h-md) + var(--space-1)); }
+.size-lg { min-height: calc(var(--control-h-lg) + var(--space-1)); }
+
+/* 1줄 모드(sub 없음) — 2줄 기준 min-height가 과하게 보이지 않고
+   오히려 라벨이 가운데 떠서 상하 여백이 부족해 보이는 걸 방지. padding-block으로 숨돌림. */
+.root[data-single-line] {
+  padding-block: var(--space-2);
+}
+
+/* variant — 기본은 ghost(투명 bg, hover만). muted는 항상 subtle bg. */
+.variant-ghost {
+  background: transparent;
+}
+.variant-ghost:hover:not(:disabled) {
+  background: var(--hover);
+}
+.variant-ghost:focus-visible {
+  outline: none;
+  background: var(--hover);
+}
+
+.variant-muted {
+  background: var(--hover);
+}
+.variant-muted:hover:not(:disabled) {
+  background: var(--bg-muted);
+}
+.variant-muted:focus-visible {
+  outline: none;
+  background: var(--bg-muted);
+}
+
+/* active — 현재 선택 (스위처 리스트에서). hover가 덮지 않도록 bg 우선. */
+.root[data-active] {
+  background: var(--bg-muted);
+}
+.root[data-active] .name {
+  color: var(--fg-strong);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── 슬롯 ───────────────────────────────────────────── */
+.leading {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.labels {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.name {
+  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;
+}
+
+.sub {
+  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;
+}
+
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  color: var(--fg-muted);
+}
+
+/* ── collapsed — leading 하나만 ─────────────────────── */
+.root[data-collapsed] {
+  justify-content: center;
+  gap: 0;
+  padding-inline: var(--space-1);
+}

package/assets/components/IdentityButton/IdentityButton.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { forwardRef, type ReactNode } from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+import { Avatar, type AvatarProps } from "../Avatar";
+import styles from "./IdentityButton.module.css";
+
+export type IdentityButtonSize = "sm" | "md" | "lg";
+export type IdentityButtonVariant = "ghost" | "muted";
+
+export interface IdentityButtonProps {
+  size?: IdentityButtonSize;
+  variant?: IdentityButtonVariant;
+  /** 왼쪽 식별 요소. Avatar props를 패스스루하거나 ReactNode(Icon 등) 직접 삽입. 둘 다 생략 가능. */
+  avatar?: Omit<AvatarProps, "size" | "name" | "alt"> & { name?: string; alt?: string };
+  leading?: ReactNode;
+  /** 1줄 라벨. 메인 식별자. */
+  name: ReactNode;
+  /** 2번째 줄 — 메타·역할·설명. 생략 시 1줄 모드. */
+  sub?: ReactNode;
+  /** 오른쪽 trailing — caret-down, IconButton, Badge 등. collapsed일 땐 숨김. */
+  trailing?: ReactNode;
+  /** 선택 상태 (switcher 리스트의 현재 선택 등). */
+  active?: boolean;
+  disabled?: boolean;
+  /** icon-only 모드. leading/avatar만 남기고 라벨·sub·trailing 숨김. Sidebar가 자동 주입. */
+  collapsed?: boolean;
+  /** Radix Slot — DropdownMenu.Trigger 등 상위 트리거에 위임. */
+  asChild?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  "aria-label"?: string;
+  "aria-haspopup"?: boolean | "menu" | "dialog" | "listbox" | "tree" | "grid";
+  "aria-expanded"?: boolean;
+}
+
+const sizeToAvatar: Record<IdentityButtonSize, AvatarProps["size"]> = {
+  sm: "sm",
+  md: "md",
+  lg: "md",
+};
+
+const IdentityButton = forwardRef<HTMLButtonElement, IdentityButtonProps>(
+  function IdentityButton(
+    {
+      size = "md",
+      variant = "ghost",
+      avatar,
+      leading,
+      name,
+      sub,
+      trailing,
+      active,
+      disabled,
+      collapsed,
+      asChild,
+      className,
+      onClick,
+      ...a11y
+    },
+    ref,
+  ) {
+    const Comp: React.ElementType = asChild ? Slot : "button";
+
+    const classes = [
+      styles.root,
+      styles[`size-${size}`],
+      styles[`variant-${variant}`],
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const leadingNode =
+      leading ??
+      (avatar ? (
+        <Avatar
+          size={sizeToAvatar[size]}
+          name={typeof name === "string" ? name : undefined}
+          alt={typeof name === "string" ? name : undefined}
+          {...avatar}
+        />
+      ) : null);
+
+    return (
+      <Comp
+        ref={ref}
+        type={asChild ? undefined : "button"}
+        className={classes}
+        data-active={active || undefined}
+        data-collapsed={collapsed || undefined}
+        data-single-line={!sub || undefined}
+        disabled={disabled}
+        onClick={onClick}
+        {...a11y}
+      >
+        {leadingNode && <span className={styles.leading}>{leadingNode}</span>}
+        {!collapsed && (
+          <span className={styles.labels}>
+            <span className={styles.name}>{name}</span>
+            {sub && <span className={styles.sub}>{sub}</span>}
+          </span>
+        )}
+        {!collapsed && trailing && (
+          <span className={styles.trailing}>{trailing}</span>
+        )}
+      </Comp>
+    );
+  },
+);
+
+export { IdentityButton };

package/assets/components/IdentityButton/index.ts

@@ -0,0 +1,6 @@
+export { IdentityButton } from "./IdentityButton";
+export type {
+  IdentityButtonProps,
+  IdentityButtonSize,
+  IdentityButtonVariant,
+} from "./IdentityButton";

package/assets/components/MenuItem/MenuItem.module.css

@@ -151,16 +151,37 @@
   flex-shrink: 0;
 }
 
-/* 아이콘(svg 직접 자식) 또는 IconButton(button 자식)이 들어온 슬롯 → 아이콘 크기 정사각.
-   → Icon만 넣은 슬롯과 IconButton 슬롯의 아이콘 중심선이 자동 정렬됨. */
+/* 시각 자리(svg · img · picture · IconButton)가 들어온 슬롯은 --menu-icon-size 정사각으로
+   수렴시킨다. 이렇게 해야 사용자가 Icon 외에 커스텀 svg · 브랜드 로고 PNG · Avatar 등
+   무엇을 넣어도 라인 높이와 좌측 정렬이 어긋나지 않는다 — 슬롯의 계약은 "아이콘 자리".
+   내부 콘텐츠는 아래 object-fit 규칙으로 비율 유지된 채 슬롯에 꽉 채워진다. */
 .leadingItem:has(> svg),
 .trailingItem:has(> svg),
+.leadingItem:has(> img),
+.trailingItem:has(> img),
+.leadingItem:has(> picture),
+.trailingItem:has(> picture),
 .leadingItem:has(> button),
 .trailingItem:has(> button) {
   width: var(--menu-icon-size);
   height: var(--menu-icon-size);
 }
 
+/* img · picture · 그리고 그 내부 img 는 슬롯에 꽉 채우되 비율 보존.
+   svg는 Icon 컴포넌트가 자체 width/height를 가지므로 손대지 않는다 — 손대면
+   stroke 두께가 틀어진다. */
+.leadingItem > img,
+.trailingItem > img,
+.leadingItem > picture,
+.trailingItem > picture,
+.leadingItem > picture > img,
+.trailingItem > picture > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 /* IconButton(button)은 --menu-hitbox-size 크기로 삐져나가되 negative margin으로
    부모 슬롯의 시각 폭은 --menu-icon-size로 유지, hitbox만 되찾음.
    IconButton 자체가 --control-h-sm(28) 크기로 오는 걸 MenuItem 안에선 hitbox 토큰으로
@@ -188,6 +209,50 @@
   text-overflow: ellipsis;
 }
 
+/* 2줄 레이아웃 — description prop이 있을 때만 활성.
+   title + description을 하나의 flex column으로 묶어 그리드의 가운데 열에 자리잡는다.
+   줄바꿈을 허용(white-space normal)해 긴 설명도 자연스럽게 흐르도록. */
+.labelStack {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: var(--space-0_5);
+  white-space: normal;
+  overflow: hidden;
+}
+
+.labelStack .label {
+  color: inherit;
+}
+
+.description {
+  color: var(--fg-subtle);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 2줄 모드: leading/trailing 슬롯은 첫 줄(title) 베이스라인에 맞춰 상단 정렬.
+   root가 grid라 align-items: start로 바꾸면 전체 열이 모두 상단 정렬되고,
+   label 묶음은 column이라 자연히 위에서부터 쌓이므로 title과 아이콘이 수평 정렬된다.
+   trailing(shortcut 등)도 title 라인에 같이 올라붙어 2줄 중 어느 쪽도 아닌 이상한 중앙에
+   걸리지 않는다. */
+.root.hasDescription {
+  align-items: start;
+}
+
+/* 아이콘·IconButton이 title 라인에 정확히 정렬되도록 슬롯 높이를 title 라인 높이에 맞춘다.
+   label은 inline-flex라 자체 line-box를 가진다 — 그 라인에 아이콘 중심을 맞추기 위해
+   슬롯 자체는 그대로 두되 align-items 변화로 상단 기준이 되므로 자연스럽게 맞음.
+   추가로 수직 패딩을 살짝 얹어 2줄 블록이 너무 빡빡해 보이지 않게 한다. */
+.root.hasDescription {
+  padding-block: var(--space-1_5);
+}
+
 /* Shortcut ────────────────────────────────────────────────────
    trailing 슬롯에 shortcut prop이 넘어오면 별도 Shortcut 컴포넌트가 렌더링됨.
    슬롯 정사각 규칙(.trailingItem:has(> svg | > button))에 걸리지 않으므로

package/assets/components/MenuItem/MenuItem.tsx

@@ -46,6 +46,12 @@ export type MenuItemProps = Omit<HTMLAttributes<HTMLDivElement>, "onClick"> & {
 
   /** 오른쪽 끝 단축키 텍스트 (예: "⌘K"). 내부에서 trailingActions 맨 앞에 자동 삽입. */
   shortcut?: string;
+  /**
+   * 라벨 아래 보조 설명 한 줄. 지정 시 아이템이 2줄 레이아웃이 되고
+   * leading 아이콘은 첫 줄 베이스라인에 맞춰 상단 정렬된다.
+   * GPT/Claude/Gemini 선택처럼 모델·옵션에 짧은 특징을 덧붙이는 자리.
+   */
+  description?: ReactNode;
   /** true면 오른쪽 끝에 caret-right 인디케이터. 내부에서 trailingActions 맨 뒤에 자동 삽입. */
   hasSubmenu?: boolean;
 
@@ -281,6 +287,7 @@ const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
       leadingActions = [],
       trailingActions = [],
       shortcut,
+      description,
       hasSubmenu = false,
       checked = false,
       active = false,
@@ -352,12 +359,16 @@ const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
     const hasLeading = finalLeading.length > 0;
     const hasTrailing = finalTrailing.length > 0;
 
+    /* description은 collapsed 상태에선 의미 없음 — 아이콘만 남는 자리에 보조 설명은 숨긴다. */
+    const hasDescription = !effectiveCollapsed && description != null && description !== false;
+
     const rootClass = [
       styles.root,
       sizeClass[size],
       variantClass[variant],
       active ? styles.active : "",
       hasLeading ? styles.hasLeading : "",
+      hasDescription ? styles.hasDescription : "",
       className ?? "",
     ]
       .filter(Boolean)
@@ -427,10 +438,19 @@ const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
         )}
         {asChild ? (
           /* collapsed면 사용자의 children(라벨 텍스트)은 접어두고 leading만 남긴다.
-             asChild(예: <Link>Home</Link>)에서도 링크는 유지되며 내용만 아이콘으로 대체. */
+             asChild(예: <Link>Home</Link>)에서도 링크는 유지되며 내용만 아이콘으로 대체.
+             asChild는 Link 등으로 전체를 감싸는 패턴이라 description은 지원하지 않는다. */
           <Slottable>{effectiveCollapsed ? null : children}</Slottable>
         ) : (
-          !effectiveCollapsed && <span className={styles.label}>{children}</span>
+          !effectiveCollapsed &&
+          (hasDescription ? (
+            <span className={styles.labelStack}>
+              <span className={styles.label}>{children}</span>
+              <span className={styles.description}>{description}</span>
+            </span>
+          ) : (
+            <span className={styles.label}>{children}</span>
+          ))
         )}
         {hasTrailing && (
           <span className={styles.trailing}>

package/assets/components/MessageActions/MessageActions.module.css

@@ -0,0 +1,43 @@
+/* MessageActions — 메시지 하단 액션 아이콘 바.
+   UserMessage·AIMessage·MessageState 공용. fg-muted 톤, hover 시 fg-strong. */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.root[data-align="end"] {
+  justify-content: flex-end;
+}
+.root[data-align="start"] {
+  justify-content: flex-start;
+}
+
+.btn {
+  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;
+  width: var(--space-6);
+  height: var(--space-6);
+  flex: 0 0 auto;
+  transition: var(--transition-colors);
+}
+.btn:hover {
+  background: var(--bg-subtle);
+  color: var(--fg-strong);
+}
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+.icon {
+  width: 65%;
+  height: 65%;
+}

package/assets/components/MessageActions/MessageActions.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import {
+  Copy as PhCopy,
+  PencilSimple as PhPencil,
+  ArrowClockwise as PhArrowClockwise,
+  ShareNetwork as PhShare,
+  TrashSimple as PhTrash,
+  ThumbsUp as PhThumbsUp,
+  ThumbsDown as PhThumbsDown,
+} from "@phosphor-icons/react";
+import { Tooltip } from "@/components/ctds/Tooltip";
+import styles from "./MessageActions.module.css";
+
+export type MessageActionKind =
+  | "copy"
+  | "edit"
+  | "regenerate"
+  | "share"
+  | "delete"
+  | "like"
+  | "dislike";
+
+const ICON: Record<MessageActionKind, React.ComponentType<any>> = {
+  copy: PhCopy,
+  edit: PhPencil,
+  regenerate: PhArrowClockwise,
+  share: PhShare,
+  delete: PhTrash,
+  like: PhThumbsUp,
+  dislike: PhThumbsDown,
+};
+
+const LABEL: Record<MessageActionKind, string> = {
+  copy: "복사",
+  edit: "수정",
+  regenerate: "다시 생성",
+  share: "공유",
+  delete: "삭제",
+  like: "좋아요",
+  dislike: "싫어요",
+};
+
+export interface MessageAction {
+  kind: MessageActionKind;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** label override. 기본은 kind에 매핑된 한국어. */
+  label?: string;
+  /** 커스텀 아이콘 — kind가 알 수 없는 액션일 때. */
+  icon?: ReactNode;
+}
+
+export interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {
+  actions: MessageAction[];
+  /** 메시지 아래 왼/오른 정렬. UserMessage=end, AIMessage=start. */
+  align?: "start" | "end";
+}
+
+export function MessageActions({
+  actions,
+  align = "start",
+  className,
+  ...rest
+}: MessageActionsProps) {
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+
+  return (
+    <div
+      className={cls}
+      data-align={align}
+      role="toolbar"
+      aria-label="메시지 액션"
+      {...rest}
+    >
+      {actions.map((a, i) => {
+        const Icon = ICON[a.kind] ?? null;
+        const label = a.label ?? LABEL[a.kind] ?? a.kind;
+        return (
+          <Tooltip key={`${a.kind}-${i}`} content={label}>
+            <button
+              type="button"
+              className={styles.btn}
+              onClick={a.onClick}
+              aria-label={label}
+            >
+              {a.icon ?? (Icon ? <Icon className={styles.icon} weight="regular" aria-hidden /> : null)}
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

package/assets/components/MessageActions/index.ts

@@ -0,0 +1,6 @@
+export { MessageActions } from "./MessageActions";
+export type {
+  MessageActionsProps,
+  MessageAction,
+  MessageActionKind,
+} from "./MessageActions";