Installation

​

Install packages

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

yarn add @pascal-app/core @pascal-app/viewer

pnpm add @pascal-app/core @pascal-app/viewer

bun add @pascal-app/core @pascal-app/viewer

npm install react three@^0.183 @react-three/fiber@^9 @react-three/drei@^10

yarn add react three@^0.183 @react-three/fiber@^9 @react-three/drei@^10

pnpm add react three@^0.183 @react-three/fiber@^9 @react-three/drei@^10

bun add react three@^0.183 @react-three/fiber@^9 @react-three/drei@^10

import { useScene, WallNode } from '@pascal-app/core'
import { Viewer, useViewer } from '@pascal-app/viewer'

// Create a wall node
const wall = WallNode.parse({
  start: [0, 0],
  end: [5, 0],
  thickness: 0.15,
  height: 3.0
})

console.log('Pascal Editor installed successfully!')
console.log('Wall ID:', wall.id)

node --loader ts-node/esm test.ts

​

Package overview

​

@pascal-app/core

• Node schemas - Zod-validated types for all building elements (Wall, Slab, Level, etc.)
• State management - useScene Zustand store with IndexedDB persistence and undo/redo
• Geometry systems - WallSystem, SlabSystem, ItemSystem, etc.
• Scene registry - Fast ID-to-Object3D lookup via useRegistry hook
• Event bus - Typed event emitter for inter-component communication
• Spatial queries - Collision detection and placement validation

import {
  // Store
  useScene,
  
  // Schemas
  WallNode,
  BuildingNode,
  LevelNode,
  SlabNode,
  ItemNode,
  ZoneNode,
  
  // Systems
  WallSystem,
  SlabSystem,
  ItemSystem,
  CeilingSystem,
  
  // Hooks
  useRegistry,
  sceneRegistry,
  spatialGridManager,
  
  // Events
  emitter,
  type WallEvent,
  type ItemEvent
} from '@pascal-app/core'

​

@pascal-app/viewer

• Viewer component - Canvas with WebGPU renderer, lights, camera, and post-processing
• Node renderers - React components that create Three.js objects for each node type
• Viewer systems - LevelSystem for level visibility, ScanSystem, GuideSystem
• Selection manager - Default click/hover handling with hierarchical navigation
• Viewer state - useViewer Zustand store for camera mode, theme, level display mode

import {
  // Main component
  Viewer,
  
  // Store
  useViewer,
  
  // Utils
  resolveAssetUrl,
  snapLevelsToTruePositions
} from '@pascal-app/viewer'

​

TypeScript configuration

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "strict": true
  }
}

​

Framework integration

​

Next.js

'use client'

import { Viewer } from '@pascal-app/viewer'

export default function EditorPage() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Viewer />
    </div>
  )
}

​

Vite

import { Viewer } from '@pascal-app/viewer'

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Viewer />
    </div>
  )
}

export default App

​

Create React App

import { Viewer } from '@pascal-app/viewer'
import './App.css'

function App() {
  return (
    <div className="App">
      <Viewer />
    </div>
  )
}

export default App

​

Browser support

• Chrome/Edge 113+
• Safari 17.4+ (macOS 14.4+)
• Firefox 127+ (behind flag)

​

Next steps