@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/editor/handles/use-handle-drag.ts

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type Cursor,
+  cascadeDirty,
   createSceneApi,
   type HandleDragModifiers,
   runAsSingleSceneHistoryStep,
@@ -16,6 +17,8 @@ import { useEffect, useRef } from 'react'
 import { type Camera, type Object3D, type Plane, type Ray, Vector2, type Vector3 } from 'three'
 import { isHistoryShortcut } from '../../../lib/history'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { intersectSpatialDragPlane } from '../../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../../lib/spatial-pointer-input'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
 import { commitHandleDragPatch } from './handle-drag-history'
 
@@ -57,6 +60,7 @@ type HandleDragSession = {
   commit?: (patch: Partial<AnyNode>) => void
   markDirty?: boolean
   onBegin?: () => void
+  onCancel?: () => void
   onEnd?: () => void
   overrideId?: AnyNodeId
 }
@@ -106,6 +110,7 @@ function suppressInputDraggingUntilPointerRelease(pointerId: number) {
   window.addEventListener('pointerup', restore)
   window.addEventListener('pointercancel', restore)
   window.addEventListener('blur', onBlur)
+  return () => restore()
 }
 
 export function useHandleDrag(args: UseHandleDragArgs) {
@@ -120,9 +125,17 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
 
     if (args.kind === 'tap') {
-      suppressInputDraggingUntilPointerRelease(event.nativeEvent.pointerId)
+      const restoreInputDragging = suppressInputDraggingUntilPointerRelease(event.pointerId)
+      if (spatialPointerId) {
+        spatialPointerInput.capture(spatialPointerId, {
+          onMove: () => undefined,
+          onRelease: restoreInputDragging,
+          onCancel: restoreInputDragging,
+        })
+      }
       swallowNextClick()
       sfxEmitter.emit('sfx:item-pick')
       document.body.style.cursor = ''
@@ -132,6 +145,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
 
     const { cursor, dragControls, handleIndex, node, rideObject, setIsDragging } = args
     rideObject.updateMatrixWorld()
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
 
     const ndc = new Vector2()
     const setPointerRay = (clientX: number, clientY: number) => {
@@ -143,10 +157,12 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       raycaster.setFromCamera(ndc, camera)
     }
     const getPointerRay: GetPointerRay = (clientX, clientY, target) => {
+      if (spatialRay) return target.copy(spatialRay)
       setPointerRay(clientX, clientY)
       return target.copy(raycaster.ray)
     }
     const intersectPlane: IntersectPlane = (clientX, clientY, plane, target) => {
+      if (spatialRay) return intersectSpatialDragPlane(spatialRay, plane, target)
       setPointerRay(clientX, clientY)
       return raycaster.ray.intersectPlane(plane, target)
     }
@@ -179,7 +195,11 @@ export function useHandleDrag(args: UseHandleDragArgs) {
 
     let lastPatch: Partial<AnyNode> | null = null
     let historyPaused = true
+    let releaseSpatialCapture: (() => void) | null = null
     let altKey = event.nativeEvent.altKey
+    let shiftKey = event.nativeEvent.shiftKey
+    let pendingMoveEvent: PointerEvent | null = null
+    let moveFrame = 0
 
     const resumeHistory = () => {
       if (!historyPaused) return
@@ -187,10 +207,10 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       useScene.temporal.getState().resume()
     }
 
-    const onMove = (moveEvent: PointerEvent) => {
+    const processMove = (moveEvent: PointerEvent) => {
       const patch = session.move({
         event: moveEvent,
-        modifiers: { altKey },
+        modifiers: { altKey, shiftKey },
         getPointerRay,
         intersectPlane,
       })
@@ -198,16 +218,40 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       lastPatch = patch
       useLiveNodeOverrides.getState().set(overrideId, patch as Record<string, unknown>)
       if (markDirty) {
-        useScene.getState().markDirty(overrideId)
+        for (const id of cascadeDirty(overrideId, { scene: createSceneApi(useScene) }))
+          useScene.getState().markDirty(id)
+      }
+    }
+
+    // Coalesce high-frequency pointer events so live React/store updates happen
+    // at most once per animation frame while retaining the newest position.
+    const flushMove = () => {
+      moveFrame = 0
+      const moveEvent = pendingMoveEvent
+      pendingMoveEvent = null
+      if (moveEvent) processMove(moveEvent)
+    }
+    const onMove = (moveEvent: PointerEvent) => {
+      pendingMoveEvent = moveEvent
+      if (moveFrame !== 0) return
+      if (typeof window.requestAnimationFrame === 'function') {
+        moveFrame = window.requestAnimationFrame(flushMove)
+      } else {
+        flushMove()
       }
     }
 
     const cleanup = () => {
+      if (moveFrame !== 0) window.cancelAnimationFrame?.(moveFrame)
+      moveFrame = 0
+      pendingMoveEvent = null
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
       window.removeEventListener('keyup', onKeyUp, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
       if (document.body.style.cursor === cursor) {
         document.body.style.cursor = ''
       }
@@ -222,11 +266,14 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     const clearOverride = () => {
       useLiveNodeOverrides.getState().clear(overrideId)
       if (markDirty) {
-        useScene.getState().markDirty(overrideId)
+        for (const id of cascadeDirty(overrideId, { scene: createSceneApi(useScene) }))
+          useScene.getState().markDirty(id)
       }
     }
 
     const onUp = () => {
+      if (moveFrame !== 0) window.cancelAnimationFrame?.(moveFrame)
+      flushMove()
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
       if (lastPatch) {
@@ -242,6 +289,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
 
     const onCancel = () => {
+      session.onCancel?.()
       clearOverride()
       cleanup()
     }
@@ -253,6 +301,10 @@ export function useHandleDrag(args: UseHandleDragArgs) {
         altKey = true
         return
       }
+      if (e.key === 'Shift') {
+        shiftKey = true
+        return
+      }
       if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
       e.preventDefault()
       e.stopPropagation()
@@ -261,12 +313,32 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
     const onKeyUp = (e: KeyboardEvent) => {
       if (e.key === 'Alt') altKey = false
+      if (e.key === 'Shift') shiftKey = false
     }
 
     dragCleanupRef.current = onCancel
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          processMove(
+            new PointerEvent('pointermove', {
+              button: 0,
+              buttons: 1,
+              altKey,
+              pointerId: event.pointerId,
+              pointerType: 'xr',
+            }),
+          )
+        },
+        onRelease: onUp,
+        onCancel,
+      })
+    } else {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+    }
     window.addEventListener('keydown', onKeyDown, true)
     window.addEventListener('keyup', onKeyUp, true)
   }

package/src/components/editor/index.tsx

@@ -19,6 +19,7 @@ import {
   SceneEnvironment,
   useViewer,
   Viewer,
+  type ViewerImmersiveSession,
   ViewerPresentations,
 } from '@pascal-app/viewer'
 import {
@@ -49,6 +50,7 @@ import {
   writePersistedSelection,
 } from '../../lib/scene'
 import { disposeSFXBus, initSFXBus } from '../../lib/sfx-bus'
+import { useUnitFocusRules } from '../../lib/units'
 import { type CameraHintAction, useCameraHintFocus } from '../../store/use-camera-hint-focus'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
@@ -201,6 +203,7 @@ export interface EditorProps {
   projectId?: string | null
 
   // Persistence — defaults to localStorage when omitted
+  guardAgainstSceneWipe?: boolean
   onLoad?: () => Promise<SceneGraph | null>
   onSave?: (scene: SceneGraph, options?: { keepalive?: boolean }) => Promise<void>
   /**
@@ -233,6 +236,9 @@ export interface EditorProps {
    */
   disablePostFx?: boolean
 
+  /** Host-provided immersive XR runtime for the main 3D canvas. */
+  immersive?: ViewerImmersiveSession
+
   // Version preview overlays (rendered by host app)
   sidebarOverlay?: ReactNode
   viewerBanner?: ReactNode
@@ -782,6 +788,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isVersionPreviewMode,
   isLoading,
   isFirstPersonMode,
+  isXRMode,
   isStudioMode,
   onThumbnailCapture,
   viewerSceneSlot,
@@ -790,6 +797,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isVersionPreviewMode: boolean
   isLoading: boolean
   isFirstPersonMode: boolean
+  isXRMode: boolean
   isStudioMode: boolean
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
   viewerSceneSlot?: ReactNode
@@ -806,7 +814,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
     <>
       <SceneEnvironment />
       {!(isFirstPersonMode || isStudioMode || isCaptureMode) && <SelectionManager />}
-      {!noEditing && <BoxSelectTool />}
+      {!(noEditing || isXRMode) && <BoxSelectTool />}
       {!noEditing && <NodeArrowHandles />}
       {!noEditing && <GroupRotateHandle />}
       {!noEditing && <GroupSelectionBox3D />}
@@ -814,10 +822,10 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!noEditing && <SlabHoleHighlights />}
       {!noEditing && <WallMoveSideHandles />}
       {!noEditing && <FenceTangentLines3D />}
-      {!noEditing && <FloatingActionMenu />}
-      {!noEditing && <GroupFloatingActionMenu />}
-      {!noEditing && <FloatingBuildingActionMenu />}
-      {!isFirstPersonMode && <WallMeasurementLabel />}
+      {!(noEditing || isXRMode) && <FloatingActionMenu />}
+      {!(noEditing || isXRMode) && <GroupFloatingActionMenu />}
+      {!(noEditing || isXRMode) && <FloatingBuildingActionMenu />}
+      {!(isFirstPersonMode || isXRMode) && <WallMeasurementLabel />}
       <ExportManager />
       {isFirstPersonMode ? <ViewerZoneSystem /> : <ZoneSystem />}
       <CeilingSystem />
@@ -828,10 +836,10 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isLoading || isFirstPersonMode) && <SnapAwareGrid />}
       {!(isLoading || noEditing) && <ToolManager />}
       {isFirstPersonMode && <FirstPersonControls />}
-      {isCaptureMode && <CaptureCameraRig />}
-      <CustomCameraControls />
-      <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
-      {!isFirstPersonMode && <SiteEdgeLabels />}
+      {isCaptureMode && !isXRMode && <CaptureCameraRig />}
+      {!isXRMode && <CustomCameraControls />}
+      {!isXRMode && <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />}
+      {!(isFirstPersonMode || isXRMode) && <SiteEdgeLabels />}
       <InteractiveSystem />
       {presentationsReady ? <ViewerPresentations /> : null}
       {!noEditing && viewerSceneSlot}
@@ -1021,6 +1029,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   viewerSceneSlot,
   floorplanSceneSlot,
   disablePostFx = false,
+  immersive,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
@@ -1035,12 +1044,17 @@ const ViewerCanvas = memo(function ViewerCanvas({
   viewerSceneSlot?: ReactNode
   floorplanSceneSlot?: ReactNode
   disablePostFx?: boolean
+  immersive?: ViewerImmersiveSession
 }) {
   const viewMode = useEditor((s) => s.viewMode)
   const floorplanPaneRatio = useEditor((s) => s.floorplanPaneRatio)
   const setFloorplanPaneRatio = useEditor((s) => s.setFloorplanPaneRatio)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  useUnitFocusRules()
+  const presetIsolation = useEditor((s) =>
+    s.captureMode.mode === 'preset' ? s.captureMode.isolated : null,
+  )
 
   const [isCameraControlsHintVisible, setIsCameraControlsHintVisible] = useState<boolean | null>(
     null,
@@ -1151,10 +1165,15 @@ const ViewerCanvas = memo(function ViewerCanvas({
             defaultRender={EDITOR_DEFAULT_RENDER}
             disablePostFx={disablePostFx}
             hoverStyles={EDITOR_HOVER_STYLES}
+            isolate={presetIsolation}
+            // Preset captures isolate one subtree and keep the exterior transparent.
+            // Other modes retain the viewer's configured background policy.
+            transparent={presetIsolation === null ? undefined : true}
             onSceneReadyChange={onSceneReadyChange}
             renderContext="editor"
             renderPaused={!show3d && !showLoader}
             sceneReadyKey={sceneReadyKey}
+            immersive={immersive}
             // Walk/drone framing during snapshot capture is camera-only: the
             // viewer's default selection manager would hover-highlight whatever
             // the cursor crosses, which orbit capture never does.
@@ -1163,6 +1182,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
             <ViewerSceneContent
               isFirstPersonMode={isFirstPersonMode}
               isLoading={showLoader}
+              isXRMode={immersive != null}
               isStudioMode={isStudioMode}
               isVersionPreviewMode={isVersionPreviewMode}
               onThumbnailCapture={onThumbnailCapture}
@@ -1232,6 +1252,7 @@ function PreviewStage({
 }
 
 function EditorContent({
+  guardAgainstSceneWipe,
   layoutVersion = 'v1',
   appMenuButton,
   sidebarTop,
@@ -1256,6 +1277,7 @@ function EditorContent({
   onLoaderChange,
   onThumbnailCapture,
   disablePostFx = false,
+  immersive,
   sidebarOverlay,
   viewerBanner,
   settingsPanelProps,
@@ -1291,6 +1313,7 @@ function EditorContent({
   useKeyboard({ isVersionPreviewMode, disabled: isFirstPersonMode || isStudioMode })
 
   const { isLoadingSceneRef, saveNow } = useAutoSave({
+    guardAgainstSceneWipe,
     onSave,
     onDirty,
     onSaveStatusChange,
@@ -1347,10 +1370,9 @@ function EditorContent({
 
   // Load on mount, project switches, and explicit retry attempts.
   useEffect(() => {
-    void sceneLoadAttempt
     let cancelled = false
 
-    async function load() {
+    async function load(attempt: number) {
       isLoadingSceneRef.current = true
       setSceneLoadError(null)
       setHasLoadedInitialScene(false)
@@ -1364,7 +1386,7 @@ function EditorContent({
       let failed = false
       try {
         const sceneGraph = onLoad ? await onLoad() : loadSceneFromLocalStorage()
-        if (!cancelled) {
+        if (!cancelled && attempt === sceneLoadAttempt) {
           applySceneGraphToEditor(sceneGraph)
           setIsViewerSceneReady(false)
           setSceneReadyKey((key) => key + 1)
@@ -1390,7 +1412,7 @@ function EditorContent({
       }
     }
 
-    load()
+    load(sceneLoadAttempt)
 
     return () => {
       cancelled = true
@@ -1534,6 +1556,7 @@ function EditorContent({
       showLoader={showLoader}
       viewerSceneSlot={viewerSceneSlot}
       floorplanSceneSlot={floorplanSceneSlot}
+      immersive={immersive}
     />
   )
 

package/src/components/editor/node-action-menu.tsx

@@ -3,6 +3,7 @@
 import { Icon } from '@iconify/react'
 import { Copy, Group, Move, PencilRuler, Search, Spline, Trash2, Ungroup } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
+import { RegistryActionContributions } from './registry-action-contributions'
 
 type NodeActionMenuProps = {
   onFind?: MouseEventHandler<HTMLButtonElement>
@@ -111,6 +112,7 @@ export function NodeActionMenu({
           <Spline className="h-4 w-4" />
         </button>
       )}
+      <RegistryActionContributions />
       {onDuplicate && (
         <button
           aria-label="Duplicate"