@pascal-app/editor 1.0.4 → 1.0.6

package/src/hooks/use-grid-events.test.ts

@@ -129,114 +129,114 @@ test('grid moves throttle camera drags at 100 ms and resume immediately during t
   }
 })
 
-test.each([
-  'slab',
-  'ceiling',
-] as const)('grid moves keep the same %s hit when its source joins or leaves a batch', async (kind) => {
-  const previousViewer = useViewer.getState()
-  const previousScope = useInteractionScope.getState().scope
-  const restoreRegistry = nodeRegistry._snapshot()
-  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
-  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
-  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
-  const canvas = Object.assign(new EventTarget(), {
-    getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
-  }) as unknown as HTMLCanvasElement
-  const root = createRoot(canvas)
-  const camera = new PerspectiveCamera(60, 1, 0.1, 100)
-  camera.position.set(0, kind === 'ceiling' ? 1 : 10, 10)
-  camera.lookAt(0, 5, 0)
-  camera.updateMatrixWorld()
-  const surface = new Mesh(
-    new PlaneGeometry(20, 20).rotateX(-Math.PI / 2),
-    new MeshBasicMaterial({ side: DoubleSide }),
-  )
-  surface.position.y = 5
-  surface.updateMatrixWorld(true)
-  const surfaceId = `${kind}_grid_batch_test` as const
-  const wall = WallNode.parse({ start: [0, 0], end: [0, 2] })
-  const delivered: GridEvent[] = []
-  const onMove = (event: GridEvent) => delivered.push(event)
-  emitter.on('grid:move', onMove)
-
-  function Grid() {
-    useRegistry(surfaceId, kind, { current: surface })
-    useGridEvents(0)
-    return null
-  }
-  const send = () => {
-    const before = delivered.length
-    canvas.dispatchEvent(
-      Object.assign(new Event('pointermove'), { clientX: 55, clientY: 50, button: 0 }),
+test.each(['slab', 'ceiling'] as const)(
+  'grid moves keep the same %s hit when its source joins or leaves a batch',
+  async (kind) => {
+    const previousViewer = useViewer.getState()
+    const previousScope = useInteractionScope.getState().scope
+    const restoreRegistry = nodeRegistry._snapshot()
+    const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+    const canvas = Object.assign(new EventTarget(), {
+      getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
+    }) as unknown as HTMLCanvasElement
+    const root = createRoot(canvas)
+    const camera = new PerspectiveCamera(60, 1, 0.1, 100)
+    camera.position.set(0, kind === 'ceiling' ? 1 : 10, 10)
+    camera.lookAt(0, 5, 0)
+    camera.updateMatrixWorld()
+    const surface = new Mesh(
+      new PlaneGeometry(20, 20).rotateX(-Math.PI / 2),
+      new MeshBasicMaterial({ side: DoubleSide }),
     )
-    expect(delivered).toHaveLength(before + 1)
-    return delivered.at(-1)!
-  }
+    surface.position.y = 5
+    surface.updateMatrixWorld(true)
+    const surfaceId = `${kind}_grid_batch_test` as const
+    const wall = WallNode.parse({ start: [0, 0], end: [0, 2] })
+    const delivered: GridEvent[] = []
+    const onMove = (event: GridEvent) => delivered.push(event)
+    emitter.on('grid:move', onMove)
 
-  try {
-    nodeRegistry._reset()
-    registerNode({
-      kind,
-      schemaVersion: 1,
-      category: 'structure',
-      capabilities: {},
-      schema: kind === 'ceiling' ? CeilingNode : SlabNode,
-      defaults: () => ({}),
-      drafting: { surfaceQuery: true },
-      extensions: {
-        [DRAFTING_SURFACE_EXTENSION_KEY]: {
-          kind,
-          ...(kind === 'ceiling' ? { raycast: 'underside' } : {}),
+    function Grid() {
+      useRegistry(surfaceId, kind, { current: surface })
+      useGridEvents(0)
+      return null
+    }
+    const send = () => {
+      const before = delivered.length
+      canvas.dispatchEvent(
+        Object.assign(new Event('pointermove'), { clientX: 55, clientY: 50, button: 0 }),
+      )
+      expect(delivered).toHaveLength(before + 1)
+      return delivered.at(-1)!
+    }
+
+    try {
+      nodeRegistry._reset()
+      registerNode({
+        kind,
+        schemaVersion: 1,
+        category: 'structure',
+        capabilities: {},
+        schema: kind === 'ceiling' ? CeilingNode : SlabNode,
+        defaults: () => ({}),
+        drafting: { surfaceQuery: true },
+        extensions: {
+          [DRAFTING_SURFACE_EXTENSION_KEY]: {
+            kind,
+            ...(kind === 'ceiling' ? { raycast: 'underside' } : {}),
+          },
         },
-      },
-    })
-    useViewer.setState({
-      cameraDragging: false,
-      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
-    })
-    await root.configure({
-      gl: {
-        domElement: canvas,
-        render() {},
-        setSize() {},
-        setPixelRatio() {},
-        xr: { isPresenting: false },
-      } as unknown as WebGLRenderer,
-      camera,
-      frameloop: 'never',
-      dpr: 1,
-      size: { width: 100, height: 100, top: 0, left: 0 },
-    })
-    for (const scope of [
-      { kind: 'moving', node: wall, nodeId: wall.id, nodeType: 'wall', view: '3d' },
-      { kind: 'drafting', tool: kind },
-    ] as const) {
+      })
+      useViewer.setState({
+        cameraDragging: false,
+        selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+      })
+      await root.configure({
+        gl: {
+          domElement: canvas,
+          render() {},
+          setSize() {},
+          setPixelRatio() {},
+          xr: { isPresenting: false },
+        } as unknown as WebGLRenderer,
+        camera,
+        frameloop: 'never',
+        dpr: 1,
+        size: { width: 100, height: 100, top: 0, left: 0 },
+      })
+      for (const scope of [
+        { kind: 'moving', node: wall, nodeId: wall.id, nodeType: 'wall', view: '3d' },
+        { kind: 'drafting', tool: kind },
+      ] as const) {
+        await act(async () => {
+          useInteractionScope.setState({ scope })
+          root.render(createElement(Grid))
+        })
+        const before = send()
+        expect(before.surfaceHit?.hostId).toBe(surfaceId)
+        expect(before.position[1]).toBeCloseTo(5)
+        hideFromScene(surface, 'batched')
+        const batched = send()
+        expect(batched.surfaceHit).toEqual(before.surfaceHit)
+        expect(batched.position).toEqual(before.position)
+        expect(batched.localPosition).toEqual(before.localPosition)
+        showInScene(surface, 'batched')
+        expect(send().position).toEqual(before.position)
+      }
+    } finally {
       await act(async () => {
-        useInteractionScope.setState({ scope })
-        root.render(createElement(Grid))
+        root.render(null)
       })
-      const before = send()
-      expect(before.surfaceHit?.hostId).toBe(surfaceId)
-      expect(before.position[1]).toBeCloseTo(5)
-      hideFromScene(surface, 'batched')
-      const batched = send()
-      expect(batched.surfaceHit).toEqual(before.surfaceHit)
-      expect(batched.position).toEqual(before.position)
-      expect(batched.localPosition).toEqual(before.localPosition)
-      showInScene(surface, 'batched')
-      expect(send().position).toEqual(before.position)
+      emitter.off('grid:move', onMove)
+      _roots.delete(canvas)
+      surface.geometry.dispose()
+      surface.material.dispose()
+      restoreRegistry()
+      useInteractionScope.setState({ scope: previousScope })
+      useViewer.setState(previousViewer)
+      actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
     }
-  } finally {
-    await act(async () => {
-      root.render(null)
-    })
-    emitter.off('grid:move', onMove)
-    _roots.delete(canvas)
-    surface.geometry.dispose()
-    surface.material.dispose()
-    restoreRegistry()
-    useInteractionScope.setState({ scope: previousScope })
-    useViewer.setState(previousViewer)
-    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
-  }
-})
+  },
+)

package/src/hooks/use-keyboard.test.ts

@@ -26,6 +26,7 @@ import {
   blocksSnappingShortcut,
   canCycleSnappingModeShortcut,
   canRunGlobalRotationShortcut,
+  hasSceneKeyboardFocus,
   isToolOwnedCanopyForm,
   isToolOwnedRotation,
   markToolCancelConsumed,
@@ -48,28 +49,76 @@ type RafFn = (callback: (time: number) => void) => number
 const NODE_ID = 'block_history' as AnyNodeId
 
 describe('snapping shortcuts while entering a run length', () => {
+  test('document panes keep copy, delete and editing shortcuts away from the scene until it is focused', () => {
+    useEditor.setState({ viewLayouts: {} })
+    expect(hasSceneKeyboardFocus()).toBe(true)
+    useEditor.getState().showView('document:plan', { beside: true })
+    expect(hasSceneKeyboardFocus()).toBe(false)
+    useEditor.getState().focusViewPane(0)
+    expect(hasSceneKeyboardFocus()).toBe(true)
+    useEditor
+      .getState()
+      .setViewLayout({ split: false, panes: ['document:plan', '3d'], ratio: 0.5, focus: 0 })
+    expect(hasSceneKeyboardFocus()).toBe(false)
+    useEditor.getState().closeView('document:plan')
+  })
   test('allows snap mode and spacing shortcuts in the duct and pipe length field', () => {
-    expect(
-      blocksSnappingShortcut({
-        tagName: 'INPUT',
-        isContentEditable: false,
-        hasAttribute: (name) => name === 'data-run-length-input',
-      }),
-    ).toBe(false)
+    const field = {
+      tagName: 'INPUT',
+      isContentEditable: false,
+      hasAttribute: (name: string) => name === 'data-run-length-input',
+      closest: (): object => field,
+    }
+    expect(blocksSnappingShortcut(field)).toBe(false)
   })
 
   test('continues to protect ordinary text fields and editable content', () => {
-    for (const tagName of ['INPUT', 'TEXTAREA', 'DIV']) {
-      expect(
-        blocksSnappingShortcut({
-          tagName,
-          isContentEditable: tagName === 'DIV',
-          hasAttribute: () => false,
-        }),
-      ).toBe(true)
+    for (const tagName of ['INPUT', 'TEXTAREA', 'SELECT', 'DIV']) {
+      const field = {
+        tagName,
+        isContentEditable: tagName === 'DIV',
+        hasAttribute: () => false,
+        closest: (): object => field,
+      }
+      expect(blocksSnappingShortcut(field)).toBe(true)
     }
     expect(blocksSnappingShortcut(null)).toBe(false)
   })
+
+  test('honors closest-owned fields and dialogs without claiming ordinary canvas keys', () => {
+    // Model the DOM closest result, not its selector spelling. Native descendant
+    // propagation is checked by the protected browser fixture.
+    for (const role of ['textbox', 'combobox', 'dialog', 'alertdialog']) {
+      const owner = { role }
+      const descendant = {
+        tagName: 'SPAN',
+        isContentEditable: false,
+        hasAttribute: () => false,
+        closest: () => owner,
+      }
+      expect(blocksSnappingShortcut(descendant)).toBe(true)
+    }
+    const canvas = {
+      tagName: 'CANVAS',
+      isContentEditable: false,
+      hasAttribute: () => false,
+      closest: () => null,
+    }
+    expect(blocksSnappingShortcut(canvas)).toBe(false)
+    expect(blocksSnappingShortcut({ ...canvas, tagName: 'SPAN', isContentEditable: true })).toBe(
+      true,
+    )
+  })
+
+  test('reserves the run-length exception for its actual input, not another editable owner', () => {
+    const textarea = {
+      tagName: 'TEXTAREA',
+      isContentEditable: false,
+      hasAttribute: (name: string) => name === 'data-run-length-input',
+      closest: (): object => textarea,
+    }
+    expect(blocksSnappingShortcut(textarea)).toBe(true)
+  })
 })
 
 beforeEach(() => {
@@ -89,7 +138,7 @@ beforeEach(() => {
 afterEach(() => {
   useInteractionScope.getState().end()
   useEditor.getState().armToolMode({ mode: 'select' })
-  useEditor.setState({ selectedItem: null })
+  useEditor.setState({ selectedItem: null, viewLayouts: {} })
   clearSceneHistory()
 })
 

package/src/hooks/use-keyboard.ts

@@ -26,6 +26,7 @@ import {
 import { steppedRotation } from '../components/tools/item/placement-math'
 import { keyCyclableContinuationContext } from '../lib/continuation'
 import { resolveDirectManipulationNode } from '../lib/direct-manipulation'
+import { isSceneView } from '../lib/editor-views'
 import { cancelGestures } from '../lib/gesture-lifecycle'
 import { guideEmitter } from '../lib/guide-events'
 import { isHistoryShortcut, runRedo, runUndo, shouldCancelDraftOnHistoryJump } from '../lib/history'
@@ -36,6 +37,7 @@ import { copySelectedNodesToEditorClipboard } from '../lib/scene-clipboard'
 import { sfxEmitter } from '../lib/sfx-bus'
 import { openSidebarPanel } from '../lib/sidebar-panel'
 import { activeSiteNode, clampBrushRadius } from '../lib/terrain-sculpt'
+import { isTypingTarget } from '../lib/typing-target'
 import { leaveUnitFocus } from '../lib/units'
 import { selectWallDrawVariant } from '../lib/wall-draw-variant'
 import useDeleteConfirmation from '../store/use-delete-confirmation'
@@ -45,6 +47,12 @@ import useInteractionScope, {
   isInteractionSubtreeDraft,
 } from '../store/use-interaction-scope'
 import { groupCurrentSelection, ungroupCurrentSelection } from '../store/use-session-groups'
+import { activeViewLayout } from '../store/view-layout'
+
+export function hasSceneKeyboardFocus(): boolean {
+  const layout = activeViewLayout(useEditor.getState())
+  return isSceneView(layout.panes[layout.focus])
+}
 
 // References (guide/scan) are selected via `useEditor.selectedReferenceId`, not
 // the viewer selection, so selection-based key arms (R/T rotate) need this
@@ -274,7 +282,13 @@ export function blocksSnappingShortcut(
 ): boolean {
   if (!target) return false
   if (target.tagName === 'INPUT' && target.hasAttribute('data-run-length-input')) return false
-  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
+  return (
+    target.tagName === 'INPUT' ||
+    target.tagName === 'TEXTAREA' ||
+    target.tagName === 'SELECT' ||
+    target.isContentEditable ||
+    isTypingTarget(target as HTMLElement)
+  )
 }
 
 /** E on one selected node: the kind's own E action, else its mechanism. False when neither applies. */
@@ -317,6 +331,11 @@ export const useKeyboard = ({
     let shiftTapClean = false
 
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.defaultPrevented || !hasSceneKeyboardFocus()) {
+        ctrlTapClean = false
+        shiftTapClean = false
+        return
+      }
       if (e.key === 'Shift') {
         shiftTapClean = !e.repeat && !e.metaKey && !e.ctrlKey && !e.altKey
       } else {
@@ -345,12 +364,8 @@ export const useKeyboard = ({
         return
       }
 
-      // Don't handle shortcuts if user is typing in an input
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement ||
-        (e.target instanceof HTMLElement && e.target.isContentEditable)
-      ) {
+      // Editable controls own their keyboard events.
+      if (isTypingTarget(e.target)) {
         return
       }
 
@@ -770,6 +785,11 @@ export const useKeyboard = ({
       }
     }
     const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.defaultPrevented || !hasSceneKeyboardFocus()) {
+        ctrlTapClean = false
+        shiftTapClean = false
+        return
+      }
       if (e.key === 'Shift') {
         const wasClean = shiftTapClean
         shiftTapClean = false
@@ -804,13 +824,10 @@ export const useKeyboard = ({
     // registry move overlay) — safe only because none of them claim Ctrl/Cmd+G.
     // `e.code` keeps it on the physical G key across keyboard layouts.
     const handleSessionGroupKeyDown = (e: KeyboardEvent) => {
+      if (e.defaultPrevented || !hasSceneKeyboardFocus()) return
       if (e.key !== 'Shift') shiftTapClean = false
       if (e.key !== 'Control' && e.key !== 'Meta') ctrlTapClean = false
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement ||
-        (e.target instanceof HTMLElement && e.target.isContentEditable)
-      ) {
+      if (isTypingTarget(e.target)) {
         return
       }
       if (useDeleteConfirmation.getState().request) return

package/src/hooks/use-placement-notice.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, test } from 'bun:test'
 import { type AnyNode, registerNode } from '@pascal-app/core'
-import { placementNoticeOf, transientDraftId } from './use-placement-notice'
+import {
+  placementNoticeOf,
+  previewPlacementNoticeOf,
+  transientDraftId,
+} from './use-placement-notice'
 
 // The editor asks a node's definition for its placement notice; it names no kind.
 function registerKind(placementNotice?: unknown): string {
@@ -46,3 +50,22 @@ describe('the placement notice of the node in hand', () => {
     expect(transientDraftId({ kept: nodes.kept })).toBeNull()
   })
 })
+
+test('ephemeral preview notices see their context without inserting a draft into the scene', () => {
+  const kind = registerKind((node: AnyNode, ctx: { nodes: Record<string, AnyNode> }) => ({
+    line: `${node.id}:${ctx.nodes.child?.name}`,
+  }))
+  const nodes = {}
+  const draft = nodeOf('preview', kind)
+  expect(
+    previewPlacementNoticeOf(nodes, {
+      node: draft,
+      parentNode: null,
+      contextNodes: [{ ...nodeOf('child', kind), name: 'draft child' }],
+    }),
+  ).toEqual({ line: 'preview:draft child' })
+  expect(nodes).toEqual({})
+  expect(
+    previewPlacementNoticeOf(nodes, { node: null, parentNode: null, contextNodes: [] }),
+  ).toBeNull()
+})

package/src/hooks/use-placement-notice.ts

@@ -8,6 +8,8 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import usePlacementPreview from '../store/use-placement-preview'
 
 /** The notice `nodeId`'s kind gives for where it stands (`placementNotice`), if it declares one. */
 export function placementNoticeOf(
@@ -21,18 +23,47 @@ export function placementNoticeOf(
   return notice(node as never, live ? { nodes, live } : { nodes })
 }
 
+export function previewPlacementNoticeOf(
+  nodes: Readonly<Record<string, AnyNode>>,
+  draft: Pick<
+    ReturnType<typeof usePlacementPreview.getState>,
+    'node' | 'parentNode' | 'contextNodes'
+  >,
+): PlacementNotice | null {
+  if (!draft.node) return null
+  const context = {
+    ...nodes,
+    ...Object.fromEntries(draft.contextNodes.map((node) => [node.id, node])),
+    ...(draft.parentNode ? { [draft.parentNode.id]: draft.parentNode } : {}),
+    [draft.node.id]: draft.node,
+  }
+  return placementNoticeOf(context, draft.node.id)
+}
+
 /**
  * What the node in hand, or the selected node, says about where it stands, read at its live pose
  * while it is placed or moved. Subscribes to the scene only while a node is given, so an
  * always-mounted caller doesn't re-render on every write.
  */
-export function usePlacementNotice(nodeId: string | null | undefined): PlacementNotice | null {
-  const nodes = useScene((state) => (nodeId ? state.nodes : null))
-  const live = useLiveTransforms((state) => (nodeId ? state.get(nodeId) : undefined))
-  return useMemo(
-    () => (nodeId && nodes ? placementNoticeOf(nodes, nodeId, live) : null),
-    [nodes, live, nodeId],
+export function usePlacementNotice(
+  nodeId: string | null | undefined,
+  preview = false,
+): PlacementNotice | null {
+  const draft = usePlacementPreview(
+    useShallow((state) =>
+      preview
+        ? { node: state.node, parentNode: state.parentNode, contextNodes: state.contextNodes }
+        : null,
+    ),
   )
+  const nodes = useScene((state) => (nodeId || draft?.node ? state.nodes : null))
+  const live = useLiveTransforms((state) => (nodeId ? state.get(nodeId) : undefined))
+  return useMemo(() => {
+    if (!nodes) return null
+    if (nodeId) return placementNoticeOf(nodes, nodeId, live)
+    if (!draft?.node) return null
+    return previewPlacementNoticeOf(nodes, draft)
+  }, [nodes, live, nodeId, draft])
 }
 
 /** The node a construction tool is placing: its transient draft. */