From 5399e29357663d16d1fd04252da32d5450e0081d Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Sat, 25 Jul 2026 08:49:20 +0900
Subject: [PATCH] docs: standardize README (badges to top,
 TypeScript/StackBlitz badges, Family section)

---
 README.ko.md | 15 +++++++++++----
 README.md    | 15 +++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/README.ko.md b/README.ko.md
index c6627d3..287bcc9 100644
--- a/README.ko.md
+++ b/README.ko.md
@@ -1,5 +1,11 @@
 # numkey
 
+[![npm](https://img.shields.io/npm/v/%40devslab%2Fnumkey)](https://www.npmjs.com/package/@devslab/numkey)
+[![CI](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml/badge.svg)](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml)
+![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white)
+[![License](https://img.shields.io/badge/License-MIT-blue)](./LICENSE)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/vanilla)
+
 [English](README.md) | **한국어** · [📺 라이브 데모](https://devslab-kr.github.io/numkey/)
 
 바로 실행해보기: [⚡ StackBlitz — Vanilla](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/vanilla) · [Vue](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/vue) · [React](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/react) | [📦 CodeSandbox](https://codesandbox.io/s/github/devslab-kr/numkey/tree/main/examples/vanilla)
@@ -8,10 +14,6 @@
   <a href="https://devslab-kr.github.io/numkey/"><img src="https://raw.githubusercontent.com/devslab-kr/numkey/main/docs/preview.png" alt="numkey 데모 — 실시간 천 단위 콤마, 한글 금액 병기 (150만 원), 붙여넣기 정제" width="720"></a>
 </p>
 
-[![npm](https://img.shields.io/npm/v/%40devslab%2Fnumkey)](https://www.npmjs.com/package/@devslab/numkey)
-[![CI](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml/badge.svg)](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml)
-[![license](https://img.shields.io/npm/l/%40devslab%2Fnumkey)](./LICENSE)
-
 **"문자열인데 숫자야."** 업무 시스템엔 이런 필드가 꼭 있습니다 — 금액, 수량,
 단가. 그리고 매번 같은 걸 손으로 다시 만들죠: 실시간 천 단위 콤마(`10,000`),
 앞자리 0 제거, 오른쪽 정렬, 모바일 숫자 키패드, 그리고 콤마가 생기고 사라져도
@@ -274,6 +276,11 @@ const [amount, setAmount] = useState('')
 한 글자씩 타이핑하는 regression 테스트)은
 [CONTRIBUTING.md](./CONTRIBUTING.md)를 보세요.
 
+## Family
+
+- [kokey](https://github.com/devslab-kr/kokey) — "-key" 인풋 패밀리의 자판 형제: 완전한 한국어 IME 오토마타로 자판 오입력 텍스트를 복원
+- [devslab](https://github.com/devslab-kr)의 다른 오픈소스
+
 ## License
 
 MIT © [devslab](https://github.com/devslab-kr)
diff --git a/README.md b/README.md
index f59da6c..3ffb607 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,11 @@
 # numkey
 
+[![npm](https://img.shields.io/npm/v/%40devslab%2Fnumkey)](https://www.npmjs.com/package/@devslab/numkey)
+[![CI](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml/badge.svg)](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml)
+![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white)
+[![License](https://img.shields.io/badge/License-MIT-blue)](./LICENSE)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/vanilla)
+
 **English** | [한국어](README.ko.md) · [📺 Live demo](https://devslab-kr.github.io/numkey/)
 
 Try it online: [⚡ StackBlitz — Vanilla](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/vanilla) · [Vue](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/vue) · [React](https://stackblitz.com/github/devslab-kr/numkey/tree/main/examples/react) | [📦 CodeSandbox](https://codesandbox.io/s/github/devslab-kr/numkey/tree/main/examples/vanilla)
@@ -8,10 +14,6 @@ Try it online: [⚡ StackBlitz — Vanilla](https://stackblitz.com/github/devsla
   <a href="https://devslab-kr.github.io/numkey/"><img src="https://raw.githubusercontent.com/devslab-kr/numkey/main/docs/preview.png" alt="numkey demo — live thousands grouping, Korean amount reading (150만 원), paste sanitizing" width="720"></a>
 </p>
 
-[![npm](https://img.shields.io/npm/v/%40devslab%2Fnumkey)](https://www.npmjs.com/package/@devslab/numkey)
-[![CI](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml/badge.svg)](https://github.com/devslab-kr/numkey/actions/workflows/ci.yml)
-[![license](https://img.shields.io/npm/l/%40devslab%2Fnumkey)](./LICENSE)
-
 **"It's a string, but it's a number."** Every business app has these fields —
 amounts, quantities, prices — and every team rebuilds the same input by hand:
 live thousands grouping (`10,000`), no leading zeros, right-aligned, numeric
@@ -277,6 +279,11 @@ Issues and PRs welcome — see [CONTRIBUTING.md](./CONTRIBUTING.md) for the dev
 setup and the ground rules (string-first values, IME safety, char-by-char
 regression tests).
 
+## Family
+
+- [kokey](https://github.com/devslab-kr/kokey) — the keyboard-layout sibling in the "-key" input family: wrong-layout text restoration with a full Korean IME automaton
+- More open source from [devslab](https://github.com/devslab-kr)
+
 ## License
 
 MIT © [devslab](https://github.com/devslab-kr)