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

package/skills/components/splitter/SKILL.md

@@ -1,136 +0,0 @@
----
-name: 'splitter'
-description: 'Splitter — 사용자가 패널 사이의 핸들을 드래그해 크기를 조절하는 패널 묶음이며, 각 패널의 최소·최대·접힌 크기는 드래그해 보며 알아내는 대신 데이터로 선언됩니다. 다른 이름: splitter, split pane, resizable panels, gutter, divider, 분할 패널, 스플리터, 크기 조절 패널, 패널 분할.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/splitter.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/splitter.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Splitter
-
-> 사용자가 패널 사이의 핸들을 드래그해 크기를 조절하는 패널 묶음이며, 각 패널의 최소·최대·접힌 크기는 드래그해 보며 알아내는 대신 데이터로 선언됩니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Splitter`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 각 영역이 차지할 공간을 사용자가 정하고 그 결정이 유지되기를 기대하는 레이아웃에 쓰세요 — 에디터 옆의 파일 트리, 상세 패널 옆의 목록처럼 말입니다. 크기를 저장해 둘 가치가 있을 때 선택하세요. `onResizeEnd`가 전체 크기 집합을 알려 주고 `panelSizes`가 그 값을 다시 받기 때문입니다.
-
-## Don't
-
-> 정적인 2단 레이아웃으로 쓰지 마세요. 그리드는 사용자가 발견하고 의아해할 키보드 조작용 separator 없이 같은 일을 합니다. 사용자가 잃어서는 안 되는 영역을 숨기는 데 쓰지 마세요 — 크기가 0까지 드래그된 패널은 `collapsible`로 선언해 되돌아올 상태를 주지 않는 한 버그처럼 보입니다. 범용 작업 공간을 만들려고 Splitter를 깊게 중첩하지 마세요. 단계마다 탭 순서에 separator가 하나씩 늘어나고, 네 개쯤 되면 아무도 끝까지 가지 않는 키보드 여정이 됩니다.
-
-## Anti-patterns
-
-> machine의 `size` prop을 공용 척도의 이름으로 읽는 것. Synapse에서 `size`는 마흔아홉 개 컴포넌트 모두에 공통인 시각적 척도고, 패널 크기는 `panelSizes`입니다. 둘을 혼동해도 어느 쪽으로든 아무 경고가 없습니다 — machine은 척도 이름을 크기 목록으로 받고, 레시피는 배열을 척도로 받게 됩니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `ScrollArea` (`scroll-area`)
-- `Tabs` (`tabs`)
-
-## 가져오기
-
-```tsx
-import { Splitter } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 4개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Splitter.Root>
-  <Splitter.Panel />
-  <Splitter.ResizeTrigger>
-    <Splitter.ResizeTriggerIndicator />
-  </Splitter.ResizeTrigger>
-</Splitter.Root>
-```
-
-- `Splitter.Root` — 최상위에 놓입니다
-- `Splitter.Panel` — `Root` 안에 놓입니다
-- `Splitter.ResizeTrigger` — `Root` 안에 놓입니다
-- `Splitter.ResizeTriggerIndicator` — `ResizeTrigger` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 12개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-### 필수
-
-- `panels` — `readonly SplitterPanel[]`, 필수. 창들과 그 제약입니다. 필수입니다. 패널이 없는 스플리터는 나눌 것이 없고, machine은 패널 수와 리사이즈 trigger id, 모든 `aria-controls`를 이 목록에서 도출합니다.
-
-### 선택
-
-- `panelSizes` — `readonly SplitterPanelSize[]`, 선택. 제어되는 패널 크기이며, `panels`와 같은 순서입니다. Synapse에서 `size`는 공유 크기 척도를 뜻하므로, machine의 `size`를 무엇의 크기인지 드러나는 `panelSizes`라는 이름으로 받습니다.
-- `defaultPanelSizes` — `readonly SplitterPanelSize[]`, 선택. 비제어 모드의 초기 패널 크기. `panelSizes`를 주면 무시됩니다.
-- `onResize` — `(details: SplitterResizeDetails) => void`, 선택. 창을 끄는 동안 계속 호출됩니다.
-- `onResizeStart` — `() => void`, 선택. 드래그가 시작될 때 한 번 호출됩니다.
-- `onResizeEnd` — `(details: SplitterResizeDetails) => void`, 선택. 드래그가 끝났을 때 한 번 호출됩니다.
-- `onCollapse` — `(details: SplitterPanelStateDetails) => void`, 선택. 접을 수 있는 패널이 접혔을 때 호출됩니다.
-- `onExpand` — `(details: SplitterPanelStateDetails) => void`, 선택. 접혀 있던 패널이 다시 펼쳐졌을 때 호출됩니다.
-- `orientation` — `Orientation`, 선택. 창들이 배치되는 축. 기본값은 `horizontal`입니다.
-- `keyboardResizeBy` — `number | null`, 선택. 화살표 키를 한 번 눌렀을 때 창의 크기가 바뀌는 정도(픽셀).
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — `panels`는 필수이며, 패널이 몇 개인지 machine에 알려 주는 것이 바로 이 값입니다. 패널이 없는 Splitter는 나눌 대상이 없으므로, 컴포넌트가 그 상태를 렌더링하는 대신 타입이 거부합니다.
-- `loading-state` — 내용이 아직 도착하지 않은 패널은 사용처의 콘텐츠 문제입니다. 레이아웃은 패널 안의 어떤 것이 해결되기 전에 이미 `panels`로 알려져 있으므로, Splitter 자체가 기다릴 것은 없습니다.
-- `error-state` — 컴포넌트가 실패할 일이 없습니다. 내용을 불러오지 못한 패널은 레이아웃 전체의 상태로 알리는 대신, 사용자가 이미 보고 있는 그 패널 안에서 스스로 알립니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 포커스 가능한 각 separator의 이름은 번역 가능한 'splitter.resizeTrigger.label'(영어 기본값 'Resize {before} and {after}')에서 오며, 사이에 놓인 두 패널의 id로 채워집니다. 패널 id가 사람이 읽을 단어가 아닌 제품은 provider를 통해 핸들 이름을 바꾸거나, aria-labelledby로 자체 텍스트를 가리킵니다.
-
-### 포커스
-
-> 각 크기 조절 trigger는 각자 탭 순서에 들어갑니다. Splitter는 하나의 복합 위젯이 아니라 독립된 separator들의 집합이기 때문입니다. 크기를 조절해도 포커스가 패널 안으로 이동하지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 가로 Splitter의 패널은 논리적 인라인 방향으로 배치되고 화살표 키 크기 조절도 텍스트 방향을 따르며, 둘 다 prop이 아니라 provider에서 옵니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `resizable-panes`, `drag-to-resize`, `collapsible-pane`, `axis-orientation`.
-- 다른 이름: `splitter`, `split pane`, `resizable panels`, `gutter`, `divider`, `분할 패널`, `스플리터`, `크기 조절 패널`, `패널 분할`.
-- 어휘 상태: `controlled`.

package/skills/components/steps/SKILL.md

@@ -1,150 +0,0 @@
----
-name: 'steps'
-description: 'Steps — 사용자가 순서대로 완료하는 단계 흐름이며, 전체 단계 수와 완료된 단계, 그리고 현재 보이는 단계를 지나 진행할 수 있는지를 알고 있습니다. 다른 이름: steps, stepper, wizard, progress steps, checkout flow, 스텝, 스테퍼, 단계 표시, 마법사, 진행 단계.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/steps.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/steps.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Steps
-
-> 사용자가 순서대로 완료하는 단계 흐름이며, 전체 단계 수와 완료된 단계, 그리고 현재 보이는 단계를 지나 진행할 수 있는지를 알고 있습니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Steps`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 순서가 있는 작업에서, 사용자가 얼마나 진행했는지 알아야 하고 한 단계를 마쳤다는 것이 의미를 가질 때 쓰세요. 흐름이 진행을 거부할 수 있어야 할 때 선택하세요 — `isStepValid`를 쓴 선형 Steps는 이 컴포넌트들 가운데 유일하게 안 된다고 말할 수 있습니다 — 그리고 같은 패널을 Tabs로 보여 주면 누군가 중요한 부분을 건너뛸 수 있을 때도 그렇습니다.
-
-## Don't
-
-> 완료라는 개념이 없고 어떤 순서든 괜찮은, 한 대상에 대한 대등한 뷰에는 쓰지 마세요. 그것은 Tabs이고, 거기에 Steps를 쓰면 사용자가 무시해야 할 순서를 지어내게 됩니다. 이동 기능이 없는 읽기 전용 진행 표시로 쓰지 마세요. Progress 막대는 아무 일도 하지 않는 대상을 내놓지 않고도 같은 말을 합니다. 한 페이지에 다 들어가지 않을 만큼 단계가 많을 때도 쓰지 마세요 — 이 컴포넌트의 존재 이유는 순서 속에서 자신의 위치를 보는 것이고, 가로로 스크롤되는 Steps는 그것을 포기한 것입니다.
-
-## Anti-patterns
-
-> 렌더링된 trigger 수로 단계 수를 추론하는 것. `aria-valuemax`와 흐름 끝의 가드가 `count`로 계산되기 때문에 `count`가 필수이며, 마지막 단계에서 끝을 넘어 진행할 수 있는 Steps는 누군가 다음 버튼을 한 번 더 누르기 전까지는 멀쩡해 보입니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Tabs` (`tabs`)
-- `Progress` (`progress`)
-- `Accordion` (`accordion`)
-
-## 가져오기
-
-```tsx
-import { Steps } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 10개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Steps.Root>
-  <Steps.List>
-    <Steps.Item />
-    <Steps.Trigger>
-      <Steps.Indicator />
-    </Steps.Trigger>
-    <Steps.Separator />
-  </Steps.List>
-  <Steps.Content />
-  <Steps.NextTrigger />
-  <Steps.PrevTrigger />
-  <Steps.Progress />
-</Steps.Root>
-```
-
-- `Steps.Root` — 최상위에 놓입니다
-- `Steps.List` — `Root` 안에 놓입니다
-- `Steps.Item` — `List` 안에 놓입니다
-- `Steps.Trigger` — `List` 안에 놓입니다
-- `Steps.Indicator` — `Trigger` 안에 놓입니다
-- `Steps.Separator` — `List` 안에 놓입니다
-- `Steps.Content` — `Root` 안에 놓입니다
-- `Steps.NextTrigger` — `Root` 안에 놓입니다
-- `Steps.PrevTrigger` — `Root` 안에 놓입니다
-- `Steps.Progress` — `Root` 안에 놓입니다
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 12개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-### 필수
-
-- `count` — `number`, 필수. 단계가 몇 개인지. 기본값을 두지 않고 필수로 둡니다. 기본값에 기대면 단계 수를 빠뜨린 흐름이 틀린 끝을 가진 채 조용히 렌더되기 때문입니다. machine의 `aria-valuemax`와 흐름의 끝을 지키는 가드가 모두 이 값에서 계산됩니다.
-
-### 선택
-
-- `value` — `number`, 선택. 현재 단계이며 제어 모드입니다. machine의 인덱스와 마찬가지로 0부터 세요.
-- `defaultValue` — `number`, 선택. 비제어 모드의 초기 단계. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<number>) => void`, 선택. 제어 여부와 무관하게 현재 단계가 바뀔 때마다 호출됩니다.
-- `linear` — `boolean`, 선택. 단계를 순서대로 밟도록 요구합니다.
-- `isStepValid` — `(step: number) => boolean`, 선택. 어떤 단계를 유효하지 않은 채로 떠날 수 있는지 정합니다. `linear`에서는 전진을 막습니다.
-- `isStepSkippable` — `(step: number) => boolean`, 선택. 어떤 단계를 다음/이전으로 건너뛸 수 있는지 정합니다.
-- `onStepInvalid` — `(details: StepsInvalidDetails) => void`, 선택. 단계가 유효하지 않아 이동이 거절됐을 때 호출됩니다.
-- `onStepComplete` — `() => void`, 선택. 마지막 단계가 끝났을 때 한 번 호출됩니다.
-- `orientation` — `Orientation`, 선택. 목록이 배치되는 축. 기본값은 `horizontal`입니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — `count`가 필수이므로 Steps는 항상 자신의 길이를 압니다. 비어 있을 컬렉션이 없고, 단계가 0개인 흐름은 상태로 렌더링되는 대신 타입이 거부합니다.
-- `loading-state` — 내용이 아직 도착하지 않은 단계는 사용처의 콘텐츠 문제입니다. 컴포넌트가 실제로 책임지는 것은 진행을 거부하는 일입니다 — 선형 흐름에서 `isStepValid`가 앞으로의 이동을 막으며, 이것이 여기서 로딩 상태가 가질 쓸모 있는 절반입니다.
-- `error-state` — 유효하지 않음은 컴포넌트 단위가 아니라 단계 단위이므로, 흐름 전체의 상태가 아니라 `isStepValid`와 `onStepInvalid`로 알립니다. Steps가 통째로 유효하지 않은 경우는 드물고, 유효하지 않은 것은 그중 한 단계입니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> 각 단계의 이름은 사용처의 콘텐츠입니다. 진행 막대는 Synapse가 의도적으로 이름을 붙이지 않습니다. 이 Steps가 무엇의 진행 막대인지 — 결제, 온보딩 — 는 제품이 정할 일이고, 기본값을 두면 애플리케이션의 모든 Steps가 똑같은 이름을 갖게 됩니다. machine이 이름을 전혀 제공하지 않으므로 충돌 규칙이 이길 대상이 없어, 사용처가 지정한 aria-label이 그대로 적용됩니다.
-
-### 포커스
-
-> trigger들에 걸친 로빙 tabindex이며, 각 단계의 패널은 포커스 가능해서 Tab으로 들어온 사용자가 단계가 알린 콘텐츠에 도착합니다. 흐름이 진행되어도 포커스가 저절로 이동하지 않습니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 예. 단계 trigger 사이의 화살표 키 이동은 텍스트 방향을 따르고, 구분선은 논리적 방향으로 배치됩니다. 둘 다 prop이 아니라 provider에서 옵니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `ordered-sequence`, `gated-advance`, `completion-state`, `axis-orientation`.
-- 다른 이름: `steps`, `stepper`, `wizard`, `progress steps`, `checkout flow`, `스텝`, `스테퍼`, `단계 표시`, `마법사`, `진행 단계`.
-- 어휘 상태: `controlled`.

package/skills/components/switch/SKILL.md

@@ -1,144 +0,0 @@
----
-name: 'switch'
-description: 'Switch — 켜거나 끄는 순간 바로 적용되는 설정을 위한 이진 컨트롤이며, 체크할 상자가 아니라 썸이 미끄러지는 트랙으로 렌더링됩니다. 다른 이름: switch, toggle switch, on off, setting, flip, 스위치, 토글 스위치, 온오프 스위치, 켜기/끄기.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/switch.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/switch.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Switch
-
-> 켜거나 끄는 순간 바로 적용되는 설정을 위한 이진 컨트롤이며, 체크할 상자가 아니라 썸이 미끄러지는 트랙으로 렌더링됩니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Switch`
-- 분류: `form-controls`
-- 수명 주기: `active`
-
-## Do
-
-> 제출 단계 없이 즉시 적용되는 설정에 쓰세요 — 비행기 모드, 알림 켜기, 어두운 테마처럼 말입니다. 컨트롤의 모양 자체가 변경이 이미 일어났다고 말하며, 이것이 Checkbox가 아닌 이유의 전부입니다.
-
-## Don't
-
-> 사용자가 제출해야 하는 폼 안에서는 Switch를 쓰지 마세요. 그 모양은 폼이 지킬 수 없는 즉시 적용을 약속하며, 결정이 나중을 위해 기록된다고 말하는 컨트롤은 Checkbox입니다. 이름 붙은 두 대안 사이의 선택에도 쓰지 마세요 — Switch에는 암묵적인 꺼짐만 있으므로 `Metric`/`Imperial`에는 두 선택지를 모두 읽을 수 있는 RadioGroup이나 ToggleGroup이 필요합니다. Switch에 세 번째 상태를 주지 마세요. 불확정 상태는 Checkbox의 몫입니다.
-
-## Anti-patterns
-
-> 상태를 `checked`라는 prop에 바인딩하는 것. Synapse의 표준 어휘는 상태를 `value`/`defaultValue`/`onValueChange`에, 제출되는 문자열을 `formValue`에 둡니다. HTML의 "value"가 가진 두 의미가 동시에 그 이름을 가질 수 없기 때문입니다(`packages/react/src/system/vocabulary.ts`). 시스템의 모든 토글이 이를 따릅니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-22).
-
-## 관련 컴포넌트
-
-- `Checkbox` (`checkbox`)
-- `Toggle` (`toggle`)
-- `RadioGroup` (`radio-group`)
-
-## 가져오기
-
-```tsx
-import { Switch } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 4개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Switch.Root>
-  <Switch.Label />
-  <Switch.Control>
-    <Switch.Thumb />
-  </Switch.Control>
-</Switch.Root>
-```
-
-- `Switch.Root` — 최상위에 놓입니다
-- `Switch.Label` — `Root` 안에 놓입니다
-- `Switch.Control` — `Root` 안에 놓입니다
-- `Switch.Thumb` — `Control` 안에 놓입니다
-
-### part가 렌더링하고 소유하는 요소
-
-- `hiddenInput`, `Switch.Root`가 렌더링합니다 — 포커스, 키보드 조작, 폼 제출을 담당하는 네이티브 체크박스 입력입니다. Root가 이를 렌더링하며 의도적으로 part로 두지 않습니다. anatomy 키가 없는 part는 이 Registry 자체의 part 검사에 실패하고, 사용처가 폼·키보드·접근성 트리가 모두 의존하는 요소를 옮기거나, 스타일을 바꾸거나, 빠뜨릴 수 있게 되기 때문입니다.
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 12개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `value` — `boolean`, 선택. 제어되는 켜짐/꺼짐 상태.
-- `defaultValue` — `boolean`, 선택. 비제어 모드의 초기 상태. `value`를 주면 무시됩니다.
-- `onValueChange` — `(details: ValueChangeDetails<boolean>) => void`, 선택. 제어 여부와 무관하게 상태가 바뀔 때마다 호출됩니다.
-- `formValue` — `string`, 선택. 스위치가 켜져 있을 때 `name` 아래로 제출되는 문자열입니다. 네이티브 체크박스가 그러하듯 기본값은 `"on"`입니다. 상태를 담는 `value`와는 다른 것입니다.
-- `name` — `string`, 선택. 폼 필드 이름. 이 값이 없으면 컨트롤은 아무것도 제출하지 않습니다.
-- `form` — `string`, 선택. 폼 바깥에 렌더된 Switch를 id로 그 폼에 연결합니다.
-- `disabled` — `boolean`, 선택. 비활성화된 Switch는 제출하지도, 반응하지도 않습니다.
-- `readOnly` — `boolean`, 선택. 읽기 전용 Switch는 값을 제출하지만 바꿀 수는 없습니다.
-- `invalid` — `boolean`, 선택. 보조 기술에 `aria-invalid`로 알립니다.
-- `required` — `boolean`, 선택. 제약 검증. 폼이 제출되려면 스위치가 켜져 있어야 합니다.
-- `size` — `Size`, 선택. 하나뿐인 공용 척도를 따릅니다. 모든 컴포넌트와 마찬가지로 기본값은 `md`입니다.
-- `id` — `string`, 선택. 팩토리가 만드는 식별자를 덮어씁니다. 서버와 클라이언트에서 같은 값으로 유지됩니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 예.
-
-- `input[type=checkbox]`로 제출합니다.
-- 제출 값은 `formValue`에서 옵니다.
-- 아무것도 설정하지 않으면 `on`을 제출합니다.
-
-> 숨겨진 입력이 접근 가능하고 포커스 가능한 컨트롤이며, 보이는 `control`과 `thumb` part가 aria-hidden인 쪽입니다. `disabled`이면 제출되지 않고, `required`는 스위치가 켜져 있어야 한다는 뜻입니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — 컬렉션이 아니라 하나의 이진 값을 가지므로 비어 있을 수 있는 집합이 없습니다. 전환할 대상이 없는 Switch는 애초에 렌더링되지 말았어야 할 Switch입니다.
-- `loading-state` — 현재 상태가 아직 도착하지 않은 설정은 비활성화된 Switch에 주변 페이지가 이미 쓰는 스켈레톤을 더한 것입니다. 여기에 로딩 part를 두면 비활성 상태와 겹쳐 하나의 조건을 두 가지 방식으로 표현하게 됩니다.
-- `error-state` — 유효하지 않음은 컨트롤의 상태이며, `invalid`로 알리고 aria-invalid로 전달됩니다. 무엇이 잘못됐는지 설명하는 문장은 레이블과 설명을 소유한 주변 필드의 몫입니다. 자체 메시지를 가진 Switch는 그 필드와 경쟁하게 됩니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> aria-labelledby를 통해 Label part에서 가져옵니다. Label 없이 렌더링된 Switch는 이름이 없으며, 이는 조용히 채워지는 대신 감사(audit)에서 드러납니다. machine 자체의 `label` prop은 노출하지 않으므로 이름을 붙이는 방법은 정확히 하나입니다.
-
-### 포커스
-
-> 포커스는 숨겨진 네이티브 입력에 머무릅니다. 이 입력은 시각적으로 잘려 있을 뿐, 보조 기술에서 숨겨지거나 탭 순서에서 빠지지 않습니다. 포커스 링은 보이는 트랙에 그려집니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `binary-choice`, `immediate-setting`, `form-value`, `readonly-display`.
-- 다른 이름: `switch`, `toggle switch`, `on off`, `setting`, `flip`, `스위치`, `토글 스위치`, `온오프 스위치`, `켜기/끄기`.
-- 어휘 상태: `controlled`.

package/skills/components/table/SKILL.md

@@ -1,144 +0,0 @@
----
-name: 'table'
-description: 'Table — 행과 열로 된 데이터를 네이티브 `<table>`로 보여 주는 컴포넌트입니다. 열 머리와 행 머리가 scope로 셀과 이어지고, 표가 넓으면 자기 영역 안에서 가로로 스크롤되어 페이지 폭을 넘지 않습니다. 셀 사이에는 가로·세로 구분선이 항상 그려지며, 색은 CSS 변수 `--synapse-table-row-divider`와 `--synapse-table-column-divider`로 바꿀 수 있습니다(`transparent`면 숨습니다). 본문 행은 번갈아 배경이 칠해지며(zebra), 배경·줄무늬·hover 색은 `--synapse-table-row-background`, `--synapse-table-row-stripe`, `--synapse-table-row-hover`로 바꿀 수 있습니다. Table.Row의 `selected`는 선택 배경(`--synapse-table-row-selected`)만 칠하고 선택 사실은 행 안의 Checkbox가 전하며, `current`는 표의 보이는 영역에 맞춘 테두리(`--synapse-table-row-current`)로 행을 두르고 `aria-current`로 알립니다. 다른 이름: table, data table, grid table, 데이터 표, 표, 테이블.'
-metadata:
-  package: '@neurocle/synapse-react'
-  packageVersion: '0.3.0'
-  registryEntry: 'packages/registry/data/components/table.json'
-  registryStructuralVersion: '0.3.0'
-  lifecycle: 'active'
-  generator: 'packages/react/src/skills/generate.ts'
----
-
-<!--
-생성된 파일 — 손으로 고치지 않습니다.
-
-Source:     packages/registry/data/components/table.json (항목 구조 0.3.0)
-Generator:  packages/react/src/skills/generate.ts
-Regenerate: npx nx run react:skills:generate
-
-아래에서 이 컴포넌트에 대해 말하는 모든 문장은 그 항목의 필드입니다. 여기서 고친 내용은 다음
-재생성 때 지워지고, 손으로 설명한 컴포넌트는 아무것도 실패하지 않은 채 설명과 어긋납니다.
-대신 항목을 고칩니다.
--->
-
-# Table
-
-> 행과 열로 된 데이터를 네이티브 `<table>`로 보여 주는 컴포넌트입니다. 열 머리와 행 머리가 scope로 셀과 이어지고, 표가 넓으면 자기 영역 안에서 가로로 스크롤되어 페이지 폭을 넘지 않습니다. 셀 사이에는 가로·세로 구분선이 항상 그려지며, 색은 CSS 변수 `--synapse-table-row-divider`와 `--synapse-table-column-divider`로 바꿀 수 있습니다(`transparent`면 숨습니다). 본문 행은 번갈아 배경이 칠해지며(zebra), 배경·줄무늬·hover 색은 `--synapse-table-row-background`, `--synapse-table-row-stripe`, `--synapse-table-row-hover`로 바꿀 수 있습니다. Table.Row의 `selected`는 선택 배경(`--synapse-table-row-selected`)만 칠하고 선택 사실은 행 안의 Checkbox가 전하며, `current`는 표의 보이는 영역에 맞춘 테두리(`--synapse-table-row-current`)로 행을 두르고 `aria-current`로 알립니다.
-
-`@neurocle/synapse-react` 0.3.0에서 생성했습니다. 설치된 버전이 이 버전이 아니면, 이 페이지의 어떤 내용보다 설치된 패키지 안에 함께 배포된 Registry를 우선합니다.
-
-- 패키지: `@neurocle/synapse-react`
-- 내보내기: `Table`
-- 분류: `disclosure-layout-display`
-- 수명 주기: `active`
-
-## Do
-
-> 같은 속성을 가진 여러 항목을 열을 맞춰 비교하게 할 때 쓰세요 — 모델마다 정확도와 학습 시간, 데이터셋마다 이미지 수와 라벨 수처럼 말입니다. 첫 열이 행을 대표하면 그 셀을 Table.RowHeader로 두어, 스크린 리더가 셀마다 어느 행인지 함께 읽게 하세요.
-
-## Don't
-
-> 레이아웃을 나누려고 표를 쓰지 마세요 — 열 배치는 CSS 그리드가 맡습니다. 항목마다 모양이 다르거나 비교할 열이 없으면 목록이나 Card가 맞습니다. 계층이 있는 표는 TreeView입니다. 정렬, 행 선택, 셀 편집, 가상 스크롤은 일부러 두지 않았습니다 — 데이터를 어떻게 다룰지는 사용처가 고른 표 라이브러리(TanStack Table 등)의 몫이고, Table은 그 결과를 그리는 마크업과 스타일만 맡습니다. 정렬 버튼은 Table.ColumnHeader 안에 Button을, 행 선택은 Table.Cell 안에 Checkbox를 두어 조합하고, 정렬 상태는 사용처가 ColumnHeader에 aria-sort로 주세요.
-
-## Anti-patterns
-
-> 머리 셀을 Table.Cell에 굵은 글씨로만 그리는 것. 보기에는 머리지만 scope가 없어 스크린 리더는 셀을 읽을 때 어느 열인지 알리지 못합니다 — 열 머리는 Table.ColumnHeader, 행 머리는 Table.RowHeader로 두세요. 캡션 없이 표를 두는 것도 같은 부류입니다. 한 페이지에 표가 여럿이면 이름 없는 표는 서로 구별되지 않습니다.
-
-Registry는 이 컴포넌트의 안내를 `reviewed`로 기록합니다(검토일 2026-09-26).
-
-## 관련 컴포넌트
-
-- `TreeView` (`tree-view`)
-- `Card` (`card`)
-- `EmptyState` (`empty-state`)
-- `Skeleton` (`skeleton`)
-
-## 가져오기
-
-```tsx
-import { Table } from '@neurocle/synapse-react'
-```
-
-## Anatomy
-
-React 네임스페이스가 노출하는 part 10개를 항목의 `parts.containment`가 기록한 대로 조합했습니다. 한 part가 놓일 수 있는 정당한 자리가 둘 이상이면 스니펫은 첫 번째를 쓰고, 아래 목록이 나머지를 알려 줍니다.
-
-```tsx
-<Table.Root>
-  <Table.Table>
-    <Table.Caption />
-    <Table.Header />
-    <Table.Body>
-      <Table.Row>
-        <Table.ColumnHeader />
-        <Table.RowHeader />
-        <Table.Cell />
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer />
-  </Table.Table>
-</Table.Root>
-```
-
-- `Table.Root` — 최상위에 놓입니다
-- `Table.Table` — `Root` 안에 놓입니다
-- `Table.Caption` — `Table` 안에 놓입니다
-- `Table.Header` — `Table` 안에 놓입니다
-- `Table.Body` — `Table` 안에 놓입니다
-- `Table.Footer` — `Table` 안에 놓입니다
-- `Table.Row` — `Body` 안, 또는 `Header` 또는 `Footer` 안에 놓입니다
-- `Table.ColumnHeader` — `Row` 안에 놓입니다
-- `Table.RowHeader` — `Row` 안에 놓입니다
-- `Table.Cell` — `Row` 안에 놓입니다
-
-### part가 렌더링하고 소유하는 요소
-
-- `currentFrame`, `Table.Root`가 렌더링합니다 — `current`인 행을 두르는 테두리 층입니다. 테두리가 가로 스크롤에도 표의 보이는 영역 양끝에 머물러야 하므로 행이나 셀이 아니라 스크롤 영역 안에 sticky로 고정된 별도 층이 그리며, 위치는 현재 행이 바뀌거나 크기가 바뀔 때만 다시 잽니다. 사용처가 조합할 것이 없는 장식이고, part로 두면 빠뜨리거나 표 밖에 둘 수 있어 일부러 part로 두지 않았습니다.
-
-## Props
-
-빌드가 방출하는 선언에서 도출한 prop 1개. 선언에는 기본값을 둘 자리가 없으므로 prop 기록에는 기본값이 없습니다. 기본값이 있다면 그 prop의 설명에 적혀 있습니다.
-
-모든 prop이 선택입니다. 아무것도 넘기지 않으면 컴포넌트는 비제어로 동작합니다.
-
-### 선택
-
-- `size` — `Size`, 선택. 셀의 여백과 글자 크기. 하나뿐인 공용 척도를 따르며 기본값은 `md`입니다.
-
-## Variants
-
-- `size` — `xs`, `sm`, `md`, `lg`, `xl`. 기본값은 `md`.
-
-## 폼
-
-폼 참여: 아니요.
-
-> 폼에 제출하는 값이 없습니다. 셀 안에 폼 컨트롤을 두면 그 컨트롤이 각자 제출합니다.
-
-## 이 컴포넌트에 일부러 없는 것
-
-- `empty-state` — Table은 사용처가 넘긴 행을 그대로 그릴 뿐 행 집합을 소유하지 않습니다. 행이 없을 때 무엇을 보여 줄지는 데이터를 가진 사용처가 정하며, 보통 표 대신 EmptyState를 렌더링합니다.
-- `loading-state` — Table은 데이터를 가져오지 않습니다. 불러오는 동안에는 사용처가 행 자리를 Skeleton으로 감싸거나 표 전체를 Spinner로 대신합니다.
-- `error-state` — Table에는 값도 입력도 없어 스스로 실패할 수 없습니다. 데이터를 불러오지 못했다면 그 사실은 오류 수준의 Alert로 표 위에 알립니다.
-
-## 접근성
-
-### 접근 가능한 이름
-
-> Table.Caption이 표의 이름입니다. 캡션을 화면에 보이지 않게 하려면 aria-label을 Table.Table에 주세요.
-
-### 포커스
-
-> 포커스를 받는 요소가 없습니다. 셀 사이를 화살표로 이동하는 grid 동작은 제공하지 않습니다 — 셀 단위 편집이나 선택이 필요한 표는 이 컴포넌트의 범위 밖입니다.
-
-## 로케일과 컬렉션
-
-- 로케일 의존: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-- 컬렉션 윈도잉: 아니요. 항목은 이를 이유 없이 사실로만 기록합니다.
-
-## 기능 용어와 다른 이름
-
-- 다루는 기능: `data-table`, `overflow-container`.
-- 다른 이름: `table`, `data table`, `grid table`, `데이터 표`, `표`, `테이블`.
-- 어휘 상태: `controlled`.