@conscience-technology/ctds 0.1.9 → 0.1.10

package/assets/components/ChatInput/ModelSelector.tsx

@@ -1,40 +1,36 @@
 "use client";
 
-import type { MouseEvent } from "react";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
 import {
   Infinity as PhInfinity,
   CaretDown as PhCaretDown,
 } from "@phosphor-icons/react";
 import styles from "./ChatInput.module.css";
 
-interface ModelSelectorProps {
+interface ModelSelectorProps extends ComponentPropsWithoutRef<"button"> {
   label: string;
   /** true면 라벨 숨기고 아이콘만 (SingleLine에서 공간 부족할 때). */
   compact?: boolean;
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
 }
 
-export function ModelSelector({
-  label,
-  compact = false,
-  onClick,
-  disabled,
-}: ModelSelectorProps) {
-  return (
-    <button
-      type="button"
-      className={styles.modelBtn}
-      data-compact={compact || undefined}
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={compact ? `모델: ${label}` : undefined}
-    >
-      <PhInfinity className={styles.modelLead} weight="regular" aria-hidden />
-      {!compact ? <span className={styles.modelLabel}>{label}</span> : null}
-      {!compact ? (
-        <PhCaretDown className={styles.modelCaret} weight="bold" aria-hidden />
-      ) : null}
-    </button>
-  );
-}
+/* forwardRef — DropdownMenu.Trigger asChild 위임을 위해 ref·props 전달 가능해야. */
+export const ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(
+  function ModelSelector({ label, compact = false, ...rest }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={styles.modelBtn}
+        data-compact={compact || undefined}
+        aria-label={compact ? `모델: ${label}` : undefined}
+        {...rest}
+      >
+        <PhInfinity className={styles.modelLead} weight="regular" aria-hidden />
+        {!compact ? <span className={styles.modelLabel}>{label}</span> : null}
+        {!compact ? (
+          <PhCaretDown className={styles.modelCaret} weight="bold" aria-hidden />
+        ) : null}
+      </button>
+    );
+  },
+);

package/assets/components/ChatInput/index.ts

@@ -2,7 +2,6 @@ export { ChatInput } from "./ChatInput";
 export type {
   ChatInputProps,
   ChatInputShape,
-  ChatInputRadius,
   ChatInputModel,
   ChatAttachment,
   ChatAttachmentImage,

package/assets/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,79 @@
+/* CodeBlock — AIMessage 안의 코드 블록. 상단 언어 라벨 + copy, 본문 pre+code. */
+
+.root {
+  position: relative;
+  background: var(--primary-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  width: 100%;
+  min-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  color: var(--fg-muted);
+}
+
+.lang {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+}
+.langIcon {
+  width: var(--space-4);
+  height: var(--space-4);
+}
+.langLabel {
+  line-height: 1;
+}
+
+.copyBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: var(--bg-muted);
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  width: var(--space-6);
+  height: var(--space-6);
+  transition: var(--transition-colors);
+}
+.copyBtn:hover {
+  background: var(--bg);
+  color: var(--fg);
+}
+.copyBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+.copyIcon {
+  width: 60%;
+  height: 60%;
+}
+
+/* 코드 본문 — pre + mono font. 가로 스크롤 가능. */
+.code {
+  margin: 0;
+  padding: var(--space-2) var(--space-4) var(--space-4);
+  font-family: var(--font-code);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  color: var(--fg-strong);
+  overflow-x: auto;
+  white-space: pre;
+  word-wrap: normal;
+}
+.code code {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  padding: 0;
+}

package/assets/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useState, type HTMLAttributes, type ReactNode } from "react";
+import {
+  CodeSimple as PhCodeSimple,
+  Copy as PhCopy,
+  Check as PhCheck,
+} from "@phosphor-icons/react";
+import { Tooltip } from "@/components/ctds/Tooltip";
+import styles from "./CodeBlock.module.css";
+
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 보여줄 코드 문자열. 하이라이팅은 CodeBlock이 따로 하지 않음 — 사용처가 ReactNode(span 조합)로 전달해도 됨. */
+  code: string | ReactNode;
+  /** 상단 언어 라벨 (예: "html", "tsx"). 없으면 숨김. */
+  language?: string;
+  /** copy 버튼 클릭 시 호출. 미지정이면 clipboard API로 자동 복사. */
+  onCopyCode?: (code: string) => void;
+}
+
+export function CodeBlock({
+  code,
+  language,
+  onCopyCode,
+  className,
+  ...rest
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const codeText = typeof code === "string" ? code : "";
+
+  const handleCopy = useCallback(() => {
+    if (onCopyCode) {
+      onCopyCode(codeText);
+    } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(codeText).catch(() => {});
+    }
+    setCopied(true);
+    const t = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(t);
+  }, [codeText, onCopyCode]);
+
+  const cls = [styles.root, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={cls} {...rest}>
+      <div className={styles.header}>
+        <div className={styles.lang}>
+          <PhCodeSimple className={styles.langIcon} weight="regular" aria-hidden />
+          {language ? <span className={styles.langLabel}>{language}</span> : null}
+        </div>
+        <Tooltip content={copied ? "복사됨" : "복사"}>
+          <button
+            type="button"
+            className={styles.copyBtn}
+            onClick={handleCopy}
+            aria-label={copied ? "복사됨" : "코드 복사"}
+          >
+            {copied ? (
+              <PhCheck className={styles.copyIcon} weight="bold" />
+            ) : (
+              <PhCopy className={styles.copyIcon} weight="regular" />
+            )}
+          </button>
+        </Tooltip>
+      </div>
+      <pre className={styles.code}>
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/assets/components/CodeBlock/index.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";

package/assets/components/ContextMenu/ContextMenu.tsx

@@ -181,6 +181,8 @@ type ItemPassthrough = {
   leadingActions?: MenuItemAction[];
   trailingActions?: MenuItemAction[];
   shortcut?: string;
+  /** 라벨 아래 보조 설명 한 줄. MenuItem.description으로 그대로 전달. */
+  description?: ReactNode;
   disabled?: boolean;
   children?: ReactNode;
 };
@@ -196,6 +198,7 @@ const Item = forwardRef<HTMLDivElement, ItemProps>(function ContextMenuItem(
     leadingActions,
     trailingActions,
     shortcut,
+    description,
     disabled,
     children,
     ...rest
@@ -212,6 +215,7 @@ const Item = forwardRef<HTMLDivElement, ItemProps>(function ContextMenuItem(
         leadingActions={leadingActions}
         trailingActions={trailingActions}
         shortcut={shortcut}
+        description={description}
         disabled={disabled}
       >
         {children}
@@ -233,6 +237,7 @@ const CheckboxItem = forwardRef<HTMLDivElement, CheckboxItemProps>(function Cont
     leadingActions = [],
     trailingActions,
     shortcut,
+    description,
     disabled,
     checked,
     onCheckedChange,
@@ -276,6 +281,7 @@ const CheckboxItem = forwardRef<HTMLDivElement, CheckboxItemProps>(function Cont
         leadingActions={composedLeading}
         trailingActions={trailingActions}
         shortcut={shortcut}
+        description={description}
         disabled={disabled}
       >
         {children}
@@ -297,6 +303,7 @@ const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(function ContextMen
     leadingActions = [],
     trailingActions,
     shortcut,
+    description,
     disabled,
     children,
     ...rest
@@ -322,6 +329,7 @@ const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(function ContextMen
         leadingActions={composedLeading}
         trailingActions={trailingActions}
         shortcut={shortcut}
+        description={description}
         disabled={disabled}
       >
         {children}
@@ -337,7 +345,7 @@ export interface SubTriggerProps
     Omit<ItemPassthrough, "shortcut"> {}
 
 const SubTrigger = forwardRef<HTMLDivElement, SubTriggerProps>(function ContextMenuSubTrigger(
-  { size, variant, leadingActions, trailingActions, disabled, children, ...rest },
+  { size, variant, leadingActions, trailingActions, description, disabled, children, ...rest },
   ref,
 ) {
   const effectiveSize = useMenuSize(size);
@@ -349,6 +357,7 @@ const SubTrigger = forwardRef<HTMLDivElement, SubTriggerProps>(function ContextM
         variant={variant}
         leadingActions={leadingActions}
         trailingActions={trailingActions}
+        description={description}
         hasSubmenu
         disabled={disabled}
       >

package/assets/components/DropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,26 @@
+/* DropdownMenu — Radix DropdownMenu 위에 얹은 시각 레이어.
+   표면·분리선·indicator 전부 ContextMenu CSS에서 composes해 재사용 —
+   두 메뉴의 시각이 한 소스에서 흐르도록. 여기선 transform-origin·z-index 등
+   dropdown-menu primitive 전용 CSS 변수만 지정. */
+
+.content {
+  composes: content from "../ContextMenu/ContextMenu.module.css";
+  z-index: var(--z-popover);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+
+.content[data-radix-dropdown-menu-sub-content] {
+  transform-origin: var(--radix-dropdown-menu-sub-content-transform-origin);
+}
+
+.separator {
+  composes: separator from "../ContextMenu/ContextMenu.module.css";
+}
+
+.checkIndicator {
+  composes: checkIndicator from "../ContextMenu/ContextMenu.module.css";
+}
+
+.radioIndicator {
+  composes: radioIndicator from "../ContextMenu/ContextMenu.module.css";
+}

package/assets/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+/**
+ * DropdownMenu ─ 버튼 클릭으로 열리는 메뉴.
+ * Radix `@radix-ui/react-dropdown-menu` 위에 얇게 얹은 compound 컴포넌트.
+ *
+ * ContextMenu와의 관계
+ * - 시각 표면(.surface) · MenuItem 어댑터 패턴 · Checkbox/Radio 인디케이터 전부 동일.
+ * - 차이는 "트리거 방식"뿐: ContextMenu는 우클릭, DropdownMenu는 좌클릭/스페이스/엔터.
+ * - 두 컴포넌트의 Content·Item·CheckboxItem·RadioItem·SubTrigger API는 1:1 미러.
+ *
+ * 소비 표면
+ *   <DropdownMenu>
+ *     <DropdownMenu.Trigger asChild>
+ *       <Button>Open</Button>
+ *     </DropdownMenu.Trigger>
+ *     <DropdownMenu.Content>
+ *       <DropdownMenu.Item onSelect={...}>복사</DropdownMenu.Item>
+ *       <DropdownMenu.Separator />
+ *       <DropdownMenu.CheckboxItem checked={grid} onCheckedChange={setGrid}>
+ *         그리드
+ *       </DropdownMenu.CheckboxItem>
+ *     </DropdownMenu.Content>
+ *   </DropdownMenu>
+ */
+
+import * as RDM from "@radix-ui/react-dropdown-menu";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { Icon, IconAxisProvider, useIconAxis } from "../Icon";
+import { MenuItem, type MenuItemAction, type MenuItemSize, type MenuItemVariant } from "../MenuItem";
+import styles from "./DropdownMenu.module.css";
+
+/* Size context — Content가 하위 Item 기본 size 지정. 개별 아이템 size가 우선. */
+const SizeContext = createContext<MenuItemSize>("md");
+function useMenuSize(override?: MenuItemSize): MenuItemSize {
+  const ctx = useContext(SizeContext);
+  return override ?? ctx;
+}
+
+/* Root · Trigger ─────────────────────────────────────────── */
+
+type RootProps = ComponentPropsWithoutRef<typeof RDM.Root>;
+const Root = (props: RootProps) => <RDM.Root {...props} />;
+
+type TriggerProps = ComponentPropsWithoutRef<typeof RDM.Trigger>;
+const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function DropdownMenuTrigger(
+  props,
+  ref,
+) {
+  return <RDM.Trigger ref={ref} {...props} />;
+});
+
+/* Content ─────────────────────────────────────────────────────────── */
+
+export interface ContentProps extends ComponentPropsWithoutRef<typeof RDM.Content> {
+  size?: MenuItemSize;
+}
+
+const Content = forwardRef<HTMLDivElement, ContentProps>(function DropdownMenuContent(
+  { className, size = "md", collisionPadding = 8, sideOffset = 6, children, ...rest },
+  ref,
+) {
+  const iconAxis = useIconAxis();
+  return (
+    <RDM.Portal>
+      <RDM.Content
+        ref={ref}
+        className={[styles.content, "m-float", className ?? ""].filter(Boolean).join(" ")}
+        collisionPadding={collisionPadding}
+        sideOffset={sideOffset}
+        data-size={size}
+        {...rest}
+      >
+        <IconAxisProvider value={iconAxis}>
+          <SizeContext.Provider value={size}>{children}</SizeContext.Provider>
+        </IconAxisProvider>
+      </RDM.Content>
+    </RDM.Portal>
+  );
+});
+
+/* SubContent ──────────────────────────────────────────────────────── */
+
+export interface SubContentProps extends ComponentPropsWithoutRef<typeof RDM.SubContent> {
+  size?: MenuItemSize;
+}
+
+const SubContent = forwardRef<HTMLDivElement, SubContentProps>(function DropdownMenuSubContent(
+  { className, size, collisionPadding = 8, children, ...rest },
+  ref,
+) {
+  const parentSize = useContext(SizeContext);
+  const effective = size ?? parentSize;
+  const iconAxis = useIconAxis();
+  return (
+    <RDM.Portal>
+      <RDM.SubContent
+        ref={ref}
+        className={[styles.content, "m-float", className ?? ""].filter(Boolean).join(" ")}
+        collisionPadding={collisionPadding}
+        data-size={effective}
+        {...rest}
+      >
+        <IconAxisProvider value={iconAxis}>
+          <SizeContext.Provider value={effective}>{children}</SizeContext.Provider>
+        </IconAxisProvider>
+      </RDM.SubContent>
+    </RDM.Portal>
+  );
+});
+
+/* Label ───────────────────────────────────────────────────────────── */
+
+const Label = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RDM.Label>>(
+  function DropdownMenuLabel({ className, children, ...rest }, ref) {
+    const size = useMenuSize();
+    return (
+      <RDM.Label ref={ref} asChild {...rest}>
+        <MenuItem variant="section" size={size} className={className}>
+          {children}
+        </MenuItem>
+      </RDM.Label>
+    );
+  },
+);
+
+/* Separator ───────────────────────────────────────────────────────── */
+
+const Separator = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RDM.Separator>>(
+  function DropdownMenuSeparator({ className, ...rest }, ref) {
+    return (
+      <RDM.Separator
+        ref={ref}
+        className={[styles.separator, className ?? ""].filter(Boolean).join(" ")}
+        {...rest}
+      />
+    );
+  },
+);
+
+/* Group · RadioGroup · Sub ───────────────────────────────────────── */
+
+const Group = RDM.Group;
+const RadioGroup = RDM.RadioGroup;
+const Sub = RDM.Sub;
+
+/* Item ───────────────────────────────────────────────────────────── */
+
+type ItemPassthrough = {
+  size?: MenuItemSize;
+  variant?: MenuItemVariant;
+  leadingActions?: MenuItemAction[];
+  trailingActions?: MenuItemAction[];
+  shortcut?: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  children?: ReactNode;
+};
+
+export interface ItemProps
+  extends Omit<ComponentPropsWithoutRef<typeof RDM.Item>, "asChild" | "children">,
+    ItemPassthrough {}
+
+const Item = forwardRef<HTMLDivElement, ItemProps>(function DropdownMenuItem(
+  {
+    size,
+    variant,
+    leadingActions,
+    trailingActions,
+    shortcut,
+    description,
+    disabled,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const effectiveSize = useMenuSize(size);
+  return (
+    <RDM.Item asChild disabled={disabled} {...rest}>
+      <MenuItem
+        ref={ref}
+        size={effectiveSize}
+        variant={variant}
+        leadingActions={leadingActions}
+        trailingActions={trailingActions}
+        shortcut={shortcut}
+        description={description}
+        disabled={disabled}
+      >
+        {children}
+      </MenuItem>
+    </RDM.Item>
+  );
+});
+
+/* CheckboxItem ────────────────────────────────────────────────────── */
+
+export interface CheckboxItemProps
+  extends Omit<ComponentPropsWithoutRef<typeof RDM.CheckboxItem>, "asChild" | "children">,
+    ItemPassthrough {}
+
+const CheckboxItem = forwardRef<HTMLDivElement, CheckboxItemProps>(function DropdownMenuCheckboxItem(
+  {
+    size,
+    variant,
+    leadingActions = [],
+    trailingActions,
+    shortcut,
+    description,
+    disabled,
+    checked,
+    onCheckedChange,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const effectiveSize = useMenuSize(size);
+  const indicatorSlot: MenuItemAction = {
+    node: (
+      <span
+        className={styles.checkIndicator}
+        data-checked={checked === true ? "true" : undefined}
+        aria-hidden
+      >
+        <Icon name="check" />
+      </span>
+    ),
+    key: "__checkbox__",
+  };
+  const composedLeading: MenuItemAction[] = [indicatorSlot, ...leadingActions];
+  return (
+    <RDM.CheckboxItem
+      asChild
+      disabled={disabled}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      {...rest}
+    >
+      <MenuItem
+        ref={ref}
+        size={effectiveSize}
+        variant={variant}
+        leadingActions={composedLeading}
+        trailingActions={trailingActions}
+        shortcut={shortcut}
+        description={description}
+        disabled={disabled}
+      >
+        {children}
+      </MenuItem>
+    </RDM.CheckboxItem>
+  );
+});
+
+/* RadioItem ───────────────────────────────────────────────────────── */
+
+export interface RadioItemProps
+  extends Omit<ComponentPropsWithoutRef<typeof RDM.RadioItem>, "asChild" | "children">,
+    ItemPassthrough {}
+
+const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(function DropdownMenuRadioItem(
+  {
+    size,
+    variant,
+    leadingActions = [],
+    trailingActions,
+    shortcut,
+    description,
+    disabled,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const effectiveSize = useMenuSize(size);
+  const composedLeading: MenuItemAction[] = [
+    { node: <span className={styles.radioIndicator} aria-hidden />, key: "__radio__" },
+    ...leadingActions,
+  ];
+  return (
+    <RDM.RadioItem asChild disabled={disabled} {...rest}>
+      <MenuItem
+        ref={ref}
+        size={effectiveSize}
+        variant={variant}
+        leadingActions={composedLeading}
+        trailingActions={trailingActions}
+        shortcut={shortcut}
+        description={description}
+        disabled={disabled}
+      >
+        {children}
+      </MenuItem>
+    </RDM.RadioItem>
+  );
+});
+
+/* SubTrigger ──────────────────────────────────────────────────────── */
+
+export interface SubTriggerProps
+  extends Omit<ComponentPropsWithoutRef<typeof RDM.SubTrigger>, "asChild" | "children">,
+    Omit<ItemPassthrough, "shortcut"> {}
+
+const SubTrigger = forwardRef<HTMLDivElement, SubTriggerProps>(function DropdownMenuSubTrigger(
+  { size, variant, leadingActions, trailingActions, description, disabled, children, ...rest },
+  ref,
+) {
+  const effectiveSize = useMenuSize(size);
+  return (
+    <RDM.SubTrigger asChild disabled={disabled} {...rest}>
+      <MenuItem
+        ref={ref}
+        size={effectiveSize}
+        variant={variant}
+        leadingActions={leadingActions}
+        trailingActions={trailingActions}
+        description={description}
+        hasSubmenu
+        disabled={disabled}
+      >
+        {children}
+      </MenuItem>
+    </RDM.SubTrigger>
+  );
+});
+
+/* Compound export ─────────────────────────────────────────────────── */
+
+type DropdownMenuComponent = typeof Root & {
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  Item: typeof Item;
+  CheckboxItem: typeof CheckboxItem;
+  RadioGroup: typeof RadioGroup;
+  RadioItem: typeof RadioItem;
+  Separator: typeof Separator;
+  Label: typeof Label;
+  Group: typeof Group;
+  Sub: typeof Sub;
+  SubTrigger: typeof SubTrigger;
+  SubContent: typeof SubContent;
+};
+
+const DropdownMenu = Root as DropdownMenuComponent;
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Content = Content;
+DropdownMenu.Item = Item;
+DropdownMenu.CheckboxItem = CheckboxItem;
+DropdownMenu.RadioGroup = RadioGroup;
+DropdownMenu.RadioItem = RadioItem;
+DropdownMenu.Separator = Separator;
+DropdownMenu.Label = Label;
+DropdownMenu.Group = Group;
+DropdownMenu.Sub = Sub;
+DropdownMenu.SubTrigger = SubTrigger;
+DropdownMenu.SubContent = SubContent;
+
+export { DropdownMenu };