@pascal-app/editor 0.7.0 → 0.9.1

package/src/hooks/use-auto-save.ts

@@ -9,7 +9,7 @@ const AUTOSAVE_DEBOUNCE_MS = 1000
 export type SaveStatus = 'idle' | 'pending' | 'saving' | 'saved' | 'paused' | 'error'
 
 interface UseAutoSaveOptions {
-  onSave?: (scene: SceneGraph) => Promise<void>
+  onSave?: (scene: SceneGraph, options?: { keepalive?: boolean }) => Promise<void>
   onDirty?: () => void
   onSaveStatusChange?: (status: SaveStatus) => void
   isVersionPreviewMode?: boolean
@@ -60,6 +60,7 @@ export function useAutoSave({
   // Stable subscription to scene changes
   useEffect(() => {
     let lastNodesSnapshot = JSON.stringify(useScene.getState().nodes)
+    let lastNodeCount = Object.keys(useScene.getState().nodes).length
 
     async function executeSave() {
       if (isLoadingSceneRef.current || isVersionPreviewModeRef.current) {
@@ -71,6 +72,19 @@ export function useAutoSave({
       const { nodes, rootNodeIds } = useScene.getState()
       const sceneGraph = { nodes, rootNodeIds } as SceneGraph
 
+      // Guard: refuse to autosave if the scene went from populated to nearly empty.
+      // This catches accidental full deletions before they're persisted.
+      const currentNodeCount = Object.keys(nodes).length
+      const STRUCTURAL_NODE_COUNT = 4 // site + building + levels (empty scene skeleton)
+      if (lastNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT) {
+        console.warn(
+          `[autosave] Blocked: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
+        )
+        setSaveStatus('error')
+        return
+      }
+      lastNodeCount = currentNodeCount
+
       isSavingRef.current = true
       pendingSaveRef.current = false
       setSaveStatus('saving')
@@ -134,23 +148,30 @@ export function useAutoSave({
       }, AUTOSAVE_DEBOUNCE_MS)
     })
 
+    // Flush any unsaved change while the page is going away. The network
+    // save MUST set `keepalive` — a normal fetch is cancelled by the browser
+    // the moment the page unloads, so a quick refresh right after an edit
+    // would otherwise drop the change entirely. `pagehide` fires in cases
+    // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
       if (!hasDirtyChangesRef.current) return
+      hasDirtyChangesRef.current = false
       const { nodes, rootNodeIds } = useScene.getState()
       const sceneGraph = { nodes, rootNodeIds } as SceneGraph
       if (onSaveRef.current) {
-        onSaveRef.current(sceneGraph).catch(() => {})
+        onSaveRef.current(sceneGraph, { keepalive: true }).catch(() => {})
       } else {
         saveSceneToLocalStorage(sceneGraph)
       }
-      hasDirtyChangesRef.current = false
     }
 
     window.addEventListener('beforeunload', flushOnExit)
+    window.addEventListener('pagehide', flushOnExit)
 
     return () => {
       executeSaveRef.current = null
       window.removeEventListener('beforeunload', flushOnExit)
+      window.removeEventListener('pagehide', flushOnExit)
       if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
       flushOnExit()
       unsubscribe()

package/src/hooks/use-ceiling-events.ts

@@ -0,0 +1,175 @@
+import {
+  type AnyNodeId,
+  type CeilingEvent,
+  type CeilingNode,
+  emitter,
+  resolveLevelId,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import { type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
+import useEditor from '../store/use-editor'
+
+const UP = new Vector3(0, 1, 0)
+
+/** Ray-casting point-in-polygon on ceiling-local [x, z] tuples. */
+function pointInPolygon(x: number, z: number, polygon: Array<[number, number]>): boolean {
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const a = polygon[i]!
+    const b = polygon[j]!
+    const intersects =
+      a[1] > z !== b[1] > z && x < ((b[0] - a[0]) * (z - a[1])) / (b[1] - a[1]) + a[0]
+    if (intersects) inside = !inside
+  }
+  return inside
+}
+
+/**
+ * Reliable pointer events for placing ceiling-attached items.
+ *
+ * Mirrors {@link useGridEvents} (the floor path): rather than relying on the
+ * thin, single-sided `ceiling-grid` overlay mesh to be hit by R3F's raycaster —
+ * which misses from the "wrong" camera side, near polygon edges/holes, or while
+ * the overlay is mid-reveal, dropping the commit click even though the green box
+ * still shows — it intersects a math plane at each ceiling's height (double-sided,
+ * so it hits from above or below) and point-in-polygon tests the hit. Emits
+ * `ceiling:enter/move/leave/click` so both the placement coordinator and the 2D
+ * floor-plan item preview keep working.
+ *
+ * Active only while a ceiling-attached item is being placed or moved. The
+ * `ceiling-grid` mesh no longer emits these events (see `CeilingRenderer`), so
+ * this is the single, reliable source.
+ */
+export function useCeilingEvents() {
+  const { camera, gl } = useThree()
+  const raycaster = useRef(new Raycaster())
+  const pointer = useRef(new Vector2())
+  const plane = useRef(new Plane(UP.clone(), 0))
+  const worldHit = useRef(new Vector3())
+  const meshWorld = useRef(new Vector3())
+  const hoveredRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const canvas = gl.domElement
+
+    const isActive = (): boolean => {
+      const ed = useEditor.getState()
+      if (ed.selectedItem?.attachTo === 'ceiling') return true
+      const moving = ed.movingNode
+      return moving?.type === 'item' && moving.asset?.attachTo === 'ceiling'
+    }
+
+    type Hit = { node: CeilingNode; mesh: Object3D; world: Vector3; local: Vector3 }
+
+    // The ceiling on the active level whose plane the cursor ray crosses inside
+    // its polygon, nearest the camera.
+    const pick = (nativeEvent: PointerEvent | MouseEvent): Hit | null => {
+      const activeLevelId = useViewer.getState().selection.levelId
+      if (!activeLevelId) return null
+
+      const rect = canvas.getBoundingClientRect()
+      pointer.current.x = ((nativeEvent.clientX - rect.left) / rect.width) * 2 - 1
+      pointer.current.y = -((nativeEvent.clientY - rect.top) / rect.height) * 2 + 1
+      raycaster.current.setFromCamera(pointer.current, camera)
+
+      const nodes = useScene.getState().nodes
+      const ceilingIds = sceneRegistry.byType.ceiling
+      if (!ceilingIds) return null
+
+      let best: Hit | null = null
+      let bestDist = Number.POSITIVE_INFINITY
+
+      for (const id of ceilingIds) {
+        const node = nodes[id as AnyNodeId] as CeilingNode | undefined
+        if (!node || node.type !== 'ceiling' || node.polygon.length < 3) continue
+        if (resolveLevelId(node, nodes) !== activeLevelId) continue
+        const mesh = sceneRegistry.nodes.get(id)
+        if (!mesh) continue
+
+        mesh.getWorldPosition(meshWorld.current)
+        plane.current.set(UP, -meshWorld.current.y)
+        if (!raycaster.current.ray.intersectPlane(plane.current, worldHit.current)) continue
+
+        const local = mesh.worldToLocal(worldHit.current.clone())
+        if (!pointInPolygon(local.x, local.z, node.polygon)) continue
+
+        const dist = raycaster.current.ray.origin.distanceToSquared(worldHit.current)
+        if (dist < bestDist) {
+          bestDist = dist
+          best = { node, mesh, world: worldHit.current.clone(), local }
+        }
+      }
+      return best
+    }
+
+    const buildEvent = (hit: Hit, nativeEvent: PointerEvent | MouseEvent): CeilingEvent => ({
+      node: hit.node,
+      position: [hit.world.x, hit.world.y, hit.world.z],
+      localPosition: [hit.local.x, hit.local.y, hit.local.z],
+      normal: [0, 1, 0],
+      object: hit.mesh,
+      stopPropagation: () => {},
+      nativeEvent: nativeEvent as never,
+    })
+
+    const emitLeave = (nativeEvent: PointerEvent | MouseEvent) => {
+      const id = hoveredRef.current
+      if (!id) return
+      hoveredRef.current = null
+      const node = useScene.getState().nodes[id as AnyNodeId] as CeilingNode | undefined
+      const mesh = sceneRegistry.nodes.get(id)
+      if (!node || !mesh) return
+      emitter.emit(
+        'ceiling:leave',
+        buildEvent(
+          { node, mesh, world: meshWorld.current.clone(), local: new Vector3() },
+          nativeEvent,
+        ),
+      )
+    }
+
+    const onMove = (e: PointerEvent) => {
+      if (!isActive()) {
+        emitLeave(e)
+        return
+      }
+      const hit = pick(e)
+      if (!hit) {
+        emitLeave(e)
+        return
+      }
+      const ev = buildEvent(hit, e)
+      if (hoveredRef.current !== hit.node.id) {
+        if (hoveredRef.current) emitLeave(e)
+        hoveredRef.current = hit.node.id
+        emitter.emit('ceiling:enter', ev)
+      }
+      emitter.emit('ceiling:move', ev)
+    }
+
+    const onClick = (e: MouseEvent) => {
+      if (useViewer.getState().cameraDragging) return
+      if (e.button !== 0) return
+      if (!isActive()) return
+      const hit = pick(e)
+      if (!hit) return
+      emitter.emit('ceiling:click', buildEvent(hit, e))
+    }
+
+    const onPointerLeave = (e: PointerEvent) => emitLeave(e)
+
+    canvas.addEventListener('pointermove', onMove)
+    canvas.addEventListener('click', onClick)
+    canvas.addEventListener('pointerleave', onPointerLeave)
+
+    return () => {
+      canvas.removeEventListener('pointermove', onMove)
+      canvas.removeEventListener('click', onClick)
+      canvas.removeEventListener('pointerleave', onPointerLeave)
+    }
+  }, [camera, gl])
+}

package/src/hooks/use-drag-action.ts

@@ -0,0 +1,124 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type ChildQuery,
+  createDragSession,
+  createSceneApi,
+  type DragAction,
+  type DragSessionInput,
+  emitter,
+  type GridEvent,
+  type Modifiers,
+  type SpatialQuery,
+  useScene,
+} from '@pascal-app/core'
+import { useEffect, useRef } from 'react'
+
+const sceneApi = createSceneApi(useScene)
+
+function modifiersFromGridEvent(event: GridEvent): Modifiers {
+  const ne = event.nativeEvent?.nativeEvent as Partial<KeyboardEvent> | undefined
+  return {
+    shift: ne?.shiftKey ?? false,
+    alt: ne?.altKey ?? false,
+    ctrl: ne?.ctrlKey ?? false,
+    meta: ne?.metaKey ?? false,
+  }
+}
+
+export type UseDragActionArgs<Ctx, Draft> = {
+  /** When true the session is live: subscribes to grid events + Esc.
+   * Flipping to false (or unmount) cancels and cleans up. */
+  active: boolean
+  action: DragAction<Ctx, Draft>
+  /** Captured once at the moment `active` flips to true. */
+  initial: DragSessionInput
+  /** Relations cascade plumbing. */
+  spatialQuery?: SpatialQuery
+  childQuery?: ChildQuery
+  /** Fires once after `action.commit` returns true. */
+  onCommit?: () => void
+  /** Fires once after `action.cancel` (Esc, unmount, or commit-returns-false). */
+  onCancel?: () => void
+  /**
+   * Milliseconds after activation during which `grid:click` is swallowed.
+   * Stops the very click that mounted this tool (a DOM button or 3D
+   * handle elsewhere) from cascading into the grid and immediately
+   * committing the drag. Defaults to 150ms — matches the legacy guard
+   * used by every kind-owned tool entered via a click.
+   */
+  activationGraceMs?: number
+}
+
+/**
+ * React hook wrapping the pure `createDragSession` orchestrator with the
+ * editor's grid event emitter and an Esc-to-cancel keyboard binding.
+ *
+ * - Pauses scene history when active → resumes on commit/cancel/unmount
+ * - Per `grid:move` runs preview + snap + apply and cascades dirty marks
+ * - `grid:click` triggers commit; Escape triggers cancel
+ *
+ * For tests of the underlying behavior, drive `createDragSession` directly
+ * (no React needed). This hook is the thin glue.
+ */
+export function useDragAction<Ctx, Draft>(args: UseDragActionArgs<Ctx, Draft>) {
+  // Stable refs so handlers don't re-bind when callbacks change.
+  const argsRef = useRef(args)
+  argsRef.current = args
+
+  useEffect(() => {
+    if (!args.active) return
+
+    const session = createDragSession<Ctx, Draft>(argsRef.current.action, sceneApi, {
+      spatialQuery: argsRef.current.spatialQuery,
+      childQuery: argsRef.current.childQuery,
+      onCommit: () => argsRef.current.onCommit?.(),
+      onCancel: () => argsRef.current.onCancel?.(),
+    })
+
+    session.start(argsRef.current.initial)
+
+    const activatedAt = Date.now()
+    const graceMs = argsRef.current.activationGraceMs ?? 150
+
+    const onMove = (event: GridEvent) => {
+      const point: readonly [number, number] = [event.localPosition[0], event.localPosition[2]]
+      session.move(point, modifiersFromGridEvent(event))
+    }
+
+    const onClick = (event: GridEvent) => {
+      // Swallow the click that mounted this tool — otherwise the very
+      // first grid:click cascades into commit() before any move().
+      if (Date.now() - activatedAt < graceMs) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+      session.commit()
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') session.cancel()
+    }
+
+    emitter.on('grid:move', onMove)
+    emitter.on('grid:click', onClick)
+    if (typeof window !== 'undefined') {
+      window.addEventListener('keydown', onKeyDown)
+    }
+
+    return () => {
+      emitter.off('grid:move', onMove)
+      emitter.off('grid:click', onClick)
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('keydown', onKeyDown)
+      }
+      // If the parent flipped `active` to false (or unmounted) while we were
+      // still mid-drag, treat it as a cancel — no dangling history pause.
+      session.dispose()
+    }
+  }, [args.active])
+}
+
+export type { AnyNode, AnyNodeId, DragAction, Modifiers }

package/src/hooks/use-keyboard.ts

@@ -1,10 +1,14 @@
-import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
+import { type AnyNodeId, emitter, nodeRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
-import { closeDoorOpenState, toggleDoorOpenState } from '../lib/door-interaction'
+import { toggleDoorOpenState } from '../lib/door-interaction'
 import { runRedo, runUndo } from '../lib/history'
-import { sfxEmitter } from '../lib/sfx-bus'
-import { closeWindowOpenState, toggleWindowOpenState } from '../lib/window-interaction'
+import {
+  copySelectedNodesToEditorClipboard,
+  pasteEditorClipboardToLevel,
+} from '../lib/scene-clipboard'
+import { emitDeleteSFX, sfxEmitter } from '../lib/sfx-bus'
+import { toggleWindowOpenState } from '../lib/window-interaction'
 import useEditor from '../store/use-editor'
 
 // Tools call this in their onCancel handler when they have an active mid-action to cancel,
@@ -77,6 +81,7 @@ export const useKeyboard = ({
         e.preventDefault()
         useEditor.getState().setPhase('furnish')
         useEditor.getState().setMode('build')
+        useEditor.getState().setActiveSidebarPanel('items')
       } else if (e.key === 'z' && !e.metaKey && !e.ctrlKey) {
         if (isVersionPreviewMode) return
         e.preventDefault()
@@ -94,7 +99,7 @@ export const useKeyboard = ({
         useEditor.getState().setPhase('structure')
         useEditor.getState().setStructureLayer('elements')
         useEditor.getState().setMode('build')
-      } else if (e.key === 'd' && !e.metaKey && !e.ctrlKey) {
+      } else if (e.key === 'x' && !e.metaKey && !e.ctrlKey) {
         if (isVersionPreviewMode) return
         e.preventDefault()
         useEditor.getState().setMode('delete')
@@ -105,6 +110,17 @@ export const useKeyboard = ({
         useEditor.getState().setPhase('structure')
         useEditor.getState().setStructureLayer('elements')
         useEditor.getState().setMode('material-paint')
+      } else if (e.key === 'c' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        if (isVersionPreviewMode) return
+        e.preventDefault()
+        copySelectedNodesToEditorClipboard()
+      } else if (e.key === 'v' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        if (isVersionPreviewMode) return
+        e.preventDefault()
+        const result = pasteEditorClipboardToLevel()
+        if (result?.pastedIds.length) {
+          sfxEmitter.emit('sfx:item-place')
+        }
       } else if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
         if (isVersionPreviewMode) return
         e.preventDefault()
@@ -118,13 +134,19 @@ export const useKeyboard = ({
         const { buildingId, levelId } = useViewer.getState().selection
         if (buildingId) {
           const building = useScene.getState().nodes[buildingId]
-          if (building && building.type === 'building' && building.children.length > 0) {
-            const currentIdx = levelId ? building.children.indexOf(levelId as any) : -1
-            const nextIdx = currentIdx < building.children.length - 1 ? currentIdx + 1 : currentIdx
+          const levels =
+            building?.type === 'building'
+              ? building.children.filter(
+                  (childId) => useScene.getState().nodes[childId as AnyNodeId]?.type === 'level',
+                )
+              : []
+          if (levels.length > 0) {
+            const currentIdx = levelId ? levels.indexOf(levelId as any) : -1
+            const nextIdx = currentIdx < levels.length - 1 ? currentIdx + 1 : currentIdx
             if (nextIdx !== -1 && nextIdx !== currentIdx) {
-              useViewer.getState().setSelection({ levelId: building.children[nextIdx] as any })
+              useViewer.getState().setSelection({ levelId: levels[nextIdx] as any })
             } else if (currentIdx === -1) {
-              useViewer.getState().setSelection({ levelId: building.children[0] as any })
+              useViewer.getState().setSelection({ levelId: levels[0] as any })
             }
           }
         }
@@ -133,43 +155,60 @@ export const useKeyboard = ({
         const { buildingId, levelId } = useViewer.getState().selection
         if (buildingId) {
           const building = useScene.getState().nodes[buildingId]
-          if (building && building.type === 'building' && building.children.length > 0) {
-            const currentIdx = levelId ? building.children.indexOf(levelId as any) : -1
+          const levels =
+            building?.type === 'building'
+              ? building.children.filter(
+                  (childId) => useScene.getState().nodes[childId as AnyNodeId]?.type === 'level',
+                )
+              : []
+          if (levels.length > 0) {
+            const currentIdx = levelId ? levels.indexOf(levelId as any) : -1
             const prevIdx = currentIdx > 0 ? currentIdx - 1 : currentIdx
             if (prevIdx !== -1 && prevIdx !== currentIdx) {
-              useViewer.getState().setSelection({ levelId: building.children[prevIdx] as any })
+              useViewer.getState().setSelection({ levelId: levels[prevIdx] as any })
             } else if (currentIdx === -1) {
-              useViewer
-                .getState()
-                .setSelection({ levelId: building.children[building.children.length - 1] as any })
+              useViewer.getState().setSelection({ levelId: levels[levels.length - 1] as any })
             }
           }
         }
       } else if ((e.key === 'r' || e.key === 'R') && !isVersionPreviewMode) {
         // Rotate selected node clockwise if it supports rotation (items, roofs, etc.)
-        // Operable doors/windows use R to toggle their open/closed state.
+        // Doors use R to flip side (front ↔ back, rotation += π); their
+        // open/close toggle lives on E. Windows still use R to toggle
+        // their open/closed state.
         const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
         if (selectedNodeIds.length === 1) {
           const node = useScene.getState().nodes[selectedNodeIds[0]!]
           if (node?.type === 'door') {
             e.preventDefault()
-            if (node.openingKind !== 'opening') {
-              toggleDoorOpenState(node.id)
-              sfxEmitter.emit('sfx:item-rotate')
+            useScene.getState().updateNode(node.id, {
+              side: node.side === 'front' ? 'back' : 'front',
+              rotation: [node.rotation[0], node.rotation[1] + Math.PI, node.rotation[2]],
+            })
+            if (node.parentId) {
+              useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
             }
-          } else if (
-            node?.type === 'window' &&
-            node.openingKind !== 'opening' &&
-            (node.windowType === 'sliding' ||
-              node.windowType === 'casement' ||
-              node.windowType === 'awning' ||
-              node.windowType === 'hopper' ||
-              node.windowType === 'single-hung' ||
-              node.windowType === 'double-hung' ||
-              node.windowType === 'louvered')
-          ) {
+            sfxEmitter.emit('sfx:item-rotate')
+          } else if (node?.type === 'window') {
+            // Windows: R flips side (front ↔ back, rotation += π). Open/
+            // close toggle for operable windows lives on E.
             e.preventDefault()
-            toggleWindowOpenState(node.id)
+            useScene.getState().updateNode(node.id, {
+              side: node.side === 'front' ? 'back' : 'front',
+              rotation: [node.rotation[0], node.rotation[1] + Math.PI, node.rotation[2]],
+            })
+            if (node.parentId) {
+              useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
+            }
+            sfxEmitter.emit('sfx:item-rotate')
+          } else if (node && nodeRegistry.get(node.type)?.keyboardActions?.r?.appliesTo(node)) {
+            // Registry-driven R action. Skylight uses this for open/
+            // close toggling; future kinds with custom R behaviour
+            // declare it on their `def.keyboardActions` without
+            // touching this hook. Door / window still use the legacy
+            // direct calls above (follow-up to migrate).
+            e.preventDefault()
+            nodeRegistry.get(node.type)?.keyboardActions?.r?.run(node)
             sfxEmitter.emit('sfx:item-rotate')
           } else if (node && 'rotation' in node) {
             e.preventDefault()
@@ -192,24 +231,17 @@ export const useKeyboard = ({
         if (selectedNodeIds.length === 1) {
           const node = useScene.getState().nodes[selectedNodeIds[0]!]
           if (node?.type === 'door') {
+            // Door's open/close moved to E; T is a no-op for doors so
+            // it doesn't free-rotate a wall-bound node by π/4.
             e.preventDefault()
-            if (node.openingKind !== 'opening') {
-              closeDoorOpenState(node.id)
-              sfxEmitter.emit('sfx:item-rotate')
-            }
-          } else if (
-            node?.type === 'window' &&
-            node.openingKind !== 'opening' &&
-            (node.windowType === 'sliding' ||
-              node.windowType === 'casement' ||
-              node.windowType === 'awning' ||
-              node.windowType === 'hopper' ||
-              node.windowType === 'single-hung' ||
-              node.windowType === 'double-hung' ||
-              node.windowType === 'louvered')
-          ) {
+          } else if (node?.type === 'window') {
+            // Window's open/close moved to E; T is a no-op so it doesn't
+            // free-rotate a wall-bound node by π/4.
             e.preventDefault()
-            closeWindowOpenState(node.id)
+          } else if (node && nodeRegistry.get(node.type)?.keyboardActions?.t?.appliesTo(node)) {
+            // Registry-driven T action. Same shape as the R arm above.
+            e.preventDefault()
+            nodeRegistry.get(node.type)?.keyboardActions?.t?.run(node)
             sfxEmitter.emit('sfx:item-rotate')
           } else if (node && 'rotation' in node) {
             e.preventDefault()
@@ -225,6 +257,32 @@ export const useKeyboard = ({
             sfxEmitter.emit('sfx:item-rotate')
           }
         }
+      } else if ((e.key === 'e' || e.key === 'E') && !isVersionPreviewMode) {
+        // Toggle door / operable-window open/closed state. Moved off R,
+        // which now flips the opening (side + π rotation).
+        const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
+        if (selectedNodeIds.length === 1) {
+          const node = useScene.getState().nodes[selectedNodeIds[0]!]
+          if (node?.type === 'door' && node.openingKind !== 'opening') {
+            e.preventDefault()
+            toggleDoorOpenState(node.id)
+            sfxEmitter.emit('sfx:item-rotate')
+          } else if (
+            node?.type === 'window' &&
+            node.openingKind !== 'opening' &&
+            (node.windowType === 'sliding' ||
+              node.windowType === 'casement' ||
+              node.windowType === 'awning' ||
+              node.windowType === 'hopper' ||
+              node.windowType === 'single-hung' ||
+              node.windowType === 'double-hung' ||
+              node.windowType === 'louvered')
+          ) {
+            e.preventDefault()
+            toggleWindowOpenState(node.id)
+            sfxEmitter.emit('sfx:item-rotate')
+          }
+        }
       } else if ((e.key === 'Delete' || e.key === 'Backspace') && !isVersionPreviewMode) {
         e.preventDefault()
 
@@ -240,31 +298,36 @@ export const useKeyboard = ({
           }
         }
 
-        // Delete selected zone
-        const selectedZoneId = useViewer.getState().selection.zoneId
-        if (selectedZoneId) {
-          sfxEmitter.emit('sfx:structure-delete')
-          useScene.getState().deleteNode(selectedZoneId as AnyNodeId)
-          useViewer.getState().setSelection({ zoneId: null })
-          return
-        }
-
         const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
 
         if (selectedNodeIds.length > 0) {
+          // Guard against accidental bulk deletion (e.g. box-select all + Delete)
+          const BULK_DELETE_THRESHOLD = 10
+          if (selectedNodeIds.length >= BULK_DELETE_THRESHOLD) {
+            const confirmed = window.confirm(
+              `Delete ${selectedNodeIds.length} selected elements? This cannot be undone if the undo history is exhausted.`,
+            )
+            if (!confirmed) return
+          }
+
           // Play appropriate SFX based on what's being deleted
           if (selectedNodeIds.length === 1) {
             const node = useScene.getState().nodes[selectedNodeIds[0]!]
-            if (node?.type === 'item') {
-              sfxEmitter.emit('sfx:item-delete')
-            } else {
-              sfxEmitter.emit('sfx:structure-delete')
-            }
+            emitDeleteSFX(node?.type)
           } else {
             sfxEmitter.emit('sfx:structure-delete')
           }
 
           useScene.getState().deleteNodes(selectedNodeIds)
+          return
+        }
+
+        // Delete selected zone when no explicit element selection is active.
+        const selectedZoneId = useViewer.getState().selection.zoneId
+        if (selectedZoneId) {
+          sfxEmitter.emit('sfx:structure-delete')
+          useScene.getState().deleteNode(selectedZoneId as AnyNodeId)
+          useViewer.getState().setSelection({ zoneId: null })
         }
       }
     }