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

package/skills/components/tabs/SKILL.md

@@ -1,138 +0,0 @@
----
-name: 'tabs'
-description: 'Tabs — 대등한 선택지 한 줄에서 한 번에 하나의 패널만 보여 주며, trigger와 패널을 형제 요소로 작성하므로 제품이 목록을 어디에 두어도 연결이 깨지지 않습니다. 다른 이름: tabs, tab bar, segmented control, pill nav, panel switcher, 탭, 탭 메뉴, 탭 바, 탭 전환.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/tabs.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/tabs.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Tabs
-
-> 대등한 선택지 한 줄에서 한 번에 하나의 패널만 보여 주며, trigger와 패널을 형제 요소로 작성하므로 제품이 목록을 어디에 두어도 연결이 깨지지 않습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Tabs`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 같은 대상에 대한 대등한 뷰를 사용자가 한 번에 하나씩 보고, 그 수가 한꺼번에 보여 줄 만큼 적을 때 쓰세요 — 레코드의 개요, 활동, 설정처럼 말입니다. 패널들은 순서가 아니라 대안이어야 합니다. 여기에는 순서를 강제하는 장치도, 패널을 완료로 표시하는 장치도 없습니다.
-
-## Don't
-
-> 사용자가 순서대로 완료해야 하는 흐름에는 쓰지 마세요. 그것은 무엇이 끝났는지 알고 유효하지 않은 단계를 넘어 진행하기를 거부할 수 있는 Steps입니다. 사용자가 두 영역을 동시에 열거나 하나도 열지 않고 싶어 할 수 있는 곳에도 쓰지 마세요 — 그것은 `multiple`을 쓴 Accordion이나 Collapsible 묶음입니다. 페이지 사이의 내비게이션에도 쓰지 마세요. 탭은 현재 값을 가진 선택지로 자신을 알리는데, 하나를 고르면 문서 전체가 바뀐다면 그것은 거짓입니다.
-
-## Anti-patterns
-
-> 요청 비용이 드는 패널에 자동 활성화를 쓰는 것. 그러면 다섯 개의 탭을 화살표로 지나가기만 해도 사용자가 요청한 적 없는 로드가 다섯 번 일어납니다. `activationMode="manual"`은 ARIA APG가 이미 규정한 해답이며, 컴포넌트를 포크할 필요 없이 prop 하나로 해결됩니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Accordion` (`accordion`)
-- `Steps` (`steps`)
-- `Collapsible` (`collapsible`)
-- `Toc` (`toc`)
-
-## 가져오기
-
-```tsx
-import { Tabs } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 5개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Tabs.Root>
-  <Tabs.List>
-    <Tabs.Trigger />
-    <Tabs.Indicator />
-  </Tabs.List>
-  <Tabs.Content />
-</Tabs.Root>
-```
-
-- `Tabs.Root` — 최상위에 놓입니다
-- `Tabs.List` — `Root` 안에 놓입니다
-- `Tabs.Trigger` — `List` 안에 놓입니다
-- `Tabs.Content` — `Root` 안에 놓입니다
-- `Tabs.Indicator` — `List` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 11개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `value` — `string | null`, 선택. 선택된 탭이며 제어 모드입니다. `null`이면 아무것도 선택하지 않습니다.
-- `defaultValue` — `string | null`, 선택. 비제어 모드의 초기 선택. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<string>) => void`, 선택. 제어 여부와 무관하게 선택이 바뀔 때마다 호출됩니다.
-- `deselectable` — `boolean`, 선택. 이미 선택된 탭을 다시 선택하면 선택이 해제됩니다. 기본값은 false입니다.
-- `activationMode` — `TabsActivationMode`, 선택. 하이라이트된 탭이 선택된 탭이 되는 시점. 기본값은 `automatic`입니다.
-- `loopFocus` — `boolean`, 선택. 키보드 이동이 양 끝을 넘어가면 반대쪽으로 돌아옵니다.
-- `onFocusChange` — `(details: TabsFocusChangeDetails) => void`, 선택. 키보드가 trigger 사이를 오갈 때 호출됩니다.
-- `orientation` — `Orientation`, 선택. 목록이 배치되는 축. 기본값은 `horizontal`입니다.
-- `composite` — `boolean`, 선택. 목록을 복합 위젯으로 만들어, 그 내용에 Tab으로 닿을 수 있게 합니다. machine의 기본값에 맡깁니다. 포커스 모델을 바꾸는 prop이라 여기서 정하지 않고 밖으로 드러냅니다. 자체 포커스 대상을 품은 패널과 정적인 텍스트만 있는 패널은 서로 다른 답이 필요합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 탭은 이 컴포넌트가 읽는 컬렉션이 아니라 사용처가 직접 작성한 요소이므로, 비어 있다고 판단할 데이터가 없습니다. 탭이 하나도 없는 탭 묶음은 렌더링되지 말았어야 할 컴포넌트입니다.
-- `loading-state` — 내용이 아직 도착하지 않은 패널은 사용처의 콘텐츠 문제입니다. `activationMode="manual"`은 바로 패널 표시에 요청 비용이 들더라도 화살표 키를 누를 때마다 요청이 나가지 않도록 하기 위해 존재합니다.
-- `error-state` — 컴포넌트가 실패할 일이 없습니다. 불러오지 못한 패널은 탭 묶음의 상태로 알리는 대신, 사용자가 이미 보고 있는 그 패널 안에서 스스로 알립니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 각 탭의 이름은 사용처의 콘텐츠입니다. tablist 자체는 기본적으로 이름이 없습니다 — machine이 그에 대한 문자열을 제공하지 않습니다 — 따라서 이름이 필요한 제품이 직접 지정합니다. 이는 아무것도 렌더링하지 않는 문자열을 설명하던 번역 키를 Synapse가 삭제할 때 내린 판단과 같습니다.
-
-### 포커스
-
-> 로빙 tabindex입니다. 정확히 하나의 trigger만 탭 순서에 있고 화살표 키가 그것을 옮깁니다. 패널은 포커스 가능해서 Tab으로 들어온 사용자가 탭이 알린 콘텐츠에 도착합니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 화살표 키 이동은 텍스트 방향을 따르고, 인디케이터는 논리적 방향으로 목록을 따라 이동합니다. 둘 다 prop이 아니라 provider에서 옵니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `one-of-many-panels`, `manual-activation`, `axis-orientation`.
-- 다른 이름: `tabs`, `tab bar`, `segmented control`, `pill nav`, `panel switcher`, `탭`, `탭 메뉴`, `탭 바`, `탭 전환`.
-- 어휘 상태: `controlled`.

package/skills/components/tags-input/SKILL.md

@@ -1,194 +0,0 @@
----
-name: 'tags-input'
-description: 'TagsInput — 값이 사용자가 제자리에서 편집하는 목록인 폼 필드입니다. 텍스트는 Enter, 구분자, 붙여넣기로 태그가 되고, 모든 태그는 필드를 벗어나지 않고 키보드로 하이라이트·편집·삭제할 수 있습니다. 다른 이름: tags input, chips input, token field, multi value input, keywords field, email recipients field, 태그 입력, 태그 인풋, 칩 입력, 키워드 입력.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/tags-input.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/tags-input.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# TagsInput
-
-> 값이 사용자가 제자리에서 편집하는 목록인 폼 필드입니다. 텍스트는 Enter, 구분자, 붙여넣기로 태그가 되고, 모든 태그는 필드를 벗어나지 않고 키보드로 하이라이트·편집·삭제할 수 있습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `TagsInput`
-- 분류: `collection-data-entry`
-- 수명 주기: `active`
-
-## 알려진 예외 — 사용 전에 확인
-
-이 컴포넌트는 아래 기준 1개를 **의도적으로 충족하지 않습니다**. 기록된 결정이므로 고치려 들지 말고, 각 항목의 유의점을 지켜서 씁니다.
-
-### HTML 폼 제출 — 알려진 결함
-
-- 충족하지 못하는 것: 태그가 쉼표로 이어 붙인 문자열 하나(`red, green`)로 제출되며 태그마다 항목이 반복되지 않습니다. `required`를 주고 태그가 없으면 브라우저가 제출을 막지만 오류를 보여 줄 곳이 없어, 사용자에게는 아무 표시 없이 제출이 멈춥니다.
-- 의도한 이유: 제출을 숨겨진 통로 입력 하나가 맡는 machine 구조입니다.
-- 사용 시 유의점: 서버에서 문자열을 분리하세요. 태그 값에 쉼표가 들어갈 수 있으면 `onValueChange`로 배열을 받아 직접 제출하세요. `required`를 넘기지 말고, 필수 여부는 제품에서 검증해 보이는 오류로 알리세요.
-
-## Do
-
-> 값이 사용자가 고르는 것이 아니라 직접 작성하는 집합인 필드에 쓰세요 — 키워드, 라벨, 이메일 수신자, 기술 스택처럼 말입니다. 집합이 열려 있고 항목이 칩으로 한눈에 읽힐 만큼 짧을 때 알맞은 컨트롤입니다. 하위 시스템에 개수 제한이 있으면 `max`를, 항목 하나에 길이 제한이 있으면 `maxLength`를 설정하세요. 둘 다 조용히 잘리는 대신 `onValueInvalid`로 이유와 함께 거부되기 때문입니다. 그리고 사용자가 이미 데이터를 붙여넣는 방식에 맞는 `delimiter`를 고르세요.
-
-## Don't
-
-> 값이 알려진 집합에서 와야 할 때는 쓰지 마세요 — 무엇이든 입력할 수 있는 사용자는 정말 무엇이든 입력하고, 태그 하나에 대해 "Reactjs", "react.js", "REACT"를 받게 됩니다. 그것은 구조상 검증되는 다중 선택 Combobox나 `multiple`을 쓴 Select입니다. 단일 값에도 쓰지 마세요. 이것은 목록 필드이며, 최대 한 개의 태그만 받는 것은 분장한 텍스트 입력일 뿐입니다. 문장이나 메모 같은 긴 콘텐츠에도 쓰지 마세요 — 세 줄로 줄바꿈되는 칩은 훑어볼 수 없게 되는데, 값을 칩으로 렌더링하는 유일한 이유가 바로 그것이었습니다. 그리고 제출 형태가 값마다 항목 하나여야 할 때도 쓰지 마세요. 이 필드는 이어 붙인 문자열 하나를 제출하며, 이어 붙이는 방식은 설정할 수 없습니다.
-
-## Anti-patterns
-
-> 삭제 버튼을 키보드로 태그를 지우는 경로로 취급하는 것. 이 버튼은 tabIndex=-1이라 Tab이 결코 닿지 않습니다 — 이것을 어포던스로 스타일링하고 마우스로만 테스트한 제품은 키보드로는 태그를 전혀 지울 수 없는 필드를 출시하게 되며, 이는 수동 감사가 가장 시도하지 않을 법한 검사입니다. 실제 경로는 필드 맨 앞에서 ArrowLeft나 Backspace로 태그를 하이라이트한 뒤 Backspace나 Delete를 누르는 것입니다. 필드 자체에 닿을 수 있게 유지하고 그 키들을 가로채지 마세요.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Combobox` (`combobox`)
-- `Select` (`select`)
-- `Editable` (`editable`)
-- `Listbox` (`listbox`)
-- `PinInput` (`pin-input`)
-
-## 가져오기
-
-```tsx
-import { TagsInput } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 10개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<TagsInput.Root>
-  <TagsInput.Label />
-  <TagsInput.Control>
-    <TagsInput.Input />
-    <TagsInput.ClearTrigger />
-    <TagsInput.Item>
-      <TagsInput.ItemPreview>
-        <TagsInput.ItemText />
-        <TagsInput.ItemDeleteTrigger />
-      </TagsInput.ItemPreview>
-      <TagsInput.ItemInput />
-    </TagsInput.Item>
-  </TagsInput.Control>
-</TagsInput.Root>
-```
-
-- `TagsInput.Root` — 최상위에 놓입니다
-- `TagsInput.Label` — `Root` 안에 놓입니다
-- `TagsInput.Control` — `Root` 안에 놓입니다
-- `TagsInput.Input` — `Control` 안에 놓입니다
-- `TagsInput.ClearTrigger` — `Control` 안에 놓입니다
-- `TagsInput.Item` — `Control` 안에 놓입니다
-- `TagsInput.ItemPreview` — `Item` 안에 놓입니다
-- `TagsInput.ItemInput` — `Item` 안에 놓입니다
-- `TagsInput.ItemText` — `ItemPreview` 안에 놓입니다
-- `TagsInput.ItemDeleteTrigger` — `ItemPreview` 안에 놓입니다
-
-### part가 렌더링하고 소유하는 요소
-
-- `hiddenInput`, `TagsInput.Root`가 렌더링합니다 — 태그를 폼 제출로 전달하는 요소입니다. 의도적으로 part로 두지 않습니다. machine이 이 요소에 anatomy 키를 주지 않으므로 part로 두면 이 Registry의 part-anatomy 일치 검사에 실패하고, part로 만들면 사용처가 폼이 의존하는 유일한 요소를 옮기거나 빠뜨릴 수도 있게 됩니다. Root가 팩토리의 render 탈출구를 통해 이를 렌더링하며, 폼과 SSR 하네스가 여전히 찾을 수 있도록 `data-synapse-form-field` 마커를 붙입니다 — Checkbox와 정확히 같은 방식입니다.
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 28개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `value` — `readonly string[]`, 선택. 제어되는 태그들.
-- `defaultValue` — `readonly string[]`, 선택. 비제어 모드의 초기 태그들. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<readonly string[]>) => void`, 선택. 제어 여부와 무관하게 태그가 바뀔 때마다 호출됩니다.
-- `inputValue` — `string`, 선택. 제어되는 필드 안의 텍스트. 태그를 담는 `value`와는 다른 것입니다.
-- `defaultInputValue` — `string`, 선택. 비제어 모드에서 필드에 처음 들어 있는 텍스트.
-- `onInputValueChange` — `(details: TagsInputInputValueChangeDetails) => void`, 선택. 텍스트가 바뀔 때 호출됩니다.
-- `onValueInvalid` — `(details: TagsInputInvalidDetails) => void`, 선택. 값이 거절됐을 때 호출됩니다. 너무 길거나, 너무 많거나, 중복인 경우입니다.
-- `validate` — `(details: { readonly inputValue: string; readonly value: readonly string[]; }) => boolean`, 선택. 값이 태그가 되기 전에 걸러냅니다. 거절하려면 false를 반환합니다.
-- `sanitizeValue` — `(value: string) => string`, 선택. 값이 태그가 되는 길목에서 다듬습니다. 공백 제거, 대소문자 정리 등 제품에 필요한 처리를 합니다.
-- `max` — `number`, 선택. 허용되는 태그의 최대 개수.
-- `maxLength` — `number`, 선택. 태그 하나가 가질 수 있는 최대 길이.
-- `allowOverflow` — `boolean`, 선택. `max`를 넘는 태그를 거절하지 않고 받아들여, 넘친 것을 잘못된 값으로 보여줄 수 있게 합니다.
-- `allowDuplicates` — `boolean`, 선택. 같은 태그를 두 번 허용합니다. 기본적으로는 거절됩니다.
-- `delimiter` — `string`, 선택. 붙여 넣은 텍스트를 이 문자열을 기준으로 태그로 나눕니다. 기본값은 쉼표입니다.
-- `addOnPaste` — `boolean`, 선택. 붙여 넣은 텍스트를 태그로 나눕니다. 기본값은 true입니다.
-- `editable` — `boolean`, 선택. 태그를 제자리에서 고칠 수 있게 합니다. 기본값은 true입니다.
-- `blurBehavior` — `TagsInputBlurBehavior`, 선택. 다 입력하지 못한 태그가 필드의 포커스가 풀렸을 때 어떻게 되는지 정합니다.
-- `placeholder` — `string`, 선택. 필드의 placeholder 텍스트.
-- `name` — `string`, 선택. 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다.
-- `form` — `string`, 선택. 폼 바깥에 렌더된 TagsInput을 id로 그 폼에 연결합니다.
-- `disabled` — `boolean`, 선택. 비활성화된 TagsInput은 제출하지도, 반응하지도 않습니다.
-- `readOnly` — `boolean`, 선택. 읽기 전용 TagsInput은 태그를 제출하지만 바꿀 수는 없습니다.
-- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알립니다.
-- `required` — `boolean`, 선택. 제약 검증. 폼이 제출되려면 태그가 적어도 하나는 있어야 합니다.
-- `autoFocus` — `boolean`, 선택. 마운트될 때 필드 안으로 포커스를 옮깁니다.
-- `translations` — `TranslationOverrides`, 선택. 이 TagsInput에만 적용되는 접근성 문자열로, provider의 값보다 우선합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. 크기는 텍스트와 입력 필드의 최소 높이, 각 태그 미리보기와 그것을 대신하는 편집 필드의 최소 높이, 그리고 삭제·지우기 아이콘을 조절합니다. 핵심은 태그와 필드를 같은 컨트롤 높이에 맞추는 것입니다. 옆의 캐럿보다 낮은 태그는 입력창에서 떨어져 나온 칩처럼 읽힙니다.
-
-## 폼
-
-폼 참여: 예.
-
-- `input[type=text]`로 제출합니다.
-- 제출 값은 `value`에서 옵니다.
-- 아무것도 설정하지 않으면 빈 문자열(`''`)을 제출합니다.
-
-> 제출은 숨겨진 통로 입력 하나가 맡습니다. 태그는 쉼표와 공백으로 이어 붙인 하나의 필드로 제출됩니다 — `red, green` — Select의 `multiple`처럼 태그마다 항목 하나씩 제출되지 않습니다. 같은 이름으로 반복된 항목을 기대하는 서버는 문자열 하나를 받게 되므로, 분리는 반대편에서 제품이 할 일입니다. `disabled`이면 제출되지 않고 `readOnly`이면 태그가 그대로 제출됩니다. `required`는 숨겨진 입력에 기록되는데, 그 입력은 `hidden` 속성을 가진 채 렌더링되므로 제약 검증에서 빠지지 않습니다. 태그가 없으면 브라우저가 제출을 막지만 포커스해 알릴 대상이 없어, 사용자에게는 아무 표시 없이 제출이 멈춥니다(콘솔에만 "An invalid form control … is not focusable"이 남습니다).
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 태그가 없는 TagsInput은 placeholder가 있는 텍스트 필드이며, 이는 누락된 상태가 아니라 대기 상태입니다. machine은 root에 `data-empty`를 표시하고 전체 지우기 후 "no tags selected"를 알리므로, 비어 있음은 이미 표현됩니다 — 사용자가 곧 입력하려는 필드를 밀어내는 part가 아니라 컨트롤의 상태로서 말입니다.
-- `loading-state` — 여기서는 아무것도 로드하지 않습니다. 값은 사용자가 지금까지 입력한 것이며 컴포넌트와 폼 안에 보관됩니다. 태그를 서버와 대조하는 제품은 동기 함수인 `validate`에서 처리하며, 비동기적인 것은 이 필드가 아니라 Combobox의 제안 목록에 속합니다.
-- `error-state` — 여기서 거부는 컴포넌트의 상태가 아니라 시도 단위입니다. 길이, 개수, 중복 때문에 거부된 값은 `onValueInvalid`로 이유와 함께 알려지고, 태그는 그냥 추가되지 않습니다. 필드 수준의 유효하지 않음은 `invalid`이며 입력 필드의 aria-invalid가 됩니다. 이를 설명하는 메시지는 다른 모든 필드의 메시지가 있는 곳, 즉 이 컨트롤을 둘러싼 폼 행의 몫입니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 입력 필드는 Label로 이름이 붙습니다. 지우기 버튼과 비어 있음 알림은 provider의 번역 세트에서 오고, 태그별 삭제 이름은 `useMachineProps`에서 `tagsInput.deleteTrigger.label`을 기준으로 해석됩니다. machine이 이 이름을 태그의 함수로 만드는데, 키-문자열 맵인 `machineTranslations`는 이를 표현할 수 없고 문자열을 넘기면 예외를 던지기 때문입니다.
-
-### 포커스
-
-> 태그를 탐색하는 동안 DOM 포커스는 입력 필드에 머무릅니다 — 하이라이트는 포커스가 아니라 데이터 속성입니다 — 그리고 태그를 편집하는 동안에만 태그별 편집 필드로 옮겨 가며, 편집이 끝나면 입력 필드로 돌아옵니다. 블러되면 하이라이트가 지워지고, 반쯤 입력된 텍스트가 태그가 될지 버려질지는 `blurBehavior`가 결정합니다.
-
-### 알려 주는 변경
-
-> 여기에는 aria-activedescendant가 없습니다. machine이 필드를 하이라이트된 태그에 연결하지 않습니다. 대신 스크린 리더가 듣는 것은 machine 자체의 라이브 영역으로, 태그가 추가·삭제·수정·붙여넣기·하이라이트될 때마다 알립니다. 그래서 라이브 영역은 장식이 아니라 핵심 역할을 하며, 아래 문자열들이 중요한 이유도 그것입니다.
-
-### machine 문자열
-
-> 다섯 가지 라이브 영역 알림(`tagAdded`, `tagDeleted`, `tagUpdated`, `tagsPasted`, `tagSelected`)과 편집 필드의 이름(`tagEdited`)은 `useMachineProps`에서 provider의 `tagsInput.item.*`, `tagsInput.control.pasted`, `tagsInput.itemInput.label` 키로 해석되므로, 제품은 이를 자기 언어로 듣습니다. machine이 정의하는 `inputLabel(count)`는 machine 자신이 호출하지 않으므로 키를 두지 않았으며, 번역되지 않은 채 사용자에게 닿는 문자열은 없습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 캐럿 기준 이동은 텍스트 방향에 따라 해석되므로, 왼쪽에서 오른쪽으로 쓰는 제품에서는 ArrowLeft가, 오른쪽에서 왼쪽으로 쓰는 제품에서는 ArrowRight가 태그에 닿습니다. 지우기 버튼의 이름, 비어 있음 알림, 태그별 삭제 이름은 모두 provider의 번역에서 옵니다. 라이브 영역 알림은 그렇지 않으며, 이것이 아래에 기록된 공백입니다.
-- 컬렉션 윈도잉: 아니요. 태그는 탐색할 컬렉션이 아니라 값입니다. 각각 독립적으로 편집·삭제할 수 있으므로 태그마다 요소 하나씩 렌더링되며, 일부만 응답할 탐색 인터페이스가 없습니다. 여기서 정직한 한계는 `max`입니다 — 윈도잉이 필요할 만큼 태그가 많은 필드는 아무도 읽을 수 없는 필드입니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `multi-value-entry`, `custom-value`, `paste-to-split`, `edit-in-place`, `duplicate-rejection`, `form-value`, `readonly-display`, `translatable-strings`.
-- 다른 이름: `tags input`, `chips input`, `token field`, `multi value input`, `keywords field`, `email recipients field`, `태그 입력`, `태그 인풋`, `칩 입력`, `키워드 입력`.
-- 어휘 상태: `controlled`.

package/skills/components/textarea/SKILL.md

@@ -1,131 +0,0 @@
----
-name: 'textarea'
-description: 'Textarea — 형식이 정해지지 않은 텍스트를 여러 줄로 입력받는 네이티브 `<textarea>`입니다. 기본으로는 `rows`가 높이를 정하고 세로로 크기를 조절할 수 있으며, `autoResize`를 켜면 내용에 맞춰 `maxRows`까지 스스로 늘어나고, `showCount`를 켜면 입력한 글자 수를 상자 안쪽 오른쪽 아래에 연하게 보여 줍니다. Field 안에 두면 레이블, 설명, 오류, 상태가 자동으로 연결됩니다. 다른 이름: textarea, multi-line input, text area, comment box, description field, 여러 줄 입력, 텍스트 영역, 메모 입력, 설명 입력, 댓글 입력.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/textarea.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/textarea.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Textarea
-
-> 형식이 정해지지 않은 텍스트를 여러 줄로 입력받는 네이티브 `<textarea>`입니다. 기본으로는 `rows`가 높이를 정하고 세로로 크기를 조절할 수 있으며, `autoResize`를 켜면 내용에 맞춰 `maxRows`까지 스스로 늘어나고, `showCount`를 켜면 입력한 글자 수를 상자 안쪽 오른쪽 아래에 연하게 보여 줍니다. Field 안에 두면 레이블, 설명, 오류, 상태가 자동으로 연결됩니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Textarea`
-- 분류: `form-controls`
-- 수명 주기: `active`
-
-## Do
-
-> 설명, 메모, 피드백처럼 줄바꿈이 들어갈 수 있는 자유 텍스트를 받을 때 쓰세요. 길이가 들쭉날쭉한 입력은 `autoResize`와 `maxRows`로 내용에 맞춰 늘리고, 한도가 있는 입력은 `maxLength`와 `showCount`로 남은 글자 수를 보여 주세요 — 글자 수는 컨트롤의 설명으로 이어지고, 한도에 가까워지면 스크린 리더에 알려집니다. 글자 수를 도움말과 같은 메시지 줄에 두려면 컨트롤 대신 Field의 `showCount`를 쓰세요.
-
-## Don't
-
-> 한 줄이면 충분한 값에는 Input을 쓰세요 — Enter가 줄바꿈이 되는 입력은 폼을 제출하지 않습니다. 서식(굵게, 링크, 목록)이 있는 글에는 쓰지 마세요. 그것은 이 디자인 시스템에 없는 서식 편집기의 몫입니다.
-
-## Anti-patterns
-
-> `rows`를 1로 두어 한 줄 입력처럼 쓰는 것. Enter가 줄바꿈이 되어 폼을 제출하지 않으므로 사용자가 기대하는 동작과 어긋납니다 — 한 줄이면 Input을 쓰세요.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
-
-## 관련 컴포넌트
-
-- `Field` (`field`)
-- `Input` (`input`)
-- `Editable` (`editable`)
-
-## 가져오기
-
-```tsx
-import { Textarea } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 1개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Textarea.Root />
-```
-
-- `Textarea.Root` — 최상위에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 11개. 선언에는 기본값을 둘 자리가 없으므로 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`를 씁니다.
-- `autoResize` — `boolean`, 선택. 내용에 맞춰 높이가 늘어납니다. 켜져 있는 동안 크기 조절 손잡이는 숨습니다. 최소 높이는 `rows`가 정합니다.
-- `maxRows` — `number`, 선택. `autoResize`로 늘어날 수 있는 최대 줄 수. 넘으면 그 높이에서 멈추고 안쪽이 스크롤됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 예.
-
-- `textarea`로 제출합니다.
-- 제출 값은 `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`, `multi-line-text-entry`, `form-value`, `readonly-display`.
-- 다른 이름: `textarea`, `multi-line input`, `text area`, `comment box`, `description field`, `여러 줄 입력`, `텍스트 영역`, `메모 입력`, `설명 입력`, `댓글 입력`.
-- 어휘 상태: `controlled`.

package/skills/components/timer/SKILL.md

@@ -1,142 +0,0 @@
----
-name: 'timer'
-description: 'Timer — 올라가거나 내려가는 카운트를 제품이 직접 배치하는 레이블 붙은 단위로 나누어 보여 주며, 사용자 앞에서 바뀌는 숫자들이 아니라 하나의 영역으로 알립니다. 다른 이름: timer, countdown, stopwatch, clock, time remaining, 타이머, 카운트다운, 스톱워치, 남은 시간.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/timer.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/timer.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Timer
-
-> 올라가거나 내려가는 카운트를 제품이 직접 배치하는 레이블 붙은 단위로 나누어 보여 주며, 사용자 앞에서 바뀌는 숫자들이 아니라 하나의 영역으로 알립니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Timer`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 사용자가 지켜보도록 의도된 마감 시각이나 경과 시간에 쓰세요 — 마감되는 경매, 곧 만료되는 세션, 시간을 재는 작업처럼 말입니다. 제품이 카운트도 제어해야 할 때 선택하세요. 시작, 일시정지, 초기화가 part로 제공되므로, 제품이 서식화된 문자열 주위에 state machine을 다시 구현하지 않아도 됩니다.
-
-## Don't
-
-> 날짜나 고정된 시각을 보여 주는 데 쓰지 마세요. 그것은 텍스트이며, 카운트하지 않는 것 옆에서 째깍거리는 시계는 소음입니다. 길이가 알려진 작업의 진행 표시로도 쓰지 마세요 — 거기서 사용자가 원하는 것은 얼마나 진행됐는지이며 그것을 말하는 것은 Progress이고, 카운트다운은 얼마나 남았는지만 말합니다. 사용자가 만료 전에 아무 행동도 할 수 없는 것에 타이머를 달지 마세요. 그저 끝나 가는 것을 지켜볼 수밖에 없는 카운트는 해결책 없는 압박입니다.
-
-## Anti-patterns
-
-> 세그먼트가 바뀔 때마다 각각을 알리는 것. 영역의 `aria-atomic`이 시계를 숫자의 흐름이 아니라 하나의 시간으로 읽히게 하는데, 라이브 알림을 개별 세그먼트로 옮기면 바로 그 흐름이 생깁니다 — 타이머가 도는 내내, 초당 여러 번.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Progress` (`progress`)
-- `Steps` (`steps`)
-
-## 가져오기
-
-```tsx
-import { Timer } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 8개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Timer.Root>
-  <Timer.Area>
-    <Timer.Item>
-      <Timer.ItemValue />
-      <Timer.ItemLabel />
-    </Timer.Item>
-    <Timer.Separator />
-  </Timer.Area>
-  <Timer.Control>
-    <Timer.ActionTrigger />
-  </Timer.Control>
-</Timer.Root>
-```
-
-- `Timer.Root` — 최상위에 놓입니다
-- `Timer.Area` — `Root` 안에 놓입니다
-- `Timer.Control` — `Root` 안에 놓입니다
-- `Timer.Item` — `Area` 안에 놓입니다
-- `Timer.ItemValue` — `Item` 안에 놓입니다
-- `Timer.ItemLabel` — `Item` 안에 놓입니다
-- `Timer.ActionTrigger` — `Control` 안에 놓입니다
-- `Timer.Separator` — `Area` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 9개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `countdown` — `boolean`, 선택. 올려 세지 않고 내려 세요.
-- `startMs` — `number`, 선택. 세기가 시작되는 지점(밀리초).
-- `targetMs` — `number`, 선택. 세기가 끝나는 지점(밀리초).
-- `autoStart` — `boolean`, 선택. 마운트되자마자 시작합니다.
-- `interval` — `number`, 선택. 셈이 갱신되는 주기(밀리초). 기본값은 1000입니다.
-- `onTick` — `(details: TimerTickDetails) => void`, 선택. 매 틱마다 호출됩니다.
-- `onComplete` — `() => void`, 선택. 목표 지점에 닿았을 때 한 번 호출됩니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`. 크기 축은 숫자, 단위 레이블, 액션 버튼의 크기를 정합니다. 조절할 전체 치수는 없습니다. 시계의 너비는 제품이 보여 주기로 고른 단위만큼이며, 이는 척도의 한 단계가 아니라 구성의 결정입니다.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 시작하지 않은 타이머에도 시간 — 시작 값 — 이 있으므로, 보여 줄 것이 없는 상태는 존재하지 않습니다. 시작 전에 시계를 보여 주고 싶지 않은 제품은 아무것도 렌더링하지 않습니다.
-- `loading-state` — 카운트는 주어진 props로 계산되며, 가져오는 것도 나중에 해결되는 것도 없습니다. 마운트 시 이미 실행 중인지는 `autoStart`가 결정하며, 이것이 존재하는 유일한 타이밍 문제입니다.
-- `error-state` — 컴포넌트가 실패할 일이 없습니다. 잘못된 간격은 조용히 멈춘 채 틱하지 않는 시계를 렌더링하는 대신, 그 값이 주어진 곳에서 예외를 던져 제품이 바로잡을 수 있게 합니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 타이머 영역은 machine의 `translations.areaLabel`을 통해 provider의 `timer.area.label`(기본값 "Timer")로 이름이 붙으므로 제품이 번역할 수 있습니다. 영역 자체는 aria-atomic을 가진 role="timer"이므로, 실행 중인 값은 이름에서 반복되지 않고 숫자에서 읽힙니다. 아이콘만 있는 각 ActionTrigger는 자신의 액션에 대한 시각적으로 숨긴 번역된 이름(`timer.actionTrigger.start`, `.pause`, `.resume`, `.reset`, `.restart`)을 가집니다. 보이는 children이 주어진 trigger는 그 children만으로 이름이 붙습니다. ItemLabel의 기본 텍스트는 `timer.itemLabel.*`에서 옵니다.
-
-### 포커스
-
-> 액션 trigger만 탭 순서에 들어가며, 그 집합은 타이머가 실행되면서 바뀝니다. 틱이 일어나도 포커스는 이동하지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 이 machine은 `dir`을 받지 않습니다 — 설치된 machine으로 확인했으며, 팩토리가 방향을 모든 곳에 적용하지 않고 machine 자체의 prop 목록을 기준으로 제한하는 이유도 이것입니다. 숫자와 구분자는 좌우 반전되지 않습니다. 시계 전체를 반전해야 하는 제품은 컨테이너를 반전하세요.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `countdown`, `count-up`, `time-segments`.
-- 다른 이름: `timer`, `countdown`, `stopwatch`, `clock`, `time remaining`, `타이머`, `카운트다운`, `스톱워치`, `남은 시간`.
-- 어휘 상태: `controlled`.