@conscience-technology/ctds 0.1.8 → 0.1.10

package/assets/components/Calendar/Calendar.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import {
+  forwardRef,
+  memo,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { Badge } from "../Badge";
+import { Button } from "../Button";
+import { EventChip, type EventChipTone } from "../EventChip";
+import { Icon } from "../Icon";
+import { IconButton } from "../IconButton";
+import {
+  addMonths,
+  buildMonthGrid,
+  isSameDay,
+  isSameMonth,
+  formatISODate,
+  MONTH_LABELS_KO,
+  WEEKDAY_LABELS_KO,
+  startOfMonth,
+} from "../DatePicker/utils";
+import styles from "./Calendar.module.css";
+
+export type CalendarEventTone = EventChipTone;
+
+export type CalendarEvent = {
+  id: string;
+  /** ISO yyyy-MM-dd */
+  date: string;
+  title: string;
+  tone?: CalendarEventTone;
+};
+
+export type CalendarProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  /** 현재 보여줄 달. controlled. */
+  month: Date;
+  /** 오늘 날짜. 테스트/스토리북에서 고정하려면 넘김. 기본 new Date(). */
+  today?: Date;
+  /** 선택된 날짜. 셀 하이라이트. */
+  selectedDate?: Date | null;
+  events?: CalendarEvent[];
+  /** 요일 시작. 0=일, 1=월. 기본 1 (업무 캘린더 관행). */
+  weekStartsOn?: 0 | 1;
+  showWeekend?: boolean;
+  /** 상단바 왼쪽 커스텀 슬롯 (예: Google 연결 상태). */
+  leadingSlot?: ReactNode;
+  /** 상단바 오른쪽 "오늘" 버튼 표시 여부. 기본 true. */
+  showTodayButton?: boolean;
+  onMonthChange?: (next: Date) => void;
+  onSelectedDateChange?: (next: Date) => void;
+};
+
+const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
+  {
+    className,
+    month,
+    today: todayProp,
+    selectedDate = null,
+    events = [],
+    weekStartsOn = 1,
+    showWeekend = true,
+    leadingSlot,
+    showTodayButton = true,
+    onMonthChange,
+    onSelectedDateChange,
+    ...rest
+  },
+  ref,
+) {
+  const today = useMemo(() => todayProp ?? new Date(), [todayProp]);
+  const monthStart = useMemo(() => startOfMonth(month), [month]);
+  const isTodayMonth = isSameMonth(monthStart, today);
+
+  const allDays = useMemo(
+    () => buildMonthGrid(monthStart, weekStartsOn),
+    [monthStart, weekStartsOn],
+  );
+  const weeks = allDays.length / 7;
+
+  const weekdays = useMemo(() => {
+    const list = [...WEEKDAY_LABELS_KO];
+    for (let i = 0; i < weekStartsOn; i += 1) list.push(list.shift() as string);
+    return list;
+  }, [weekStartsOn]);
+
+  const visibleWeekdays = showWeekend ? weekdays : weekdays.filter((_, i) => !isWeekendIndex(i, weekStartsOn));
+  const visibleDays = showWeekend
+    ? allDays
+    : allDays.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
+
+  const eventsByDate = useMemo(() => groupEventsByDate(events), [events]);
+
+  const shiftMonth = (delta: number) => onMonthChange?.(addMonths(monthStart, delta));
+  const shiftYear = (delta: number) => {
+    const next = new Date(monthStart);
+    next.setFullYear(next.getFullYear() + delta);
+    onMonthChange?.(next);
+  };
+
+  const columns = showWeekend ? 7 : 5;
+
+  return (
+    <div
+      ref={ref}
+      className={[styles.root, className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarSide}>{leadingSlot}</div>
+
+        <div className={styles.monthNav}>
+          <IconButton
+            variant="ghost"
+            size="sm"
+            aria-label="이전 해"
+            icon={<Icon name="caret-double-left" />}
+            onClick={() => shiftYear(-1)}
+          />
+          <IconButton
+            variant="ghost"
+            size="sm"
+            aria-label="이전 달"
+            icon={<Icon name="caret-left" />}
+            onClick={() => shiftMonth(-1)}
+          />
+          <span className={styles.monthTitle}>
+            {monthStart.getFullYear()}년 {MONTH_LABELS_KO[monthStart.getMonth()]}
+          </span>
+          <IconButton
+            variant="ghost"
+            size="sm"
+            aria-label="다음 달"
+            icon={<Icon name="caret-right" />}
+            onClick={() => shiftMonth(1)}
+          />
+          <IconButton
+            variant="ghost"
+            size="sm"
+            aria-label="다음 해"
+            icon={<Icon name="caret-double-right" />}
+            onClick={() => shiftYear(1)}
+          />
+        </div>
+
+        <div className={styles.toolbarSide} data-align="end">
+          {showTodayButton && (
+            <div data-visible={(!isTodayMonth) || undefined} className={styles.todaySlot}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  onMonthChange?.(startOfMonth(today));
+                  onSelectedDateChange?.(today);
+                }}
+              >
+                오늘
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div
+        className={styles.weekdays}
+        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
+      >
+        {visibleWeekdays.map((w) => (
+          <div
+            key={w}
+            className={styles.weekday}
+            data-tone={weekdayTone(w)}
+          >
+            {w}
+          </div>
+        ))}
+      </div>
+
+      <div
+        className={styles.grid}
+        style={{
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          gridTemplateRows: `repeat(${weeks}, minmax(0, 1fr))`,
+        }}
+      >
+        {visibleDays.map((day) => {
+          const key = formatISODate(day);
+          return (
+            <DayCell
+              key={key}
+              day={day}
+              month={monthStart}
+              today={today}
+              events={eventsByDate.get(key) ?? []}
+              isSelected={!!selectedDate && isSameDay(day, selectedDate)}
+              onSelect={() => onSelectedDateChange?.(day)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+export { Calendar };
+
+/* ───────────────────────── DayCell ───────────────────────── */
+
+type DayCellProps = {
+  day: Date;
+  month: Date;
+  today: Date;
+  events: CalendarEvent[];
+  isSelected: boolean;
+  onSelect: () => void;
+};
+
+const DayCell = memo(function DayCell({
+  day,
+  month,
+  today,
+  events,
+  isSelected,
+  onSelect,
+}: DayCellProps) {
+  const outside = !isSameMonth(day, month);
+  const isToday = isSameDay(day, today);
+  const isPast = day.getTime() < new Date(today).setHours(0, 0, 0, 0);
+  const dow = day.getDay();
+  const tone = outside || isPast ? "muted" : dow === 0 ? "sun" : dow === 6 ? "sat" : "default";
+
+  const eventsRef = useRef<HTMLDivElement>(null);
+  const [hiddenCount, setHiddenCount] = useState(0);
+
+  useLayoutEffect(() => {
+    const container = eventsRef.current;
+    if (!container) return;
+    const recalc = () => {
+      const containerBottom = container.getBoundingClientRect().bottom;
+      const children = Array.from(container.children) as HTMLElement[];
+      let visible = 0;
+      for (const child of children) {
+        if (child.getBoundingClientRect().bottom <= containerBottom + 1) {
+          visible += 1;
+        } else {
+          break;
+        }
+      }
+      setHiddenCount(Math.max(0, events.length - visible));
+    };
+    recalc();
+    const ro = new ResizeObserver(recalc);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [events.length]);
+
+  return (
+    <div
+      className={styles.cell}
+      data-outside={outside || undefined}
+      data-today={isToday || undefined}
+      data-selected={isSelected || undefined}
+      role="button"
+      tabIndex={0}
+      onClick={onSelect}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+    >
+      <div className={styles.cellHead}>
+        <span className={styles.dayNum} data-tone={tone} data-selected={isSelected || undefined}>
+          {day.getDate()}
+        </span>
+        <span className={styles.cellBadges}>
+          {hiddenCount > 0 && <Badge size="sm" variant="soft">+{hiddenCount}</Badge>}
+          {isToday && <Badge size="sm" variant="soft">오늘</Badge>}
+        </span>
+      </div>
+      <div ref={eventsRef} className={styles.cellEvents}>
+        {events.map((ev) => (
+          <EventChip
+            key={ev.id}
+            title={ev.title}
+            tone={ev.tone}
+            faded={outside}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+/* ───────────────────────── helpers ───────────────────────── */
+
+function groupEventsByDate(events: CalendarEvent[]): Map<string, CalendarEvent[]> {
+  const map = new Map<string, CalendarEvent[]>();
+  for (const ev of events) {
+    const list = map.get(ev.date) ?? [];
+    list.push(ev);
+    map.set(ev.date, list);
+  }
+  return map;
+}
+
+function isWeekendIndex(i: number, weekStartsOn: 0 | 1): boolean {
+  if (weekStartsOn === 0) return i === 0 || i === 6;
+  return i === 5 || i === 6;
+}
+
+function weekdayTone(label: string): "sat" | "sun" | "default" {
+  if (label === "토") return "sat";
+  if (label === "일") return "sun";
+  return "default";
+}

package/assets/components/Calendar/index.ts

@@ -0,0 +1,2 @@
+export { Calendar } from "./Calendar";
+export type { CalendarProps, CalendarEvent, CalendarEventTone } from "./Calendar";

package/assets/components/ChatInput/ChatInput.module.css

@@ -8,7 +8,8 @@
   gap: 0;
   background: var(--bg);
   border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
   transition: var(--transition-colors), var(--transition-ring);
   overflow: hidden; /* root border radius로 자식 clip (scroll 끝이 root border에서) */
 }
@@ -20,44 +21,43 @@
   padding: 0;
 }
 
-/* radius variant — Shape 축에 반응 */
-.radius-square { border-radius: var(--radius-xs); }
-.radius-rounded { border-radius: var(--radius-sm); }
-.radius-circular { border-radius: var(--radius-md); }
-
 .root:focus-within {
-  box-shadow: var(--ring);
+  box-shadow: var(--ring), var(--shadow-md);
 }
 .disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 
-/* 첨부물 바 — 3-column grid: chip 고정폭(한 줄 3개).
+/* 첨부물 바 — 가로 wrap 스택.
    gap space-1 (feedback-small-component-gap). */
 .attachments {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--space-1);
-  padding: var(--space-3) var(--space-4) var(--space-1);
+  padding: var(--space-2);
+}
+/* SingleLine은 아래 body footer가 자체 상단 padding을 가지므로 bottom 압축. */
+.shape-single .attachments {
+  padding-bottom: var(--space-0_5);
 }
-/* Thumb은 셀 안에서 자체 폭 유지(좌측 정렬), chip은 셀 폭 채움. */
 .attachmentCell {
   display: flex;
   min-width: 0;
 }
-.attachmentCell[data-kind="image"] > * {
-  flex: 0 0 auto;
-}
+.attachmentCell[data-kind="image"] > *,
 .attachmentCell[data-kind="file"] > * {
-  width: 100%;
-  max-width: 100%;
+  flex: 0 0 auto;
 }
 
 /* Quotation */
 .quotation {
   display: block;
-  padding: var(--space-3) var(--space-4) var(--space-1);
+  padding: var(--space-2);
+}
+/* SingleLine은 아래 body footer가 자체 상단 padding을 가지므로 bottom 압축. */
+.shape-single .quotation {
+  padding-bottom: var(--space-0_5);
 }
 /* attachments 아래에 quotation이 오면 상단 패딩 제거 (attachments bottom이 책임) */
 .attachments + .quotation {
@@ -81,30 +81,25 @@
   width: 100%;
   min-width: 0;
 }
-/* multiScroll — 세로 스크롤 컨테이너. root border까지 닿음(root padding 0).
-   스크롤 룰:
-     - padding-top은 wrapper, padding-bottom은 textarea 내부에 (크로스브라우저 scroll padding 이슈 회피).
-     - 짧은 글: wrapper 안에서 스크롤 없음 → padding이 "숨 공간"처럼 보임.
-     - 긴 글: wrapper scroll 발생 → 글이 상·하 padding 영역을 통과해 root border에서 자연스레 잘림. */
+/* multiScroll — 세로 스크롤 컨테이너.
+   **스크롤 룰**: wrapper에 padding 0, textarea에 상·하 padding + 좌·우 padding 둘 다.
+   textarea가 자신의 padding을 content의 일부로 품으므로 scroll 시 글이 상·하 padding 영역을
+   통과해 root border에서 clip. wrapper에 padding을 두면 scroll 시 그 영역이 "빈 띠"로 남음. */
 .multiScroll {
   overflow-y: auto;
   max-height: calc(var(--text-sm) * 1.5 * 8); /* ~8 lines */
-  padding: var(--space-3) var(--space-4) 0;
-}
-/* attachments/quotation 아래에 오면 상단 패딩 절반 (이미 attachments/quotation에 bottom padding 있음) */
-.attachments + .body .multiScroll,
-.quotation + .body .multiScroll {
-  padding-top: var(--space-1);
+  padding: 0;
+  scroll-padding-bottom: var(--space-3);
+  scroll-padding-top: var(--space-3);
 }
 
-/* textarea는 flat + bottom 패딩만 — padding-bottom이 scroll content의 일부가 되어
-   스크롤 끝에서 글이 wrapper(=root) border까지 흘러감. */
+/* textarea에 상·하·좌·우 padding 전부 — 스크롤되면 함께 올라감. */
 .multiField {
   display: block;
   width: 100%;
   min-width: 0;
   min-height: calc(var(--text-sm) * 1.5);
-  padding: 0 0 var(--space-3);
+  padding: var(--space-3) var(--space-4);
   background: transparent;
   border: 0;
   outline: none;
@@ -114,10 +109,16 @@
   font-size: var(--text-sm);
   line-height: 1.5;
   overflow: hidden;
+  box-sizing: border-box;
 }
 .multiField::placeholder {
   color: var(--fg-muted);
 }
+/* attachments/quotation 아래에선 상단 padding 압축 (이미 attachments/quotation이 상단 책임). */
+.attachments + .body .multiField,
+.quotation + .body .multiField {
+  padding-top: var(--space-1);
+}
 
 .footer {
   display: flex;
@@ -127,17 +128,53 @@
   padding: 0 var(--space-2) var(--space-2);
 }
 
-/* SingleLine */
+/* SingleLine — body는 relative + padding 0, 버튼은 absolute로 좌·우 하단 고정.
+   singleScroll이 body 전체 높이·폭 차지하되 좌·우 padding으로 버튼 자리 확보.
+   이러면 body 높이가 전적으로 textarea(singleScroll) 크기에 따라감 — padding 늘리면 input도 커짐. */
 .shape-single .body {
   flex-direction: row;
-  align-items: center;
-  gap: var(--space-0_5);
-  padding: var(--space-2) var(--space-2);
+  align-items: stretch;
+  gap: 0;
+  padding: 0;
+  position: relative;
+}
+/* 버튼 bottom inset은 textarea 상·하 padding과 같은 토큰으로 — 1줄 상태에서
+   textarea 수직 중앙 = 버튼 수직 중앙 (density scale 바뀌어도 비례해서 유지됨). */
+.shape-single .attachBtn {
+  position: absolute;
+  left: var(--space-2);
+  bottom: calc((var(--space-3) * 2 + var(--text-sm) * 1.5 - var(--space-8)) / 2);
+  z-index: var(--z-raise);
+}
+.shape-single .actions {
+  position: absolute;
+  right: var(--space-2);
+  bottom: calc((var(--space-3) * 2 + var(--text-sm) * 1.5 - var(--space-8)) / 2);
+  z-index: var(--z-raise);
+}
+/* singleScroll — body 전체 차지. 좌·우 padding으로 버튼 자리 확보.
+   왼쪽: attachBtn 32 + margin 8 = 40 (gap 없음).
+   오른쪽: actions(model+gap+send) 가변 + margin 8. */
+.shape-single .singleScroll {
+  padding-left: var(--space-10);
+  padding-right: calc(var(--space-20) + var(--space-8));
+}
+.singleScroll {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-y: auto;
+  max-height: calc(var(--text-sm) * 1.5 * 8);
+  padding: 0;
+  /* 타이핑 중 caret이 하단에 올 때 scroll이 자동으로 textarea padding-bottom을 지나
+     root border까지 밀어주도록 scroll-padding 확보. */
+  scroll-padding-bottom: var(--space-3);
+  scroll-padding-top: var(--space-3);
 }
 .singleField {
-  flex: 1 1 auto;
+  display: block;
+  width: 100%;
   min-width: 0;
-  padding: 0 var(--space-1);
+  padding: var(--space-3) 0;
   background: transparent;
   border: 0;
   outline: none;
@@ -147,9 +184,7 @@
   font: inherit;
   font-size: var(--text-sm);
   line-height: 1.5;
-}
-.singleField::placeholder {
-  color: var(--fg-muted);
+  box-sizing: border-box;
 }
 .singleField::placeholder {
   color: var(--fg-muted);
@@ -269,6 +304,11 @@
 .sendBtn:disabled {
   cursor: not-allowed;
 }
+/* 비활성(= 입력 비어있어 보낼 수 없음) 상태 아이콘을 연하게.
+   data-active일 땐 primary 배경이라 색 유지. */
+.sendBtn:not([data-active]) {
+  color: var(--fg-disabled);
+}
 .sendIcon {
   width: 44%;
   height: 44%;

package/assets/components/ChatInput/ChatInput.tsx

@@ -9,17 +9,18 @@ import {
   type CSSProperties,
   type FormEvent,
   type KeyboardEvent,
+  type ReactNode,
 } from "react";
 import { Paperclip as PhPaperclip } from "@phosphor-icons/react";
 import { AttachmentChip } from "@/components/ctds/AttachmentChip";
 import { AttachmentThumb } from "@/components/ctds/AttachmentThumb";
+import { DropdownMenu } from "@/components/ctds/DropdownMenu";
 import { QuotationBar } from "@/components/ctds/QuotationBar";
 import { ModelSelector } from "./ModelSelector";
 import { SendButton } from "./SendButton";
 import styles from "./ChatInput.module.css";
 
 export type ChatInputShape = "multi" | "single";
-export type ChatInputRadius = "square" | "rounded" | "circular";
 
 /** 첨부 공용 타입 — ChatInput·Message 양쪽에서 재사용. */
 export interface ChatAttachmentImage {
@@ -39,11 +40,14 @@ export type ChatAttachment = ChatAttachmentImage | ChatAttachmentFile;
 export interface ChatInputModel {
   id: string;
   label: string;
+  /** 메뉴 아이템 leading 슬롯. 모델별 대표 아이콘 (CTDS Icon 노드 등). */
+  icon?: ReactNode;
+  /** 2줄 아이템용 보조 문구. 넘기면 메뉴 아이템이 2줄로 열림. */
+  description?: ReactNode;
 }
 
 export interface ChatInputProps {
   shape?: ChatInputShape;
-  radius?: ChatInputRadius;
 
   value: string;
   onChange: (v: string) => void;
@@ -81,7 +85,6 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
   function ChatInput(props, ref) {
     const {
       shape = "multi",
-      radius = "rounded",
       value,
       onChange,
       onSend,
@@ -108,15 +111,14 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     const canSend = !disabled && (value.trim().length > 0 || attachments.length > 0);
     const showStop = isStreaming && !!onStop;
 
-    /* autoResize — multi/single 둘 다. textarea는 content에 맞춰 자람(scroll 아님).
-       외부 scroll wrapper(multi)가 max-height 책임. single은 wrapper 없이 textarea가 직접 자람.
-       Shift+Enter로 줄바꿈 → textarea가 즉시 자라고, SingleLine도 자연스레 늘어남. */
+    /* autoResize — multi/single 둘 다. textarea는 content + padding에 맞춰 자람.
+       scrollHeight는 content + padding(border-box). height를 auto로 reset해야 축소도 가능. */
     useLayoutEffect(() => {
       const el = taRef.current;
       if (!el) return;
       el.style.height = "auto";
       el.style.height = `${el.scrollHeight}px`;
-    }, [shape, value]);
+    });
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
@@ -165,7 +167,6 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     const rootCls = [
       styles.root,
       styles[`shape-${shape}`],
-      styles[`radius-${radius}`],
       disabled ? styles.disabled : "",
       className,
     ]
@@ -198,19 +199,29 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
 
     const ModelAndSend = (
       <div className={styles.actions}>
-        {modelLabel ? (
-          <ModelSelector
-            label={modelLabel}
-            compact={modelCompact}
-            onClick={() => {
-              if (!models || !onSelectModel) return;
-              // 간단 토글 — 다음 모델. 실제 메뉴는 소비처에서 ContextMenu로.
-              const idx = models.findIndex((m) => m.id === selectedModel);
-              const next = models[(idx + 1) % models.length];
-              onSelectModel(next.id);
-            }}
-            disabled={disabled}
-          />
+        {modelLabel && models ? (
+          <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+              <ModelSelector
+                label={modelLabel}
+                compact={modelCompact}
+                disabled={disabled}
+              />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+              <DropdownMenu.Label>모델 변경</DropdownMenu.Label>
+              {models.map((m) => (
+                <DropdownMenu.Item
+                  key={m.id}
+                  leadingActions={m.icon ? [{ node: m.icon, key: m.id }] : undefined}
+                  description={m.description}
+                  onSelect={() => onSelectModel?.(m.id)}
+                >
+                  {m.label}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu>
         ) : null}
         <SendButton
           active={canSend}
@@ -276,17 +287,19 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
           {shape === "single" ? (
             <>
               {AttachButton}
-              <textarea
-                ref={taRef}
-                className={styles.singleField}
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={placeholder}
-                disabled={disabled}
-                rows={1}
-                aria-label={placeholder}
-              />
+              <div className={styles.singleScroll}>
+                <textarea
+                  ref={taRef}
+                  className={styles.singleField}
+                  value={value}
+                  onChange={(e) => onChange(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={placeholder}
+                  disabled={disabled}
+                  rows={1}
+                  aria-label={placeholder}
+                />
+              </div>
               {ModelAndSend}
             </>
           ) : (