@t3q-ui/design-system 1.56.1 → 1.57.0

package/skills/tds/SKILL.md

@@ -19,7 +19,7 @@ license: Proprietary. See LICENSE.md in the @t3q-ui/design-system package
 ## 예제 — 먼저 열어 본다
 
 - 목록 화면: [examples/list-page.tsx](examples/list-page.tsx) — 검색·필터(상태색 건수 뱃지 세그먼트) → 표(정렬 가능 열은 `sortable: true` 로 아이콘이 보임, 이름 아래 보조 줄은 `secondaryField`) → 행 클릭 상세 패널(`detail` 슬롯, 목록 오른쪽에 나란히, 비활성 사유는 `note`) → 삭제 확인. TDS 저장소에서 타입 검사·렌더 테스트를 통과한 코드다. 새 목록 화면은 이 구조를 복사해 시작하고, 필드·컬럼만 과제에 맞게 바꾼다.
-- 상세 화면: [examples/detail-page.tsx](examples/detail-page.tsx) — 헤더(상태·**메타 `meta` 한 곳**(`MetaGroup columns={3}` + `MetaItem` — ID·버전·소유자·수정일 등 핵심 정보, 탭 위에 항상)·행동 슬롯) → 탭(건수 뱃지) → 본문 전폭 → 삭제 확인. 메타 자리를 두 개로 나누지 않는다(2026-10-30 사용자 결정 — 별도 요약 상자 없음). 오른쪽 패널(`aside`)은 쓰지 않는다(짧은 오른쪽 패널은 첫 화면 아래가 비어 홀드아웃 9~12 연속 감점). 상세 화면에 안내 한 줄(`actionsNote`)은 두지 않는다(본문 위에 떠 보여 4라운드 연속 감점, 2026-10-18 11차) — 비활성 버튼은 비활성으로만, 상태 안내는 `banner`. 오류·없음은 `error`/`notFound` prop. 개요 탭은 요약 패널 + 최근 N행 표.
+- 상세 화면: [examples/detail-page.tsx](examples/detail-page.tsx) — 헤더(상태·**메타 `meta` 한 곳**(`MetaGroup` + `MetaItem` 을 가로로 흘림 — ID·버전·소유자·수정일 등 핵심 정보, 탭 위에 항상. 열을 맞춘 격자로 두지 않는다)·행동 슬롯) → 탭(건수 뱃지) → 본문 전폭 → 삭제 확인. 메타 자리를 두 개로 나누지 않는다(2026-10-30 사용자 결정 — 별도 요약 상자 없음). 오른쪽 패널(`aside`)은 쓰지 않는다(짧은 오른쪽 패널은 첫 화면 아래가 비어 홀드아웃 9~12 연속 감점). 상세 화면에 안내 한 줄(`actionsNote`)은 두지 않는다(본문 위에 떠 보여 4라운드 연속 감점, 2026-10-18 11차) — 비활성 버튼은 비활성으로만, 상태 안내는 `banner`. 오류·없음은 `error`/`notFound` prop. 개요 탭은 요약 패널 + 최근 N행 표.
 - 생성·수정 폼: [examples/form-page.tsx](examples/form-page.tsx) — PageHeader → 섹션 4개 → 누르면 검증(`FormMessage`) → 제출 중 상태(`submitting`, 버튼 잠금·중복 제출 방지) → 취소 확인 → 성공 toast. 선택지 로딩 실패는 폼을 유지한 채 그 섹션 안에 `Alert variant='danger'` 한 줄 + `AlertActions` 다시 시도.
 - 대시보드: [examples/dashboard-page.tsx](examples/dashboard-page.tsx) — 요약 타일(`ratio`·`tone`) → 기간 선택 + SVG 추이 차트 → 표 → `EventList`. 오류·없음은 `error`/`empty` prop.
 - 네 예제 모두 같은 구조다: 데이터는 `fetch*` prop 으로 받고, 상태(로딩·오류·없음)는 패턴 prop 으로 넘기고, 화면 조립만 한다.
@@ -29,7 +29,7 @@ license: Proprietary. See LICENSE.md in the @t3q-ui/design-system package
 | 화면             | Pattern                                                              | 언제 쓰나                                                                                                                                                                                                     |
 | ---------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 목록             | `ListPage`                                                           | 검색/필터 → 표 → 상세 진입 흐름의 리소스 목록                                                                                                                                                                 |
-| 상세             | `DetailPage`                                                         | 리소스 하나의 상세. 핵심 정보는 헤더 `meta` 한 곳(`MetaGroup columns={3}` + `MetaItem`) → 본문 전폭. `aside` 는 쓰지 않는다. 행동 버튼은 `deleteAction`·`secondaryActions`·`primaryAction` 슬롯 — 패턴이 제목 줄 오른쪽에 [더보기 ⋯][보조 ≤2][주 행동]으로 놓고 삭제는 ⋯ 메뉴 안 |
+| 상세             | `DetailPage`                                                         | 리소스 하나의 상세. 핵심 정보는 헤더 `meta` 한 곳(`MetaGroup` + `MetaItem`, 가로로 흘림) → 본문 전폭. `aside` 는 쓰지 않는다. 행동 버튼은 `deleteAction`·`secondaryActions`·`primaryAction` 슬롯 — 패턴이 제목 줄 오른쪽에 [더보기 ⋯][보조 ≤2][주 행동]으로 놓고 삭제는 ⋯ 메뉴 안 |
 | 입력 — 전용 URL  | `FormPage`                                                           | 스크롤이 생기는 긴 폼 — 섹션 3개 이상, 한 화면을 넘김, 또는 여러 단계. 생성·수정 화면의 기본                                                                                                                  |
 | 입력 — 목록 위에 | `FormDrawer`                                                         | 목록 맥락을 유지해야 하고 **Drawer 한 화면 안에 들어가는** 폼(섹션 1~2개). 스크롤이 생기면 FormPage                                                                                                           |
 | 입력 — 짧게      | `FormDialog`                                                         | 이름 변경·태그 추가처럼 필드 1~4개                                                                                                                                                                            |
@@ -61,7 +61,7 @@ license: Proprietary. See LICENSE.md in the @t3q-ui/design-system package
 - 목록의 주 식별자 열은 ListPage 가 `onRowClick` 이 있으면 `name` 열을 자동으로 강조한다(굵게, hover 밑줄). 이름 열 field 가 `name` 이 아니면 `primaryField` 로 지정하고, 셀 렌더러로 파란 링크를 직접 만들지 않는다. 표 위 제목·건수는 `tableTitle` 과 `pagination.total` 로 보인다.
 - **상태처럼 선택지가 3~6개인 다중 선택 필터는 `ListPage quickFilter`** 로 표 왼쪽 위에 세그먼트(ToggleGroup)로 둔다 — 드롭다운을 열지 않아도 선택지가 보이고, `count` 로 항목마다 건수를 붙이고 **`countVariant` 에 표의 상태 뱃지와 같은 tone**(`STATUS[s].tone`: `success`·`secondary`·`danger`…)을 준다 — 건수는 상태색 pill 뱃지로 그려져 칩과 표가 같은 색 언어가 된다(예제의 `statusCounts`; "전체" 는 패턴이 primary, 2026-10-18 13차). 드롭다운에 숨기지 않는다. 선택지가 많거나(7개 이상) 검색이 필요한 축만 `TableFilterSingleSelect`/`TableFilterMultiSelect` 로 `filters` 에 두고, 그때는 `title`(예: '프레임워크')을 주면 "프레임워크 · 전체" 처럼 대상이 항상 보인다. placeholder 에 "전체" 만 넣지 않는다. 일반 `Select` 를 필터로 쓰면 placeholder 에 "전체 상태" 처럼 대상 이름을 넣는다. 라벨 없이 "전체" 만 보이는 필터를 만들지 않는다.
 - 표는 `AgGridTable` 로 만든다. `ag-grid-react` 를 직접 쓰지 않는다. 행 클릭과 키보드 Enter 는 같은 행 클릭 핸들러로 들어온다.
-- 주요 행동 버튼(생성·등록)은 `ListPage actions` 에 둔다 — 패턴이 제목 줄 오른쪽에 놓는다(직접 필터 슬롯이나 `titleRight` 에 넣지 않는다). `PageHeader actions` 도 제목 줄 오른쪽(탭이 있어도 같다, 2026-10-19 14차).
+- 주요 행동 버튼(생성·등록)은 `ListPage actions` 에 둔다 — 패턴이 제목 줄 오른쪽에 놓는다(직접 필터 슬롯이나 `titleRight` 에 넣지 않는다). `PageHeader actions` 도 제목 줄 오른쪽(탭이 있어도 같다, 2026-10-19 14차). **`titleRight` 에는 정보가 있는 것만** — 목록·대시보드의 `PageHeaderRefreshButton`, 상세의 상태는 `status` 슬롯. 화면 분류 이름("프로젝트 자원 관리")·"새 요청" 같은 장식 `Tag`·`Badge` 를 두지 않는다 — 심판이 "버튼 규칙과 다른 작은 버튼"·"길 잃은 breadcrumb" 로 읽었다(2026-11-06 홀드아웃 17·19 폼).
 - **유형·방식 선택(소스 유형·공개 범위·입력 방식처럼 선택지 2개 이상에 제목·설명이 붙는 것)은 `RadioSectionGroup` + `RadioSection`(카드형)** 으로 — dl-ui-v3 의 관례(21곳). 배치는 그룹이 개수로 정한다: 1~3개 한 줄, **4개는 2×2, 5개 이상은 세로 쌓기**(카드 안은 제목 · 설명 가로) — `className` 으로 grid 를 직접 짜지 않는다. 설명 없는 짧은 선택(예·아니오)만 `RadioGroup`, 선택지 7개 이상·검색이 필요하면 `Select`. **복수 선택에 제목·설명이 붙으면 `CheckboxSectionGroup` + `CheckboxSection`**(알림 채널), 설명 없는 짧은 옵션만 `Checkbox`. **켜기/끄기 하나의 설정(규칙 사용, 실패 시 알림, 노트북 지원)은 `SwitchSection`**(박스 + 제목·설명 + Switch, dl-ui-v3 ToggleField 관례) — 폼 제출값이어도 Checkbox 로 만들지 않는다. 예제 form-page.tsx 의 스케줄 선택(RadioSectionGroup)과 실패 알림(SwitchSection)이 본보기(`FormLabel id` + 그룹 `aria-labelledby`).
 - 버튼 묶음 사이 간격은 8px. PageHeader·Dialog·Drawer·Form 의 버튼 슬롯이 이미 그렇게 그린다.
 - **상태 표시는 `Badge` 에 아이콘 + 글자** — `<Badge variant='success'><LucideIcon iconComponentName='circle-check' />완료</Badge>`. 아이콘은 Badge 의 자식으로 바로 넣고(Badge 가 16px·글자색으로 맞춘다), 크기는 기본(`size` 를 주지 않는다 — 건수 뱃지와 같은 20px). **별도 상태 컴포넌트·래퍼를 만들지 않는다**(2026-10-30 사용자 결정 — 예전의 상태 전용 래퍼는 크기·여백이 달라 태그인지 뱃지인지 모를 부품이 됐다). 상태값 → `variant`·아이콘 매핑은 상수 한 곳에. **어휘**: 작업·노트북·파이프라인·서버처럼 돌아가는 프로세스의 '실행 중' `primary` + `play`(▶), 활성·사용 중·감시 중·허용·연결됨 같은 켜진 상태 `primary` + `circle-dot`(●) — ▶ 를 켜진 상태에 붙이면 재생 버튼처럼 읽힌다(2026-10-21 18차), 완료·준비됨 `success` + `circle-check`(✓) — 실행 중에 ✓ 를 붙이면 끝난 것으로 읽힌다(2026-10-20 17차), 학습 중·배포 중처럼 끝이 있는 진행 `info` + `loader-circle`(정적 아이콘 — 스피너는 정지 화면에서 점 뭉치로 보인다), 대기 `secondary` + `clock`, 중지·비활성 `secondary` + `circle-pause`, 실패 `danger` + `circle-x`, 경고·알림 발생 `warning` + `triangle-alert`. **한 화면에 같은 variant 의 상태 둘을 두지 않는다** — '준비됨'(`success` ✓)과 '사용 중'(`primary` ●)처럼 상태마다 색이 달라야 한다(2026-10-21 19차 "two different states look the same"). 기본은 연한 색 채움(`appearance` 를 주지 않는다 — 2026-10-18 10차). **lucide 이름은 정식 이름만**(`circle-pause`·`loader-circle`·`triangle-alert`; 옛 alias `pause-circle` 같은 것은 쓰지 않는다). 같은 화면의 상태 뱃지는 **전부 아이콘이 있게** — 섞이면 심사자가 불일치로 본다. 색은 `variant` 로 정하고 `className` 으로 덧씌우지 않는다.
@@ -80,7 +80,7 @@ license: Proprietary. See LICENSE.md in the @t3q-ui/design-system package
 - **날짜·시각 입력은 `DatePicker`·`TimePicker` 로, 폼 칸을 채우게** — 기본 폭이 250·160px 라 두 칸 줄에서 절반이 빈다(2026-10-28 홀드아웃 14, Opus·Gemini "date/time fields leave a lot of unused space"). `DatePicker classNames={{ button: 'w-full' }}`·`TimePicker classNames={{ trigger: 'w-full' }}`(두 부품의 통로 이름이 다르다). `<input type='date'>` 를 직접 쓰지 않는다.
 - **목 데이터는 의미가 맞게, 양도 화면을 채울 만큼** — 태스크·프레임워크·이름·상태가 서로 어울리는 조합(예: `yolo-v8-detector` 는 `object-detection` + `PyTorch`), 날짜는 생성일 ≤ 수정일, 건수는 목록 길이와 일치. **목록은 20행 이상**(페이지 크기 20 이면 두 페이지 분량) — 10~12행이면 표 아래가 비어 심사자가 "빈 공간" 으로 깎는다(한 줄 판 12차 6쌍, 2026-10-18). 심사자는 데이터가 말이 되는지도 본다.
 - **표 열 폭** — 이름 열 `flex: 2, minWidth: 200, maxWidth: 480`, **글자가 들어가는 열은 모두** `flex: 1, minWidth: 120`(소유자·팀·프레임워크·설명 — 하나만 고르지 않는다. 남는 폭이 여러 열로 흩어져야 이름 열만 넓어지지 않는다; 글자 열이 하나뿐이면 2:1 로 나눠도 이름 열이 500px 라 "name column leaves substantial whitespace", 2026-10-20 17차·18차), 숫자·날짜·상태·진행률 열은 `width` 로 — **숫자 열은 `type: 'number'` 만 주고 `flex` 를 주지 않는다**(폭 없으면 140). DS `Table` 의 숫자 열은 `TableHead align='right'` 로 — 폭 140 으로 고정돼 글자 열이 남는 폭을 가진다(표가 `table-fixed` 라 머리글의 `align` 이 열 폭을 정한다). **DS `Table` 의 상태 열은 `TableHead className='w-32'`, 날짜·시각 열은 `className='w-44'` 로 폭을 준다** — 폭 없는 열은 남는 폭을 똑같이 나눠 가져 뱃지 하나뿐인 상태 열이 400px 가 된다(2026-10-30 홀드아웃 17 "large empty gap between the status and GPU columns"). 남는 폭은 이름·글자 열이 나눈다. 글자 열이 하나도 없으면 `maxWidth` 를 뺀다(표 오른쪽이 빈다 — 상한 없는 flex 열이 없으면 AgGridTable 이 flex 열의 `maxWidth` 를 떼어 표를 채운다, 2026-10-28 홀드아웃 14 "row dividers stop around 1330px")(제목 글자가 들어가는 최소 폭은 AgGridTable 이 보정하고 넘치는 셀 글자는 말줄임표로 끝난다). 열은 6~7개 이내로 — **보조 정보(id·이미지·경로·설명)는 열을 늘리지 말고 `ListPage secondaryField='image'` 로 이름 아래 12px 줄에**(dl-ui-v3 목록의 이름 / 설명 셀; 패턴이 행을 56 으로 그린다). 셀마다 `cellStyle`·`width: 110` 같은 좁은 폭을 손으로 맞추지 않는다(2026-10-18 13차). **주 식별자가 짧은 ID·코드(요청 ID·커밋 해시·키)면 이름 열 공식(`flex: 2`) 대신 `width: 200` 으로 고정**하고, 남는 폭은 엔드포인트·모델·설명 같은 글자 열(`flex: 1`)이 나눈다 — ID 열이 남는 폭을 다 받으면 "request ID column is too wide"(2026-10-28 홀드아웃 14, 목록 3/3).
-- **도움말 문구(`FormDescription`)는 규칙·전제·추천값** — "실행 경로에 쓰여 만든 뒤 바꿀 수 없습니다. 영문 소문자·숫자·하이픈 3~40자", "1~32 코어. 전처리는 2~4, 학습은 8 이상을 권합니다". placeholder 와 같은 말("1~64" / "1~64")을 되풀이하지 않고, placeholder 는 "예: 4" 같은 보기 하나. **도움말·선택지 설명은 문장 끝 마침표 없이 통일**한다(두 문장을 이을 때만 가운데 마침표 — "1~32 코어. 전처리는 2~4") — 일부만 마침표가 붙으면 심사자가 copy 불일치로 본다(2026-10-18 13차 폼). 검토·요약 패널의 **빈 값은 "—" 하나**(단위는 값이 있을 때만 — "CPU —코어 · 메모리 —GB" 처럼 이어 붙이지 않고 항목마다 한 행). 예제 form-page.tsx 의 리소스 섹션·검토 패널이 본보기(2026-10-18 13차, 기준선 copy 12쌍 벤치마킹).
+- **도움말 문구(`FormDescription`)는 규칙·전제·추천값** — "실행 경로에 쓰여 만든 뒤 바꿀 수 없습니다. 영문 소문자·숫자·하이픈 3~40자", "1~32 코어. 전처리는 2~4, 학습은 8 이상을 권합니다". placeholder 와 같은 말("1~64" / "1~64")을 되풀이하지 않고, placeholder 는 "예: 4" 같은 보기 하나. **여러 필드에 같은 안내는 필드마다 되풀이하지 않는다** — 섹션 설명(또는 `Alert`)에 한 번 쓰고, 필드 도움말은 그 필드만의 값(현재값·범위)만. **placeholder 보기는 안내와 같은 방식으로** — 안내가 "추가분이 아니라 변경 후 전체 한도" 면 보기도 전체 값("예: 8"), "4개에서 8개로 증설" 처럼 안내와 반대로 쓰지 않는다(2026-11-06 홀드아웃 19 폼, 세 심판 copy 감점). **도움말·선택지 설명·`Alert`·패널 설명까지 한 화면의 짧은 문장은 끝 마침표 없이 통일**한다(두 문장을 이을 때만 가운데 마침표 — "1~32 코어. 전처리는 2~4") — 일부만 마침표가 붙으면 심사자가 copy 불일치로 본다(2026-10-18 13차 폼). 검토·요약 패널의 **빈 값은 "—" 하나**(단위는 값이 있을 때만 — "CPU —코어 · 메모리 —GB" 처럼 이어 붙이지 않고 항목마다 한 행). 예제 form-page.tsx 의 리소스 섹션·검토 패널이 본보기(2026-10-18 13차, 기준선 copy 12쌍 벤치마킹).
 - **글자 수("0 / 500자") 같은 보조 표시는 `FormDescription icon={false}`** — `FormDescription` 은 앞에 정보 아이콘을 그리므로 안내 문장에만 쓴다(2026-10-28 홀드아웃 15, Opus·Gemini "info icon next to a simple character counter").
 - **표 안 진행률 열은 `type: 'number'` 를 주지 않는다** — 오른쪽 정렬이 되면 % 글자 폭에 따라 막대 시작점이 흔들린다. 셀 안에서 `Progress` 는 고정 폭(`w-24`), % 글자도 고정 폭(`w-10 text-right tabular-nums`)으로 나란히 두고, 정지·대기 행도 빈 막대(`value={0}`)를 그린다(2026-10-28 홀드아웃 15, "progress bars have uneven lengths and starting points").
 - **오류·없음 화면은 패턴 prop 으로** — DetailPage `error`/`notFound`, DashboardLayout `error`/`empty`, ListPage `error`/`emptyState`. 패턴이 그림(빈 상태는 `EmptyBoxIllustration` 상자 일러스트, 오류는 경고 아이콘)·제목·설명·"다시 시도" 상자로 그린다. 빨간 `Alert` 줄이나 `<div>` 로 본문을 대체하지 않는다. 패턴 밖(폼의 선택지 목록 등)에서는 `@t3q-ui/design-system/patterns` 의 `ErrorState`·`EmptyState` 를 쓴다.

package/skills/tds/examples/detail-page.tsx

@@ -21,7 +21,7 @@
  * - 탭 항목의 건수는 `badge` 로 → "버전 4" 처럼 탭에 뱃지가 붙는다
  * - 불러오기 실패는 `error` + `onRetry`, 항목 없음은 `notFound` → 패턴이 아이콘·제목·설명·다시 시도 상자로 그린다.
  *   Alert 줄이나 `<div>` 로 직접 만들지 않고, 헤더만 채운 채 본문에 "찾을 수 없음" 을 그리지 않는다
- * - 핵심 정보는 헤더 `meta` 한 곳에 `MetaGroup columns={3}` + `MetaItem`(탭을 바꿔도 보임). 메타 자리를 두 개로 나누지 않는다(2026-10-30 사용자 결정 — 요약 상자 없음). 오른쪽 패널 `aside` 는 쓰지 않는다(첫 화면 아래가 빈다)
+ * - 핵심 정보는 헤더 `meta` 한 곳에 `MetaGroup` + `MetaItem`(탭을 바꿔도 보임). 많으면 가로로 흘러 다음 줄로 넘어간다 — 열을 맞춘 격자로 두지 않는다(칸이 넓어 항목 사이가 빈다, 2026-11-06). 메타 자리를 두 개로 나누지 않는다(2026-10-30 사용자 결정 — 요약 상자 없음). 오른쪽 패널 `aside` 는 쓰지 않는다(첫 화면 아래가 빈다)
  * - 상태는 `Badge` 에 아이콘 + 글자(학습 중처럼 진행 중인 상태는 정적 아이콘 `loader-circle` — 스피너는 정지 화면에서 점 뭉치로 보인다). 별도 상태 컴포넌트를 만들지 않는다.
  *   실행 중·활성처럼 건강하게 돌아가는 상태는 `primary`(▶), 완료·준비됨만 `success`(✓) — 실행 중에 ✓ 를 붙이면 끝난 것으로 읽힌다(2026-10-20 17차)
  * - 본문 묶음은 `Panel`(제목 + 1px 테두리 상자)로 나눈다 — 옆 패널(`aside`)도 패턴이 같은 Panel 로 그려 본문과 패널이 한 규칙. Card·Separator 로 나누지 않는다
@@ -167,7 +167,7 @@ export function ModelDetailPage({ fetchModel }: { fetchModel: () => Promise<Mode
         description={model?.description}
         meta={
           model ? (
-            <MetaGroup columns={3}>
+            <MetaGroup>
               <MetaItem label='ID' value={model.id} />
               <MetaItem label='버전' value={model.version} />
               <MetaItem label='소유자' value={model.owner} />

package/skills/tds/reference/components.md

@@ -45,7 +45,7 @@ const Default = () => <DashboardDemo />;
 
 | prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
-| `meta` | `ReactNode` |  | 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup columns={3}` + `MetaItem`(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다) |
+| `meta` | `ReactNode` |  | 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup` + `MetaItem` — 가로로 흘려 다음 줄로(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다, 2026-11-06 격자 대신 흘림) |
 | `titleRight` | `ReactNode` |  | Right-aligned slot next to the title (e.g. a secondary title action). |
 | `primaryAction` | `DetailPageAction` |  | 주 행동 1개 (예: 배포·새 추론 서비스). `primaryBold` 로 맨 오른쪽에 그린다 |
 | `secondaryActions` | `DetailPageAction[]` |  | 보조 행동들 (예: 다운로드·복제·새 버전). `secondary` 로 주 행동 왼쪽에 준 순서대로 — 2개까지만 보이고 3번째부터는 "더보기" 메뉴로 접힌다(2026-10-19 14차) |
@@ -57,7 +57,7 @@ const Default = () => <DashboardDemo />;
 | `error` | `ReactNode` |  | 주면 본문 대신 오류 상자(ErrorState: 아이콘·"불러오지 못했습니다"·이 내용). `onRetry` 가 있으면 "다시 시도" 버튼을 함께 그린다 |
 | `onRetry` | `(() => void)` |  | error 상태의 "다시 시도" 클릭 |
 | `notFound` | `ReactNode` |  | 항목이 없을 때 본문 대신 없음 상자(EmptyState — 상자 일러스트, 2026-10-13 부터 목록·대시보드와 같은 그림). true 면 기본 문구 "항목을 찾을 수 없습니다." + 안내 한 줄 |
-| `aside` | `ReactNode` |  | **호환용** — 새 화면은 핵심 정보를 헤더 `meta`(`MetaGroup columns={3}`)에 둔다(2026-10-27 사용자 결정 A: 오른쪽 패널은 내용이 짧아 첫 화면 아래가 비는 것이 홀드아웃 9~12 연속 지적, 2026-10-30 요약 상자 대신 메타 자리 하나로). 주면 넓은 화면(xl)에서 본문 2 : 패널 1, 좁은 화면에서는 본문 아래 |
+| `aside` | `ReactNode` |  | **호환용** — 새 화면은 핵심 정보를 헤더 `meta`(`MetaGroup` + `MetaItem`)에 둔다(2026-10-27 사용자 결정 A: 오른쪽 패널은 내용이 짧아 첫 화면 아래가 비는 것이 홀드아웃 9~12 연속 지적, 2026-10-30 요약 상자 대신 메타 자리 하나로). 주면 넓은 화면(xl)에서 본문 2 : 패널 1, 좁은 화면에서는 본문 아래 |
 | `asideTitle` | `ReactNode` | `기본 정보` | 패널 제목(Panel 머리글, 기본 "기본 정보"). 패턴이 그리므로 `aside` 안에 같은 제목을 다시 쓰지 않는다(2026-10-27 홀드아웃 12: "작업 정보" 가 연달아 두 번) |
 | `width` | `enum` | `full` | 본문 폭. full = 가로 전체(정보 탭), panel = 가운데 900px (설정 탭). 기본 full |
 | `children` | `ReactNode` |  | 본문 (현재 탭 내용). 탭 상태와 라우팅은 소비 앱이 가진다 |
@@ -453,7 +453,7 @@ const Playground = () => <LucideIcon iconComponentName="calendar-days" size={24}
 ## MetaItem (`components-data-display-metaitem`)
 
 라벨·값 한 쌍의 메타 정보. 가로 나열(`MetaItem`+`MetaGroup`, 헤더용)과 세로 쌓기(`MetaRow`+`MetaList`, 상세 패널용) 두 모양이 있다.
-언제 쓰나: PageHeader 아래 등록자·일시 같은 메타(MetaItem). 상세 화면의 핵심 정보도 여기 한 곳 — 여러 개면 `MetaGroup columns={3}` 격자(2026-10-30 사용자 결정: 헤더의 메타 자리를 두 개로 나누지 않는다). 본문 카드의 속성 묶음은 MetaList + MetaRow align='start'.
+언제 쓰나: PageHeader 아래 등록자·일시 같은 메타(MetaItem). 상세 화면의 핵심 정보도 여기 한 곳 — 여러 개면 `MetaGroup` 이 가로로 흘려 다음 줄로 넘긴다(2026-10-30 사용자 결정: 헤더의 메타 자리를 두 개로 나누지 않는다). 본문 카드의 속성 묶음은 MetaList + MetaRow align='start'.
 언제 안 쓰나: 편집 가능한 값(폼), 열이 여러 개인 표(Table).
 대신/함께: MetaRow 값은 14px·라벨 12px — 행마다 값 크기를 바꾸지 않는다(패널 안 크기 차이는 심판 감점, 2026-10-18). 상태는 value 에 Badge.
 
@@ -1000,7 +1000,7 @@ const Basic = () => (
 | prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
 | `breadcrumbTitle` | `string \| null` |  | Optional override for the breadcrumb tail (last item). - `undefined` (default): consuming apps may fall back to `title`. - `null`: explicitly suppress the auto-appended breadcrumb tail. - `string`: use the given text as the breadcrumb tail regardless of `title`.  design-system itself does not render breadcrumbs (they are passed in as the `breadcrumb` slot) — this field is a contract for the consuming app's breadcrumb wrapper to read. |
-| `meta` | `ReactNode` |  | 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup columns={3}` + `MetaItem`(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다) |
+| `meta` | `ReactNode` |  | 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup` + `MetaItem` — 가로로 흘려 다음 줄로(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다, 2026-11-06 격자 대신 흘림) |
 | `titleRight` | `ReactNode` |  | Right-aligned slot next to the title (e.g. a secondary title action). |
 | `contentMaxWidth` | `string` |  | 내용(빵부스러기·제목·행동·설명·탭)의 최대 폭 — CSS 길이(예: `var(--max-w-page-content)`). 주면 그 폭 안에 가운데 두고 띠(배경·아래 선)는 전폭 그대로. FormPage 가 폼 폭에 맞춰 넘긴다(2026-10-26 22차). 기본 없음 = 전폭 |