@conscience-technology/ctds 0.1.14 → 0.2.0

package/assets/components/AppFrame/AppFrame.module.css

@@ -133,6 +133,12 @@
   border-inline-end: var(--hairline) solid var(--border);
 }
 
+/* opt-out: 소비처가 data-sidebar-border="none"을 걸면 사이드바 오른쪽 hairline을 숨김.
+   docs처럼 사이드바가 bg·padding만으로 자체 영역을 표현할 때 사용. */
+.root[data-sidebar-border="none"] .sidebarSlot {
+  border-inline-end: none;
+}
+
 /* floating ────────────────────────────────────────────
    sidebar/topbar/content가 각각 카드로 떠 있음. */
 .root[data-variant="floating"] {

package/assets/components/{AttachmentChip/AttachmentChip.module.css → AttachmentItem/AttachmentItem.module.css}

@@ -1,4 +1,4 @@
-/* AttachmentChip — [leading] filename (meta) [actions]
+/* AttachmentItem — [leading] filename (meta) [actions]
    size sm/md: 1줄 pill
    size lg:    2줄 큰 카드 (파일명 위 / meta 아래)
    폭은 전부 --input-w-lg (400px) 고정 — 소비처가 폭 걱정 없이 넣기만. */
@@ -14,6 +14,8 @@
   color: var(--fg);
   transition: var(--transition-colors);
   box-sizing: border-box;
+  /* 아주 연한 drop shadow — 종이가 살짝 떠 있는 정도 (hairline보다 아주 약간만 강조). */
+  box-shadow: var(--shadow-xs);
 }
 
 /* ───────── size ─────────
@@ -69,7 +71,7 @@
 .meta {
   flex: 1 1 auto;
   min-width: 0;
-  color: var(--fg-muted);
+  color: var(--fg-subtle);
   font-weight: var(--font-weight-regular);
   line-height: 1.2;
   overflow: hidden;
@@ -89,7 +91,7 @@
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  color: var(--fg-muted);
+  color: var(--primary);
   width: var(--space-6);
   height: var(--space-6);
 }
@@ -101,11 +103,6 @@
   width: var(--space-8);
   height: var(--space-8);
 }
-.loadingSpinner {
-  width: 100%;
-  height: 100%;
-}
-
 /* ───────── actions ───────── */
 .actions {
   display: inline-flex;

package/assets/components/{AttachmentChip/AttachmentChip.tsx → AttachmentItem/AttachmentItem.tsx}

@@ -1,6 +1,6 @@
 "use client";
 
-import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode } from "react";
 import {
   DotsThree as PhDotsThree,
   DownloadSimple as PhDownload,
@@ -9,19 +9,19 @@ import {
 import { FileIcon, type FileIconSize } from "@/components/ctds/FileIcon";
 import { IconButton, type IconButtonSize } from "@/components/ctds/IconButton";
 import { Spinner } from "@/components/ctds/Spinner";
-import styles from "./AttachmentChip.module.css";
+import styles from "./AttachmentItem.module.css";
 
-export type AttachmentChipSize = "sm" | "md" | "lg";
-export type AttachmentChipState = "idle" | "loading";
+export type AttachmentItemSize = "sm" | "md" | "lg";
+export type AttachmentItemState = "idle" | "loading";
 
-export interface AttachmentChipProps
+export interface AttachmentItemProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
   /** 파일명. 확장자가 FileIcon 색/라벨을 결정. */
   filename: string;
   /** sm/md=1줄, lg=2줄(파일명 위 / meta 아래). 폭은 전부 400px 고정. */
-  size?: AttachmentChipSize;
+  size?: AttachmentItemSize;
   /** loading이면 좌측 뱃지가 Spinner(lottie-dots)로 교체. */
-  state?: AttachmentChipState;
+  state?: AttachmentItemState;
   /** sm/md: 파일명 옆 inline 보조 영역. lg: 파일명 아래 2번째 줄.
    *  문자열이면 muted 라벨로, ReactNode면 그대로 렌더 (ex. Button ghost xs). */
   meta?: ReactNode;
@@ -33,26 +33,34 @@ export interface AttachmentChipProps
   onMore?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
-const sizeClass: Record<AttachmentChipSize, string> = {
+const sizeClass: Record<AttachmentItemSize, string> = {
   sm: styles.sizeSm,
   md: styles.sizeMd,
   lg: styles.sizeLg,
 };
 
 /** 좌측 FileIcon 크기 — sm=sm(16), md=md(24), lg=lg(32). */
-const FILE_ICON_SIZE: Record<AttachmentChipSize, FileIconSize> = {
+const FILE_ICON_SIZE: Record<AttachmentItemSize, FileIconSize> = {
   sm: "sm",
   md: "md",
   lg: "lg",
 };
 
 /** trailing IconButton 크기 — sm/md=sm(20), lg=md(24). IconButton 공식 사이즈만 사용. */
-const ACTION_BTN_SIZE: Record<AttachmentChipSize, IconButtonSize> = {
+const ACTION_BTN_SIZE: Record<AttachmentItemSize, IconButtonSize> = {
   sm: "sm",
   md: "sm",
   lg: "md",
 };
 
+/** loading 자리의 Spinner 크기 — loadingSlot(=FileIcon 치수) 16/24/32와 일치시켜야
+ *  lottie 내부 scale/offset 계산이 안 깨짐. slot 치수를 그대로 --loader-size로 override. */
+const SPINNER_LOADER_SIZE: Record<AttachmentItemSize, string> = {
+  sm: "var(--space-4)",
+  md: "var(--space-6)",
+  lg: "var(--space-8)",
+};
+
 /** middle ellipsis — 폭 400px 안에서 충분히 들어가는 글자 수.
  *  확장자는 항상 끝에 남긴다. CSS text-overflow:ellipsis가 뒤에서
  *  확장자를 다시 자르지 않도록 폭 cap은 CSS와 함께 넉넉히 잡는다. */
@@ -60,7 +68,6 @@ function middleEllipsis(filename: string, max: number): string {
   if (filename.length <= max) return filename;
   const dot = filename.lastIndexOf(".");
   const extLen = filename.length - dot;
-  // 확장자가 없거나 비정상적으로 긴 경우만 폴백.
   if (dot <= 0 || extLen > 8 || extLen >= max - 4) {
     return filename.slice(0, Math.max(1, max - 3)) + "...";
   }
@@ -69,7 +76,7 @@ function middleEllipsis(filename: string, max: number): string {
   return head + "..." + ext;
 }
 
-export function AttachmentChip({
+export function AttachmentItem({
   filename,
   size = "md",
   state = "idle",
@@ -79,7 +86,7 @@ export function AttachmentChip({
   onMore,
   className,
   ...rest
-}: AttachmentChipProps) {
+}: AttachmentItemProps) {
   const cls = [
     styles.root,
     sizeClass[size],
@@ -89,7 +96,6 @@ export function AttachmentChip({
     .filter(Boolean)
     .join(" ");
 
-  // 400px 폭에서 안전하게 들어가는 글자 수 (대략치).
   const maxChars = size === "lg" ? 44 : size === "md" ? 40 : 36;
   const label = middleEllipsis(filename, maxChars);
 
@@ -99,7 +105,7 @@ export function AttachmentChip({
         <Spinner
           variant="lottie-dots"
           label="업로드 중"
-          className={styles.loadingSpinner}
+          style={{ "--loader-size": SPINNER_LOADER_SIZE[size] } as CSSProperties}
         />
       </span>
     ) : (

package/assets/components/AttachmentItem/index.ts

@@ -0,0 +1,6 @@
+export { AttachmentItem } from "./AttachmentItem";
+export type {
+  AttachmentItemProps,
+  AttachmentItemSize,
+  AttachmentItemState,
+} from "./AttachmentItem";

package/assets/components/Button/Button.module.css

@@ -38,14 +38,17 @@
 /* Disabled — variant 무관 통일 스타일.
    회색 버튼(--bg-muted) + 실버 글자(--fg-disabled) + 투명 보더.
    loading은 opacity로 유지 (스피너 컨텍스트 보존). */
-.root:disabled {
+.root:disabled:not([data-loading="true"]) {
   cursor: not-allowed;
   background: var(--bg-muted);
   color: var(--fg-disabled);
   border-color: transparent;
   box-shadow: none;
 }
-.root:disabled .icon {
+.root:disabled[data-loading="true"] {
+  cursor: progress;
+}
+.root:disabled:not([data-loading="true"]) .icon {
   opacity: 1;
 }
 /* Loading — 라벨/아이콘은 보이지만 톤 다운, Spinner가 중앙에 overlay.
@@ -227,3 +230,9 @@
 .spinner {
   display: inline-flex;
 }
+/* 투명·배경 위 variant는 로딩 스피너를 muted gray로 — primary 색이 흰 배경 위에서
+   혼자 둥둥 떠 보이는 걸 막는다. */
+.outline .spinner,
+.ghost .spinner {
+  color: var(--fg-muted);
+}

package/assets/components/ChatInput/ChatInput.tsx

@@ -12,7 +12,7 @@ import {
   type ReactNode,
 } from "react";
 import { Paperclip as PhPaperclip } from "@phosphor-icons/react";
-import { AttachmentChip } from "@/components/ctds/AttachmentChip";
+import { AttachmentItem } from "@/components/ctds/AttachmentItem";
 import { AttachmentThumb } from "@/components/ctds/AttachmentThumb";
 import { DropdownMenu } from "@/components/ctds/DropdownMenu";
 import { QuotationBar } from "@/components/ctds/QuotationBar";
@@ -262,7 +262,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
                     }
                   />
                 ) : (
-                  <AttachmentChip
+                  <AttachmentItem
                     filename={a.filename}
                     onRemove={
                       onRemoveAttachment

package/assets/components/DatePicker/Calendar.tsx

@@ -104,7 +104,7 @@ const MonthView = memo(function MonthView({
         ))}
       </div>
 
-      <div className={styles.grid} role="grid">
+      <div className={styles.grid} role="grid" aria-label={monthLabelText(month)}>
         {cells.map((day) => {
           const outside = !isSameMonth(day, month);
           const disabled =
@@ -144,6 +144,8 @@ const MonthView = memo(function MonthView({
               onMouseEnter={() => onHoverDay(day)}
               onMouseLeave={() => onHoverDay(null)}
               aria-selected={isSelected}
+              aria-disabled={disabled || undefined}
+              aria-label={dayAriaLabel(day, { isToday, isSelected })}
               role="gridcell"
             >
               <span className={styles.dayLabel}>{day.getDate()}</span>
@@ -155,6 +157,22 @@ const MonthView = memo(function MonthView({
   );
 });
 
+/** "2026년 10월" 류 — grid aria-label용. 월 이름이 바뀌면 utils 쪽 MONTH_LABELS_KO 교체. */
+function monthLabelText(d: Date): string {
+  return `${d.getFullYear()}년 ${MONTH_LABELS_KO[d.getMonth()]}`;
+}
+
+/** "2026년 10월 9일 (금), 오늘, 선택됨" 류 스크린리더용 라벨. */
+function dayAriaLabel(d: Date, flags: { isToday: boolean; isSelected: boolean }): string {
+  const parts = [
+    `${d.getFullYear()}년 ${MONTH_LABELS_KO[d.getMonth()]} ${d.getDate()}일`,
+    `(${WEEKDAY_LABELS_KO[d.getDay()]})`,
+  ];
+  if (flags.isToday) parts.push("오늘");
+  if (flags.isSelected) parts.push("선택됨");
+  return parts.join(", ");
+}
+
 export interface CalendarProps {
   mode: "single" | "range";
   months: 1 | 2;

package/assets/components/Drawer/Drawer.tsx

@@ -44,7 +44,16 @@ export interface DrawerProps {
   backdrop?: DrawerBackdrop;
 }
 
-export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
+/**
+ * 간편 모드 — 가장 흔한 "title + body + footer" 레이아웃을 flat prop으로 넘긴다.
+ * 커스터마이즈가 필요하면 compound 모드:
+ *   <Drawer.Root open onOpenChange={set} side="right" size="md">
+ *     <Drawer.Header title="…" />
+ *     <Drawer.Body>…</Drawer.Body>
+ *     <Drawer.Footer>…</Drawer.Footer>
+ *   </Drawer.Root>
+ */
+const DrawerComponent = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
   {
     open,
     onOpenChange,
@@ -62,15 +71,48 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
   },
   ref,
 ) {
-  // non-modal이면 Radix에게 modal=false로 넘겨 뒤 영역 포인터 이벤트 유지.
-  const isModal = backdrop !== "none";
+  return (
+    <DrawerRoot
+      open={open}
+      onOpenChange={onOpenChange}
+      disableEscape={disableEscape}
+      side={side}
+      size={size}
+      backdrop={backdrop}
+      ref={ref}
+    >
+      <DrawerHeader
+        title={title}
+        description={description}
+        titleSrOnly={titleSrOnly}
+        dismissible={dismissible}
+        dismissLabel={dismissLabel}
+      />
+      {children !== undefined && children !== null && <DrawerBody>{children}</DrawerBody>}
+      {footer && <DrawerFooter>{footer}</DrawerFooter>}
+    </DrawerRoot>
+  );
+});
 
+export interface DrawerRootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  disableEscape?: boolean;
+  side?: DrawerSide;
+  size?: DrawerSize;
+  backdrop?: DrawerBackdrop;
+}
+
+export const DrawerRoot = forwardRef<HTMLDivElement, DrawerRootProps>(function DrawerRoot(
+  { open, onOpenChange, children, disableEscape, side = "right", size = "md", backdrop = "scrim" },
+  ref,
+) {
+  const isModal = backdrop !== "none";
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={isModal}>
       <RadixDialog.Portal>
-        {backdrop !== "none" && (
-          <RadixDialog.Overlay className={styles.overlay} />
-        )}
+        {backdrop !== "none" && <RadixDialog.Overlay className={styles.overlay} />}
         <RadixDialog.Content
           ref={ref}
           className={styles.content}
@@ -80,47 +122,86 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
             if (disableEscape) e.preventDefault();
           }}
           onPointerDownOutside={(e) => {
-            // scrim만 바깥 클릭 닫힘. locked/none은 Radix 기본 닫힘 차단.
             if (backdrop !== "scrim") e.preventDefault();
           }}
           onInteractOutside={(e) => {
             if (backdrop === "none") e.preventDefault();
           }}
         >
-          <div className={styles.header}>
-            <div className={styles.headerText}>
-              <RadixDialog.Title
-                className={[styles.title, titleSrOnly && "visually-hidden"]
-                  .filter(Boolean)
-                  .join(" ")}
-              >
-                {title}
-              </RadixDialog.Title>
-              {description && (
-                <RadixDialog.Description className={styles.description}>
-                  {description}
-                </RadixDialog.Description>
-              )}
-            </div>
-            {dismissible && (
-              <RadixDialog.Close asChild>
-                <IconButton
-                  className={styles.close}
-                  variant="ghost"
-                  icon={<Icon name="x" />}
-                  aria-label={dismissLabel}
-                />
-              </RadixDialog.Close>
-            )}
-          </div>
-          {children !== undefined && children !== null && (
-            <div className={styles.body}>
-              <div className={styles.bodyInner}>{children}</div>
-            </div>
-          )}
-          {footer && <div className={styles.footer}>{footer}</div>}
+          {children}
         </RadixDialog.Content>
       </RadixDialog.Portal>
     </RadixDialog.Root>
   );
 });
+
+export interface DrawerHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+  titleSrOnly?: boolean;
+  dismissible?: boolean;
+  dismissLabel?: string;
+}
+
+export function DrawerHeader({
+  title,
+  description,
+  titleSrOnly,
+  dismissible = true,
+  dismissLabel,
+}: DrawerHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div className={styles.headerText}>
+        <RadixDialog.Title
+          className={[styles.title, titleSrOnly && "visually-hidden"]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {title}
+        </RadixDialog.Title>
+        {description && (
+          <RadixDialog.Description className={styles.description}>
+            {description}
+          </RadixDialog.Description>
+        )}
+      </div>
+      {dismissible && (
+        <RadixDialog.Close asChild>
+          <IconButton
+            className={styles.close}
+            variant="ghost"
+            icon={<Icon name="x" />}
+            aria-label={dismissLabel}
+          />
+        </RadixDialog.Close>
+      )}
+    </div>
+  );
+}
+
+export function DrawerBody({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.body}>
+      <div className={styles.bodyInner}>{children}</div>
+    </div>
+  );
+}
+
+export function DrawerFooter({ children }: { children: ReactNode }) {
+  return <div className={styles.footer}>{children}</div>;
+}
+
+type DrawerCompound = typeof DrawerComponent & {
+  Root: typeof DrawerRoot;
+  Header: typeof DrawerHeader;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+};
+
+export const Drawer = Object.assign(DrawerComponent, {
+  Root: DrawerRoot,
+  Header: DrawerHeader,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+}) as DrawerCompound;

package/assets/components/Drawer/index.ts

@@ -1,6 +1,14 @@
-export { Drawer } from "./Drawer";
+export {
+  Drawer,
+  DrawerRoot,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+} from "./Drawer";
 export type {
   DrawerProps,
+  DrawerRootProps,
+  DrawerHeaderProps,
   DrawerSide,
   DrawerSize,
   DrawerBackdrop,

package/assets/components/{MessageAttachment/MessageAttachment.module.css → GeneratedImage/GeneratedImage.module.css}

@@ -1,5 +1,4 @@
-/* MessageAttachment — AI가 생성한 이미지 큰 표시 (AttachmentThumb은 작은 썸네일).
-   loading / placeholder (src 없음) / image 세 상태. radius-md 고정, 생성 중 sparkle 숨쉼. */
+/* GeneratedImage — AI가 생성한 이미지 큰 표시. loading / placeholder / image 세 상태. */
 
 .root {
   position: relative;
@@ -45,6 +44,8 @@
 
 .spinner {
   color: var(--bg);
+  /* image-gen 로띠는 공간이 넉넉해야 보기 좋음 — loader-size override. */
+  --loader-size: var(--space-16);
 }
 
 /* Download 버튼 — hover 시만 노출, 우상단 */

package/assets/components/{MessageAttachment/MessageAttachment.tsx → GeneratedImage/GeneratedImage.tsx}

@@ -4,30 +4,30 @@ import type { HTMLAttributes, MouseEvent } from "react";
 import { DownloadSimple as PhDownload } from "@phosphor-icons/react";
 import { Spinner } from "@/components/ctds/Spinner";
 import { Tooltip } from "@/components/ctds/Tooltip";
-import styles from "./MessageAttachment.module.css";
+import styles from "./GeneratedImage.module.css";
 
-export type MessageAttachmentAspect = "square" | "portrait" | "landscape";
+export type GeneratedImageAspect = "square" | "portrait" | "landscape";
 
-export interface MessageAttachmentProps
+export interface GeneratedImageProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
   /** 생성된 이미지 URL. 없거나 loading이면 placeholder. */
   src?: string;
   alt?: string;
   /** 가로세로 비율. portrait=3/4(기본, 레퍼런스), square=1/1, landscape=4/3. */
-  aspect?: MessageAttachmentAspect;
+  aspect?: GeneratedImageAspect;
   /** 생성 중 — placeholder + sparkle breathe 애니. */
   loading?: boolean;
   /** 다운로드 버튼 클릭. 미지정 시 버튼 숨김. */
   onDownload?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
-const aspectClass: Record<MessageAttachmentAspect, string> = {
+const aspectClass: Record<GeneratedImageAspect, string> = {
   square: styles.aspectSquare,
   portrait: styles.aspectPortrait,
   landscape: styles.aspectLandscape,
 };
 
-export function MessageAttachment({
+export function GeneratedImage({
   src,
   alt = "",
   aspect = "portrait",
@@ -35,7 +35,7 @@ export function MessageAttachment({
   onDownload,
   className,
   ...rest
-}: MessageAttachmentProps) {
+}: GeneratedImageProps) {
   const cls = [
     styles.root,
     aspectClass[aspect],
@@ -48,7 +48,7 @@ export function MessageAttachment({
   return (
     <div className={cls} {...rest}>
       {loading || !src ? (
-        <Spinner variant="lottie-dots" size="md" className={styles.spinner} />
+        <Spinner variant="lottie-image-gen" size="lg" className={styles.spinner} />
       ) : (
         <img src={src} alt={alt} className={styles.img} />
       )}

package/assets/components/GeneratedImage/index.ts

@@ -0,0 +1,5 @@
+export { GeneratedImage } from "./GeneratedImage";
+export type {
+  GeneratedImageProps,
+  GeneratedImageAspect,
+} from "./GeneratedImage";

package/assets/components/Icon/Icon.tsx

@@ -128,6 +128,7 @@ import {
   Scissors as PhScissors,
   ClipboardText as PhClipboardText,
   Camera as PhCamera,
+  Globe as PhGlobe,
 } from "@phosphor-icons/react";
 
 // Solar (Linear = regular, Bold = fill) ───────────────────────────
@@ -308,7 +309,8 @@ export type IconName =
   | "copy-simple"
   | "scissors"
   | "clipboard-text"
-  | "camera";
+  | "camera"
+  | "globe";
 
 type AnyComp = React.ComponentType<any>;
 // Solar는 weight별 두 컴포넌트가 필요. 다른 family는 단일 컴포넌트.
@@ -422,6 +424,7 @@ const phosphorSet: Partial<Record<IconName, AnyComp>> = {
   scissors: PhScissors,
   "clipboard-text": PhClipboardText,
   camera: PhCamera,
+  globe: PhGlobe,
 };
 
 /* solar 세트 — 라이브러리에 자연스러운 1:1 대응이 있는 것만.