pascalorg/editor

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)

editor/
├── apps/
│   └── editor/          # แอปพลิเคชัน Next.js
├── packages/
│   ├── core/            # Schemas, สถานะฉาก, และ registry contracts
│   ├── viewer/          # รันไทม์การเรนเดอร์ 3D และระบบที่ใช้ร่วมกัน
│   ├── editor/          # เครื่องมือแก้ไขและส่วนประกอบ UI
│   ├── nodes/           # Node definitions, renderers, และระบบที่มาพร้อมเครื่องมือ
│   └── ui/              # ส่วนประกอบ UI ที่ใช้ร่วมกัน

// Subscribe to state changes (React component)
const nodes = useScene((state) => state.nodes)
const levelId = useViewer((state) => state.selection.levelId)
const activeTool = useEditor((state) => state.tool)

// Access state outside React (callbacks, systems)
const node = useScene.getState().nodes[id]
useViewer.getState().setSelection({ levelId: 'level_123' })

BaseNode {
  id: string              // สร้างอัตโนมัติพร้อมคำนำหน้าประเภท (เช่น "wall_abc123")
  type: string            // ตัวแยกประเภทสำหรับการจัดการแบบ type-safe
  parentId: string | null // การอ้างอิงถึง node แม่
  visible: boolean
  camera?: Camera         // ตำแหน่งกล้องที่บันทึกไว้ (ไม่บังคับ)
  metadata?: JSON         // เมตาดาต้าตามอำเภอใจ (เช่น { isTransient: true })
}

Site
└── Building
    └── Level
        ├── Wall → Item (doors, windows)
        ├── Slab
        ├── Ceiling → Item (lights)
        ├── Roof
        ├── Zone
        ├── Scan (3D reference)
        └── Guide (2D reference)

useScene.getState() = {
  nodes: Record<id, AnyNode>,  // Nodes ทั้งหมด
  rootNodeIds: string[],       // Nodes ระดับบนสุด (sites)
  dirtyNodes: Set<string>,     // Nodes ที่รอการอัปเดตระบบ

  createNode(node, parentId),
  updateNode(id, updates),
  deleteNode(id),
}

sceneRegistry = {
  nodes: Map<id, Object3D>,    // ID → ออบเจกต์ 3D
  byType: {
    wall: Set<id>,
    item: Set<id>,
    zone: Set<id>,
    // ...
  }
}

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

SceneRenderer
└── NodeRenderer (dispatches by type)
    ├── BuildingRenderer
    ├── LevelRenderer
    ├── WallRenderer
    ├── SlabRenderer
    ├── ZoneRenderer
    ├── ItemRenderer
    └── ...

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

  return (
    <mesh ref={ref}>
      <boxGeometry args={[0, 0, 0]} />  {/* ถูกแทนที่โดย WallSystem */}
      <meshStandardMaterial />
      {node.children.map(id => <NodeRenderer key={id} nodeId={id} />)}
    </mesh>
  )
}

useFrame(() => {
  for (const id of dirtyNodes) {
    const obj = sceneRegistry.nodes.get(id)
    const node = useScene.getState().nodes[id]

    // อัปเดต geometry, transforms, ฯลฯ
    updateGeometry(obj, node)

    dirtyNodes.delete(id)
  }
})

// อัตโนมัติ: createNode, updateNode, deleteNode ทำเครื่องหมาย nodes ว่า dirty
useScene.getState().updateNode(wallId, { thickness: 0.2 })
// → wallId ถูกเพิ่มไปยัง dirtyNodes
// → WallSystem สร้าง geometry ใหม่ในเฟรมถัดไป
// → wallId ถูกลบออกจาก dirtyNodes

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

// Node events
emitter.on('wall:click', (event) => { ... })
emitter.on('item:enter', (event) => { ... })
emitter.on('zone:context-menu', (event) => { ... })

// Grid events (พื้นหลัง)
emitter.on('grid:click', (event) => { ... })

// Event payload
NodeEvent {
  node: AnyNode
  position: [x, y, z]
  localPosition: [x, y, z]
  normal?: [x, y, z]
  stopPropagation: () => void
}

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

Site → Building → Level → Zone → Items

User Action (click, drag)
       ↓
Tool Handler
       ↓
useScene.createNode() / updateNode()
       ↓
Node added/updated in store
Node marked dirty
       ↓
React re-renders NodeRenderer
useRegistry() registers 3D object
       ↓
System detects dirty node (useFrame)
Updates geometry via sceneRegistry
Clears dirty flag

# Install dependencies
bun install

# Run development server (builds packages + starts editor with watch mode)
bun dev

# This will:
# 1. Build @pascal-app/core and @pascal-app/viewer
# 2. Start watching both packages for changes
# 3. Start the Next.js editor dev server
# Open http://localhost:3002

# Build all packages
turbo build

# Build specific package
turbo build --filter=@pascal-app/core

# Build packages
turbo build --filter=@pascal-app/core --filter=@pascal-app/viewer

# Publish to npm
npm publish --workspace=@pascal-app/core --access public
npm publish --workspace=@pascal-app/viewer --access public