@hjmds/design-contracts 1.22.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.22.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.22.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.22.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/generated/component-maturity.md

@@ -1,6 +1,6 @@
 # Component maturity and evidence manifest
 
-> Generated from `@hjmds/design-contracts` 1.22.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.22.0",
+  "designSystemVersion": "1.23.0",
   "source": "packages/design-contracts/docs/generated/showcase-manifest.json",
   "surfaces": {
     "web": {
       "packageName": "@hjmds/react",
-      "packageVersion": "1.22.0",
+      "packageVersion": "1.23.0",
       "activeComponents": 104,
       "claimedComponents": 103,
       "completeScenarioComponents": 103,
@@ -5672,7 +5672,7 @@
     },
     "native": {
       "packageName": "@hjmds/react-native",
-      "packageVersion": "1.22.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.22.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.22.0",
+  "designSystemVersion": "1.23.0",
   "packageName": "@hjmds/design-contracts",
   "components": [
     {

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/usage/README.md

@@ -6,7 +6,7 @@
 버튼 위치에서 시작해 구성·컴포넌트 지침으로 내려가고, 값은 토큰 지침에서 고른다.
 [선택 기준](SELECTION.md)으로 그대로 사용·공개 슬롯 확장·제품 전용 구성을 고른다. 설치 버전의 지침을 본다: `node_modules/@hjmds/design-contracts/docs/usage/`.
 제공 기준은 확인한 기본 API 버전이며 최초 출시 버전이 아니다. 구성·화면은 각 API 지침의 제공 버전을 확인한다.
-API 안정성은 1.21.0의 생성 manifest에서 읽은 정규(canonical) API 기준이다. 동반·선택형 확장은 개별 계약을 확인한다.
+API 안정성은 1.22.0의 생성 manifest에서 읽은 정규(canonical) API 기준이다. 동반·선택형 확장은 개별 계약을 확인한다.
 Storybook 배포/실험은 예제 분류이며 npm 게시·기기 검증·제품 반영을 의미하지 않는다.
 `분류`는 Storybook 제목 `<배포|실험>/<단계>/<분류>/<항목>`의 셋째 마디이고, 토큰·구성·화면은 Storybook 메뉴와 같은 순서다.
 
@@ -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 | 배포 |

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/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/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/compositions/action-feedback.md

@@ -4,12 +4,14 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
 - 스토리북: `배포/구성/피드백과 복구/버튼 완료 피드백`
 
 승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 입력을 유지하며 저장의 진행·성공·재시도 가능 실패를 보여 줄 때 쓴다. 화면 wrapper 없이 아래 공개 컴포넌트와 `resolveSaveFeedback`을 조합한다.

package/docs/usage/compositions/action-recovery-optimistic.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [공통 실행과 실패 복구](../../action-session.md), `src/action-session.ts`, `showcase/web/src/patterns/action-recovery-previews.tsx`, `showcase/native/src/action-recovery-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 동작/즉시 반영과 복구`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/피드백과 복구/즉시 반영과 복구`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 북마크·좋아요·알림 켜기처럼 되돌려도 피해가 없는 저위험 토글을 누르는 즉시 화면에 반영하고, 서버가 실패하면 직전 확인 값으로 되돌릴 때 쓴다.
@@ -28,7 +30,7 @@
 | `Button` 다시 반영 | error일 때만 나타나는 보조 행동, `tone="secondary"` | [Button](../components/button.md) |
 | `Text` | 상태 문구. Web `role="status"`, Native 접근성 알림 | [Text](../components/text.md) |
 | `Stack` | 세로 쌓기 `gap="md"` | [Stack](../components/stack.md) |
-| `Container` · `ScrollView` | 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
+| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
 
 스토리의 `tone="ghost"` "서버에서 새 상태 불러오기"는 `reset`이 지난 응답을 버리는 것을 보여 주는 데모 버튼이다.
 제품에서는 이 동작을 버튼이 아니라 재조회·계정 변경 시점에 연결한다. "다음 요청 실패시키기"와 350ms 지연도 데모 전용이다.

package/docs/usage/compositions/action-recovery-save.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [공통 실행과 실패 복구](../../action-session.md), `src/action-session.ts`, `showcase/web/src/patterns/action-recovery-previews.tsx`, `showcase/native/src/action-recovery-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 동작/저장과 재시도`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/피드백과 복구/저장과 재시도`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 입력한 내용을 서버에 저장하는 폼 한 덩어리에서 저장 중 중복 실행을 막고, 실패하면 입력을 지우지 않은 채 제출했던 값 그대로 다시 보낼 때 쓴다.
@@ -30,7 +32,7 @@
 | `Button` 다시 저장 | error일 때만 나타나는 보조 행동, `tone="secondary"` | [Button](../components/button.md) |
 | `Text` | 상태 문구(진행·성공·실패). Web `role="status"`, Native 접근성 알림. 확정 값 줄(선택) | [Text](../components/text.md) |
 | `Stack` | 세로 쌓기 `gap="md"` | [Stack](../components/stack.md) |
-| `Container` · `ScrollView` | 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
+| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
 
 스토리의 "다음 요청 실패시키기"(secondary 토글)와 350ms 지연은 데모 전용이다. 제품에 넣지 않는다.
 

package/docs/usage/compositions/action-recovery-undo.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [공통 실행과 실패 복구 · 초안과 실행 취소](../../action-session.md#초안과-실행-취소), `src/action-session.ts`, `showcase/web/src/patterns/action-recovery-previews.tsx`, `showcase/native/src/action-recovery-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 동작/보관과 실행 취소`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/피드백과 복구/보관과 실행 취소`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 보관·숨기기·목록에서 빼기처럼 제품이 역연산을 제공하는 작업 뒤에, 같은 자리에서 실행 취소를 주고 그 복구 요청이 성공해야 화면을 되돌릴 때 쓴다.
@@ -29,7 +31,7 @@
 | `Text` | 상태 문구. Web `role="status"`, Native 접근성 알림 | [Text](../components/text.md) |
 | `Stack` | 세로 쌓기 `gap="md"` | [Stack](../components/stack.md) |
 | `Toast` `action`(선택) | 행이 사라지는 목록에서 실행 취소 진입점 | [Toast](../components/toast.md) |
-| `Container` · `ScrollView` | 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
+| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
 
 Toast의 `action`을 진입점으로 쓰면 토스트는 진입점만, 세션은 진행·실패 상태만 소유한다. Toast 지침대로 그 알림에서만 할 수 있는
 행동은 두지 않으므로 보관함 화면 등 다른 곳에도 복구 경로를 둔다. 스토리의 "다음 요청 실패시키기"·350ms 지연은 데모 전용이고,

package/docs/usage/compositions/activity-status.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 미게시(1.17.2 이후)
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: [ActivityChip 계약](../../activity-chip.md), [Toast 패널](../../toast.md#패널-toast--미게시1172-이후), 양 Showcase `activity-status-preview.tsx`, `showcase/shared/activity-status.ts`
 - 스토리북: `배포/구성/피드백과 복구/백그라운드 작업 상태`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 사용자가 다른 화면을 보는 동안 계속되는 작업 하나(검수·생성·업로드)의 진행을 헤더의 작은 칩으로 알리고, 칩을 누르면

package/docs/usage/compositions/adaptive-content.md

@@ -4,15 +4,17 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.14.0
-- 검토일: 2026-10-07
+- 검토일: 2026-10-15
 - 근거: 공개 API를 사용하는 `showcase/*/reference-adoption-previews.tsx`
 - 스토리북: `배포/구성/직접 조작과 모션/높이가 이어지는 패널`
 
 승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
-패널의 길이가 달라질 때 아래 행동이 새 높이로 이동해야 하는 작은 내용 영역에 쓴다. 별도 신규 wrapper API가 아니라 아래 공개 컴포넌트의 조합 규격이다.
+패널의 길이가 달라질 때 아래 행동이 새 높이로 이동해야 하는 작은 내용 영역에 쓴다. 기본 외곽 배치는 CompositionLayout이 제공하고 아래 공개 API가 해당 상호작용을 담당한다.
 
 ## 구성 요소
 

package/docs/usage/compositions/authoring-tools.md

@@ -10,6 +10,8 @@
 
 ShortcutRecorder는 Web 전용이다. Native는 BezierEditor만 지원한다.
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 제품 안의 모션 편집기에서 두 제어점의 곡선을 조정하거나 웹 앱의 사용자 단축키를 실제로 등록할 때 쓴다. 단순 조합 표시는 기존 TextFormat을 사용한다. 제품 토큰 저장·전역 키 등록 서비스는 소비 제품이 소유한다.

package/docs/usage/compositions/collection-detail.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.16.0
-- 검토일: 2026-10-08
+- 검토일: 2026-10-15
 - 근거: [원제품과 기존 API 대조](../../../../../docs/plans/aceternity-interaction-adoption-2026-10-07.md), 양 Showcase `collection-detail-preview.tsx`
 - 스토리북: `배포/구성/직접 조작과 모션/카드 상세 연결`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 유한 카드 여러 장의 독립 입력을 보존하면서 탐색하고 별도 상세 모달을 열 때 쓴다. 후기/상품/자료는

package/docs/usage/compositions/collection-editing.md

@@ -8,6 +8,8 @@
 - 근거: [목록 편집과 복구 계약](../../collection-editing.md), `src/collection-editing.ts`, 양 renderer의 `src/collection-editing.tsx`
 - 스토리북: `배포/구성/입력과 작성/제목 바로 편집`, `배포/구성/입력과 작성/반복 입력`, `배포/구성/선택과 필터/선택 항목 묶음 작업`, `배포/구성/피드백과 복구/검색 필터 완화`, `배포/구성/선택과 필터/표 열 설정`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 목록의 제목을 바로 고치거나, 입력 행을 늘리거나, 여러 항목에 같은 행동을 하거나, 빈 검색에서 조건을 풀거나, 표의 열을 설정할 때 쓴다.

package/docs/usage/compositions/command-records.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.16.0
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: [후보 조사](../../../../../docs/qa/2026-10-07-reference-parallel-b.md), 양 Showcase `command-records-preview.tsx`
 - 스토리북: `배포/구성/정보 표시/명령 기록 표시`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 명령 원문과 출력 기록을 선택·읽기·복사할 때 쓴다. [Magic Terminal](https://magicui.design/docs/components/terminal)의

package/docs/usage/compositions/common-message.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [ChatMessage](../components/chat-message.md), [공통 실행과 실패 복구](../../action-session.md), `showcase/web/src/patterns/conversation-previews.tsx`, `showcase/native/src/conversation-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 화면/대화 메시지`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/정보 표시/대화 메시지`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 말풍선 하나하나에 반응·답장·원문 이동·전송 실패 후 다시 보내기를 붙일 때 쓴다. ChatMessage의 슬롯과 콜백을 제품 로직에 연결하며 새 데이터 엔진을 만들지 않는다.

package/docs/usage/compositions/common-notification.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 구성 API 지침 참조
-- 검토일: 2026-10-06
+- 검토일: 2026-10-15
 - 근거: [NotificationItem](../components/notification-item.md), [공통 실행과 실패 복구](../../action-session.md), `showcase/web/src/patterns/conversation-previews.tsx`, `showcase/native/src/conversation-previews.tsx`. 2026-10-06 사용자 승인으로 스토리북 배포(이전 `실험/구성/공통 화면/알림 항목`, [승인 기록](../../../../../docs/STORYBOOK_NAVIGATION.md#21-2026-10-06-전체-승격과-규격-확정))
 - 스토리북: `배포/구성/정보 표시/알림 항목`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 알림 한 행을 누르면 바로 읽음으로 바꾸고, 서버가 실패하면 읽지 않음으로 되돌릴 때 쓴다. NotificationItem과 낙관 반영 세션을 연결하며 새 데이터 엔진을 만들지 않는다.

package/docs/usage/compositions/communication.md

@@ -8,6 +8,8 @@
 - 근거: [연결 계약](../../communication.md), `src/communication.ts`, 양 renderer `src/communication.tsx`, `src/screens.tsx`
 - 스토리북: `배포/구성/선택과 필터/펼치는 상단 검색`, `배포/구성/입력과 작성/메시지 답장 연결`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 상단 검색 버튼에서 검색 영역을 펼치거나 채팅의 실제 메시지를 선택해 답장을 전송할 때 쓴다. 이미 전체 화면으로 제공하는 검색에는 SearchScreen을 바로 쓴다. 입력 자동 높이·채팅 swipe 엔진·최근 검색 저장을 새로 만들지 않는다.

package/docs/usage/compositions/compound-controls.md

@@ -4,10 +4,12 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-13
+- 검토일: 2026-10-15
 - 근거: [복합 입력 계약](../../compound-controls.md), `showcase/shared/compound-controls.ts`, `showcase/{web/src/patterns,native/src}/compound-previews.tsx`
 - 스토리북: `배포/구성/비교와 검증/복합 입력 모음`
 
+공통 구조·배치·상태·배지의 소유권은 [화면과 구성 선택](../SELECTION.md#소유권)을 따른다. 앱은 데이터·문구·브랜드·추가 기능을 공개 슬롯과 콜백으로 연결한다. 아래 코드 골격을 앱별 기본 구조 복제의 근거로 사용하지 않는다. 전용 구성 API가 없는 콘텐츠 묶음은 [CompositionLayout](../components/composition-layout.md)의 제목·배지·행동·본문·상태·footer 슬롯을 사용한다.
+
 ## 언제 쓰나
 
 기존 컨트롤을 묶은 네 가지 복합 입력(소요 시간, 버튼 자리 확인, 이모지 반응, 알림 종)을 화면 안 한 블록으로 둘 때 쓴다.
@@ -24,7 +26,7 @@
 | ReactionPicker (`/reaction-picker`) | 반응 하나를 고르거나 해제(`ghost` `pill` 토글 버튼 묶음) | [Button](../components/button.md) |
 | NotificationBell (`/notification-bell`) | 읽지 않은 수가 있는 종 아이콘 버튼 | [IconButton](../components/icon-button.md) |
 | `Stack` | 블록 안 세로 쌓기 `gap="xl"` | [Stack](../components/stack.md) |
-| `Container` · `ScrollView` | 바깥 틀. 제품 화면이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
+| `Container` · `ScrollView` | 바깥 틀. HJM 화면 골격이 소유한다 | [Container](../components/container.md), [화면 여백](../tokens/layout.md) |
 | Switch, Button `ghost`·`primary` | 스토리의 실패 응답 토글·다시 시작·알림 추가(데모 전용, 제품에는 넣지 않는다) | [Switch](../components/switch.md), [Button](../components/button.md) |
 
 ## 배치