@pascal-app/editor 1.0.0-beta.4 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pascal Group Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bunfig.toml

@@ -0,0 +1,4 @@
+preload = ["../../scripts/bun-preload-three.ts"]
+
+[test]
+preload = ["../../scripts/bun-preload-three.ts"]

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@pascal-app/editor",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0",
   "description": "Pascal building editor component",
+  "license": "MIT",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx",
     "./catalog": "./src/components/ui/item-catalog/catalog-items.tsx"
   },
   "scripts": {
-    "check-types": "tsgo --noEmit"
+    "check-types": "tsgo --noEmit",
+    "test": "bun test src"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^1.0.0-beta.4",
-    "@pascal-app/viewer": "^1.0.0-beta.4",
+    "@pascal-app/core": "^1.0.0",
+    "@pascal-app/viewer": "^1.0.0",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "three": "^0.185"
+    "three": "^0.186"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -44,21 +46,25 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "fflate": "^0.8.3",
     "howler": "^2.2.4",
     "lucide-react": "^1.7.0",
+    "manifold-3d": "3.5.1",
     "mitt": "^3.0.1",
     "motion": "^12.34.3",
     "nanoid": "^5.1.6",
     "pdfkit": "^0.19.1",
     "tailwind-merge": "^3.5.0",
+    "three-bvh-csg": "^0.0.18",
     "three-mesh-bvh": "~0.9.8",
-    "zod": "^4.3.6",
+    "zod": ">=4.5.4 <4.6",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "^1.0.0-beta.4",
-    "@pascal-app/viewer": "^1.0.0-beta.4",
+    "@pascal-app/core": "^1.0.0",
+    "@pascal-app/viewer": "^1.0.0",
     "@pascal/typescript-config": "*",
+    "@react-three/test-renderer": "^9.1.0",
     "@types/blob-stream": "^0.1.33",
     "@types/bun": "^1.3.0",
     "@types/howler": "^2.2.12",
@@ -66,6 +72,7 @@
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "@types/three": "^0.184.0",
+    "fast-xml-parser": "^5.4.2",
     "typescript": "6.0.3"
   }
 }

package/scripts/generate-print-golden-house.ts

@@ -0,0 +1,89 @@
+import { mkdir, writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { prepareSceneForExport } from '../src/lib/glb-export'
+import { exportSceneLevelsForPrint } from '../src/lib/level-print-export'
+import { filterPreparedSceneForPrintContent } from '../src/lib/print-content-scope'
+import { createPrintGoldenHouseFixture } from '../src/lib/print-golden-house.test-fixture'
+import { compileManifoldMeshData } from '../src/lib/print-shell-compiler-manifold-core'
+import { compileSemanticPrintShellWithManifold } from '../src/lib/print-shell-compiler-manifold-worker'
+
+const outputArgument = process.argv[2]
+if (!outputArgument) {
+  throw new Error(
+    'Usage: bun packages/editor/scripts/generate-print-golden-house.ts <output-directory>',
+  )
+}
+
+const outputDirectory = resolve(outputArgument)
+const fixture = createPrintGoldenHouseFixture()
+
+async function sha256(data: Uint8Array): Promise<string> {
+  const digest = await crypto.subtle.digest('SHA-256', data)
+  return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0')).join('')
+}
+
+try {
+  const prepared = prepareSceneForExport(fixture.root, fixture.nodes, { onlyVisible: true })
+  const structure = filterPreparedSceneForPrintContent(prepared.scene, fixture.nodes, 'structure')
+  const compileShell = (source: Parameters<typeof exportSceneLevelsForPrint>[0]) =>
+    compileSemanticPrintShellWithManifold(source, fixture.nodes, {
+      runner: compileManifoldMeshData,
+    })
+  const common = {
+    scale: 100,
+    plinth: { marginMm: 2, thicknessMm: 3 },
+    compileShells: true,
+    compileShell,
+  }
+  const threeMf = await exportSceneLevelsForPrint(structure, fixture.nodes, {
+    ...common,
+    format: '3mf',
+  })
+  const stl = await exportSceneLevelsForPrint(structure, fixture.nodes, {
+    ...common,
+    format: 'stl',
+  })
+  if (threeMf.report.status === 'blocked' || stl.report.status === 'blocked') {
+    throw new Error('The golden house failed print preflight and was not written.')
+  }
+
+  await mkdir(outputDirectory, { recursive: true })
+  const files = [
+    { name: 'pascal-golden-house-levels.3mf', data: threeMf.data },
+    { name: 'pascal-golden-house-levels-stl.zip', data: stl.data },
+  ]
+  for (const file of files) await writeFile(resolve(outputDirectory, file.name), file.data)
+
+  const manifest = {
+    kind: 'pascal-print-golden-house',
+    version: 1,
+    scale: 100,
+    units: 'millimeter',
+    files: await Promise.all(
+      files.map(async (file) => ({
+        name: file.name,
+        bytes: file.data.byteLength,
+        sha256: await sha256(file.data),
+      })),
+    ),
+    parts: threeMf.report.parts.map((part) => ({
+      kind: part.kind,
+      label: part.label,
+      sourceBaseMeters: part.sourceBaseMeters,
+      bounds: part.report.bounds,
+      triangles: part.report.triangleCount,
+      connectedComponentCount: part.report.connectedComponentCount,
+      solidComponentCount: part.report.solidComponentCount,
+      invertedWinding: part.report.invertedWinding,
+      volumeMm3: part.report.volumeMm3,
+      minimumFeatureThicknessMm: part.report.minimumFeatureThicknessMm,
+    })),
+  }
+  await writeFile(
+    resolve(outputDirectory, 'manifest.json'),
+    `${JSON.stringify(manifest, null, 2)}\n`,
+  )
+  process.stdout.write(`${JSON.stringify({ outputDirectory, ...manifest }, null, 2)}\n`)
+} finally {
+  fixture.dispose()
+}

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

@@ -66,6 +66,7 @@ export const Alignment3DGuideLayer = memo(function Alignment3DGuideLayer() {
   const guides = useAlignmentGuides((s) => s.guides)
   const levelId = useViewer((s) => s.selection.levelId)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   const groupRef = useRef<Group>(null)
 
   // Guides carry only XZ in WORLD coords; their Y has to track the active
@@ -85,16 +86,24 @@ export const Alignment3DGuideLayer = memo(function Alignment3DGuideLayer() {
   return (
     <group ref={groupRef}>
       {guides.map((guide, i) => (
-        <GuideLine guide={guide} key={i} unit={unit} />
+        <GuideLine guide={guide} key={i} metricNotation={metricNotation} unit={unit} />
       ))}
     </group>
   )
 })
 
-function GuideLine({ guide, unit }: { guide: AlignmentGuide; unit: 'metric' | 'imperial' }) {
+function GuideLine({
+  guide,
+  metricNotation,
+  unit,
+}: {
+  guide: AlignmentGuide
+  metricNotation: 'meters' | 'millimeters'
+  unit: 'metric' | 'imperial'
+}) {
   const { x: fx, z: fz } = guide.from
   const { x: tx, z: tz } = guide.to
-  const distLabel = formatMeasurement(guide.distance, unit)
+  const distLabel = formatMeasurement(guide.distance, unit, metricNotation)
 
   // Lay out the dash centres along the from→to direction. The ribbon
   // stretches the dash period up if the line is long enough to exceed the

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

@@ -31,6 +31,7 @@ export function BakeExporter({
         if (!sceneGroup) throw new Error('scene-renderer group not found')
         const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes, {
           textures: 'reference',
+          purpose: 'viewer',
         })
         onComplete(buffer)
       } catch (err) {

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

@@ -46,4 +46,45 @@ describe('camera dragging lifecycle', () => {
     expect(scheduled).toBeNull()
     expect(dragging).toEqual([true, true])
   })
+
+  test('pause ends damping without rest, cancels wheel fallback and re-arms on resume', () => {
+    let dragging = false
+    let scheduled: (() => void) | null = null
+    const lifecycle = createCameraDraggingLifecycle({
+      setDragging: (value) => {
+        dragging = value
+      },
+      schedule: (callback) => {
+        scheduled = callback
+        return 1 as unknown as ReturnType<typeof globalThis.setTimeout>
+      },
+      cancel: () => {
+        scheduled = null
+      },
+    })
+
+    lifecycle.begin()
+    expect(dragging).toBe(true)
+    lifecycle.setPaused(true)
+    expect(dragging).toBe(false)
+    lifecycle.begin()
+    lifecycle.scheduleEnd()
+    expect(dragging).toBe(false)
+    expect(scheduled).toBeNull()
+
+    lifecycle.setPaused(false)
+    expect(dragging).toBe(false)
+    lifecycle.begin()
+    lifecycle.scheduleEnd()
+    expect(dragging).toBe(true)
+    expect(scheduled).not.toBeNull()
+    lifecycle.setPaused(true)
+    expect(dragging).toBe(false)
+    expect(scheduled).toBeNull()
+    lifecycle.setPaused(false)
+    lifecycle.begin()
+    expect(dragging).toBe(true)
+    lifecycle.end()
+    expect(dragging).toBe(false)
+  })
 })

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

@@ -11,6 +11,7 @@ export function createCameraDraggingLifecycle({
   schedule?: (callback: () => void, delay: number) => TimerHandle
   cancel?: (timer: TimerHandle) => void
 }) {
+  let paused = false
   let releaseTimer: TimerHandle | null = null
 
   const clearScheduledEnd = () => {
@@ -21,7 +22,7 @@ export function createCameraDraggingLifecycle({
 
   const begin = () => {
     clearScheduledEnd()
-    setDragging(true)
+    if (!paused) setDragging(true)
   }
 
   const end = () => {
@@ -31,11 +32,18 @@ export function createCameraDraggingLifecycle({
 
   const scheduleEnd = () => {
     clearScheduledEnd()
+    if (paused) return
     releaseTimer = schedule(() => {
       releaseTimer = null
       setDragging(false)
     }, fallbackMs)
   }
 
-  return { begin, end, scheduleEnd }
+  const setPaused = (value: boolean) => {
+    paused = value
+    // Paused controls cannot advance damping to rest/sleep.
+    if (paused) end()
+  }
+
+  return { begin, end, scheduleEnd, setPaused }
 }

package/src/components/editor/capture-camera-rig.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import type { PerspectiveCamera } from 'three'
+import useEditor from '../../store/use-editor'
+
+/**
+ * Owns the main camera's field of view while the snapshot capture overlay is
+ * open, and is mounted only for that window. `ThumbnailGenerator` copies the
+ * main camera's fov on every shot, so the value written here is what lands in
+ * the saved image.
+ *
+ * The overlay's slider cannot reach the camera itself (it renders outside the
+ * canvas), so the store carries the value and this rig applies it.
+ */
+export const CaptureCameraRig = () => {
+  const camera = useThree((state) => state.camera)
+  const captureFov = useEditor((state) => state.captureFov)
+  const appliedFovRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    const perspectiveCamera = camera as PerspectiveCamera
+    if (!perspectiveCamera.isPerspectiveCamera) {
+      // Orthographic captures have no fov to drive — the overlay hides the
+      // control while the store is disarmed.
+      useEditor.getState().armCaptureFov(null)
+      return
+    }
+
+    const entryFov = perspectiveCamera.fov
+    useEditor.getState().armCaptureFov(entryFov)
+
+    return () => {
+      useEditor.getState().armCaptureFov(null)
+      // Walkthrough restores its own pre-entry fov when it unmounts, which can
+      // happen in the same commit as this rig (leaving capture also leaves
+      // walk/drone). Only put the entry fov back if the camera still holds our
+      // last write — otherwise someone else has already re-owned it.
+      if (appliedFovRef.current !== null && perspectiveCamera.fov === appliedFovRef.current) {
+        perspectiveCamera.fov = entryFov
+        perspectiveCamera.updateProjectionMatrix()
+      }
+      appliedFovRef.current = null
+    }
+  }, [camera])
+
+  useEffect(() => {
+    const perspectiveCamera = camera as PerspectiveCamera
+    if (!perspectiveCamera.isPerspectiveCamera || captureFov === null) return
+
+    appliedFovRef.current = captureFov
+    if (perspectiveCamera.fov === captureFov) return
+    perspectiveCamera.fov = captureFov
+    perspectiveCamera.updateProjectionMatrix()
+  }, [camera, captureFov])
+
+  return null
+}

package/src/components/editor/custom-camera-controls.tsx

@@ -9,10 +9,10 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
-import { GRID_LAYER, useViewer, ZONE_LAYER } from '@pascal-app/viewer'
+import { GRID_LAYER, getLevelPresentationY, useViewer, ZONE_LAYER } from '@pascal-app/viewer'
 import { CameraControls, CameraControlsImpl } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import {
   Box3,
   type Camera,
@@ -347,7 +347,7 @@ function useFirstPersonCameraPoseRestore(
   return useCallback(() => isRestoring.current, [])
 }
 
-export const CustomCameraControls = () => {
+export const CustomCameraControls = ({ paused = false }: { paused?: boolean }) => {
   const controls = useRef<CameraControlsImpl | null>(null)
   const pendingAppliedPose = useRef<CameraPoseApplicationPlan | null>(null)
   const activePoseInterpolation = useRef<{
@@ -366,6 +366,8 @@ export const CustomCameraControls = () => {
   const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
   const allowUndergroundCamera = useEditor((s) => s.allowUndergroundCamera)
   const selection = useViewer((s) => s.selection)
+  const levelMode = useViewer((s) => s.levelMode)
+  const renderPaused = useViewer((state) => state.renderPaused)
   const cameraMode = useViewer((state) => state.cameraMode)
   const isRestoringFirstPersonPose = useFirstPersonCameraPoseRestore(
     controls,
@@ -528,21 +530,24 @@ export const CustomCameraControls = () => {
 
   useEffect(() => {
     if (isPreviewMode || isFirstPersonMode || isRestoringFirstPersonPose()) return
-    let targetY = 0
-    if (currentLevelId) {
-      const levelMesh = sceneRegistry.nodes.get(currentLevelId)
-      if (levelMesh) {
-        targetY = levelMesh.position.y
-      }
-    }
+    // Analytic destination, not `sceneRegistry` mesh position: a level created
+    // this frame still sits at y=0 (LevelSystem lerps it later), and a mode
+    // switch leaves every level mid-lerp — the camera must pan to where the
+    // level will settle, in the CURRENT presentation mode.
+    const targetY = currentLevelId
+      ? getLevelPresentationY(currentLevelId, useScene.getState().nodes, levelMode)
+      : 0
     if (!controls.current) return
     if (firstLoad.current) {
       firstLoad.current = false
       controls.current.setLookAt(20, 20, 20, 0, 0, 0, true)
     }
     controls.current.getTarget(currentTarget)
+    // Idempotence guard: skip when already there — also swallows the thumbnail
+    // generator's synchronous stacked→restore levelMode round-trip.
+    if (Math.abs(currentTarget.y - targetY) < 1e-3) return
     controls.current.moveTo(currentTarget.x, targetY, currentTarget.z, true)
-  }, [currentLevelId, isPreviewMode, isFirstPersonMode, isRestoringFirstPersonPose])
+  }, [currentLevelId, levelMode, isPreviewMode, isFirstPersonMode, isRestoringFirstPersonPose])
 
   useEffect(() => {
     if (isFirstPersonMode || !controls.current) return
@@ -1274,6 +1279,10 @@ export const CustomCameraControls = () => {
     cameraDraggingLifecycle.end()
   }, [cameraDraggingLifecycle])
 
+  useLayoutEffect(() => {
+    cameraDraggingLifecycle.setPaused(paused || renderPaused)
+  }, [cameraDraggingLifecycle, paused, renderPaused])
+
   const onControlEnd = useCallback(() => {
     // A mapped-button tap with zero camera movement never wakes the
     // controls, so no rest/sleep follows — clear the dragging flag on

package/src/components/editor/editor-layout-mobile.tsx

@@ -83,18 +83,18 @@ export function EditorLayoutMobile({
   //   desktop "Furnish" action which itself opens the Items panel).
   // - Leaving Items while still furnishing exits the build mode.
   useEffect(() => {
-    const { phase, mode, setMode, setPhase } = useEditor.getState()
+    const { armToolMode, phase, mode, setPhase } = useEditor.getState()
     if (activePanel === 'ai' && mode === 'build') {
-      setMode('select')
+      armToolMode({ mode: 'select' })
       return
     }
     if (activePanel === 'items') {
       if (phase !== 'furnish') setPhase('furnish')
-      if (mode !== 'build') setMode('build')
+      if (mode !== 'build') armToolMode({ mode: 'build', tool: 'item' })
       return
     }
     if (phase === 'furnish' && mode === 'build') {
-      setMode('select')
+      armToolMode({ mode: 'select' })
     }
   }, [activePanel])
 
@@ -160,9 +160,9 @@ export function EditorLayoutMobile({
       if (current > expandedThreshold) {
         sheetRef.current?.snapTo(SHEET_HANDLE_PX)
         // Closing the sheet disarms any build tool back to select
-        const { mode, setMode } = useEditor.getState()
+        const { armToolMode, mode } = useEditor.getState()
         if (mode === 'build') {
-          setMode('select')
+          armToolMode({ mode: 'select' })
         }
       } else {
         sheetRef.current?.snapTo(defaultPx)

package/src/components/editor/editor-layout-v2.tsx

@@ -77,6 +77,11 @@ function LeftColumn({
   // up to the minimum so the panel always returns to a usable size.
   const handleRailClick = useCallback(
     (id: string) => {
+      // noPanel tabs drive the stage, not the panel — leave collapse state alone.
+      if (tabs.find((t) => t.id === id)?.noPanel) {
+        setActivePanel(id)
+        return
+      }
       if (isCollapsed) {
         setIsCollapsed(false)
         if (width < SIDEBAR_MIN_WIDTH) setWidth(SIDEBAR_MIN_WIDTH)
@@ -89,7 +94,7 @@ function LeftColumn({
       }
       setActivePanel(id)
     },
-    [isCollapsed, width, activePanel, setIsCollapsed, setWidth, setActivePanel],
+    [tabs, isCollapsed, width, activePanel, setIsCollapsed, setWidth, setActivePanel],
   )
 
   useEffect(() => {
@@ -126,7 +131,7 @@ function LeftColumn({
         onIconClick={handleRailClick}
         tabs={tabs}
       />
-      {!isCollapsed && (
+      {!isCollapsed && !tabs.find((t) => t.id === activePanel)?.noPanel && (
         <div
           className="relative flex h-full flex-col"
           style={{
@@ -183,8 +188,15 @@ function RightColumn({
           <div className="pointer-events-auto flex items-center gap-2">{toolbarRight}</div>
         </div>
       )}
-      {/* Canvas area */}
-      <div className="relative flex-1 overflow-hidden">{children}</div>
+      {/* Canvas area. `isolate` matters: drei's `<Html>` computes a z-index
+          from camera distance and defaults to a range topping out at
+          16,777,271, and without a stacking context here those values compete
+          directly with the viewer toolbar (z-20), the stage overlay (z-10) and
+          the overlay band (z-30) — so an in-scene tool badge painted over all
+          three. Isolating pins every in-scene HTML layer inside the canvas,
+          where it belongs, and leaves their order relative to each other
+          untouched. */}
+      <div className="relative isolate flex-1 overflow-hidden">{children}</div>
       {/* Stage overlay — replaces the canvas visually (e.g. studio gallery)
           while keeping it mounted. Sits below the viewer toolbar (z-20) so
           the stage switch stays reachable. */}
@@ -239,7 +251,7 @@ export function EditorLayoutV2({
         overlays={overlays}
         renderTabContent={renderTabContent}
         sidebarOverlay={sidebarOverlay}
-        sidebarTabs={sidebarTabs}
+        sidebarTabs={sidebarTabs.filter((t) => !t.noPanel)}
         viewerContent={viewerContent}
         viewerToolbarLeft={viewerToolbarLeft}
         viewerToolbarRight={viewerToolbarRight}

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

@@ -44,6 +44,7 @@ type Vec3 = [number, number, number]
 export const Elevation3DGuideLayer = memo(function Elevation3DGuideLayer() {
   const guide = useElevationGuides((state) => state.guide)
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
   const groupRef = useRef<Group>(null)
 
   useFrame(() => {
@@ -76,8 +77,8 @@ export const Elevation3DGuideLayer = memo(function Elevation3DGuideLayer() {
   ]
   const elevationText =
     Math.abs(guide.elevation) < 1e-6
-      ? formatMeasurement(0, unit)
-      : `${guide.elevation < 0 ? '-' : '+'}${formatMeasurement(Math.abs(guide.elevation), unit)}`
+      ? formatMeasurement(0, unit, metricNotation)
+      : `${guide.elevation < 0 ? '-' : '+'}${formatMeasurement(Math.abs(guide.elevation), unit, metricNotation)}`
 
   return (
     <group ref={groupRef}>