@conscience-technology/ctds 0.3.2 → 0.3.4

package/assets/components/CommandPalette/useCommandPaletteHotkey.ts

@@ -1,49 +0,0 @@
-"use client";
-
-/**
- * useCommandPaletteHotkey ─ Command Palette 토글 전역 단축키 훅.
- * 기본값 ⌘K / Ctrl+K. 입력 요소에서도 동작한다(검색 창은 어디서든 열려야 함).
- *
- * 사용
- *   const [open, setOpen] = useState(false);
- *   useCommandPaletteHotkey(() => setOpen((v) => !v));
- *
- * 커스텀 키
- *   useCommandPaletteHotkey(toggle, { key: "p", mod: true, shift: true }); // ⌘⇧P
- */
-
-import { useEffect } from "react";
-
-export type HotkeyOptions = {
-  /** 단일 문자 키 (소문자). 기본 "k". */
-  key?: string;
-  /** Meta(⌘)/Ctrl 필수 여부. 기본 true. */
-  mod?: boolean;
-  /** Shift 필수 여부. 기본 false. */
-  shift?: boolean;
-  /** Alt 필수 여부. 기본 false. */
-  alt?: boolean;
-  /** 비활성 플래그. 조건부 활성 때 유용. */
-  disabled?: boolean;
-};
-
-export function useCommandPaletteHotkey(
-  callback: () => void,
-  options: HotkeyOptions = {},
-): void {
-  const { key = "k", mod = true, shift = false, alt = false, disabled = false } = options;
-  useEffect(() => {
-    if (disabled) return;
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key.toLowerCase() !== key.toLowerCase()) return;
-      if (mod && !(e.metaKey || e.ctrlKey)) return;
-      if (!mod && (e.metaKey || e.ctrlKey)) return;
-      if (shift !== e.shiftKey) return;
-      if (alt !== e.altKey) return;
-      e.preventDefault();
-      callback();
-    }
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [callback, key, mod, shift, alt, disabled]);
-}

package/assets/components/EventCard/EventCard.module.css

@@ -1,133 +0,0 @@
-/*
- * EventCard — 리스트에 쌓이는 일정 아이템.
- * 좌: 날짜 블록(큰 숫자 + 요일 소문자) · 세로 hairline · 우: 제목 + status + meta.
- *
- * chrome: --radius-lg + 1px --border + --bg. 그림자 금지.
- * interactive: href 있을 때만 hover/focus ring.
- */
-
-.root {
-  display: flex;
-  align-items: stretch;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  color: inherit;
-  text-decoration: none;
-  min-width: 0;
-}
-
-.interactive {
-  cursor: pointer;
-  transition: var(--transition-colors), var(--transition-ring);
-}
-
-.interactive:hover {
-  background: var(--hover);
-}
-
-.interactive:focus-visible {
-  outline: none;
-  box-shadow: var(--ring-shadow);
-}
-
-/* 날짜 블록 — 좌측 고정 폭. 숫자가 2자리 기준으로 흔들리지 않도록 min-width 트랙. */
-.dateBlock {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--space-8); /* 2자리 숫자 트랙 (한 단계 조임) */
-  padding-inline: var(--space-0_5);
-  flex-shrink: 0;
-}
-
-.day {
-  font-size: var(--text-xl);
-  line-height: var(--lh-tight);
-  font-weight: var(--font-weight-semibold); /* xl=20px → semibold 허용 */
-  font-variant-numeric: tabular-nums;
-  color: var(--fg-strong);
-}
-
-.weekday {
-  font-size: var(--text-3xs);
-  line-height: var(--lh-3xs);
-  font-weight: var(--font-weight-regular);
-  color: var(--fg-muted);
-  /* 소문자 유지. uppercase 금지 */
-}
-
-/* 세로 hairline — border-left shorthand로 (리터럴 width 금지 회피) */
-.divider {
-  border-inline-start: 1px solid var(--border);
-  align-self: stretch;
-  flex-shrink: 0;
-}
-
-/* 본문 — 제목 + 메타 라인 */
-.body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  justify-content: center;
-}
-
-.title {
-  margin: 0;
-  font-size: var(--text-xs);
-  line-height: var(--lh-xs);
-  font-weight: var(--font-weight-medium); /* 20px 미만 → medium */
-  color: var(--fg-strong);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 메타 라인 — status Badge + 아이콘+텍스트 N개. 사이는 짧은 세로 hairline. */
-.metaRow {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1_5);
-  flex-wrap: wrap;
-  min-width: 0;
-  color: var(--fg-muted);
-}
-
-.metaItem {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: var(--text-2xs);
-  line-height: var(--lh-2xs);
-  color: var(--fg-muted);
-  min-width: 0;
-}
-
-/* 메타 라인 안에서 "앞선 형제가 있을 때만" 왼쪽 hairline. 첫 아이템은 항상 제거,
-   앞 slot이 비었다가 뒤에 하나만 나오는 경우에도 자동으로 안 그려진다. */
-.metaRow > * + .metaItem {
-  padding-inline-start: var(--space-1_5);
-  border-inline-start: 1px solid var(--border);
-}
-
-.metaIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fg-muted);
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.metaLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/assets/components/EventCard/EventCard.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import {
-  forwardRef,
-  type AnchorHTMLAttributes,
-  type HTMLAttributes,
-  type ReactNode,
-  type Ref,
-} from "react";
-
-import { Badge } from "../Badge";
-import { Icon, type IconName } from "../Icon";
-
-import styles from "./EventCard.module.css";
-
-/**
- * EventCard — 리스트에 쌓이는 "하나의 일정" 아이템.
- * 좌: 날짜 블록 (큰 숫자 + 요일), 우: 제목 + status + meta.
- *
- * EventChip은 캘린더 셀 안 색 바 전용. 이 컴포넌트는 리스트 카드.
- */
-
-export type EventCardStatus = "upcoming" | "pending" | "completed" | "cancelled";
-
-export type EventCardMeta = {
-  icon?: IconName;
-  label: ReactNode;
-};
-
-type Common = {
-  date: Date;
-  title: ReactNode;
-  status?: EventCardStatus;
-  statusLabel?: ReactNode;
-  meta?: EventCardMeta[];
-};
-
-type DivProps = Common &
-  Omit<HTMLAttributes<HTMLDivElement>, keyof Common> & { href?: undefined };
-
-type AnchorProps = Common &
-  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof Common> & { href: string };
-
-export type EventCardProps = DivProps | AnchorProps;
-
-const statusMap: Record<
-  EventCardStatus,
-  { badgeStatus: "info" | "warning" | "success" | "destructive"; defaultLabel: string }
-> = {
-  upcoming: { badgeStatus: "info", defaultLabel: "Upcoming" },
-  pending: { badgeStatus: "warning", defaultLabel: "Pending" },
-  completed: { badgeStatus: "success", defaultLabel: "Completed" },
-  cancelled: { badgeStatus: "destructive", defaultLabel: "Cancelled" },
-};
-
-/* locale 고정 없이 사용자 로케일에 맡기면 리스트 안에서 길이가 들쭉날쭉.
-   요일 3글자 약어는 en-US 기준으로 맞추고, 대문자 금지 규칙에 따라 수동 소문자화. */
-function formatDay(date: Date): string {
-  return String(date.getDate()).padStart(2, "0");
-}
-function formatWeekday(date: Date): string {
-  return date
-    .toLocaleDateString("en-US", { weekday: "short" })
-    .toLowerCase();
-}
-
-const EventCard = forwardRef<HTMLElement, EventCardProps>((props, ref) => {
-  const {
-    className,
-    date,
-    title,
-    status,
-    statusLabel,
-    meta,
-    ...rest
-  } = props as Common & { className?: string } & Record<string, unknown>;
-
-  const isLink = typeof (props as AnchorProps).href === "string";
-
-  const rootClass = [
-    styles.root,
-    isLink ? styles.interactive : "",
-    className ?? "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const mapped = status ? statusMap[status] : undefined;
-  const effectiveStatusLabel = statusLabel ?? mapped?.defaultLabel;
-
-  const content = (
-    <>
-      <div className={styles.dateBlock} aria-hidden>
-        <span className={styles.day}>{formatDay(date)}</span>
-        <span className={styles.weekday}>{formatWeekday(date)}</span>
-      </div>
-      <div className={styles.divider} aria-hidden />
-      <div className={styles.body}>
-        <h3 className={styles.title}>{title}</h3>
-        {(mapped || meta?.length) && (
-          <div className={styles.metaRow}>
-            {mapped && effectiveStatusLabel && (
-              <Badge variant="soft" status={mapped.badgeStatus}>
-                {effectiveStatusLabel}
-              </Badge>
-            )}
-            {meta?.map((m, i) => (
-              <span key={i} className={styles.metaItem}>
-                {m.icon && (
-                  <span className={styles.metaIcon} aria-hidden>
-                    <Icon name={m.icon} size={12} />
-                  </span>
-                )}
-                <span className={styles.metaLabel}>{m.label}</span>
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    </>
-  );
-
-  if (isLink) {
-    return (
-      <a
-        ref={ref as Ref<HTMLAnchorElement>}
-        className={rootClass}
-        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
-        href={(props as AnchorProps).href}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <div
-      ref={ref as Ref<HTMLDivElement>}
-      className={rootClass}
-      {...(rest as HTMLAttributes<HTMLDivElement>)}
-    >
-      {content}
-    </div>
-  );
-});
-
-EventCard.displayName = "EventCard";
-
-export { EventCard };

package/assets/components/EventCard/index.ts

@@ -1,2 +0,0 @@
-export { EventCard } from "./EventCard";
-export type { EventCardProps, EventCardStatus, EventCardMeta } from "./EventCard";

package/assets/prompts/components/accordion.md

@@ -1,126 +0,0 @@
-# Accordion
-
-### 원칙
-여러 섹션을 **접었다 폈다** 하는 구조 컴포넌트. 긴 콘텐츠를 압축해 "지금 중요한 것"만 보여주고, 사용자가 원할 때 세부를 펼친다. 설정 그룹·FAQ·상세 사양·단계별 체크리스트가 전형적인 자리. Radix `@radix-ui/react-accordion`을 감싼 compound 어댑터 — 열림 상태·높이 측정·키보드 네비·ARIA는 Radix가 처리하고, CTDS는 Trigger 레이아웃·caret·divider·card variant만 담당. [[components/collapsible]]과 비슷하지만 **여러 아이템**인 점이 다르다. 하나짜리면 Collapsible로.
-
-### Do
-- **"지금 보이는 것 vs 숨긴 것"의 비율이 1:3 이상일 때 쓴다.** 전부 다 중요하면 그냥 나열하는 게 낫다. Accordion은 "요약은 다 보이고, 세부가 선택적"인 리스트용.
-- **섹션 라벨은 명사 하나로 짧게.** "일반" "알림" "결제" — 긴 문장형은 Accordion 자리가 아님. 사용자는 라벨만 보고 "펼칠지 말지" 판단.
-- **`type="single" collapsible` 기본값.** 한 번에 한 섹션만 열림 + 열린 걸 다시 닫을 수 있음. 설정 UI의 표준 동작.
-- **여러 섹션 동시 열기는 `type="multiple"`**. 체크리스트·비교·FAQ(사용자가 여러 질문 동시 열람)에만.
-- **variant 선택**: 설명 블록 사이에 투명하게 녹여야 하면 `bare`(선·좌우 여백 전부 없음). 설정 그룹·FAQ 리스트는 `plain`(기본). 각 아이템이 독립 블록으로 보여야 하면 `card`.
-- **leading 아이콘은 섹션 성격 명시용**. 설정 그룹의 "⚙ 일반 / 🔔 알림 / 💳 결제"처럼 **섹션끼리 아이콘 세트가 균질할 때만** 쓴다. 하나만 아이콘 있고 나머지 없으면 혼란.
-- **trailing은 메타 정보**. "3개 변경됨" 배지, "4/8 완료" 숫자 등 사용자가 라벨만 보고 "열어볼 가치"를 판단하도록.
-- **첫 섹션 defaultOpen**: 사용자가 가장 자주 보는 섹션이 명확하면 `defaultValue`로 열어둔다. 모르면 전부 닫힌 상태 OK.
-
-### Don't
-- **중첩 금지.** Accordion 안에 또 Accordion 금지. 깊이가 필요하면 섹션을 쪼개서 **별도 페이지**로 보내거나 좌측 Nav로 분리.
-- **본문에 또 다른 Primary CTA 넣지 말 것.** 사용자가 섹션을 "펼쳐야만" 중요한 액션을 볼 수 있는 구조는 발견 실패를 유발. 핵심 CTA는 Accordion 밖 상단에.
-- **길이가 들쭉날쭉한 본문 금지.** 어떤 섹션은 1줄, 어떤 섹션은 20줄이면 레이아웃이 요동친다. 긴 섹션은 아예 별도 페이지로.
-- **Accordion과 Tabs 혼용 금지.** 둘 다 "숨기기 + 보이기"이지만: **Accordion은 세로 리스트, Tabs는 가로 전환**. 섹션 수가 3개 이하 + 서로 배타적이면 Tabs가 맞음. 섹션 수가 많거나 동시 열람 가능하면 Accordion.
-- **애니메이션 커스터마이즈 금지.** Radix의 `--radix-accordion-content-height` 변수에 맞춰 CTDS 모션 토큰(`--duration-base` + `--ease-out`)으로 이미 처리. duration·ease 하드코딩은 [[feedback_no_hardcoded_values]] 위반.
-- **라벨에 아이콘만 넣고 텍스트 빼는 것 금지.** 접근성·스캐닝 모두 깨짐.
-
-### Fallback
-type 애매하면 `single + collapsible`. variant 애매하면 `plain`. size 애매하면 `sm` ([[feedback_default_size_sm]]). defaultValue 애매하면 비워두기(전부 닫힘).
-
-### 관련
-- [[components/collapsible]] — Accordion의 1-아이템 버전. "더 보기" 토글 하나짜리.
-- [[components/tabs]] — 섹션 수 ≤ 3 + 가로 전환이 자연스러우면 Tabs. Accordion은 세로 리스트.
-- [[components/menu-item]] — Section variant는 사이드바 섹션 접힘에 사용. 메뉴 트리의 접힘은 Accordion이 아님.
-- [[tokens/motion]] — `--duration-base` · `--ease-out`이 slide 애니메이션을 만든다.
-- [[tokens/color]] — `--fg` · `--fg-strong` · `--hover` · `--border` · `--border` hairline.
-
-### Props 시그니처
-```tsx
-<Accordion
-  type="single | multiple"              // Radix 통과. 기본은 소비자가 결정 (단일/다중)
-  collapsible={boolean}                 // single에서 열린 걸 다시 닫을 수 있는지. 기본 undefined → false
-  value={string | string[]}             // controlled
-  defaultValue={string | string[]}      // uncontrolled 초기값
-  onValueChange={(v) => void}
-  size="sm | md"                        // default: sm — Trigger 높이 · 폰트 크기
-  variant="bare | plain | card"         // default: plain
->
-  <Accordion.Item value="unique-id" disabled={boolean}>
-    <Accordion.Trigger
-      leadingIcon="gear"                // IconName — 간결 사용
-      leadingActions={AccordionAction[]}// leadingIcon보다 우선
-      trailingActions={AccordionAction[]}
-    >
-      섹션 라벨
-    </Accordion.Trigger>
-    <Accordion.Content>
-      {/* 자유 콘텐츠 */}
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```
-
-### 상태 매트릭스
-| 상태 | 시각 |
-|---|---|
-| closed | 라벨 `--fg`, caret 아래, 본문 숨김 |
-| open | 라벨 `--fg-strong`, caret 180도 회전, 본문 slide-down |
-| hover (closed) | Trigger 배경 `--hover` + 라벨 `--fg-strong` |
-| hover (open) | 배경 변화 없음 — 상태 signal 유지 ([[feedback_hover_over_active]]) |
-| focus-visible | `--focus-ring` outline |
-| disabled | `--fg-disabled`, cursor not-allowed, 클릭·키보드 모두 꺼짐 |
-
-### Size 가이드
-| size | 언제 |
-|---|---|
-| `sm` | **기본.** 설정 패널·FAQ·관리 UI 밀도 높은 자리 |
-| `md` | 콘텐츠 사이트의 섹션 리스트·랜딩 FAQ — 라벨이 조금 더 커야 할 때 |
-
-### 조합 예시
-```tsx
-// 설정 패널 — plain + leading 아이콘 세트
-<Accordion type="single" collapsible defaultValue="general">
-  <Accordion.Item value="general">
-    <Accordion.Trigger leadingIcon="gear">일반</Accordion.Trigger>
-    <Accordion.Content>
-      <Input label="프로필 이름" />
-      <Switch label="자동 저장" />
-    </Accordion.Content>
-  </Accordion.Item>
-
-  <Accordion.Item value="notifications">
-    <Accordion.Trigger
-      leadingIcon="bell"
-      trailingActions={[<Badge key="c" size="sm">3</Badge>]}
-    >
-      알림
-    </Accordion.Trigger>
-    <Accordion.Content>...</Accordion.Content>
-  </Accordion.Item>
-
-  <Accordion.Item value="billing" disabled>
-    <Accordion.Trigger leadingIcon="info">결제 (준비 중)</Accordion.Trigger>
-    <Accordion.Content>...</Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-
-// FAQ — multiple + card variant (여러 질문 동시 열람 OK)
-<Accordion type="multiple" variant="card">
-  <Accordion.Item value="q1">
-    <Accordion.Trigger>CTDS는 어떻게 설치하나요?</Accordion.Trigger>
-    <Accordion.Content>npm으로 설치 후 ctds init 실행...</Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="q2">
-    <Accordion.Trigger>테마는 어떻게 바꾸나요?</Accordion.Trigger>
-    <Accordion.Content>...</Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-
-// Controlled — 외부 상태에 묶기
-const [open, setOpen] = useState<string>("step-1");
-<Accordion type="single" value={open} onValueChange={setOpen}>
-  <Accordion.Item value="step-1">
-    <Accordion.Trigger trailingActions={[<span key="s">1/4</span>]}>
-      기본 정보
-    </Accordion.Trigger>
-    <Accordion.Content>...</Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```

package/assets/prompts/components/command-palette.md

@@ -1,148 +0,0 @@
-# CommandPalette
-
-### 원칙
-⌘K로 열리는 **전역 명령·검색 창**. 페이지 이동과 자주 쓰는 액션을 키보드만으로 끝내는 자리. 사이드바·메뉴·설정을 뒤지지 않고 "이름으로 바로 간다". VSCode·Linear·Notion·Figma가 공유하는 관용. CTDS는 쉘(Radix Dialog)·검색/필터/네비(cmdk)·시각(MenuItem)을 **얇게 묶은 어댑터**. 상호작용·접근성·fuzzy 매칭은 라이브러리에 맡기고, CTDS는 스킨과 API 다듬기에 집중한다. [[components/context-menu]]·[[components/dropdown-menu]]와 같은 메뉴 패밀리 — 아이템 시각 규칙은 [[components/menu-item]] 하나로 수렴.
-
-### Do
-- **데이터·관리 UI에선 거의 필수로 넣는다.** 페이지 수가 10개 넘고 액션이 반복될수록 ⌘K 하나로 사용자 숙련도의 천장이 올라간다. 콘텐츠 사이트에선 선택적.
-- **두 종류를 섞는다 — 페이지 이동 + 액션.** 그룹 heading으로 명시 분리하면 사용자는 "어디로 갈까"와 "뭘 할까"를 같은 입구에서 결정한다.
-- **라벨은 동사·명사 짧게.** 리스트 폭이 넓긴 하지만 한 줄에 자연스레 읽히는 길이로. "선택한 항목을 휴지통으로 이동" 같은 문장형 금지 — 동사 하나로 압축.
-- **아이콘은 의미가 명확할 때만**. [[components/context-menu]]와 같은 규칙 — 억지 아이콘보다 라벨만 두는 게 낫다. 아이콘 이름은 [[web/components/Icon/Icon.tsx]] 세트에서만.
-- **단축키는 실제 심볼로 표시.** `⌘N` · `⇧⌘P` · `⌫`. uppercase 금지 — [[feedback_no_uppercase]].
-- **선택 후 자동 닫힘.** `onSelect` 안에서 라우팅/액션을 실행한 다음 `onOpenChange(false)`를 명시적으로 호출. cmdk는 자동으로 닫지 않는다.
-- **열기는 Hook으로 위임.** `useCommandPaletteHotkey(() => setOpen((v) => !v))` 한 줄이면 ⌘K/Ctrl+K가 어디서든 토글된다. 입력 중에도 발화 — 검색은 어디서나 열려야.
-- **Empty state는 꼭 넣는다.** 결과 0일 때 그냥 사라지면 사용자는 "뭐가 잘못됐나" 혼란. 짧은 한 줄로 "결과 없음" 명시, 필요하면 "다른 검색어" 유도.
-- **최근 사용·즐겨찾기는 상단 그룹**. 입력이 비었을 때만 노출. 입력이 생기면 그 그룹은 숨기거나 가중치 낮게.
-- **그룹은 3~5개 이하로.** 더 많으면 스캐닝이 무너진다. "페이지 / 액션 / 설정" 정도가 상한.
-
-### Don't
-- **핵심 플로우를 ⌘K 뒤에만 두지 말 것.** 신규 가입·결제 같은 CTA는 눈에 보이는 자리에. 팔레트는 **알고 있는 사용자용 지름길**이지 발견 입구가 아니다.
-- 아이템에 큰 썸네일·멀티라인 설명 금지. 리스트 밀도가 핵심 — 설명이 필요하면 `description` prop 한 줄까지. 그보다 길면 결과 페이지로.
-- 트리거 버튼을 "Open Palette"라고 라벨 붙이지 말 것. 사용자는 그 용어를 모른다. **「검색…」 + ⌘K 힌트**가 관용.
-- 열림 상태로 영구 고정 금지 (`defaultOpen` 패턴 등). 팔레트는 **임시 입구** — 상주하는 UI는 사이드바·툴바.
-- Modal과 혼용 금지. 결정·입력 다이얼로그는 [[components/modal]], 전역 명령 검색은 Palette. 서로 포커스 레벨이 다르다.
-- 색·radius·shadow 하드코딩 금지 — [[feedback_no_hardcoded_values]]. 쉘 시각은 CommandPalette CSS가 토큰 경유로 이미 처리.
-
-### Fallback
-size 애매하면 `md`. 그룹 분류 애매하면 "액션" 하나로. 트리거 UI 애매하면 상단 툴바의 **"검색… ⌘K" 버튼** — Button `variant="outline"` + `leftIcon={<Icon name="search" />}` + `rightIcon={<Shortcut>⌘K</Shortcut>}`.
-
-### 관련
-- [[components/menu-item]] — 아이템 시각·슬롯·active 규칙의 원본. CommandPalette.Item은 이 위에 cmdk `data-selected`를 매핑.
-- [[components/modal]] — 쉘 상호작용 비교군. Modal은 바깥 클릭 안 닫힘·중앙 배치, Palette는 바깥 클릭 닫힘·상단 배치.
-- [[components/dropdown-menu]] · [[components/context-menu]] — 같은 메뉴 패밀리. 트리거만 다름(클릭 vs 우클릭 vs 전역 단축키).
-- [[components/shortcut]] — ⌘K 힌트는 Shortcut 컴포넌트로.
-- [[components/input]] — Palette의 Input은 전용 스타일. 일반 폼 Input과 섞지 말 것.
-- [[tokens/color]] · [[tokens/shadow]] — `--bg` · `--border` · `--shadow-xl` · `--scrim`이 쉘 시각을 만든다.
-
-### Props 시그니처
-```tsx
-<CommandPalette
-  open={boolean}
-  onOpenChange={(open: boolean) => void}
-  size="sm | md"                            // default: md — 아이템 기본 size
-  label="명령 검색"                           // 스크린리더용. 다이얼로그 접근성 네임
->
-  <CommandPalette.Input
-    placeholder="검색..."
-    leadingIcon="search | IconName | null"  // default: search
-  />
-  <CommandPalette.List>
-    <CommandPalette.Empty>결과가 없어요</CommandPalette.Empty>
-
-    <CommandPalette.Group heading="페이지">
-      <CommandPalette.Item
-        leadingIcon="house"                 // 또는 leadingActions={[...]}
-        shortcut="⌘,"
-        description="보조 설명 한 줄"
-        disabled={boolean}
-        onSelect={() => void}               // 자동 닫힘 ❌ — 안에서 onOpenChange(false) 명시
-      >
-        대시보드
-      </CommandPalette.Item>
-    </CommandPalette.Group>
-
-    <CommandPalette.Separator />
-
-    <CommandPalette.Group heading="액션">...</CommandPalette.Group>
-  </CommandPalette.List>
-</CommandPalette>
-
-// 전역 단축키 Hook
-useCommandPaletteHotkey(
-  () => setOpen((v) => !v),
-  { key: "k", mod: true, shift: false, alt: false, disabled: false },
-);
-```
-
-### 상태 매트릭스
-| 상태 | 시각 |
-|---|---|
-| 열림 · 닫힘 | 쉘은 Radix Dialog 애니메이션(scale 0.98→1 + fade). 상단 20vh 고정 배치. |
-| 아이템 highlight (↑↓·마우스) | cmdk `[data-selected="true"]` → MenuItem fill 스타일(`--hover` 배경 + `fg-strong`) 자동 매핑 |
-| 입력 필터링 | cmdk fuzzy 매칭. 매치되는 아이템만 표시, 그룹 heading은 매치된 아이템이 있을 때만 노출 |
-| Empty | 매치 0일 때 `Empty` children 렌더 — 다른 아이템 전부 숨김 |
-| disabled 아이템 | `fg-disabled` + 선택/엔터 모두 꺼짐 (cmdk + MenuItem 공통 처리) |
-
-### Size 가이드
-| size | 언제 |
-|---|---|
-| `sm` | 밀도 높은 관리 UI · 결과가 많이 나와야 할 때 |
-| `md` | **기본.** 일반 ⌘K |
-
-### 조합 예시
-```tsx
-// 기본 — 페이지 + 액션 두 그룹
-const [open, setOpen] = useState(false);
-const router = useRouter();
-useCommandPaletteHotkey(() => setOpen((v) => !v));
-
-function go(path: string) {
-  router.push(path);
-  setOpen(false);
-}
-
-<CommandPalette open={open} onOpenChange={setOpen}>
-  <CommandPalette.Input placeholder="검색 또는 명령어 입력" />
-  <CommandPalette.List>
-    <CommandPalette.Empty>결과가 없어요</CommandPalette.Empty>
-    <CommandPalette.Group heading="페이지">
-      <CommandPalette.Item leadingIcon="house" onSelect={() => go("/dashboard")}>
-        대시보드
-      </CommandPalette.Item>
-      <CommandPalette.Item leadingIcon="gear" shortcut="⌘," onSelect={() => go("/settings")}>
-        설정
-      </CommandPalette.Item>
-    </CommandPalette.Group>
-    <CommandPalette.Separator />
-    <CommandPalette.Group heading="액션">
-      <CommandPalette.Item leadingIcon="plus" shortcut="⌘N" onSelect={newDoc}>
-        새 문서
-      </CommandPalette.Item>
-    </CommandPalette.Group>
-  </CommandPalette.List>
-</CommandPalette>
-
-// 상단 툴바 트리거 — 「검색… ⌘K」 관용
-<Button
-  variant="outline" size="sm"
-  leftIcon={<Icon name="search" />}
-  rightIcon={<Shortcut>⌘K</Shortcut>}
-  onClick={() => setOpen(true)}
->
-  검색
-</Button>
-
-// 최근 사용 — 입력이 비었을 때만
-<CommandPalette.List>
-  {query === "" && (
-    <CommandPalette.Group heading="최근">
-      {recents.map((r) => (
-        <CommandPalette.Item key={r.id} leadingIcon="clock" onSelect={() => go(r.href)}>
-          {r.label}
-        </CommandPalette.Item>
-      ))}
-    </CommandPalette.Group>
-  )}
-  <CommandPalette.Group heading="페이지">...</CommandPalette.Group>
-</CommandPalette.List>
-```