@pascal-app/editor 1.0.1 → 1.0.4

package/src/store/use-floorplan-draft-preview.ts

@@ -40,6 +40,12 @@ type FloorplanDraftPreviewState = {
   wallDraftStart: WallPlanPoint | null
   fenceDraftStart: WallPlanPoint | null
   roofDraftStart: WallPlanPoint | null
+  /** First corner of an open rectangle-wall draft; the live cursor is the
+   *  opposite corner, so the rectangle tool publishes only per click. */
+  wallRectangleDraftStart: WallPlanPoint | null
+  /** Corners placed so far by an open Polygon room. Draft only — no wall is
+   *  written until the polygon completes (`lib/wall-polygon-draft.ts`). */
+  wallPolygonDraftPoints: WallPlanPoint[]
   roofDraftQuarterTurn: boolean
   polygonDraftType: FloorplanPolygonDraftType | null
   polygonDraftPoints: WallPlanPoint[]
@@ -55,6 +61,8 @@ type FloorplanDraftPreviewState = {
   setWallDraftStart(point: WallPlanPoint | null): void
   setFenceDraftStart(point: WallPlanPoint | null): void
   setRoofDraftStart(point: WallPlanPoint | null): void
+  setWallRectangleDraftStart(point: WallPlanPoint | null): void
+  setWallPolygonDraftPoints(points: readonly WallPlanPoint[]): void
   setRoofDraftQuarterTurn(quarterTurn: boolean): void
   setPolygonDraft(type: FloorplanPolygonDraftType | null, points: readonly WallPlanPoint[]): void
   reset(): void
@@ -74,7 +82,8 @@ function setPlanPointField(
     | 'roofDraftEnd'
     | 'roofDraftStart'
     | 'wallDraftEnd'
-    | 'wallDraftStart',
+    | 'wallDraftStart'
+    | 'wallRectangleDraftStart',
   point: WallPlanPoint | null,
 ) {
   return (
@@ -96,6 +105,8 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
   wallDraftStart: null,
   fenceDraftStart: null,
   roofDraftStart: null,
+  wallRectangleDraftStart: null,
+  wallPolygonDraftPoints: [],
   roofDraftQuarterTurn: false,
   polygonDraftType: null,
   polygonDraftPoints: [],
@@ -119,6 +130,13 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
   setWallDraftStart: (point) => set(setPlanPointField('wallDraftStart', point)),
   setFenceDraftStart: (point) => set(setPlanPointField('fenceDraftStart', point)),
   setRoofDraftStart: (point) => set(setPlanPointField('roofDraftStart', point)),
+  setWallRectangleDraftStart: (point) => set(setPlanPointField('wallRectangleDraftStart', point)),
+  setWallPolygonDraftPoints: (points) =>
+    set((state) =>
+      planPointsEqual(state.wallPolygonDraftPoints, points)
+        ? state
+        : { wallPolygonDraftPoints: points.map(([x, z]) => [x, z]) },
+    ),
   setRoofDraftQuarterTurn: (quarterTurn) =>
     set((state) =>
       state.roofDraftQuarterTurn === quarterTurn ? state : { roofDraftQuarterTurn: quarterTurn },
@@ -139,6 +157,8 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
       state.wallDraftStart === null &&
       state.fenceDraftStart === null &&
       state.roofDraftStart === null &&
+      state.wallRectangleDraftStart === null &&
+      state.wallPolygonDraftPoints.length === 0 &&
       state.roofDraftQuarterTurn === false &&
       state.polygonDraftType === null &&
       state.polygonDraftPoints.length === 0
@@ -152,6 +172,8 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
             wallDraftStart: null,
             fenceDraftStart: null,
             roofDraftStart: null,
+            wallRectangleDraftStart: null,
+            wallPolygonDraftPoints: [],
             roofDraftQuarterTurn: false,
             polygonDraftType: null,
             polygonDraftPoints: [],

package/src/store/use-floorplan-marquee.ts

@@ -13,6 +13,7 @@
 
 import type { WallPlanPoint } from '@pascal-app/core'
 import { create } from 'zustand'
+import useInteractionScope from './use-interaction-scope'
 
 export type FloorplanMarqueeDrag = {
   pointerId: number
@@ -34,7 +35,10 @@ type FloorplanMarqueeState = {
 
 export const useFloorplanMarquee = create<FloorplanMarqueeState>((set) => ({
   drag: null,
-  begin: (drag) => set({ drag }),
+  begin: (drag) => {
+    useInteractionScope.getState().begin({ kind: 'box-select' })
+    set({ drag })
+  },
   setCurrent: (point) =>
     set((state) => {
       const prev = state.drag
@@ -44,7 +48,13 @@ export const useFloorplanMarquee = create<FloorplanMarqueeState>((set) => ({
       }
       return { drag: { ...prev, currentPlanPoint: point } }
     }),
-  reset: () => set((state) => (state.drag === null ? state : { drag: null })),
+  reset: () => {
+    set((state) => {
+      if (!state.drag) return state
+      useInteractionScope.getState().endIf((scope) => scope.kind === 'box-select')
+      return { drag: null }
+    })
+  },
 }))
 
 export default useFloorplanMarquee

package/src/store/use-interaction-scope.ts

@@ -1,6 +1,13 @@
 'use client'
 
-import { type AnyNode, type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  collectSubtree,
+  useLiveNodeOverrides,
+  useLiveTransforms,
+  useScene,
+} from '@pascal-app/core'
 import {
   beginPerfAction,
   commitPerfAction,
@@ -10,6 +17,7 @@ import {
 import { useRef } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/react/shallow'
+import { discardFreshPlacementSubtree } from '../lib/fresh-planar-placement'
 import {
   type ActiveInteractionScope,
   controlPointReshapeInfo,
@@ -25,6 +33,7 @@ import {
   reshapingNodeId,
   tangentReshapeInfo,
 } from '../lib/interaction/scope'
+import usePlacementPreview from './use-placement-preview'
 
 // The authoritative interaction state machine. A single owner holds exactly one
 // scope at a time. `begin` enters an interaction (atomically replacing any prior
@@ -33,8 +42,21 @@ import {
 // the end of its interaction. There is no setter that can leave the store in an
 // illegal half-state: the only writable shape is `InteractionScope`.
 
+type SubtreeCreation = {
+  rootId: AnyNodeId
+  node: AnyNode
+  hydrationId: object | null
+}
+type OwnedSubtree = { creation: SubtreeCreation; gesture: object }
+
 export type InteractionScopeState = {
   scope: InteractionScope
+  gesture: object | null
+  pendingSubtree: SubtreeCreation | null
+  ownedSubtree: OwnedSubtree | null
+  noteSubtreeCreation: (node: AnyNode) => void
+  adoptSubtree: (rootId: AnyNodeId) => boolean
+  finishSubtree: (rootId: AnyNodeId) => void
   // Enter an interaction. If one is already active it is ended first, so the
   // store is always single-owner.
   begin: (scope: ActiveInteractionScope) => void
@@ -101,9 +123,62 @@ function commitScopePerfAction(): void {
 
 const useInteractionScope = create<InteractionScopeState>((set, get) => ({
   scope: IDLE_SCOPE,
+  gesture: null,
+  pendingSubtree: null,
+  ownedSubtree: null,
+  noteSubtreeCreation: (node) =>
+    set({
+      pendingSubtree: { rootId: node.id, node, hydrationId: useScene.getState().hydrationId },
+    }),
+  adoptSubtree: (rootId) => {
+    const state = get()
+    if (state.ownedSubtree?.creation.rootId === rootId)
+      return (
+        state.ownedSubtree.gesture === state.gesture &&
+        isCurrentCreation(state.ownedSubtree.creation)
+      )
+    const creation = state.pendingSubtree
+    if (
+      !creation ||
+      creation.rootId !== rootId ||
+      !state.gesture ||
+      movingNodeOf(state.scope)?.id !== rootId ||
+      !isCurrentCreation(creation)
+    )
+      return false
+    set({ ownedSubtree: { creation, gesture: state.gesture }, pendingSubtree: null })
+    return true
+  },
+  finishSubtree: (rootId) =>
+    set((state) => {
+      if (state.ownedSubtree?.creation.rootId !== rootId && state.pendingSubtree?.rootId !== rootId)
+        return state
+      return {
+        ownedSubtree: state.ownedSubtree?.creation.rootId === rootId ? null : state.ownedSubtree,
+        pendingSubtree: state.pendingSubtree?.rootId === rootId ? null : state.pendingSubtree,
+      }
+    }),
   begin: (scope) => {
+    const state = get()
+    const nodeId = movingNodeOf(scope)?.id
+    const creation = state.ownedSubtree?.creation ?? state.pendingSubtree
+    if (
+      nodeId &&
+      nodeId === movingNodeOf(state.scope)?.id &&
+      creation?.rootId === nodeId &&
+      isCurrentCreation(creation)
+    ) {
+      set({ scope })
+      return
+    }
     beginScopePerfAction(scope)
-    set({ scope })
+    set({
+      scope,
+      gesture: {},
+      ownedSubtree: null,
+      pendingSubtree:
+        get().pendingSubtree?.rootId === movingNodeOf(scope)?.id ? get().pendingSubtree : null,
+    })
   },
   update: (patch) =>
     set((state) => {
@@ -114,18 +189,92 @@ const useInteractionScope = create<InteractionScopeState>((set, get) => ({
   end: () => {
     if (get().scope.kind === 'idle') return
     commitScopePerfAction()
-    set({ scope: IDLE_SCOPE })
+    set({ scope: IDLE_SCOPE, gesture: null, ownedSubtree: null, pendingSubtree: null })
   },
   endIf: (match) => {
     const scope = get().scope
     if (scope.kind === 'idle') return
     if (match(scope)) {
       commitScopePerfAction()
-      set({ scope: IDLE_SCOPE })
+      set({ scope: IDLE_SCOPE, gesture: null, ownedSubtree: null, pendingSubtree: null })
     }
   },
 }))
 
+function isCurrentCreation(creation: SubtreeCreation): boolean {
+  const scene = useScene.getState()
+  return (
+    scene.hydrationId === creation.hydrationId && scene.nodes[creation.rootId] === creation.node
+  )
+}
+
+export function isInteractionSubtreeDraft(
+  rootId = movingNodeOf(useInteractionScope.getState().scope)?.id,
+): boolean {
+  const state = useInteractionScope.getState()
+  const creation = state.ownedSubtree?.creation ?? state.pendingSubtree
+  return Boolean(
+    creation &&
+      state.gesture &&
+      rootId === movingNodeOf(state.scope)?.id &&
+      creation.rootId === rootId &&
+      (!state.ownedSubtree || state.ownedSubtree.gesture === state.gesture) &&
+      isCurrentCreation(creation),
+  )
+}
+
+// Track the identity of the factory-created node through scene patches, never through metadata.
+// Hydration or deletion invalidates the creation even if a later scene reuses the same id.
+useScene.subscribe((scene, previous) => {
+  const state = useInteractionScope.getState()
+  for (const creation of [state.pendingSubtree, state.ownedSubtree?.creation]) {
+    if (!creation) continue
+    if (
+      scene.hydrationId !== creation.hydrationId ||
+      previous.nodes[creation.rootId] !== creation.node ||
+      !scene.nodes[creation.rootId]
+    ) {
+      state.finishSubtree(creation.rootId)
+    } else creation.node = scene.nodes[creation.rootId]!
+  }
+})
+
+// Factory drafts belong to their gesture even before a mover mounts to adopt them.
+useInteractionScope.subscribe((state, previous) => {
+  if (
+    state.gesture === previous.gesture &&
+    movingNodeOf(state.scope)?.id === movingNodeOf(previous.scope)?.id
+  )
+    return
+  const owned =
+    previous.ownedSubtree ??
+    (previous.pendingSubtree && previous.gesture
+      ? { creation: previous.pendingSubtree, gesture: previous.gesture }
+      : null)
+  if (
+    !owned ||
+    owned.gesture !== previous.gesture ||
+    movingNodeOf(previous.scope)?.id !== owned.creation.rootId ||
+    !isCurrentCreation(owned.creation)
+  )
+    return
+  const node = owned.creation.node
+  const subtree = collectSubtree(useScene.getState().nodes, node.id)
+  const temporal = useScene.temporal.getState()
+  const wasTracking = temporal.isTracking
+  temporal.pause()
+  try {
+    discardFreshPlacementSubtree(node.id)
+    for (const entry of subtree ? [subtree.root, ...subtree.descendants] : []) {
+      useLiveTransforms.getState().clear(entry.id)
+      useLiveNodeOverrides.getState().clear(entry.id)
+    }
+    if (usePlacementPreview.getState().node?.id === node.id) usePlacementPreview.getState().clear()
+  } finally {
+    if (wasTracking) temporal.resume()
+  }
+})
+
 // Derived, reference-stable views of the active scope, replacing the legacy
 // `useEditor.activeHandleDrag` / `useEditor.editingHole` flags. `useShallow`
 // keeps the result reference-stable across unrelated scope changes, so hot-path
@@ -190,8 +339,8 @@ export const useReshapingNode = (): AnyNode | null => {
 // The node currently being placed or moved. Replaces the legacy
 // `useEditor.movingNode` flag. Unlike `useReshapingNode`, no `useRef` snapshot is
 // needed: the node is carried inline in the scope and set once at `begin`, so it
-// is already a stable reference for the whole gesture (nothing calls `begin` mid
-// drag). Returns null whenever no placing/moving interaction is active.
+// remains stable until a caller explicitly re-arms the same interaction.
+// Returns null whenever no placing/moving interaction is active.
 export const useMovingNode = (): AnyNode | null => useInteractionScope((s) => movingNodeOf(s.scope))
 
 // Imperative (non-React) read for event handlers / effects.

package/src/store/use-quick-measurement-hud.ts

@@ -1,6 +1,6 @@
 import type { QuickMeasurementReport } from '@pascal-app/core'
 import { create } from 'zustand'
-import type { ViewMode } from './use-editor'
+import type { VisibleScene } from './view-layout'
 
 export type QuickMeasurementHudSource = '2d' | '3d'
 
@@ -55,9 +55,9 @@ export const useQuickMeasurementHud = create<QuickMeasurementHudState>((set) =>
 
 export function selectQuickMeasurementHudEntry(
   state: QuickMeasurementHudState,
-  viewMode: ViewMode,
+  scene: VisibleScene | null,
 ): QuickMeasurementHudEntry | null {
-  const source = viewMode === 'split' ? state.activeSource : viewMode
+  const source = scene === 'split' ? state.activeSource : scene
   return source ? state.sources[source] : null
 }
 

package/src/store/use-stair-build-preview.ts

@@ -17,11 +17,12 @@ type StairBuildPreviewState = {
   point: StairPreviewPoint | null
   /** Yaw (radians), cycled by R / T. */
   rotation: number
+  rise: number | null
   /** Set the snapped point. No-ops (skips the store update, so subscribers
    *  don't re-render) when the point is unchanged — `grid:move` fires far more
    *  often than the snapped cell actually changes. */
   setPoint(point: StairPreviewPoint | null): void
-  setPreview(point: StairPreviewPoint | null, rotation: number): void
+  setPreview(point: StairPreviewPoint | null, rotation: number, rise?: number | null): void
   rotateBy(deltaRadians: number): void
   reset(): void
 }
@@ -29,6 +30,7 @@ type StairBuildPreviewState = {
 export const useStairBuildPreview = create<StairBuildPreviewState>((set) => ({
   point: null,
   rotation: 0,
+  rise: null,
   setPoint: (point) =>
     set((state) => {
       const prev = state.point
@@ -36,18 +38,24 @@ export const useStairBuildPreview = create<StairBuildPreviewState>((set) => ({
       if (point && prev && prev[0] === point[0] && prev[1] === point[1]) return state
       return { point: point ? [point[0], point[1]] : null }
     }),
-  setPreview: (point, rotation) =>
+  setPreview: (point, rotation, rise) =>
     set((state) => {
       const samePoint =
         (!point && !state.point) ||
         Boolean(point && state.point && state.point[0] === point[0] && state.point[1] === point[1])
-      return samePoint && state.rotation === rotation
+      return samePoint && state.rotation === rotation && (rise === undefined || rise === state.rise)
         ? state
-        : { point: point ? [point[0], point[1]] : null, rotation }
+        : {
+            point: point ? [point[0], point[1]] : null,
+            rotation,
+            rise: rise === undefined ? state.rise : rise,
+          }
     }),
   rotateBy: (deltaRadians) => set((state) => ({ rotation: state.rotation + deltaRadians })),
   reset: () =>
     set((state) =>
-      state.point === null && state.rotation === 0 ? state : { point: null, rotation: 0 },
+      state.point === null && state.rotation === 0 && state.rise === null
+        ? state
+        : { point: null, rotation: 0, rise: null },
     ),
 }))

package/src/store/use-wall-move-ghosts.ts

@@ -10,8 +10,10 @@ import { create } from 'zustand'
  * as translucent ghost meshes mid-drag; the 2D `wallFloorplanMoveTarget`
  * writes here so the floor-plan SVG layer can render the same hint.
  *
- * Writer: `packages/nodes/src/wall/floorplan-move.ts` (on each `apply`,
- * cleared on `commit` and by the move overlay's cleanup).
+ * Writers: `packages/nodes/src/wall/floorplan-move.ts` (on each `apply`,
+ * cleared on `commit` and by the move overlay's cleanup), and the wall push
+ * preview in `lib/room-handle-drag.ts` (the pieces a push would create,
+ * cleared when the push previews again, commits or cancels).
  * Reader: `packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx`.
  */
 export type WallMoveGhostBridge = {

package/src/store/use-wall-region-handles-selection.test.ts

@@ -0,0 +1,222 @@
+import { afterAll, beforeEach, describe, expect, test } from 'bun:test'
+import { type AnyNodeId, useScene, WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useInteractionScope from './use-interaction-scope'
+import {
+  handleWallRegionDeleteKey,
+  installWallRegionSceneSync,
+  resolveActiveWallRegion,
+  syncWallRegionSelection,
+  useWallRegionSelection,
+} from './use-wall-region-handles-selection'
+
+type RafFn = (callback: (time: number) => void) => number
+;(globalThis as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (callback) => {
+  callback(0)
+  return 0
+}
+;(globalThis as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??= () => {}
+
+const WALL_ID = 'wall_region-selection' as AnyNodeId
+const OTHER_WALL_ID = 'wall_region-selection-other' as AnyNodeId
+
+function keyEvent(key: string, target: unknown = null) {
+  const calls = { prevented: 0, stopped: 0 }
+  return {
+    calls,
+    event: {
+      key,
+      target: target as EventTarget | null,
+      preventDefault: () => {
+        calls.prevented += 1
+      },
+      stopPropagation: () => {
+        calls.stopped += 1
+      },
+    },
+  }
+}
+
+// The bun env has no DOM: just enough of `document` and elements for the focus check.
+const originalDocument = (globalThis as { document?: unknown }).document
+const body = { tagName: 'BODY', closest: () => null }
+;(globalThis as { document?: unknown }).document = { body, documentElement: { tagName: 'HTML' } }
+
+function element(tagName: string, ancestors: string[] = []) {
+  return {
+    tagName,
+    closest: (selector: string) => (ancestors.includes(selector) ? {} : null),
+  }
+}
+
+const uninstallSceneSync = installWallRegionSceneSync()
+
+const wall = () => useScene.getState().nodes[WALL_ID] as WallNode | undefined
+
+describe('active wall region', () => {
+  beforeEach(() => {
+    useScene.setState({ nodes: {}, rootNodeIds: [], dirtyNodes: new Set() } as never)
+    for (const id of [WALL_ID, OTHER_WALL_ID]) {
+      useScene.getState().createNode(
+        WallNode.parse({
+          id,
+          start: [0, 0],
+          end: [4, 0],
+          faceRegions: [
+            { id: 'r1', face: 'a', v1: 0.9, finish: 'library:paint-white' },
+            { id: 'r2', face: 'b', u0: 1, finish: 'library:paint-white' },
+          ],
+        }),
+      )
+    }
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().resume()
+    useViewer.getState().setSelection({ selectedIds: [WALL_ID] })
+    useWallRegionSelection.setState({ active: null, stale: null })
+    useInteractionScope.getState().end()
+  })
+
+  afterAll(() => {
+    uninstallSceneSync()
+    useWallRegionSelection.setState({ active: null, stale: null })
+    useInteractionScope.getState().end()
+    useViewer.getState().setSelection({ selectedIds: [] })
+    ;(globalThis as { document?: unknown }).document = originalDocument
+  })
+
+  test('Delete removes only the active region, as one undo step', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r2' })
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(true)
+    expect(calls).toEqual({ prevented: 1, stopped: 1 })
+    expect(wall()).toBeDefined()
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r1'])
+    expect(useWallRegionSelection.getState().active).toBeNull()
+    expect(useScene.temporal.getState().pastStates).toHaveLength(1)
+    useScene.temporal.getState().undo()
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r1', 'r2'])
+  })
+
+  test('Backspace works too; the last region clears the field', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    expect(handleWallRegionDeleteKey(keyEvent('Backspace').event)).toBe(true)
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r2' })
+    expect(handleWallRegionDeleteKey(keyEvent('Backspace').event)).toBe(true)
+    expect(wall()!.faceRegions).toBeUndefined()
+  })
+
+  test('without an active region the key passes through to the wall delete', () => {
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(false)
+    expect(calls).toEqual({ prevented: 0, stopped: 0 })
+    expect(wall()!.faceRegions).toHaveLength(2)
+  })
+
+  test('typing in a field and other keys are left alone', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const input = { closest: (selector: string) => (selector.includes('input') ? {} : null) }
+    expect(handleWallRegionDeleteKey(keyEvent('Backspace', input).event)).toBe(false)
+    expect(handleWallRegionDeleteKey(keyEvent('Escape').event)).toBe(false)
+    expect(wall()!.faceRegions).toHaveLength(2)
+  })
+
+  test('an active region on a wall that is no longer selected is ignored and cleared', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    useViewer.getState().setSelection({ selectedIds: [OTHER_WALL_ID] })
+    expect(resolveActiveWallRegion()).toBeNull()
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+    syncWallRegionSelection([OTHER_WALL_ID])
+    expect(useWallRegionSelection.getState().active).toBeNull()
+    const other = useScene.getState().nodes[OTHER_WALL_ID] as WallNode
+    expect(other.faceRegions).toHaveLength(2)
+  })
+
+  test('a selection that still holds just the wall keeps the active region', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    syncWallRegionSelection([WALL_ID])
+    expect(useWallRegionSelection.getState().active).toEqual({ wallId: WALL_ID, regionId: 'r1' })
+    syncWallRegionSelection([WALL_ID, OTHER_WALL_ID])
+    expect(useWallRegionSelection.getState().active).toBeNull()
+  })
+
+  test('focus on the body or the canvas acts on the region', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete', body).event)).toBe(true)
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r2' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete', element('CANVAS')).event)).toBe(true)
+    expect(wall()!.faceRegions).toBeUndefined()
+  })
+
+  test('focus on a toolbar button leaves the key alone', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const { event, calls } = keyEvent('Delete', element('BUTTON'))
+    expect(handleWallRegionDeleteKey(event)).toBe(false)
+    expect(calls).toEqual({ prevented: 0, stopped: 0 })
+    expect(wall()!.faceRegions).toHaveLength(2)
+  })
+
+  test('focus inside the wall region list acts on the region', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const row = element('BUTTON', ['[data-wall-region-list]'])
+    expect(handleWallRegionDeleteKey(keyEvent('Delete', row).event)).toBe(true)
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r2'])
+  })
+
+  test('mid-gesture the key is swallowed: nothing deleted, the wall stays', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    useInteractionScope
+      .getState()
+      .begin({ kind: 'handle-drag', nodeId: WALL_ID, handle: 'paint-region-bound' })
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(true)
+    expect(calls).toEqual({ prevented: 1, stopped: 1 })
+    expect(wall()!.faceRegions).toHaveLength(2)
+    expect(useWallRegionSelection.getState().active).toEqual({ wallId: WALL_ID, regionId: 'r1' })
+  })
+
+  test('mid-gesture without an active region the key passes through', () => {
+    useInteractionScope
+      .getState()
+      .begin({ kind: 'handle-drag', nodeId: WALL_ID, handle: 'paint-region-bound' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+  })
+
+  test('a region that vanished under the user swallows the next Delete once', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const regions = wall()!.faceRegions!.filter((region) => region.id !== 'r1')
+    useScene.getState().updateNode(WALL_ID, { faceRegions: regions })
+    expect(useWallRegionSelection.getState().active).toBeNull()
+    expect(useWallRegionSelection.getState().stale).toEqual({ wallId: WALL_ID, regionId: 'r1' })
+
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(true)
+    expect(calls).toEqual({ prevented: 1, stopped: 1 })
+    expect(wall()).toBeDefined()
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r2'])
+    expect(useWallRegionSelection.getState().stale).toBeNull()
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+  })
+
+  test('removing the active region with Delete does not leave it stale', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(true)
+    expect(useWallRegionSelection.getState().stale).toBeNull()
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+  })
+
+  test('a selection change clears the stale region, so Delete falls through', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const regions = wall()!.faceRegions!.filter((region) => region.id !== 'r1')
+    useScene.getState().updateNode(WALL_ID, { faceRegions: regions })
+    expect(useWallRegionSelection.getState().stale).not.toBeNull()
+
+    useViewer.getState().setSelection({ selectedIds: [OTHER_WALL_ID] })
+    syncWallRegionSelection([OTHER_WALL_ID])
+    useViewer.getState().setSelection({ selectedIds: [WALL_ID] })
+    syncWallRegionSelection([WALL_ID])
+    expect(useWallRegionSelection.getState().stale).toBeNull()
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(false)
+    expect(calls).toEqual({ prevented: 0, stopped: 0 })
+  })
+})