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

package/skills/components/input/SKILL.md

@@ -1,131 +0,0 @@
----
-name: 'input'
-description: 'Input — 형식이 정해지지 않은 텍스트를 한 줄로 입력받는 네이티브 `<input>`입니다. `showCount`를 켜면 입력한 글자 수를 상자 안쪽 오른쪽에 연하게 보여 줍니다. Field 안에 두면 레이블, 설명, 오류, 상태가 자동으로 연결됩니다. 다른 이름: input, text input, text field, textbox, search box, email field, 입력, 텍스트 입력, 입력창, 검색창, 이메일 입력.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/input.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/input.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Input
-
-> 형식이 정해지지 않은 텍스트를 한 줄로 입력받는 네이티브 `<input>`입니다. `showCount`를 켜면 입력한 글자 수를 상자 안쪽 오른쪽에 연하게 보여 줍니다. Field 안에 두면 레이블, 설명, 오류, 상태가 자동으로 연결됩니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Input`
-- 분류: `form-controls`
-- 수명 주기: `active`
-
-## Do
-
-> 이름, 제목, 이메일, 검색어처럼 형식이 자유로운 한 줄 텍스트를 받을 때 쓰세요. `type`은 text, email, search, tel, url만 받으며, 레이블과 오류가 필요하면 Field로 감싸세요. 길이 한도가 있으면 `maxLength`와 `showCount`로 입력한 글자 수를 상자 안쪽 오른쪽에 연하게 보여 주세요. 글자 수를 도움말과 같은 메시지 줄에 두려면 컨트롤 대신 Field의 `showCount`를 쓰세요.
-
-## Don't
-
-> 숫자는 NumberInput, 비밀번호는 PasswordInput, 날짜는 DateInput이나 DatePicker를 쓰세요 — 형식이 있는 값은 각 컴포넌트가 키보드 조작과 로케일 서식을 맡습니다. 여러 줄 텍스트는 Textarea를 쓰세요. 값을 바꾸는 이벤트는 `onChange`가 아니라 `onValueChange`로 받으세요.
-
-## Anti-patterns
-
-> placeholder를 레이블 대신 쓰는 것. 입력을 시작하면 사라져 무엇을 입력하던 중인지 알 수 없게 되고, 대비도 레이블보다 낮습니다. 레이블은 Field.Label로, 예시는 Field.HelperText로 두세요.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
-
-## 관련 컴포넌트
-
-- `Field` (`field`)
-- `Textarea` (`textarea`)
-- `NumberInput` (`number-input`)
-- `PasswordInput` (`password-input`)
-
-## 가져오기
-
-```tsx
-import { Input } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Input.Root />
-```
-
-- `Input.Root` — 최상위에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 10개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `value` — `string`, 선택. 제어되는 값.
-- `defaultValue` — `string`, 선택. 비제어 모드의 초기 값. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<string>) => void`, 선택. 사용자가 값을 바꿀 때마다 호출됩니다.
-- `invalid` — `boolean`, 선택. 오류 상태. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다.
-- `required` — `boolean`, 선택. 필수 입력. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다.
-- `disabled` — `boolean`, 선택. 비활성화된 입력은 포커스도 값 제출도 받지 않습니다. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다.
-- `readOnly` — `boolean`, 선택. 읽기 전용 입력은 포커스와 제출은 되지만 값을 바꿀 수 없습니다. `Field` 안에서는 주지 않으면 `Field`의 값을 따릅니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `showCount` — `boolean`, 선택. 입력한 글자 수를 상자 안쪽 오른쪽에 연하게 보여 줍니다. `maxLength`가 있으면 "12/40"처럼 한도와 함께 보이고, 한도에 가까워지면 남은 글자 수를 스크린 리더에 알립니다. 메시지 줄에 보이려면 Field의 `showCount`를 씁니다.
-- `type` — `InputType`, 선택. 텍스트 입력의 종류. 숫자, 비밀번호, 날짜, 체크 상자는 각자의 컴포넌트가 맡습니다. 기본값은 `text`입니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 예.
-
-- `input[type=text]`로 제출합니다.
-- 제출 값은 `value`에서 옵니다.
-- 항목은 사용처가 아무것도 설정하지 않았을 때 제출되는 값을 기록하지 않습니다.
-
-> 보이는 네이티브 요소가 곧 폼 컨트롤이며 `name`과 `form`을 그대로 받습니다. 제출만을 위해 렌더링되는 숨은 입력은 없습니다. `disabled`이면 제출에서 빠지고, `readOnly`는 제출됩니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 빈 값은 입력이 처음 놓이는 정상 상태이며, 무엇을 입력할지는 Field.Label과 Field.HelperText가 알립니다. 빈 상태를 따로 그리는 part가 있으면 입력의 레이블과 두 번째 설명이 생깁니다.
-- `loading-state` — 입력은 아무것도 불러오지 않습니다. 값을 가져오는 동안 편집을 막아야 한다면 `readOnly`나 `disabled`로 표현하세요.
-- `error-state` — 오류는 `invalid`와 Field.ErrorText로 표현합니다. 입력 자신이 오류 문구 part를 가지면 Field의 오류와 연결되지 않는 두 번째 오류 자리가 생깁니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> Field 안에서는 htmlFor로 연결된 Field.Label에서 이름을 얻고, Field의 도움말과 오류가 aria-describedby로 연결됩니다. Field 없이 쓸 때는 aria-label이나 aria-labelledby를 주세요. `showCount`이면 숨은 문구로 읽히는 글자 수 요소가 aria-describedby에 더해집니다.
-
-### 포커스
-
-> 입력 자신이 탭 정지 지점입니다. `disabled`이면 탭 순서에서 빠지고, `readOnly`는 포커스는 받지만 값을 바꾸지 못합니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `free-text-entry`, `form-value`, `readonly-display`.
-- 다른 이름: `input`, `text input`, `text field`, `textbox`, `search box`, `email field`, `입력`, `텍스트 입력`, `입력창`, `검색창`, `이메일 입력`.
-- 어휘 상태: `controlled`.

package/skills/components/kbd/SKILL.md

@@ -1,116 +0,0 @@
----
-name: 'kbd'
-description: 'Kbd — 누를 키나 단축키를 키보드 자판 모양으로 보여 주는 네이티브 `<kbd>`입니다. 조합 키는 `Kbd`를 겹쳐 쓰세요. 다른 이름: kbd, keyboard key, shortcut, hotkey, key cap, 단축키, 키보드 키, 키 표시.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/kbd.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/kbd.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Kbd
-
-> 누를 키나 단축키를 키보드 자판 모양으로 보여 주는 네이티브 `<kbd>`입니다. 조합 키는 `Kbd`를 겹쳐 쓰세요.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Kbd`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 문장이나 메뉴 옆에서 눌러야 할 키를 알려 줄 때 쓰세요 — '<Kbd>Esc</Kbd>로 닫기'처럼 말입니다. 조합 키는 바깥 `Kbd` 안에 키마다 `Kbd`를 넣어 `Ctrl + K`처럼 쓰세요.
-
-## Don't
-
-> 코드나 명령어 같은 기계 출력을 보여 줄 때는 쓰지 마세요 — 그것은 `<code>`의 몫입니다. 단축키를 실행하는 버튼으로 쓰지 마세요. Kbd는 안내일 뿐 누를 수 없습니다.
-
-## Anti-patterns
-
-> 기호만 담는 것. '⌘'나 '⇧'는 스크린 리더가 읽지 못하거나 엉뚱하게 읽으므로, 보이는 기호 옆에 읽힐 이름을 함께 두세요. 운영체제마다 다른 단축키를 한 가지로만 적는 것도 같은 부류입니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
-
-## 관련 컴포넌트
-
-- `Menu` (`menu`)
-- `Tooltip` (`tooltip`)
-
-## 가져오기
-
-```tsx
-import { Kbd } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Kbd.Root />
-```
-
-- `Kbd.Root` — 최상위에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다. 폼 안에 놓여도 내용을 보여 주는 요소일 뿐입니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — Kbd는 누를 키 하나의 이름을 그리는 요소라 비어 있을 수 있는 집합이 없습니다. 알려 줄 단축키가 없으면 Kbd 자체를 렌더링하지 마세요.
-- `loading-state` — Kbd는 아무것도 가져오지 않고 사용처가 준 키 이름을 그대로 그리므로 불러오는 중인 구간이 없습니다.
-- `error-state` — Kbd에는 값도 입력도 없고 키를 누른 결과를 실행하지도 않으므로 실패할 수 있는 것이 없습니다. 단축키가 실패했다면 그 동작이 있는 곳에서 알리세요.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 이름이 따로 없습니다. 키 이름이 주변 문장과 함께 읽히므로 기호만 쓸 때는 읽힐 이름을 함께 두세요(예: '⌘' 대신 'Cmd' 또는 숨긴 텍스트).
-
-### 포커스
-
-> 포커스를 받지 않습니다. 단축키를 안내할 뿐 그 단축키를 실행하지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `key-display`, `shortcut-hint`.
-- 다른 이름: `kbd`, `keyboard key`, `shortcut`, `hotkey`, `key cap`, `단축키`, `키보드 키`, `키 표시`.
-- 어휘 상태: `controlled`.

package/skills/components/listbox/SKILL.md

@@ -1,172 +0,0 @@
----
-name: 'listbox'
-description: 'Listbox — trigger 뒤에 숨지 않고 항상 페이지에 놓여 있는 옵션 목록으로, Select가 감추는 바로 그 선택 표면입니다. 선택 모드는 선택 없음부터 단일 선택, 확장 범위 선택까지 이르며, 목록이 윈도잉되므로 컬렉션의 크기와 상관없이 렌더링되는 행의 수는 같습니다. 다른 이름: listbox, option list, selection list, item list, multi-select list, 리스트박스, 목록 상자, 옵션 목록, 선택 목록, 다중 선택 목록.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/listbox.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/listbox.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Listbox
-
-> trigger 뒤에 숨지 않고 항상 페이지에 놓여 있는 옵션 목록으로, Select가 감추는 바로 그 선택 표면입니다. 선택 모드는 선택 없음부터 단일 선택, 확장 범위 선택까지 이르며, 목록이 윈도잉되므로 컬렉션의 크기와 상관없이 렌더링되는 행의 수는 같습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Listbox`
-- 분류: `collection-data-entry`
-- 수명 주기: `active`
-
-## 알려진 예외 — 사용 전에 확인
-
-이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
-
-### WAI-ARIA APG 리스트박스 패턴 — 양방향 텍스트
-
-- 충족하지 못하는 것: 가로·그리드 레이아웃에서 오른쪽에서 왼쪽으로 쓰는 로케일일 때 ArrowLeft·ArrowRight가 반전되지 않습니다.
-- 의도한 이유: machine이 방향 인자 없이 화살표 키를 읽는 업스트림 동작입니다.
-- 사용 시 유의점: RTL 로케일을 지원하는 제품에서는 세로 레이아웃을 쓰거나, 가로 레이아웃의 키 방향을 사용자 테스트로 확인하세요.
-
-## Do
-
-> 페이지에 계속 머무는 목록에서 사용자가 선택하는 경우에 쓰세요. 마스터-디테일 보기의 왼쪽 절반, 패널 안의 선택기, 전송 목록, 긴 필터 모음이 그렇습니다. 선택이 상세 창을 구동한다면 `selectOnHighlight`를 써서 화살표로 목록을 훑을 때 상세 창이 갱신되게 하고, 목록이 파일 관리자 같은 모양이어서 사용자가 Shift로 범위를 잡기를 기대한다면 `extended`를 쓰세요.
-
-## Don't
-
-> 요청받기 전까지는 선택지가 비켜 있어야 하는 곳에는 쓰지 마세요. 그것은 trigger 뒤에 이 목록을 둔 Select이며, 페이지의 세로 공간을 차지하지 않습니다. 사용자가 입력해서 집합을 좁혀야 할 때도 쓰지 마세요. 그것은 Combobox의 몫이며, Listbox 위에 필터 필드를 더하면 입력의 접근성 계약이 빠진 Combobox를 다시 만드는 셈입니다. 서로 배타적인 옵션 몇 개에는 쓰지 마세요. RadioGroup이 선택을 더 명확하게 안내합니다. 그리고 메뉴로 쓰지 마세요. 리스트박스는 행을 현재 값이 있는 선택지로 안내하므로, 하나를 활성화하면 명령이 실행되거나 다른 곳으로 이동하는 경우에는 틀린 안내가 됩니다.
-
-## Anti-patterns
-
-> '그냥 간단한 목록'을 얻으려고 컬렉션을 직접 순회하며 렌더링하는 것. 사용처의 자식은 윈도잉된 기본값을 대체하므로, 행은 루프가 렌더링한 것이 전부가 됩니다. 고정된 활성 행이 사라지고 `aria-activedescendant`는 DOM에 없는 id를 가리키기 시작하며, aria-setsize는 루프의 길이가 됩니다. 그래도 작성자가 시도하는 모든 스크롤 위치에서 컴포넌트는 완벽해 보입니다. 자식을 주지 말고 창이 렌더링하게 두거나, 행을 꼭 직접 렌더링해야 한다면 `positionProps`와 고정을 유지하세요.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Select` (`select`)
-- `Combobox` (`combobox`)
-- `RadioGroup` (`radio-group`)
-- `TreeView` (`tree-view`)
-- `Menu` (`menu`)
-
-## 가져오기
-
-```tsx
-import { Listbox } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 10개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Listbox.Root>
-  <Listbox.Label />
-  <Listbox.Input />
-  <Listbox.Content>
-    <Listbox.ItemGroup>
-      <Listbox.Item>
-        <Listbox.ItemText />
-        <Listbox.ItemIndicator />
-      </Listbox.Item>
-      <Listbox.ItemGroupLabel />
-    </Listbox.ItemGroup>
-  </Listbox.Content>
-  <Listbox.ValueText />
-</Listbox.Root>
-```
-
-- `Listbox.Root` — 최상위에 놓입니다
-- `Listbox.Label` — `Root` 안에 놓입니다
-- `Listbox.Input` — `Root` 안에 놓입니다
-- `Listbox.Item` — `ItemGroup` 안, 또는 `Content` 안에 놓입니다
-- `Listbox.ItemText` — `Item` 안에 놓입니다
-- `Listbox.ItemIndicator` — `Item` 안에 놓입니다
-- `Listbox.ItemGroup` — `Content` 안에 놓입니다
-- `Listbox.ItemGroupLabel` — `ItemGroup` 안에 놓입니다
-- `Listbox.Content` — `Root` 안에 놓입니다
-- `Listbox.ValueText` — `Root` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 17개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-### 필수
-
-- `collection` — `SynapseCollection<TItem>`, 필수. `createCollection`으로 만든 전체 컬렉션. 윈도잉은 이것을 바꾸지 않습니다.
-
-### 선택
-
-- `value` — `readonly string[]`, 선택. 제어되는 선택입니다. 어느 선택 모드에서든 배열입니다. 값이 곧 선택이고, 하나짜리 선택도 여전히 선택이기 때문입니다. Select와 같은 논리입니다. `selectionMode`에 따라 타입이 달라지는 prop은 어떤 사용처도 타입을 맞춰 쓸 수 없는 prop입니다.
-- `defaultValue` — `readonly string[]`, 선택. 비제어 모드의 초기 선택. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ListboxValueChangeDetails) => void`, 선택. 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다.
-- `highlightedValue` — `string | null`, 선택. 제어되는 하이라이트 아이템. `aria-activedescendant`가 가리키는 대상입니다.
-- `defaultHighlightedValue` — `string | null`, 선택. 비제어 모드에서 처음 하이라이트되는 아이템.
-- `onHighlightChange` — `(details: ListboxHighlightChangeDetails) => void`, 선택. 하이라이트가 옮겨 갈 때 호출됩니다. 한 번도 렌더된 적 없는 아이템으로 갈 때도 포함합니다.
-- `selectionMode` — `ListboxSelectionMode`, 선택. 몇 개까지 선택할 수 있는지. 기본값은 `single`입니다.
-- `deselectable` — `boolean`, 선택. 이미 선택된 아이템을 다시 선택하면 선택이 해제됩니다.
-- `disallowSelectAll` — `boolean`, 선택. 다중 선택에서 전체 선택 단축키를 내주지 않습니다.
-- `selectOnHighlight` — `boolean`, 선택. 선택이 하이라이트를 따라갑니다. 선택이 상세 패널을 움직이는 목록에 씁니다.
-- `typeahead` — `boolean`, 선택. 몇 글자를 입력해 해당 아이템으로 건너뜁니다. 기본값은 true입니다.
-- `loopFocus` — `boolean`, 선택. 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다.
-- `orientation` — `Orientation`, 선택. 아이템이 배치되는 축. 기본값은 `vertical`입니다.
-- `disabled` — `boolean`, 선택. 비활성화된 Listbox는 반응하지 않습니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size 축은 각 행의 최소 높이와 글자 스타일, 타입어헤드 필드의 높이, 선택 표시기의 아이콘을 정합니다. 목록 자체의 크기는 정하지 않습니다. Listbox의 높이는 주변 레이아웃에 속하며, 대개 남은 공간만큼이 되기를 원하는 높이에 다섯 단계 척도는 맞지 않는 도구입니다.
-
-## 폼
-
-폼 참여: 아니요.
-
-> machine은 `name`, `form`, `required`, `invalid`를 받지 않으며 숨겨진 요소도 없습니다. 리스트박스는 폼 컨트롤이 아니라 선택 표면입니다. 제출하는 컴포넌트는 Select이며, 이 선택을 폼에 담아야 하는 제품은 `onValueChange`를 읽어 자신의 필드에 기록합니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 비어 있는 Listbox는 빈 컨트롤이 아니라 빈 페이지 영역입니다. 사용자가 컬렉션을 필터링하는 Combobox에서는 비어 있음이 사용자가 일으킨 결과이므로 알려 줄 필요가 있지만, Listbox는 주변 보기가 가진 것을 보여 주며, 그것이 없으면 제품은 행 없는 목록 안에 메시지를 넣는 대신 영역 자체를 대체합니다. 그래도 machine은 이를 표시합니다. 컬렉션이 비면 Content가 `data-empty`를 지니므로, part가 안내하지 않아도 스타일과 테스트가 이 상태를 볼 수 있습니다.
-- `loading-state` — Listbox는 데이터를 가져오지 않습니다. 컬렉션은 이미 해석된 상태로 전달되며, 그것을 만든 요청은 영역을 소유한 보기에 속합니다. 스켈레톤이나 스피너가 있어야 할 곳도 이 컴포넌트의 목록 안이 아니라 그 위, 바로 그 보기입니다.
-- `error-state` — 여기에는 실패할 수 있는 작업이 없습니다. machine은 요청을 수행하지 않고 이 컴포넌트는 `invalid` prop을 받지 않습니다. Listbox는 폼 컨트롤이 아니라 선택 표면이므로, 오류 part가 보고할 유효성 상태조차 없습니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> Label part에서 aria-labelledby를 통해 이름을 얻습니다. 여기서 machine이 이름을 주는 것은 없습니다. `@zag-js/listbox`는 어떤 getter에서도 하드코딩된 aria-label을 내보내지 않으며, 그래서 이 컴포넌트의 `machineTranslations`는 `null`이고, 그 값은 의도된 것입니다.
-
-### 포커스
-
-> DOM 포커스는 하나의 탭 정지 지점인 Content에 놓이고, 하이라이트된 행은 포커스를 받는 대신 aria-activedescendant로 가리켜집니다. 이것이 타입어헤드를 한 요소에 묶어 두고, 만 개의 행이 있는 컬렉션을 탭 순서에서 빼 줍니다. 선택적인 Input part를 쓰면 포커스가 대신 그곳에 놓이고 그 키 입력이 Content로 전달되므로, 둘이 서로 다른 두 키보드 모델이 되는 일은 없습니다.
-
-### 알려 주는 위치
-
-> aria-posinset과 aria-setsize는 컬렉션 자체의 `positionOf`에서 오므로, 창이 아니라 전체 컬렉션과 그 안의 절대적이고 그룹 기준인 위치를 나타냅니다. 둘 중 하나라도 렌더링 루프에서 세면, 윈도잉된 목록은 아무도 스크롤하지 않는 동안에만 맞는 위치를 안내하게 됩니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 팩토리가 provider의 `dir`을 machine에 전달하고, machine은 이를 목록과 모든 행에 내보내므로, 행이 항상 왼쪽에서 오른쪽이 아니라 읽기 방향에 따라 배치되고 정렬됩니다. 타입어헤드는 사용처가 제공하는 항목 레이블, 곧 해당 로케일의 레이블과 대조합니다. 그 한계도 기록해 둡니다. 이 machine은 방향 인자 없이 화살표 키를 읽으므로, 오른쪽에서 왼쪽으로 쓰는 가로 또는 그리드 레이아웃에서 ArrowLeft와 ArrowRight가 Tour나 ImageCropper처럼 반전되지 않습니다. 이는 업스트림의 동작이며, 누군가 발견하게 두지 않고 여기에 적어 둡니다. 이 machine은 사용자에게 보이는 문자열을 스스로 하드코딩하지 않으므로, provider의 번역이 덮어쓸 것이 없습니다.
-- 컬렉션 윈도잉: 예. 사용처가 자식을 주지 않으면 `Content`는 `resolveWindow`의 행을 렌더링합니다. 올바른 동작은 결코 사용처가 선택해서 켜는 것이 아닙니다. 키보드 도달 범위, 타입어헤드, 안내되는 개수는 모두 렌더링된 창이 아니라 전체 컬렉션을 기준으로 하며, 활성 행은 범위 밖에 있어도 DOM에 고정되어 `aria-activedescendant`가 항상 해석됩니다. Listbox는 이것이 가장 분명하게 핵심인 컴포넌트입니다. 사용자가 잠깐의 멈춤을 받아들일 만한 '목록 열기' 순간이 없고, 목록은 페이지가 떠 있는 내내 화면에 있습니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `choose-from-list`, `single-select`, `multi-select`, `extended-selection`, `windowed-collection`, `typeahead`, `grouped-options`, `axis-orientation`.
-- 다른 이름: `listbox`, `option list`, `selection list`, `item list`, `multi-select list`, `리스트박스`, `목록 상자`, `옵션 목록`, `선택 목록`, `다중 선택 목록`.
-- 어휘 상태: `controlled`.

package/skills/components/marquee/SKILL.md

@@ -1,151 +0,0 @@
----
-name: 'marquee'
-description: 'Marquee — 콘텐츠가 정해진 속도로 뷰포트를 끊임없이 지나가며, 순환을 잇기 위해 스스로를 복제하고, 동작 줄이기를 요청한 사용자에게는 멈춰 있는 컴포넌트입니다. 다른 이름: marquee, ticker, logo strip, news crawl, carousel strip, 마키, 흐르는 텍스트, 티커, 로고 띠, 롤링 배너.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/marquee.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/marquee.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Marquee
-
-> 콘텐츠가 정해진 속도로 뷰포트를 끊임없이 지나가며, 순환을 잇기 위해 스스로를 복제하고, 동작 줄이기를 요청한 사용자에게는 멈춰 있는 컴포넌트입니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Marquee`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## 알려진 예외 — 사용 전에 확인
-
-이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
-
-### WCAG 2.2 SC 2.2.2 일시 정지, 정지, 숨기기 (A)
-
-- 충족하지 못하는 것: 멈추는 방법은 가리키거나 포커스할 때 멈추는 것(기본값 true)과 동작 줄이기 설정뿐이며, 명시적인 일시 정지 버튼이 없습니다.
-- 의도한 이유: 마키는 장식적인 흐름에만 쓰는 컴포넌트로 정의되어 있으며, 동작 줄이기에서는 애니메이션을 완전히 멈춥니다.
-- 사용 시 유의점: 읽어야 하는 정보나 급한 정보를 마키에 넣지 마세요. 5초 넘게 움직이는 곳에 쓴다면 제품에 일시 정지 컨트롤을 따로 두세요. `pauseOnInteraction`을 끄지 마세요.
-
-## Do
-
-> 볼 가치는 있지만 순서대로 읽을 필요는 없는 주변 콘텐츠에 쓰세요. 파트너 로고, 최근 활동 띠, 추천사 모음이 그렇습니다. 항목을 클릭할 수 있다면 언제나 `pauseOnInteraction`을 쓰세요. 사용자가 겨누는 동안 움직이는 대상은 놓치게 되는 대상이기 때문입니다.
-
-## Don't
-
-> 사용자가 반드시 읽어야 하는 것에는 쓰지 마세요. 계속되는 움직임은 WCAG 2.2.2의 관심사이며, 움직이는 텍스트는 누구에게나 읽기 느리고 누군가에게는 읽을 수 없으며, 잠시 눈을 뗀 사람은 지나간 것으로 돌아갈 방법이 없습니다. 사용자가 한 장씩 넘겨 보아야 하는 슬라이드 모음으로 쓰지 마세요. 그것은 컨트롤과 위치를 가진 캐러셀입니다. 긴급한 정보에도 쓰지 마세요. 아무도 멈출 수 없는 메시지는 일부 사용자에게 결코 전달되지 않습니다.
-
-## Anti-patterns
-
-> `prefers-reduced-motion`에서 애니메이션을 멈추지 않고 느리게만 만드는 것. WCAG 2.2.2는 멈출 수 있는 움직임을 요구하며, 느려진 마키도 여전히 움직입니다. 그래서 레시피는 더 긴 지속 시간을 쓰는 대신 애니메이션을 완전히 멈춥니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `ScrollArea` (`scroll-area`)
-- `Progress` (`progress`)
-
-## 가져오기
-
-```tsx
-import { Marquee } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 5개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Marquee.Root>
-  <Marquee.Viewport>
-    <Marquee.Content>
-      <Marquee.Item />
-    </Marquee.Content>
-  </Marquee.Viewport>
-  <Marquee.Edge />
-</Marquee.Root>
-```
-
-- `Marquee.Root` — 최상위에 놓입니다
-- `Marquee.Viewport` — `Root` 안에 놓입니다
-- `Marquee.Content` — `Viewport` 안에 놓입니다
-- `Marquee.Edge` — `Root` 안에 놓입니다
-- `Marquee.Item` — `Content` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 15개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `paused` — `boolean`, 선택. 마퀴가 멈춰 있는지 여부이며 제어 모드입니다. `open`이 아닙니다. 드러나는 것이 아무것도 없으므로, 어휘의 공개 3종 세트를 쓰면 다른 개념에 이름만 빌려 오는 꼴이 됩니다. `paused`는 machine이 부르는 이름이자 이 상태 그 자체입니다.
-- `defaultPaused` — `boolean`, 선택. 비제어 모드의 초기 멈춤 상태. `paused`를 주면 무시됩니다.
-- `onPauseChange` — `(details: MarqueePauseChangeDetails) => void`, 선택. 제어 여부와 무관하게 마퀴가 멈추거나 다시 움직일 때마다 호출됩니다.
-- `pauseOnInteraction` — `boolean`, 선택. 포인터가 마퀴 위에 있거나 자식에 포커스가 있는 동안 멈춥니다. 기본값은 `true`입니다.
-- `side` — `MarqueeSide`, 선택. 내용이 흘러가는 방향. 기본값은 `start`입니다.
-- `speed` — `number`, 선택. 초당 움직이는 픽셀 수이며, 기본값은 50입니다. 한 바퀴의 지속 시간이 아니라서 내용이 길어져도 흐르는 속도는 같습니다.
-- `delay` — `number`, 선택. 첫 루프가 시작되기까지의 시간(초).
-- `loopCount` — `number`, 선택. 몇 번 돌지. 기본값인 `0`은 끝없이 돕니다.
-- `reverse` — `boolean`, 선택. `side`를 바꾸지 않은 채 진행 방향만 뒤집습니다.
-- `autoFill` — `boolean`, 선택. 뷰포트가 찰 때까지 내용을 복제해, 루프에 빈틈이 생기지 않게 합니다.
-- `spacing` — `string`, 선택. 아이템 사이의 간격이며 CSS 길이입니다.
-- `onLoopComplete` — `(details: MarqueeLoopCompleteDetails) => void`, 선택. 루프가 한 번 끝날 때마다 호출됩니다.
-- `onComplete` — `() => void`, 선택. `loopCount`만큼 돌았을 때 한 번 호출됩니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. size 축은 항목과 양 끝의 페이드 크기를 정합니다. 마키 자체의 크기는 레이아웃이 정하고, 속도는 척도의 한 단계가 아니라 초당 픽셀 단위의 비율입니다. 그래서 사용자가 실제로 알아차리는 두 차원 중 어느 것도 공유 척도에 속하지 않습니다.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 항목이 없는 마키는 그저 움직이지 않으며, 이는 콘텐츠가 없는 영역과 구별되지 않으므로 별도 상태가 필요 없습니다. 대신 무엇을 보여 줄지는 제품이 결정하며, 그 결정은 마키를 렌더링하기 전에 내려집니다.
-- `loading-state` — machine이 콘텐츠를 측정해 거기서 지속 시간을 도출하고, 콘텐츠가 바뀌면 다시 측정합니다. 늦게 도착한 항목도 로딩이 끝났다고 컴포넌트에 알려 줄 필요 없이 반영됩니다.
-- `error-state` — 이 컴포넌트가 실패할 수 있는 일이 없습니다. 측정하고 애니메이션할 뿐이며, 둘 다 사용자가 대응할 수 있는 실패를 갖지 않습니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 영역은 machine의 `translations.root`를 통해 provider의 `marquee.root.label`(기본값 "Scrolling content")로 이름을 얻고, 역할 설명은 `marquee.root.roleDescription`에서 옵니다. machine의 aria-label이 사용처 속성보다 우선하므로, `translations` prop을 통해 "파트너 로고"처럼 콘텐츠에 맞는 이름을 주세요.
-
-### 포커스
-
-> 여기서 스스로 포커스를 받는 것은 없습니다. 최소 대상 크기는 항목에 적용되는데, 마키의 항목은 흔히 제품이 지나가는 동안 클릭할 수 있기를 기대하는 링크나 로고이기 때문입니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. `side`는 논리값이어서 `start`와 `end`가 텍스트 방향을 따릅니다. 그래서 제품이 로케일마다 고르지 않아도 마키가 로케일의 읽기 방향으로 흘러갑니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `continuous-scroll`, `auto-fill`, `pause-on-interaction`, `reduced-motion`.
-- 다른 이름: `marquee`, `ticker`, `logo strip`, `news crawl`, `carousel strip`, `마키`, `흐르는 텍스트`, `티커`, `로고 띠`, `롤링 배너`.
-- 어휘 상태: `controlled`.