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

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

@@ -6,6 +6,9 @@ import {
   createSnapshotPipeline,
   GRID_LAYER,
   heroCameraPose,
+  SNAPSHOT_MAX_EDGE,
+  SNAPSHOT_MIME,
+  SNAPSHOT_QUALITY,
   type SnapshotPipeline,
   snapLevelsToTruePositions,
   THUMBNAIL_HEIGHT,
@@ -33,6 +36,14 @@ interface ThumbnailGeneratorProps {
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
 }
 
+function clampSnapshotSize(width: number, height: number): { w: number; h: number } {
+  const maxEdge = Math.max(width, height)
+  if (maxEdge <= SNAPSHOT_MAX_EDGE) return { w: width, h: height }
+
+  const scale = SNAPSHOT_MAX_EDGE / maxEdge
+  return { w: Math.round(width * scale), h: Math.round(height * scale) }
+}
+
 export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorProps) => {
   const gl = useThree((state) => state.gl)
   const scene = useThree((state) => state.scene)
@@ -234,33 +245,37 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           let outH: number
 
           if (captureMode === 'viewport') {
-            outW = width
-            outH = height
+            ;({ w: outW, h: outH } = clampSnapshotSize(width, height))
             const offscreen = document.createElement('canvas')
             offscreen.width = outW
             offscreen.height = outH
-            offscreen.getContext('2d')!.drawImage(gl.domElement, 0, 0)
+            const ctx = offscreen.getContext('2d')!
+            if (outW !== width || outH !== height) ctx.imageSmoothingQuality = 'high'
+            ctx.drawImage(gl.domElement, 0, 0, width, height, 0, 0, outW, outH)
             blob = await new Promise<Blob>((resolve, reject) =>
               offscreen.toBlob(
                 (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
-                'image/png',
+                SNAPSHOT_MIME,
+                SNAPSHOT_QUALITY,
               ),
             )
           } else if (captureMode === 'area' && cropRegion) {
             const sx = Math.round(cropRegion.x * width)
             const sy = Math.round(cropRegion.y * height)
-            outW = Math.round(cropRegion.width * width)
-            outH = Math.round(cropRegion.height * height)
+            const sourceW = Math.round(cropRegion.width * width)
+            const sourceH = Math.round(cropRegion.height * height)
+            ;({ w: outW, h: outH } = clampSnapshotSize(sourceW, sourceH))
             const offscreen = document.createElement('canvas')
             offscreen.width = outW
             offscreen.height = outH
-            offscreen
-              .getContext('2d')!
-              .drawImage(gl.domElement, sx, sy, outW, outH, 0, 0, outW, outH)
+            const ctx = offscreen.getContext('2d')!
+            if (outW !== sourceW || outH !== sourceH) ctx.imageSmoothingQuality = 'high'
+            ctx.drawImage(gl.domElement, sx, sy, sourceW, sourceH, 0, 0, outW, outH)
             blob = await new Promise<Blob>((resolve, reject) =>
               offscreen.toBlob(
                 (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
-                'image/png',
+                SNAPSHOT_MIME,
+                SNAPSHOT_QUALITY,
               ),
             )
           } else {
@@ -288,7 +303,8 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
             blob = await new Promise<Blob>((resolve, reject) =>
               offscreen.toBlob(
                 (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
-                'image/png',
+                SNAPSHOT_MIME,
+                SNAPSHOT_QUALITY,
               ),
             )
           }

package/src/components/editor/wall-measurement-label.tsx

@@ -510,6 +510,7 @@ function SelectedMeasurementAnnotation({ node }: { node: WallNode | ItemNode })
 function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
   const nodes = useScene((state) => state.nodes)
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
   const isNight = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
   const color = isNight ? '#ffffff' : '#111111'
   const shadowColor = isNight ? '#111111' : '#ffffff'
@@ -528,9 +529,9 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
     }
     return total
   }, [guide, wall])
-  const label = formatLinearMeasurement(length, unit)
+  const label = formatLinearMeasurement(length, unit, metricNotation)
   const height = useMemo(() => getWallEffectiveHeightForNodes(wall, nodes), [nodes, wall])
-  const heightLabel = `H ${formatLinearMeasurement(height, unit)}`
+  const heightLabel = `H ${formatLinearMeasurement(height, unit, metricNotation)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null
 

package/src/components/editor-2d/floorplan-group-action-menu.tsx

@@ -1,11 +1,17 @@
 'use client'
 
+import { useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { isActive } from '../../lib/interaction/scope'
+import { canCreateSessionGroup, selectionIntersectsSessionGroup } from '../../lib/session-groups'
 import useEditor from '../../store/use-editor'
 import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
+import useSessionGroups, {
+  groupCurrentSelection,
+  ungroupCurrentSelection,
+} from '../../store/use-session-groups'
 import {
   deleteSelection,
   duplicateSelectionAndPickUp,
@@ -14,25 +20,27 @@ import {
 import { NodeActionMenu } from '../editor/node-action-menu'
 
 /**
- * Floating Move / Duplicate / Delete pill for a MULTI-selection in the 2D
- * floor plan — the group sibling of `FloorplanRegistryActionMenu` (which is
- * sole-selection only). Anchored above the dashed group selection box; every
- * action targets the whole selection: Move picks the group up (it rides the
- * cursor until a click places it), Duplicate clones the selection and picks
- * the clones up, Delete removes everything selected.
- *
- * Gated on floorplan hover so it never coexists with the 3D group menu in
- * split view (that one hides while the floor plan is hovered), and hidden
- * during any active interaction so it never competes with a live drag.
+ * Floating multi-select pill on the floor plan: Move, Group, Ungroup, Duplicate, Delete.
  */
 export function FloorplanGroupActionMenu() {
-  const isMultiSelect = useViewer((s) => s.selection.selectedIds.length > 1)
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const isMultiSelect = selectedIds.length > 1
   const movingNode = useMovingNode()
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
   const scopeActive = useInteractionScope((s) => isActive(s.scope))
+  const sessionGroups = useSessionGroups((s) => s.groups)
+  const sceneNodes = useScene((s) => s.nodes)
+  const liveIds = useMemo(() => new Set(Object.keys(sceneNodes)), [sceneNodes])
+  const showGroup = useMemo(
+    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+  const showUngroup = useMemo(
+    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
 
   const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
-
   const isVisible = isMultiSelect && !movingNode && isFloorplanHovered && !scopeActive
 
   useEffect(() => {
@@ -43,9 +51,6 @@ export function FloorplanGroupActionMenu() {
     let raf = 0
     const tick = () => {
       raf = requestAnimationFrame(tick)
-      // The dashed group box exists exactly while the multi-selection has
-      // transformable participants — anchor to its top edge. Only publish
-      // actual changes so the idle poll doesn't re-render every frame.
       const box = document.querySelector('[data-group-selection-box]') as SVGGElement | null
       if (!box) {
         setPosition((prev) => (prev === null ? prev : null))
@@ -77,9 +82,11 @@ export function FloorplanGroupActionMenu() {
       <NodeActionMenu
         onDelete={() => deleteSelection()}
         onDuplicate={() => duplicateSelectionAndPickUp()}
+        onGroup={showGroup ? () => groupCurrentSelection() : undefined}
         onMove={() => startGroupPickUp()}
         onPointerDown={(event) => event.stopPropagation()}
         onPointerUp={(event) => event.stopPropagation()}
+        onUngroup={showUngroup ? () => ungroupCurrentSelection() : undefined}
       />
     </div>,
     document.body,

package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx

@@ -67,6 +67,10 @@ import {
   resolveFloorplanAnnotationVisibility,
   resolveFloorplanWallDimensionReference,
 } from '../../../lib/floorplan/floorplan-mode'
+import {
+  buildFloorplanContext,
+  floorplanLayerRank,
+} from '../../../lib/floorplan/floorplan-readonly'
 import { clientToPlan } from '../../../lib/floorplan/plan-coords'
 import {
   type ActiveInteractionScope,
@@ -91,6 +95,7 @@ import useInteractionScope, {
   useEndpointReshape,
   useMovingNode,
 } from '../../../store/use-interaction-scope'
+import { expandSessionSelectionForNode } from '../../../store/use-session-groups'
 import { startGroupPickUp } from '../../editor/group-actions'
 import { classifyParticipant } from '../../editor/group-transform-shared'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
@@ -589,13 +594,19 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   }, [bumpAffectedSiblingEpochs])
 
   const applyEntrySelection = useCallback(
-    (id: AnyNodeId, shouldToggle: boolean) => {
+    (id: AnyNodeId, options: { shouldToggle: boolean; isolateMember: boolean }) => {
       const currentSelectedIds = useViewer.getState().selection.selectedIds
-      const nextSelectedIds = shouldToggle
-        ? currentSelectedIds.includes(id)
+      let nextSelectedIds: string[]
+      if (options.shouldToggle) {
+        nextSelectedIds = currentSelectedIds.includes(id)
           ? currentSelectedIds.filter((selectedId) => selectedId !== id)
           : [...currentSelectedIds, id]
-        : [id]
+      } else if (options.isolateMember) {
+        nextSelectedIds = [id]
+      } else {
+        const expanded = expandSessionSelectionForNode(id)
+        nextSelectedIds = expanded && expanded.length > 1 ? expanded : [id]
+      }
       setSelection({ selectedIds: nextSelectedIds })
       if (nextSelectedIds.length === 1 && nextSelectedIds[0] === id) {
         const node = useScene.getState().nodes[id]
@@ -618,7 +629,10 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
     (id: AnyNodeId, event: React.PointerEvent<SVGGElement>) => {
       if (event.button !== 0) return
       event.stopPropagation()
-      applyEntrySelection(id, event.metaKey || event.ctrlKey || event.shiftKey)
+      applyEntrySelection(id, {
+        shouldToggle: event.metaKey || event.ctrlKey || event.shiftKey,
+        isolateMember: event.altKey && !(event.metaKey || event.ctrlKey || event.shiftKey),
+      })
     },
     [applyEntrySelection],
   )
@@ -691,7 +705,11 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         if (endEvent.pointerId !== pointerId) return
         cleanup()
         if (!engaged) {
-          applyEntrySelection(id, true)
+          // Cmd/Ctrl+click without drag: toggle member (options object, not bare boolean).
+          applyEntrySelection(id, {
+            shouldToggle: true,
+            isolateMember: false,
+          })
         }
       }
 
@@ -3144,73 +3162,7 @@ function isFloorplanHierarchyVisible(
   return true
 }
 
-export function buildContext(
-  node: AnyNode,
-  nodes: Record<string, AnyNode>,
-  viewState: {
-    automaticDimensions?: boolean
-    selected: boolean
-    unit: 'metric' | 'imperial'
-    metricNotation?: 'meters' | 'millimeters'
-    purpose?: 'edit' | 'document'
-    wallDimensionReference?: FloorplanWallDimensionReference
-    highlighted: boolean
-    hovered: boolean
-    moving: boolean
-    palette: FloorplanPalette | undefined
-  },
-  levelData?: unknown,
-): GeometryContext {
-  const resolve = <N = AnyNode>(id: AnyNodeId): N | undefined => nodes[id] as N | undefined
-
-  const childIds = (node as unknown as { children?: AnyNodeId[] }).children
-  const children: AnyNode[] = Array.isArray(childIds)
-    ? childIds.map((cid) => nodes[cid]).filter((n): n is AnyNode => n !== undefined)
-    : []
-
-  const parentId = node.parentId as AnyNodeId | null
-  const parent: AnyNode | null = parentId ? (nodes[parentId] ?? null) : null
-
-  let siblings: AnyNode[] = []
-  if (parent) {
-    const parentChildIds = (parent as unknown as { children?: AnyNodeId[] }).children
-    if (Array.isArray(parentChildIds)) {
-      for (const sid of parentChildIds) {
-        if (sid === node.id) continue
-        const s = nodes[sid]
-        if (s && s.type === node.type) siblings.push(s)
-      }
-    } else {
-      siblings = Object.values(nodes).filter(
-        (n) => n !== node && n.type === node.type && n.parentId === parentId,
-      )
-    }
-  }
-
-  return {
-    resolve,
-    children,
-    siblings,
-    parent,
-    levelData,
-    extensions: createFloorplanContextExtensions({
-      automaticDimensions: viewState.automaticDimensions,
-      metricNotation: viewState.metricNotation ?? 'meters',
-      purpose: viewState.purpose ?? 'edit',
-      wallDimensionReference: viewState.wallDimensionReference,
-    }),
-    viewState: viewState.palette
-      ? {
-          selected: viewState.selected,
-          unit: viewState.unit,
-          highlighted: viewState.highlighted,
-          hovered: viewState.hovered,
-          moving: viewState.moving,
-          palette: viewState.palette,
-        }
-      : undefined,
-  }
-}
+export const buildContext = buildFloorplanContext
 
 export function collectFloorplanLinkedLevelNodes(
   nodes: Record<string, AnyNode>,
@@ -3512,17 +3464,7 @@ function depsValueEqual(a: unknown, b: unknown): boolean {
  * Sort is stable in modern JS engines, so siblings within the same
  * bucket keep their DFS order (= scene tree order).
  */
-export function floorplanLayerRank(type: string): number {
-  switch (type) {
-    case 'zone':
-      return 0
-    case 'slab':
-    case 'ceiling':
-      return 1
-    default:
-      return 2
-  }
-}
+export { floorplanLayerRank }
 
 function deepEqual(a: unknown, b: unknown): boolean {
   if (a === b) return true

package/src/components/tools/item/placement-strategies.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, test } from 'bun:test'
+import type { ItemNode, WallEvent, WallNode } from '@pascal-app/core'
+import { Mesh, type Object3D, Vector3 } from 'three'
+import { wallStrategy } from './placement-strategies'
+import type { PlacementContext, SpatialValidators } from './placement-types'
+
+/**
+ * The wall frame the runtime builds in `updateWallGeometry`: origin at
+ * `wall.start` lifted to the supporting slab's elevation, yawed by the wall
+ * angle. Wall-local Y is therefore measured from the slab, NOT from world zero
+ * — which is exactly why snapping the world hit and the wall-local hit
+ * separately used to put the preview box and the item on different points.
+ */
+function makeWallFrame(wall: WallNode, slabElevation: number): Mesh {
+  const wallMesh = new Mesh()
+  wallMesh.position.set(wall.start[0], slabElevation, wall.start[1])
+  wallMesh.rotation.y = -Math.atan2(wall.end[1] - wall.start[1], wall.end[0] - wall.start[0])
+  const collisionMesh = new Mesh()
+  wallMesh.add(collisionMesh)
+  wallMesh.updateMatrixWorld(true)
+  return collisionMesh
+}
+
+function makeWall(overrides: Partial<WallNode> = {}): WallNode {
+  return {
+    id: 'wall_test',
+    type: 'wall',
+    parentId: 'level_test',
+    children: [],
+    start: [2.3, 1.7],
+    end: [8.3, 1.7],
+    thickness: 0.2,
+    ...overrides,
+  } as WallNode
+}
+
+function makeDraft(): ItemNode {
+  return {
+    id: 'item_draft',
+    type: 'item',
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+    children: [],
+    asset: {
+      id: 'asset_hold',
+      category: 'sport',
+      name: 'Climbing hold',
+      thumbnail: '',
+      source: 'library',
+      src: '',
+      dimensions: [0.65, 0.33, 0.63],
+      attachTo: 'wall-side',
+      offset: [0, 0.165, 0.1],
+      rotation: [0, 0, 0],
+      scale: [1, 1, 1],
+    },
+  } as unknown as ItemNode
+}
+
+/** Front face of the wall: wall-local +Z. */
+const FRONT_NORMAL: [number, number, number] = [0, 0, 1]
+
+function makeWallEvent(wall: WallNode, collisionMesh: Object3D, localHit: Vector3): WallEvent {
+  const world = collisionMesh.localToWorld(localHit.clone())
+  return {
+    node: wall,
+    position: [world.x, world.y, world.z],
+    localPosition: [localHit.x, localHit.y, localHit.z],
+    normal: FRONT_NORMAL,
+    object: collisionMesh,
+    stopPropagation: () => undefined,
+  } as unknown as WallEvent
+}
+
+const validators: SpatialValidators = {
+  canPlaceOnFloor: () => ({ valid: true }),
+  canPlaceOnWall: () => ({ valid: true }),
+  canPlaceOnCeiling: () => ({ valid: true }),
+}
+
+function makeContext(draft: ItemNode): PlacementContext {
+  return {
+    asset: draft.asset,
+    levelId: 'level_test',
+    draftItem: draft,
+    gridPosition: new Vector3(),
+    state: {
+      surface: 'wall',
+      wallId: 'wall_test',
+      roofSegmentId: null,
+      ceilingId: null,
+      surfaceItemId: null,
+      shelfId: null,
+    },
+    currentCursorRotationY: 0,
+  } as unknown as PlacementContext
+}
+
+describe('wallStrategy.move', () => {
+  /**
+   * The preview wireframe (`cursorPosition`, world) and the committed node
+   * (`gridPosition`, wall-local) must describe ONE point. Snapping them
+   * independently drifted the box off the item by the slab elevation plus up to
+   * a grid step, and the commit then landed where the box was not.
+   */
+  test.each([
+    ['axis-aligned wall on an elevated slab', makeWall(), 0.4],
+    [
+      'diagonal wall off the world grid',
+      makeWall({ start: [1.15, 0.35], end: [5.15, 4.35] } as Partial<WallNode>),
+      0.15,
+    ],
+  ])('keeps the preview box on the committed point — %s', (_label, wall, slabElevation) => {
+    const collisionMesh = makeWallFrame(wall, slabElevation)
+    const draft = makeDraft()
+    const event = makeWallEvent(wall, collisionMesh, new Vector3(2.42, 1.38, 0.1))
+
+    const result = wallStrategy.move(makeContext(draft), event, validators)
+    if (!result) throw new Error('expected a placement result')
+
+    const cursorFromNode = collisionMesh.localToWorld(new Vector3(...result.gridPosition))
+    expect(cursorFromNode.x).toBeCloseTo(result.cursorPosition[0], 6)
+    expect(cursorFromNode.y).toBeCloseTo(result.cursorPosition[1], 6)
+    expect(cursorFromNode.z).toBeCloseTo(result.cursorPosition[2], 6)
+  })
+
+  test('mounts the wall-side preview on the hit face, not through the wall', () => {
+    const wall = makeWall()
+    const collisionMesh = makeWallFrame(wall, 0.4)
+    const draft = makeDraft()
+    const event = makeWallEvent(wall, collisionMesh, new Vector3(2.42, 1.38, 0.1))
+
+    const result = wallStrategy.move(makeContext(draft), event, validators)
+    if (!result) throw new Error('expected a placement result')
+
+    // Front face → wall-local +thickness/2, matching ItemSystem's per-frame push.
+    expect(result.gridPosition[2]).toBeCloseTo(0.1, 6)
+    // The cursor frame IS the item frame, so the box's +Z (its depth) points out
+    // of the same face the item body extends from.
+    const outward = new Vector3(0, 0, 1).applyAxisAngle(
+      new Vector3(0, 1, 0),
+      result.cursorRotationY,
+    )
+    const wallNormal = new Vector3(0, 0, 1).applyAxisAngle(
+      new Vector3(0, 1, 0),
+      collisionMesh.parent!.rotation.y,
+    )
+    expect(outward.dot(wallNormal)).toBeCloseTo(1, 6)
+  })
+
+  test('carries the wall auto-adjusted Y into the preview box', () => {
+    const wall = makeWall()
+    const collisionMesh = makeWallFrame(wall, 0.4)
+    const draft = makeDraft()
+    const event = makeWallEvent(wall, collisionMesh, new Vector3(2.42, 1.38, 0.1))
+
+    const result = wallStrategy.move(makeContext(draft), event, {
+      ...validators,
+      canPlaceOnWall: () => ({ valid: true, adjustedY: 0.05, wasAdjusted: true }),
+    })
+    if (!result) throw new Error('expected a placement result')
+
+    expect(result.gridPosition[1]).toBeCloseTo(0.05, 6)
+    expect(result.cursorPosition[1]).toBeCloseTo(0.4 + 0.05, 6)
+  })
+})

package/src/components/tools/item/placement-strategies.ts

@@ -30,7 +30,6 @@ import { Euler, Matrix3, Quaternion, Vector3 } from 'three'
 import { hasRoofFaceChildOverlap, resolveRoofWallHit } from '../../../lib/roof-wall-hit'
 import { snapWorldXZForActiveBuilding } from '../../../lib/world-grid-snap'
 import {
-  calculateCursorRotation,
   calculateItemRotation,
   getGridAlignedDimensions,
   getSideFromNormal,
@@ -178,6 +177,51 @@ export const floorStrategy = {
 // WALL STRATEGY
 // ============================================================================
 
+/**
+ * Resolve the wall-local node position AND the world pose of the placement
+ * wireframe from ONE wall-local point, so the box can't drift from the item it
+ * previews.
+ *
+ * `event.object` is the wall's collision mesh — the frame `event.localPosition`
+ * was measured in — so `localToWorld` is the exact inverse of the hit. Snapping
+ * the raw world hit per axis instead (the old path) put the box on a different
+ * lattice than the node: wall-local X runs from `wall.start`, and wall-local Y
+ * is measured from the supporting slab's elevation, not from world zero.
+ *
+ * `z` follows the hosting convention rather than the hit depth: `wall` items
+ * center in the thickness, `wall-side` items mount on the hit face — mirroring
+ * `ItemSystem`'s per-frame push, so the wireframe's `z = 0` face lands flush
+ * with the wall instead of extending through it.
+ */
+function resolveWallPlacementPose(
+  event: WallEvent,
+  localX: number,
+  localY: number,
+  attachTo: 'wall' | 'wall-side',
+  side: 'front' | 'back',
+  itemRotation: number,
+): {
+  position: [number, number, number]
+  cursorPosition: [number, number, number]
+  cursorRotationY: number
+} {
+  const localZ =
+    attachTo === 'wall-side' ? ((event.node.thickness ?? 0.1) / 2) * (side === 'front' ? 1 : -1) : 0
+  event.object.updateWorldMatrix(true, false)
+  const world = event.object.localToWorld(new Vector3(localX, localY, localZ))
+  const wallYaw = -Math.atan2(
+    event.node.end[1] - event.node.start[1],
+    event.node.end[0] - event.node.start[0],
+  )
+  return {
+    position: [localX, localY, localZ],
+    cursorPosition: [world.x, world.y, world.z],
+    // Same composition the 2D floorplan resolves a wall child with
+    // (`resolveItemTransform`): the cursor frame IS the item frame.
+    cursorRotationY: wallYaw + itemRotation,
+  }
+}
+
 export const wallStrategy = {
   /**
    * Handle wall:enter — transition from floor to wall surface.
@@ -201,11 +245,9 @@ export const wallStrategy = {
 
     const side = getSideFromNormal(event.normal)
     const itemRotation = calculateItemRotation(event.normal)
-    const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
 
     const x = snapToHalf(event.localPosition[0])
     const y = snapToHalf(event.localPosition[1])
-    const z = snapToHalf(event.localPosition[2])
 
     // Get auto-adjusted Y position from validator
     const rawDims = ctx.draftItem
@@ -223,11 +265,12 @@ export const wallStrategy = {
     )
 
     const adjustedY = validation.adjustedY ?? y
+    const pose = resolveWallPlacementPose(event, x, adjustedY, attachTo, side, itemRotation)
 
     return {
       stateUpdate: { surface: 'wall', wallId: event.node.id, roofSegmentId: null },
       nodeUpdate: {
-        position: [x, adjustedY, z],
+        position: pose.position,
         parentId: event.node.id,
         // The draft may arrive from a roof-segment wall face.
         roofSegmentId: undefined,
@@ -235,13 +278,9 @@ export const wallStrategy = {
         side,
         rotation: [0, itemRotation, 0],
       },
-      cursorRotationY: cursorRotation,
-      gridPosition: [x, adjustedY, z],
-      cursorPosition: [
-        snapToHalf(event.position[0]),
-        snapToHalf(event.position[1]),
-        snapToHalf(event.position[2]),
-      ],
+      cursorRotationY: pose.cursorRotationY,
+      gridPosition: pose.position,
+      cursorPosition: pose.cursorPosition,
       stopPropagation: true,
     }
   },
@@ -262,11 +301,10 @@ export const wallStrategy = {
 
     const side = getSideFromNormal(event.normal)
     const itemRotation = calculateItemRotation(event.normal)
-    const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
+    const attachTo = ctx.draftItem.asset.attachTo as 'wall' | 'wall-side'
 
     const snappedX = snapToHalf(event.localPosition[0])
     const snappedY = snapToHalf(event.localPosition[1])
-    const snappedZ = snapToHalf(event.localPosition[2])
 
     // Get auto-adjusted Y position from validator
     const validation = validators.canPlaceOnWall(
@@ -275,23 +313,20 @@ export const wallStrategy = {
       snappedX,
       snappedY,
       getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), ctx.draftItem.asset.attachTo),
-      ctx.draftItem.asset.attachTo as 'wall' | 'wall-side',
+      attachTo,
       side,
       [ctx.draftItem.id],
     )
 
     const adjustedY = validation.adjustedY ?? snappedY
+    const pose = resolveWallPlacementPose(event, snappedX, adjustedY, attachTo, side, itemRotation)
 
     return {
-      gridPosition: [snappedX, adjustedY, snappedZ],
-      cursorPosition: [
-        snapToHalf(event.position[0]),
-        snapToHalf(event.position[1]),
-        snapToHalf(event.position[2]),
-      ],
-      cursorRotationY: cursorRotation,
+      gridPosition: pose.position,
+      cursorPosition: pose.cursorPosition,
+      cursorRotationY: pose.cursorRotationY,
       nodeUpdate: {
-        position: [snappedX, adjustedY, snappedZ],
+        position: pose.position,
         side,
         rotation: [0, itemRotation, 0],
       },