@pascal-app/editor 0.9.2 → 1.0.0-beta.2

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

@@ -6,7 +6,6 @@ import {
   type CeilingNode,
   ColumnNode,
   createSceneApi,
-  DEFAULT_WALL_HEIGHT,
   DoorNode,
   ElevatorNode,
   emitter,
@@ -15,6 +14,7 @@ import {
   getActiveRoofHeight,
   getEffectiveNode,
   getWallCurveLength,
+  getWallEffectiveHeightForNodes,
   getWallThickness,
   ItemNode,
   isCurvedWall,
@@ -27,7 +27,6 @@ import {
   runAsSingleSceneHistoryStep,
   type SlabNode,
   SpawnNode,
-  StairNode,
   StairSegmentNode,
   sceneRegistry,
   summarizeSystemFor,
@@ -42,15 +41,20 @@ import { useFrame } from '@react-three/fiber'
 import { useCallback, useMemo, useRef } from 'react'
 import * as THREE from 'three'
 import { useShallow } from 'zustand/react/shallow'
+import { useReducedMotion } from '../../hooks/use-reduced-motion'
+import { resolveMoveActionNode } from '../../lib/direct-manipulation'
 import {
   createFreshPlacementSubtree,
   duplicatesAsFreshSubtree,
+  prepareFreshPlacementRootDuplicate,
 } from '../../lib/fresh-planar-placement'
 import { resolveOverlayPolicy } from '../../lib/interaction/overlay-policy'
 import { curveReshapeScope, holeEditScope } from '../../lib/interaction/scope'
+import { playBlockedQuickActionFeedback } from '../../lib/quick-action-feedback'
+import { collectQuickActionNodeScope } from '../../lib/quick-action-nodes'
 import { duplicateRoofSubtree } from '../../lib/roof-duplication'
 import { emitDeleteSFX, sfxEmitter } from '../../lib/sfx-bus'
-import { duplicateStairSubtree } from '../../lib/stair-duplication'
+import { cn } from '../../lib/utils'
 import useEditor from '../../store/use-editor'
 import useInteractionScope, {
   useActiveHandleDrag,
@@ -207,26 +211,9 @@ function collectQuickActionNodes(
 ): Record<AnyNodeId, AnyNode> | null {
   if (!selectedId) return null
   const selected = nodes[selectedId as AnyNodeId]
-  if (!selected || !nodeRegistry.get(selected.type)?.quickActions) return null
-
-  const collected: Record<AnyNodeId, AnyNode> = { [selected.id as AnyNodeId]: selected }
-  const add = (id: string | null | undefined) => {
-    if (!id) return
-    const node = nodes[id as AnyNodeId]
-    if (node) collected[node.id as AnyNodeId] = node
-  }
-  const addChildren = (node: AnyNode | undefined) => {
-    for (const childId of (node as { children?: readonly string[] } | undefined)?.children ?? []) {
-      add(childId)
-    }
-  }
-
-  add(selected.parentId ?? null)
-  addChildren(selected)
-  const parent = selected.parentId ? nodes[selected.parentId as AnyNodeId] : undefined
-  addChildren(parent)
-
-  return collected
+  const def = selected ? nodeRegistry.get(selected.type) : undefined
+  if (!def?.quickActions) return null
+  return collectQuickActionNodeScope(nodes, selectedId, def.quickActionNodeScope)
 }
 
 // Pooled scratch for the per-frame anchor recompute (see useFrame below) so a
@@ -283,7 +270,7 @@ function getHeightPillDimensions(node: WallNode | FenceNode): {
 } {
   if (node.type === 'wall') {
     return {
-      height: node.height ?? DEFAULT_WALL_HEIGHT,
+      height: getWallEffectiveHeightForNodes(node, useScene.getState().nodes),
       length: getWallCurveLength(node),
       thickness: getWallThickness(node),
     }
@@ -296,6 +283,7 @@ function getHeightPillDimensions(node: WallNode | FenceNode): {
 }
 
 export function FloatingActionMenu() {
+  const reducedMotion = useReducedMotion()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const updateNode = useScene((s) => s.updateNode)
   const mode = useEditor((s) => s.mode)
@@ -424,7 +412,10 @@ export function FloatingActionMenu() {
       const override = useLiveNodeOverrides.getState().overrides.get(selectedId) as
         | { height?: number }
         | undefined
-      const fallbackHeight = node.type === 'wall' ? DEFAULT_WALL_HEIGHT : FENCE_DEFAULT_HEIGHT
+      const fallbackHeight =
+        node.type === 'wall'
+          ? getWallEffectiveHeightForNodes(node, useScene.getState().nodes)
+          : FENCE_DEFAULT_HEIGHT
       const liveHeight = override?.height ?? node.height ?? fallbackHeight
       pillHeightRef.current.textContent = `H ${formatMeasurement(liveHeight, unit)}`
     }
@@ -514,7 +505,8 @@ export function FloatingActionMenu() {
       e.stopPropagation()
       if (!node) return
       sfxEmitter.emit('sfx:item-pick')
-      setMovingNode(node as any)
+      const sceneNodes = useScene.getState().nodes
+      setMovingNode(resolveMoveActionNode(node, sceneNodes) as any)
       setSelection({ selectedIds: [] })
     },
     [node, setMovingNode, setSelection],
@@ -537,20 +529,26 @@ export function FloatingActionMenu() {
       useScene.temporal.getState().pause()
 
       if (duplicatesAsFreshSubtree(node as AnyNode)) {
-        const draftId = createFreshPlacementSubtree(node.id as AnyNodeId)
-        const draft = draftId ? useScene.getState().nodes[draftId] : null
-        if (draft) {
-          setMovingNode(draft as any)
-          setSelection({ selectedIds: [] })
-          return
+        let draftId: AnyNodeId | null = null
+        try {
+          draftId = createFreshPlacementSubtree(node.id as AnyNodeId)
+          const draft = draftId ? useScene.getState().nodes[draftId] : null
+          if (draft) {
+            setMovingNode(draft as any)
+            setSelection({ selectedIds: [] })
+            return
+          }
+        } catch (error) {
+          if (draftId && useScene.getState().nodes[draftId]) {
+            useScene.getState().deleteNode(draftId)
+          }
+          console.error('Failed to duplicate node subtree', error)
         }
         useScene.temporal.getState().resume()
         return
       }
 
-      let duplicateInfo = structuredClone(node) as any
-      delete duplicateInfo.id
-      duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
+      const duplicateInfo = prepareFreshPlacementRootDuplicate(node as AnyNode) as any
 
       let duplicate: AnyNode | null = null
       try {
@@ -573,11 +571,6 @@ export function FloatingActionMenu() {
         } else if (node.type === 'roof-segment') {
           duplicateInfo.id = generateId('rseg')
           duplicate = RoofSegmentNode.parse(duplicateInfo)
-        } else if (node.type === 'stair') {
-          duplicateInfo.children = []
-          duplicateInfo.metadata = { ...duplicateInfo.metadata }
-          delete duplicateInfo.metadata?.isNew
-          duplicate = StairNode.parse(duplicateInfo)
         } else if (node.type === 'stair-segment') {
           duplicate = StairSegmentNode.parse(duplicateInfo)
         } else if (node.type === 'spawn') {
@@ -615,11 +608,7 @@ export function FloatingActionMenu() {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (duplicate.type === 'fence') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
-        } else if (
-          duplicate.type === 'roof-segment' ||
-          duplicate.type === 'stair' ||
-          duplicate.type === 'stair-segment'
-        ) {
+        } else if (duplicate.type === 'roof-segment' || duplicate.type === 'stair-segment') {
           // Add small offset to make it visible
           if ('position' in duplicate) {
             duplicate.position = [
@@ -628,13 +617,7 @@ export function FloatingActionMenu() {
               duplicate.position[2] + 1,
             ]
           }
-          if (node.type === 'stair' && duplicate.type === 'stair') {
-            duplicateStairSubtree(node.id as AnyNodeId, { mode: 'move' })
-          } else {
-            useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
-          }
-
-          // Duplicate children for stair nodes
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (
           duplicate.type === 'item' ||
           duplicate.type === 'chimney' ||
@@ -703,12 +686,8 @@ export function FloatingActionMenu() {
           nodeRegistry.has(duplicate.type)
         ) {
           setMovingNode(duplicate as any)
-        } else if (duplicate.type === 'stair') {
-          setSelection({ selectedIds: [duplicate.id as AnyNodeId] })
-        }
-        if (duplicate.type !== 'stair') {
-          setSelection({ selectedIds: [] })
         }
+        setSelection({ selectedIds: [] })
       }
     },
     [node, setMovingNode, setSelection],
@@ -776,9 +755,15 @@ export function FloatingActionMenu() {
   )
 
   const handleQuickAction = useCallback(
-    (action: NodeQuickAction) => (e: React.MouseEvent) => {
+    (action: NodeQuickAction) => (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()
-      if (!node || action.disabled) return
+      if (!node) return
+      if (action.disabled) {
+        if (action.blockedFeedback) {
+          playBlockedQuickActionFeedback(e.currentTarget, reducedMotion)
+        }
+        return
+      }
       const run = () => action.run({ node, sceneApi: createSceneApi(useScene) })
       const result =
         action.history === 'single' ? runAsSingleSceneHistoryStep(useScene, run) : run()
@@ -788,7 +773,7 @@ export function FloatingActionMenu() {
         sfxEmitter.emit(selectedDifferentNode ? 'sfx:item-place' : 'sfx:item-pick')
       }
     },
-    [node, setSelection],
+    [node, reducedMotion, setSelection],
   )
 
   if (
@@ -851,18 +836,27 @@ export function FloatingActionMenu() {
               >
                 {quickActions.map((action) => (
                   <button
+                    aria-disabled={action.disabled || undefined}
                     aria-label={action.title ?? action.label}
-                    className="tooltip-trigger flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
-                    disabled={action.disabled}
+                    className={cn(
+                      'tooltip-trigger flex items-center rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground',
+                      action.disabled &&
+                        'cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground',
+                    )}
+                    disabled={action.disabled && !action.blockedFeedback}
                     key={action.id}
                     onClick={handleQuickAction(action)}
                     title={action.title ?? action.label}
                     type="button"
                   >
-                    <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-current">
-                      <QuickActionIcon action={action} />
+                    <span className="flex items-center gap-1.5" data-quick-action-feedback>
+                      <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-current">
+                        <QuickActionIcon action={action} />
+                      </span>
+                      <span className="whitespace-nowrap leading-none" data-quick-action-label>
+                        {action.label}
+                      </span>
                     </span>
-                    <span className="whitespace-nowrap leading-none">{action.label}</span>
                   </button>
                 ))}
               </div>

package/src/components/editor/floorplan-background-selection.test.ts

@@ -10,8 +10,6 @@ const baseArgs = {
   modifierKeys: { meta: false, ctrl: false, shift: false },
   planPoint: [0, 0] as [number, number],
   structureLayer: 'elements',
-  toPoint2D: ([x, y]: [number, number]) => ({ x, y }),
-  visibleZonePolygons: [],
 }
 
 describe('resolveFloorplanBackgroundSelection', () => {
@@ -55,4 +53,20 @@ describe('resolveFloorplanBackgroundSelection', () => {
       preserveSelection: true,
     })
   })
+
+  test('uses the registry hit result for zone selection', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      canSelectElementFloorplanGeometry: false,
+      canSelectFloorplanZones: true,
+      getFloorplanHitIdAtPoint: () => 'zone_1',
+      structureLayer: 'zones',
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'select-zone',
+      zoneId: 'zone_1',
+    })
+  })
 })

package/src/components/editor/floorplan-background-selection.ts

@@ -1,7 +1,6 @@
 'use client'
 
-import type { Point2D, ZoneNode as ZoneNodeType } from '@pascal-app/core'
-import { isPointInsidePolygon } from '../../lib/floorplan'
+import type { ZoneNode as ZoneNodeType } from '@pascal-app/core'
 import type { WallPlanPoint } from '../tools/wall/wall-drafting'
 
 type ModifierKeys = {
@@ -10,13 +9,6 @@ type ModifierKeys = {
   shift: boolean
 }
 
-type ZoneHitEntry = {
-  zone: {
-    id: ZoneNodeType['id']
-  }
-  polygon: Point2D[]
-}
-
 type ResolveFloorplanBackgroundSelectionArgs = {
   canSelectElementFloorplanGeometry: boolean
   canSelectFloorplanZones: boolean
@@ -26,8 +18,6 @@ type ResolveFloorplanBackgroundSelectionArgs = {
   modifierKeys: ModifierKeys
   planPoint: WallPlanPoint
   structureLayer: string
-  toPoint2D: (point: WallPlanPoint) => Point2D
-  visibleZonePolygons: ZoneHitEntry[]
 }
 
 export type FloorplanBackgroundSelectionResult =
@@ -63,18 +53,14 @@ export function resolveFloorplanBackgroundSelection({
   modifierKeys,
   planPoint,
   structureLayer,
-  toPoint2D,
-  visibleZonePolygons,
 }: ResolveFloorplanBackgroundSelectionArgs): FloorplanBackgroundSelectionResult {
   if (canSelectFloorplanZones) {
-    const zoneHit = visibleZonePolygons.find(({ polygon }) =>
-      isPointInsidePolygon(toPoint2D(planPoint), polygon),
-    )
-    if (zoneHit) {
+    const zoneId = getFloorplanHitIdAtPoint(planPoint)
+    if (zoneId) {
       return {
         handled: true,
         kind: 'select-zone',
-        zoneId: zoneHit.zone.id,
+        zoneId: zoneId as ZoneNodeType['id'],
       }
     }
   }

package/src/components/editor/floorplan-camera-sync.test.ts

@@ -0,0 +1,249 @@
+import { describe, expect, test } from 'bun:test'
+import type { CameraPose } from '@pascal-app/core'
+import { publishInitialCameraPose } from '../../lib/camera-pose'
+import type { NavigationSyncPose } from '../../store/use-editor'
+import {
+  cameraPoseToFloorplanNavigationPose,
+  createFloorplanCameraNavigationChannel,
+  createFloorplanCameraSyncBridge,
+  floorplanNavigationPoseToCameraPose,
+} from './floorplan-camera-sync'
+
+const cameraPose: CameraPose = {
+  fov: 50,
+  position: [3, 4, 4],
+  projection: 'perspective',
+  target: [0, 1, 0],
+  viewWidth: 12,
+}
+
+function cameraPoseAtAzimuth(
+  azimuth: number,
+  target: [number, number, number] = [0, 1, 0],
+): CameraPose {
+  const horizontalDistance = 5
+  return {
+    ...cameraPose,
+    position: [
+      target[0] + Math.sin(azimuth) * horizontalDistance,
+      4,
+      target[2] + Math.cos(azimuth) * horizontalDistance,
+    ],
+    target,
+  }
+}
+
+describe('floorplan camera sync', () => {
+  test('derives the floor-plan navigation pose from the generic camera pose', () => {
+    expect(
+      cameraPoseToFloorplanNavigationPose({
+        position: [10, 5, 0],
+        projection: 'perspective',
+        target: [0, 0, 0],
+        viewWidth: 20,
+      }),
+    ).toEqual({
+      source: '3d',
+      target: [0, 0, 0],
+      azimuth: Math.PI / 2,
+      viewWidth: 20,
+    })
+  })
+
+  test('applies a floor-plan pose while preserving the generic camera elevation and projection', () => {
+    expect(
+      floorplanNavigationPoseToCameraPose(
+        {
+          source: '2d',
+          revision: 4,
+          target: [10, 2, 20],
+          azimuth: Math.PI / 2,
+          viewWidth: 8,
+        },
+        cameraPose,
+      ),
+    ).toEqual({
+      fov: 50,
+      position: [15, 5, 20],
+      projection: 'perspective',
+      target: [10, 2, 20],
+      viewWidth: 8,
+    })
+  })
+
+  test('owns two-way synchronization without echoing tiny camera changes', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+
+    bridge.receiveCameraPose(cameraPose)
+    bridge.receiveCameraPose({
+      ...cameraPose,
+      position: [3.0001, 4, 4],
+    })
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [10, 2, 20],
+      azimuth: Math.PI / 2,
+      viewWidth: 8,
+    })
+
+    expect(published).toHaveLength(1)
+    expect(published[0]?.source).toBe('3d')
+    expect(applied).toHaveLength(1)
+    expect(applied[0]).toMatchObject({
+      fov: 50,
+      projection: 'perspective',
+      target: [10, 2, 20],
+      viewWidth: 8,
+    })
+    expect(applied[0]?.position[0]).toBeCloseTo(15)
+    expect(applied[0]?.position[1]).toBeCloseTo(5)
+    expect(applied[0]?.position[2]).toBeCloseTo(20)
+  })
+
+  test('publishes sub-degree camera rotation for a real-time compass', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: () => {},
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+
+    bridge.receiveCameraPose(cameraPoseAtAzimuth(0))
+    bridge.receiveCameraPose(cameraPoseAtAzimuth((0.9 * Math.PI) / 180))
+    expect(published).toHaveLength(2)
+    expect(published[1]?.azimuth).toBeCloseTo((0.9 * Math.PI) / 180)
+  })
+
+  test('keeps a sub-degree camera rotation when it arrives with a pan', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: () => {},
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+
+    bridge.receiveCameraPose(cameraPoseAtAzimuth(0))
+    bridge.receiveCameraPose(cameraPoseAtAzimuth((0.5 * Math.PI) / 180, [1, 1, 0]))
+
+    expect(published).toHaveLength(2)
+    expect(published[1]).toMatchObject({
+      target: [1, 1, 0],
+    })
+    expect(published[1]?.azimuth).toBeCloseTo((0.5 * Math.PI) / 180)
+  })
+
+  test('keeps streaming live camera headings in 3D-only mode', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      active: false,
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+    const latestPose = cameraPoseAtAzimuth(Math.PI / 2, [8, 1, 4])
+
+    bridge.receiveCameraPose(cameraPoseAtAzimuth(0))
+    bridge.receiveCameraPose(latestPose)
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [10, 2, 20],
+      azimuth: Math.PI / 2,
+      viewWidth: 8,
+    })
+
+    expect(published).toEqual([
+      {
+        source: '3d',
+        target: cameraPose.target,
+        azimuth: 0,
+        viewWidth: 12,
+      },
+      {
+        source: '3d',
+        target: latestPose.target,
+        azimuth: Math.PI / 2,
+        viewWidth: 12,
+      },
+    ])
+    expect(applied).toEqual([])
+
+    bridge.setActive(true)
+    expect(published).toHaveLength(2)
+    expect(applied).toEqual([])
+  })
+
+  test('applies the north-alignment pose used by the compass in 3D view', () => {
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: () => {},
+    })
+    const currentPose = cameraPoseAtAzimuth(Math.PI / 2, [8, 1, 4])
+
+    bridge.receiveCameraPose(currentPose)
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [...currentPose.target],
+      azimuth: 0,
+      viewWidth: currentPose.viewWidth!,
+    })
+
+    expect(applied).toHaveLength(1)
+    expect(applied[0]).toMatchObject({
+      target: currentPose.target,
+      projection: currentPose.projection,
+      viewWidth: currentPose.viewWidth,
+    })
+    expect(applied[0]?.position[0]).toBeCloseTo(currentPose.target[0])
+    expect(applied[0]?.position[1]).toBeCloseTo(currentPose.position[1])
+    expect(applied[0]?.position[2]).toBeCloseTo(currentPose.target[2] + 5)
+  })
+
+  test('applies 2D-first navigation on initial load without a 3D interaction', () => {
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: () => {},
+    })
+
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [10, 2, 20],
+      azimuth: Math.PI / 2,
+      viewWidth: 8,
+    })
+    expect(applied).toEqual([])
+
+    publishInitialCameraPose(() => bridge.receiveCameraPose(cameraPose))
+    expect(applied).toHaveLength(1)
+  })
+
+  test('delivers the live camera stream through transient subscribers', () => {
+    const channel = createFloorplanCameraNavigationChannel()
+    const received: NavigationSyncPose[] = []
+    const unsubscribe = channel.subscribe((pose) => received.push(pose))
+    const input = {
+      source: '3d' as const,
+      target: [0, 1, 2] as [number, number, number],
+      azimuth: 0.5,
+      viewWidth: 12,
+    }
+
+    channel.publish(input)
+    channel.publish({ ...input, azimuth: 0.75 })
+    unsubscribe()
+    channel.publish({ ...input, azimuth: 1 })
+
+    expect(received).toEqual([
+      { ...input, revision: 1 },
+      { ...input, azimuth: 0.75, revision: 2 },
+    ])
+  })
+})