@hjmds/design-contracts 1.8.0 → 1.10.0

package/docs/generated/renderer-evidence.md

@@ -1,10 +1,10 @@
 # Renderer evidence coverage
 
-> Generated for HJM 1.8.0. Do not edit directly; run `pnpm evidence:sync`.
+> Generated for HJM 1.10.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.
 
-- web: 100/100 active implementations; 100/100 required scenario sets
+- web: 103/103 active implementations; 103/103 required scenario sets
 - native: 83/83 active implementations; 83/83 required scenario sets
 
 | Component | Surface | Maturity | Renderer package | Export | Claimed scenarios | Missing required scenarios | Executable proofs |
@@ -51,6 +51,7 @@ This projection joins the canonical surface maturity manifest with first-party r
 | Combobox | web | stable | @hjmds/react | ./forms | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#combobox, test/scenario-matrix.browser.test.tsx#combobox, test/stable-core.browser.test.tsx#combobox |
 | DatePicker | web | stable | @hjmds/react | ./date-picker | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#date-picker, test/scenario-matrix.browser.test.tsx#date-picker, test/stable-core.browser.test.tsx#date-picker |
 | DateRangePicker | web | stable | @hjmds/react | ./date-range | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard | none | test/default-render.ssr.test.tsx#date-range-picker, test/scenario-matrix.browser.test.tsx#date-range-picker, test/date-range.keyboard.browser.test.tsx#date-range-picker |
+| ColorPicker | web | stable | @hjmds/react | ./color-picker | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#color-picker, test/scenario-matrix.browser.test.tsx#color-picker, test/web-additions.browser.test.tsx#color-picker |
 | FilePicker | web | stable | @hjmds/react | ./file-picker | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#file-picker, test/scenario-matrix.browser.test.tsx#file-picker, test/file-picker.keyboard.browser.test.tsx#file-picker |
 | Form | web | stable | @hjmds/react | ./forms | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard | none | test/default-render.ssr.test.tsx#form, test/scenario-matrix.browser.test.tsx#form, test/form.keyboard.browser.test.tsx#form |
 | Agreement | web | stable | @hjmds/react | ./agreement | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#agreement, test/scenario-matrix.browser.test.tsx#agreement, test/agreement.keyboard.browser.test.tsx#agreement |
@@ -99,6 +100,7 @@ This projection joins the canonical surface maturity manifest with first-party r
 | Result | web | stable | @hjmds/react | ./feedback | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy | none | test/default-render.ssr.test.tsx#result, test/scenario-matrix.browser.test.tsx#result |
 | BottomInfo | web | stable | @hjmds/react | ./bottom-info | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy | none | test/default-render.ssr.test.tsx#bottom-info, test/scenario-matrix.browser.test.tsx#bottom-info |
 | Toast | web | stable | @hjmds/react | ./toast | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#toast, test/scenario-matrix.browser.test.tsx#toast, test/stable-core.browser.test.tsx#toast, test/toast-layout.browser.test.tsx#toast |
+| Watermark | web | stable | @hjmds/react | ./watermark | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy | none | test/default-render.ssr.test.tsx#watermark, test/scenario-matrix.browser.test.tsx#watermark |
 | Dialog | web | stable | @hjmds/react | ./overlays | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#dialog, test/scenario-matrix.browser.test.tsx#dialog, test/advanced.browser.test.tsx#dialog |
 | AlertDialog | web | stable | @hjmds/react | ./overlays | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard, long-copy | none | test/default-render.ssr.test.tsx#alert-dialog, test/scenario-matrix.browser.test.tsx#alert-dialog, test/alert-dialog.keyboard.browser.test.tsx#alert-dialog |
 | Sheet | web | stable | @hjmds/react | ./overlays | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard, long-copy | none | test/default-render.ssr.test.tsx#sheet, test/scenario-matrix.browser.test.tsx#sheet, test/sheet-layout.browser.test.tsx#sheet |
@@ -106,6 +108,7 @@ This projection joins the canonical surface maturity manifest with first-party r
 | Popover | web | stable | @hjmds/react | ./popover | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard, long-copy | none | test/default-render.ssr.test.tsx#popover, test/scenario-matrix.browser.test.tsx#popover, test/popover.browser.test.tsx#popover |
 | Tooltip | web | stable | @hjmds/react | ./overlays | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy, keyboard | none | test/default-render.ssr.test.tsx#tooltip, test/scenario-matrix.browser.test.tsx#tooltip, test/tooltip.browser.test.tsx#tooltip |
 | CommandPalette | web | stable | @hjmds/react | ./command-palette | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard, long-copy | none | test/default-render.ssr.test.tsx#command-palette, test/scenario-matrix.browser.test.tsx#command-palette, test/command-palette.browser.test.tsx#command-palette |
+| Affix | web | stable | @hjmds/react | ./affix | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy | none | test/default-render.ssr.test.tsx#affix, test/scenario-matrix.browser.test.tsx#affix |
 | DesignSystemProvider | web | stable | @hjmds/react | ./provider | default, accessibility, dark, large-text, rtl, reduced-motion, long-copy | none | test/default-render.ssr.test.tsx#design-system-provider, test/scenario-matrix.browser.test.tsx#design-system-provider |
 | SkipNav | web | stable | @hjmds/react | ./skip-nav | default, accessibility, dark, large-text, rtl, reduced-motion, keyboard, long-copy | none | test/default-render.ssr.test.tsx#skip-nav, test/scenario-matrix.browser.test.tsx#skip-nav, test/skip-nav.browser.test.tsx#skip-nav |
 | VisuallyHidden | web | stable | @hjmds/react | ./layout | default, accessibility, dark, large-text, rtl, reduced-motion | none | test/default-render.ssr.test.tsx#visually-hidden, test/scenario-matrix.browser.test.tsx#visually-hidden |

package/docs/generated/showcase-manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 2,
-  "designSystemVersion": "1.8.0",
+  "designSystemVersion": "1.10.0",
   "packageName": "@hjmds/design-contracts",
   "components": [
     {
@@ -2031,39 +2031,15 @@
         "authored": null
       }
     },
-    {
-      "id": "time-picker",
-      "storyId": "input/time-picker",
-      "name": "TimePicker",
-      "category": "input",
-      "platform": "adaptive",
-      "contractStatus": "planned",
-      "surfaces": {
-        "web": "planned",
-        "native": "planned"
-      },
-      "requirements": [
-        {
-          "surface": "contract",
-          "scenarios": [
-            "contract"
-          ]
-        }
-      ],
-      "documentation": {
-        "generated": "docs/generated/component-maturity.md",
-        "authored": "docs/time-picker.md"
-      }
-    },
     {
       "id": "color-picker",
       "storyId": "input/color-picker",
       "name": "ColorPicker",
       "category": "input",
       "platform": "web",
-      "contractStatus": "planned",
+      "contractStatus": "stable",
       "surfaces": {
-        "web": "planned",
+        "web": "stable",
         "native": "unsupported"
       },
       "requirements": [
@@ -2072,6 +2048,19 @@
           "scenarios": [
             "contract"
           ]
+        },
+        {
+          "surface": "web",
+          "scenarios": [
+            "default",
+            "dark",
+            "long-copy",
+            "large-text",
+            "rtl",
+            "reduced-motion",
+            "accessibility",
+            "keyboard"
+          ]
         }
       ],
       "documentation": {
@@ -2129,30 +2118,6 @@
         "authored": "docs/file-picker.md"
       }
     },
-    {
-      "id": "cascader",
-      "storyId": "input/cascader",
-      "name": "Cascader",
-      "category": "input",
-      "platform": "adaptive",
-      "contractStatus": "planned",
-      "surfaces": {
-        "web": "planned",
-        "native": "planned"
-      },
-      "requirements": [
-        {
-          "surface": "contract",
-          "scenarios": [
-            "contract"
-          ]
-        }
-      ],
-      "documentation": {
-        "generated": "docs/generated/component-maturity.md",
-        "authored": "docs/cascader.md"
-      }
-    },
     {
       "id": "form",
       "storyId": "input/form",
@@ -2301,30 +2266,6 @@
         "authored": "docs/mentions.md"
       }
     },
-    {
-      "id": "rating",
-      "storyId": "input/rating",
-      "name": "Rating",
-      "category": "input",
-      "platform": "shared",
-      "contractStatus": "planned",
-      "surfaces": {
-        "web": "planned",
-        "native": "planned"
-      },
-      "requirements": [
-        {
-          "surface": "contract",
-          "scenarios": [
-            "contract"
-          ]
-        }
-      ],
-      "documentation": {
-        "generated": "docs/generated/component-maturity.md",
-        "authored": "docs/rating.md"
-      }
-    },
     {
       "id": "transfer-list",
       "storyId": "input/transfer-list",
@@ -2375,30 +2316,6 @@
         "authored": "docs/transfer-list.md"
       }
     },
-    {
-      "id": "tree-select",
-      "storyId": "input/tree-select",
-      "name": "TreeSelect",
-      "category": "input",
-      "platform": "web",
-      "contractStatus": "planned",
-      "surfaces": {
-        "web": "planned",
-        "native": "unsupported"
-      },
-      "requirements": [
-        {
-          "surface": "contract",
-          "scenarios": [
-            "contract"
-          ]
-        }
-      ],
-      "documentation": {
-        "generated": "docs/generated/component-maturity.md",
-        "authored": "docs/tree-select.md"
-      }
-    },
     {
       "id": "upload-item",
       "storyId": "data-display/upload-item",
@@ -4375,9 +4292,9 @@
       "name": "Watermark",
       "category": "feedback",
       "platform": "web",
-      "contractStatus": "planned",
+      "contractStatus": "stable",
       "surfaces": {
-        "web": "planned",
+        "web": "stable",
         "native": "unsupported"
       },
       "requirements": [
@@ -4386,6 +4303,18 @@
           "scenarios": [
             "contract"
           ]
+        },
+        {
+          "surface": "web",
+          "scenarios": [
+            "default",
+            "dark",
+            "long-copy",
+            "large-text",
+            "rtl",
+            "reduced-motion",
+            "accessibility"
+          ]
         }
       ],
       "documentation": {
@@ -4617,30 +4546,6 @@
         "authored": "docs/popover.md"
       }
     },
-    {
-      "id": "confirm-popover",
-      "storyId": "overlay/confirm-popover",
-      "name": "ConfirmPopover",
-      "category": "overlay",
-      "platform": "web",
-      "contractStatus": "planned",
-      "surfaces": {
-        "web": "planned",
-        "native": "unsupported"
-      },
-      "requirements": [
-        {
-          "surface": "contract",
-          "scenarios": [
-            "contract"
-          ]
-        }
-      ],
-      "documentation": {
-        "generated": "docs/generated/component-maturity.md",
-        "authored": "docs/confirm-popover.md"
-      }
-    },
     {
       "id": "tooltip",
       "storyId": "overlay/tooltip",
@@ -4721,9 +4626,9 @@
       "name": "Affix",
       "category": "utility",
       "platform": "web",
-      "contractStatus": "planned",
+      "contractStatus": "stable",
       "surfaces": {
-        "web": "planned",
+        "web": "stable",
         "native": "unsupported"
       },
       "requirements": [
@@ -4732,6 +4637,18 @@
           "scenarios": [
             "contract"
           ]
+        },
+        {
+          "surface": "web",
+          "scenarios": [
+            "default",
+            "dark",
+            "long-copy",
+            "large-text",
+            "rtl",
+            "reduced-motion",
+            "accessibility"
+          ]
         }
       ],
       "documentation": {

package/docs/optional-adapters.md

@@ -1,5 +1,19 @@
 # Optional presentation adapters
 
+## Current evidence — 2026-09-30
+
+The six opt-in entries are implemented. The earlier checkout verification below is a historical
+snapshot, not the current publication or consumer-adoption state. The subsequent
+[Web audit](../../../docs/evidence/full-audit-2026-09-29/WEB.md),
+[iOS audit](../../../docs/evidence/full-audit-2026-09-29/IOS-AUDIT.md) and
+[Android evidence](../../../docs/evidence/full-audit-2026-09-29/android.json)
+record browser and installed simulator/emulator checks, including optional adapter flows.
+These results do not establish physical-device or screen-reader testing and do not promote
+optional adapters by changing canonical component counts. This catalog cleanup does not publish
+packages or migrate consumer applications.
+
+## Original adoption record — 2026-09-29
+
 2026-09-29: the user requested all six shortlisted libraries, explicitly allowing platform-specific
 adoption. These are opt-in extensions, not six new canonical components or a stable promotion.
 The canonical Statistic/Menu/Sheet/KeyboardAvoiding APIs remain available without additional peers.
@@ -67,6 +81,12 @@ Expo Go cannot verify these linked native modules.
   the host can still close programmatically. GestureSheetInput wires sheet keyboard tracking.
   Android back, backdrop and pan dismissal converge on onOpenChange(false). Consumers remain
   responsible for focus restoration to the opener and avoiding simultaneous modal sheets.
+  Inside an RN `Modal`, Android back goes to the Modal's `onRequestClose` and never reaches
+  BackHandler, so the 2026-09-30 audit saw back close the whole host. Such hosts call
+  `dismissTopGestureSheet()` first and close themselves only when it returns false. The same
+  applies to a navigation container inside a Modal (shared screen transition Detail): the host
+  must route `onRequestClose` to `navigation.goBack()` while it can go back. Insets default to the
+  HjmNativeProvider `safeAreaInsets`; the library's English handle/background labels are replaced.
 - NativeContextMenu delegates long-press behavior and menu appearance to the OS. Supply an
   accessible native child; item IDs are unique, labels localized, danger maps to OS destructive
   intent and disabled actions are guarded. Arbitrary custom native menu colors are unsupported.

package/docs/rating.md

@@ -1,5 +1,10 @@
 # Rating — 계약을 만들지 않는다
 
+> 2026-09-30 정리: 구현된 조합을 미구현으로 집계하지 않도록 독립 Planned 행과 catalog ID를 제거했다.
+> 기존 조합 예제와 공개 helper는 유지하며, 참조표는 실제 구성 컴포넌트로 연결한다.
+> 아래 날짜별 설계 기록의 행 유지 지시는 당시 판단이며 이 결정으로 대체한다.
+
+
 ## 먼저 판정: 필요한가
 
 야잘알(KBO 정보)과 BurnTok 어디에도 별점(리뷰 점수, 만족도 별표) 화면이 없다. 야잘알의

package/docs/stable-core.md

@@ -1,11 +1,31 @@
 # Stable Core
 
+## 2026-09-30 선택형 상호작용 어댑터·Liquid Toast 승격
+
+`sortable`·`swipe-actions`·`content-transition`·`carousel-motion`·`celebration`(Web·Native)과 Native Liquid Toast를
+stable로 올린다. 선택형 확장이라 canonical 개수는 바뀌지 않는다. 근거는 Web Chromium, 설치된 iOS 27 시뮬레이터, 이번에
+추가한 Android 16 에뮬레이터 확인이다([어댑터 기록](../../../docs/evidence/interaction-adapters-2026-09-30.md),
+[Liquid Toast 기록](../../../docs/evidence/liquid-toast-2026-09-30/README.md)). 검토에서 고친 것: Celebration 입자 색(옅은
+surfaceAccent → primary + 상태 강조색), Liquid Toast 그림자·캡슐·색 전환. Native `screen-transition`은 experimental로 남긴다 —
+React Navigation 7.4.1 전용이고, 포트폴리오 Expo 앱은 모두 expo-router 57이라 쓸 수 있는 소비자가 없다. Sortable은
+한 줄 목록 범위만 지원한다(그리드 미지원). 실기기·음성 보조기기 QA는 소비 앱 릴리스 몫이다.
+
+## 2026-09-30 Web 기능 추가
+
+ColorPicker·Watermark·Affix를 Web에서 구현했다. 세 항목은 React Native unsupported이며,
+현재 계약/Web은 Stable 103개·Beta 0개·Planned 0개, Native는 Stable 83개다.
+공개 API·기본값은 각 컴포넌트 문서가 소유하며, HEX/alpha·키보드 입력 복구,
+워터마크의 비간섭·텍스트 이스케이프, Affix의 중첩 스크롤·부모 경계·초점 보존·크기 초과
+해제를 Chromium으로 검증한다. dark/RTL/200%/reduced-motion/접근성/긴 문구 증거도 연결했다.
+[검증 기록](../../../docs/evidence/web-additions-2026-09-30/README.md)에 실행 결과와 범위를 남긴다.
+사용자의 배포 제외 지시에 따라 버전 게시나 소비 앱 변경은 하지 않는다.
+
 ## 2026-09-29 컴포넌트 승격 (다음 minor)
 
 `Divider`, `Section`, `ListRow`, `Statistic`, `DescriptionList`, `EmptyState`, `Result`, `Layout`, `Splitter`, `Accordion`, `Agreement`, `FilePicker`, `Tabs`, `BottomNavigation`, `LoadMore`, `Mentions`,
 `Heading`, `Top`, `BottomCTA`, `AspectRatio`, `Grid`, `Steps`, `TopBar`, `AuthScreenLayout`, `Radio`,
 `Avatar`, `Asset`, `CounterBadge`, `Image`, `VisuallyHidden`, `List`, `Timeline`, `BottomInfo`, `Link`, `AuthProviderButton`, `PasswordField`, `CheckboxGroup`, `RadioGroup`, `Chip`, `SegmentedControl`, `SearchField`, `NumberField`, `Toast`, `FloatingActionButton`, `Checkbox`, `Switch`, `ToggleGroup`, `Slider`, `OtpField`, `TagsInput`, `DatePicker`, `DateRangePicker`, `Breadcrumb`, `Pagination`, `Menubar`, `Form`, `Sidebar(Web)`, `TransferList`, `UploadItem`, `ContextMenu(Web)`, `Menu`, `Anchor(Web)`, `Collapsible`, `DataTable(Web)`, `Tree(Web)`, `Calendar`, `Carousel`, `Tour(Web)`, `ThinkingOrb`, `Dialog`, `AlertDialog`, `Sheet`, `SidePanel(Web)`, `Popover(Web)`, `Tooltip(Web)`, `CommandPalette(Web)`, `SkipNav(Web)`을 각 지원 surface에서 stable로 승격합니다.
-TextFormat, Splitter, Breadcrumb, Pagination, Menubar, Sidebar와 Web 전용 overlay/navigation 컴포넌트는 Web-only stable입니다. DateRangePicker, Accordion, Agreement, FilePicker, Tabs, BottomNavigation, LoadMore, Mentions, Form, TransferList, UploadItem, Menu, Collapsible, Calendar, Carousel, Dialog, AlertDialog, Sheet는 Web·Native stable입니다. ThinkingOrb도 Web·Native stable입니다. 현재 계약 stable은 100개, Web stable은 100개, Native stable은 83개입니다.
+TextFormat, Splitter, Breadcrumb, Pagination, Menubar, Sidebar와 Web 전용 overlay/navigation 컴포넌트는 Web-only stable입니다. DateRangePicker, Accordion, Agreement, FilePicker, Tabs, BottomNavigation, LoadMore, Mentions, Form, TransferList, UploadItem, Menu, Collapsible, Calendar, Carousel, Dialog, AlertDialog, Sheet는 Web·Native stable입니다. ThinkingOrb도 Web·Native stable입니다. 당시 계약 stable은 100개, Web stable은 100개, Native stable은 83개입니다.
 
 ## 2026-09-29 Beta → Stable 확인
 

package/docs/time-picker.md

@@ -1,5 +1,10 @@
 # TimePicker — 새 컴포넌트를 만들지 않는다
 
+> 2026-09-30 정리: 구현된 조합을 미구현으로 집계하지 않도록 독립 Planned 행과 catalog ID를 제거했다.
+> 기존 조합 예제와 공개 helper는 유지하며, 참조표는 실제 구성 컴포넌트로 연결한다.
+> 아래 날짜별 설계 기록의 행 유지 지시는 당시 판단이며 이 결정으로 대체한다.
+
+
 ## 문제로 제기된 것
 
 Ant Design `TimePicker`는 필드 트리거를 누르면 시·분(·초) 열이 나란히 있는 팝업이 뜨고,

package/docs/toast.md

@@ -117,6 +117,23 @@ Storybook `Patterns/Toast layout`. The fixture covers long Korean/English copy,
 doubled text, dark theme and RTL. Automated browser checks are separate from
 real assistive-technology and consumer-release evidence; Toast remains beta.
 
+### Visual refresh — 2026-09-30 (1.10.0)
+
+BurnTok 사용자 피드백("알림 ui 구려")을 실제 화면으로 확인했더니 세 가지가 원인이었습니다. neutral
+Toast의 `●` 글리프가 뜻 없는 회색 점으로 보였고, 글자 글리프(`i`·`!`)는 폰트 metric에 따라 오타처럼
+보였고, action이 밑줄 없는 텍스트라 컨트롤로 읽히지 않았습니다. 1.10.0은 다음으로 바꿉니다.
+
+- tone은 32-unit 원형 tinted badge 안의 stroke SVG 아이콘이 전달합니다(neutral = 종). 2px 가장자리
+  띠(`toneMark`)는 badge와 역할이 겹쳐 너비 0으로 은퇴했습니다 — slot은 가산 계약을 위해 남깁니다.
+- action은 끝 정렬 tinted pill(`action.background` = `surface.brand`, 44-unit target)입니다. 라벨과
+  fill 대비 4.5:1을 contract test가 지킵니다.
+- 카드 radius md → lg, description은 secondary 색으로 제목과 위계를 나눕니다. 테두리는
+  `border.strong`을 유지합니다 — subtle hairline은 3:1 경계 대비(WCAG 1.4.11) test를 통과하지 못했습니다.
+- 여러 줄·큰 글자에서도 badge는 제목 옆 위쪽에 붙고, 한국어는 `word-break: keep-all`로 단어 중간에서
+  끊지 않습니다(Web).
+
+Review fixture: Storybook `Patterns/Toast layout` → `Tone gallery`(light/dark).
+
 Web renderer:
 
 - viewport를 문서 root 근처에 하나만 두고 recipe placement와 logical start/end를 사용합니다.
@@ -140,8 +157,9 @@ Native renderer:
 - swipe capability가 없는 플랫폼에서는 gesture를 노출하지 않습니다.
 - app background/foreground와 accessibility focus를 `window`/`focus` pause reason에 연결합니다.
 
-두 renderer 모두 tone icon과 `toneMark`를 렌더링해 색 없이 neutral/info/success/warning/danger를
-구분하고, action·close는 44-unit target과 visible focus를 유지합니다. 실제 제품 fixture에서는
+두 renderer 모두 tone icon을 tinted badge(`toastRecipe.icon.badgeDiameter`, `tones.*.badge`) 안에
+렌더링해 색 없이 neutral/info/success/warning/danger를 구분하고(1.10.0부터 `toneMark` 가장자리 띠는
+너비 0으로 은퇴), action·close는 44-unit target과 visible focus를 유지합니다. 실제 제품 fixture에서는
 normal/high announcement, keyboard/screen reader, 200% zoom, Reduce Motion, 앱 background 복귀,
 overflow와 update를 검증합니다.
 

package/docs/tree-select.md

@@ -1,5 +1,10 @@
 # TreeSelect — 판정 검증과 빠진 한 조각
 
+> 2026-09-30 정리: 구현된 조합을 미구현으로 집계하지 않도록 독립 Planned 행과 catalog ID를 제거했다.
+> 기존 조합 예제와 공개 helper는 유지하며, 참조표는 실제 구성 컴포넌트로 연결한다.
+> 아래 날짜별 설계 기록의 행 유지 지시는 당시 판단이며 이 결정으로 대체한다.
+
+
 ## 문제
 
 계층 데이터에서 하나 또는 여럿을 골라 Select처럼 트리거+값으로 커밋한다. antd

package/docs/watermark.md

@@ -1,58 +1,26 @@
-# Watermark — 계약을 만들지 않는다
-
-## 문제로 제기된 것
-
-Ant Design `Watermark`는 콘텐츠 위에 반복되는 텍스트/이미지를 덮어 출처나 소유권을
-표시합니다. 이 컴포넌트를 검토하며 나온 관찰은, 유일하게 성립할 수 있는 계약이
-**"덮개가 본문 낭독과 조작을 방해하면 안 된다"**는 것이고, 두 제품에 실제 수요가
-없다면 만들지 않는다는 조건이었습니다.
-
-## 판정: 만들지 않는다
-
-### 1. 두 React 기반 제품 어디에도 실사용처가 없다
-
-`Yajalal RN`(`modules/app-rn/src`)과 `BurnTok`(`apps/web/src`,
-`packages/design-system/src`) 양쪽을 `watermark`로 전수 검색한 결과, 시각적으로 콘텐츠
-위에 반복 마크를 덮는 코드는 없었습니다. 유일한 매치는
-`modules/app-rn/src/features/notification/state.ts:48`의 "seen watermark"로, 이는 "이
-알림까지는 읽음 처리됐다"는 **읽음 커서**를 뜻하는 이름일 뿐 시각적 워터마크와 무관합니다.
-공유 흐름(`LineupRouteScreen.tsx`, `PlayerCompareScreen.tsx`)도 `Share.share({ message })`로
-텍스트만 공유하고, 이미지를 만들어 공유하는 경로 자체가 아직 없습니다.
-
-### 2. 같은 개념이 다른 스택에는 있지만, 이 패키지가 서비스하는 층이 아니다
-
-Flutter 앱(`modules/app`)에는 실제 시각 워터마크가 있습니다 —
-`modules/app/lib/managers/watermark.manager.dart`, `modules/app/lib/common/sharing/
-app_name_watermark.dart`(공유 이미지에 앱 이름을 얹는 `AppNameWatermark`),
-`player_detail_info.dart`의 등번호 배경 워터마크, `contrast.dart`의
-`watermarkAlphaFor`(배경 명도에 따라 0.08/0.16 알파를 고르는 대비 계산)까지 갖췄습니다.
-이는 "워터마크"라는 제품 개념이 회사 안에 이미 존재한다는 증거이지, **이 패키지가
-계약하는 React/RN 스택**(`docs/architecture.md`: "React, React Native, DOM, Expo import는
-코어에 들어오지 않는다")에서 검증된 vertical slice라는 증거는 아닙니다. Flutter 구현은
-같은 렌더러 경계를 공유하지 않으므로 이 판정의 근거로 세지 않았습니다.
-
-### 3. 유일하게 유효한 계약은 이미 있는 원칙의 적용일 뿐, 새 상태 축이 아니다
-
-`Icon`(`src/icon.ts`)과 `Image`(`src/image.ts`)가 이미 decorative/informative
-discriminated union으로 "장식용 콘텐츠는 접근성 트리에서 빠지고 상호작용을 가로채지
-않는다"는 원칙을 확립해 두었습니다. 반복 마크가 본문 낭독·조작을 방해하면 안 된다는
-관찰은 이 원칙을 "화면 전체를 덮는 장식 레이어"에 적용한 것일 뿐, Watermark만의 새
-상태 축이나 접근성 개념이 아닙니다. 타일 밀도, 회전 각도, 캔버스/SVG 렌더링 방식은
-"이 패키지의 층에 속하는가" 질문에서 렌더러의 몫입니다 — 플랫폼 중립 계약이 검증할 수
-있는 입력이 없습니다.
-
-## 만들지 않은 것
-
-`src/watermark.ts`, `test/watermark.test.ts`는 없습니다.
-`componentCatalog`의 `{ name: "Watermark", category: "feedback", platform: "web",
-status: "planned" }` 행과 crosswalk의 `Watermark → Watermark` direct 관계
-(`src/component-references.ts:123`)는 건드리지 않습니다.
-
-## 뒤집힐 조건
-
-1. BurnTok 또는 Yajalal RN에 실제 이미지 워터마크 요구(스크린샷 유출 방지, 공유 이미지에
-   앱 마크 삽입 등)가 나타나는 vertical slice가 측정된다.
-2. 그 슬라이스에서 "decorative overlay는 낭독·조작을 가로채지 않는다"는 기존 원칙 이상의
-   새 규칙(예: 워터마크 밀도가 본문 대비 요건과 충돌해 별도 최소 명도 대비 계산이
-   필요한 경우 — Flutter의 `watermarkAlphaFor`가 이미 이런 계산의 선례이니 이식 여부를
-   먼저 검토)이 필요해진다.
+# Watermark — Web 반복 텍스트
+
+2026-09-30: 사용자의 구현 요청으로 기존 수요 대기 결정을 대체한다. 외부 이미지·canvas 의존성을
+추가하지 않고 inline SVG pattern으로 텍스트 타일을 반복한다. 문자열을 HTML이나 SVG 소스로
+삽입하는 대신 React text node를 사용하여 임의 마크업이 실행되지 않게 한다.
+
+`@hjmds/react/watermark`의 `Watermark`는 `text`(문자열 또는 1–3줄 배열)와 `children`을 받는다.
+각 줄은 1–120글자다. `tileWidth`(기본 240, 최소 80), `tileHeight`(160, 최소 60),
+`rotate`(-22°, -90~90), `opacity`(0.12, 0~1)를 조절할 수 있다. 기본 기하는 계약 recipe가 소유한다.
+긴 표식은 큰 타일을 지정한다. 텍스트 색상은 HJM textSub 토큰을 따른다.
+
+오버레이는 접근성 트리에서 제외하고 포인터·텍스트 선택을 가로채지 않는다. 중요한 출처/보안
+고지는 읽을 수 있는 본문으로도 제공한다. 여러 인스턴스는 고유 pattern ID를 사용한다.
+SVG는 인쇄에도 포함되는 DOM 콘텐츠다. 인쇄 설정별 결과는 소비 환경에서 확인한다.
+이는 장식용 출처 표시이며 스크린샷 방지·삭제 방지·정보 유출 방지 기능이 아니다.
+이미지 워터마크와 다운로드 파일에 삽입하는 인코딩 기능은 제공하지 않는다.
+
+```tsx
+<Watermark text={[t('document.draft'), projectName]}>
+  <DocumentPreview />
+</Watermark>
+```
+
+계약: [watermark.ts](../src/watermark.ts). UI: [renderer](../../react/src/watermark.tsx).
+사용 예제: [Web additions](../../../showcase/web/src/patterns/WebAdditions.stories.tsx).
+검증: [계약 회귀](../test/web-additions.test.ts), [브라우저 동작](../../react/test/web-additions.browser.test.tsx).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/design-contracts",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
   "license": "MIT",
   "repository": {
@@ -546,6 +546,30 @@
       "react-native": "./dist/qr-code.js",
       "import": "./dist/qr-code.js",
       "default": "./dist/qr-code.js"
+    },
+    "./components/color-picker": {
+      "types": "./dist/color-picker.d.ts",
+      "react-native": "./dist/color-picker.js",
+      "import": "./dist/color-picker.js",
+      "default": "./dist/color-picker.js"
+    },
+    "./components/watermark": {
+      "types": "./dist/watermark.d.ts",
+      "react-native": "./dist/watermark.js",
+      "import": "./dist/watermark.js",
+      "default": "./dist/watermark.js"
+    },
+    "./components/affix": {
+      "types": "./dist/affix.d.ts",
+      "react-native": "./dist/affix.js",
+      "import": "./dist/affix.js",
+      "default": "./dist/affix.js"
+    },
+    "./components/interaction-adapters": {
+      "types": "./dist/interaction-adapters.d.ts",
+      "react-native": "./dist/interaction-adapters.js",
+      "import": "./dist/interaction-adapters.js",
+      "default": "./dist/interaction-adapters.js"
     }
   },
   "files": [