@hjmds/design-contracts 1.21.0 → 1.23.0

package/dist/version.d.ts

@@ -1,3 +1,3 @@
 /** Package release shown by documentation surfaces. Kept in sync by a test. */
-export declare const designSystemVersion: "1.21.0";
+export declare const designSystemVersion: "1.23.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,3 +1,3 @@
 /** Package release shown by documentation surfaces. Kept in sync by a test. */
-export const designSystemVersion = "1.21.0";
+export const designSystemVersion = "1.23.0";
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.21.0\" as const;\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAiB,CAAC","sourcesContent":["/** Package release shown by documentation surfaces. Kept in sync by a test. */\nexport const designSystemVersion = \"1.23.0\" as const;\n"]}

package/docs/authoring-tools.md

@@ -1,6 +1,6 @@
 # 편집 도구 구성 계약
 
-검토일: 2026-10-15 · Lucian 116·141 · Storybook 배포 · 미게시
+검토일: 2026-10-15 · Lucian 116·141 · Storybook 배포 · npm 1.21.0
 
 `@hjmds/design-contracts/authoring-tools`, `@hjmds/react/authoring-tools`,
 `@hjmds/react-native/authoring-tools` 선택 subpath로 제공한다.

package/docs/collection-editing.md

@@ -1,6 +1,6 @@
 # 목록 편집과 복구 구성
 
-검토일: 2026-10-15 · 상태: 개발 구현, 미게시 · Web / React Native
+검토일: 2026-10-15 · 상태: Storybook 배포 · npm 1.21.0 · Web / React Native
 
 Lucian UX/UI [#033](https://lucianlabs.dev/uxui-prompt/#033), [#092](https://lucianlabs.dev/uxui-prompt/#092),
 [#131](https://lucianlabs.dev/uxui-prompt/#131), [#144](https://lucianlabs.dev/uxui-prompt/#144),
@@ -27,7 +27,7 @@ Lucian UX/UI [#033](https://lucianlabs.dev/uxui-prompt/#033), [#092](https://luc
 - Web: `@hjmds/react/collection-editing`
 - Native: `@hjmds/react-native/collection-editing`
 - 순수 모델/헬퍼: `@hjmds/design-contracts/collection-editing`
-- root barrel에 추가하지 않는다. 양 플랫폼 공개 API가 있지만 현재 미게시이며 앱 설치 버전의 제공을 의미하지 않는다.
+- root barrel에 추가하지 않는다. 양 플랫폼 공개 API가 있지만 1.21.0으로 게시되었으며 소비 앱에서 같은 버전을 설치한 뒤 사용한다.
 - 다섯 구성은 각각 `배포/구성/…` Storybook에 있다. 실행 예제와 배치는 [사용 지침](usage/compositions/collection-editing.md)을 따른다.
 
 ## 주요 타입
@@ -80,4 +80,4 @@ Chromium에는 375px host에서 두 브랜드 fixture(violet/green)의 light/dar
 
 새 Web story ID 15개는 원본을 읽는 기존 생성 로직으로 등록했다. 선택적 전체 Storybook 규약 검사에서
 기존 `components-data-display--chart` ID의 snapshot 누락을 발견했지만 이번 구성과 무관해 변경하지 않았다.
-전체 회귀·실기기·VoiceOver/TalkBack·성능 측정·npm 게시·소비 앱 적용은 미실행이다.
+전체 회귀·실기기·VoiceOver/TalkBack·성능 측정·소비 화면 적용은 미실행이다. npm 1.21.0 게시·설치 범위는 도입 기록을 따른다.

package/docs/communication.md

@@ -1,6 +1,6 @@
 # 검색·메시지 연결 구성 계약
 
-검토일: 2026-10-15 · Lucian 027·028·078 · Storybook 배포 · 미게시
+검토일: 2026-10-15 · Lucian 027·028·078 · Storybook 배포 · npm 1.21.0
 
 `@hjmds/{design-contracts,react,react-native}/communication` 선택 subpath를 제공한다.
 기존 `screens`의 MessageComposer에는 선택 속성 `lengthFeedback`만 추가한다.

package/docs/data-workflows.md

@@ -1,6 +1,6 @@
 # 데이터 해석과 가져오기 구성
 
-검토일: 2026-10-15 · Storybook 배포 · Web/Native · 미게시(1.20.0 이후)
+검토일: 2026-10-15 · Storybook 배포 · Web/Native · npm 1.21.0
 
 Lucian 130·160–164를 검토하면서 기존 표·차트·통계의 실제 데이터 연결을 재사용할 필요를 확인했다.
 별도의 표/차트 엔진을 만들지 않고 DataTable, BarChart, Statistic, Progress, Select를 합성한다.
@@ -21,6 +21,6 @@ MatrixTable은 팀 간 비교에서 대각선을 숨기는 계약이므로 직
 연결의 서버 검증, CSV 보안/인코딩, 저장·인증·권한·멱등성은 실제 제품 importer가 소유한다.
 
 검증: 계산 6건, Web 브라우저 5건, Native host 2건 통과. 비동기 공통 helper 추출 후 기존 목록 편집 Web 7건/Native 5건 통과.
-Native 실제 기기·제품 연결·npm 게시·운영 배포는 미실행이다.
+Native 실제 기기·제품 연결·운영 배포는 미실행이다. npm 1.21.0 게시·artifact 확인은 도입 기록을 따른다.
 
 신규 6개 개발 Storybook 화면 확인. 두 제품 팔레트 light/dark 및 375px host 검사 통과. 본 작업의 6012 검사용 서버·탭 종료, 기존 6006 서버 보존.

package/docs/generated/component-maturity.md

@@ -1,6 +1,6 @@
 # Component maturity and evidence manifest
 
-> Generated from `@hjmds/design-contracts` 1.21.0. Do not edit this file directly; run `pnpm contracts:sync`.
+> Generated from `@hjmds/design-contracts` 1.23.0. Do not edit this file directly; run `pnpm contracts:sync`.
 
 This document is the human-readable projection of the same catalog and Showcase manifest consumed by product CI.
 

package/docs/generated/renderer-evidence.json

@@ -1,11 +1,11 @@
 {
   "schemaVersion": 1,
-  "designSystemVersion": "1.21.0",
+  "designSystemVersion": "1.23.0",
   "source": "packages/design-contracts/docs/generated/showcase-manifest.json",
   "surfaces": {
     "web": {
       "packageName": "@hjmds/react",
-      "packageVersion": "1.21.0",
+      "packageVersion": "1.23.0",
       "activeComponents": 104,
       "claimedComponents": 103,
       "completeScenarioComponents": 103,
@@ -5672,7 +5672,7 @@
     },
     "native": {
       "packageName": "@hjmds/react-native",
-      "packageVersion": "1.21.0",
+      "packageVersion": "1.23.0",
       "activeComponents": 85,
       "claimedComponents": 83,
       "completeScenarioComponents": 83,

package/docs/generated/renderer-evidence.md

@@ -1,6 +1,6 @@
 # Renderer evidence coverage
 
-> Generated for HJM 1.21.0. Do not edit directly; run `pnpm evidence:sync`.
+> Generated for HJM 1.23.0. Do not edit directly; run `pnpm evidence:sync`.
 
 This projection joins the canonical surface maturity manifest with first-party renderer claims. Missing scenarios are explicit beta promotion debt; stable surfaces are blocked by CI until none remain.
 

package/docs/generated/showcase-manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "designSystemVersion": "1.21.0",
+  "designSystemVersion": "1.23.0",
   "packageName": "@hjmds/design-contracts",
   "components": [
     {

package/docs/media-transport.md

@@ -1,6 +1,6 @@
 # 미디어 재생 제어
 
-검토일: 2026-10-15 · Storybook 배포 · Web/Native · 미게시(1.20.0 이후)
+검토일: 2026-10-15 · Storybook 배포 · Web/Native · npm 1.21.0
 
 Lucian 007의 재생/정지 모핑을 실제 미디어 상태와 연결할 공통 구성이 필요했다.
 기존 IconButton과 Slider를 합성하며 재생 엔진·탐색 제스처·타이머를 새로 구현하지 않는다.

package/docs/screen-patterns.md

@@ -1,6 +1,6 @@
 # 반복 화면 조합
 
-검토일: 2026-10-06 · 상태: Storybook 배포(2026-10-06 사용자 승인) · 패키지 게시/제품 적용 전
+검토일: 2026-10-15 · 상태: Storybook 배포(2026-10-06 사용자 승인) · 패키지 적용 범위는 개별 API 사용 지침 참조
 
 사용자가 로그인·설정·알림·채팅 화면을 미리 일반화해 개발 생산성을 높이도록 요청했다.
 기존 AuthScreenLayout, Section, ListRow, TopBar, Layout, EmptyState, action-session,
@@ -23,6 +23,9 @@ Flutter 앱에는 React 컴포넌트를 주입할 수 없다. 화면 역할과
 
 ## 선택 기준과 소유권
 
+모든 화면·구성의 공통 구조는 HJM이 제공한다. [선택 지침](usage/SELECTION.md)의 소유권을 따르며, 제품은 데이터·문구·추가 기능만 연결한다. 전용 구성이 없는 영역은 `CompositionLayout`, 가상화 댓글 행은 `CommentThreadRow`를 사용해 기본 배치를 복제하지 않는다. 두 API는 현재 checkout의 미게시 추가분이다.
+
+
 - 로그인: 기존 `auth-screen`의 `AuthScreenLayout` + `AuthProviderButton`을 그대로 쓴다.
   새 LoginScreen alias나 제공자 preset은 만들지 않는다. 카드 유지·중앙 로딩·정책 고지는
   [로그인 계약](auth-screen.md)을 따른다.
@@ -38,8 +41,10 @@ Flutter 앱에는 React 컴포넌트를 주입할 수 없다. 화면 역할과
 - `ChatMessage`: 발신/수신 정렬, 작성자, 아바타, 답장 인용, 전송 상태와 시각을 합성한다.
   기존 Asset/VoiceNote 등은 children에 넣고 영수증·반응·재시도는 제품이 넘긴다. 전체 타임라인을
   live region으로 만들지 않으므로 과거 메시지 로딩 때 읽기 순서를 가로채지 않는다.
-- `MessageComposer`: 기존 TextArea와 Button을 조합한다. 빈 입력·pending·disabled에서는
-  전송하지 않고 Enter는 줄 바꿈으로 유지한다(IME 조합과 충돌 방지). 제품 onSend에 원문을
+- `MessageComposer`: 기존 TextArea와 Button을 조합한다. 글·첨부·추가 콘텐츠가 모두 없거나 pending·disabled이면
+  전송하지 않는다. Enter는 기본 줄바꿈이며 데스크톱 채팅의 Enter 전송은 공개 `submitMode="send"`로 선택한다.
+  Web의 Shift+Enter·IME 조합 중 Enter는 전송하지 않는다. 제품별 키 처리로 이 보호를 우회하지 않는다.
+  세부 플랫폼 동작은 [MessageComposer 사용 지침](usage/components/message-composer.md)을 따른다. 제품 onSend에 원문을
   전달하며 초안 초기화는 서버 영수증을 받은 제품만 수행한다. 1~5줄은 짧은 작성창이 타임라인을
   밀어내지 않도록 정한 기본값이며 더 긴 입력은 TextArea 안에서 스크롤한다.
 - `ChatScreen`: `composer`와 타임라인을 분리한다. 기본 `scroll="content"`로 FlatList 등
@@ -66,7 +71,9 @@ Web host는 실제 남은 높이를 제공해야 한다(예: flex route의 `heig
 `height:100dvh`). Native host는 safe area와 탭/상단 navigation inset을 먼저 제외한다.
 HJM이 기종별 높이나 중첩 safe area를 추측하지 않는다. Native ChatScreen은 기존
 `KeyboardAvoiding` 또는 제품 keyboard adapter 하나로 감싸며 둘을 동시에 적용하지 않는다.
-ready 이외의 채팅에는 작성창을 숨겨 접근 제한·초기 로딩에서 전송 조작이 노출되지 않게 한다.
+채팅 작성창은 `ready`와 `empty`에서 유지하고 `loading`·`error`·`restricted`에서 숨긴다.
+빈 대화에서도 첫 메시지를 작성할 수 있어야 하기 때문이다. 전송 실패는 기존 `ready` 또는 `empty`와
+초안을 유지한 채 `notice`로 알린다. [채팅 화면 지침](usage/screens/common-chat.md#첫-메시지부터-실패-복구까지)을 따른다.
 
 ## 사용 예시
 

package/docs/social-compositions.md

@@ -1,6 +1,6 @@
 # 팔로우 프로필과 행사 참석 응답
 
-상태: 배포 · 적용: 미게시(1.20.0 이후) · 검토일: 2026-10-15
+상태: 배포 · 적용: npm 1.21.0 · 검토일: 2026-10-15
 
 Lucian 054(팔로우 프로필), 059(참석 응답)의 실제 mutation·실패 복구를 소비 앱마다
 다시 조립하지 않도록 기존 Card, Avatar, Button, AnimatedStatistic과 action-session을 합성한다.

package/docs/streaming-answer.md

@@ -1,6 +1,6 @@
 # 스트림 응답과 중지 계약
 
-검토일: 2026-10-15 · Lucian 086 · Storybook 배포 · 미게시
+검토일: 2026-10-15 · Lucian 086 · Storybook 배포 · npm 1.21.0
 
 `@hjmds/{design-contracts,react,react-native}/streaming-answer` 선택 subpath를 제공한다.
 고정 답변을 글자 단위로 재생하거나 타이머로 완료시키지 않고 실제 제공자 이벤트를 소비한다.

package/docs/task-controls.md

@@ -1,6 +1,6 @@
 # 선택 뒤 실제 작업을 실행하는 구성
 
-검토일: 2026-10-15 · Storybook 배포 · 미게시(1.20.0 이후) · Web/Native
+검토일: 2026-10-15 · Storybook 배포 · npm 1.21.0 · Web/Native
 
 Lucian 010·036·037·056의 공통 작업 흐름을 기존 Menu/Button/PasswordField/Progress/RadioGroup/Card로 합성한다.
 새 메뉴·입력·작업 상태 엔진을 만들지 않는다. 공개 진입점은 `@hjmds/{react,react-native}/task-controls`,

package/docs/toggle-feedback.md

@@ -1,6 +1,6 @@
 # 선택 버튼의 실제 반응과 수치
 
-상태: 배포 · 적용: 미게시(1.20.0 이후) · 검토일: 2026-10-15
+상태: 배포 · 적용: npm 1.21.0 · 검토일: 2026-10-15
 
 Lucian 006 구독 리플·012 북마크 리본·022 선택한 좋아요 burst는 같은 counted selection이다.
 구독·북마크·좋아요의 별도 상태 엔진을 만들지 않고, 기존 Button.selected와 AnimatedStatistic,

package/docs/transfer-task.md

@@ -1,6 +1,6 @@
 # 실제 전송 진행과 취소
 
-검토일: 2026-10-15 · Storybook 배포 · Web/Native · 미게시(1.20.0 이후)
+검토일: 2026-10-15 · Storybook 배포 · Web/Native · npm 1.21.0
 
 Lucian 004·083의 시간 기반 진행 시연을 실제 전송량·작업 종료·취소 신호와 연결하기 위해 기존 Button/Progress를 합성한다.
 단순 외부 controlled 진행 표시만 필요하면 Progress를 직접 쓴다. TransferTask는 시작 요청·중복 방지·AbortSignal·실패 재시도가 함께 필요할 때 쓴다.

package/docs/usage/README.md

@@ -6,7 +6,7 @@
 버튼 위치에서 시작해 구성·컴포넌트 지침으로 내려가고, 값은 토큰 지침에서 고른다.
 [선택 기준](SELECTION.md)으로 그대로 사용·공개 슬롯 확장·제품 전용 구성을 고른다. 설치 버전의 지침을 본다: `node_modules/@hjmds/design-contracts/docs/usage/`.
 제공 기준은 확인한 기본 API 버전이며 최초 출시 버전이 아니다. 구성·화면은 각 API 지침의 제공 버전을 확인한다.
-API 안정성은 1.20.0의 생성 manifest에서 읽은 정규(canonical) API 기준이다. 동반·선택형 확장은 개별 계약을 확인한다.
+API 안정성은 1.22.0의 생성 manifest에서 읽은 정규(canonical) API 기준이다. 동반·선택형 확장은 개별 계약을 확인한다.
 Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품 반영을 의미하지 않는다.
 `분류`는 Storybook 제목 `<배포|실험>/<단계>/<분류>/<항목>`의 셋째 마디이고, 토큰·구성·화면은 Storybook 메뉴와 같은 순서다.
 
@@ -54,7 +54,7 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
 | [Card](components/card.md) | 데이터 표시 | 문서 metadata·미리보기·내보내기 상태는 실험 구성 DocumentResource를 먼저 대조한다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [Carousel](components/carousel.md) | 데이터 표시 | 한 번에 카드 하나만 보이고 사용자가 순서대로 넘겨 보는 유한한 묶음에 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [Celebration](components/celebration.md) | 구성/직접 조작과 모션 | 목표 달성, 첫 완료처럼 드물게 일어나는 성공 순간에 한 번 터지는 색종이 효과에 쓴다. | 1.12.1 | Web · Native | 개별 API 계약 참조 | 배포 |
-| [Chart](components/chart.md) | 데이터 표시 | 수치의 흐름·비교·몫·모양·관계를 그림으로 읽게 할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | Web beta / Native beta | 배포 |
+| [Chart](components/chart.md) | 데이터 표시 | 수치의 흐름·비교·몫·모양·관계를 그림으로 읽게 할 때 쓴다. | 1.21.0 | Web · Native | Web beta / Native beta | 배포 |
 | [ChatMessage](components/chat-message.md) | 구성/정보 표시 | DM·대화 타임라인의 메시지 한 개에 쓴다. | 1.17.1 | Web · Native | 개별 API 계약 참조 | 배포 |
 | [ChatScreen](components/chat-screen.md) | 화면/소통 | DM·대화방처럼 헤더, 메시지 타임라인, 하단 작성창으로 이루어진 화면 한 장에 쓴다. | 1.17.1 | Web · Native | 개별 API 계약 참조 | 배포 |
 | [Checkbox](components/checkbox.md) | 입력 | 독립된 예/아니오 하나를 고르는 항목에 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
@@ -66,6 +66,7 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
 | [Combobox](components/combobox.md) | 입력 | 주어진 목록에서 하나를 고르는데 목록이 길어 입력으로 좁혀야 할 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [CommandPalette](components/command-palette.md) | 오버레이 | ⌘K 스타일로 앱 전체의 **행동**을 검색해 실행하는 모달에 쓴다. | 1.12.1 | Web | Web stable / Native unsupported | 배포 |
 | [CommentThreadScreen](components/comment-thread-screen.md) | 화면/소통 | 게시물·콘텐츠 아래의 댓글 화면 한 장에 쓴다. | 1.17.1 | Web · Native | 개별 API 계약 참조 | 배포 |
+| [CompositionLayout](components/composition-layout.md) | 화면/설정 | 카드·패널·화면 본문 안의 콘텐츠 묶음에 제목·배지·행동·안내·본문·하단 영역이 필요할 때 쓴다. | 미게시(1.22.0 이후) | Web · Native | 개별 API 계약 참조 | 배포 |
 | [Container](components/container.md) | 레이아웃 | 화면 본문의 최대 폭과 좌우(논리 방향) 여백을 맞출 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native stable | 배포 |
 | [ContentTransition](components/content-transition.md) | 시각 효과 | 같은 자리의 내용이 상태에 따라 바뀔 때(필터 결과 패널, 단계별 본문) 새 내용이 짧게 나타나도록 감싼다. | 1.12.1 | Web · Native | 개별 API 계약 참조 | 배포 |
 | [ContextMenu](components/context-menu.md) | 탐색 | Web에서 제품이 소유한 영역(카드·목록 행·캔버스)의 우클릭·길게 누르기·Shift+F10에 명령 목록을 띄울 때 쓴다. | 1.12.1 | Web · Native | Web stable / Native unsupported | 배포 |
@@ -184,13 +185,13 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
 | [단계별 드로어](compositions/family-drawer.md) | 입력과 작성 | 초대 → 설정 → 확인처럼 짧은 단계 2~5개를 현재 화면을 떠나지 않고 하단 시트 안에서 차례로 진행할 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [닫았다 열고 초안 이어쓰기](compositions/interaction-flow-draft.md) | 입력과 작성 | 메모·댓글처럼 시트에서 쓰던 글을 저장하지 않고 닫았다가 다시 열었을 때, 쓰던 초안을 그대로 이어 쓰게 할 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [댓글 작성](compositions/purpose-input-comment.md) | 입력과 작성 | 게시물·기록 아래에서 댓글이나 특정 댓글에 대한 답글을 남기고, 실패하면 글과 답글 대상을 그대로 남겨 다시 등록하게 할 때 쓴다. | 구성 API 지침 참조 | Web · Native | 구성 API별 | 배포 |
-| [데이터 해석과 가져오기](compositions/data-workflows.md) | 입력과 작성 | CSV 열 연결, 순차 퍼널, 가입 시점별 잔존율, 지표 상관, 목표, 분포 구간 탐색에 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [데이터 해석과 가져오기](compositions/data-workflows.md) | 입력과 작성 | CSV 열 연결, 순차 퍼널, 가입 시점별 잔존율, 지표 상관, 목표, 분포 구간 탐색에 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [메시지 작성](compositions/purpose-input-message.md) | 입력과 작성 | 대화 화면 하단에서 글과 사진 여러 장을 함께 보내고, 실패하면 글·사진·답장 대상을 그대로 남겨 다시 보내게 할 때 쓴다. | 구성 API 지침 참조 | Web · Native | 구성 API별 | 배포 |
-| [목록 편집과 복구](compositions/collection-editing.md) | 입력과 작성 | 목록의 제목을 바로 고치거나, 입력 행을 늘리거나, 여러 항목에 같은 행동을 하거나, 빈 검색에서 조건을 풀거나, 표의 열을 설정할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [목록 편집과 복구](compositions/collection-editing.md) | 입력과 작성 | 목록의 제목을 바로 고치거나, 입력 행을 늘리거나, 여러 항목에 같은 행동을 하거나, 빈 검색에서 조건을 풀거나, 표의 열을 설정할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [버튼에서 이어지는 편집](compositions/origin-dialog.md) | 입력과 작성 | 현재 화면의 항목을 짧게 편집하고 돌아올 때 출발 위치를 시각적으로 연결한다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
 | [빠른 메모 작성](compositions/floating-action-button.md) | 입력과 작성 | 스크롤되는 기록 목록 위에 떠 있는 생성 버튼으로 짧은 입력 대화상자를 열고, 저장하면 새 항목을 목록 맨 위에 넣을 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [선택 내용 검토와 수정](compositions/reference-review.md) | 입력과 작성 | 선택 내용을 검토하고 수정 후 명시적으로 확정 흐름이 필요할 때 쓴다. | 구성 API 지침 참조 | Web · Native | 구성 API별 | 배포 |
-| [선택과 실제 실행](compositions/task-controls.md) | 입력과 작성 | 선택만 하는 화면과 선택 뒤 실제 요청을 실행하는 화면의 상태를 혼동하지 않도록 도입했다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [선택과 실제 실행](compositions/task-controls.md) | 입력과 작성 | 선택만 하는 화면과 선택 뒤 실제 요청을 실행하는 화면의 상태를 혼동하지 않도록 도입했다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [인증번호 확인과 다시 입력](compositions/stea-otp-verify.md) | 입력과 작성 | 문자·메일로 받은 숫자 인증번호를 입력하고 서버 확인을 기다린 뒤, 틀리면 남은 횟수를 보여 주고 다시 받게 하는 흐름에 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [입력 시트](compositions/input-sheet.md) | 입력과 작성 | 현재 화면 위에 하단 시트를 띄워 짧은 입력(이름 바꾸기, 메모 한 줄)을 받고, 키보드가 올라와도 본문을 스크롤하며 완료 버튼에 닿게 할 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [입력을 유지하는 도구](compositions/context-toolbar.md) | 입력과 작성 | 작성 중인 입력을 보존한 채 선택적 도구를 펼쳐야 할 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
@@ -201,7 +202,7 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
 | [사진 촬영과 앨범 선택](compositions/photo-source.md) | 선택과 필터 | 명시적으로 선택 후 플랫폼 picker 실행 흐름이 필요할 때 쓴다. | 구성 API 지침 참조 | Web · Native | 구성 API별 | 배포 |
 | [선택 후 적용·취소](compositions/interaction-flow-apply.md) | 선택과 필터 | 표시 방식·정렬·필터처럼 시트에서 여러 번 바꿔 본 뒤 적용을 눌러야 화면에 반영되고, 취소하거나 닫으면 기존 선택을 유지해야 할 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [시간 선택](compositions/time-selection.md) | 선택과 필터 | 알림 시각·마감 시각처럼 하루 안의 시각 하나를 시·분 두 Select로 나눠 고르게 할 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
-| [펼치는 검색과 실제 메시지 답장](compositions/communication.md) | 선택과 필터 | 상단 검색 버튼에서 검색 영역을 펼치거나 채팅의 실제 메시지를 선택해 답장을 전송할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [펼치는 검색과 실제 메시지 답장](compositions/communication.md) | 선택과 필터 | 상단 검색 버튼에서 검색 영역을 펼치거나 채팅의 실제 메시지를 선택해 답장을 전송할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [보관함과 페이지 이동](compositions/web-navigation.md) | 탐색과 이동 | Web에서 상위 보관함 → 하위 모음으로 들어가고, 그 모음의 긴 목록을 페이지 단위로 넘겨 보는 탐색에 쓴다. | 1.12.1 | Web | 구성 API별 | 배포 |
 | [펼침과 메뉴](compositions/disclosure.md) | 탐색과 이동 | Web에서 내용을 숨겼다 펼치거나(Collapsible), 대상에 붙은 작업 메뉴를 우클릭·키보드로 열거나(ContextMenu), 데스크톱 앱처럼 상단 메뉴 막대를 두는(Menubar) 세 방식을 각각 보여 주는 모음이다. | 1.12.1 | Web | 구성 API별 | 배포 |
 | [대화 메시지](compositions/common-message.md) | 정보 표시 | 말풍선 하나하나에 반응·답장·원문 이동·전송 실패 후 다시 보내기를 붙일 때 쓴다. | 구성 API 지침 참조 | Web · Native | 구성 API별 | 배포 |
@@ -215,25 +216,25 @@ Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품
 | [질감 비교](compositions/texture-comparison.md) | 정보 표시 | 기존 반복 점 grain과 불규칙한 정적 noise를 같은 배경·강도로 비교할 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
 | [추가해도 유지되는 목록](compositions/live-list.md) | 정보 표시 | 입력 중인 목록에 새 데이터가 추가되거나 순서가 바뀌어도 기존 초안과 항목의 정체성을 유지할 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
 | [카드 묶음과 긴 목록](compositions/data-layouts.md) | 정보 표시 | 많은 항목을 화면에 늘어놓을 방식을 고를 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
-| [팔로우 프로필과 행사 참석 응답](compositions/social-compositions.md) | 정보 표시 | 프로필 팔로우나 행사 참석 응답의 실제 요청과 수치의 실패 복구가 필요할 때 사용한다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [팔로우 프로필과 행사 참석 응답](compositions/social-compositions.md) | 정보 표시 | 프로필 팔로우나 행사 참석 응답의 실제 요청과 수치의 실패 복구가 필요할 때 사용한다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [그림과 시작 안내](compositions/illustrated-outcome.md) | 피드백과 복구 | 빈 목록에서 시작을 안내하고 짧은 온보딩을 거쳐 결과를 보여 줄 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
 | [백그라운드 작업 상태](compositions/activity-status.md) | 피드백과 복구 | 사용자가 다른 화면을 보는 동안 계속되는 작업 하나(검수·생성·업로드)의 진행을 헤더의 작은 칩으로 알리고, 칩을 누르면 같은 작업의 패널 Toast가 열려 단계와 결과를 보여 줄 때 쓴다. | 미게시(1.17.2 이후) | Web · Native | 구성 API별 | 배포 |
 | [버튼 완료 피드백](compositions/action-feedback.md) | 피드백과 복구 | 입력을 유지하며 저장의 진행·성공·재시도 가능 실패를 보여 줄 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
 | [변경 저장과 이탈 확인](compositions/reference-settings.md) | 피드백과 복구 | 저장값과 편집 초안을 비교해 이탈 확인 흐름이 필요할 때 쓴다. | 구성 API 지침 참조 | Web · Native | 구성 API별 | 배포 |
 | [보관과 실행 취소](compositions/action-recovery-undo.md) | 피드백과 복구 | 보관·숨기기·목록에서 빼기처럼 제품이 역연산을 제공하는 작업 뒤에, 같은 자리에서 실행 취소를 주고 그 복구 요청이 성공해야 화면을 되돌릴 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [선택과 오류 복구](compositions/upload-recovery.md) | 피드백과 복구 | 파일 선택과 전송 상태의 취소·재시도를 연결할 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
-| [스트림 응답과 중지](compositions/streaming-answer.md) | 피드백과 복구 | 실제 provider가 보내는 응답 delta를 표시하고 중지·재생성·오류를 같은 영역에서 제공할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [스트림 응답과 중지](compositions/streaming-answer.md) | 피드백과 복구 | 실제 provider가 보내는 응답 delta를 표시하고 중지·재생성·오류를 같은 영역에서 제공할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [저장과 재시도](compositions/action-recovery-save.md) | 피드백과 복구 | 입력한 내용을 서버에 저장하는 폼 한 덩어리에서 저장 중 중복 실행을 막고, 실패하면 입력을 지우지 않은 채 제출했던 값 그대로 다시 보낼 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
-| [전송 진행과 취소](compositions/transfer-task.md) | 피드백과 복구 | 실제 다운로드·업로드·작업의 시작/대기/진행·취소·실패 복구를 한 구성으로 제공할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [전송 진행과 취소](compositions/transfer-task.md) | 피드백과 복구 | 실제 다운로드·업로드·작업의 시작/대기/진행·취소·실패 복구를 한 구성으로 제공할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [중단해도 남는 현재 상태](compositions/expo-interactions.md) | 피드백과 복구 | 버튼으로 상태를 빠르게 바꾸거나 전환 도중 내용을 닫아도 현재 상태가 바로 보이고 남아야 하는 영역에 쓴다. | 1.12.1 | Native | 구성 API별 | 배포 |
 | [즉시 반영과 복구](compositions/action-recovery-optimistic.md) | 피드백과 복구 | 북마크·좋아요·알림 켜기처럼 되돌려도 피해가 없는 저위험 토글을 누르는 즉시 화면에 반영하고, 서버가 실패하면 직전 확인 값으로 되돌릴 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [처리 단계와 재시도](compositions/stea-order-progress.md) | 피드백과 복구 | 주문·신청처럼 서버가 단계를 하나씩 확정하는 처리 과정을 보여 주고, 확정에 실패하면 같은 단계를 다시 요청하게 할 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [캐릭터와 시작 행동](compositions/stea-pixel-empty.md) | 피드백과 복구 | 아직 만든 것이 없는 첫 빈 화면에 제품 캐릭터를 움직여 보이고 첫 행동 하나로 이끌 때 쓴다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [끌기·밀기·화면 전환](compositions/interaction-adapters.md) | 직접 조작과 모션 | 순서 바꾸기·행 작업·내용 전환·카드 넘기기·달성 축하·카드 확대 화면 전환 같은 선택형 상호작용 어댑터를 한 화면에서 함께 쓸 때, 각 어댑터를 어디에 놓고 무엇으로 감싸야 하는지 확인하는 구성이다. | 1.12.1 | Web · Native | 구성 API별 | 배포 |
 | [높이가 이어지는 패널](compositions/adaptive-content.md) | 직접 조작과 모션 | 패널의 길이가 달라질 때 아래 행동이 새 높이로 이동해야 하는 작은 내용 영역에 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
-| [미디어 재생 제어](compositions/media-transport.md) | 직접 조작과 모션 | 실제 오디오/영상 엔진의 재생·일시 정지·유한 길이 탐색을 같은 구조로 제공할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
-| [베지어·단축키 편집 도구](compositions/authoring-tools.md) | 직접 조작과 모션 | 제품 안의 모션 편집기에서 두 제어점의 곡선을 조정하거나 웹 앱의 사용자 단축키를 실제로 등록할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
-| [선택 반응 버튼](compositions/toggle-feedback.md) | 직접 조작과 모션 | 구독·북마크·좋아요에서 선택 요청과 실제 인원 수의 실패 복구, 국소 모션이 함께 필요할 때 쓴다. | 미게시(1.20.0 이후) | Web · Native | 구성 API별 | 배포 |
+| [미디어 재생 제어](compositions/media-transport.md) | 직접 조작과 모션 | 실제 오디오/영상 엔진의 재생·일시 정지·유한 길이 탐색을 같은 구조로 제공할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
+| [베지어·단축키 편집 도구](compositions/authoring-tools.md) | 직접 조작과 모션 | 제품 안의 모션 편집기에서 두 제어점의 곡선을 조정하거나 웹 앱의 사용자 단축키를 실제로 등록할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
+| [선택 반응 버튼](compositions/toggle-feedback.md) | 직접 조작과 모션 | 구독·북마크·좋아요에서 선택 요청과 실제 인원 수의 실패 복구, 국소 모션이 함께 필요할 때 쓴다. | 1.21.0 | Web · Native | 구성 API별 | 배포 |
 | [선택 배경 이동](compositions/selection-motion.md) | 직접 조작과 모션 | 짧은 단일 선택의 현재 항목을 이어지는 배경으로 보여 줄 때 쓴다. | 1.14.0 | Web · Native | 구성 API별 | 배포 |
 | [숫자 변화와 메뉴 변형](compositions/optional-motion.md) | 직접 조작과 모션 | 선택 설치 모션(숫자 자리 단위 변화, 메뉴 형태 변환)을 기존 컴포넌트 자리에 끼워 넣을 때 쓴다. | 1.12.1 | Web | 구성 API별 | 배포 |
 | [이미지·시트·키보드 조작](compositions/optional-adapters.md) | 직접 조작과 모션 | Native 앱 한 화면에서 이미지 확대 보기, 끌어서 높이를 바꾸는 시트, OS 길게 누르기 메뉴, 키보드를 따라 올라가는 하단 행동을 함께 쓸 때 provider 중첩 순서와 각 요소의 자리를 확인하는 구성이다. | 1.12.1 | Native | 구성 API별 | 배포 |

package/docs/usage/SELECTION.md

@@ -1,34 +1,47 @@
 # 화면과 구성 선택
 
-검토일: 2026-10-13
+검토일: 2026-10-15
 
-2026-10-13 설계 점검에서 화면 이름만으로 공통 화면을 강제하면 저장·스크롤·권한 흐름이
-다른 제품까지 같은 틀에 맞출 수 있음을 확인했다. 화면 → 구성 → 컴포넌트 → 토큰 순으로
-찾되, 아래 행동과 소유권이 맞는지 먼저 판단한다.
+2026-10-15 사용자 요청: 메시지·댓글에서 같은 HJM 부품을 사용해도 앱이 기본 배치와 상태 표시를
+다시 조립하면서 UI가 달라졌다. 이 선택 기준은 모든 화면·구성에 적용한다. **공통 구조는 HJM이
+완성해서 제공하고, 앱은 데이터·문구·브랜드·권한·추가 기능을 연결한다.**
 
 ## 선택 기준
 
 | 선택 | 조건 | 구현 경로 |
 | --- | --- | --- |
-| 그대로 사용 | 영역 순서, 저장 시점, 상태 교체, 스크롤 소유가 제품과 맞는다 | 공통 화면에 데이터·문구·콜백을 연결 |
-| 공개 슬롯으로 확장 | 공통 행동은 같고 헤더·본문 콘텐츠·보조 행동만 다르다 | header·notice·footer 등 해당 API의 공개 슬롯 사용 |
-| 제품 전용 구성 | 저장·탐색·권한 흐름 또는 가상화·스크롤 구조가 공개 API로 표현되지 않는다 | 기존 HJM 구성·컴포넌트로 제품에서 조합하고 차이를 기존 코드/작업 기록에 설명 |
-
-공개 슬롯으로 해결할 수 있는 틀·상태 엔진은 복제하지 않는다. 제품 전용 구성도 semantic token,
-접근성·입력·실패 복구 계약을 유지한다. 내부 selector나 제거된 style prop은 확장 경로가 아니다.
-여러 제품이 공유하는 공백이면 공통 API의 의미 있는 축으로 검토한다. 별도 승인·ADR은 자동 요구하지 않는다.
-
-## 선택 전에 확인할 것
-
-- **저장:** 즉시 저장인지 일괄 저장인지, pending의 소유자와 실패 시 마지막 확인값·초안이 어떻게 남는지.
-- **스크롤:** host와 본문 중 누가 스크롤하는지, 목록 가상화·페이지 추가·위치 복구가 필요한지.
-- **상태:** 최초 조회의 본문 교체와 저장/재조회 오류의 비차단 notice가 구분되는지.
-- **권한:** 접근 제한에서 작성·전송을 숨길지, 읽기와 쓰기 권한이 다른지.
-- **플랫폼:** Web 포커스와 Native 키보드·safe area를 누가 처리하는지. 같은 inset·스크롤을 중복 적용하지 않는다.
-
-SettingsScreen의 행별 즉시 저장은 행 콜백에 제품 mutation을 연결한다. 일괄 저장도 공개 footer와
-notice로 표현되면 같은 API를 사용한다. CommentThreadScreen의 데이터 구조나 스크롤이 대규모
-가상화에 맞지 않으면 이름만 보고 강제하지 않고 ScreenLayout과 적합한 목록을 조합한다.
+| 그대로 사용 | 제공하는 화면·구성이 제품의 목적에 맞는다 | HJM 공개 API에 데이터·문구·콜백 연결 |
+| 공개 슬롯으로 확장 | 기본 흐름은 같고 제품 콘텐츠·추가 행동이 필요하다 | 정해진 슬롯에 콘텐츠를 공급하고 배치·상태 엔진은 HJM 유지 |
+| 공통 API 보완 | 가상화·새 영역·동작을 기존 API로 표현할 수 없다 | HJM의 기존 구현을 확장하거나 공통 하위 구성을 공개한 뒤 앱에서 사용 |
+| 제품 고유 기능 | 지도·편지·도구 실행 등 제품만의 도메인 경험이다 | HJM의 화면·구성 안 콘텐츠 슬롯에 연결. 제품 기능을 이유로 공통 헤더·입력·상태·배지를 복제하지 않음 |
+
+## 소유권
+
+| HJM이 제공하는 것 | 앱이 공급하는 것 |
+| --- | --- |
+| 영역 순서, 간격·정렬·폭, 헤더·본문·footer, 반응형 배치 | 제목·문구·브랜드 설정·실제 콘텐츠 |
+| 목록 항목, 아바타·시각·배지·반응·메뉴의 기본 자리 | 작성자·시각·배지 의미/값·반응 종류·메뉴 항목 |
+| 초기 로딩·빈 상태·오류의 영역 중앙 표시, 비차단 안내 자리 | 조회 상태·오류 문구·재시도 콜백 |
+| 작성창·답장 대상·첨부·전송 상태, 확장 영역 배치 | 초안·수신 결과·사진 권한/업로드·제품 도구 카드 |
+| 펼침·전환·포커스·제스처·접근성 표현 | 권한 판정·라우팅·서버 요청·저장·도메인 규칙 |
+
+슬롯은 콘텐츠와 추가 기능의 연결점이다. header·footer·children이 ReactNode라는 이유로
+제품에서 동일한 기본 구조를 다시 만드는 허용 경로로 해석하지 않는다. 배지는 의미·값을 앱이
+결정하고 위치·간격·넘침 표현은 해당 HJM 구성과 Badge 계약을 따른다.
+
+## 구현과 확인
+
+- 화면 → 구성 → 컴포넌트 → 토큰 순으로 찾고 기존 공개 API와 양 renderer를 먼저 확인한다.
+- 기존 API가 부족하면 HJM 내부 구현을 분리·확장한다. 같은 구성에 대한 앱별 대체 엔진을 만들지 않는다.
+  가상화 host는 제품이 연결할 수 있지만 댓글 행은 `CommentThreadRow`처럼 공통 표시를 재사용한다.
+- 웹/RN은 플랫폼 adapter가 다르더라도 영역 순서·기본값·상태 의미를 공유한다. Native safe area·키보드와
+  Web host 높이는 외부 환경 입력이며 같은 inset·스크롤을 두 번 적용하지 않는다.
+- 서버 실패·초안·권한은 제품 상태가 정본이다. HJM은 성공을 추정하거나 초안을 임의로 지우지 않는다.
+- Showcase는 HJM 공개 구현에 fixture를 연결한다. fixture의 예시 데이터·지연·브랜드·제품 메뉴를
+  운영 기능으로 복사하지 않는다. 공개되지 않은 예제 조합은 먼저 HJM API로 옮겨야 하며,
+  문서가 있다는 이유로 재사용 구현이 완성됐다고 보고하지 않는다.
+- 기존 소비 화면은 기능을 보존하며 이관한다. 설치 버전의 지원 여부를 확인하고 HJM 변경·제품 채택·
+  화면 확인·게시를 구분한다. 새로운 전수 검사·승인 게이트를 추가하지 않는다.
 
 ## 상태와 버전 읽기
 

package/docs/usage/STANDARD.md

@@ -9,6 +9,11 @@
 
 ## 1. 공통
 
+화면·구성은 [소유권](SELECTION.md#소유권)에 맞춰 HJM 공개 구현과 앱의 데이터/확장 입력을 구분한다.
+기본 배치·상태·배지·상호작용을 제품이 재조립하도록 안내하지 않는다. 실행 예제만 있는 조합은
+공개 구현 여부를 명시하고, 예제를 앱에 복사하는 대신 기존 HJM API를 보완한다.
+
+
 - 파일 위치: `usage/<단계 폴더>/<영어 kebab-case>.md`. 컴포넌트는 공개 계약 이름의 kebab(`QRCode` → `qr-code`).
 - 제목 한 줄 `# <이름>`. 컴포넌트는 공개 계약 이름(`# Button`), 나머지는 Storybook의 마지막 이름(`# 간격`).
 - 제목 바로 아래 **머리말 목록**을 이 순서·이 키로 둔다. 값이 없으면 `없음`.

package/docs/usage/components/button.md

@@ -126,7 +126,7 @@ import { Button } from "@hjmds/react-native/actions";
 2026-10-10 사용자 요청으로 선택 시 추가되는 테두리를 제거했다. `selected` 접근성 상태와
 contentBrand 글자·아이콘 색은 유지하며 키보드 focus outline은 선택과 별도로 유지한다.
 
-## 저장 확정 라벨과 프레임 예약 (미게시 · 2026-10-15)
+## 저장 확정 라벨과 프레임 예약 (npm 1.21.0 · 2026-10-15)
 
 `completion={{ confirmed, label }}`는 실제 mutation의 확정 결과를 표시한다. 두 라벨의
 공간을 처음부터 예약하므로 `children`을 저장 중/완료 문구로 교체하지 않는다.

package/docs/usage/components/chart.md

@@ -3,7 +3,7 @@
 - 단계: 컴포넌트
 - 상태: 배포
 - 지원: Web · Native
-- 적용: 미게시(1.20.0 이후)
+- 적용: 1.21.0
 - 검토일: 2026-10-15
 - 근거: [Chart](../../chart.md), `src/chart.ts`(`chartRecipe`, `describeChart`, `resolveLineGeometry`), `src/dataviz.ts`(`resolveDatavizSeriesColor`, `datavizChromeTokens`)
 - 스토리북: `배포/컴포넌트/데이터 표시/차트`

package/docs/usage/components/comment-thread-screen.md

@@ -28,6 +28,7 @@
 | 이름 | 역할 | Web | Native |
 | --- | --- | --- | --- |
 | `CommentThreadScreen` | 화면 조합 | `/screen-flows` | `/screen-flows` |
+| `CommentThreadRow` | 가상화 목록에서도 같은 댓글 행 재사용(1.23.0) | `/screen-flows` | `/screen-flows` |
 | `CommentThreadItem`(타입) | 댓글 한 개의 데이터 | `/screen-flows` | `/screen-flows` |
 
 루트 barrel에는 없다. optional native peer를 요구하지 않는다.
@@ -118,7 +119,7 @@ threadHeader도 댓글과 함께 숨겨지므로 항상 보여야 하는 안내
   `TypeError`가 난다. 답글의 답글은 표현하지 않으므로 제품이 최상위로 평탄화한다.
 - 모든 문구·시각·좋아요 수 라벨은 제품 i18n에서 만든다. `likeCountLabel`이 빈 문자열이면 그리지 않는다.
 - 좋아요 저장·길게 누르기·이모지 선택, 답글 권한(`canReply`/`replyDisabled`)은 제품 데이터로 정한다.
-- 기본 `scroll`은 `ScreenLayout`과 같은 `screen`이다. 댓글을 가상화 목록으로 그리면 직접 `scroll="content"`를 준다.
+- 기본 `scroll`은 `ScreenLayout`과 같은 `screen`이다. 이 화면 자체는 가상화하지 않는다. 가상화가 필요하면 `ScreenLayout scroll="content"` 안 플랫폼 목록에 `CommentThreadRow`를 연결한다. `scroll="content"`만 바꾼다고 이 화면이 가상화 목록이 되지는 않는다.
 
 ## 플랫폼 차이
 
@@ -145,3 +146,5 @@ trigger로 공급한다. `actions`는 자유 노드 슬롯을 유지하고 메
 
 2026-10-12 Spint의 작성자 없는 개발 댓글에서 빈 머리글이 본문을 아래로 밀었다.
 `author`와 `timeLabel`이 모두 비면 머리글 행을 생략해 avatar와 본문 시작 높이를 맞춘다. Web·Native 동일하다.
+
+`CommentThreadRow`는 `item`, `onLike`, `onReply`, `replyLabel`을 받으며 화면 내부도 같은 구현을 사용한다. 가상화 host는 항목 ID·페이지·스크롤을 연결하고 댓글 내부 간격·작성자·본문·시각·반응·메뉴 배치를 복제하지 않는다. `bodyText`가 있으면 작성자와 본문을 이어 쓰고 시각을 하단에, 없으면 작성자와 시각을 머리글에 표시한다.

package/docs/usage/components/composition-layout.md

@@ -0,0 +1,92 @@
+# CompositionLayout
+
+- 단계: 컴포넌트
+- 상태: 배포
+- 지원: Web · Native
+- 적용: 1.23.0
+- 검토일: 2026-10-15
+- 근거: 양 renderer `src/screens.tsx`, [소유권](../SELECTION.md#소유권). 제품별 제목·배지·상태·하단 영역 재조립을 줄이기 위해 기존 Stack·상태 계약을 합성한다.
+- 스토리북: `배포/화면/설정/알림 설정`
+
+## 언제 쓰나
+
+카드·패널·화면 본문 안의 콘텐츠 묶음에 제목·배지·행동·안내·본문·하단 영역이 필요할 때 쓴다.
+전용 구성 API가 있으면 그것을 우선 사용한다. 단순 Stack은 배치 primitive이며 이 구성은 영역 순서와 상태 교체를 소유한다.
+
+## 쓰지 않을 때
+
+| 상황 | 대신 쓸 것 |
+| --- | --- |
+| 전체 화면 높이와 고정 헤더/footer·스크롤 | [ScreenLayout](screen-layout.md) |
+| 댓글·채팅 | [CommentThreadScreen](comment-thread-screen.md)·[ChatScreen](chat-screen.md) |
+| 장식 표면 | [Surface](surface.md)를 바깥에 사용 |
+
+## 공개 이름과 import
+
+| 이름 | 역할 | Web | Native |
+| --- | --- | --- | --- |
+| `CompositionLayout` | 구성 골격 | `/screens` | `/screens` |
+
+## 최소 사용 예
+
+```tsx
+// Web
+import { CompositionLayout } from "@hjmds/react/screens";
+<CompositionLayout title={title} badge={badge} actions={actions}
+  notice={notice} state={state} stateAction={retry} footer={footer}>
+  {content}
+</CompositionLayout>
+```
+
+```tsx
+// Native
+import { CompositionLayout } from "@hjmds/react-native/screens";
+<CompositionLayout title={title} badge={badge} actions={actions}
+  notice={notice} state={state} stateAction={retry} footer={footer}>
+  {content}
+</CompositionLayout>
+```
+
+## 축과 기본값
+
+| prop | 값 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| title / description | string | 없음 | 제품 지역화 문구 |
+| leading / badge / actions | ReactNode | 없음 | 앞 콘텐츠·제목 옆 배지·끝 행동. 자리와 간격은 HJM |
+| notice | ReactNode | 없음 | 초안을 유지하는 비차단 안내 |
+| children | ReactNode | 없음 | 제품 도메인 콘텐츠 또는 HJM 전용 구성 |
+| footer | ReactNode | 없음 | 본문 다음 보조/주 행동; 고정은 바깥 ScreenLayout 소유 |
+| state | ScreenContentState | ready | 본문 교체; loading은 Spinner만 표시 |
+| stateAction | ReactNode | 없음 | 본문 상태와 중앙 정렬되는 복구 행동 |
+| layoutStyle | HjmCompositionStyleProp | 없음 | 부모가 제공하는 영역 크기·배치 |
+
+## 배치
+
+```text
+leading → 제목·배지 / 설명 → actions
+notice
+본문 또는 중앙 상태·복구
+footer
+```
+
+| 항목 | 값 | 근거 |
+| --- | --- | --- |
+| 크기 | 부모의 가용 폭·높이 | 별도 고정 높이나 스크롤 없음 |
+| 간격 | 영역 spacing.md 16, 제목 행 spacing.sm 12, 배지 spacing.xs 8, 제목/설명 spacing.xxs 4 | Stack props |
+| 순서·정렬 | 머리글 → notice → 본문 → footer | renderer |
+| 고정·스크롤 | 부모 HJM 화면이 소유, 자체 ScrollView 없음 | renderer |
+| 좁은 폭·큰 글자 | 머리글·배지 줄바꿈, 본문 폭 축소 허용 | flexWrap·minWidth |
+
+## 꼭 지킬 것
+
+- 데이터·권한·초안·저장·배지 의미는 제품에서 연결한다. 전송 성공을 추정하거나 초안을 자동으로 지우지 않는다.
+- 본문 교체는 초기 조회에, 기존 입력을 유지하는 실패는 notice에 연결한다.
+- 중앙 상태는 이 구성에 주어진 영역을 기준으로 한다. 화면 높이를 임의 여백으로 흉내 내지 않는다.
+- 별도 스크롤을 중첩하지 않는다. 기본 구조를 children 안에서 다시 만들지 않는다.
+
+## 플랫폼 차이
+
+| 항목 | Web | Native |
+| --- | --- | --- |
+| 의미 | Heading·alert/status | header·accessibilityLiveRegion |
+| 환경 | 부모 화면의 높이 | 부모 화면의 safe area·키보드 |

package/docs/usage/components/data-table.md

@@ -194,3 +194,7 @@ const sorted = sortDataTableRows(players, sort, (player, columnId) => toDataTabl
 - 2026-10-14 작성 시점에 Native renderer와 Native Storybook 등록은 구현 중이다. Native 행은 renderer가 들어온 뒤 실제 Props와 다시 대조한다.
 - `cellStyle`은 셀마다 호출된다. 백분위 표본(열 전체 값)은 함수 밖에서 한 번 만들어 두고 셀에서는 조회만 한다.
 - `columnGroups`의 묶음은 고정 열 경계를 넘지 않게 나눈다. Web은 묶음 안 열이 모두 고정일 때만 묶음 머리 칸도 고정된다.
+
+### ComparisonTable 중복 머리글
+
+2026-10-14 야잘알 비교 화면에서 상단 선택 카드의 선수·시즌이 표에 반복되어 읽는 흐름을 끊었다. Web/Native의 `showSideNames={false}`로 시각 머리글만 숨긴다(기본 `true`). `sides`는 계속 전달하며 각 행의 접근성 이름에는 양쪽 이름과 수치를 보존한다. 상단에서 양쪽 대상을 식별할 수 있을 때만 사용한다. 행 여백과 막대 간격을 넓히고 지표·비우세 수치의 대비를 유지해 기록을 구분한다.

package/docs/usage/components/screen-layout.md

@@ -70,6 +70,7 @@ import { ScreenLayout } from "@hjmds/react-native/screens";
 | prop | 값 | 기본값 | 설명 |
 | --- | --- | --- | --- |
 | `title` | `string` | 필수 | 화면 제목. `header`를 주면 접근성 이름으로만 쓴다 |
+| `titleBadge` | `ReactNode` | 없음 | 기본 제목 바로 옆 배지. 값·의미는 제품, 간격·정렬은 HJM. `header` 교체 또는 제목 숨김이면 그리지 않는다. 1.23.0 추가 API |
 | `header` | `ReactNode` | 없음 | 기존 navigator 헤더 유지용. 주면 기본 헤더(`leading`·제목·`description`·`actions`)를 그리지 않는다 |
 | `description` | `string` | 없음 | 제목 아래 muted 설명 |
 | `leading` · `actions` | `ReactNode` | 없음 | 제목 앞(뒤로 가기)·뒤(도구) 슬롯 |

package/docs/usage/components/search-screen.md

@@ -154,6 +154,7 @@ import { SearchScreen } from "@hjmds/react-native/screen-flows";
 | `suggestedQueries` | `{ title, items: string[] }` | 없음 | 검색 전(최근 검색 아래)과 검색어 때문인 0건 아래 Chip 줄. 누르면 확정 |
 | `suggestions` | `{ items: { query, match?: { start, end } }[], commitLabel(query), countLabel(count), icon?, maxVisible? }` | 없음 | 입력 중 본문: 첫 행 `commitLabel`(그대로 확정) + 제안 최대 6행. `match` 범위는 굵게(Web). 개수를 `countLabel`로 낭독 |
 | `resultSummary` | `{ count: number \| null, countLabel(count), loadingLabel, sort?, notice?, empty?: { title, description? } }` | 없음 | 결과 머리. `count = null`이면 개수 자리 Skeleton + `children` 대신 로딩 4행. `notice`는 개수 위(이전 결과 유지 오류). `count = 0`이면 개수 대신 `empty`로 EmptyState |
+| `resultSummary.countVisibility` | `visible` · `hidden` | `visible` | `hidden`은 시각적 개수·개수 Skeleton만 숨기며 정렬·로딩 행·빈 상태·접근성 개수 알림은 유지한다. 2026-10-14 야잘알 검색 결과에서 개수 없는 목록을 요청해 추가한 선택형 축(미게시)이다 |
 | `resultSummary.sort` | `{ label, triggerLabel, value, options: { id, label }[], onChange(id), icon? }` (Native는 `dismissLabel` 추가) | 없음 | 결과 머리 끝 Menu(single). 바꾸면 본문을 맨 위로 |
 | `appliedFilters` | `{ items: { key, label }[], removeLabel(label), onRemove(key), clearAllLabel, onClearAll(), removeIcon? }` | 없음 | 결과 머리 아래 × 칩 + `모두 해제`. 개수는 trigger 이름과 0건 원인 판정에도 쓴다 |
 | `filterSheet` | `{ open, onOpenChange(open), title, value, onApply(next), count(draft): number \| null, reset(draft), isDefault(draft), renderContent(draft, setDraft), labels: { close, reset, apply(count) }, size?, trigger? }` | 없음 | 열 때 `value`를 초안으로 복사, 닫히면 초안을 버림, 주 행동에서만 `onApply`. `count = 0`이면 주 행동 비활성, `isDefault`면 초기화 비활성. `trigger`를 주면 칩 줄 맨 앞에 `label(적용 개수)` Chip |