@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/Callout/Callout.module.css

@@ -0,0 +1,146 @@
+/* Callout ─────────────────────────────────────────────────────
+   사이드바·패널·빈 공간에 얹는 소형 안내/홍보 카드.
+   구조: [icon · title · dismiss] / [body] / [actions]
+   패딩·gap은 사진의 밸런스를 재현 — 아이콘 좌우 gap은 타이틀 line-height 보정으로
+   space-3, 헤더-본문-액션은 space-3 리듬. */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1_5);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  color: var(--fg);
+  border: 1px solid transparent;
+  font-family: var(--font-sans);
+}
+
+/* Variants
+   fill: tone subtle 표면 (8% 알파).
+   outline: 표면 투명 + tone border (32% 알파).
+   tone별로 --callout-subtle / --callout-border를 스왑해서 재사용. */
+.fill {
+  background: var(--callout-subtle);
+}
+.outline {
+  background: transparent;
+  border-color: var(--callout-border);
+}
+
+/* Head: icon | title | dismiss ─────────────────────────────── */
+/* 아이콘은 타이틀 line-height와 같은 높이 박스로 잡아 첫 줄 baseline과 맞춤 */
+.head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: var(--lh-sm);
+  color: var(--callout-accent);
+}
+.icon > svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+}
+.dismiss {
+  flex-shrink: 0;
+  /* IconButton md(24)와 title line-height(lh-sm=22) 중심을 맞춤 — 살짝 위로 당김. */
+  margin-top: calc((var(--lh-sm) - var(--iconbtn-h-md)) / 2);
+  margin-inline-end: calc(var(--space-1) * -1);
+}
+
+/* Body ─────────────────────────────────────────────────────── */
+.body {
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+/* title-body는 같은 텍스트 블록으로 묶여 보이도록 gap을 좁힘 (한 단계 축소). */
+.head + .body {
+  margin-top: calc(var(--space-1) - var(--space-1_5));
+}
+
+/* Actions ─────────────────────────────────────────────────── */
+/* 버튼 간 간격은 space-1 고정 (규칙). */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-wrap: wrap;
+}
+/* actionsRight: 좌측 박스(icon+title+body) | 우측 박스(dismiss+actions).
+   두 열이 상단 정렬로 나란히 — dismiss는 title line-height에, actions는 아래로 쌓인다. */
+.actionsRight {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-1_5) var(--space-4);
+}
+.actionsRight .head {
+  /* 좌측 박스 head: icon + title만. dismiss는 우측 사이드로 분리되므로 head 자체는 아이콘·타이틀만 담는다. */
+}
+.actionsRight .side {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-2);
+  grid-row: 1 / span 2;
+  grid-column: 2;
+}
+/* dismiss 없을 때 — actions만 있는 경우 하단 정렬. */
+.actionsRight .sideNoDismiss {
+  justify-content: flex-end;
+}
+.actionsRight .side .actions {
+  justify-content: flex-end;
+}
+/* side 안으로 옮겨진 dismiss는 head baseline 보정 불필요. */
+.actionsRight .side .dismiss {
+  margin-top: 0;
+  margin-inline-end: calc(var(--space-1) * -1);
+}
+.actionsRight .body {
+  grid-column: 1;
+}
+.actionsRight .head {
+  grid-column: 1;
+}
+
+/* Tones ────────────────────────────────────────────────────
+   --callout-accent(아이콘/텍스트 강조 색), --callout-subtle(fill 표면), --callout-border(outline 경계)를
+   톤별로 스왑. 시맨틱 위치는 유지, 색만 톤에 따라 이동. */
+.neutral {
+  --callout-accent: var(--fg-muted);
+  --callout-subtle: var(--bg-subtle);
+  --callout-border: var(--border);
+}
+.brand {
+  --callout-accent: var(--primary);
+  --callout-subtle: var(--primary-subtle);
+  --callout-border: var(--primary-border-color);
+}
+.success {
+  --callout-accent: var(--success);
+  --callout-subtle: var(--success-subtle);
+  --callout-border: var(--success-border-color);
+}
+.warning {
+  --callout-accent: var(--warning);
+  --callout-subtle: var(--warning-subtle);
+  --callout-border: var(--warning-border-color);
+}
+.destructive {
+  --callout-accent: var(--destructive);
+  --callout-subtle: var(--destructive-subtle);
+  --callout-border: var(--destructive-border-color);
+}

package/assets/components/Callout/Callout.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { Icon, type IconName } from "../Icon";
+import { IconButton } from "../IconButton";
+
+import styles from "./Callout.module.css";
+
+/**
+ * Callout — 사이드바·패널·공백 영역에 얹는 소형 홍보/안내 카드.
+ * 좌상단 아이콘, 우상단 닫기, 타이틀 · 본문 · 하단 액션 슬롯 구조.
+ *
+ * 배치 규칙:
+ *  - actions 슬롯은 하단(기본) 또는 우측(actionsPlacement="right"). Sidebar 좁은 폭엔 bottom.
+ *  - dismissible=true면 우상단 닫기 IconButton 렌더 + onDismiss 호출 (controlled 정책).
+ */
+export type CalloutTone = "neutral" | "brand" | "success" | "warning" | "destructive";
+export type CalloutVariant = "fill" | "outline";
+export type CalloutActionsPlacement = "bottom" | "right";
+
+export interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  icon?: IconName;
+  title: ReactNode;
+  /** 본문. 짧게 유지 — 3~4줄 안쪽. */
+  children?: ReactNode;
+  /** 하단(또는 우측) 액션 슬롯. Button/Link 자유 배치. */
+  actions?: ReactNode;
+  actionsPlacement?: CalloutActionsPlacement;
+  /** 카드 표면 강도. fill=tone tint 표면, outline=표면 투명 + 경계. */
+  variant?: CalloutVariant;
+  /** tone은 아이콘·강조 색만 스왑. 표면·본문 텍스트는 유지. */
+  tone?: CalloutTone;
+  /** 우상단 닫기 버튼 표시. 상태는 부모가 관리 — onDismiss만 콜백. */
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  /** 스크린리더용 닫기 라벨. i18n을 위해 프롬프트가 아닌 부모가 넘긴다. */
+  dismissLabel?: string;
+}
+
+const toneClass: Record<CalloutTone, string> = {
+  neutral: styles.neutral,
+  brand: styles.brand,
+  success: styles.success,
+  warning: styles.warning,
+  destructive: styles.destructive,
+};
+
+const variantClass: Record<CalloutVariant, string> = {
+  fill: styles.fill,
+  outline: styles.outline,
+};
+
+/**
+ * tone별 기본 아이콘.
+ * warning: warning-circle (원+느낌표, "주의")
+ * destructive: warning (삼각형+느낌표, "위험")
+ * 나머지 tone은 기본 아이콘 없음 — 사용자가 icon prop으로 지정.
+ */
+const toneDefaultIcon: Partial<Record<CalloutTone, IconName>> = {
+  warning: "warning-circle",
+  destructive: "warning",
+};
+
+const Callout = forwardRef<HTMLDivElement, CalloutProps>(
+  (
+    {
+      className,
+      icon,
+      title,
+      children,
+      actions,
+      actionsPlacement = "bottom",
+      variant = "fill",
+      tone = "brand",
+      dismissible = false,
+      onDismiss,
+      dismissLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootClass = [
+      styles.root,
+      variantClass[variant],
+      toneClass[tone],
+      actionsPlacement === "right" ? styles.actionsRight : styles.actionsBottom,
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const resolvedIcon = icon ?? toneDefaultIcon[tone];
+    const isRight = actionsPlacement === "right";
+
+    const dismissBtn = dismissible ? (
+      <IconButton
+        className={styles.dismiss}
+        size="md"
+        variant="ghost"
+        icon={<Icon name="x" />}
+        onClick={onDismiss}
+        aria-label={dismissLabel}
+      />
+    ) : null;
+
+    return (
+      <div ref={ref} className={rootClass} {...rest}>
+        <div className={styles.head}>
+          {resolvedIcon && (
+            <span className={styles.icon} aria-hidden>
+              <Icon name={resolvedIcon} />
+            </span>
+          )}
+          <div className={styles.title}>{title}</div>
+          {!isRight && dismissBtn}
+        </div>
+        {children && <div className={styles.body}>{children}</div>}
+        {isRight ? (
+          <div
+            className={[styles.side, dismissible ? "" : styles.sideNoDismiss]
+              .filter(Boolean)
+              .join(" ")}
+          >
+            {dismissBtn}
+            {actions && <div className={styles.actions}>{actions}</div>}
+          </div>
+        ) : (
+          actions && <div className={styles.actions}>{actions}</div>
+        )}
+      </div>
+    );
+  },
+);
+
+Callout.displayName = "Callout";
+
+export { Callout };

package/assets/components/Callout/index.ts

@@ -0,0 +1,2 @@
+export { Callout } from "./Callout";
+export type { CalloutProps, CalloutTone, CalloutVariant, CalloutActionsPlacement } from "./Callout";

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

@@ -0,0 +1,254 @@
+/* ChatInput — attachments bar · quotation · body (textarea/input + footer).
+   radius는 Shape 축 토큰 사용 — soft에선 둥글고 crisp에선 각지게 자동.
+   hairline border + bg, focus-within에서 ring. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-sm);
+  transition: var(--transition-colors), var(--transition-ring);
+}
+
+/* MultiLine은 textarea가 공간 많이 쓰므로 상단만 조금 더 */
+.shape-multi {
+  padding: var(--space-3) var(--space-3) var(--space-2);
+}
+
+/* SingleLine은 상하 대칭 유지 */
+.shape-single {
+  padding: var(--space-2) var(--space-3);
+}
+
+/* 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);
+}
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* 첨부물 바 — 3-column grid: chip 고정폭(한 줄 3개).
+   gap space-1 (feedback-small-component-gap). */
+.attachments {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-1);
+}
+/* Thumb은 셀 안에서 자체 폭 유지(좌측 정렬), chip은 셀 폭 채움. */
+.attachmentCell {
+  display: flex;
+  min-width: 0;
+}
+.attachmentCell[data-kind="image"] > * {
+  flex: 0 0 auto;
+}
+.attachmentCell[data-kind="file"] > * {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Quotation */
+.quotation {
+  display: block;
+}
+
+/* body */
+.body {
+  display: flex;
+  min-width: 0;
+}
+
+/* MultiLine */
+.shape-multi .body {
+  flex-direction: column;
+}
+.multiStack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: 100%;
+  min-width: 0;
+}
+/* textarea는 스크롤 컨테이너 — padding 없음.
+   룰: 스크롤 끝에서 텍스트가 "컨테이너 벽"에 닿아 자연스레 잘려야 함.
+   padding을 textarea 안에 두면 bottom padding에서 잘려서 어색. root padding이 트랙 역할. */
+.multiField {
+  width: 100%;
+  min-width: 0;
+  min-height: var(--space-6);
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  resize: none;
+  color: var(--fg-strong);
+  font: inherit;
+  font-size: var(--text-base);
+  line-height: 1.5;
+  overflow-y: hidden;
+}
+.multiField::placeholder {
+  color: var(--fg-muted);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-1);
+}
+
+/* SingleLine */
+.shape-single .body {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-1);
+}
+.singleField {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  color: var(--fg-strong);
+  font: inherit;
+  font-size: var(--text-base);
+  line-height: 1.5;
+}
+.singleField::placeholder {
+  color: var(--fg-muted);
+}
+
+/* Attach 버튼 */
+.attachBtn {
+  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-8);
+  height: var(--space-8);
+  flex: 0 0 auto;
+  transition: var(--transition-colors);
+}
+.attachBtn:hover {
+  background: var(--bg-subtle);
+  color: var(--fg);
+}
+.attachBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+.attachBtn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.attachIcon {
+  width: 68%;
+  height: 68%;
+}
+
+/* model + send */
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 0 0 auto;
+}
+
+.modelBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1_5) var(--space-2);
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--text-sm);
+  line-height: 1;
+  transition: var(--transition-colors);
+}
+.modelBtn:hover {
+  background: var(--bg-subtle);
+  color: var(--fg);
+}
+.modelBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+.modelBtn:disabled {
+  cursor: not-allowed;
+}
+.modelLead {
+  width: var(--space-4);
+  height: var(--space-4);
+  flex: 0 0 auto;
+}
+.modelLabel {
+  color: var(--fg);
+}
+.modelCaret {
+  width: var(--space-3);
+  height: var(--space-3);
+  flex: 0 0 auto;
+}
+.modelBtn[data-compact] {
+  padding: var(--space-1_5);
+}
+
+/* Send — Shape 축 반응. Button sm과 동일한 radius. */
+.sendBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: var(--bg-subtle);
+  color: var(--fg-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  width: var(--space-8);
+  height: var(--space-8);
+  flex: 0 0 auto;
+  transition: var(--transition-colors);
+}
+.sendBtn[data-active] {
+  background: var(--primary);
+  color: var(--bg);
+}
+.sendBtn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+.sendBtn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+.sendBtn:disabled {
+  cursor: not-allowed;
+}
+.sendIcon {
+  width: 55%;
+  height: 55%;
+}
+
+/* 파일 input 숨김 */
+.hiddenFile {
+  display: none;
+}