@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/tools/shared/affordance-dispatch.ts

@@ -15,6 +15,19 @@ import { type ComponentType, lazy } from 'react'
  */
 const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
 
+export async function preloadRegistryAffordanceTools(kind: string): Promise<void> {
+  const tools = nodeRegistry.get(kind)?.affordanceTools
+  await Promise.allSettled(
+    Object.values(tools ?? {}).map(async (loader) => {
+      if (!loader || lazyToolCache.has(loader)) return
+      const module = (await loader()) as { default: ComponentType<any> }
+      // Keep an already-mounted lazy component stable. Otherwise use the resolved
+      // component directly so grabbing a preloaded handle never suspends its tool.
+      if (!lazyToolCache.has(loader)) lazyToolCache.set(loader, module.default)
+    }),
+  )
+}
+
 export function getRegistryAffordanceTool(
   kind: string,
   affordance: string,

package/src/components/tools/shared/draft-measurement-label.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Html } from '@react-three/drei'
+
+/** Lift of a draft's readout above the top of what it measures, in metres. */
+export const DRAFT_LABEL_Y_OFFSET = 0.22
+
+/** Screen-space readout for a draft in 3D (lengths, angles, split segments). */
+export function DraftMeasurementLabel({
+  color,
+  label,
+  position,
+  shadowColor,
+}: {
+  color: string
+  label: string
+  position: [number, number, number]
+  shadowColor: string
+}) {
+  return (
+    <Html
+      center
+      position={position}
+      style={{ pointerEvents: 'none', userSelect: 'none' }}
+      zIndexRange={[100, 0]}
+    >
+      <div
+        className="whitespace-nowrap font-bold font-mono text-[15px]"
+        style={{
+          color,
+          textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
+        }}
+      >
+        {label}
+      </div>
+    </Html>
+  )
+}

package/src/components/tools/shared/pointer-support-cap.test.ts

@@ -19,6 +19,7 @@ import {
   MeshBasicMaterial,
   OrthographicCamera,
   PerspectiveCamera,
+  Ray,
   Vector3,
 } from 'three'
 import { z } from 'zod'
@@ -161,6 +162,32 @@ describe('resolvePointerSupportSurface node tops', () => {
     expect(support?.worldPoint).toEqual([0, 2, 0])
   })
 
+  test('XR floor drawing uses the controller ray even when the camera sees a raised surface', () => {
+    addPluginPlatform(2, [4, 2, 2])
+    const camera = new PerspectiveCamera()
+    camera.position.set(0, 5, 5)
+    camera.updateMatrixWorld(true)
+    const controllerRay = new Ray(new Vector3(0, 1.5, 0), new Vector3(0, -1, 0))
+    const desktop = resolvePointerSupportSurface(camera, [0, 0, 0], {
+      includeNodeTopSurfaces: true,
+    })
+    expect(desktop?.sourceNodeId).toBe(PLATFORM_ID)
+    const xr = resolvePointerSupportSurface(camera, [0, 0, 0], {
+      includeNodeTopSurfaces: true,
+      pointerRay: controllerRay,
+    })
+    expect(xr?.sourceNodeId).toBeNull()
+    expect(xr?.worldPoint).toEqual([0, 0, 0])
+    camera.position.set(12, 8, -10)
+    camera.updateMatrixWorld(true)
+    expect(
+      resolvePointerSupportSurface(camera, [0, 0, 0], {
+        includeNodeTopSurfaces: true,
+        pointerRay: controllerRay,
+      })?.worldPoint,
+    ).toEqual([0, 0, 0])
+  })
+
   test('keeps an unhovered item top above a batched slab across batch transitions', () => {
     const restoreRegistry = nodeRegistry._snapshot()
     const item = ItemNode.parse({

package/src/components/tools/shared/pointer-support-cap.ts

@@ -1,4 +1,5 @@
 import {
+  type AnyNode,
   type AnyNodeId,
   canHostOnTop,
   GROUND_SUPPORT_ID,
@@ -10,10 +11,11 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { setSurfaceRaycastLayers, useViewer } from '@pascal-app/viewer'
-import { type Camera, Matrix3, type Object3D, Raycaster, Vector3 } from 'three'
+import { type Camera, type Object3D, type Ray, Raycaster, Vector3 } from 'three'
 import { resolveTerrainGroundHit } from '../../../lib/ground-surface'
 import { scopeNodeId } from '../../../lib/interaction/scope'
 import useInteractionScope from '../../../store/use-interaction-scope'
+import { surfaceWorldNormalY } from './surface-hit'
 
 const originScratch = new Vector3()
 const hitScratch = new Vector3()
@@ -23,8 +25,6 @@ const worldRayOrigin = new Vector3()
 const worldRayDirection = new Vector3()
 const nodeTopRaycaster = new Raycaster()
 setSurfaceRaycastLayers(nodeTopRaycaster.layers)
-const nodeTopNormal = new Vector3()
-const nodeTopNormalMatrix = new Matrix3()
 
 export type PointerSupportSurface = {
   /** Level-local elevation of the pointed surface — the election cap. */
@@ -79,16 +79,22 @@ export type PointerSupportSurface = {
 export function resolvePointerSupportSurface(
   camera: Camera,
   worldHit: readonly [number, number, number],
-  options?: { includeNodeTopSurfaces?: boolean },
+  options?: { includeNodeTopSurfaces?: boolean; pointerRay?: Ray },
 ): PointerSupportSurface | null {
   const levelId = useViewer.getState().selection.levelId
   if (!levelId) return null
 
   // The world ray, kept before the level conversion below: the terrain field is
   // world-space (site geometry, not level-local), so the march needs this frame.
-  camera.getWorldPosition(worldRayOrigin)
+  if (options?.pointerRay) worldRayOrigin.copy(options.pointerRay.origin)
+  else camera.getWorldPosition(worldRayOrigin)
+  const isOrthographic =
+    !options?.pointerRay &&
+    (camera as Camera & { isOrthographicCamera?: boolean }).isOrthographicCamera === true
   const cameraToHit = hitScratch.set(worldHit[0], worldHit[1], worldHit[2]).sub(worldRayOrigin)
-  if ((camera as Camera & { isOrthographicCamera?: boolean }).isOrthographicCamera) {
+  if (options?.pointerRay) {
+    worldRayDirection.copy(options.pointerRay.direction).normalize()
+  } else if (isOrthographic) {
     // For an orthographic camera every screen pixel has the same direction. The
     // hit point is offset from the camera along the view plane, so using
     // `camera.position -> hit` tilts the ray toward the screen centre and makes
@@ -102,7 +108,13 @@ export function resolvePointerSupportSurface(
   }
 
   originScratch.copy(worldRayOrigin)
-  hitScratch.set(worldHit[0], worldHit[1], worldHit[2])
+  // Second world point defining the ray fed to the surface solve. In the plain
+  // perspective case `worldHit` already lies on the true pointer ray, so using
+  // it keeps `t === 1` (and the returned plan point exact) whenever the pointed
+  // surface IS the event plane — the pointer-ray and orthographic branches have
+  // no such hit, so they step one unit along the resolved direction.
+  if (options?.pointerRay || isOrthographic) hitScratch.copy(worldRayOrigin).add(worldRayDirection)
+  else hitScratch.set(worldHit[0], worldHit[1], worldHit[2])
   // Slab polygons/elevations live in the level frame; the level mesh
   // carries the storey Y offset and any building rotation.
   const levelMesh = sceneRegistry.nodes.get(levelId as AnyNodeId)
@@ -194,7 +206,7 @@ export function resolvePointerSupportSurface(
     // convention — the election owns the invariant.
     const interactingNodeId = scopeNodeId(useInteractionScope.getState().scope)
     const isEligibleCandidate = (nodeId: AnyNodeId) => {
-      let current = nodes[nodeId]
+      let current: AnyNode | undefined = nodes[nodeId]
       const visited = new Set<AnyNodeId>()
       while (current && !visited.has(current.id)) {
         if (current.id === interactingNodeId) return false
@@ -247,11 +259,13 @@ export function resolvePointerSupportSurface(
             ownerObject = ownerObject.parent
           }
           if (belongsToNestedNode) continue
-          nodeTopNormal
-            .copy(intersection.face.normal)
-            .applyNormalMatrix(nodeTopNormalMatrix.getNormalMatrix(intersection.object.matrixWorld))
-            .normalize()
-          if (nodeTopNormal.y < 0.75) continue
+          if (
+            surfaceWorldNormalY(
+              intersection.face.normal.toArray(),
+              intersection.object.matrixWorld,
+            ) < 0.75
+          )
+            continue
           nearest = {
             distance: intersection.distance,
             nodeId,

package/src/components/tools/shared/shelf-stickiness.ts

@@ -0,0 +1,54 @@
+import {
+  type AnyNodeId,
+  createSceneApi,
+  getSurfaceProvider,
+  sceneRegistry,
+  surfaceRegionContainsPoint,
+  useScene,
+} from '@pascal-app/core'
+import { Box3, type Camera, Matrix4, Ray, Vector3 } from 'three'
+
+export function createShelfStickiness() {
+  const ray = new Ray()
+  const box = new Box3()
+  const matrix = new Matrix4()
+  const cameraPosition = new Vector3()
+
+  // A ray through a board gap can hit the floor behind the shelf while still targeting its volume.
+  return (
+    shelfId: string | null | undefined,
+    camera: Camera,
+    worldPoint: readonly [number, number, number],
+  ) => {
+    if (!shelfId) return false
+    const mesh = sceneRegistry.nodes.get(shelfId)
+    const shelf = useScene.getState().nodes[shelfId as AnyNodeId]
+    if (!mesh || !shelf || (shelf.type !== 'shelf' && shelf.type !== 'cabinet')) return false
+    camera.getWorldPosition(cameraPosition)
+    ray.origin.copy(cameraPosition)
+    ray.direction
+      .set(...worldPoint)
+      .sub(cameraPosition)
+      .normalize()
+    ray.applyMatrix4(matrix.copy(mesh.matrixWorld).invert())
+    if (shelf.type === 'cabinet') {
+      const surfaces =
+        getSurfaceProvider(shelf).surfaces?.(shelf, { scene: createSceneApi(useScene) }) ?? []
+      return surfaces.some((surface) => {
+        if (Math.abs(ray.direction.y) < 1e-8) return false
+        const distance = (surface.position[1] - ray.origin.y) / ray.direction.y
+        if (distance < 0) return false
+        const point = ray.at(distance, new Vector3())
+        return surfaceRegionContainsPoint(surface.region, [
+          point.x - surface.position[0],
+          point.z - surface.position[2],
+        ])
+      })
+    }
+    if (!shelf.width || !shelf.depth || !shelf.height) return false
+    const margin = 0.08
+    box.min.set(-shelf.width / 2 - margin, -margin, -shelf.depth / 2 - margin)
+    box.max.set(shelf.width / 2 + margin, shelf.height + margin, shelf.depth / 2 + margin)
+    return ray.intersectsBox(box)
+  }
+}

package/src/components/tools/shared/surface-hit.test.ts

@@ -0,0 +1,56 @@
+import { afterEach, expect, test } from 'bun:test'
+import { type ItemEvent, ItemNode, sceneRegistry } from '@pascal-app/core'
+import { Group, Matrix3, Vector3 } from 'three'
+import { itemEventToSurfaceHit } from './surface-hit'
+
+const host = ItemNode.parse({
+  id: 'item_hit-adapter',
+  asset: { id: 'host', name: 'Host', category: 'furniture', thumbnail: '', src: '/host.glb' },
+})
+
+afterEach(() => sceneRegistry.nodes.delete(host.id))
+
+test('matches the legacy host-local point and hit-mesh normal exactly under rotation and scale', () => {
+  const mesh = new Group()
+  mesh.position.set(4.3, 2.1, -3.7)
+  mesh.rotation.set(0.2, 0.7, -0.1)
+  mesh.scale.set(2, 0.7, 1.3)
+  const object = new Group()
+  object.name = 'surface-mesh'
+  object.position.set(0.4, 0.8, -0.2)
+  object.rotation.set(-0.1, 0.3, 0.2)
+  object.scale.set(0.8, 1.4, 0.6)
+  mesh.add(object)
+  mesh.updateMatrixWorld(true)
+  sceneRegistry.nodes.set(host.id, mesh)
+  const event = {
+    node: host,
+    object,
+    position: object.localToWorld(new Vector3(0.37, 0.81, -0.39)).toArray(),
+    localPosition: [0.37, 0.81, -0.39],
+    normal: [0.2, 1, -0.3],
+    nativeEvent: {} as ItemEvent['nativeEvent'],
+    stopPropagation() {},
+  } as ItemEvent
+  const before = structuredClone({ position: event.position, normal: event.normal })
+  const expectedPoint = mesh.worldToLocal(new Vector3(...event.position)).toArray()
+  const expectedNormal = new Vector3(...event.normal!)
+    .applyNormalMatrix(new Matrix3().getNormalMatrix(object.matrixWorld))
+    .normalize().y
+  const hit = itemEventToSurfaceHit(host, event)!
+  expect(hit.point).toEqual(expectedPoint)
+  expect(hit.point).not.toEqual(event.localPosition)
+  expect(hit.normalWorldY).toBe(expectedNormal)
+  expect(hit.meshName).toBe(object.name)
+  expect({ position: event.position, normal: event.normal }).toEqual(before)
+
+  const roundTrip = mesh.localToWorld(new Vector3(...expectedPoint)).toArray()
+  expect(itemEventToSurfaceHit(host, { ...event, position: roundTrip })!.point).toEqual(
+    mesh.worldToLocal(new Vector3(...roundTrip)).toArray(),
+  )
+  expect(itemEventToSurfaceHit(host, { ...event, normal: undefined })!.normalWorldY).toBeNaN()
+})
+
+test('a missing registered host mesh yields no hit', () => {
+  expect(itemEventToSurfaceHit(host, {} as ItemEvent)).toBeNull()
+})

package/src/components/tools/shared/surface-hit.ts

@@ -0,0 +1,23 @@
+import { type AnyNode, type NodeEvent, type SurfaceHit, sceneRegistry } from '@pascal-app/core'
+import { Matrix3, type Matrix4, Vector3 } from 'three'
+
+export function surfaceWorldNormalY(
+  normal: NodeEvent<AnyNode>['normal'],
+  matrixWorld: Matrix4,
+): number {
+  return normal
+    ? new Vector3(...normal)
+        .applyNormalMatrix(new Matrix3().getNormalMatrix(matrixWorld))
+        .normalize().y
+    : Number.NaN
+}
+
+export function itemEventToSurfaceHit(host: AnyNode, event: NodeEvent<AnyNode>): SurfaceHit | null {
+  const mesh = sceneRegistry.nodes.get(host.id)
+  if (!mesh) return null
+  return {
+    point: mesh.worldToLocal(new Vector3(...event.position)).toArray(),
+    normalWorldY: surfaceWorldNormalY(event.normal, event.object.matrixWorld),
+    meshName: event.object.name,
+  }
+}

package/src/components/tools/shared/surface-rejection.test.tsx

@@ -0,0 +1,107 @@
+import { afterEach, beforeEach, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  ItemNode,
+  nodeRegistry,
+  resolveSurfacePlacement,
+  type SceneApi,
+  type SurfaceProvider,
+  type SurfaceRejectReason,
+} from '@pascal-app/core'
+import { registerHostingTestNode } from '../__fixtures__/hosting'
+import { createSurfaceRejectionFeedback } from './surface-rejection'
+
+let restore: () => void
+beforeEach(() => {
+  restore = nodeRegistry._snapshot()
+  nodeRegistry._reset()
+})
+afterEach(() => restore())
+
+for (const reason of [
+  'footprint-outside-surface',
+  'footprint-exceeds-host',
+  'surface-cutout',
+  'child-not-accepted',
+  'host-not-eligible',
+  'no-surface',
+  'invalid-hit',
+] as const) {
+  test(`${reason}: eligible-host diagnostics remain available; ineligible hosts defer silently`, () => {
+    const provider: SurfaceProvider = {
+      childFrame: 'host-local',
+      resolveHit: () =>
+        reason === 'no-surface'
+          ? null
+          : {
+              id: 'top',
+              position: [0, 1, 0],
+              normal: [0, 1, 0],
+              region: {
+                kind: 'rect',
+                size: [1, 1],
+                ...(reason === 'surface-cutout'
+                  ? {
+                      holes: [
+                        [
+                          [-0.2, -0.2],
+                          [0.2, -0.2],
+                          [0.2, 0.2],
+                          [-0.2, 0.2],
+                        ],
+                      ],
+                    }
+                  : {}),
+              },
+            },
+      accepts: () => reason !== 'child-not-accepted',
+    }
+    registerHostingTestNode({
+      kind: 'test-host',
+      schemaVersion: 1,
+      schema: ItemNode,
+      category: 'furnish',
+      defaults: () => ({}),
+      capabilities:
+        reason === 'footprint-exceeds-host'
+          ? { dragBounds: () => ({ size: [0.1, 1, 0.1] }) }
+          : { surfaces: { hosting: provider } },
+    })
+    const feedback = createSurfaceRejectionFeedback()
+    expect(
+      resolveSurfacePlacement({
+        host: {
+          id: 'test_host',
+          type: reason === 'host-not-eligible' ? 'guide' : 'test-host',
+        } as unknown as AnyNode,
+        childKind: 'item',
+        childId: 'item_existing',
+        childFootprint: {
+          size: reason === 'footprint-outside-surface' ? [3, 1, 3] : [0.3, 0.3, 0.3],
+          rotationY: 0,
+        },
+        hit: {
+          point: [reason.startsWith('footprint-') ? 2 : 0, reason === 'invalid-hit' ? NaN : 1, 0],
+          normalWorldY: 1,
+        },
+        scene: { get: () => undefined, nodes: () => ({}) } as unknown as SceneApi,
+        onReject: (r) => feedback.reject(r),
+      }),
+    ).toBeNull()
+    expect(feedback.reason).toBe(reason === 'host-not-eligible' ? null : reason)
+  })
+}
+
+test('the paired grid cannot erase a refusal; a new floor move and cleanup clear it', () => {
+  const changes: (SurfaceRejectReason | null)[] = []
+  const feedback = createSurfaceRejectionFeedback((r) => changes.push(r))
+  const event = {}
+  feedback.reject('footprint-exceeds-host', event)
+  feedback.grid(event)
+  expect(feedback.reason).toBe('footprint-exceeds-host')
+  feedback.grid({})
+  expect(feedback.reason).toBeNull()
+  feedback.reject('surface-cutout', event)
+  feedback.clear()
+  expect(changes).toEqual(['footprint-exceeds-host', null, 'surface-cutout', null])
+})

package/src/components/tools/shared/surface-rejection.tsx

@@ -0,0 +1,43 @@
+import type { SurfaceRejectReason } from '@pascal-app/core'
+
+export function createSurfaceRejectionFeedback(
+  onChange?: (reason: SurfaceRejectReason | null) => void,
+) {
+  let reason: SurfaceRejectReason | null = null
+  let rejectedEvent: object | undefined
+  const set = (next: SurfaceRejectReason | null) => {
+    reason = next
+    onChange?.(next)
+  }
+  return {
+    get reason() {
+      return reason
+    },
+    reject(next: SurfaceRejectReason, event?: object) {
+      if (event) rejectedEvent = event
+      set(next)
+    },
+    clear() {
+      rejectedEvent = undefined
+      set(null)
+    },
+    grid(event: object) {
+      // A host refusal and the floor ray beneath it belong to the same pointer move.
+      if (event !== rejectedEvent) this.clear()
+    },
+  }
+}
+
+// R3F reuses one native event across enter/move dispatch and bubbled ancestor hits.
+export function createSurfaceEventOwnership() {
+  const owners = new WeakMap<object, string>()
+  return {
+    allows(hostId: string, event: object) {
+      const owner = owners.get(event)
+      return owner === undefined || owner === hostId
+    },
+    claim(hostId: string, event: object) {
+      if (!owners.has(event)) owners.set(event, hostId)
+    },
+  }
+}

package/src/components/tools/tool-manager.tsx

@@ -13,6 +13,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { type ComponentType, lazy, Suspense, useMemo } from 'react'
 import { useRegisteredToolEnabled } from '../../hooks/use-registered-tool-enabled'
+import type { ReshapeKind } from '../../lib/interaction/scope'
 import { siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
 import useEditor, { type Phase, type Tool } from '../../store/use-editor'
 import useInteractionScope, {
@@ -33,7 +34,10 @@ import { WallSnapBeaconLayer } from '../editor/wall-snap-beacon-layer'
 import { ElevatorTool } from './elevator/elevator-tool'
 import { MoveTool } from './item/move-tool'
 import { RegistryToolProvider } from './registry-tool-context'
-import { getRegistryAffordanceTool } from './shared/affordance-dispatch'
+import {
+  getRegistryAffordanceTool,
+  preloadRegistryAffordanceTools,
+} from './shared/affordance-dispatch'
 import { FacingPoseIndicator } from './shared/facing-pose-indicator'
 import { SiteBoundaryEditor } from './site/site-boundary-editor'
 import { TerrainSculptTool } from './site/terrain-sculpt-tool'
@@ -44,6 +48,15 @@ import { ZoneTool } from './zone/zone-tool'
 // Cache lazy tool components keyed by their loader so React.lazy isn't
 // re-invoked across renders.
 const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
+// Reshapes with their own arm below; anything else resolves by name.
+const DEDICATED_RESHAPES = new Set<ReshapeKind>([
+  'curve',
+  'hole',
+  'endpoint',
+  'boundary',
+  'control-point',
+  'tangent',
+])
 const registryToolPreloadCache = new WeakMap<AnyNodeDefinition, Promise<void>>()
 
 export function preloadRegistryToolModules(tool: string | null): Promise<void> {
@@ -60,8 +73,7 @@ export function preloadRegistryToolModules(tool: string | null): Promise<void> {
   if (def.system) loaders.push(def.system.module)
   if (def.parametrics?.customPanel) loaders.push(def.parametrics.customPanel)
   if (def.parametrics?.trailingSection) loaders.push(def.parametrics.trailingSection)
-  const moveTool = def.affordanceTools?.move
-  if (moveTool) loaders.push(moveTool)
+  loaders.push(() => preloadRegistryAffordanceTools(tool))
 
   const preload = Promise.allSettled(loaders.map((loader) => loader())).then(() => undefined)
   registryToolPreloadCache.set(def, preload)
@@ -114,6 +126,11 @@ export const ToolManager: React.FC = () => {
   const tangentReshape = useTangentReshape()
   const isCurveReshape = useIsCurveReshape()
   const isToolDrivenReshape = useIsToolDrivenReshape()
+  const registryReshape = useInteractionScope((state) =>
+    state.scope.kind === 'reshaping' && !DEDICATED_RESHAPES.has(state.scope.reshape)
+      ? state.scope.reshape
+      : null,
+  )
   const isFloorplanDrivenReshape = useIsFloorplanDrivenReshape()
   const reshapingNode = useReshapingNode()
   // The endpoint affordance tool's `target` is kind-specific
@@ -384,6 +401,22 @@ export const ToolManager: React.FC = () => {
               </Suspense>
             ) : null
           })()}
+        {/* Reshape kinds without an arm above mount the kind's own affordance tool
+            under the reshape's name (`def.affordanceTools[reshape]`, e.g. wall 'split'). */}
+        {isToolDrivenReshape &&
+          reshapingNode &&
+          registryReshape &&
+          (() => {
+            const RegistryAffordance = getRegistryAffordanceTool(
+              reshapingNode.type,
+              registryReshape,
+            )
+            return RegistryAffordance ? (
+              <Suspense fallback={null}>
+                <RegistryAffordance node={reshapingNode} />
+              </Suspense>
+            ) : null
+          })()}
         {showMover && movingNode.type !== 'building' && (
           <MoveTool
             onNodeMoved={handlePlacedNodeSelected}

package/src/components/tools/zone/zone-tool.tsx

@@ -3,6 +3,7 @@ import {
   emitter,
   type GridEvent,
   type LevelNode,
+  runAsSingleSceneHistoryStep,
   snapPointAlongAngleRay,
   useScene,
   ZoneNode,
@@ -16,6 +17,7 @@ import {
   clearSurfacePlanSnapFeedback,
   resolveSurfacePlanPointSnap,
 } from './../../../lib/surface-plan-snap'
+import { focusedUnitNode } from './../../../lib/units'
 import { snapWorldXZForActiveBuilding } from './../../../lib/world-grid-snap'
 import useEditor, { isAngleSnapActive, isGridSnapActive } from './../../../store/use-editor'
 import { useFloorplanDraftPreview } from './../../../store/use-floorplan-draft-preview'
@@ -27,7 +29,7 @@ const Y_OFFSET = 0.02
  * Creates a zone with the given polygon points
  */
 const commitZoneDrawing = (levelId: LevelNode['id'], points: Array<[number, number]>) => {
-  const { createNode, nodes } = useScene.getState()
+  const { createNode, updateNode, nodes } = useScene.getState()
 
   // Count existing zones for naming and color cycling
   const zoneCount = Object.values(nodes).filter((n) => n.type === 'zone').length
@@ -42,10 +44,17 @@ const commitZoneDrawing = (levelId: LevelNode['id'], points: Array<[number, numb
     color,
   })
 
-  createNode(zone, levelId)
+  const focusedUnit = focusedUnitNode()
 
-  // Select the newly created zone
-  useViewer.getState().setSelection({ zoneId: zone.id })
+  // Joining the focused unit rides in the zone's own undo step.
+  runAsSingleSceneHistoryStep(useScene, () => {
+    createNode(zone, levelId)
+    if (focusedUnit) updateNode(focusedUnit.id, { members: [...focusedUnit.members, zone.id] })
+  })
+
+  // Selecting the zone would end unit focus; while painting a unit the new
+  // zone just joins it and drawing continues.
+  if (!focusedUnit) useViewer.getState().setSelection({ zoneId: zone.id })
 
   // Play structure build sound
   sfxEmitter.emit('sfx:structure-build')