@pascal-app/editor 1.0.3 → 1.0.4

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

@@ -43,6 +43,9 @@ type FloorplanDraftPreviewState = {
   /** 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[]
@@ -59,6 +62,7 @@ type FloorplanDraftPreviewState = {
   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
@@ -102,6 +106,7 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
   fenceDraftStart: null,
   roofDraftStart: null,
   wallRectangleDraftStart: null,
+  wallPolygonDraftPoints: [],
   roofDraftQuarterTurn: false,
   polygonDraftType: null,
   polygonDraftPoints: [],
@@ -126,6 +131,12 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
   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 },
@@ -147,6 +158,7 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
       state.fenceDraftStart === null &&
       state.roofDraftStart === null &&
       state.wallRectangleDraftStart === null &&
+      state.wallPolygonDraftPoints.length === 0 &&
       state.roofDraftQuarterTurn === false &&
       state.polygonDraftType === null &&
       state.polygonDraftPoints.length === 0
@@ -161,6 +173,7 @@ export const useFloorplanDraftPreview = create<FloorplanDraftPreviewState>((set)
             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-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 })
+  })
+})

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

@@ -0,0 +1,139 @@
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from 'zustand'
+import { hasLiveGestures } from '../lib/gesture-lifecycle'
+import { removeWallRegion } from '../lib/paint-regions'
+import { sfxEmitter } from '../lib/sfx-bus'
+import { isTypingTarget } from '../lib/typing-target'
+import useDeleteConfirmation from './use-delete-confirmation'
+import useInteractionScope from './use-interaction-scope'
+
+// The paint region the user last picked on the selected wall (a handle, an
+// outline or a panel row). While it is set, Delete removes that region instead
+// of the wall. Cleared whenever the wall selection changes.
+//
+// `stale` remembers an active region that vanished under the user (undo, another
+// edit) while its wall stayed selected: the next Delete is swallowed rather than
+// deleting the wall the user was not aiming at.
+
+export type ActiveWallRegion = { wallId: string; regionId: string }
+
+type WallRegionSelectionState = {
+  active: ActiveWallRegion | null
+  stale: ActiveWallRegion | null
+  setActive: (active: ActiveWallRegion | null) => void
+  setStale: (stale: ActiveWallRegion | null) => void
+}
+
+export const useWallRegionSelection = create<WallRegionSelectionState>((set) => ({
+  active: null,
+  stale: null,
+  setActive: (active) =>
+    set((state) =>
+      state.active?.wallId === active?.wallId && state.active?.regionId === active?.regionId
+        ? state
+        : active
+          ? { active, stale: null }
+          : { active },
+    ),
+  setStale: (stale) => set((state) => (state.stale === stale ? state : { stale })),
+}))
+
+function isSoleSelection(wallId: string, selectedIds: readonly string[]) {
+  return selectedIds.length === 1 && selectedIds[0] === wallId
+}
+
+function regionExists(wallId: string, regionId: string) {
+  const wall = useScene.getState().nodes[wallId as AnyNodeId]
+  if (wall?.type !== 'wall') return false
+  return wall.faceRegions?.some((region) => region.id === regionId) ?? false
+}
+
+/** The active region, only while its wall is the sole selection and the region still exists. */
+export function resolveActiveWallRegion(): ActiveWallRegion | null {
+  const active = useWallRegionSelection.getState().active
+  if (!active) return null
+  if (!isSoleSelection(active.wallId, useViewer.getState().selection.selectedIds)) return null
+  return regionExists(active.wallId, active.regionId) ? active : null
+}
+
+function resolveStaleWallRegion(): ActiveWallRegion | null {
+  const stale = useWallRegionSelection.getState().stale
+  if (!stale) return null
+  return isSoleSelection(stale.wallId, useViewer.getState().selection.selectedIds) ? stale : null
+}
+
+/** Clears the active (and stale) region unless the selection is still exactly its wall. */
+export function syncWallRegionSelection(selectedIds: readonly string[]) {
+  const { active, stale, setActive, setStale } = useWallRegionSelection.getState()
+  if (active && !isSoleSelection(active.wallId, selectedIds)) setActive(null)
+  if (stale && !isSoleSelection(stale.wallId, selectedIds)) setStale(null)
+}
+
+/** Drops the active region once it no longer exists in the scene. */
+export function syncWallRegionWithScene() {
+  const { active, setActive, setStale } = useWallRegionSelection.getState()
+  if (!active || regionExists(active.wallId, active.regionId)) return
+  setActive(null)
+  const wallStillThere = useScene.getState().nodes[active.wallId as AnyNodeId]?.type === 'wall'
+  const selectedIds = useViewer.getState().selection.selectedIds
+  if (wallStillThere && isSoleSelection(active.wallId, selectedIds)) setStale(active)
+}
+
+/** Keeps the active region in step with scene edits (undo, remote edits). Returns the unsubscribe. */
+export function installWallRegionSceneSync() {
+  return useScene.subscribe((state, previous) => {
+    if (state.nodes !== previous.nodes) syncWallRegionWithScene()
+  })
+}
+
+// Delete belongs to the region only when focus is on the scene or the wall's
+// region list; a focused toolbar button or panel control keeps its own key.
+function isSceneOrRegionListTarget(target: EventTarget | null) {
+  if (!target) return true
+  if (
+    typeof document !== 'undefined' &&
+    (target === document || target === document.body || target === document.documentElement)
+  ) {
+    return true
+  }
+  const element = target as { tagName?: string; closest?: (selector: string) => unknown }
+  if (element.tagName?.toUpperCase() === 'CANVAS') return true
+  return !!element.closest?.('[data-wall-region-list]')
+}
+
+function consume(event: KeyEventLike) {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'target' | 'preventDefault' | 'stopPropagation'>
+
+/**
+ * Delete / Backspace with an active region removes that region (one undo step)
+ * and consumes the key so the global delete never sees it. Mid-gesture, or
+ * right after the active region vanished, the key is swallowed so it cannot
+ * fall through to deleting the wall. Returns whether the key was consumed.
+ */
+export function handleWallRegionDeleteKey(event: KeyEventLike): boolean {
+  if (event.key !== 'Delete' && event.key !== 'Backspace') return false
+  if (isTypingTarget(event.target)) return false
+  if (!isSceneOrRegionListTarget(event.target)) return false
+  if (useDeleteConfirmation.getState().request) return false
+  const active = resolveActiveWallRegion()
+  const stale = active ? null : resolveStaleWallRegion()
+  if (!(active || stale)) return false
+
+  consume(event)
+  const busy = useInteractionScope.getState().scope.kind !== 'idle' || hasLiveGestures()
+  if (busy) return true
+  if (stale) {
+    useWallRegionSelection.getState().setStale(null)
+    return true
+  }
+  if (!active) return true
+  // Cleared first so the scene sync does not mistake this removal for a vanished region.
+  useWallRegionSelection.getState().setActive(null)
+  if (removeWallRegion(active.wallId, active.regionId)) sfxEmitter.emit('sfx:structure-delete')
+  return true
+}