dope-canvas
설계 단계AI가 생성한 대량의 웹 산출물을 위한 무한 캔버스.
수백 개의 살아 있는 iframe은 확장되지 않고, 모든 페이지를 이미지로 평탄화하면 선택과 이벤트 타기팅을 잃습니다. dope-canvas는 산출물을 보존된 형태로 유지합니다 — 소스, 지속 상태, 상호작용 트리, 페인트 캐시, 선택적 라이브 런타임 — 그래서 Figma 같은 선택과 활성화가 살아남습니다. 저장소는 개발 이전 기준선 단계로 아키텍처, 전달 계획, 보안 모델은 있지만 동작하는 캔버스는 아직 없습니다.
개요
모든 iframe은 브라우징 컨텍스트, DOM/CSS 상태, 스크립트 realm, 리소스, 렌더링 상태를 유지하므로 생성된 페이지 수백 개를 살려 두는 비용이 큽니다. 여기서의 설계적 답이 보존형 산출물 모델 — `산출물 = 소스 + 지속 상태 + 상호작용 트리 + 페인트 캐시 + 선택적 라이브 런타임` — 이며 스냅샷은 페인트 캐시일 뿐입니다. 문서와 상호작용 모델은 계속 남아 선택, 이벤트 라우팅, 활성화, 리비전 안전한 복원에 쓰입니다.
캔버스가 카메라 이동, 공간 가상화, 라이브/스냅샷 생명주기, 상호작용 메타데이터, 리소스 예산, 렌더링 합성을 담당하고, 산출물은 HTML, CSS, 통제된 JavaScript를 제공합니다. 패키지 분리도 그 경계를 따릅니다 — protocol, spatial, core, artifact, security, runtime, renderer, editor. 모든 패키지는 private이고 버전은 0.0.0이며, 안정적인 공개 계약으로 제시된 것은 없습니다.
두 가지 한계를 먼저 밝히고 있습니다. M0 브라우저 증거 게이트를 통과하지 못했으므로 실험적인 HTML-in-Canvas API 지원은 약속이 아니라 가능성에 머문다는 점, 그리고 라이선스가 선택되지 않아 소유자가 추가하기 전까지 저장소 내용이 오픈소스 라이선스로 제공되지 않는다는 점입니다.
무엇을 하나
- 보존형 산출물 모델: 스냅샷은 페인트 캐시일 뿐이므로 선택과 이벤트 타기팅이 유지됩니다.
- 캔버스가 카메라, 공간 가상화, 라이브/스냅샷 생명주기, 리소스 예산, 합성을 담당합니다.
- 패키지 경계가 설계를 반영합니다: protocol, spatial, core, artifact, security, runtime, renderer, editor.
- 보안은 나중의 강화 작업이 아니라 일급 패키지입니다 — 새니타이저, URL 정책, 쿼터, 케이퍼빌리티.
- 사전 문서가 갖춰져 있습니다: 기술 설계, 전달 계획, 보안 모델, 호환성 전략, 벤치마크 프로토콜, 미해결 질문.
시작하기
요구 사항: Node.js 22.12+ 및 pnpm 10.33.2.