사이트: 제품 화면에 Document·Canvas·Tree·Board를 채우고 모든 데모가 위젯 바인딩을 쓴다

[developer-1px]

Closes #454

빠진 네 장르가 제품 화면에 정해진 위젯으로 있고, 그 바인딩을 모든 데모가 수정 없이 쓴다.

Goal Anchor

• Outcome: 빠진 네 장르가 제품 화면에 정해진 위젯으로 있고, 그 바인딩을 모든 데모가 수정 없이 쓴다.
• Done: 카탈로그에 Document / Canvas / Tree / Board가 있다. Toolbar / Listbox / Grid는 유지한다. Database 위젯 페이지는 없다. useEditing이 붙은 데모가 해당 위젯 바인딩을 위젯 코드 변경 없이 사용한다. 위젯은 편집 값만 읽고 그린다.
• Don't: Database를 Grid와 따로 만들지 않는다. Button/Card를 위젯으로 두지 않는다. 위젯을 완성 편집기로 키우지 않는다. Hands를 대체하지 않는다. 데모별로 위젯을 포크하지 않는다. 새 위젯 역할을 발명하지 않는다.

Canonical Mapping

• Toolbar = canUndo / canRedo
• Listbox = selected keys / focus
• Grid = topology / selected cells (Sheet와 Database)
• Document = 블록 줄 + text offset
• Canvas = 평면 위 객체 선택
• Tree = 보이는 계층 topology
• Board = 열 × 카드
• Database Hand = Grid (페이지 추가 없음)

검증

• npm test -w @interactive-os/json-document-site
• npm run typecheck -w @interactive-os/json-document-site
• npm run docs:evaluate
• npx playwright test --config site/playwright.config.ts (68 passed)