@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/viewer/viewer-selection-manager.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { type AnyNodeId, emitter, type NodeEvent, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+import { selectionModifiersFromEvent } from '../../lib/selection-routing'
+import {
+  applyViewerClick,
+  applyViewerHover,
+  viewerPickFromNodeEvent,
+} from '../../lib/viewer-selection'
+
+/**
+ * Selection for a parametric viewer surface (the published viewer's fallback,
+ * its embed, the editor's Preview): free-form and room-first, through the same
+ * rules as the baked viewer. Mount it with `<Viewer selectionManager="custom">`.
+ */
+export function ViewerSelectionManager() {
+  const gl = useThree((state) => state.gl)
+
+  useEffect(() => {
+    let clickHandled = false
+    let hoveredFrom: string | null = null
+    const pendingClicks = new Set<number>()
+
+    const onMove = (event: NodeEvent) => {
+      if (useViewer.getState().walkthroughMode) return
+      const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes)
+      if (!pick) return
+      event.stopPropagation()
+      hoveredFrom = event.node.id
+      applyViewerHover(pick, useScene.getState().nodes)
+    }
+    const onLeave = (event: NodeEvent) => {
+      if (event.node.id !== hoveredFrom) return
+      hoveredFrom = null
+      useViewer.getState().setHoveredId(null)
+    }
+    const onClick = (event: NodeEvent) => {
+      if (useViewer.getState().walkthroughMode) return
+      const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes)
+      if (!pick) return
+      event.stopPropagation()
+      clickHandled = true
+      applyViewerClick(
+        pick,
+        useScene.getState().nodes,
+        selectionModifiersFromEvent(event.nativeEvent),
+      )
+    }
+    // A click on nothing selectable clears the room and the element.
+    const onCanvasClick = (event: MouseEvent) => {
+      const viewer = useViewer.getState()
+      if (event.button !== 0 || viewer.walkthroughMode) return
+      if (viewer.cameraDragging || viewer.inputDragging) return
+      const frame = requestAnimationFrame(() => {
+        pendingClicks.delete(frame)
+        if (useViewer.getState().walkthroughMode) return
+        if (clickHandled) {
+          clickHandled = false
+          return
+        }
+        applyViewerClick(null, useScene.getState().nodes)
+      })
+      pendingClicks.add(frame)
+    }
+
+    emitter.on('node:move', onMove)
+    emitter.on('node:enter', onMove)
+    emitter.on('node:leave', onLeave)
+    emitter.on('node:click', onClick)
+    const canvas = gl.domElement
+    canvas.addEventListener('click', onCanvasClick)
+    return () => {
+      emitter.off('node:move', onMove)
+      emitter.off('node:enter', onMove)
+      emitter.off('node:leave', onLeave)
+      emitter.off('node:click', onClick)
+      canvas.removeEventListener('click', onCanvasClick)
+      for (const frame of pendingClicks) cancelAnimationFrame(frame)
+      useViewer.getState().setHoveredId(null)
+    }
+  }, [gl])
+
+  return <ViewerOutlineSync />
+}
+
+/** The selected elements and the hovered one, outlined (rooms highlight instead). */
+function ViewerOutlineSync() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const externalSelectedIds = useViewer((s) => s.externalSelectedIds)
+  const hoveredId = useViewer((s) => s.hoveredId)
+  const outliner = useViewer((s) => s.outliner)
+  const geometryRevision = useViewer((s) => s.geometryRevision)
+  const walkthrough = useViewer((s) => s.walkthroughMode)
+  const nodes = useScene((s) => s.nodes)
+
+  useEffect(() => {
+    void geometryRevision
+    outliner.selectedObjects.length = 0
+    outliner.hoveredObjects.length = 0
+    if (walkthrough) return
+    for (const id of new Set([...selectedIds, ...externalSelectedIds])) {
+      const object = sceneRegistry.nodes.get(id)
+      if (object) outliner.selectedObjects.push(object)
+    }
+    const hovered = hoveredId ? nodes[hoveredId as AnyNodeId] : undefined
+    if (hovered && hovered.type !== 'zone') {
+      const object = sceneRegistry.nodes.get(hovered.id)
+      if (object) outliner.hoveredObjects.push(object)
+    }
+  }, [selectedIds, externalSelectedIds, hoveredId, outliner, nodes, geometryRevision, walkthrough])
+
+  useEffect(
+    () => () => {
+      outliner.selectedObjects.length = 0
+      outliner.hoveredObjects.length = 0
+    },
+    [outliner],
+  )
+
+  return null
+}

package/src/components/viewer/viewer-stage.tsx

@@ -60,7 +60,6 @@ function selectViewerLevel(nodes: Record<string, AnyNode>, levelId: string) {
     selectedIds: [],
     zoneId: null,
   })
-  viewer.setLevelMode('solo')
 }
 
 export function ViewerStage({
@@ -137,7 +136,8 @@ export function ViewerStage({
       if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
         markPerfAction('level-switch', nextLevelId)
       }
-      selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
+      if (nextLevelId !== useViewer.getState().selection.levelId)
+        selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
       if (notify) onLevelChange?.(nextLevelId)
     },
     [onLevelChange, scene],

package/src/components/viewer-zone-system.tsx

@@ -11,7 +11,6 @@ import useInteractionScope from '../store/use-interaction-scope'
 export const ViewerZoneSystem = () => {
   useFrame(() => {
     const { levelId, zoneId } = useViewer.getState().selection
-    const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
     // Snapshot capture is a clean, camera-only surface — zone geometry and
     // tags stay out of the framed shot (mirrors the editor ZoneSystem's gate).
@@ -29,17 +28,13 @@ export const ViewerZoneSystem = () => {
 
       const isOnSelectedLevel = zone.parentId === levelId
 
-      // Keep group visible (so <Html> labels stay active), hide/show meshes only.
-      // Zone geometry: visible in zone mode on the right level, OR when this zone is selected.
-      // The editor ZoneSystem handles the selected zone's opacity animation.
+      // Keep group visible (so <Html> labels stay active), hide/show meshes only:
+      // only the selected zone shows its volume.
       const isSelected = id === zoneId
       // A zone the author hid (sidebar eye) takes the group with it — this
       // per-frame write would otherwise undo the renderer's `visible` prop.
       const nodeVisible = zone.visible !== false
-      const shouldShowGeometry =
-        nodeVisible &&
-        !isCaptureMode &&
-        ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
+      const shouldShowGeometry = nodeVisible && !isCaptureMode && isSelected
       if (obj.visible !== nodeVisible) obj.visible = nodeVisible
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {

package/src/hooks/use-auto-save.integration.test.tsx

@@ -11,6 +11,7 @@ import { create } from '@react-three/test-renderer'
 import { type SaveStatus, useAutoSave } from './use-auto-save'
 
 const originalWindow = globalThis.window
+const originalRequestAnimationFrame = globalThis.requestAnimationFrame
 const previousScene = useScene.getState()
 let renderer: Awaited<ReturnType<typeof create>> | undefined
 
@@ -18,6 +19,7 @@ afterEach(async () => {
   await renderer?.unmount()
   renderer = undefined
   globalThis.window = originalWindow
+  globalThis.requestAnimationFrame = originalRequestAnimationFrame
   useScene.setState(previousScene, true)
   clearSceneHistory()
 })
@@ -42,11 +44,8 @@ function graph(count: number) {
   return { nodes: Object.fromEntries(nodes.map((node) => [node.id, node])), rootNodeIds: [site.id] }
 }
 
-async function mount(
-  loadedCount: number,
-  guardAgainstSceneWipe?: boolean,
-  save?: () => Promise<void>,
-) {
+/** Mounts the hook in its initial state: a scene load not yet completed. */
+async function mountBeforeLoad(guardAgainstSceneWipe?: boolean, save?: () => Promise<void>) {
   globalThis.window = new EventTarget() as unknown as Window & typeof globalThis
   useScene.setState({ ...graph(0), readOnly: false })
   clearSceneHistory()
@@ -65,10 +64,6 @@ async function mount(
     return null
   }
   renderer = await create(<Host guardAgainstSceneWipe={guardAgainstSceneWipe} />)
-  useScene.setState(graph(loadedCount))
-  clearSceneHistory()
-  controls!.isLoadingSceneRef.current = false
-  statuses.length = 0
   return {
     writes,
     statuses,
@@ -78,6 +73,125 @@ async function mount(
   }
 }
 
+async function mount(
+  loadedCount: number,
+  guardAgainstSceneWipe?: boolean,
+  save?: () => Promise<void>,
+) {
+  const mounted = await mountBeforeLoad(guardAgainstSceneWipe, save)
+  useScene.setState(graph(loadedCount))
+  clearSceneHistory()
+  mounted.controls.completeSceneLoad()
+  mounted.statuses.length = 0
+  return mounted
+}
+
+/** The Editor's load sequence: begin, unload, hydrate the store, complete. */
+function loadScene(controls: ReturnType<typeof useAutoSave>, count: number) {
+  controls.beginSceneLoad()
+  useScene.getState().unloadScene()
+  hydrate(count)
+  controls.completeSceneLoad()
+}
+
+function hydrate(count: number) {
+  const { nodes, rootNodeIds } = graph(count)
+  useScene.getState().setScene(nodes as never, rootNodeIds as never)
+  clearSceneHistory()
+}
+
+function agentAddsColumn() {
+  useScene
+    .getState()
+    .createNode(
+      ColumnNode.parse({ id: 'column_agent', parentId: 'level_autosave' }),
+      'level_autosave' as never,
+    )
+}
+
+/** A hidden tab: requestAnimationFrame callbacks never run. */
+function hideDocument() {
+  const frames: FrameRequestCallback[] = []
+  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+    frames.push(callback)
+    return frames.length
+  }) as typeof requestAnimationFrame
+  return frames
+}
+
+test('a scene loaded in a hidden tab autosaves agent edits without waiting for a frame', async () => {
+  hideDocument()
+  const { writes, statuses, controls } = await mountBeforeLoad()
+  statuses.length = 0
+  // Pre-hydration document writes (the host-panel installedPlugins sync on
+  // mount) still must not arm a save of the empty store.
+  useScene.getState().setInstalledPlugins(['pre-hydration-default'], { explicit: false })
+  loadScene(controls, 12)
+  expect(statuses).toEqual([])
+
+  agentAddsColumn()
+  await Bun.sleep(1100)
+  expect(writes).toEqual([13])
+  expect(statuses.at(-1)).toBe('saved')
+})
+
+test('opening a scene and leaving it unchanged saves nothing', async () => {
+  const { writes, statuses, controls } = await mountBeforeLoad()
+  loadScene(controls, 12)
+  statuses.length = 0
+  // Mount-time writes after the load: systems re-marking nodes, and a plugin
+  // that registers late syncing the default plugin set.
+  useScene.getState().markDirty('level_autosave' as never)
+  useScene.getState().setInstalledPlugins(['late-default'], { explicit: false })
+  await Bun.sleep(1100)
+  window.dispatchEvent(new Event('pagehide'))
+  expect(writes).toEqual([])
+  expect(statuses).toEqual([])
+})
+
+test('installing a plugin by hand after the load is saved', async () => {
+  const { writes, controls } = await mountBeforeLoad()
+  loadScene(controls, 12)
+  useScene.getState().setInstalledPlugins(['chosen'], { explicit: true })
+  await Bun.sleep(1100)
+  expect(writes).toEqual([12])
+})
+
+test('the exit flush writes an agent edit made right after a hidden load', async () => {
+  hideDocument()
+  const { writes, statuses, controls } = await mountBeforeLoad()
+  loadScene(controls, 12)
+  agentAddsColumn()
+  window.dispatchEvent(new Event('pagehide'))
+  expect(writes).toEqual([13])
+  expect(statuses).not.toContain('error')
+})
+
+test('the exit flush still skips while a load is in flight', async () => {
+  const { writes, controls } = await mount(12)
+  agentAddsColumn()
+  controls.beginSceneLoad()
+  useScene.getState().unloadScene()
+  window.dispatchEvent(new Event('pagehide'))
+  expect(writes).toEqual([])
+})
+
+test('a save that came due mid-load is written once the load completes', async () => {
+  const { writes, statuses, controls } = await mount(12)
+  agentAddsColumn()
+  controls.beginSceneLoad()
+  useScene.getState().unloadScene()
+  await Bun.sleep(1100)
+  expect(writes).toEqual([])
+  expect(statuses.at(-1)).toBe('paused')
+
+  hydrate(12)
+  controls.completeSceneLoad()
+  await Bun.sleep(0)
+  expect(writes).toEqual([12])
+  expect(statuses.at(-1)).toBe('saved')
+})
+
 test.each([
   'undo',
   'redo',

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

@@ -1,8 +1,8 @@
 'use client'
 
 import { useScene } from '@pascal-app/core'
-import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'
-import { type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
+import { useCallback, useEffect, useRef } from 'react'
+import { getSavedSceneDocument, type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
 
 const AUTOSAVE_DEBOUNCE_MS = 1000
 const STRUCTURAL_NODE_COUNT = 4
@@ -105,7 +105,8 @@ export function useAutoSave({
   onSaveStatusChange,
   isVersionPreviewMode = false,
 }: UseAutoSaveOptions): {
-  isLoadingSceneRef: MutableRefObject<boolean>
+  beginSceneLoad: () => void
+  completeSceneLoad: () => void
   saveNow: () => void
 } {
   const saveTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
@@ -169,7 +170,8 @@ export function useAutoSave({
         return
       }
 
-      const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
+      const { nodes, rootNodeIds, collections, materials, installedPlugins } =
+        getSavedSceneDocument()
       const sceneGraph = {
         nodes,
         rootNodeIds,
@@ -237,18 +239,23 @@ export function useAutoSave({
         return
       }
 
+      // A plugin set the user never chose is the host's defaults, re-derived on
+      // every load: a plugin registering after the load (hosted plugins arrive
+      // late) syncs it without anyone editing the scene.
+      const pluginsEdited =
+        state.installedPlugins !== lastInstalledPluginsRef && state.hasExplicitPluginInstallState
+      lastInstalledPluginsRef = state.installedPlugins
       const currentNodesSnapshot = JSON.stringify(state.nodes)
       const changed =
         currentNodesSnapshot !== lastNodesSnapshot ||
         state.collections !== lastCollectionsRef ||
         state.materials !== lastMaterialsRef ||
-        state.installedPlugins !== lastInstalledPluginsRef
+        pluginsEdited
       if (!changed) return
 
       lastNodesSnapshot = currentNodesSnapshot
       lastCollectionsRef = state.collections
       lastMaterialsRef = state.materials
-      lastInstalledPluginsRef = state.installedPlugins
       hasDirtyChangesRef.current = true
       onDirtyRef.current?.()
       setSaveStatus('pending')
@@ -272,7 +279,8 @@ export function useAutoSave({
     // would otherwise drop the change entirely. `pagehide` fires in cases
     // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
-      const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
+      const { nodes, rootNodeIds, collections, materials, installedPlugins } =
+        getSavedSceneDocument()
       const currentNodeCount = Object.keys(nodes).length
       const previousNodeCount = storedNodeCount.count
       const decision = decideExitFlush({
@@ -376,5 +384,23 @@ export function useAutoSave({
     executeSaveRef.current?.()
   }, [])
 
-  return { isLoadingSceneRef, saveNow }
+  const beginSceneLoad = useCallback(() => {
+    isLoadingSceneRef.current = true
+  }, [])
+
+  // Call as soon as the store holds the loaded graph — hydration is data, not
+  // a frame. Gating this on requestAnimationFrame kept a tab loaded while
+  // hidden (no frames ever run) "loading" indefinitely: every later edit was
+  // adopted as the loaded baseline, so nothing autosaved and the exit flush
+  // had nothing dirty to write.
+  const completeSceneLoad = useCallback(() => {
+    isLoadingSceneRef.current = false
+    // A save that came due mid-load was deferred; the store now holds real
+    // data, so write it rather than leave the status parked on 'paused'.
+    if (pendingSaveRef.current && !isSavingRef.current && !saveTimeoutRef.current) {
+      executeSaveRef.current?.()
+    }
+  }, [])
+
+  return { beginSceneLoad, completeSceneLoad, saveNow }
 }

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

@@ -10,20 +10,29 @@ import {
   nodeRegistry,
   PipeFittingNode,
   PipeSegmentNode,
+  registerNode,
+  useInteractive,
   useScene,
 } from '@pascal-app/core'
+import { useSidebarStore } from '../components/ui/primitives/sidebar'
 import { runRedo, runUndo } from '../lib/history'
 import { meshEditScope } from '../lib/interaction/scope'
+import { setSidebarTabIds } from '../lib/sidebar-panel'
 import useEditor from '../store/use-editor'
 import useInteractionScope from '../store/use-interaction-scope'
 import {
+  armPaintFromShortcut,
+  armWallToolFromShortcut,
   blocksSnappingShortcut,
   canCycleSnappingModeShortcut,
   canRunGlobalRotationShortcut,
   isToolOwnedCanopyForm,
   isToolOwnedRotation,
   markToolCancelConsumed,
+  openItemCatalogFromShortcut,
   runHistoryShortcut,
+  runNodeInteraction,
+  switchPhaseFromShortcut,
 } from './use-keyboard'
 
 type RafFn = (callback: (time: number) => void) => number
@@ -106,11 +115,10 @@ describe('rotation shortcut ownership', () => {
     expect(isToolOwnedRotation()).toBe(true)
   })
 
-  test('leaves R to the wall tool for its line / rectangle toggle, but not T', () => {
+  test('does not reserve R for the wall tool: its shape is picked in the Build panel', () => {
     useEditor.getState().armToolMode({ mode: 'build', tool: 'wall' })
 
-    expect(isToolOwnedRotation('r')).toBe(true)
-    expect(isToolOwnedRotation('t')).toBe(false)
+    expect(isToolOwnedRotation()).toBe(false)
   })
 
   test('leaves R and T to a moving lean-to extension', () => {
@@ -249,3 +257,170 @@ describe('history while drawing distribution runs', () => {
     })
   }
 })
+
+describe('E on a single selected node', () => {
+  function registerKind(overrides: Record<string, unknown>) {
+    const kind = `test:e-${crypto.randomUUID()}`
+    registerNode({
+      kind,
+      schemaVersion: 1,
+      category: 'furnish',
+      defaults: () => ({}),
+      capabilities: {},
+      ...overrides,
+    } as never)
+    return { object: 'node', id: `${kind}_1`, type: kind } as unknown as AnyNode
+  }
+
+  const switchMechanism = {
+    has: () => true,
+    isOn: (node: AnyNode, state: ReturnType<typeof useInteractive.getState>) =>
+      Boolean(state.mechanisms[node.id]),
+    set: (node: AnyNode, on: boolean) => useInteractive.getState().setMechanism(node.id, on),
+  }
+
+  test('runs the mechanism of a kind that declares only the capability', () => {
+    const node = registerKind({ capabilities: { mechanism: switchMechanism } })
+    try {
+      expect(runNodeInteraction(node)).toBe(true)
+      expect(useInteractive.getState().mechanisms[node.id]).toBe(true)
+      expect(runNodeInteraction(node)).toBe(true)
+      expect(useInteractive.getState().mechanisms[node.id]).toBe(false)
+    } finally {
+      useInteractive.getState().removeMechanism(node.id)
+    }
+  })
+
+  test("prefers the kind's own E action over its mechanism", () => {
+    let ran = 0
+    const node = registerKind({
+      capabilities: { mechanism: switchMechanism },
+      keyboardActions: { e: { appliesTo: () => true, run: () => (ran += 1) } },
+    })
+    expect(runNodeInteraction(node)).toBe(true)
+    expect(ran).toBe(1)
+    expect(useInteractive.getState().mechanisms[node.id]).toBeUndefined()
+  })
+
+  test('leaves E to the door and window fallbacks when nothing applies', () => {
+    const node = registerKind({
+      capabilities: { mechanism: { ...switchMechanism, has: () => false } },
+    })
+    expect(runNodeInteraction(node)).toBe(false)
+    expect(runNodeInteraction(registerKind({}))).toBe(false)
+  })
+})
+
+describe('B and P open their panel', () => {
+  afterEach(() => {
+    setSidebarTabIds([])
+    useSidebarStore.getState().setIsCollapsed(false)
+    useEditor.getState().setContinuation('wall', 'room')
+    useEditor.getState().armToolMode({ mode: 'select' })
+  })
+
+  test('1 goes to site and 2 into the building; 3 is no longer a shortcut', () => {
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'wall' })
+    expect(switchPhaseFromShortcut('1')).toBe(true)
+    expect(useEditor.getState().phase).toBe('site')
+    expect(useEditor.getState().mode).toBe('select')
+    expect(switchPhaseFromShortcut('2')).toBe(true)
+    expect(useEditor.getState().phase).toBe('building')
+    expect(switchPhaseFromShortcut('3')).toBe(false)
+    expect(useEditor.getState().phase).toBe('building')
+  })
+
+  test('F, B and P arm their tool and keep the building', () => {
+    setSidebarTabIds(['site', 'build', 'paint', 'items'])
+    useEditor.getState().setPhase('building')
+    for (const [arm, mode, tool] of [
+      [openItemCatalogFromShortcut, 'build', 'item'],
+      [armWallToolFromShortcut, 'build', 'wall'],
+      [armPaintFromShortcut, 'material-paint', null],
+    ] as const) {
+      arm()
+      expect(useEditor.getState().phase).toBe('building')
+      expect(useEditor.getState().mode).toBe(mode)
+      expect(useEditor.getState().tool).toBe(tool)
+    }
+    openItemCatalogFromShortcut()
+    expect(useEditor.getState().activeSidebarPanel).toBe('items')
+  })
+
+  test('F, B and P also keep Site when arming their tool', () => {
+    setSidebarTabIds(['site', 'build', 'paint', 'items'])
+    for (const arm of [
+      openItemCatalogFromShortcut,
+      armWallToolFromShortcut,
+      armPaintFromShortcut,
+    ]) {
+      useEditor.getState().setPhase('site')
+      useEditor.getState().armToolMode({ mode: 'select' })
+      arm()
+      expect(useEditor.getState().phase).toBe('site')
+    }
+  })
+
+  test('F opens a collapsed catalog sidebar', () => {
+    setSidebarTabIds(['site', 'build', 'items'])
+    useSidebarStore.getState().setIsCollapsed(true)
+    openItemCatalogFromShortcut()
+    expect(useEditor.getState().activeSidebarPanel).toBe('items')
+    expect(useSidebarStore.getState().isCollapsed).toBe(false)
+  })
+
+  test('B arms the wall tool on Rectangle and shows the Build panel', () => {
+    setSidebarTabIds(['site', 'build', 'paint', 'items'])
+    useEditor.getState().setActiveSidebarPanel('items')
+    useSidebarStore.getState().setIsCollapsed(true)
+    useEditor.getState().setContinuation('wall', 'single')
+
+    armWallToolFromShortcut()
+
+    const editor = useEditor.getState()
+    expect(editor.mode).toBe('build')
+    expect(editor.tool).toBe('wall')
+    expect(editor.getContinuation('wall')).toBe('rectangle')
+    expect(editor.activeSidebarPanel).toBe('build')
+    expect(useSidebarStore.getState().isCollapsed).toBe(false)
+  })
+
+  // A host may drop the armed tool when the panel changes (the community does,
+  // with any placement in flight), so B and F open their panel first.
+  test('B and F keep their tool from another panel where the host disarms on a panel change', () => {
+    setSidebarTabIds(['build', 'paint', 'items', 'ai'])
+    const unsubscribe = useEditor.subscribe((state, prev) => {
+      if (state.activeSidebarPanel !== prev.activeSidebarPanel) {
+        useEditor.getState().armToolMode({ mode: 'select' })
+      }
+    })
+    try {
+      for (const [arm, from, panel, tool] of [
+        [armWallToolFromShortcut, 'ai', 'build', 'wall'],
+        [openItemCatalogFromShortcut, 'paint', 'items', 'item'],
+      ] as const) {
+        useEditor.getState().setActiveSidebarPanel(from)
+        arm()
+        const editor = useEditor.getState()
+        expect(editor.activeSidebarPanel).toBe(panel)
+        expect(editor.mode).toBe('build')
+        expect(editor.tool).toBe(tool)
+      }
+    } finally {
+      unsubscribe()
+    }
+  })
+
+  test('P arms paint and shows the Paint panel, or Build where the host has none', () => {
+    setSidebarTabIds(['build', 'paint', 'items'])
+    useEditor.getState().setActiveSidebarPanel('items')
+    armPaintFromShortcut()
+    expect(useEditor.getState().mode).toBe('material-paint')
+    expect(useEditor.getState().activeSidebarPanel).toBe('paint')
+
+    setSidebarTabIds(['site', 'build', 'items'])
+    useEditor.getState().setActiveSidebarPanel('items')
+    armPaintFromShortcut()
+    expect(useEditor.getState().activeSidebarPanel).toBe('build')
+  })
+})