@neurocle/synapse-react 0.0.0-bootstrap → 0.0.0-stage

package/skills/components/dialog/SKILL.md

@@ -1,159 +0,0 @@
----
-name: 'dialog'
-description: 'Dialog — 흐름을 끊는 모달 레이어입니다. trigger가 열면 포커스가 안으로 옮겨지고 뒤쪽 페이지는 inert(상호작용 불가) 상태가 되며, 사용자가 응답하거나 닫을 때까지 그대로 남습니다. 다른 이름: dialog, modal, modal dialog, confirmation, popup window, lightbox, 다이얼로그, 대화상자, 모달, 모달 창, 확인 창, 팝업.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/dialog.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/dialog.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Dialog
-
-> 흐름을 끊는 모달 레이어입니다. trigger가 열면 포커스가 안으로 옮겨지고 뒤쪽 페이지는 inert(상호작용 불가) 상태가 되며, 사용자가 응답하거나 닫을 때까지 그대로 남습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Dialog`
-- 분류: `floating-and-overlay`
-- 수명 주기: `active`
-
-## Do
-
-> 사용자가 계속 진행하기 전에 끝내야 하는 작업이나 결정에 쓰세요. 파괴적인 동작의 확인, 다른 곳을 잘못 클릭해서 잃어버리면 안 되는 짧은 폼, 반드시 확인해야 하는 경고가 그렇습니다. 흐름을 끊는 것 자체가 목적일 때 선택하세요. 포커스를 가져가고, 뒤쪽 페이지를 inert(상호작용 불가) 상태로 만들며, 저절로 사라지지 않습니다. `role="alertdialog"`는 그중 작업이 아니라 방해인 경우를 위한 것이며, 레이어가 안내되는 방식뿐 아니라 포커스가 놓이는 위치도 바꿉니다.
-
-## Don't
-
-> 사용자가 무시해도 되는 부차적 콘텐츠에는 쓰지 마세요. Popover는 페이지를 살아 있는 상태로 두고 닫는 데 비용이 들지 않지만, 필터 패널을 모달로 만들면 페이지의 다른 모든 선택지에 닿을 수 없게 됩니다. 후속 질문을 하려고 대화상자 위에 대화상자를 쌓지 마세요. 사용자는 이제 떠날 수 없는 것을 두 개 갖게 되며, 겉보기보다 나빠지지 않는 것은 오직 machine의 닫힘 순서 덕분입니다. 이미 끝난 일을 알리는 데 쓰지 마세요. 성공한 저장은 Toast이며, 소식을 확인하라고 요구하는 대화상자는 아무도 읽지 않습니다. 그리고 Title이나 `aria-label` 없이 열지 마세요. content는 존재하지 않는 제목을 aria-labelledby로 가리키게 되고, 대화상자는 이름 없이 안내됩니다.
-
-## Anti-patterns
-
-> trigger나 닫기 컨트롤을 맨 `<button>`으로 만들고 `open`을 손으로 연결하는 것. Dialog.Trigger는 aria-haspopup, aria-expanded, aria-controls를 가지며 포커스가 돌아올 요소이기도 합니다. 손으로 만든 버튼은 똑같아 보이지만 이 중 아무것도 안내하지 않고, 대화상자가 닫힐 때 포커스를 그때 있던 아무 곳에나 떨어뜨립니다. 두 번째 실수는 CloseTrigger 안에 아이콘만 넣는 것입니다. 자식은 기본 콘텐츠를 대체하며 번역된 이름도 함께 사라집니다. 아이콘과 이름을 얻으려면 비워 두거나, 아이콘 버튼에 `aria-label`을 주세요.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Drawer` (`drawer`)
-- `Popover` (`popover`)
-- `FloatingPanel` (`floating-panel`)
-- `Toast` (`toast`)
-- `Tooltip` (`tooltip`)
-
-## 가져오기
-
-```tsx
-import { Dialog } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 8개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Dialog.Root>
-  <Dialog.Trigger />
-  <Dialog.Backdrop />
-  <Dialog.Positioner>
-    <Dialog.Content>
-      <Dialog.Title />
-      <Dialog.Description />
-      <Dialog.CloseTrigger />
-    </Dialog.Content>
-  </Dialog.Positioner>
-</Dialog.Root>
-```
-
-- `Dialog.Root`
-- `Dialog.Trigger` — 최상위에 놓입니다
-- `Dialog.Backdrop` — 최상위에 놓입니다
-- `Dialog.Positioner` — 최상위에 놓입니다
-- `Dialog.Content` — `Positioner` 안에 놓입니다
-- `Dialog.Title` — `Content` 안에 놓입니다
-- `Dialog.Description` — `Content` 안에 놓입니다
-- `Dialog.CloseTrigger` — `Content` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 14개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `open` — `boolean`, 선택. 제어되는 열림 상태.
-- `defaultOpen` — `boolean`, 선택. 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다.
-- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 대화상자가 열리거나 닫힐 때마다 알림을 받습니다.
-- `role` — `DialogRole`, 선택. 대화상자가 어떻게 안내되는지를 정합니다. 기본값은 `dialog`입니다.
-- `'aria-label'` — `string`, 선택. `Dialog.Title`이 이름을 주지 않을 때 쓰이는 대화상자의 접근성 이름. DOM 속성이 아니라 machine prop입니다: machine이 이 값을 content 엘리먼트에 붙이는데, 그것이 바로 `role="dialog"`를 지닌 엘리먼트이고, `Dialog.Title`이 있으면 `aria-labelledby`를 제공해 여전히 우선합니다.
-- `modal` — `boolean`, 선택. 열려 있는 동안 페이지의 나머지를 비활성 상태로 만듭니다. 기본값은 true입니다.
-- `trapFocus` — `boolean`, 선택. 열려 있는 동안 포커스를 대화상자 안에 가둡니다. 모달 대화상자에서는 기본값이 true입니다.
-- `restoreFocus` — `boolean`, 선택. 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다.
-- `preventScroll` — `boolean`, 선택. 열려 있는 동안 뒤쪽 페이지가 스크롤되지 않게 합니다. 모달에서는 기본값이 true입니다.
-- `closeOnEscape` — `boolean`, 선택. Escape를 누르면 닫힙니다. 기본값은 true입니다.
-- `closeOnInteractOutside` — `boolean`, 선택. 바깥에서 포인터가 눌리면 닫힙니다. 기본값은 true입니다.
-- `translations` — `TranslationOverrides`, 선택. 이 Dialog에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
-- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size 축은 trigger, content의 패딩과 그 안의 글자, 닫기 아이콘의 크기를 조절합니다. 대화상자의 너비는 조절하지 않습니다. content는 모든 크기에서 `surface.overlayMin`과 `surface.overlayMax` 사이에 놓이는데, 대화상자의 너비는 다섯 단계 척도가 아니라 안에 담긴 내용을 따르기 때문입니다.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다. Dialog 안의 폼은 사용처 자신의 `form` 요소이며 사용자적으로 폼에 참여합니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — Dialog는 제품이 넣은 콘텐츠를 렌더링할 뿐 컬렉션을 소유하지 않으므로, 보여 줄 것이 없는 상태가 존재하지 않습니다. 할 말이 없는 대화상자는 애초에 열지 말았어야 하는 대화상자이고, 그 판단은 이 컴포넌트에 닿기 전에 내려집니다.
-- `loading-state` — 아직 도착 중인 콘텐츠는 Content 안에서 제품 고유의 placeholder로 보여 주며, 그 자리에서 대체할 대상과 같은 모양을 취할 수 있습니다. 여기에 part를 두면 이 컴포넌트가 소유하지 않는 것의 레이아웃을 고정하게 되고, 그것도 이미 사용자의 포커스와 페이지를 가져간 레이어 안에서 그렇게 됩니다.
-- `error-state` — 이 컴포넌트는 값을 보유하지 않고 어떤 작업도 수행하지 않으므로, 스스로 실패할 수 있는 것이 없습니다. 대화상자 안에서 일어난 실패, 예컨대 제출되지 않는 폼은 그것을 일으킨 쪽이 해당 컨트롤 옆에서 보고하며, 이는 페이지에 있을 때와 정확히 같습니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> Title에서 aria-labelledby를 통해 이름을 얻거나, Root의 `aria-label`에서 얻습니다. 이것은 machine prop이어서, machine은 팩토리가 처음 보는 요소가 아니라 content 요소에 붙입니다. machine은 닫기 trigger에 이름을 주지 않으므로 컴포넌트가 줍니다. 비워 두면 CloseTrigger가 닫기 아이콘 옆에 시각적으로 숨긴 `dialog.closeTrigger.label`을 그립니다. 사용처의 자식이나 CloseTrigger에 직접 준 `aria-label`은 이를 대체하는데, 충돌 규칙은 동작 계층이 의견을 가진 곳에서만 동작 계층이 이기도록 하기 때문입니다.
-
-### 포커스
-
-> 열릴 때 포커스가 content로 옮겨지고 닫힐 때 trigger로 돌아오며, 둘 다 machine이 처리합니다. 이 패키지의 어떤 컴포넌트도 포커스 복원을 따로 구현하지 않습니다. `alertdialog`는 첫 번째 탭 가능한 요소가 아니라 닫기 trigger에서 시작하는데, 작업을 담는 레이어가 아니라 흐름을 끊는 레이어라면 그곳이 알맞은 착지점입니다. 모달인 동안에는 페이지의 나머지가 aria-hidden 처리되고 뒤쪽 페이지의 스크롤이 잠깁니다. 검증 불가: 이 패키지는 레이아웃 엔진이나 실제 브라우저 없이 렌더링하므로, 포커스 가두기, 포커스 복원, 스크롤 잠금은 업스트림에서 검증되며 이 테스트 모음 어디에서도 검증되지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. machine이 provider의 방향을 모든 part에 기록하고, 레시피는 닫기 컨트롤을 content 열의 flex 끝, 즉 논리적 가장자리에 정렬합니다. 그래서 오른쪽에서 왼쪽으로 쓰는 인터페이스에서는 별도 규칙 없이도 반대쪽에 놓입니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 구조 메모
-
-### 닫기 trigger의 기본 콘텐츠
-
-> `@zag-js/dialog`는 `translations`를 받지 않고 문자열도 하드코딩하지 않으므로, 컴포넌트가 닫기 trigger의 기본 콘텐츠를 직접 제공합니다. 닫기 아이콘과 시각적으로 숨긴 `dialog.closeTrigger.label`이 그것이며, 덕분에 비어 있는 CloseTrigger도 이름 없는 버튼이 되지 않습니다. machine이 이 part에 내보내는 것은 `type`과 닫기 동작뿐이므로, 사용처가 CloseTrigger에 직접 준 `aria-label`은 병합 후에도 남습니다.
-
-### 요소를 렌더링하지 않는 루트
-
-> 대화상자 machine에는 `root` anatomy part가 없으므로, Dialog.Root는 동작 상태를 공개할 뿐 아무것도 렌더링하지 않습니다. trigger는 사용처가 작성한 자리, 곧 읽는 흐름 안에 머무르고, Backdrop, Positioner, Content는 trigger에서 떨어진 곳으로 포털될 수 있습니다. 이것이 조상의 `overflow: hidden`이 모달 레이어를 잘라내지 못하게 합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `modal-layer`, `confirm-destructive-action`, `focus-trap`, `dismiss-on-outside-click`, `translatable-strings`.
-- 다른 이름: `dialog`, `modal`, `modal dialog`, `confirmation`, `popup window`, `lightbox`, `다이얼로그`, `대화상자`, `모달`, `모달 창`, `확인 창`, `팝업`.
-- 어휘 상태: `controlled`.

package/skills/components/drawer/SKILL.md

@@ -1,192 +0,0 @@
----
-name: 'drawer'
-description: 'Drawer — 가장자리에서 나타나며 끌어서 움직일 수 있는 대화상자입니다. Dialog와 같은 모달 계약에 더해, 잡기 핸들, 스냅 지점, 스와이프 제스처를 가지며 이 셋은 전적으로 machine이 담당합니다. 다른 이름: drawer, sheet, bottom sheet, side panel, slide-over, off-canvas, 드로어, 서랍, 시트, 바텀 시트, 사이드 패널, 슬라이드 패널.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/drawer.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/drawer.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Drawer
-
-> 가장자리에서 나타나며 끌어서 움직일 수 있는 대화상자입니다. Dialog와 같은 모달 계약에 더해, 잡기 핸들, 스냅 지점, 스와이프 제스처를 가지며 이 셋은 전적으로 machine이 담당합니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Drawer`
-- 분류: `floating-and-overlay`
-- 수명 주기: `active`
-
-## 알려진 예외 — 사용 전에 확인
-
-이 컴포넌트는 아래 기준 2개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
-
-### WCAG 2.2 SC 2.1.1 키보드 (A)
-
-- 충족하지 못하는 것: 스냅 지점 사이를 오가는 키보드 경로가 없습니다. 키보드로 연 드로어는 기본 정지점에 머물고 닫는 것만 가능합니다.
-- 의도한 이유: machine이 포인터 제스처로만 정지점을 옮기며, machine 밖에서 동작을 덧붙이지 않습니다.
-- 사용 시 유의점: 스냅 지점을 편의 기능으로만 쓰세요. 특정 정지점에서만 보이는 콘텐츠나 동작을 두지 말고, 기본 정지점에서 모든 내용에 닿게 하세요.
-
-### 알려진 결함 — 논리 방향
-
-- 충족하지 못하는 것: `swipeDirection="start"`/`"end"`는 `data-swipe-direction`이 기록되기 전에 물리값(`left`/`right`)으로 해석됩니다. 논리값을 선택하는 CSS는 아무것도 맞추지 못하고, 드로어는 배치되지 않은 채 뷰포트 가운데에 렌더링됩니다.
-- 의도한 이유: 방향 해석을 machine이 먼저 하는 업스트림 구조에서 오는 불일치이며, 오류 없이 조용히 실패합니다.
-- 사용 시 유의점: 드로어 위치를 스타일할 때는 `data-swipe-direction`의 물리값(`left`, `right`, `top`, `bottom`)을 기준으로 쓰세요.
-
-## Do
-
-> Popover보다 넓은 공간이 필요하고, 화면 가운데가 아니라 가장자리에 어울리는 작업이나 컨트롤 묶음에 쓰세요. 휴대폰의 필터 패널, 목록 옆의 상세 보기, 사용자가 끌어올렸다가 다시 내리는 시트가 그렇습니다. Dialog 대신 이것을 고르는 진짜 이유는 스냅 지점입니다. 반쯤 열린 채 멈춘 시트는 사용자가 작업 중인 페이지를 계속 보면서 그 안에서 작업할 수 있게 합니다.
-
-## Don't
-
-> 확인이나 짧은 결정에는 쓰지 마세요. 가운데에 놓인 Dialog는 사용자가 이미 보고 있는 곳에 있고, 끌 수 있는 시트는 예/아니오에 맞지 않는 어포던스입니다. 사용자가 끊임없이 방문하는 내비게이션에도 쓰지 마세요. 드로어는 읽기 전에 먼저 열어야 하므로 매번 상호작용 하나가 들고, 항상 보이는 사이드바는 그 비용이 없습니다. 스와이프에 의미를 싣지 마세요. 제스처는 포인터 전용이고 키보드 대응이 없으므로, 키보드나 스크린 리더 사용자는 trigger로 콘텐츠에 들어가 Escape나 닫기 컨트롤로 나올 뿐 스냅 지점을 거치지 않습니다. 그리고 전달한 논리 방향을 기준으로 배치 스타일을 작성하지 마세요. machine이 이미 물리 방향으로 해석해 두었습니다.
-
-## Anti-patterns
-
-> 사용처가 준 논리 방향을 기준으로 드로어의 기하 스타일을 작성하는 것. `swipeDirection="end"`는 `data-swipe-direction`이 기록되기 전에 물리값 `right`로 해석되므로, `end`를 선택하는 규칙은 아무것도 맞추지 못하며 어디에서도 오류가 나지 않습니다. 드로어는 배치되지 않은 채 뷰포트 가운데에 렌더링됩니다. 스타일 실수처럼 보이지만 실제로는 방향을 누가 해석하느냐에 대한 불일치에서 오는 실패입니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Dialog` (`dialog`)
-- `Popover` (`popover`)
-- `FloatingPanel` (`floating-panel`)
-- `Toast` (`toast`)
-
-## 가져오기
-
-```tsx
-import { Drawer } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 11개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Drawer.Root>
-  <Drawer.Positioner>
-    <Drawer.Content>
-      <Drawer.Title />
-      <Drawer.Description />
-      <Drawer.Grabber>
-        <Drawer.GrabberIndicator />
-      </Drawer.Grabber>
-      <Drawer.CloseTrigger />
-      <Drawer.SwipeArea />
-    </Drawer.Content>
-  </Drawer.Positioner>
-  <Drawer.Trigger />
-  <Drawer.Backdrop />
-</Drawer.Root>
-```
-
-- `Drawer.Root`
-- `Drawer.Positioner` — 최상위에 놓입니다
-- `Drawer.Content` — `Positioner` 안에 놓입니다
-- `Drawer.Title` — `Content` 안에 놓입니다
-- `Drawer.Description` — `Content` 안에 놓입니다
-- `Drawer.Trigger` — 최상위에 놓입니다
-- `Drawer.Backdrop` — 최상위에 놓입니다
-- `Drawer.Grabber` — `Content` 안에 놓입니다
-- `Drawer.GrabberIndicator` — `Grabber` 안에 놓입니다
-- `Drawer.CloseTrigger` — `Content` 안에 놓입니다
-- `Drawer.SwipeArea` — `Content` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 21개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `open` — `boolean`, 선택. 제어되는 열림 상태.
-- `defaultOpen` — `boolean`, 선택. 비제어 초기 열림 상태. `open`이 주어지면 무시됩니다.
-- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 드로어가 열리거나 닫힐 때마다 알림을 받습니다.
-- `role` — `'dialog' | 'alertdialog'`, 선택. 드로어가 어떻게 안내되는지를 정합니다. 기본값은 `dialog`입니다.
-- `'aria-label'` — `string`, 선택. `Drawer.Title`이 이름을 주지 않을 때 쓰이는 드로어의 접근성 이름. `role`을 지닌 content 엘리먼트에 붙으며, `Drawer.Title`이 있으면 `aria-labelledby`가 여전히 우선합니다.
-- `swipeDirection` — `DrawerSwipeDirection`, 선택. 드로어를 닫으려고 끌고 가는 쪽의 가장자리. 기본값은 `down`입니다.
-- `snapPoints` — `readonly DrawerSnapPoint[]`, 선택. 드로어가 멈추는 지점들. 생략하면 전체 크기의 지점 하나만 둡니다.
-- `snapPoint` — `DrawerSnapPoint | null`, 선택. 제어되는 멈춤 지점.
-- `defaultSnapPoint` — `DrawerSnapPoint | null`, 선택. 비제어 초기 멈춤 지점. `snapPoint`가 주어지면 무시됩니다.
-- `onSnapPointChange` — `(details: DrawerSnapPointChangeDetails) => void`, 선택. 드로어가 다른 멈춤 지점에 자리 잡을 때마다 알림을 받습니다.
-- `snapToSequentialPoints` — `boolean`, 선택. 제스처 한 번에 가장 가까운 지점이 아니라 바로 옆 지점으로만 이동합니다.
-- `modal` — `boolean`, 선택. 열려 있는 동안 페이지의 나머지를 비활성 상태로 만듭니다. 기본값은 true입니다.
-- `trapFocus` — `boolean`, 선택. 열려 있는 동안 포커스를 드로어 안에 가둡니다. 모달 드로어에서는 기본값이 true입니다.
-- `restoreFocus` — `boolean`, 선택. 닫힐 때 포커스를 trigger로 되돌립니다. 기본값은 true입니다.
-- `preventScroll` — `boolean`, 선택. 열려 있는 동안 뒤쪽 페이지가 스크롤되지 않게 합니다.
-- `preventDragOnScroll` — `boolean`, 선택. 콘텐츠 안의 스크롤 제스처를 드로어 드래그로 가로채지 않고 그대로 둡니다.
-- `closeOnEscape` — `boolean`, 선택. Escape를 누르면 닫힙니다. 기본값은 true입니다.
-- `closeOnInteractOutside` — `boolean`, 선택. 바깥에서 포인터가 눌리면 닫힙니다. 기본값은 true입니다.
-- `translations` — `TranslationOverrides`, 선택. 이 Drawer에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
-- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size 축은 trigger, content의 패딩과 그 안의 글자, 닫기 아이콘의 크기를 조절합니다. 드로어가 가장자리에서 얼마나 나오는지는 정하지 않습니다. 그것은 content 자체의 크기와 스냅 지점이 정하며, machine은 스냅 지점을 비율이나 CSS 길이로 표현하고 사용자는 끌어서 바꿀 수 있습니다.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다. Drawer 안의 폼은 사용처 자신의 `form` 요소이며 사용자적으로 폼에 참여합니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — Drawer는 제품이 넣은 콘텐츠를 렌더링할 뿐 컬렉션을 소유하지 않으므로, 보여 줄 것이 없는 상태가 없습니다. 비어 있는 채로 밀려 나오는 가장자리 패널은 제품이 안에 아무것도 없이 열기로 결정한 결과이며, 그 결정은 이 컴포넌트에 닿기 전에 내려집니다.
-- `loading-state` — 아직 도착 중인 콘텐츠는 Content 안에서 제품 고유의 placeholder로 보여 줍니다. 여기에 part를 두면 드로어를 쓰는 제품마다 가장 크게 달라지는 부분의 레이아웃을 고정하게 되고, 그것도 이미 포커스를 가져가고 뒤쪽 페이지를 잠근 레이어 안에서 그렇게 됩니다.
-- `error-state` — 이 컴포넌트는 값을 보유하지 않고 스스로 어떤 작업도 수행하지 않으므로, 여기서 실패할 수 있는 것이 없습니다. 충분히 멀리 끌리지 않은 드래그도 오류가 아닙니다. 가장 가까운 정지점으로 되돌아가 자리 잡는데, 이것이 machine의 답이며 제스처에 관한 메시지보다 나은 답입니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> Title에서 aria-labelledby를 통해 이름을 얻거나, Root의 `aria-label`에서 얻습니다. machine은 이런 prop을 받지 않으므로 컴포넌트가 이 값을 content 요소에 붙이며, Title이 렌더링되어 있으면 여전히 Title이 우선합니다. 닫기 trigger는 비워 두면 아이콘 옆의 시각적으로 숨긴 span에 provider의 `drawer.closeTrigger.label`을 넣어 스스로 이름을 얻고, 자식이 주어지면 자식이 이름을 줍니다.
-
-### 포커스
-
-> 열릴 때 포커스가 content로 옮겨지고 닫힐 때 trigger로 돌아오며, 둘 다 machine이 처리하고 드로어가 모달인 동안에는 포커스가 갇힙니다. 스냅 지점 사이를 오가는 키보드 경로는 없습니다. machine은 포인터 제스처로만 정지점 사이를 옮기므로, 키보드로 연 드로어는 기본 정지점에 머물고 거기서 닫는 것만 가능합니다. 스냅 지점을 편의 기능 이상으로 쓰는 제품은 키보드 사용자가 대신 무엇을 얻는지 밝혀야 합니다. 검증 불가: 이 패키지는 레이아웃 엔진, 포인터, 터치 장치 없이 렌더링하므로, 드래그, 스냅, 포커스 가두기, 스크롤 잠금은 업스트림에서 검증되며 이 테스트 모음 어디에서도 검증되지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. `swipeDirection`은 논리값 `start`와 `end`를 받고, machine이 이를 provider의 방향에 맞춰 해석합니다. 그래서 같은 Drawer가 영어 인터페이스와 아랍어 인터페이스에서 서로 반대쪽 가장자리에 붙습니다. 방향은 모든 part에도 기록됩니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 구조 메모
-
-### 스타일보다 먼저 정해지는 방향
-
-> `swipeDirection`은 논리값 `start`와 `end`를 받고, machine은 레시피가 선택 기준으로 삼는 `data-swipe-direction`을 기록하기 전에 이를 provider의 방향에 맞춰 해석합니다. 따라서 이 속성은 항상 물리값 `up`, `down`, `left`, `right` 중 하나입니다. `start`를 기준으로 작성한 스타일 규칙은 조용히 아무것도 맞추지 못하고, 드로어는 배치되지 않은 채 뷰포트 가운데에 렌더링됩니다.
-
-### 스택 prop 없음
-
-> machine은 동작 라이브러리 자체의 `createStack`으로 만든 애플리케이션 수준 스택 객체를 받지만, 컴포넌트는 이를 노출하지 않습니다. 노출하면 업스트림 타입이 이 패키지의 공개 계약에 들어가기 때문입니다. 여러 개의 열린 드로어를 조율하는 일은 Synapse 레이어링 정책(`packages/react/src/shared/layering.ts`)의 몫이지, 여기서 전달하는 prop의 몫이 아닙니다.
-
-### 요소를 렌더링하지 않는 루트
-
-> 드로어 machine에는 `root` anatomy part가 없으므로, Drawer.Root는 Dialog의 것과 똑같이 동작 상태를 공개할 뿐 아무것도 렌더링하지 않습니다. trigger는 읽는 흐름 안에 머물고, 가장자리에 고정되는 레이어는 그것을 잘라낼 조상으로부터 떨어진 곳으로 포털될 수 있습니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `edge-panel`, `modal-layer`, `swipe-to-dismiss`, `snap-points`, `dismiss-on-outside-click`, `translatable-strings`.
-- 다른 이름: `drawer`, `sheet`, `bottom sheet`, `side panel`, `slide-over`, `off-canvas`, `드로어`, `서랍`, `시트`, `바텀 시트`, `사이드 패널`, `슬라이드 패널`.
-- 어휘 상태: `controlled`.

package/skills/components/editable/SKILL.md

@@ -1,162 +0,0 @@
----
-name: 'editable'
-description: 'Editable — 제자리에서 읽고 제자리에서 편집하는 텍스트입니다. 미리보기와 입력이 하나의 그리드 셀을 공유하므로 모드가 바뀌어도 페이지의 어떤 것도 움직이지 않습니다. 다른 이름: editable, inline edit, click to edit, edit in place, rename field, 인라인 편집, 제자리 편집, 클릭하여 편집, 편집 가능한 텍스트, 이름 바꾸기 필드.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/editable.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/editable.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Editable
-
-> 제자리에서 읽고 제자리에서 편집하는 텍스트입니다. 미리보기와 입력이 하나의 그리드 셀을 공유하므로 모드가 바뀌어도 페이지의 어떤 것도 움직이지 않습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Editable`
-- 분류: `form-controls`
-- 수명 주기: `active`
-
-## Do
-
-> 대개는 읽기만 하고 가끔 바꾸는 짧은 값 하나에 쓰세요. 폼을 여는 것이 변경의 무게에 비해 지나치게 거창한 경우로, 문서 제목, 표시 이름, 보드 열의 제목이 그렇습니다. 읽는 것이 일반적인 경우이므로 평소 상태는 텍스트처럼 보입니다.
-
-## Don't
-
-> 항상 채워 넣는 필드에는 쓰지 마세요. 사용자의 일이 입력하는 것이라면 입력 필드를 주고 한 단계를 생략하세요. 서로 관련된 여러 값을 한꺼번에 다루는 데도 쓰지 마세요. 값마다 따로 확정되므로, 셋을 고치고 한 번 저장되기를 기대한 사용자는 저장을 세 번 겪게 되며, 그 의도에 맞는 컨트롤은 폼입니다. 여러 줄 편집기가 필요할 만큼 긴 내용에도 쓰지 마세요.
-
-## Anti-patterns
-
-> 텍스트를 미리보기 getter가 채워 주리라 믿는 것. `getPreviewProps()`는 반환하는 prop 중에 `children`을 포함하는데, React의 createElement는 세 번째 인자가 전달되면 그것이 `undefined`여도 props.children을 덮어씁니다. 그래서 텍스트가 버려지고, DOM은 나무랄 데 없는데 미리보기만 비어 있게 렌더링됩니다. 값은 대신 `defaultContent`를 통해 미리보기에 전달됩니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `NumberInput` (`number-input`)
-- `PasswordInput` (`password-input`)
-- `PinInput` (`pin-input`)
-
-## 가져오기
-
-```tsx
-import { Editable } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 9개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Editable.Root>
-  <Editable.Area>
-    <Editable.Preview />
-    <Editable.Input />
-  </Editable.Area>
-  <Editable.Label />
-  <Editable.Control>
-    <Editable.EditTrigger />
-    <Editable.SubmitTrigger />
-    <Editable.CancelTrigger />
-  </Editable.Control>
-</Editable.Root>
-```
-
-- `Editable.Root` — 최상위에 놓입니다
-- `Editable.Area` — `Root` 안에 놓입니다
-- `Editable.Label` — `Root` 안에 놓입니다
-- `Editable.Preview` — `Area` 안에 놓입니다
-- `Editable.Input` — `Area` 안에 놓입니다
-- `Editable.EditTrigger` — `Control` 안, 또는 `Root` 안에 놓입니다
-- `Editable.SubmitTrigger` — `Control` 안, 또는 `Root` 안에 놓입니다
-- `Editable.CancelTrigger` — `Control` 안, 또는 `Root` 안에 놓입니다
-- `Editable.Control` — `Root` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 23개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `value` — `string`, 선택. 제어되는 값.
-- `defaultValue` — `string`, 선택. 비제어 초기 값. `value`가 주어지면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<string>) => void`, 선택. 편집 중 키를 누를 때마다 알림을 받습니다.
-- `onValueCommit` — `(details: ValueChangeDetails<string>) => void`, 선택. 편집이 확정될 때 알림을 받습니다 — 저장할 때 쓸 콜백입니다.
-- `onValueRevert` — `(details: ValueChangeDetails<string>) => void`, 선택. 편집이 취소되고 이전 값이 복원될 때 알림을 받습니다.
-- `open` — `boolean`, 선택. 제어되는 편집 모드. machine의 `edit`을 다른 컴포넌트와 같은 이름인 `open`으로 받습니다.
-- `defaultOpen` — `boolean`, 선택. 비제어 초기 편집 모드. `open`이 주어지면 무시됩니다.
-- `onOpenChange` — `(details: OpenChangeDetails) => void`, 선택. 제어 여부와 무관하게 편집 모드에 들어가거나 나올 때마다 알림을 받습니다.
-- `activationMode` — `EditableActivationMode`, 선택. 무엇이 편집을 시작시키는지. 기본값은 `focus`입니다.
-- `submitMode` — `EditableSubmitMode`, 선택. 무엇이 편집을 확정하는지. 기본값은 `both`이며, 블러 또는 Enter입니다.
-- `selectOnFocus` — `boolean`, 선택. 입력이 포커스를 받을 때 값 전체를 선택해, 타이핑하면 값이 대체되게 합니다.
-- `autoResize` — `boolean`, 선택. 고정 너비를 유지하는 대신 입력이 내용에 따라 늘어나게 합니다.
-- `maxLength` — `number`, 선택. 입력이 받아들이는 값의 최대 길이.
-- `placeholder` — `EditablePlaceholder`, 선택. 값이 비었을 때 보입니다 — 두 모드에 한 문자열을 쓰거나, 모드별로 하나씩 줍니다.
-- `name` — `string`, 선택. 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다.
-- `form` — `string`, 선택. 폼 바깥에 렌더된 Editable을 id로 폼과 연결합니다.
-- `disabled` — `boolean`, 선택. 비활성화된 Editable은 제출되지 않고 편집할 수도 없습니다.
-- `readOnly` — `boolean`, 선택. 읽기 전용 Editable은 값을 제출하지만 편집할 수는 없습니다.
-- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알려집니다.
-- `required` — `boolean`, 선택. 제약 검증: 폼이 제출되려면 필드에 값이 있어야 합니다.
-- `translations` — `TranslationOverrides`, 선택. 이 Editable에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다.
-- `size` — `Size`, 선택. 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 예.
-
-- `input[type=text]`로 제출합니다.
-- 제출 값은 `value`에서 옵니다.
-- 항목은 사용처가 아무것도 설정하지 않았을 때 제출되는 값을 기록하지 않습니다.
-
-> 보이는 입력이 `name`과 `form`을 지니므로, 제출만을 위해 렌더링되는 요소가 없습니다. 미리보기가 보이는 동안 입력은 `hidden` 상태이지만, 숨겨진 입력도 제출된다는 점에 유의하세요. 여기서 원하는 동작이 바로 그것입니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 컬렉션이 아니라 문자열 하나를 보유합니다. 값이 없는 Editable은 placeholder를 보여 주고 `data-placeholder-shown`을 설정하며 레시피가 이를 꾸밉니다. 이것이 빈 경우이며, 별도 part가 아니라 미리보기의 한 상태로 다룹니다.
-- `loading-state` — 아직 도착하지 않은 값은 비활성화된 Editable에 주변 페이지가 이미 쓰는 스켈레톤을 더해 표현합니다. 정말 중요한 기다림, 즉 받아들인 편집을 저장하는 일은 사용처가 `onValueCommit`으로 하는 작업 안에서, 컨트롤 바깥에서 일어납니다.
-- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 보고되고 aria-invalid로 안내됩니다. 편집이 왜 거부되었는지 설명하는 메시지는 그것을 거부한 쪽, 곧 컨트롤이 아니라 사용처의 저장 로직에 속합니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 필드는 htmlFor로 연결된 실제 `<label>`인 Label part에서 이름을 얻습니다. 입력, 미리보기, 세 trigger는 machine에 내장된 영어가 아니라 provider의 번역 가능한 문자열 집합에서 aria-label을 가져옵니다.
-
-### 포커스
-
-> 컨트롤이 상호작용 가능한 동안 미리보기는 탭 정지 지점(`tabIndex={0}`)이므로, 키보드 사용자도 포인터 사용자와 같은 방식으로 편집에 닿습니다. 편집이 시작되면 포커스가 입력으로 옮겨지고, 끝나면 다시 빠져나옵니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `edit-in-place`, `commit-or-revert`, `form-value`, `readonly-display`, `translatable-strings`.
-- 다른 이름: `editable`, `inline edit`, `click to edit`, `edit in place`, `rename field`, `인라인 편집`, `제자리 편집`, `클릭하여 편집`, `편집 가능한 텍스트`, `이름 바꾸기 필드`.
-- 어휘 상태: `controlled`.

package/skills/components/empty-state/SKILL.md

@@ -1,125 +0,0 @@
----
-name: 'empty-state'
-description: 'EmptyState — 보여 줄 것이 없는 영역에 왜 비어 있는지와 다음에 할 수 있는 일을 가운데 정렬로 알리는 자리입니다. 장식 아이콘, 제목, 설명, 그리고 사용처가 Button을 넣는 동작 자리로 이루어집니다. 다른 이름: empty state, blank slate, zero state, no results, no data, 빈 상태, 결과 없음, 데이터 없음.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/empty-state.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/empty-state.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# EmptyState
-
-> 보여 줄 것이 없는 영역에 왜 비어 있는지와 다음에 할 수 있는 일을 가운데 정렬로 알리는 자리입니다. 장식 아이콘, 제목, 설명, 그리고 사용처가 Button을 넣는 동작 자리로 이루어집니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `EmptyState`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 목록, 표, 검색 결과, 대시보드처럼 콘텐츠가 들어설 자리가 실제로 비었을 때 쓰세요. 제목은 무엇이 없는지를, 설명은 왜 없고 무엇을 하면 채워지는지를 말하고, 다음 동작이 있으면 Actions에 Button을 두세요 — 주된 동작 하나만 solid로. 자리의 크기에 맞춰 `size`를 고르세요.
-
-## Don't
-
-> 불러오는 중에는 쓰지 마세요 — 그동안은 Skeleton이나 Spinner입니다. 불러오기에 실패했으면 오류 수준의 Alert로 알리세요. 필터 때문에 결과가 없는 경우처럼 사용자가 방금 한 일의 결과라면, 그 조작을 되돌릴 방법(필터 초기화)을 Actions에 두세요.
-
-## Anti-patterns
-
-> 데이터가 도착하기 전에 EmptyState를 먼저 그리는 것. 잠깐 '아직 없습니다'가 보였다가 내용이 나타나면, 사용자는 실제로 비어 있다고 믿고 떠나거나 불필요한 동작을 누릅니다. 결과가 확정된 뒤에만 렌더링하세요.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
-
-## 관련 컴포넌트
-
-- `Button` (`button`)
-- `Alert` (`alert`)
-
-## 가져오기
-
-```tsx
-import { EmptyState } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 5개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<EmptyState.Root>
-  <EmptyState.Indicator />
-  <EmptyState.Title />
-  <EmptyState.Description />
-  <EmptyState.Actions />
-</EmptyState.Root>
-```
-
-- `EmptyState.Root` — 최상위에 놓입니다
-- `EmptyState.Indicator` — `Root` 안에 놓입니다
-- `EmptyState.Title` — `Root` 안에 놓입니다
-- `EmptyState.Description` — `Root` 안에 놓입니다
-- `EmptyState.Actions` — `Root` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 표의 빈 행처럼 좁은 자리에는 작게, 페이지 전체가 빈 자리에는 크게 둡니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없는 표시 영역입니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — EmptyState가 곧 빈 상태의 표현입니다. 비어 있는 EmptyState라는 상태는 없으며, 내용 없이 렌더링할 이유도 없습니다.
-- `loading-state` — 아직 불러오는 중인 영역은 비어 있는 것이 아닙니다. 그동안은 Skeleton이나 Spinner를 두고, 불러온 결과가 정말 비었을 때만 EmptyState를 렌더링합니다 — 둘을 섞으면 잠깐 '없음'이 보였다가 내용이 나타납니다.
-- `error-state` — 불러오기에 실패한 영역은 비어 있는 것이 아니라 실패한 것입니다. 그것은 오류 수준의 Alert로 알리며, EmptyState에 오류 문구를 넣지 않습니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 이름이 필요 없습니다. 제목과 설명이 일반 텍스트로 읽힙니다.
-
-### 포커스
-
-> 포커스를 받는 요소가 없고, 나타나도 포커스를 옮기지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `empty-state-guidance`, `first-run-prompt`.
-- 다른 이름: `empty state`, `blank slate`, `zero state`, `no results`, `no data`, `빈 상태`, `결과 없음`, `데이터 없음`.
-- 어휘 상태: `controlled`.