@pascal-app/editor 0.8.0 → 0.9.1

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,
@@ -95,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')
@@ -106,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()
@@ -119,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 })
             }
           }
         }
@@ -134,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()
@@ -193,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()
+          } else if (node && nodeRegistry.get(node.type)?.keyboardActions?.t?.appliesTo(node)) {
+            // Registry-driven T action. Same shape as the R arm above.
             e.preventDefault()
-            closeWindowOpenState(node.id)
+            nodeRegistry.get(node.type)?.keyboardActions?.t?.run(node)
             sfxEmitter.emit('sfx:item-rotate')
           } else if (node && 'rotation' in node) {
             e.preventDefault()
@@ -226,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()
 
@@ -241,15 +298,6 @@ 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) {
@@ -265,16 +313,21 @@ export const useKeyboard = ({
           // 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 })
         }
       }
     }

package/src/hooks/use-selection.ts

@@ -0,0 +1,64 @@
+'use client'
+
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+
+/**
+ * Resolved current selection — selected node IDs plus a convenience
+ * lookup into the live scene store. Returned shape is intentionally
+ * narrow: hosts that need richer per-node state can compose this with
+ * `useScene()` themselves.
+ */
+export type Selection = {
+  /** Multi-select node IDs (drives the rest of the editor's UI). */
+  selectedIds: AnyNodeId[]
+  /** Currently active building context — surfaces / palettes filter on this. */
+  buildingId: AnyNodeId | null
+  /** Currently active level context. */
+  levelId: AnyNodeId | null
+  /** Currently active zone context. */
+  zoneId: AnyNodeId | null
+  /**
+   * Resolved nodes for `selectedIds`. Missing entries (deleted nodes) are
+   * filtered out, so the array length may be ≤ `selectedIds.length`.
+   */
+  selectedNodes: AnyNode[]
+  /**
+   * The single selected node, or `null` when zero or multiple nodes are
+   * selected. Useful for "save as preset" / inspector gating where the
+   * UI only makes sense for a unique selection.
+   */
+  selectedNode: AnyNode | null
+}
+
+/**
+ * Subscribe to the current selection. Equivalent to reading from
+ * `useViewer().selection` plus a live `useScene()` lookup, packaged as
+ * a single hook so consumers building their own shells (community,
+ * standalone editor app, embedders) don't have to learn the two
+ * separate stores.
+ *
+ * Selection state intentionally lives in `useViewer` (it tracks the
+ * camera / visibility hierarchy: building → level → zone → nodes), not
+ * `useScene` — see `wiki/architecture/scene-registry.md`.
+ */
+export function useSelection(): Selection {
+  const selection = useViewer((s) => s.selection)
+  const nodes = useScene((s) => s.nodes)
+
+  const selectedIds = selection.selectedIds as AnyNodeId[]
+  const selectedNodes = selectedIds
+    .map((id) => nodes[id])
+    .filter((n): n is AnyNode => n !== undefined)
+  const selectedNode = selectedNodes.length === 1 ? (selectedNodes[0] ?? null) : null
+
+  return {
+    selectedIds,
+    buildingId: (selection.buildingId ?? null) as AnyNodeId | null,
+    levelId: (selection.levelId ?? null) as AnyNodeId | null,
+    zoneId: (selection.zoneId ?? null) as AnyNodeId | null,
+    selectedNodes,
+    selectedNode,
+  }
+}