@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/prompts/components/table-header.md

@@ -0,0 +1,157 @@
+# TableHeader
+
+### 원칙
+데이터 그리드 상단의 columnheader 행. 시각 스타일(`line`/`plate`) × 두 기능(`resizable`/`reorderable`) 각각 on/off = 총 8조합을 하나의 컴포넌트로 담는다. 데이터 로딩·정렬 로직·행 렌더는 상위 Table이 책임지고, 이 컴포넌트는 columnheader 시각·상호작용만 담당한다.
+
+`reorderable=on`이면 각 셀이 hover 배경 + `cursor: grab`으로 반응하고, `off`면 hover 반응이 사라진다. reorder는 @dnd-kit/sortable로 처리해 키보드/터치도 지원한다.
+
+### Do
+- **variant 선택 기준**: 페이지 표면과 자연스럽게 이어지는 얇은 헤더는 `line`, 카드 안에서 위치가 명확해야 하는 헤더는 `plate`. `line`은 sticky 하단 hairline으로 흐름을 만들고, `plate`는 라운드 컨테이너로 시선을 가둔다.
+- **정렬은 셀별 opt-in**: 컬럼마다 `sortable: true`로 개별 활성화. 정렬 인디케이터는 2-state (`asc` ↔ `desc`) — 라벨 옆 caret이 방향 표시.
+- **컨트롤드 3종은 세트로**: `order`/`widths`/`sort` 중 하나라도 controlled로 넘기면 대응 `on*Change`도 반드시 함께. uncontrolled 사용도 지원(각 상태 내부 보관).
+- **width 최소 하한**: 사용자가 resize로 아무리 줄여도 48px 밑으로는 안 내려간다(컴포넌트가 강제). 컬럼 라벨이 잘리기 시작하는 지점의 안전선.
+- **checkbox 셀은 `selectable` prop**: 셀 순서 재정렬 대상에서 자동 제외되어 항상 맨 앞 고정.
+- **컬럼 매니저 버튼은 `columnManager` prop**: 우측 끝 고정 IconButton (`Icon name="columns"`). show/hide 다이얼로그 트리거용.
+- **sortable + reorderable 공존**: 라벨 클릭(sort)과 드래그(reorder)는 8px pointer 이동 threshold로 자동 분기 — 짧게 누르면 sort, 끌면 reorder.
+
+### Don't
+- 이 컴포넌트 안에서 데이터를 정렬하지 않는다. `onSortChange`만 발화하고 정렬은 상위 Table의 책임.
+- variant 시각을 `background`/`border` 직접 지정으로 커스터마이즈하지 않는다 — Palette·Mode 축 스왑이 깨진다. 색이 필요하면 축·프리셋에 정의.
+- resize handle 폭을 CSS로 좁히지 않는다 — 8px 히트 영역이 접근성 최소치.
+- 셀 안에 두 개 이상의 인터랙션 요소(라벨 정렬 + 아이콘 필터 등)를 넣지 않는다. 셀 = 하나의 columnheader.
+- `reorderable=off`에서 hover 배경을 억지로 살리지 않는다 — "이동 불가한데 반응만 있으면" 의미 없는 시각 노이즈.
+- 3-state sort(asc→desc→none)로 확장하지 않는다. 정렬 해제는 "다른 컬럼 클릭"으로 대체 — 클릭당 결과가 명확해야 함.
+
+### Fallback
+- variant 애매하면 `line`. 페이지에 자연스럽게 얹히는 기본 형태.
+- resizable/reorderable 애매하면 둘 다 `off`. 나중에 필요하면 켜는 게 안전.
+- sort 초기값 애매하면 `null` (미정렬) — 다만 이후엔 2-state로 고정.
+
+### 관련
+- [[components/checkbox]] — `selectable` 셀에서 사용
+- [[components/icon-button]] — `columnManager` 버튼
+- [[components/icon]] — sort caret / column manager icon
+- [[axes/density]] — Density=`compact`일 때 헤더 높이와 셀 padding이 자동으로 좁아짐
+- [[axes/shape]] — `plate` variant의 컨테이너 radius가 Shape 축에 반응
+- [[tokens/color]] — `--hover`(reorderable hover) / `--border`(line tick / hairline) / `--fg-subtle`→`--fg-strong`(sort icon)
+
+### Props 시그니처
+```tsx
+type TableHeaderColumn = {
+  key: string;                                   // 안정적 id (reorder/width 상태 키)
+  label: ReactNode;
+  width?: number | string;                       // px number 또는 CSS 값
+  minWidth?: number | string;
+  flex?: boolean;                                // 남은 공간 차지
+  sortable?: boolean;                            // 라벨 옆 sort caret
+  align?: "start" | "center" | "end";
+  resizable?: boolean;                           // false면 상위 resizable=true여도 이 column handle 숨김. 기본 true
+  movable?: boolean;                             // false면 상위 reorderable=true여도 이 column drag 불가. 기본 true
+  pinned?: "left" | "right";                     // 가로스크롤 시 좌/우 끝에 sticky. reorder 자동 제외
+};
+
+type TableHeaderSortState = { key: string; direction: "asc" | "desc" } | null;
+
+<TableHeader
+  variant="line | plate"                         // default: line
+  columns={TableHeaderColumn[]}
+
+  resizable={boolean}                            // 전 셀 resize handle
+  reorderable={boolean}                          // 전 셀 drag reorder + hover
+
+  selectable={boolean}                           // 맨 앞 체크박스 셀
+  selectAllChecked={boolean}
+  selectAllIndeterminate={boolean}
+  onSelectAllChange={(next: boolean) => void}
+
+  order={string[]}                               // controlled column 순서
+  onOrderChange={(next: string[]) => void}
+  widths={Record<string, number>}                // controlled column 폭
+  onWidthsChange={(next: Record<string, number>) => void}
+  sort={TableHeaderSortState}                    // controlled sort 상태
+  onSortChange={(next: TableHeaderSortState) => void}
+
+  columnManager={boolean}                        // 우측 끝 컬럼 관리 IconButton
+  onColumnManagerClick={() => void}
+/>
+```
+
+### Variant × Feature 매트릭스
+| variant | resizable | reorderable | 시각 |
+|---|---|---|---|
+| `line` | off | off | 하단 hairline만 |
+| `line` | on | off | 셀 좌측 세로 tick (눈금자) + resize handle |
+| `line` | off | on | 하단 hairline + 셀 hover 배경, cursor-grab |
+| `line` | on | on | 위 둘 조합 |
+| `plate` | off | off | 라운드 컨테이너 (bg-muted) |
+| `plate` | on | off | hover 시 셀 우측 세로선 (opacity 상승) |
+| `plate` | off | on | 셀 hover 배경, cursor-grab |
+| `plate` | on | on | 위 둘 조합 |
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | variant 기본 색·배경 |
+| cell hover (reorderable=on) | `--hover` 배경, `cursor: grab` |
+| cell dragging | `--bg-muted` 배경, `cursor: grabbing`, z 상승 |
+| resize handle hover (plate) | 우측 세로선 opacity 0 → 0.5 |
+| sort inactive | caret-up-down 아이콘, `--fg-subtle` |
+| sort asc | caret-up 아이콘, `--fg-strong` |
+| sort desc | caret-down 아이콘, `--fg-strong` |
+
+### 조합 예시
+```tsx
+// 가장 단순 — 라인 + 정렬 없는 기본 헤더
+<TableHeader
+  columns={[
+    { key: "name", label: "이름", width: 200 },
+    { key: "email", label: "이메일", flex: true, minWidth: 240 },
+    { key: "role", label: "역할", width: 120 },
+  ]}
+/>
+
+// 리서치 트레이스 뷰 — line + resize + 체크박스, 일부 컬럼만 정렬 가능
+<TableHeader
+  variant="line"
+  resizable
+  selectable
+  selectAllChecked={allSelected}
+  onSelectAllChange={setAllSelected}
+  columns={[
+    { key: "timestamp", label: "Timestamp", width: 140, sortable: true },
+    { key: "flow", label: "Flow", width: 260 },
+    { key: "input", label: "Input", width: 220 },
+    { key: "output", label: "Output", flex: true, minWidth: 240 },
+    { key: "status", label: "Status", width: 92 },
+    { key: "duration", label: "Duration", width: 84, sortable: true },
+    { key: "cost", label: "Cost", width: 84, sortable: true },
+  ]}
+  sort={sort}
+  onSortChange={setSort}
+/>
+
+// 법무 관리 뷰 — plate + 순서 변경 + 리사이즈 + 컬럼 매니저
+<TableHeader
+  variant="plate"
+  resizable
+  reorderable
+  columnManager
+  onColumnManagerClick={() => setColManagerOpen(true)}
+  columns={[
+    { key: "type", label: "권리", width: 80 },
+    { key: "ourRef", label: "Our Ref", width: 150 },
+    { key: "status", label: "상태", width: 200, minWidth: 200 },
+    { key: "deadline", label: "법정 마감일", width: 170, minWidth: 170 },
+    { key: "client", label: "의뢰인", width: 140 },
+    { key: "applicant", label: "출원인", width: 140 },
+    { key: "title", label: "출원명", flex: true, minWidth: 300 },
+    { key: "history", label: "히스토리", width: 300 },
+    { key: "appNo", label: "출원번호", width: 160 },
+    { key: "owner", label: "담당자", width: 120 },
+  ]}
+  order={order}
+  onOrderChange={setOrder}
+  widths={widths}
+  onWidthsChange={setWidths}
+/>
+```

package/assets/prompts/components/table-row-edit.md

@@ -0,0 +1,129 @@
+# TableRowEdit
+
+### 원칙
+Notion·Excel 톤의 **edit 모드** 행. [[components/table-row]]가 "읽는 행"(행 전체 클릭)이라면 이 컴포넌트는 "편집 가능한 셀 그리드" — 상호작용 단위가 **행이 아니라 셀**이다. 세로 구분선이 **강제**되는 유일한 Row 타입으로, 사용자가 edit 모드임을 즉시 인지할 수 있게 한다.
+
+**외곽은 line, 높이는 md로 고정** — 사이즈·variant 축이 없다. 밀도(sm/lg)나 pill(plate) 조합은 edit의 정체성(스프레드시트 톤, 세로선 그리드)과 어긋나 지원하지 않는다. 레이아웃·fade mask는 [[components/table-row]]의 CSS를 상속 — 헤더와의 폭·정렬 동기화 규칙은 동일. 셀 안쪽 콘텐츠는 [[components/table-cell]] 포맷터 또는 Input/Select/DatePicker 같은 편집 컨트롤을 호출 측에서 `columns[].render(data)`로 꽂아 쓴다.
+
+### Do
+- **columns는 헤더와 1:1로 공유**: [[components/table-row]]와 동일한 `TableRowColumn<T>[]`. 폭·정렬·flex 동기화는 그대로 작동. 헤더는 반드시 `variant="line"`과 짝.
+- **세로 구분선은 자동**: 첫 데이터 셀 왼쪽엔 선 없음, 그 뒤로 `--border` hairline이 자동으로 들어감. `selectable`이 있으면 체크박스 셀과 첫 데이터 셀 사이에도 선이 들어가 "선택 영역 ↔ 편집 영역" 구분.
+- **`activeCellKey`로 '지금 편집 중인 셀' 단일화**: 호출 측에서 하나의 셀 key만 넘김. 포커스·클릭 시 `onCellActivate(key)`가 호출되므로 상위에서 그 값을 state로 받아 다시 돌려주는 패턴. 활성 셀은 `--primary-subtle` 배경 + 1px inset ring.
+- **셀 콘텐츠는 `TableCell*` + 편집 컨트롤**: 표시 전엔 [[components/table-cell]] 포맷터, 활성 상태로 바뀌면 [[components/input]]·[[components/select]]·[[components/date-picker]] 등으로 교체하는 패턴. Row는 레이아웃만 관장.
+- **selectable은 bulk 액션용**: 체크박스로 여러 행을 모아 복사/삭제. [[components/table-row-select]]와 선택 톤(`--primary-subtle`)이 동일 — 멀티셀렉션 신호 일관성.
+- **읽기 전용 셀은 `columns[].editable: false`로 명시**: SKU·식별자·계산 파생값처럼 "값을 보여주지만 바꿀 수 없는" 셀. 커서는 default, hover/active 톤 없음, 포커스 불가, 세로 구분선 대상에서도 제외됨. 첫 "편집 가능" 셀 왼쪽엔 자동으로 선이 없음.
+- **편집 컨트롤은 호출 측 책임**: Input은 `Enter` 커밋 / `Esc` 취소 / `Tab` 다음 셀로 쓰는 게 Notion/Excel 표준. Select는 `defaultOpen`으로 셀 활성화와 동시에 open해 한 번의 클릭으로 선택까지 끝나게. `autoFocus` 대신 `focus({ preventScroll: true })` + `select()`를 쓸 것 — autoFocus는 scrollIntoView로 페이지가 튐.
+
+### Don't
+- 행 전체에 `onClick`/`href`를 걸지 않는다. edit 모드는 **셀**이 상호작용 단위 — 행 전체 핸들러가 있으면 셀 활성화와 충돌해 포커스/편집이 꼬인다. 행 라우팅이 필요하면 [[components/table-row]]를 쓸 것.
+- 세로 구분선을 끄지 않는다. edit 모드의 **정체성** — 끄면 navigate 모드와 시각 구분이 사라져 사용자가 편집 가능 여부를 인지하지 못함.
+- 셀 안에 또 다른 anchor/button을 중첩하지 않는다. 셀 자체가 포커스 타겟(`tabIndex=0`) — nested interactive는 접근성·키보드 탐색 파괴.
+- `activeCellKey`를 여러 개로 동시에 유지하지 않는다. "지금 편집 중"은 한 번에 하나. 멀티셀 선택이 필요하면 별도 selection state로 분리(미래 기능).
+- hover가 selected/active 셀을 덮지 않는다 — 컴포넌트 CSS가 보장([[feedback/hover-over-active]]).
+- `background`를 직접 지정하지 않는다. selected/active는 축 토큰(`--primary-subtle`)으로 자동.
+- 사이즈·variant를 쓰려 하지 않는다 — 애초에 prop이 없다. 밀도 다른 테이블이 필요하면 edit 대신 [[components/table-row]]의 size로 해결.
+
+### Fallback
+- 셀 콘텐츠 애매하면 [[components/table-cell]] 중 `TableCellText`. 편집 시만 [[components/input]]으로 교체.
+- `activeCellKey` 미지정 → 아무 셀도 활성 아님(모두 포커스 가능 상태만 유지).
+
+### 관련
+- [[components/table-row]] — navigate 모드(행 전체 클릭). edit과 스펙 공유.
+- [[components/table-row-select]] — select 모드(체크박스 bulk 선택). selected 톤 일관.
+- [[components/table-header]] — columns·order·widths·selectable 세트 (variant=line과 짝)
+- [[components/table-cell]] — 각 셀 콘텐츠 포맷터
+- [[components/input]], [[components/select]], [[components/date-picker]] — 활성 셀의 편집 컨트롤로 꽂음
+- [[axes/density]] — space-* 토큰을 통해 자동 반영 (명시적 size 축 없음)
+- [[tokens/color]] — `--primary-subtle`/`--primary`(active cell), `--border`(세로 구분선), `--hover`(셀 hover), `--fg-disabled`
+- [[feedback/hover-over-active]] — selected/active 위 hover가 상태 톤을 덮지 않음
+
+### Props 시그니처
+```tsx
+type TableRowColumn<T> = TableHeaderColumn & {
+  render?: (data: T) => ReactNode;              // 미지정 시 data[key]
+  editable?: boolean;                           // 기본 true. false면 read-only
+  resizable?: boolean;                          // 폭 drag 조절 opt-in (widths로 state 커밋)
+  movable?: boolean;                            // 순서 drag 변경 opt-in (order로 state 커밋)
+  removable?: boolean;                          // 헤더 액션으로 삭제 opt-in
+  pinned?: "left" | "right";                    // 가로스크롤 시 좌/우 sticky
+};
+
+<TableRowEdit<T>
+  size="sm | md"                                // default: md (sm=36, md=40)
+  columns={TableRowColumn<T>[]}                 // 헤더와 동일 스펙 + render + editable + …
+  order={string[]}                              // 헤더와 공유
+  widths={Record<string, number>}               // 헤더와 공유
+  data={T}
+
+  selectable={boolean}                          // 맨 앞 체크박스
+  selected={boolean}
+  onSelectedChange={(next: boolean) => void}
+
+  activeCellKey={string}                        // 지금 편집 중인 셀 key
+  onCellActivate={(key: string) => void}        // 편집 가능 셀 클릭/Enter/Space 시
+
+  disabled={boolean}
+/>
+```
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | 세로 구분선 + 행 하단 hairline |
+| cell hover | 해당 셀만 `--hover` 배경 |
+| cell active | `--primary-subtle` 배경 + 1px inset ring (`--primary`) |
+| cell focus-visible (keyboard, not active) | `--ring-shadow` 외곽 ring |
+| selected (행) | 행 전체 `--primary-subtle` 배경 |
+| disabled | `--fg-disabled` 톤, 셀 포커스 불가 |
+
+### 조합 예시
+```tsx
+// 가장 단순 — 셀 하나씩 활성화되는 스프레드시트 톤
+const [activeCell, setActiveCell] = useState<string | undefined>();
+
+<TableHeader variant="line" columns={headerCols} />
+{rows.map((row) => (
+  <TableRowEdit
+    key={row.id}
+    columns={rowCols}
+    data={row}
+    activeCellKey={activeCell}
+    onCellActivate={setActiveCell}
+  />
+))}
+
+// 활성 셀만 Input으로 교체하는 패턴
+const makeEditColumn = <T,>(col: TableHeaderColumn, field: keyof T): TableRowColumn<T> => ({
+  ...col,
+  render: (d) =>
+    activeCell === col.key && focusedRowId === (d as { id: string }).id ? (
+      <Input defaultValue={String(d[field])} autoFocus onBlur={commit} />
+    ) : (
+      <TableCellText>{String(d[field])}</TableCellText>
+    ),
+});
+
+// 체크박스 selection + 셀 편집 동시 사용
+<TableHeader
+  variant="line"
+  columns={headerCols}
+  selectable
+  selectAllChecked={allSelected}
+  onSelectAllChange={setAllSelected}
+/>
+{rows.map((row) => (
+  <TableRowEdit
+    key={row.id}
+    columns={rowCols}
+    data={row}
+    selectable
+    selected={selected.has(row.id)}
+    onSelectedChange={(next) => toggleOne(row.id, next)}
+    activeCellKey={focusedRowId === row.id ? activeCell : undefined}
+    onCellActivate={(key) => {
+      setFocusedRowId(row.id);
+      setActiveCell(key);
+    }}
+  />
+))}
+```

package/assets/prompts/components/table-row-select.md

@@ -0,0 +1,82 @@
+# TableRowSelect
+
+### 원칙
+"선택 모드" 데이터 행. [[components/table-row]]의 **navigate 모드**가 "클릭 = 라우팅/상세 열기"였다면, select 모드는 **"클릭 = 선택 토글"** 하나로 묶인다. 체크박스 UI는 **쓰지 않음** — 선택된 행 자체가 primary 톤의 옅은 배경으로 명확히 구분된다. 행의 어느 지점을 눌러도, 키보드 Space를 눌러도 전부 동일한 토글.
+
+레이아웃·사이즈·variant·fade mask·폭 공식은 [[components/table-row]]와 **완전히 공유** — 같은 `TableRowColumn<T>[]`를 받고, 같은 2단계(cellSlot→cell→cellInner) 구조로 렌더된다. 차이는 "선택 상태 시각"과 "클릭 핸들러의 의미"뿐.
+
+### Do
+- **columns는 TableRow와 동일 스펙**: 같은 `TableRowColumn<T>[]`를 Header와 Row 모두에 전달. 폭·정렬·render가 자동 동기화.
+- **체크박스 UI 없음**: 행 자체가 토글 영역 — 선택된 상태는 배경 톤으로만 표현. 헤더에도 `selectable=false` (기본).
+- **선택 상태 배경 = hover 톤**: `--hover`(중성 알파). TableRow(navigate)의 active와 같은 토큰 체계 — "지금 포커스된/선택된 행" 신호가 컴포넌트 간 일관되게 유지됨.
+- **hover가 selected를 덮지 않도록**: selected 위에서 hover해도 배경 톤 유지. [[feedback/hover-over-active]] 원칙과 정합.
+- **키보드 Space로 토글**: Enter는 안 받음 — Finder·Explorer도 선택은 Space. 접근성 트리는 `role="row"` + `aria-selected`.
+- **전체 선택/해제는 외부 UI로**: Row 자체엔 "select all" 개념이 없음. 상위 툴바에 버튼으로 두거나 헤더의 `selectable`을 켜고 TableRow(navigate)와 섞어 쓰는 패턴은 지양.
+
+### Don't
+- select 모드 안에 navigate(`href`/`onClick 라우팅`)를 섞지 않는다. "클릭의 의미가 하나"라는 규칙이 이 컴포넌트의 핵심. 두 가지가 필요하면 [[components/table-row]]를 쓰고 체크박스는 selectable로 켠다.
+- 체크박스 UI를 추가하지 않는다 — 이 컴포넌트의 정체성이 "체크박스 없이 행 자체로 선택". 체크박스가 필요하면 [[components/table-row]]의 `selectable` + `onSelectedChange`로.
+- `active` prop 없음. "지금 보고 있는 상세 행"의 개념은 navigate 전용 — select 모드엔 "선택됨"만 있다.
+- 행 한 줄 안에 여러 선택 가능한 영역을 두지 않는다. 선택 단위는 "행 하나" 고정.
+
+### Fallback
+- 사이즈 애매하면 `md`. 파일 리스트 표준.
+- variant 애매하면 `line`. 파일 매니저 톤.
+- selected 초기값 애매하면 `false`.
+
+### 관련
+- [[components/table-row]] — navigate 모드. columns 스펙·레이아웃·fade mask 전부 공유. 체크박스가 필요하면 이쪽의 `selectable` 사용
+- [[components/table-header]] — 헤더는 selectable 끄고 사용 (이 컴포넌트는 체크박스 없음)
+- [[tokens/color]] — `--hover`(선택 + hover 공통 중성 톤), `--fg-disabled`(disabled)
+
+### Props 시그니처
+```tsx
+<TableRowSelect<T>
+  variant="line | plate"                        // default: line
+  size="sm | md | lg"                           // default: md
+  columns={TableRowColumn<T>[]}                 // TableRow와 동일 스펙
+  order={string[]}                              // Header와 공유
+  widths={Record<string, number>}               // Header와 공유
+  data={T}
+
+  selected={boolean}
+  onSelectedChange={(next: boolean) => void}    // 행 클릭 / Space 공통 콜백
+
+  disabled={boolean}                            // pointer-events + 키보드 차단
+/>
+```
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | variant 기본 배경 |
+| hover | `--hover` 중성 톤 |
+| selected | `--hover` 배경 (TableRow active와 동일 토큰) |
+| selected + hover | selected 톤 유지(hover 덮어쓰기 금지) |
+| focus-visible (keyboard) | 외곽 ring(`--ring-shadow`) |
+| disabled | `--fg-disabled` 톤, pointer-events 없음, Space 무시 |
+
+### 조합 예시
+```tsx
+const [selected, setSelected] = useState<Set<string>>(new Set());
+
+const toggle = (id: string, next: boolean) => {
+  setSelected((prev) => {
+    const n = new Set(prev);
+    if (next) n.add(id); else n.delete(id);
+    return n;
+  });
+};
+
+<TableHeader variant="line" columns={HEADER_COLUMNS} />
+{rows.map((row) => (
+  <TableRowSelect
+    key={row.id}
+    variant="line"
+    columns={ROW_COLUMNS}
+    data={row}
+    selected={selected.has(row.id)}
+    onSelectedChange={(next) => toggle(row.id, next)}
+  />
+))}
+```

package/assets/prompts/components/table-row.md

@@ -0,0 +1,156 @@
+# TableRow
+
+### 원칙
+데이터 그리드의 한 행. [[components/table-header]]와 같은 `columns` 스펙을 공유해 폭·정렬·순서가 자동으로 맞도록 설계된다. 이번 버전은 **navigate 모드** — 행 전체가 클릭 요소가 되어 상세 라우팅·패널 오픈을 담당한다. select 모드(Google Drive 스타일 체크박스 토글), edit 모드(Notion·Excel 스타일 셀 편집)는 각각 [[components/table-row-select]], [[components/table-row-edit]]로 분리.
+
+행 자체는 레이아웃만 통제한다 — 셀 안쪽 콘텐츠는 [[components/table-cell]] 세트(`TableCellText`/`TableCellNumber`/`TableCellBadge`/`TableCellImage`/`TableCellIcon`/`TableCellAvatar`/`TableCellLink`/`TableCellMeter`)로 꽂아 쓴다. 콘텐츠 포맷터와 행 레이아웃을 분리해 셀 타입이 늘어도 Row API는 흔들리지 않는다.
+
+### Do
+- **columns는 헤더와 1:1로 공유**: 같은 `TableHeaderColumn[]`에 `render(data)` 콜백을 얹은 `TableRowColumn<T>[]`로 전달. 폭·정렬·flex가 자동 동기화되어 "헤더-아이템은 항상 세트" 원칙이 유지됨.
+- **`order` / `widths`도 헤더와 공유**: 헤더에서 drag reorder·resize한 결과를 그대로 Row에 넘기면 즉시 반영. uncontrolled면 columns 원본 순서·width 사용.
+- **variant는 헤더와 짝 맞춤**: `line` 헤더 아래엔 `line` 행, `plate` 헤더 아래엔 `plate` 행. 섞으면 라운드/구분 규칙이 깨짐.
+- **size로 밀도 조절**: `sm`(xs 폰트/control-h-sm) → 데이터 테이블·대시보드, `md`(sm 폰트/control-h-md) → 표준, `lg`(base 폰트/control-h-lg) → 콘텐츠 중심 리스트. padding은 세 사이즈 공유.
+- **라우팅은 `href`, 액션은 `onClick`**: `href` 있으면 anchor로 렌더(네이티브 Cmd+click·prefetch 등 활용), 없으면 `role="button"` + Enter/Space 키보드 지원. 둘 다 없으면 단순 디스플레이 행.
+- **`active`는 현재 보고 있는 상세의 반영**: 상세 패널이 열린 행에만 적용. hover가 active를 덮지 않도록 CSS가 보장.
+- **체크박스 셀은 `selectable` prop**: 헤더 selectable과 짝. 체크박스 영역 클릭은 자동으로 행 클릭 전파 차단.
+- **셀 안에 포맷터만**: `columns[].render` 안에는 `TableCell*` 포맷터 또는 1개의 레벨 안쪽 요소까지. 여러 인터랙션 요소(링크·버튼·메뉴)를 셀 안에 넣지 않는다 — 행 전체가 이미 클릭 요소.
+
+### Don't
+- 행 안에 또 다른 anchor/button을 중첩하지 않는다. nested interactive는 접근성 깨지고 pointer 이벤트도 꼬임. 셀별 액션이 필요하면 edit 모드(별도 컴포넌트)로. `TableCellLink`는 anchor를 포함하므로 `href`/`onClick` 있는 navigate 행에서 쓰지 말 것 — display-only 행이나 [[components/table-row-edit]]에서만 허용.
+- `line` 행에 `background`를 직접 지정해 활성/hover 색을 커스텀하지 않는다. `active` prop + 축 토큰(hover) 조합으로 해결.
+- `size`로 셀 padding을 바꾸지 않는다 — 사이즈는 세로 폭·폰트만. 셀 안 요소(badge·chip)의 리듬이 깨짐.
+- 셀 사이 세로 구분선을 넣지 않는다. navigate 모드는 "읽는 행" — 세로 구분선은 [[components/table-row-edit]](엑셀/Notion 스타일 셀 편집) 전용 시각이다.
+- disabled 행에 onClick 로직을 걸지 않는다. 컴포넌트가 pointer-events·tabIndex 모두 차단하므로 상위에서 가드 불필요.
+- Row 안에 긴 설명문을 두 줄 이상으로 넣지 않는다. 셀은 1-line ellipsis가 기본 — 긴 콘텐츠는 상세 패널로.
+
+### Fallback
+- 사이즈 애매하면 `md`. 데이터 테이블 표준.
+- variant 애매하면 `line`. 페이지 흐름에 자연스럽게 섞임.
+- 셀 포맷터 애매하면 `TableCellText`. 톤만 default/strong/muted/subtle로 선택.
+- 행 전체가 클릭 아닌 경우 — `href`/`onClick` 둘 다 생략하면 단순 디스플레이 행이 됨.
+
+### 관련
+- [[components/table-header]] — columns·order·widths·selectable 세트
+- [[components/table-cell]] — 각 셀 콘텐츠 포맷터 (Text/Number/Image/Tag/Badge/Icon/Avatar/Link/Meter)
+- [[components/checkbox]] — selectable 셀
+- [[axes/density]] — 세 사이즈 모두 Density 축 scale에 반응
+- [[axes/shape]] — plate variant의 radius가 Shape 축에 반응
+- [[tokens/color]] — `--hover`(행 hover 배경), `--border`(line hairline), `--fg-disabled`(disabled 톤)
+
+### Props 시그니처
+```tsx
+type TableRowColumn<T> = TableHeaderColumn & {
+  render?: (data: T) => ReactNode;              // 미지정 시 data[key]
+  editable?: boolean;                           // [[components/table-row-edit]] 전용. false면 read-only
+  resizable?: boolean;                          // 헤더 drag로 column 폭 조절 opt-in. widths로 state 커밋
+  movable?: boolean;                            // 헤더 drag로 column 순서 변경 opt-in. order로 state 커밋
+  removable?: boolean;                          // 헤더 context menu / × 액션 노출 opt-in
+  pinned?: "left" | "right";                    // 가로스크롤 시 좌/우에 sticky. reorder/remove 자동 제외
+};
+
+<TableRow<T>
+  variant="line | plate"                        // default: line (헤더와 짝)
+  size="sm | md | lg"                           // default: md
+  columns={TableRowColumn<T>[]}                 // 헤더와 동일 스펙 + render
+  order={string[]}                              // 헤더와 공유
+  widths={Record<string, number>}               // 헤더와 공유
+  data={T}                                      // 행 데이터 — columns[].render(data)로 사용
+
+  selectable={boolean}                          // 맨 앞 체크박스
+  selected={boolean}
+  onSelectedChange={(next: boolean) => void}
+
+  active={boolean}                              // 상세가 열린 행 — hover 톤
+  disabled={boolean}                            // 톤 다운 + 상호작용 차단
+
+  // Navigate — 둘 중 하나만 (anchor OR button role)
+  href={string}                                 // 있으면 <a>로 렌더
+  onClick={(e) => void}                         // 있으면 <div role="button">로 렌더
+/>
+```
+
+### Variant × Size 매트릭스
+| variant | size | 세로 폭 | 폰트 | 사용처 |
+|---|---|---|---|---|
+| `line` | `sm` | control-h-sm | text-xs | 데이터 테이블 · 로그 뷰 |
+| `line` | `md` | control-h-md | text-sm | 표준 리스트 뷰 (기본) |
+| `line` | `lg` | control-h-lg | text-base | 콘텐츠 중심 리스트 |
+| `plate` | `sm` | control-h-sm | text-xs | 밀도 높은 카드 안 리스트 |
+| `plate` | `md` | control-h-md | text-sm | 카드 안 표준 리스트 |
+| `plate` | `lg` | control-h-lg | text-base | 큰 썸네일 아이템 리스트 |
+
+### 상태 매트릭스
+| 상태 | 시각 |
+|---|---|
+| default | variant 기본 색·배경 |
+| hover (interactive) | 전체 행 배경 `--hover` |
+| active | 전체 행 배경 `--hover` (hover가 덮지 않음) |
+| focus-visible (keyboard) | `--ring-shadow` 외곽 ring |
+| disabled | `--fg-disabled` 톤, pointer-events 없음 |
+
+### 조합 예시
+```tsx
+// 가장 단순 — line / navigate / 체크박스 없음
+<TableHeader variant="line" columns={headerCols} />
+{rows.map((row) => (
+  <TableRow
+    key={row.id}
+    variant="line"
+    columns={rowCols}
+    data={row}
+    onClick={() => openDetail(row.id)}
+    active={row.id === activeId}
+  />
+))}
+
+// Google Drive 스타일 — 체크박스로 선택, 나머지 영역은 라우팅
+<TableHeader
+  variant="line"
+  columns={headerCols}
+  selectable
+  selectAllChecked={allSelected}
+  onSelectAllChange={setAllSelected}
+/>
+{rows.map((row) => (
+  <TableRow
+    key={row.id}
+    variant="line"
+    columns={rowCols}
+    data={row}
+    selectable
+    selected={selected.has(row.id)}
+    onSelectedChange={(next) => toggleOne(row.id, next)}
+    href={`/trace/${row.id}`}
+  />
+))}
+
+// 법무 관리 뷰 — plate + 큰 썸네일 + 태그 셀 + 통화 포맷터
+<TableHeader variant="plate" columns={legalHeaderCols} />
+{legalRows.map((row) => (
+  <TableRow
+    key={row.id}
+    variant="plate"
+    size="md"
+    columns={legalRowCols}
+    data={row}
+    onClick={() => router.push(`/legal/${row.id}`)}
+  />
+))}
+
+// columns에 render 콜백을 심는 방식
+const rowCols: TableRowColumn<LegalRow>[] = [
+  { ...headerCols[0], render: (d) => <TableCellBadge status={d.typeStatus}>{d.typeLabel}</TableCellBadge> },
+  { ...headerCols[1], render: (d) => <TableCellText tone="muted">{d.ourRef}</TableCellText> },
+  { ...headerCols[2], render: (d) => <TableCellText tone="strong">{d.title}</TableCellText> },
+  { ...headerCols[3], render: (d) => (
+      <span style={{ display: "inline-flex", gap: "var(--space-1)" }}>
+        {d.tags.map((t) => <TableCellBadge key={t} status="info">{t}</TableCellBadge>)}
+      </span>
+    ),
+  },
+  { ...headerCols[4], render: (d) => (
+      <TableCellNumber value={d.cost} format={{ style: "currency", currency: "KRW" }} locale="ko-KR" />
+    ),
+  },
+];
+```

package/assets/prompts/components/tabs.md

@@ -0,0 +1,122 @@
+# Tabs
+
+### 원칙
+동일 문맥 안에서 **한 번에 하나의 뷰만 보이는 여러 뷰**를 전환하는 컨트롤. 세 variant는 사용 맥락이 완전히 다르다 — 무게 순으로 `segmented > underline > text`.
+
+- **`underline`** — 페이지·섹션 안의 **콘텐츠 전환**. 하단 인디케이터 바만 있어 무게가 가볍고, 콘텐츠 흐름을 방해하지 않는다. Overview / Details / Activity 같은 화면 단위 전환의 표준.
+- **`segmented`** — 연한 컨테이너 안에 3~4개 pill. **필터·뷰 스위처** 같은 소수 옵션 즉시 선택. Day / Week / Month, List / Grid / Timeline, Preview / Code 등.
+- **`text`** — 컨테이너·라인·인디케이터 전부 없음. 색과 weight만으로 위계 표현. **공간을 거의 안 먹어야 할 때** — 페이지 헤더 sub-nav, 카드 안 미니 스위처, 목록 상단 상태 필터.
+
+### Do
+- **variant는 목적으로 고른다** — 콘텐츠 전환은 `underline`, 옵션 스위처는 `segmented`, 최소 무게 필터·sub-nav는 `text`. 예쁘다는 이유로 뒤바꾸지 말 것.
+- **선택된 값은 URL query·라우터에 반영** (`?tab=activity`). 새로고침·공유·뒤로가기가 자연스러워짐.
+- **아이콘은 라벨을 도울 때만**. 3자 이하 라벨 옆에 아이콘 없이도 인지될 때는 아이콘 없이. segmented는 좁으니 아이콘+긴 라벨 조합은 피한다.
+- **패널 콘텐츠에 상태(폼, 스크롤 위치)가 있으면 `keepMounted`**. 탭 전환마다 리셋되는 폼은 아주 나쁜 경험.
+- **키보드**: 컴포넌트가 ← → Home End 처리. Tab 키는 탭 리스트 밖으로 나가 활성 패널로 이동한다 (roving tabindex).
+- **한 화면에 탭 계층은 하나까지**. 탭 안에 다시 탭을 두면 방향 감각이 무너진다.
+
+### Don't
+- `underline` 하단 border/두께를 CSS로 덮어쓰지 않는다 — `--border` + `--space-0_5` 조합이 Density·Mode 축에 반응한다.
+- `segmented`를 5개 이상으로 늘리지 않는다. 5개 이상이면 [[components/select]] 또는 [[components/dropdown-menu]].
+- `segmented` 안 트리거에 **가변 너비 라벨** 금지 — flex 균등 분배가 무너져 pill이 어색해진다. 라벨 길이가 심하게 차이나면 `underline`으로.
+- 패널 헤더(title + Tabs가 `space-between`으로 양쪽 배치되는 레이아웃)에 `segmented`를 넣지 않는다 — segmented는 라벨 합산 폭이 커서 반대편 title을 밀어내 세로로 쪼개 놓는다. 패널 헤더 안 뷰 스위처가 필요하면 `text` variant 또는 `underline` sm 쓰거나, title을 `flex-shrink: 0`·`white-space: nowrap`으로 고정하고 Tabs는 그 다음 자리에만.
+- 페이지 이동(URL 자체가 바뀌는 라우팅)에 Tabs 사용 금지. 그건 [[components/sidebar]] 또는 상단 nav의 역할.
+- 활성 색을 `--primary`로 덮지 않는다. 활성은 `--fg-strong`(무채) — 브랜드 컬러를 여기 쓰면 CTA와 위계가 충돌.
+- `text`를 페이지 안 여러 자리에 반복해 쓰지 않는다. 장식이 없어서 "이게 탭인가 링크인가" 혼동이 잘 남 — 한 화면에 하나 정도로.
+
+### Fallback
+variant 애매하면 `underline`, size 애매하면 `md`.
+
+### 관련
+- [[components/button]] · [[components/split-button]] — 동일한 `--control-h-*` 사이즈 토큰 공유
+- [[components/filter-button]] — 여러 개 동시 선택이면 FilterButton. Tabs는 항상 1개만 활성.
+- [[axes/density]] — `--control-h-*`가 트리거 높이·segmented 컨테이너 높이에 매핑
+- [[axes/shape]] — segmented 컨테이너/트리거 radius가 Shape 축에 반응
+- [[axes/motion]] — 인디케이터 등장·hover 색 전환 duration
+- [[tokens/color]] — `--fg-muted` → `--fg-strong` 대비, `--bg-muted` 컨테이너
+
+### Props 시그니처
+```tsx
+<Tabs
+  variant="underline | segmented | text"   // default: underline
+  size="sm | md | lg"                  // default: md
+  value={string}                       // controlled
+  defaultValue={string}                // uncontrolled 초기값
+  onValueChange={(v) => void}
+>
+  <Tabs.List aria-label="섹션 선택">
+    <Tabs.Trigger value="overview" leadingIcon={<Icon name="rectangle" />}>Overview</Tabs.Trigger>
+    <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
+    <Tabs.Trigger value="settings" disabled>Settings</Tabs.Trigger>
+  </Tabs.List>
+
+  <Tabs.Panel value="overview">…</Tabs.Panel>
+  <Tabs.Panel value="activity" keepMounted>…</Tabs.Panel>
+  <Tabs.Panel value="settings">…</Tabs.Panel>
+</Tabs>
+```
+
+### 상태 매트릭스
+| 상태 | underline | segmented | text |
+|---|---|---|---|
+| default | `--fg-muted` 텍스트, 인디케이터 투명 | `--fg-muted` 텍스트, 트리거 배경 투명 | `--fg-muted` 텍스트, regular weight |
+| hover | `--fg` 텍스트, 아이콘 opacity 1 | `--hover` 배경 + `--fg` 텍스트 | `--fg` 텍스트 (배경 없음) |
+| active(선택) | `--fg-strong` 텍스트 + 하단 2px 인디케이터 | `--bg` 표면 + `shadow-xs` + `--fg-strong` | `--fg-strong` 텍스트 + semibold |
+| focus-visible | `--ring-shadow` 링 (전체 트리거) | 동일 | 동일 |
+| disabled | opacity 0.5, cursor not-allowed, tabIndex=-1 | 동일 | 동일 |
+
+### Size 가이드
+| size | height (control-h) | 언제 |
+|---|---|---|
+| `sm` | control-h-sm | 밀도 높은 대시보드, 사이드 패널 안, 카드 헤더 |
+| `md` | control-h-md | **기본.** 페이지 섹션 탭, 대부분의 스위처 |
+| `lg` | control-h-lg | 랜딩·마케팅 상단, 태블릿·터치 |
+
+### 접근성
+- 루트가 자동으로 `role=tablist` / `role=tab` / `role=tabpanel`과 `aria-selected` / `aria-controls` / `aria-labelledby` 를 붙인다.
+- 활성 트리거만 `tabIndex=0`, 나머지는 `-1` (roving focus).
+- ← → 로 순환 이동, Home / End 로 양 끝.
+- 사용자에게 필요한 유일한 aria는 `<Tabs.List aria-label="…">` — 스크린리더가 이 탭이 무엇을 스위치하는지 알 수 있게.
+
+### 조합 예시
+```tsx
+// 콘텐츠 전환 (underline) — URL query와 동기화
+const [tab, setTab] = useQueryState("tab", { defaultValue: "overview" });
+<Tabs value={tab} onValueChange={setTab}>
+  <Tabs.List aria-label="프로젝트 섹션">
+    <Tabs.Trigger value="overview" leadingIcon={<Icon name="rectangle" />}>Overview</Tabs.Trigger>
+    <Tabs.Trigger value="activity" leadingIcon={<Icon name="chart-line" />}>Activity</Tabs.Trigger>
+    <Tabs.Trigger value="members" leadingIcon={<Icon name="user" />}>Members</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Panel value="overview"><Overview /></Tabs.Panel>
+  <Tabs.Panel value="activity" keepMounted><Activity /></Tabs.Panel>
+  <Tabs.Panel value="members"><Members /></Tabs.Panel>
+</Tabs>
+
+// 뷰 스위처 (segmented) — 즉시 반영, 페이지 이동 아님
+<Tabs variant="segmented" size="sm" defaultValue="week" onValueChange={setRange}>
+  <Tabs.List aria-label="기간">
+    <Tabs.Trigger value="day">Day</Tabs.Trigger>
+    <Tabs.Trigger value="week">Week</Tabs.Trigger>
+    <Tabs.Trigger value="month">Month</Tabs.Trigger>
+    <Tabs.Trigger value="year">Year</Tabs.Trigger>
+  </Tabs.List>
+</Tabs>
+
+// Preview / Code 스위처 — 패널 없이 트리거만 써서 외부 state 제어
+<Tabs variant="segmented" value={mode} onValueChange={setMode}>
+  <Tabs.List aria-label="뷰 모드">
+    <Tabs.Trigger value="preview" leadingIcon={<Icon name="eye" />}>Preview</Tabs.Trigger>
+    <Tabs.Trigger value="code" leadingIcon={<Icon name="brackets-square" />}>Code</Tabs.Trigger>
+  </Tabs.List>
+</Tabs>
+
+// 목록 상단 상태 필터 (text) — 장식 없이 색·weight만
+<Tabs variant="text" size="sm" value={status} onValueChange={setStatus}>
+  <Tabs.List aria-label="이슈 상태">
+    <Tabs.Trigger value="all">전체</Tabs.Trigger>
+    <Tabs.Trigger value="open">열림</Tabs.Trigger>
+    <Tabs.Trigger value="closed">닫힘</Tabs.Trigger>
+  </Tabs.List>
+</Tabs>
+```