사이트: 데모와 전체 glue 코드를 탭형 워크벤치에서 함께 보여준다

[developer-1px]

요약

• 모든 공개 인터랙티브 데모를 DemoWorkbench로 감싸 Demo 탭과 실제 source 파일 탭을 함께 제공합니다.
• demo entry의 상대 import/export를 따라 site-owned behavioral source closure를 구성합니다.
• package 내부 구현, shared/ui, 공용 demo frame은 source 탭 경계 밖에 둡니다.
• source 탭을 보는 동안에도 Demo를 mount 상태로 유지해 작업 상태가 초기화되지 않습니다.

검증

• npm run typecheck -w @interactive-os/json-document-site
• npm test -w @interactive-os/json-document-site (34개 통과)
• npm run build -w @interactive-os/json-document-site
• npm run browser:test (66개 통과)
• push 전 root TypeScript build hook 통과

Closes #460

[developer-1px]

Shiki source highlighting 추가

• source tab의 TypeScript/TSX 전문을 Shiki token으로 렌더링
• browser 권장 구성인 JavaScript RegExp engine과 필요한 두 grammar/light theme만 사용
• highlighter는 singleton으로 재사용하고 source tab을 열 때만 lazy chunk를 로드
• Shiki 준비 전이나 로딩 실패 시 기존 tokenizer로 원문과 copy/line number를 유지

검증:

• site typecheck 통과
• site unit test 34개 통과
• Pages build/evaluate/HTTP smoke 통과
• browser test 67개 통과
• 실제 /demo에서 Shiki colored token 2,067개, 문서 header가 workbench 밖에 있음, scroll 후 tab top 0, browser error 0건 확인

커밋: a5f271a8