@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/SelectableCard/SelectableCard.module.css

@@ -0,0 +1,177 @@
+/* SelectableCard ────────────────────────────────────────────────
+   카드 전체가 선택 타겟. native <input type="radio|checkbox">를 안에 숨기고,
+   label로 감싸 네이티브 시맨틱과 폼 전송을 그대로 받는다.
+   좌측 leading 슬롯: mode=radio→dot, checkbox→check, icon→Icon.
+
+   레이어 구조:
+   .surface = 배경·경계·hover tint (position: absolute · inset:0 · pointer-events: none)
+   .content = 실제 콘텐츠 (leading + text)
+   surface를 따로 두면 border-width 변경 없이도 이중 링 추가 시 layout jitter 방지.
+
+   Accent 색은 전역 --selected-fg 토큰 (mono=fg, standard/colorful=primary). */
+.root {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  user-select: none;
+  color: var(--fg);
+  font-family: var(--font-sans);
+  border-radius: var(--radius-md);
+  transition: var(--transition-colors), var(--transition-press);
+  /* Hover 시 translateY(-1px)로 뜨기 때문에 상단이 잘리지 않도록 hairline 여백 확보.
+     부모 컨테이너가 overflow:hidden이거나 정확히 top:0에 붙어있어도 안전. */
+  margin-top: var(--hairline);
+}
+.root[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Surface — 카드 경계만. 배경은 투명(부모 표면 그대로 노출).
+   hover에서 border 승격, checked에서 accent 경계로 전환. */
+.surface {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: transparent;
+  border: 1px solid var(--border);
+  transition: var(--transition-colors), var(--transition-ring);
+  pointer-events: none;
+}
+
+/* Content — leading + text.
+   line-height 시각 보정: 상단은 title text의 line-height 여백이 포함되므로 한 단계 축소. */
+.content {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4) var(--space-4);
+}
+
+/* Leading — mode별 시각 요소 컨테이너. title 첫 줄 baseline과 맞추기 위해 lh-base 높이. */
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: var(--lh-base);
+}
+
+/* Radio dot — 선택 전 배경 없음(부모 표면 노출). */
+.radioDot {
+  display: inline-block;
+  width: var(--space-4);
+  height: var(--space-4);
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+  background: transparent;
+  transition:
+    box-shadow var(--duration-slow) var(--ease-out),
+    background var(--duration-slow) var(--ease-out);
+}
+
+/* Checkbox — 선택 전 배경 없음(부모 표면 노출). */
+.checkBox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-4);
+  height: var(--space-4);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border-strong);
+  background: transparent;
+  color: transparent;
+  transition: var(--transition-colors);
+}
+.checkBox > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Icon (mode="icon") */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+  transition: var(--transition-colors);
+}
+.icon > svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+/* Text block */
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+  min-width: 0;
+  flex: 1;
+}
+.title {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+}
+.description {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  color: var(--fg-muted);
+}
+
+/* ── States ────────────────────────────────────────────────── */
+
+/* Hover — 배경/경계 손대지 않고 카드가 살짝 뜨는 움직임 + shadow로만 표현.
+   상태(active/checked)와 겹쳐도 signal을 덮지 않는 속성만 사용. */
+.root:hover:not([data-disabled="true"]) {
+  transform: translateY(-1px);
+}
+.root:hover:not([data-disabled="true"]) .surface {
+  box-shadow: var(--shadow-sm);
+}
+.root:active:not([data-disabled="true"]) {
+  transform: translateY(0);
+}
+
+/* Focus — input 포커스가 surface에 ring으로 반영 */
+.input:focus-visible ~ .surface {
+  box-shadow: var(--ring-shadow);
+}
+
+/* Checked — 경계 색만 accent로 승격. stroke 굵기 1px 유지 (Shape 축 영향 없음).
+   배경은 유지 — 색공간 오염 방지. */
+.input:checked ~ .surface {
+  border-color: var(--selected-fg);
+}
+.input:checked:focus-visible ~ .surface {
+  box-shadow: var(--ring-shadow);
+}
+
+/* Radio dot — checked 시 안쪽 도트를 accent 색으로. stroke는 항상 1px.
+   바깥은 투명(부모 표면 노출). */
+.input:checked ~ .content .radioDot {
+  box-shadow: inset 0 0 0 1px var(--selected-fg);
+  background: radial-gradient(
+    circle at center,
+    var(--selected-fg) 0,
+    var(--selected-fg) 30%,
+    transparent 31%
+  );
+}
+
+/* Checkbox — checked 시 배경/경계/체크 색이 accent로 반전. */
+.input:checked ~ .content .checkBox {
+  background: var(--selected-fg);
+  border-color: var(--selected-fg);
+  color: var(--bg);
+}
+
+/* Icon (mode="icon") — checked 시 accent 색으로 승격 */
+.input:checked ~ .content .icon {
+  color: var(--selected-fg);
+}
+

package/assets/components/SelectableCard/SelectableCard.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+
+import { Icon, type IconName } from "../Icon";
+
+import styles from "./SelectableCard.module.css";
+
+export type SelectableCardMode = "radio" | "checkbox" | "icon";
+
+export type SelectableCardProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "size" | "title"
+> & {
+  /**
+   * radio: 단일 선택. 좌측에 라디오 인디케이터.
+   * checkbox: 다중 선택. 좌측에 체크 인디케이터.
+   * icon: 단일 선택. 좌측에 icon prop이 렌더된다. icon 필수.
+   */
+  mode?: SelectableCardMode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** mode="icon"일 때 좌측 슬롯에 렌더. */
+  icon?: IconName;
+};
+
+const SelectableCard = forwardRef<HTMLInputElement, SelectableCardProps>(
+  (
+    {
+      className,
+      mode = "radio",
+      title,
+      description,
+      icon,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const rootClass = [styles.root, styles[mode], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+    const inputType = mode === "checkbox" ? "checkbox" : "radio";
+
+    return (
+      <label className={rootClass} data-disabled={disabled ? "true" : "false"}>
+        <input
+          ref={ref}
+          type={inputType}
+          className={`${styles.input} visually-hidden`}
+          disabled={disabled}
+          {...rest}
+        />
+        <span className={styles.surface} aria-hidden />
+        <span className={styles.content}>
+          <span className={styles.leading} aria-hidden>
+            {mode === "radio" && <span className={styles.radioDot} />}
+            {mode === "checkbox" && (
+              <span className={styles.checkBox}>
+                <Icon name="check" />
+              </span>
+            )}
+            {mode === "icon" && icon && (
+              <span className={styles.icon}>
+                <Icon name={icon} />
+              </span>
+            )}
+          </span>
+          <span className={styles.text}>
+            <span className={styles.title}>{title}</span>
+            {description && (
+              <span className={styles.description}>{description}</span>
+            )}
+          </span>
+        </span>
+      </label>
+    );
+  },
+);
+
+SelectableCard.displayName = "SelectableCard";
+
+export { SelectableCard };

package/assets/components/SelectableCard/index.ts

@@ -0,0 +1,2 @@
+export { SelectableCard } from "./SelectableCard";
+export type { SelectableCardProps, SelectableCardMode } from "./SelectableCard";

package/assets/components/Shortcut/Shortcut.module.css

@@ -0,0 +1,56 @@
+/* Shortcut ─────────────────────────────────────────────────────
+   키보드 단축키 표시 전용. MenuItem trailing, Tooltip 안, Command Palette 힌트에
+   모두 공유되는 최소 컴포넌트. 인터랙션·상태 없음 — 순수 시각 라벨.
+
+   미니멀 정책: 표면·테두리 없음. 색·간격만으로 심볼 그룹 인상. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-family: var(--font-code);
+  font-weight: var(--font-weight-regular);
+  line-height: 1;
+  letter-spacing: var(--tracking-normal);
+  color: var(--fg-subtle);
+  background: var(--bg-muted);
+  border: 0;
+  box-shadow: none;                             /* globals.css의 kbd 전역 그림자 리셋 */
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* 내부 개별 키 span — 문자열 children이 심볼 단위로 쪼개져 각 하나씩 감싸짐.
+   .keyIcon은 phosphor 아이콘이 들어간 슬롯 (Cmd/Shift/Option/Arrow 등),
+   그 외는 문자 텍스트 (A~Z, 0~9, `,`, `.`, `/` 등). */
+.key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* 폭이 좁은 문자(,·.·/)도 자연스럽게 정렬되도록 최소 폭만 확보. */
+  min-width: 1ch;
+  text-align: center;
+}
+
+.keyIcon {
+  /* 아이콘은 이미 정사각 — 강제 min-width 해제해서 자연 폭 유지. */
+  min-width: 0;
+}
+
+/* Sizes ──────────────────────────────────────────────────────── */
+/* MenuItem sm/md 옆에 자연스럽게 붙는 두 사이즈.
+   높이는 line-height + padding으로 결정, 별도 min-height 강제 없음.
+   심볼 사이 gap은 padding-inline보다 살짝 좁게 — "한 덩어리" 인상 유지. */
+.sm {
+  padding-block: var(--space-0_5);
+  padding-inline: var(--space-1);
+  gap: var(--space-0_5);
+  font-size: var(--text-2xs);                   /* 12 */
+  border-radius: var(--radius-xs);
+}
+.md {
+  padding-block: var(--space-1);
+  padding-inline: var(--space-1_5);
+  gap: var(--space-0_5);
+  font-size: var(--text-2xs);                   /* 12 */
+  border-radius: var(--radius-sm);
+}

package/assets/components/Shortcut/Shortcut.tsx

@@ -0,0 +1,156 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import {
+  Command as PhCommand,
+  ArrowFatUp as PhShift,
+  Option as PhOption,
+  Control as PhControl,
+  ArrowElbowDownLeft as PhReturn,
+  Backspace as PhBackspace,
+  ArrowElbowDownRight as PhTab,
+  ArrowUp as PhArrowUp,
+  ArrowDown as PhArrowDown,
+  ArrowLeft as PhArrowLeft,
+  ArrowRight as PhArrowRight,
+  type Icon as PhIcon,
+} from "@phosphor-icons/react";
+
+import styles from "./Shortcut.module.css";
+
+export type ShortcutSize = "sm" | "md";
+
+/**
+ * 각 키 토큰. 문자열이면 아래 규칙으로 렌더:
+ *   - 심볼 매핑에 걸리면 phosphor 아이콘
+ *   - 다글자 이름("cmd", "shift", "enter", "esc", "space" 등)도 매핑에 걸리면 아이콘
+ *   - 그 외(단일 알파벳/숫자/문장부호/미매핑)는 텍스트 그대로
+ * 완전 자유가 필요하면 ReactNode 전달.
+ */
+export type ShortcutKey = string | ReactNode;
+
+export type ShortcutProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+  size?: ShortcutSize;
+  /**
+   * 단축키. 사용법:
+   *   "⌘K"          → [⌘][K]  (심볼 단위로 자동 분해)
+   *   "⌘⇧P"         → [⌘][⇧][P]
+   *   ["cmd", "K"]  → 이름으로 명시 (다글자 별칭 지원)
+   *   ["ctrl", "shift", "P"]
+   * 매핑 없는 문자열은 그대로 텍스트("esc", "space", "del", 알파벳/숫자 등).
+   */
+  children: string | ShortcutKey[] | ReactNode;
+};
+
+const sizeClass: Record<ShortcutSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+};
+
+/* 심볼/별칭 → phosphor 아이콘.
+   Icon axis와 무관하게 phosphor로 고정 (한 페이지 = 한 family 원칙의 예외 —
+   단축키는 시스템 관례 심볼이라 라이브러리 스왑 대상이 아님). */
+const iconMap: Record<string, PhIcon> = {
+  // Command
+  "⌘": PhCommand,
+  cmd: PhCommand,
+  command: PhCommand,
+  meta: PhCommand,
+  // Shift
+  "⇧": PhShift,
+  shift: PhShift,
+  // Option / Alt
+  "⌥": PhOption,
+  opt: PhOption,
+  option: PhOption,
+  alt: PhOption,
+  // Control
+  "⌃": PhControl,
+  ctrl: PhControl,
+  control: PhControl,
+  // Return / Enter
+  "⏎": PhReturn,
+  "↵": PhReturn,
+  enter: PhReturn,
+  return: PhReturn,
+  // Backspace / Delete
+  "⌫": PhBackspace,
+  backspace: PhBackspace,
+  // Tab
+  "⇥": PhTab,
+  tab: PhTab,
+  // Arrows
+  "↑": PhArrowUp,
+  up: PhArrowUp,
+  "↓": PhArrowDown,
+  down: PhArrowDown,
+  "←": PhArrowLeft,
+  left: PhArrowLeft,
+  "→": PhArrowRight,
+  right: PhArrowRight,
+};
+
+const ICON_SIZE: Record<ShortcutSize, number> = {
+  sm: 11,
+  md: 12,
+};
+
+/* 문자열 → 키 토큰 배열.
+   Array.from으로 code point 단위 분해 (⌘·⇧ 같은 심볼도 안전).
+   공백은 무시. */
+function splitToKeys(input: string): string[] {
+  return Array.from(input).filter((ch) => ch !== " ");
+}
+
+function renderKey(
+  key: ShortcutKey,
+  size: ShortcutSize,
+  idx: number,
+): ReactNode {
+  if (typeof key !== "string") {
+    return (
+      <span key={idx} className={styles.key}>
+        {key}
+      </span>
+    );
+  }
+  const lower = key.toLowerCase();
+  const IconComp = iconMap[key] ?? iconMap[lower];
+  if (IconComp) {
+    return (
+      <span key={idx} className={`${styles.key} ${styles.keyIcon}`}>
+        <IconComp size={ICON_SIZE[size]} />
+      </span>
+    );
+  }
+  return (
+    <span key={idx} className={styles.key}>
+      {key}
+    </span>
+  );
+}
+
+const Shortcut = forwardRef<HTMLElement, ShortcutProps>(
+  ({ className, size = "sm", children, ...rest }, ref) => {
+    const cls = [styles.root, sizeClass[size], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    let content: ReactNode;
+    if (typeof children === "string") {
+      content = splitToKeys(children).map((k, i) => renderKey(k, size, i));
+    } else if (Array.isArray(children)) {
+      content = (children as ShortcutKey[]).map((k, i) => renderKey(k, size, i));
+    } else {
+      content = children;
+    }
+
+    return (
+      <kbd ref={ref} className={cls} {...rest}>
+        {content}
+      </kbd>
+    );
+  },
+);
+
+Shortcut.displayName = "Shortcut";
+
+export { Shortcut };

package/assets/components/Shortcut/index.ts

@@ -0,0 +1,2 @@
+export { Shortcut } from "./Shortcut";
+export type { ShortcutProps, ShortcutSize } from "./Shortcut";