@conscience-technology/ctds 0.3.1 → 0.3.3

package/assets/prompts/components/breadcrumb.md

@@ -11,6 +11,7 @@
 - **URL 계층이 그대로 라벨** — 사이트맵의 실제 위치를 그대로 반영. 계층에 없는 임의 카테고리를 만들어 붙이지 않는다.
 - **모바일에서는 축약** — 첫 항목 + `Breadcrumb.Ellipsis` + 마지막 두 항목. 6개 이상이면 축약이 필수.
 - **Next.js `<Link>` 등 라우터**는 `<Breadcrumb.Link asChild>`로 감싼다. 스타일 유지한 채 SPA 네비게이션 위임.
+- **형제 전환이 필요한 segment**는 `Breadcrumb.Menu`로. ▾ caret이 붙은 트리거를 눌러 같은 레벨의 다른 페이지(프로젝트·워크스페이스·브랜치 등)로 바로 이동. 현재 페이지 자리에 쓸 때는 `active` 필수 — `aria-current="page"`와 `--fg-strong` 톤을 자동으로 맞춘다.
 - **접근성**: 루트가 자동으로 `<nav aria-label="Breadcrumb">` + `<ol>`, 마지막 항목에 `aria-current="page"`를 붙인다. separator는 `aria-hidden`.
 
 ### Don't
@@ -20,6 +21,7 @@
 - **활성 색을 `--primary`로 덮지 않는다** — 활성은 `--fg-strong`(무채). 브랜드 컬러를 여기 쓰면 CTA와 위계가 충돌.
 - **아이콘 남발 금지** — 첫 항목 외에 아이콘 붙이면 라벨 스캔이 무너진다.
 - **draggable/sortable 만들지 않는다** — 계층은 URL이 정한다. UI에서 조작할 대상이 아님.
+- **`Breadcrumb.Menu`를 탭/필터로 쓰지 않는다** — Menu는 "같은 레벨의 다른 페이지로 URL 이동" 전용. 같은 페이지 안에서 뷰만 바꾸는 건 [[components/tabs]].
 
 ### Fallback
 - 라우터 결정 애매하면 기본 `<a href>` 렌더. 프레임워크 붙일 때 `asChild`로 교체.
@@ -41,10 +43,15 @@
   separator={<Icon name="caret-right" />}   // default: caret-right icon
 >
   <Breadcrumb.Link href="/" leftIcon={<Icon name="house" />}>Home</Breadcrumb.Link>
-  <Breadcrumb.Link asChild>
-    <Link href="/components">Components</Link>
-  </Breadcrumb.Link>
-  <Breadcrumb.Ellipsis />
+  <Breadcrumb.Menu
+    items={[
+      { label: "Alpha", href: "/p/alpha", active: true },
+      { label: "Beta",  href: "/p/beta" },
+    ]}
+  >
+    Alpha
+  </Breadcrumb.Menu>
+  <Breadcrumb.Ellipsis items={[...]} />
   <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
 </Breadcrumb>
 ```
@@ -55,6 +62,7 @@
 | `Breadcrumb.Link` | 상위 계층 링크. Button xs · ghost 톤. hover 시 `--hover` 표면. | 마지막 항목엔 쓰지 않음. |
 | `Breadcrumb.Current` | 현재 페이지. `--fg-strong` 텍스트, hover 반응 없음. | `href`·`onClick` 붙이지 않음. |
 | `Breadcrumb.Ellipsis` | 축약 트리거. 항상 클릭 가능. [[components/select]]와 동일한 팝오버 표면으로 숨긴 항목 리스트를 연다. | `items`에 5개 이상 넣지 않는다 — 그러면 축약이 아니라 실질적 서브메뉴가 됨. 정적(클릭 불가) 마커는 지원하지 않는다. |
+| `Breadcrumb.Menu` | 형제 전환 트리거. ▾ caret이 붙은 segment를 눌러 같은 레벨 페이지로 이동. `active=true`로 현재 페이지 자리에도 쓸 수 있다 (aria-current + fg-strong 자동). | 아이콘 단독 모드 지원 안 함 — 트리거 라벨 필수. 탭 전환용으로 쓰지 않는다. |
 
 ### 조합 예시
 ```tsx
@@ -74,4 +82,36 @@
   </Breadcrumb.Link>
   <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
 </Breadcrumb>
+
+// 프로젝트 스위처 — Menu로 형제 전환
+<Breadcrumb aria-label="프로젝트 경로">
+  <Breadcrumb.Link asChild leftIcon={<Icon name="user" />}>
+    <Link href="/">Workspace</Link>
+  </Breadcrumb.Link>
+  <Breadcrumb.Menu
+    items={[
+      { label: "Alpha", href: "/p/alpha", active: true },
+      { label: "Beta",  href: "/p/beta" },
+      { label: "Gamma", href: "/p/gamma" },
+    ]}
+  >
+    Alpha
+  </Breadcrumb.Menu>
+  <Breadcrumb.Current>Settings</Breadcrumb.Current>
+</Breadcrumb>
+
+// 현재 페이지 자체가 메뉴 — active=true로 aria-current="page" 유지
+<Breadcrumb aria-label="브랜치 경로">
+  <Breadcrumb.Link href="/">Repo</Breadcrumb.Link>
+  <Breadcrumb.Menu
+    active
+    items={[
+      { label: "main",    onSelect: () => switchBranch("main"), active: true },
+      { label: "develop", onSelect: () => switchBranch("develop") },
+      { label: "staging", onSelect: () => switchBranch("staging") },
+    ]}
+  >
+    main
+  </Breadcrumb.Menu>
+</Breadcrumb>
 ```

package/assets/prompts/components/sidebar.md

@@ -1,12 +1,21 @@
+<!-- lint-sidebar-legacy-tokens: ignore-file  이 문서는 폐기 토큰 사용 금지를 설명한다. -->
+
 # Sidebar
 
 ### 원칙
 좌측 세로 nav. **라우팅 전용** — Tabs/필터는 쓸 곳이 아님. Header(고정) + Body(스크롤) + Footer(고정) 3영역 세로 쉘에, Brand + Section + Item + Separator + Profile을 compound로 조합. `collapsed`로 icon-only 축소. Item은 [[components/menu-item]]을 그대로 어댑트 — 시각·상태 규칙 공유.
 
-### 좌우 축 단일화 (중요)
-Sidebar 내부 **모든 좌우 padding은 단일 축 `--sidebar-pad-x`** (= expanded `--space-4`, collapsed `--space-2`). Header·Section·Separator·Footer·Profile이 각자 복제. Body에는 padding-inline을 **절대** 걸지 않는다 — 스크롤바가 가장자리에 안 붙는다.
+### 좌우/상하 축 공급 (중요)
+**벤더 Sidebar는 좌우/상하 padding을 공급하지 않는다**. `.root/.header/.body/.footer` 어디에도 `padding-inline`·`padding-block`을 깔지 않음. preset(`.brand/.profile/.section`)도 자체 padding 없음. `--sidebar-pad-x`·`--sidebar-pad-y` 토큰은 폐기.
+
+소비처가 공급 책임. 세 가지 패턴:
+- **Slot 전역**: `:global([data-sidebar-slot="brand|section|profile"])` 셀렉터로 preset에 일괄 공급. 벤더가 preset마다 `data-sidebar-slot` 속성을 자동 부여함. theme-demo(expressive/spare/pure)가 이 패턴.
+- **영역별 콘텐츠 래퍼**: Sidebar.Header 자식 또는 Body 안 inner div에 className 걸고 거기에 padding. docs 사이드바·workspace 템플릿.
+- **Full-bleed**: minimal/aurora처럼 특정 요소(brand/profile)만 수동 들여쓰기, 나머지는 가장자리까지 flush.
 
-사이드바 안에 추가로 끼워 넣는 블록(검색 input, Primary 액션 버튼, 안내 Callout 등)도 반드시 좌우 padding을 `var(--sidebar-pad-x)`로 복제. 임의로 `--space-3` 등을 쓰면 Header·Section과 축이 어긋나 "뭔가 안 맞음" 느낌의 1순위 원인이 된다.
+**금지**:
+- Sidebar 큰 컨테이너(root/Header/Body/Footer wrapper)에 `padding-inline` 금지. 벤더가 공급 안 하므로 중첩 함정은 없지만, "큰 컨테이너에 padding" 자체가 스크롤 트랙·안쪽 요소 정렬을 틀어뜨리는 패턴.
+- Body에 직접 `padding-inline` 금지 — 스크롤바가 가장자리와 떨어진다. Body 안쪽에 inner div 두고 거기에.
 
 사이드바 안쪽 세로 간격은 `--space-2`(섹션 사이·블록 사이) / `--space-1`(섹션 헤더 아래) / `--space-0_5`(아이템 사이) 세 리듬만. 다른 값 금지.
 
@@ -54,8 +63,8 @@ Header는 **가로 행**이기 때문에 Section을 넣으면 nav 전체가 가
 - 페이지 안 뷰 전환에 쓰지 않는다 — 그건 [[components/tabs]].
 - Item 안에 variant로 다른 톤을 쓰지 않는다. active 외의 강조 금지.
 - Sidebar 자체에 padding/width를 CSS로 덮지 않는다. `--sidebar-w*` 토큰 경유.
-- `.root`에 padding을 꽂지 않는다 — Body가 스크롤 컨테이너라 스크롤바가 안쪽으로 밀려 가장자리에 안 붙는다. 좌우 여백은 Header/Section/Footer가 각자 담당([[project_scroll_rule]]).
-- **Sidebar 좌우 축은 `--sidebar-pad-x` 단일 토큰만** — Header `--space-4`, body 안 임의 블록 `--space-3`, Section `--space-5`처럼 섞어 쓰면 안쪽 정렬이 전부 어긋난다. 소비처가 Body 안에 삽입하는 블록도 `padding-inline: var(--sidebar-pad-x)` 복제.
+- `.root`에 padding을 꽂지 않는다 — Body가 스크롤 컨테이너라 스크롤바가 안쪽으로 밀려 가장자리에 안 붙는다 ([[project_scroll_rule]]).
+- **Sidebar 큰 컨테이너(root/Header/Body/Footer wrapper)에 좌우 패딩 금지**. 좌우/상하 축은 preset slot(`data-sidebar-slot`) 또는 안쪽 콘텐츠 래퍼에 공급. `--sidebar-pad-x`·`--sidebar-pad-y` 토큰 사용 금지(벤더에서 폐기됨).
 - **Sidebar 내부 Input은 `line` 금지** — `outline`(기본) 또는 `filled`만. 사이드바 안은 ghost 리듬이라 밑줄 variant가 녹아 보임.
 - Brand symbol·wordmark 크기 override 금지. `--sidebar-brand-symbol-max`·`--sidebar-brand-wordmark-max` 상한 안에서만.
 - **Body 안 섹션 리스트가 길어서 스크롤이 필요할 때**, 섹션들에 `flex-shrink`를 그대로 두지 않는다. Body는 `display:flex column`이라 자식(Section)이 기본 `flex-shrink:1`로 수축되어 header가 몇 px로 뭉개지고 아이템이 사라져 보인다. 해결: Body 직속 자식에 `flex: 0 0 auto`를 걸어 각 섹션이 자기 콘텐츠 전체 높이를 유지하게 하고, 스크롤은 Body의 `overflow-y:auto`가 담당하게 한다.

package/assets/skills/ctds/SKILL.md

@@ -9,9 +9,7 @@ Layer 1(shadcn 방식 컴포넌트 코드) + Layer 2(AI 프롬프트 컨텍스
 
 ## 발동 시 — 온보딩 페이지 자동 오픈
 
-1. `curl -sf http://localhost:3000 -o /dev/null && echo ok || echo down`
-2. ok → `open http://localhost:3000/onboarding`
-3. down → "dev 서버 꺼져있어요. `cd web && pnpm dev` 후 다시" 안내
+`ctds-onboarding` 스킬로 위임 (dev 서버 체크 + `open http://localhost:3000/onboarding`).
 
 ## 절대 규칙 (항상 적용)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
   "sideEffects": [

package/assets/components/Accordion/Accordion.module.css

@@ -1,247 +0,0 @@
-/* Accordion ─────────────────────────────────────────────────────
-   여러 섹션 접힘/펴짐. Radix Accordion 위의 시각 레이어.
-   두 variant:
-   - plain: 테두리 없음, 아이템 사이 hairline만. 설정·FAQ 흐름.
-   - card: 각 아이템이 독립 블록(테두리 + radius). 콘텐츠 섹션 리스트.
-   아이템 레이아웃(leading·라벨·trailing·caret)은 trigger 내부에서 담당. */
-
-/* Root ─────────────────────────────────────────────────── */
-.root {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  color: var(--fg);
-  font-family: var(--font-sans);
-  --accordion-trigger-h: calc(var(--space-2) * 5); /* sm 기본 40 */
-  /* leading 아이콘 크기 — MenuItem과 동일 톤(sm 14 / md 16).
-     caret은 한 스텝 더 작게 — 상태 보조 신호라 라벨·아이콘보다 작아야 리듬이 잡힘. */
-  --accordion-icon-size: calc(var(--space-1) * 3.5); /* 14 */
-  --accordion-caret-size: var(--space-3); /* 12 */
-}
-
-.root[data-size="md"] {
-  --accordion-trigger-h: calc(var(--space-2) * 6); /* md 48 */
-  --accordion-icon-size: var(--space-4); /* 16 */
-  --accordion-caret-size: calc(var(--space-1) * 3.5); /* 14 */
-}
-
-.root[data-size="lg"] {
-  --accordion-trigger-h: calc(var(--space-2) * 7); /* lg 56 */
-  --accordion-icon-size: calc(var(--space-1) * 4.5); /* 18 */
-  --accordion-caret-size: var(--space-4); /* 16 */
-}
-
-.root[data-variant="card"] {
-  gap: var(--space-2);
-}
-
-/* Item ─────────────────────────────────────────────────── */
-/* bare: 선·여백 전부 없음. 본문 흐름에 녹아듦.
-   plain: 아이템 사이 hairline. 첫 아이템은 상단 선 없음.
-   card: 각 아이템이 테두리 + radius. 사이 gap은 Root에서 담당. */
-.item {
-  display: flex;
-  flex-direction: column;
-}
-
-.root[data-variant="plain"] .item + .item {
-  border-top: var(--hairline) solid var(--border);
-}
-
-.root[data-variant="card"] .item {
-  border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg);
-  overflow: hidden;
-}
-
-/* bare — Trigger 좌우 padding 제거, content도 좌우 0.
-   세로 리듬은 그대로 유지(상/하 padding은 contentInner가 담당). */
-.root[data-variant="bare"] .trigger {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.root[data-variant="bare"] .contentInner {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* bare에서는 hover 배경도 꺼야 "선 없는" 톤이 유지됨. 라벨 색만 상태 신호. */
-.root[data-variant="bare"] .trigger:hover:not([data-state="open"]):not([data-disabled]) {
-  background: transparent;
-}
-
-/* Header + Trigger ─────────────────────────────────────── */
-/* Radix의 Header는 <h3>로 렌더됨. 폰트/weight은 Trigger가 결정 — Header는 wrapper. */
-.header {
-  margin: 0;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-.trigger {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  min-height: var(--accordion-trigger-h);
-  padding: 0 var(--space-3);
-  border: 0;
-  background: transparent;
-  color: var(--fg);
-  font-family: inherit;
-  font-size: var(--text-sm);
-  line-height: var(--lh-sm);
-  font-weight: var(--font-weight-medium);
-  text-align: left;
-  cursor: pointer;
-  outline: none;
-  transition: var(--transition-colors);
-}
-
-.root[data-size="md"] .trigger {
-  font-size: var(--text-base);
-  line-height: var(--lh-base);
-}
-
-/* hover: closed일 때만 배경 변화. open에선 상태 signal(fg-strong)만 유지. */
-.trigger:hover:not([data-state="open"]):not([data-disabled]) {
-  background: var(--hover);
-  color: var(--fg-strong);
-}
-
-.trigger[data-state="open"] {
-  color: var(--fg-strong);
-}
-
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--ring-shadow);
-  border-radius: var(--radius-sm);
-}
-
-.trigger[data-disabled] {
-  color: var(--fg-disabled);
-  cursor: not-allowed;
-}
-
-/* Leading / Label / Trailing ──────────────────────────── */
-.leading {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  color: var(--fg-muted);
-  flex-shrink: 0;
-  /* MenuItem과 동일 — 슬롯에 들어온 svg/img는 정사각 아이콘 크기로 수렴. */
-  font-size: var(--accordion-icon-size);
-}
-
-.leading > *,
-.leading svg,
-.leading img {
-  width: var(--accordion-icon-size);
-  height: var(--accordion-icon-size);
-}
-
-.trigger[data-state="open"] .leading {
-  color: var(--fg-strong);
-}
-
-.leadingItem {
-  display: inline-flex;
-  align-items: center;
-}
-
-.label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.trailing {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  color: var(--fg-muted);
-  flex-shrink: 0;
-}
-
-.trailingItem {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Caret — open이면 180도 회전.
-   라벨·leading 아이콘보다 한 스텝 작게. 상태 보조 신호라 작아야 리듬이 잡힘. */
-.caret {
-  display: inline-flex;
-  align-items: center;
-  color: var(--fg-muted);
-  flex-shrink: 0;
-  font-size: var(--accordion-caret-size);
-  transition: transform var(--duration-base) var(--ease-out);
-}
-
-.caret svg {
-  width: var(--accordion-caret-size);
-  height: var(--accordion-caret-size);
-}
-
-.trigger[data-state="open"] .caret {
-  transform: rotate(180deg);
-  color: var(--fg-strong);
-}
-
-/* Content ──────────────────────────────────────────────── */
-/* Radix가 측정한 --radix-accordion-content-height로 slide 애니메이션.
-   contentInner에 padding을 깔아 열림 애니메이션이 깔끔하게 흐르도록. */
-.content {
-  overflow: hidden;
-  font-size: var(--text-sm);
-  line-height: var(--lh-sm);
-  color: var(--fg);
-}
-
-.content[data-state="open"] {
-  animation: accordion-slide-down var(--duration-base) var(--ease-out);
-}
-
-.content[data-state="closed"] {
-  animation: accordion-slide-up var(--duration-fast) var(--ease-in);
-}
-
-.contentInner {
-  /* 상단은 Trigger와 리듬 유지(겹치지 않게 살짝), 하단은 다음 Trigger와 거리. */
-  padding: var(--space-1) var(--space-3) var(--space-4);
-  color: var(--fg);
-}
-
-.root[data-size="md"] .contentInner {
-  font-size: var(--text-base);
-  line-height: var(--lh-base);
-}
-
-/* Animations ───────────────────────────────────────────── */
-@keyframes accordion-slide-down {
-  from { height: 0; opacity: 0; }
-  to   { height: var(--radix-accordion-content-height); opacity: 1; }
-}
-
-@keyframes accordion-slide-up {
-  from { height: var(--radix-accordion-content-height); opacity: 1; }
-  to   { height: 0; opacity: 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .content,
-  .content[data-state="open"],
-  .content[data-state="closed"] {
-    animation: none;
-  }
-  .caret {
-    transition: none;
-  }
-}

package/assets/components/Accordion/Accordion.tsx

@@ -1,207 +0,0 @@
-"use client";
-
-/**
- * Accordion ─ 여러 섹션을 접었다 폈다 하는 구조 컴포넌트.
- *
- * 스택: Radix `@radix-ui/react-accordion` 어댑터.
- * - 열림/닫힘 상태·키보드 네비(↑↓ Home End)·ARIA(aria-expanded/controls)·
- *   콘텐츠 높이 측정은 전부 Radix가 처리.
- * - 시각(Trigger 레이아웃·caret·divider·card variant)만 CTDS가 담당.
- *
- * variant
- * - plain (기본): 테두리 없음, 아이템 사이 hairline만. 설정 그룹·FAQ용.
- * - card: 각 아이템이 테두리 + radius로 독립 블록. 콘텐츠 사이트의 섹션 리스트용.
- *
- * 소비 표면
- *   <Accordion type="single" collapsible defaultValue="general">
- *     <Accordion.Item value="general">
- *       <Accordion.Trigger leadingIcon="gear">일반</Accordion.Trigger>
- *       <Accordion.Content>...</Accordion.Content>
- *     </Accordion.Item>
- *   </Accordion>
- */
-
-import * as RadixAccordion from "@radix-ui/react-accordion";
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  type ComponentPropsWithoutRef,
-  type ReactNode,
-} from "react";
-
-import { Icon, type IconName } from "../Icon";
-import styles from "./Accordion.module.css";
-
-export type AccordionSize = "sm" | "md" | "lg";
-/**
- * - bare: 선·좌우 여백 전부 없음. 본문 흐름에 가장 투명하게 녹음(툴바·설명 블록 내부).
- * - plain: 테두리 없음, 아이템 사이 hairline, Trigger 좌우 padding 있음. 설정·FAQ 흐름.
- * - card: 각 아이템이 테두리 + radius로 독립 블록. 콘텐츠 섹션 리스트.
- */
-export type AccordionVariant = "bare" | "plain" | "card";
-
-export type AccordionAction =
-  | ReactNode
-  | { node: ReactNode; key?: string };
-
-/* Size·variant context — Trigger가 Root 설정 상속. */
-type AccordionContextValue = {
-  size: AccordionSize;
-  variant: AccordionVariant;
-};
-const AccordionContext = createContext<AccordionContextValue>({
-  size: "sm",
-  variant: "plain",
-});
-
-/* Root ─────────────────────────────────────────────────────── */
-
-type SingleRootProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root> & {
-  type: "single";
-};
-type MultipleRootProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root> & {
-  type: "multiple";
-};
-export type AccordionProps = (SingleRootProps | MultipleRootProps) & {
-  size?: AccordionSize;
-  variant?: AccordionVariant;
-};
-
-const Root = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
-  { className, size = "sm", variant = "plain", children, ...rest },
-  ref,
-) {
-  return (
-    <AccordionContext.Provider value={{ size, variant }}>
-      <RadixAccordion.Root
-        ref={ref}
-        data-size={size}
-        data-variant={variant}
-        className={[styles.root, className ?? ""].filter(Boolean).join(" ")}
-        {...(rest as ComponentPropsWithoutRef<typeof RadixAccordion.Root>)}
-      >
-        {children}
-      </RadixAccordion.Root>
-    </AccordionContext.Provider>
-  );
-});
-
-/* Item ─────────────────────────────────────────────────────── */
-
-const Item = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixAccordion.Item>>(
-  function AccordionItem({ className, children, ...rest }, ref) {
-    return (
-      <RadixAccordion.Item
-        ref={ref}
-        className={[styles.item, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      >
-        {children}
-      </RadixAccordion.Item>
-    );
-  },
-);
-
-/* Trigger ──────────────────────────────────────────────────── */
-
-export interface TriggerProps
-  extends Omit<ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, "children"> {
-  /** 좌측 아이콘 이름. leading 슬롯 간결 사용. */
-  leadingIcon?: IconName;
-  /** 커스텀 좌측 노드 배열. leadingIcon보다 우선. */
-  leadingActions?: AccordionAction[];
-  /** 우측 메타(배지·숫자 등). caret은 자동으로 가장 끝. */
-  trailingActions?: AccordionAction[];
-  children?: ReactNode;
-}
-
-const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function AccordionTrigger(
-  { className, leadingIcon, leadingActions, trailingActions, children, ...rest },
-  ref,
-) {
-  const leading =
-    leadingActions ?? (leadingIcon ? [<Icon key="icon" name={leadingIcon} />] : undefined);
-  return (
-    <RadixAccordion.Header className={styles.header}>
-      <RadixAccordion.Trigger
-        ref={ref}
-        className={[styles.trigger, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      >
-        {leading && leading.length > 0 && (
-          <span className={styles.leading} data-slot="leading" aria-hidden>
-            {leading.map((a, i) => {
-              const key =
-                typeof a === "object" && a !== null && "key" in a && a.key
-                  ? a.key
-                  : String(i);
-              const node = typeof a === "object" && a !== null && "node" in a ? a.node : a;
-              return (
-                <span key={key} className={styles.leadingItem}>
-                  {node as ReactNode}
-                </span>
-              );
-            })}
-          </span>
-        )}
-        <span className={styles.label}>{children}</span>
-        {trailingActions && trailingActions.length > 0 && (
-          <span className={styles.trailing} data-slot="trailing">
-            {trailingActions.map((a, i) => {
-              const key =
-                typeof a === "object" && a !== null && "key" in a && a.key
-                  ? a.key
-                  : String(i);
-              const node = typeof a === "object" && a !== null && "node" in a ? a.node : a;
-              return (
-                <span key={key} className={styles.trailingItem}>
-                  {node as ReactNode}
-                </span>
-              );
-            })}
-          </span>
-        )}
-        <span className={styles.caret} aria-hidden>
-          <Icon name="caret-down" />
-        </span>
-      </RadixAccordion.Trigger>
-    </RadixAccordion.Header>
-  );
-});
-
-/* Content ──────────────────────────────────────────────────── */
-
-const Content = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixAccordion.Content>>(
-  function AccordionContent({ className, children, ...rest }, ref) {
-    return (
-      <RadixAccordion.Content
-        ref={ref}
-        className={[styles.content, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      >
-        <div className={styles.contentInner}>{children}</div>
-      </RadixAccordion.Content>
-    );
-  },
-);
-
-/* Hook — 내부 Trigger가 size 참조할 때 (현재는 미사용, 향후 확장용) */
-export function useAccordionContext() {
-  return useContext(AccordionContext);
-}
-
-/* Compound export ─────────────────────────────────────────── */
-
-type AccordionComponent = typeof Root & {
-  Item: typeof Item;
-  Trigger: typeof Trigger;
-  Content: typeof Content;
-};
-
-const Accordion = Root as AccordionComponent;
-Accordion.Item = Item;
-Accordion.Trigger = Trigger;
-Accordion.Content = Content;
-
-export { Accordion };

package/assets/components/Accordion/index.ts

@@ -1,8 +0,0 @@
-export { Accordion, useAccordionContext } from "./Accordion";
-export type {
-  AccordionProps,
-  AccordionSize,
-  AccordionVariant,
-  AccordionAction,
-  TriggerProps as AccordionTriggerProps,
-} from "./Accordion";