pascalorg/editor

React Three Fiber와 WebGPU로 구축된 오픈 소스, 로컬 우선 3D 건축 에디터입니다. 브라우저 또는 CLI에서 실행할 수 있으며, MCP를 통해 AI 에이전트를 연결합니다.

pascal_editor.mp4

실시간 데모를 살펴보세요. 방과 마감재부터 벽 뒤의 구조 및 시스템까지 세부적으로 재구성된 실제 주택입니다. 이 호스팅 미리보기는 차세대 Pascal editor의 방향을 탐색하며, 여기서 보여지는 경험은 아직 오픈 소스 에디터 릴리스에 포함되지 않았습니다.

저희는 이것이 시설 관리(facility management), 홈 서비스, 건축, 주택 건설, 인프라 분야에서 무엇을 가능하게 할 수 있는지 탐구하고 있습니다. X에서 토론에 참여하여 어디에 사용하실지 알려주세요.

Pascal에 대한 비디오, 튜토리얼, 기사 또는 소셜 게시물을 제작하시나요? CC BY 4.0 하에 이 푸티지를 사용하고 편집하는 것이 허용됩니다. Pascal을 언급하고 라이선스를 링크하며 수정 사항을 기록하시면 됩니다. 별도의 승인은 필요하지 않습니다.

Node.js 22.13 이상 버전이면 저장소 클론 없이 영구적인 로컬 Pascal 설치를 생성할 수 있습니다:

npx @pascal-app/cli editor

CLI는 에디터와 인증된 MCP 서비스를 백그라운드에서 시작하고, 충돌이 없는 루프백 포트를 선택하며, 프로젝트를 ~/.pascal/data/pascal.db에 보관합니다.

npm 패키지는 CLI와 해당 MCP 서비스를 포함하며, 웹 에디터 런타임은 에디터를 시작하는 첫 번째 명령에서 버전별로 다운로드되며 패키지 내부에 게시된 다이제스트(digest)와 검증됩니다. pascal mcp connect를 실행하도록 에이전트를 구성할 때는 에디터 프로세스나 해당 다운로드가 필요하지 않습니다. 다음 명령어로 pascal 명령어를 설치하세요:

npm install --global @pascal-app/cli

pnpm/Bun 명령어, 프로젝트 관리, MCP 설정, 업데이트, 저장 경로 및 문제 해결 방법은 [Run Pascal locally]를 참조하세요.

로컬 CLI 서비스당 하나의 활성 에이전트 클라이언트를 사용하세요. 독립적인 동시 작업이 필요한 경우 별도의 PASCAL_HOME 디렉터리와 서비스 프로세스를 사용해야 합니다.

이 저장소에서 skills.sh를 사용하여 Pascal의 공개 에이전트 워크플로우를 설치하세요:

npx skills add pascalorg/editor \
--skill pascal-3d \
--skill furniture-fit

Claude Code 사용자는 동일한 표준 스킬 소스를 플러그인으로 설치할 수 있습니다:

/plugin marketplace add pascalorg/editor
/plugin install pascal-agent-skills@pascal

이 Claude 플러그인은 또한 로컬 pascal mcp connect 서버를 제공합니다. 먼저 Pascal CLI를 설치하고 시작한 다음, pascal을 Claude Code 실행에 사용할 수 있도록 PATH에 유지하세요. 이 로컬 커넥터는 Pascal 계정이나 API 키가 필요하지 않으며 프로젝트를 자동으로 업로드하지 않습니다. 플러그인의 루트 경로는 이 저장소의 skills/ 디렉토리이므로, 설치 시 저장소 전체가 아닌 스킬 번들 및 해당 플러그인 메타데이터만 복사됩니다.

이 플러그인은 두 개의 서버를 제공합니다: 위의 로컬 pascal 커넥터와 https://editor.pascal.app/api/mcp용 호스팅된 pascal-hosted 서버입니다. 이 서버는 활성화 시 선택적 Pascal API 키를 요청하고 이를 OS 키체인에 저장합니다. 로컬 전용으로 실행하려면 키를 비워두세요.

Claude Code 2.1.258은 pascal mcp setup claude로 생성된 사용자 범위의 pascal 서버와 플러그인이 제공하는 서버 둘 다를 로드합니다. 연결 수명 주기를 오직 플러그인만이 소유하도록 하려면, Claude Code를 다시 로드하거나 재시작하기 전에 수동 항목을 제거하세요:

claude mcp remove --scope user pascal

또한 /mcp를 사용하여 프로젝트별 또는 로컬 범위의 Pascal 연결도 제거하거나 비활성화할 수 있습니다. 두 연결이 모두 활성 상태인 경우, '로컬 서비스당 하나의 활성 에이전트 클라이언트' 요구 사항을 위반합니다. 의도된 프로젝트가 Pascal 계정이나 조직에 호스팅되는 경우, /mcp에서 플러그인이 제공하는 로컬 서버를 비활성화하고 대신 스킬 설정 가이드에서 호스팅 엔드포인트를 구성하세요.

Codex 사용자는 저장소 마켓플레이스에서 동일한 플러그인을 설치할 수 있습니다:

codex plugin marketplace add pascalorg/editor
codex plugin add pascal-agent-skills@pascal

OpenClaw 설치는 스킬이 Pascal의 ClawHub 퍼블리셔 아래에 게시된 후에 이용 가능해집니다. 소유자 인증 설치 및 검증 명령어는 skills/README.md를 참조하세요.

pascal-3d
안전한 로컬 또는 호스팅 MCP 설정과 검증된 장면 작업을 다룹니다. furniture-fit은 지원되지 않는 높이, 스윙 또는 배송 확인을 주장하지 않으면서 경계가 있는 증거 기반의 발자국면적 평가를 생성합니다. 패키지 세부 정보 및 유효성 검사는 skills/README.md를 참조하세요.

스킬들은 선택적 필드를 사용하기 전에 연결된 MCP 도구 스키마를 검사합니다. 이 저장소에 존재하는 기능이 오래된 설치 또는 호스팅 릴리스에는 없을 수 있으므로, 에이전트는 소스 전용 입력이 사용 가능하다고 가정하는 대신 더 좁은 지원 결과를 보고해야 합니다.

이 워크플로우들은 도구 기반 작업을 위해 연결된 Pascal MCP 서버를 필요로 합니다. 따라서 OpenAI 디렉토리 제출 시 With MCP를 사용하고 스킬과 함께 프로덕션 호스팅 MCP 엔드포인트를 제출해야 합니다. 이 저장소 패키지는 해당 엔드포인트, OAuth 흐름, 검토자 자격 증명, 도메인 검증 또는 포털 스캔이 검토 준비가 되었음을 입증하지 않습니다.

server.json은 공식 MCP 레지스트리를 위한 Pascal의 매니페스트입니다. 이 버전은 npm 패키지 버전에 독립적으로 호스팅된 MCP 구현을 추적합니다. 풀 리퀘스트는 매니페스트와 프로덕션 엔드포인트를 검증합니다. Pascal 조직 소유자는 main에서 공식 레지스트리 퍼블리셔를 통해 승인된 버전을 게시합니다.

뷰어 런타임과 내장 노드 정의는 별도의 패키지입니다. 전체 내장 뷰어 세트를 설치한 다음, <Viewer> 마운트 전에 내장 플러그인을 한 번 로드하세요.

캡처 세션은 해당 패키지 안에 @pascal-app/core/capture 및 @pascal-app/viewer/capture 서브 경로로 포함된 선택적 확장 기능입니다:

npm install @pascal-app/core @pascal-app/viewer @pascal-app/editor @pascal-app/nodes

import { loadPlugin } from '@pascal-app/core'
import { builtinPlugin } from '@pascal-app/nodes'
await loadPlugin(builtinPlugin)

React 예제에 대한 @pascal-app/viewer를 확인하세요.

이것은 재사용 가능한 에디터 패키지, 독립형 앱, 그리고 이를 배포하는 CLI가 포함된 Turborepo 모노레포입니다:

editor/
├── apps/
│ └── editor/ # Next.js 애플리케이션
...

viewer는 합리적인 기본값으로 장면을 렌더링합니다. editor는 여기에 인터랙티브 도구, 선택 관리 및 편집 기능을 확장합니다.

각 패키지는 상태 관리를 위해 자체 Zustand 스토어를 가지고 있습니다:

| 스토어 | 패키지 | 책임 영역 |
|---|---|
useScene | @pascal-app/core | 장면 데이터: 노드, 루트 ID, 변경된 노드(dirty nodes), CRUD 작업. Zundo를 통해 IndexedDB에 영구 저장되며 undo/redo 기능을 제공합니다. |
useViewer | @pascal-app/viewer | 뷰어 상태: 현재 선택 항목 (빌딩/레벨/존 ID), 레벨 표시 모드 (stacked/exploded/solo), 카메라 모드. |
useEditor | apps/editor | 에디터 상태: 활성 도구, 구조 레이어 가시성, 패널 상태, 에디터별 환경 설정.

접근 패턴:

const nodes = useScene((state) => state.nodes)
const levelId = useViewer((state) => state.selection.levelId)
...

노드는 3D 장면을 설명하는 데이터 기본 단위(data primitives)입니다. 모든 노드는 BaseNode를 확장합니다.

:

BaseNode {
id: string // 타입 접두사로 자동 생성 (예: "wall_abc123")
type: string // 타입 안전 처리를 위한 식별자
...

노드 계층 구조(Node Hierarchy):

Site
└── Building
└── Level
...

노드는 중첩된 트리 형태가 아닌 평면 딕셔너리(flat dictionary) (Record<id, Node>)에 저장됩니다. 부모-자식 관계는 parentId와 children 배열을 통해 정의됩니다.

장면은 @pascal-app/core의 Zustand 스토어에서 관리됩니다:

useScene.getState()= { 
nodes: Record<id, AnyNode>, // 모든 노드
rootNodeIds: string[], // 최상위 노드 (사이트)
...

미들웨어(Middleware):

Persist: IndexedDB에 저장합니다 (일시적 노드는 제외). Temporal(Zundo): 50단계 기록을 가진 실행 취소/다시 실행 기능.

레지스트리(registry)는 노드 ID를 해당 Three.js 객체와 매핑하여 빠른 조회를 가능하게 합니다:

sceneRegistry = { 
nodes: Map<id, Object3D>, // ID → 3D 객체
byType: {
...

렌더러(Renderers)는 useRegistry 훅을 사용하여 자신의 참조(refs)를 등록합니다:

const ref = useRef<Mesh>(null!)
useRegistry(node.id, 'wall', ref)

이를 통해 시스템은 장면 그래프를 순회할 필요 없이 3D 객체에 직접 접근할 수 있습니다.

렌더러는 각 노드 유형에 대해 Three.js 객체를 생성하는 React 컴포넌트입니다:

SceneRenderer
└── NodeRenderer (유형별로 디스패치)
├── BuildingRenderer
...

패턴(Pattern):

• 렌더러가 플레이스홀더 메시/그룹을 생성합니다.
• useRegistry를 사용하여 이를 등록합니다.
• 시스템이 노드 데이터를 기반으로 지오메트리를 업데이트합니다.

예시 (간소화):

const WallRenderer = ({ node }) => {
const ref = useRef<Mesh>(null!)
useRegistry(node.id, 'wall', ref)
...

시스템은 렌더 루프(useFrame)에서 실행되는 React 컴포넌트입니다. 지오메트리와 변환값(transforms)을 업데이트하며, 스토어에 의해 표시된 변경 노드(dirty nodes)를 처리합니다.

핵심 시스템 (Core Systems) (@pascal-app/core 내):

시스템 및 기능 설명

뷰어 시스템 (Viewer Systems) (@pascal-app/viewer 내):

처리 패턴 (Processing Pattern):

useFrame(() => {
for (const id of dirtyNodes) {
const obj = sceneRegistry.nodes.get(id)
...

노드가 변경되면 useScene.getState().dirtyNodes에서 **더티(dirty)**로 표시됩니다.
시스템들은 매 프레임마다 이 집합을 확인하고, 더티 노드에 대해서만 지오메트리를 재계산합니다.

// 자동: createNode, updateNode, deleteNode가 노드를 더티로 표시함
useScene.getState().updateNode(wallId, { thickness: 0.2 })
// → wallId가 dirtyNodes에 추가됨
...

수동 표시 (Manual marking):

useScene.getState().dirtyNodes.add(wallId)

컴포넌트 간 통신은 타입이 지정된 이벤트 에미터(mitt)를 사용합니다:

// 노드 이벤트
emitter.on('wall:click', (event) => { ... })
emitter.on('item:enter', (event) => { ... })
...

충돌 감지 및 배치 유효성 검사 처리:

spatialGridManager.canPlaceOnFloor(levelId, position, dimensions, rotation)
spatialGridManager.canPlaceOnWall(wallId, t, height, dimensions)
spatialGridManager.getSlabElevationAt(levelId, x, z)

아이템 배치 도구에서 위치를 검증하고 슬래브 엘리베이션을 계산하는 데 사용됩니다.

에디터는 뷰어에 다음 기능들을 확장합니다:

도구들은 툴바를 통해 활성화되며, 특정 작업을 위한 사용자 입력을 처리합니다:

SelectTool - 선택 및 조작
WallTool - 벽 그리기
ZoneTool - 구역(zone) 생성
ItemTool - 가구/설비 배치
SlabTool - 바닥 슬래브 생성

에디터는 계층적 탐색을 사용하는 사용자 지정 선택 관리자를 사용합니다:

Site → Building → Level → Zone → Items

각 깊이 수준은 호버/클릭 동작을 위한 자체 선택 전략을 가지고 있습니다.

ZoneSystem

• 레벨 모드에 따른 영역(zone) 가시성을 제어합니다. - 노드 포커싱을 사용한 사용자 지정 카메라 컨트롤

User Action (click, drag)
↓
Tool Handler
...

이 에디터는 확장 가능합니다: 플러그인은 동일한 Plugin을 통해 노드 종류(스키마, 3D/2D 렌더링, 배치 도구, 인스펙터 파라미터)와 좌측 패널을 전송합니다.

내장 기능이 사용하는 매니페스트를 확인하세요. 별도의 내부 API는 없습니다.

개발자 가이드— 플러그인 생성: Plugin

셰이프, 패널 기여, 디스커버리, 라이프사이클, 그리고 v1에 포함되거나 제외된 항목들.작동 예제—pascalorg/plugin-trees