@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { Icon, type IconName } from "../Icon";
+
+import styles from "./EmptyState.module.css";
+
+/**
+ * EmptyState — 리스트·테이블·대시보드 영역이 비었을 때 그 영역 전체를 채우는 자리채움.
+ * 세로 중앙정렬: 시각 요소(illustration ∨ icon) → 타이틀 → 설명 → 액션.
+ *
+ * 배치 규칙:
+ *  - size는 **컨테이너 폭/영역 크기**에 맞춰 선택 (sm/md/lg)
+ *  - illustration이 있으면 icon은 무시 (병치 금지)
+ *  - 액션은 Button slot. primary 1 + ghost 1 패턴, destructive 금지
+ */
+export type EmptyStateSize = "sm" | "md";
+
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  size?: EmptyStateSize;
+  /** 큰 3D 일러스트 등 ReactNode. 지정되면 icon보다 우선. */
+  illustration?: ReactNode;
+  /** illustration이 없을 때만 렌더되는 Icon slot. */
+  icon?: IconName;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Button 1~2개. primary 1 + ghost 1 패턴 권장. */
+  actions?: ReactNode;
+}
+
+const sizeClass: Record<EmptyStateSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+};
+
+const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  (
+    {
+      className,
+      size = "sm",
+      illustration,
+      icon,
+      title,
+      description,
+      actions,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootClass = [styles.root, sizeClass[size], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    const visual = illustration ? (
+      <div className={styles.illustration} aria-hidden>
+        {illustration}
+      </div>
+    ) : icon ? (
+      <span className={styles.icon} aria-hidden>
+        <Icon name={icon} />
+      </span>
+    ) : null;
+
+    return (
+      <div ref={ref} className={rootClass} {...rest}>
+        {visual}
+        <div className={styles.text}>
+          <div className={styles.title}>{title}</div>
+          {description && <div className={styles.description}>{description}</div>}
+        </div>
+        {actions && <div className={styles.actions}>{actions}</div>}
+      </div>
+    );
+  },
+);
+
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };

package/assets/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps, EmptyStateSize } from "./EmptyState";

package/assets/components/FileIcon/FileIcon.module.css

@@ -0,0 +1,66 @@
+/* FileIcon — 확장자별 색/라벨/아이콘을 담는 둥근 사각 뱃지.
+   비율:
+     radius: Shape 축 반응. sm(16px)만 --radius-checkbox로 캡해 원 방지.
+             md(24) → --radius-xs, lg(32) → --radius-sm
+     label font / size = 0.53     — semibold
+     glyph / size = 0.60          — 브랜드 아이콘 자산 가독성
+   사이즈 리터럴은 FileIcon 고유 치수라 전역 토큰 없음 — 라인별 ignore. */
+
+.root {
+  --fi-size: 24px; /* lint-hardcoded: ignore */
+  --fi-radius: var(--radius-xs);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fi-size);
+  height: var(--fi-size);
+  border-radius: var(--fi-radius);
+  flex: 0 0 auto;
+  overflow: hidden;
+  user-select: none;
+  transition: var(--transition-colors);
+}
+
+/* 사이즈 — Shape 축 반응하되 soft 과도 방지로 한 단계 내려 사용.
+   sm/md: --radius-checkbox (soft에서 6px로 캡)
+   lg:    --radius-xs */
+.sizeSm {
+  --fi-size: 16px; /* lint-hardcoded: ignore */
+  --fi-radius: var(--radius-checkbox);
+}
+.sizeMd {
+  --fi-size: 24px; /* lint-hardcoded: ignore */
+  --fi-radius: var(--radius-checkbox);
+}
+.sizeLg {
+  --fi-size: 32px; /* lint-hardcoded: ignore */
+  --fi-radius: var(--radius-xs);
+}
+
+/* 브랜드 라벨 — "Ai"/"Ps"/"X"/… 2글자 */
+.label {
+  font-size: calc(var(--fi-size) * 0.53);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  font-family: var(--font-sans);
+  /* 2글자 뭉침 방지용 negative tracking. uppercase 아님 — 혼합 대소문자 원본 유지. */
+  letter-spacing: -0.02em; /* lint-hardcoded: ignore */
+}
+
+/* 제너릭 glyph (phosphor) — size × 0.60 */
+.glyph {
+  width: calc(var(--fi-size) * 0.60);
+  height: calc(var(--fi-size) * 0.60);
+}
+
+/* 제너릭 L/D 자동 전환 — CSS 변수를 Mode 축에서 선택 */
+.generic {
+  background: var(--fi-bg-light);
+  color: var(--fi-fg-light);
+}
+
+:global([data-mode="dark"]) .generic {
+  background: var(--fi-bg-dark);
+  color: var(--fi-fg-dark);
+}

package/assets/components/FileIcon/FileIcon.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import {
+  File as PhFile,
+  FileZip as PhFileZip,
+  MusicNote as PhMusicNote,
+} from "@phosphor-icons/react";
+import styles from "./FileIcon.module.css";
+import { resolveFileIcon } from "./fileExtMap";
+
+export type FileIconSize = "sm" | "md" | "lg";
+
+export interface FileIconProps extends HTMLAttributes<HTMLSpanElement> {
+  /** 확장자 또는 파일명. 'psd' / '.psd' / 'report.psd' 다 허용. */
+  ext: string;
+  /** 16 / 24 / 32. 기본 md=24. */
+  size?: FileIconSize;
+}
+
+const sizeClass: Record<FileIconSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+const PHOSPHOR = {
+  file: PhFile,
+  "file-zip": PhFileZip,
+  "music-note": PhMusicNote,
+} as const;
+
+export function FileIcon({
+  ext,
+  size = "md",
+  className,
+  style,
+  ...rest
+}: FileIconProps) {
+  const spec = resolveFileIcon(ext);
+
+  const root = [styles.root, sizeClass[size], className]
+    .filter(Boolean)
+    .join(" ");
+
+  if (spec.kind === "brand") {
+    return (
+      <span
+        className={root}
+        style={{
+          background: spec.bg,
+          color: spec.fg,
+          ...style,
+        }}
+        data-kind="brand"
+        aria-hidden
+        {...rest}
+      >
+        <span className={styles.label}>{spec.label}</span>
+      </span>
+    );
+  }
+
+  // 제너릭 — L/D pair. CSS 변수로 내보내서 data-mode에 CSS가 반응.
+  const Ph = PHOSPHOR[spec.icon];
+  const vars = {
+    "--fi-bg-light": spec.light.bg,
+    "--fi-fg-light": spec.light.fg,
+    "--fi-bg-dark": spec.dark.bg,
+    "--fi-fg-dark": spec.dark.fg,
+  } as React.CSSProperties;
+
+  return (
+    <span
+      className={`${root} ${styles.generic}`}
+      style={{ ...vars, ...style }}
+      data-kind="generic"
+      aria-hidden
+      {...rest}
+    >
+      <Ph className={styles.glyph} weight="regular" />
+    </span>
+  );
+}

package/assets/components/FileIcon/fileExtMap.ts

@@ -0,0 +1,112 @@
+/**
+ * 파일 확장자 → FileIcon 렌더 정보 매핑.
+ *
+ * 두 종류 — "브랜드"와 "제너릭".
+ *   - 브랜드(ai/psd/xls/ppt/doc/pdf): 단일 색 + 2글자 라벨. Mode 축 무관하게 고정.
+ *   - 제너릭(others/zip/mp3): L/D 두 색 pair + 아이콘. Mode 축에 자동 반응.
+ *
+ * 색은 레퍼런스 디자인(.refs/chat/file-icon-ref.png)에서 직접 추출한 hex.
+ * CTDS 하드코딩 금지 원칙의 명시적 예외 — 파일 포맷 식별은 브랜드 자산 성격이라
+ * 토큰으로 추상화하면 의미를 잃는다. [[feedback-no-hardcoded-values]]의 예외
+ * 범주이며, lint baseline에 등록해 통과시킨다.
+ */
+
+export type FileIconKind = "brand" | "generic";
+
+/** 브랜드형 — bg·fg 고정, 라벨은 2글자. */
+export interface BrandSpec {
+  kind: "brand";
+  bg: string;
+  fg: string;
+  label: string;
+}
+
+/** 제너릭형 — L/D pair, phosphor 아이콘. */
+export interface GenericSpec {
+  kind: "generic";
+  light: { bg: string; fg: string };
+  dark: { bg: string; fg: string };
+  icon: "file" | "file-zip" | "music-note";
+}
+
+export type FileIconSpec = BrandSpec | GenericSpec;
+
+/** 제너릭 키들 (ext → group) */
+const GENERIC_GROUP: Record<string, "zip" | "mp3" | "others"> = {
+  zip: "zip",
+  rar: "zip",
+  "7z": "zip",
+  tar: "zip",
+  gz: "zip",
+
+  mp3: "mp3",
+  wav: "mp3",
+  flac: "mp3",
+  m4a: "mp3",
+  aac: "mp3",
+  ogg: "mp3",
+};
+
+/** 그룹별 제너릭 스펙 */
+const GENERIC_SPEC: Record<"zip" | "mp3" | "others", GenericSpec> = {
+  others: {
+    kind: "generic",
+    light: { bg: "#EDEAB0", fg: "#B2AA54" },
+    dark: { bg: "#363229", fg: "#A19B5A" },
+    icon: "file",
+  },
+  zip: {
+    kind: "generic",
+    light: { bg: "#EDEAB0", fg: "#B2AA54" },
+    dark: { bg: "#363229", fg: "#A19B59" },
+    icon: "file-zip",
+  },
+  mp3: {
+    kind: "generic",
+    light: { bg: "#BEFDA8", fg: "#4B9C2D" },
+    dark: { bg: "#254924", fg: "#BDFCA8" },
+    icon: "music-note",
+  },
+};
+
+/** 브랜드 파일 — 확장자별 단일 스펙 */
+const BRAND_SPEC: Record<string, BrandSpec> = {
+  ai: { kind: "brand", bg: "#2E0402", fg: "#F09E38", label: "Ai" },
+  psd: { kind: "brand", bg: "#081D34", fg: "#57A5F8", label: "Ps" },
+  xls: { kind: "brand", bg: "#3B804C", fg: "#FFFFFF", label: "X" },
+  xlsx: { kind: "brand", bg: "#3B804C", fg: "#FFFFFF", label: "X" },
+  ppt: { kind: "brand", bg: "#B84C2C", fg: "#FFFFFF", label: "P" },
+  pptx: { kind: "brand", bg: "#B84C2C", fg: "#FFFFFF", label: "P" },
+  doc: { kind: "brand", bg: "#3044C7", fg: "#FFFFFF", label: "W" },
+  docx: { kind: "brand", bg: "#3044C7", fg: "#FFFFFF", label: "W" },
+  pdf: { kind: "brand", bg: "#EA336C", fg: "#FFFFFF", label: "Pd" },
+};
+
+/**
+ * 확장자 정규화 — 선행 점·대문자 모두 허용.
+ * 공백·null 안전.
+ */
+export function normalizeExt(ext: string | null | undefined): string {
+  if (!ext) return "";
+  return ext.trim().replace(/^\./, "").toLowerCase();
+}
+
+/** 파일명(또는 확장자)에서 FileIcon 스펙 조회. */
+export function resolveFileIcon(input: string): FileIconSpec {
+  const ext = normalizeExt(
+    input.includes(".") ? input.split(".").pop() ?? "" : input
+  );
+
+  if (ext in BRAND_SPEC) return BRAND_SPEC[ext];
+
+  const group = GENERIC_GROUP[ext] ?? "others";
+  return GENERIC_SPEC[group];
+}
+
+/** 데모·테스트에서 전체 리스트 돌 때 쓰려고 export. */
+export const KNOWN_BRAND_EXTS = Object.keys(BRAND_SPEC);
+export const KNOWN_GENERIC_GROUPS = Object.keys(GENERIC_SPEC) as (
+  | "others"
+  | "zip"
+  | "mp3"
+)[];

package/assets/components/FileIcon/index.ts

@@ -0,0 +1,9 @@
+export { FileIcon } from "./FileIcon";
+export type { FileIconProps, FileIconSize } from "./FileIcon";
+export {
+  resolveFileIcon,
+  normalizeExt,
+  KNOWN_BRAND_EXTS,
+  KNOWN_GENERIC_GROUPS,
+} from "./fileExtMap";
+export type { FileIconSpec, BrandSpec, GenericSpec } from "./fileExtMap";

package/assets/components/FilterButton/FilterButton.module.css

@@ -0,0 +1,130 @@
+/* FilterButton ────────────────────────────────────────────────────
+   토글 상태를 가진 "필터 선택" 컨트롤.
+   기본은 outline(회색 선 + fg-muted 텍스트), selected=true면 반전(fg 배경 + bg 텍스트).
+   Button과 시각적으로 형제이지만 시맨틱이 다름(액션 실행 vs 선택 상태 유지).
+   aria-pressed로 스크린리더에 토글 상태 전달. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1_5);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid var(--border-strong);
+  /* selected 토글은 fg↔bg 반전이라 background/color를 보간하면 중간에 반드시
+     저대비 구간(반투명 검정 위 회색 글자)을 지나 글자가 사라져 보임.
+     → 색은 즉시 스위칭, motion은 border/shadow/transform에만. */
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-base) var(--ease-out);
+}
+
+.root:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+.root:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--fg);
+  border-color: var(--fg-muted);
+}
+
+.root:active:not(:disabled) {
+  transform: translateY(var(--space-0_5));
+}
+
+.root:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Selected — inverse 스타일 반전. Hue 축과 무관하게 흑백 대비로 강조.
+   필터가 "적용 중"임을 팔레트와 상관없이 명확히 알림. */
+.root[aria-pressed="true"] {
+  background: var(--fg);
+  color: var(--bg);
+  border-color: var(--fg);
+}
+
+/* selected hover는 unselected hover의 color/border까지 명시적으로 덮어써야 함 —
+   빼먹으면 검정 배경 위 검정 글자로 대비가 무너짐. */
+.root[aria-pressed="true"]:hover:not(:disabled) {
+  background: var(--fg-strong);
+  color: var(--bg);
+  border-color: var(--fg-strong);
+}
+
+/* Sizes — Button과 동일 스케일(control-h-*)로 나란히 놓아도 정렬 맞음.
+   Shape 축이 radius를 스왑. */
+.sm {
+  height: var(--control-h-sm);
+  padding-inline: var(--space-2);
+  gap: var(--space-1);
+  font-size: var(--label-sm-size);
+  letter-spacing: var(--label-tracking);
+  border-radius: var(--radius-xs);
+  --chip-icon-size: var(--space-4);
+}
+.md {
+  height: var(--control-h-md);
+  padding-inline: var(--space-2_5);
+  gap: var(--space-1_5);
+  font-size: var(--label-md-size);
+  letter-spacing: var(--label-tracking);
+  border-radius: var(--radius-sm);
+  --chip-icon-size: var(--space-4);
+}
+
+/* Icon slot — Button과 동일 방식(정사각 슬롯, opacity로 톤 조절). */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--chip-icon-size);
+  height: var(--chip-icon-size);
+  opacity: 0.75;
+}
+.icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.root:hover:not(:disabled) .icon,
+.root[aria-pressed="true"] .icon {
+  opacity: 1;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Count — 중립 그레이 pill. selected 시 반전 바탕 위라 bg 배경으로 다시 떠올림. */
+.count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--space-4);
+  padding: 0 var(--space-1);
+  height: var(--space-4);
+  border-radius: var(--radius-xs);
+  background: var(--bg-subtle);
+  color: var(--fg-muted);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.root[aria-pressed="true"] .count {
+  background: var(--bg);
+  color: var(--fg-muted);
+}

package/assets/components/FilterButton/FilterButton.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import styles from "./FilterButton.module.css";
+
+export type FilterButtonSize = "sm" | "md";
+
+export type FilterButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "size"
+> & {
+  size?: FilterButtonSize;
+  selected?: boolean;
+  onToggle?: (next: boolean) => void;
+  leftIcon?: ReactNode;
+  count?: number;
+};
+
+const sizeClass: Record<FilterButtonSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+};
+
+const ICON_SIZE: Record<FilterButtonSize, number> = {
+  sm: 14,
+  md: 16,
+};
+
+function sizedIcon(node: ReactNode, size: number): ReactNode {
+  if (!isValidElement(node)) return node;
+  const el = node as ReactElement<{ size?: number | string }>;
+  if (el.props.size !== undefined) return el;
+  return cloneElement(el, { size });
+}
+
+const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(
+  (
+    {
+      className,
+      size = "md",
+      selected = false,
+      onToggle,
+      onClick,
+      leftIcon,
+      count,
+      type,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootClass = [styles.root, sizeClass[size], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        className={rootClass}
+        onClick={(e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) onToggle?.(!selected);
+        }}
+        aria-pressed={selected}
+        {...rest}
+      >
+        {leftIcon && (
+          <span className={styles.icon} aria-hidden>
+            {sizedIcon(leftIcon, ICON_SIZE[size])}
+          </span>
+        )}
+        {children && <span className={styles.label}>{children}</span>}
+        {count !== undefined && (
+          <span className={styles.count} aria-hidden>
+            {count}
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+
+FilterButton.displayName = "FilterButton";
+
+export { FilterButton };

package/assets/components/FilterButton/index.ts

@@ -0,0 +1,2 @@
+export { FilterButton } from "./FilterButton";
+export type { FilterButtonProps, FilterButtonSize } from "./FilterButton";