@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "0.9.1",
+  "version": "1.0.0-beta.1",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -8,17 +8,17 @@
     "./catalog": "./src/components/ui/item-catalog/catalog-items.tsx"
   },
   "scripts": {
-    "check-types": "tsc --noEmit"
+    "check-types": "tsgo --noEmit"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^0.9.1",
-    "@pascal-app/viewer": "^0.9.1",
+    "@pascal-app/core": "^1.0.0-beta.1",
+    "@pascal-app/viewer": "^1.0.0-beta.1",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "three": "^0.184"
+    "three": "^0.185"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -26,6 +26,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@iconify/react": "^6.0.2",
     "@number-flow/react": "^0.6.0",
+    "@pascal-app/lingo": "^0.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -39,6 +40,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@visual-json/react": "^0.4.0",
+    "blob-stream": "^0.1.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -47,17 +49,20 @@
     "mitt": "^3.0.1",
     "motion": "^12.34.3",
     "nanoid": "^5.1.6",
+    "pdfkit": "^0.19.1",
     "tailwind-merge": "^3.5.0",
+    "three-mesh-bvh": "~0.9.8",
     "zod": "^4.3.6",
-    "zustand": "^5.0.11",
-    "three-mesh-bvh": "~0.9.8"
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "^0.9.1",
-    "@pascal-app/viewer": "^0.9.1",
+    "@pascal-app/core": "^1.0.0-beta.1",
+    "@pascal-app/viewer": "^1.0.0-beta.1",
     "@pascal/typescript-config": "*",
+    "@types/blob-stream": "^0.1.33",
     "@types/bun": "^1.3.0",
     "@types/howler": "^2.2.12",
+    "@types/pdfkit": "^0.17.6",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "@types/three": "^0.184.0",

package/src/components/editor/alignment-3d-guide-layer.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { type AlignmentGuide, sceneRegistry } from '@pascal-app/core'
-import { useAlignmentGuides } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
@@ -9,6 +8,7 @@ import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, type Group, Vector3 } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
+import useAlignmentGuides from '../../store/use-alignment-guides'
 import { formatMeasurement } from './measurement-pill'
 
 /**
@@ -49,6 +49,14 @@ const guideMaterial = new MeshBasicNodeMaterial({
   toneMapped: false,
   transparent: true,
 })
+const DOT_COLOR = 0x22_c5_5e // green-500 — matches the wall-snap marker
+const dotMaterial = new MeshBasicNodeMaterial({
+  color: DOT_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+})
 const DASH_GEOMETRY = new BoxGeometry(1, 1, 1)
 const DOT_GEOMETRY = new CircleGeometry(1, 24)
 
@@ -150,7 +158,7 @@ function Dot({ position }: { position: Vec3 }) {
     <mesh
       geometry={DOT_GEOMETRY}
       layers={EDITOR_LAYER}
-      material={guideMaterial}
+      material={dotMaterial}
       position={position}
       renderOrder={1001}
       rotation={[-Math.PI / 2, 0, 0]}

package/src/components/editor/bake-exporter.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import { exportSceneToGlb, nextFrames } from '../../lib/glb-export'
+
+export function BakeExporter({
+  active,
+  onComplete,
+  onError,
+}: {
+  active: boolean
+  onComplete: (buffer: ArrayBuffer) => void
+  onError: (message: string) => void
+}) {
+  const scene = useThree((s) => s.scene)
+  const doneRef = useRef(false)
+  useEffect(() => {
+    if (!(active && !doneRef.current)) return
+    doneRef.current = true
+    const run = async () => {
+      try {
+        // Signal export so instanced kinds (trees/flowers/grass) swap their
+        // invisible proxy for real, exportable geometry, then wait for the
+        // commit before cloning the scene graph.
+        useViewer.getState().setExporting(true)
+        await nextFrames()
+        const sceneGroup = scene.getObjectByName('scene-renderer')
+        if (!sceneGroup) throw new Error('scene-renderer group not found')
+        const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes, {
+          textures: 'reference',
+        })
+        onComplete(buffer)
+      } catch (err) {
+        // The bake worker relays page console output into the job's error
+        // trail; the message alone rarely localises an exporter crash, so
+        // surface the full stack here.
+        console.error('[bake-exporter]', err instanceof Error ? (err.stack ?? err.message) : err)
+        onError(err instanceof Error ? err.message : String(err))
+      } finally {
+        useViewer.getState().setExporting(false)
+      }
+    }
+    void run()
+  }, [active, scene, onComplete, onError])
+  return null
+}

package/src/components/editor/bake-thumbnail.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import {
+  computeHeroFraming,
+  createSnapshotPipeline,
+  GRID_LAYER,
+  heroCameraPose,
+  temporarilyHideNodeTypes,
+  useViewer,
+} from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import { PerspectiveCamera } from 'three'
+import type { WebGPURenderer } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+export function BakeThumbnail({
+  active,
+  onComplete,
+  onError,
+}: {
+  active: boolean
+  onComplete: (blob: Blob, size: { w: number; h: number }) => void
+  onError: (message: string) => void
+}) {
+  const renderer = useThree((state) => state.gl)
+  const scene = useThree((state) => state.scene)
+  const doneRef = useRef(false)
+
+  useEffect(() => {
+    if (!(active && !doneRef.current)) return
+    doneRef.current = true
+
+    const run = async () => {
+      const restoreNodeVisibility = temporarilyHideNodeTypes(['scan', 'guide', 'spawn'])
+      let pipeline: Awaited<ReturnType<typeof createSnapshotPipeline>> = null
+
+      try {
+        const framing = computeHeroFraming()
+        if (!framing) {
+          onError('scene has no framable content')
+          return
+        }
+
+        const { width, height } = renderer.domElement
+        const aspect = width / height
+        const camera = new PerspectiveCamera(60, aspect, 0.1, 1000)
+        camera.layers.disable(EDITOR_LAYER)
+        camera.layers.disable(GRID_LAYER)
+        const pose = heroCameraPose({
+          boxes: framing.boxes,
+          aim: framing.aim,
+          azimuthRad: framing.azimuthRad,
+          aspect,
+        })
+        camera.position.set(pose.position[0], pose.position[1], pose.position[2])
+        camera.lookAt(pose.target[0], pose.target[1], pose.target[2])
+        camera.updateMatrixWorld()
+
+        pipeline = await createSnapshotPipeline({
+          renderer: renderer as unknown as WebGPURenderer,
+          scene,
+          camera,
+        })
+        if (!pipeline) {
+          onError('thumbnail pipeline failed to build')
+          return
+        }
+
+        pipeline.applyEnvironment({
+          theme: useViewer.getState().sceneTheme,
+          transparent: false,
+          grade: true,
+          edges: useViewer.getState().edges,
+          camera,
+        })
+        const { blob, outW, outH } = await pipeline.capture({ captureMode: 'standard' })
+        onComplete(blob, { w: outW, h: outH })
+      } catch (error) {
+        console.error(
+          '[bake-thumbnail]',
+          error instanceof Error ? (error.stack ?? error.message) : error,
+        )
+        onError(error instanceof Error ? error.message : String(error))
+      } finally {
+        pipeline?.dispose()
+        restoreNodeVisibility()
+      }
+    }
+
+    void run()
+  }, [active, onComplete, onError, renderer, scene])
+
+  return null
+}

package/src/components/editor/camera-dragging-lifecycle.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from 'bun:test'
+import { createCameraDraggingLifecycle } from './camera-dragging-lifecycle'
+
+describe('camera dragging lifecycle', () => {
+  test('releases wheel interactions even when camera controls never report rest', () => {
+    const dragging: boolean[] = []
+    let scheduled: (() => void) | null = null
+    const lifecycle = createCameraDraggingLifecycle({
+      setDragging: (value) => dragging.push(value),
+      schedule: (callback) => {
+        scheduled = callback
+        return 1 as unknown as ReturnType<typeof globalThis.setTimeout>
+      },
+      cancel: () => {
+        scheduled = null
+      },
+    })
+
+    lifecycle.begin()
+    lifecycle.scheduleEnd()
+    expect(dragging).toEqual([true])
+
+    const release = scheduled as (() => void) | null
+    release?.()
+    expect(dragging).toEqual([true, false])
+  })
+
+  test('cancels a pending wheel release when another interaction begins', () => {
+    const dragging: boolean[] = []
+    let scheduled: (() => void) | null = null
+    const lifecycle = createCameraDraggingLifecycle({
+      setDragging: (value) => dragging.push(value),
+      schedule: (callback) => {
+        scheduled = callback
+        return 1 as unknown as ReturnType<typeof globalThis.setTimeout>
+      },
+      cancel: () => {
+        scheduled = null
+      },
+    })
+
+    lifecycle.begin()
+    lifecycle.scheduleEnd()
+    lifecycle.begin()
+
+    expect(scheduled).toBeNull()
+    expect(dragging).toEqual([true, true])
+  })
+})

package/src/components/editor/camera-dragging-lifecycle.ts

@@ -0,0 +1,41 @@
+type TimerHandle = ReturnType<typeof globalThis.setTimeout>
+
+export function createCameraDraggingLifecycle({
+  setDragging,
+  fallbackMs = 500,
+  schedule = globalThis.setTimeout,
+  cancel = globalThis.clearTimeout,
+}: {
+  setDragging: (dragging: boolean) => void
+  fallbackMs?: number
+  schedule?: (callback: () => void, delay: number) => TimerHandle
+  cancel?: (timer: TimerHandle) => void
+}) {
+  let releaseTimer: TimerHandle | null = null
+
+  const clearScheduledEnd = () => {
+    if (releaseTimer === null) return
+    cancel(releaseTimer)
+    releaseTimer = null
+  }
+
+  const begin = () => {
+    clearScheduledEnd()
+    setDragging(true)
+  }
+
+  const end = () => {
+    clearScheduledEnd()
+    setDragging(false)
+  }
+
+  const scheduleEnd = () => {
+    clearScheduledEnd()
+    releaseTimer = schedule(() => {
+      releaseTimer = null
+      setDragging(false)
+    }, fallbackMs)
+  }
+
+  return { begin, end, scheduleEnd }
+}