@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/editor-2d/svg-paths.ts

@@ -66,12 +66,7 @@ export function buildSvgArcPath(
   endAngle: number,
 ) {
   const start = getArcPlanPoint(center, radius, startAngle)
-  const end = getArcPlanPoint(center, radius, endAngle)
-  const delta = endAngle - startAngle
-  const largeArcFlag = Math.abs(delta) > Math.PI ? 1 : 0
-  const sweepFlag = delta >= 0 ? 1 : 0
-
-  return `M ${toSvgX(start.x)} ${toSvgY(start.y)} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${toSvgX(end.x)} ${toSvgY(end.y)}`
+  return `M ${toSvgX(start.x)} ${toSvgY(start.y)} ${svgArcCommands(center, radius, startAngle, endAngle)}`
 }
 
 export function buildSvgAnnularSectorPath(
@@ -82,23 +77,25 @@ export function buildSvgAnnularSectorPath(
   endAngle: number,
 ) {
   const outerStart = getArcPlanPoint(center, outerRadius, startAngle)
-  const outerEnd = getArcPlanPoint(center, outerRadius, endAngle)
   const innerEnd = getArcPlanPoint(center, innerRadius, endAngle)
-  const innerStart = getArcPlanPoint(center, innerRadius, startAngle)
-  const delta = endAngle - startAngle
-  const largeArcFlag = Math.abs(delta) > Math.PI ? 1 : 0
-  const sweepFlag = delta >= 0 ? 1 : 0
-  const reverseSweepFlag = sweepFlag ? 0 : 1
-
   return [
     `M ${toSvgX(outerStart.x)} ${toSvgY(outerStart.y)}`,
-    `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} ${sweepFlag} ${toSvgX(outerEnd.x)} ${toSvgY(outerEnd.y)}`,
+    svgArcCommands(center, outerRadius, startAngle, endAngle),
     `L ${toSvgX(innerEnd.x)} ${toSvgY(innerEnd.y)}`,
-    `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} ${reverseSweepFlag} ${toSvgX(innerStart.x)} ${toSvgY(innerStart.y)}`,
+    svgArcCommands(center, innerRadius, endAngle, startAngle),
     'Z',
   ].join(' ')
 }
 
+function svgArcCommands(center: Point2D, radius: number, startAngle: number, endAngle: number) {
+  const delta = endAngle - startAngle
+  const count = Math.max(1, Math.ceil(Math.abs(delta) / Math.PI))
+  return Array.from({ length: count }, (_, index) => {
+    const end = getArcPlanPoint(center, radius, startAngle + (delta * (index + 1)) / count)
+    return `A ${radius} ${radius} 0 0 ${delta >= 0 ? 1 : 0} ${toSvgX(end.x)} ${toSvgY(end.y)}`
+  }).join(' ')
+}
+
 export function formatSvgPolygonPoints(points: Point2D[]) {
   return points.map((point) => `${toSvgX(point.x)},${toSvgY(point.y)}`).join(' ')
 }

package/src/components/procedural-items/inspector.tsx

@@ -9,7 +9,9 @@ import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useState } from 'react'
 import { useHandleGroup } from '../../store/use-handle-group'
 import { PanelSection } from '../ui/controls/panel-section'
+import { SegmentedControl } from '../ui/controls/segmented-control'
 import { SliderControl } from '../ui/controls/slider-control'
+import { ToggleControl } from '../ui/controls/toggle-control'
 import { PanelWrapper } from '../ui/panels/panel-wrapper'
 export function ProceduralInspector({
   nodeId,
@@ -75,21 +77,44 @@ export function ProceduralInspector({
         )}
       </div>
       <div className="space-y-3">
-        {fields.map((p) => (
-          <SliderControl
-            key={p.id}
-            label={p.label}
-            value={node.parameters[p.id] ?? p.default}
-            min={p.min}
-            max={p.max}
-            step={p.step}
-            precision={3}
-            unit={p.unit === 'm' ? 'm' : ''}
-            onChange={(v) => change(p.id, v, false)}
-            onCommit={(v) => change(p.id, v, true)}
-            restoreOnCommit={false}
-          />
-        ))}
+        {fields.map((p) => {
+          const value = node.parameters[p.id] ?? p.default
+          if (p.unit === 'bool')
+            return (
+              <ToggleControl
+                key={p.id}
+                label={p.label}
+                checked={value === 1}
+                onChange={(checked) => change(p.id, checked ? 1 : 0, true)}
+              />
+            )
+          if (p.unit === 'choice' && p.options && p.options.length <= 4)
+            return (
+              <div key={p.id} className="space-y-1.5">
+                <div className="text-muted-foreground text-xs">{p.label}</div>
+                <SegmentedControl
+                  value={String(value)}
+                  options={p.options.map((label, index) => ({ label, value: String(index) }))}
+                  onChange={(index) => change(p.id, Number(index), true)}
+                />
+              </div>
+            )
+          return (
+            <SliderControl
+              key={p.id}
+              label={p.unit === 'choice' ? `${p.label}: ${p.options?.[value] ?? value}` : p.label}
+              value={value}
+              min={p.min}
+              max={p.max}
+              step={p.step}
+              precision={p.unit === 'choice' ? 0 : 3}
+              unit={p.unit === 'm' ? 'm' : ''}
+              onChange={(v) => change(p.id, v, false)}
+              onCommit={(v) => change(p.id, v, true)}
+              restoreOnCommit={false}
+            />
+          )
+        })}
       </div>
       {partId && (
         <button

package/src/components/systems/ceiling/ceiling-selection-affordance-system.test.ts

@@ -12,6 +12,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { _roots, act, createRoot, events, extend, type RootState } from '@react-three/fiber'
 import { createElement } from 'react'
 import { Group, InstancedMesh, OrthographicCamera, Vector3, type WebGLRenderer } from 'three'
+import { endCeilingEdit, startCeilingEdit } from '../../../lib/ceiling-edit-session'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
@@ -33,7 +34,13 @@ type BracketHarness = {
   sounds: string[]
 }
 
-async function withMountedBrackets(run: (harness: BracketHarness) => Promise<void>) {
+async function withMountedBrackets(
+  run: (harness: BracketHarness) => Promise<void>,
+  {
+    ceilingData = {},
+    session = true,
+  }: { ceilingData?: Partial<CeilingNode>; session?: boolean } = {},
+) {
   const previousScene = useScene.getState()
   const previousViewer = useViewer.getState()
   const previousEditor = useEditor.getState()
@@ -54,6 +61,7 @@ async function withMountedBrackets(run: (harness: BracketHarness) => Promise<voi
   const building = BuildingNode.parse({})
   const level = LevelNode.parse({ parentId: building.id, height: 3 })
   const ceiling = CeilingNode.parse({
+    ...ceilingData,
     parentId: level.id,
     height: 3,
     polygon: [
@@ -81,8 +89,9 @@ async function withMountedBrackets(run: (harness: BracketHarness) => Promise<voi
       hoveredId: null,
       selection: { buildingId: building.id, levelId: level.id, zoneId: null, selectedIds: [] },
     })
-    useEditor.setState({ phase: 'structure', mode: 'select', structureLayer: 'elements' })
+    useEditor.setState({ phase: 'building', mode: 'select' })
     useInteractionScope.setState({ scope: { kind: 'idle' } })
+    if (session) startCeilingEdit(ceiling.id)
     const camera = Object.assign(new OrthographicCamera(-1, 5, 5, -1, 0.1, 100), { manual: true })
     camera.position.set(0, 10, 0)
     camera.up.set(0, 0, -1)
@@ -145,7 +154,10 @@ async function withMountedBrackets(run: (harness: BracketHarness) => Promise<voi
       sounds,
     })
   } finally {
-    await act(async () => root.render(null))
+    await act(async () => {
+      endCeilingEdit()
+      root.render(null)
+    })
     clearBoxSelectHandled()
     emitter.off('ceiling:click', onClick)
     sfxEmitter.off('*', onSound)
@@ -186,6 +198,7 @@ test('mounted brackets preserve hover, clicks, drags, capture visibility, overri
       await dispatch('onPointerDown', 4, 0)
 
       const oldNormal = meshes().find((mesh) => mesh.renderOrder === 1000)
+      // Ceilings outside the session get no brackets.
       await act(async () => {
         const additions = Array.from({ length: 8 }, (_, index) =>
           CeilingNode.parse({
@@ -206,12 +219,43 @@ test('mounted brackets preserve hover, clicks, drags, capture visibility, overri
           },
         })
       })
+      expect(meshes().find((mesh) => mesh.renderOrder === 1000)).toBe(oldNormal)
+      expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+      // Twelve corners overflow the initial capacity: the batch meshes are replaced
+      // while the pressed corner keeps its index.
+      await act(async () =>
+        useScene.setState({
+          nodes: {
+            ...useScene.getState().nodes,
+            [ceiling.id]: CeilingNode.parse({
+              ...ceiling,
+              polygon: [
+                [0, 0],
+                [4, 0],
+                [4, 1],
+                [4, 2],
+                [4, 3],
+                [4, 4],
+                [3, 4],
+                [2, 4],
+                [1, 4],
+                [0, 4],
+                [0, 3],
+                [0, 2],
+              ],
+            }),
+          },
+        }),
+      )
       expect(meshes()).toHaveLength(2)
       expect(meshes().find((mesh) => mesh.renderOrder === 1000)).not.toBe(oldNormal)
       expect(useViewer.getState().hoveredId).toBe(ceiling.id)
       await dispatch('onClick', 4, 0)
       expect(clicks).toHaveLength(2)
       expect(clicks[1].position).toEqual([4, 3, 0])
+      await act(async () =>
+        useScene.setState({ nodes: { ...useScene.getState().nodes, [ceiling.id]: ceiling } }),
+      )
       await dispatch('onPointerLeave', 4, 0)
       expect(useViewer.getState().hoveredId).toBeNull()
 
@@ -277,7 +321,7 @@ test('mounted brackets preserve hover, clicks, drags, capture visibility, overri
   )
 })
 
-test('coincident ceiling corners keep the same hover, click, and drag owner across batch transfers', async () => {
+test('an adjacent ceiling outside the session has no brackets at a shared corner', async () => {
   await withMountedBrackets(async ({ ceiling, dispatch, dispatchWindow, meshes, clicks }) => {
     const adjacent = CeilingNode.parse({
       ...ceiling,
@@ -294,25 +338,64 @@ test('coincident ceiling corners keep the same hover, click, and drag owner acro
         nodes: { ...useScene.getState().nodes, [adjacent.id]: adjacent },
       }),
     )
-    const owner = ceiling.id < adjacent.id ? ceiling : adjacent
-    const other = owner === ceiling ? adjacent : ceiling
-    for (let move = 0; move < 20; move++) {
-      await dispatch('onPointerMove', 0, 0)
-      expect(useViewer.getState().hoveredId).toBe(owner.id)
-      expect(meshes().find((mesh) => mesh.renderOrder === 1001)!.count).toBe(7)
-    }
+    expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+    await dispatch('onPointerMove', 0, 0)
+    expect(useViewer.getState().hoveredId).toBe(ceiling.id)
     await dispatch('onPointerDown', 0, 0)
     await dispatch('onClick', 0, 0)
-    expect(clicks[0].node.id).toBe(owner.id)
+    expect(clicks[0].node.id).toBe(ceiling.id)
     await dispatchWindow('pointermove', 0.5, 0.5)
-    expect(useLiveNodeOverrides.getState().overrides.has(owner.id)).toBe(true)
-    expect(useLiveNodeOverrides.getState().overrides.has(other.id)).toBe(false)
+    expect(useLiveNodeOverrides.getState().overrides.has(ceiling.id)).toBe(true)
+    expect(useLiveNodeOverrides.getState().overrides.has(adjacent.id)).toBe(false)
     await dispatchWindow('pointercancel', 0.5, 0.5)
     await dispatch('onPointerLeave', 0, 0)
     expect(useViewer.getState().hoveredId).toBeNull()
   })
 })
 
+test('brackets and their hit boxes exist only inside the Edit ceiling session', async () => {
+  await withMountedBrackets(
+    async ({ ceiling, dispatch, meshes, levelObject }) => {
+      // A canvas selection of the ceiling alone shows nothing.
+      await act(async () => useViewer.getState().setSelection({ selectedIds: [ceiling.id] }))
+      expect(meshes()).toHaveLength(0)
+      expect(levelObject.children).toHaveLength(0)
+      await dispatch('onPointerMove', 0, 0)
+      expect(useViewer.getState().hoveredId).toBeNull()
+
+      await act(async () => {
+        startCeilingEdit(ceiling.id)
+      })
+      expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+
+      await act(async () => useViewer.getState().setSelection({ selectedIds: [] }))
+      expect(meshes()).toHaveLength(0)
+      expect(levelObject.children).toHaveLength(0)
+    },
+    { session: false },
+  )
+})
+
+test('a corner drag detaches an auto ceiling; the session stays open', async () => {
+  await withMountedBrackets(
+    async ({ ceiling, dispatch, dispatchWindow, meshes }) => {
+      expect(ceiling.boundary).toBe('auto')
+      await dispatch('onPointerDown', 0, 0)
+      await dispatchWindow('pointermove', 0.5, 0.5)
+      const preview = useLiveNodeOverrides.getState().overrides.get(ceiling.id)
+        ?.polygon as CeilingNode['polygon']
+      await dispatchWindow('pointerup', 0.5, 0.5)
+      const committed = useScene.getState().nodes[ceiling.id] as CeilingNode
+      expect(committed.polygon).toEqual(preview)
+      expect(committed.boundary).toBeUndefined()
+      expect(committed.zoneId).toBeUndefined()
+      expect(useViewer.getState().selection.selectedIds).toEqual([ceiling.id])
+      expect(meshes().reduce((sum, mesh) => sum + mesh.count, 0)).toBe(12)
+    },
+    { ceilingData: { boundary: 'auto', zoneId: 'zone_auto_ceiling' } },
+  )
+})
+
 test('same-id registry replacement rebinds the portal and drag plane without rewriting instance data', async () => {
   await withMountedBrackets(
     async ({ ceiling, level, levelObject, state, dispatch, dispatchWindow, meshes, clicks }) => {

package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  type AnyNodeId,
   type CeilingNode,
   emitter,
   resolveCeilingHeight,
@@ -24,6 +25,7 @@ import {
 } from 'react'
 import { Group, type Object3D, Plane, Raycaster, Vector2, Vector3 } from 'three'
 import { useShallow } from 'zustand/react/shallow'
+import { useCeilingEditCeilingId } from '../../../lib/ceiling-edit-session'
 import {
   clearCeilingSnapFeedback,
   resolveCeilingPlanPointSnap,
@@ -94,9 +96,7 @@ function clearCornerDragPreview(drag: CornerDragState) {
 }
 
 export const CeilingSelectionAffordanceSystem = () => {
-  const phase = useEditor((state) => state.phase)
   const mode = useEditor((state) => state.mode)
-  const structureLayer = useEditor((state) => state.structureLayer)
   // ANY active interaction (moving/placing a node, reshaping a boundary or
   // curve, dragging a handle) unmounts the brackets: their ceiling-height hit
   // boxes would otherwise catch drag-time hover, set `hoveredId` to the
@@ -105,26 +105,24 @@ export const CeilingSelectionAffordanceSystem = () => {
   // scope, so it can't unmount itself.
   const scopeIdle = useInteractionScope((state) => state.scope.kind === 'idle')
   const currentLevelId = useViewer((state) => state.selection.levelId)
+  // Brackets and their hit boxes exist only for the ceiling in an explicit
+  // Edit ceiling session (`lib/ceiling-edit-session.ts`).
+  const editCeilingId = useCeilingEditCeilingId()
 
   const ceilings = useScene(
-    useShallow((state) =>
-      Object.values(state.nodes).filter((node): node is CeilingNode => {
-        return (
-          node.type === 'ceiling' &&
-          node.visible !== false &&
-          currentLevelId !== null &&
-          resolveLevelId(node, state.nodes) === currentLevelId
-        )
-      }),
-    ),
+    useShallow((state) => {
+      const node = editCeilingId ? state.nodes[editCeilingId as AnyNodeId] : undefined
+      return node?.type === 'ceiling' &&
+        node.visible !== false &&
+        currentLevelId !== null &&
+        resolveLevelId(node, state.nodes) === currentLevelId
+        ? [node]
+        : []
+    }),
   )
 
   const shouldRender =
-    phase === 'structure' &&
-    mode === 'select' &&
-    structureLayer === 'elements' &&
-    scopeIdle &&
-    currentLevelId !== null
+    mode === 'select' && scopeIdle && currentLevelId !== null && ceilings.length > 0
 
   if (!shouldRender) return null
 
@@ -528,7 +526,9 @@ const CeilingSelectionAffordance = memo(function CeilingSelectionAffordance({
         suppressNextClick()
 
         if (drag.previewPolygon) {
-          useScene.getState().updateNode(drag.ceilingId, { polygon: drag.previewPolygon })
+          // A polygon edit converts a derived (`boundary: 'auto'`) ceiling into
+          // an authored one, like the boundary editor's commit.
+          useScene.getState().detachDerivedNode(drag.ceilingId, { polygon: drag.previewPolygon })
           useViewer.getState().setSelection({ selectedIds: [drag.ceilingId] })
         }
 

package/src/components/systems/zone/zone-system.test.ts

@@ -0,0 +1,47 @@
+import { expect, test } from 'bun:test'
+import { useScene, ZoneNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { act, create } from '@react-three/test-renderer'
+import { createElement } from 'react'
+import useEditor from '../../../store/use-editor'
+import { ZoneSystem } from './zone-system'
+
+test('zone volumes mount only while a unit is painted, never for a selected zone', async () => {
+  const previousScene = useScene.getState()
+  const previousViewer = useViewer.getState()
+  const previousEditor = useEditor.getState()
+  const zone = ZoneNode.parse({
+    name: 'Courtyard',
+    polygon: [
+      [0, 0],
+      [4, 0],
+      [4, 4],
+      [0, 4],
+    ],
+  })
+  useScene.setState({ nodes: { [zone.id]: zone } })
+  useViewer.setState({
+    focusedUnitId: null,
+    showZones: false,
+    selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [zone.id] },
+  })
+  useEditor.setState({ isCaptureMode: false })
+  const renderer = await create(createElement(ZoneSystem))
+  try {
+    // A selected drawn zone looks like a room: outline, no tinted volume.
+    expect(useViewer.getState().showZones).toBe(false)
+    await act(async () => useViewer.setState({ focusedUnitId: 'unit_paint' as never }))
+    expect(useViewer.getState().showZones).toBe(true)
+    await act(async () => useEditor.getState().setCaptureMode(true))
+    expect(useViewer.getState().showZones).toBe(false)
+    await act(async () => useEditor.getState().setCaptureMode(false))
+    expect(useViewer.getState().showZones).toBe(true)
+    await act(async () => useViewer.setState({ focusedUnitId: null }))
+    expect(useViewer.getState().showZones).toBe(false)
+  } finally {
+    await renderer.unmount()
+    useScene.setState(previousScene)
+    useViewer.setState(previousViewer)
+    useEditor.setState(previousEditor)
+  }
+})

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

@@ -9,40 +9,32 @@ import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
 
 // Disable raycasting on zone geometry so clicks pass through to items underneath.
-// Zone selection in the editor is handled exclusively via the HTML label overlay.
 const noopRaycast = () => {}
 
+/**
+ * Zone volumes are a working view for one job only: painting a unit's
+ * membership, where every zone on the level has to be in view. Otherwise every
+ * zone, drawn or detected, shows as a room: a light label pill (`RoomLabels3D`)
+ * and the room outline when selected. Mounting is the viewer's `showZones`
+ * flag: unmounting skips the meshes and drei labels entirely, and the cleanup
+ * restores the default so preview / first-person surfaces keep their labels.
+ */
 export const ZoneSystem = () => {
-  // Outside the zones layer (or during snapshot capture) zones unmount
-  // entirely — meshes AND drei <Html> labels, which cost per-frame matrix work
-  // + live DOM even at opacity 0. The renderer reads this viewer flag; the
-  // unmount cleanup restores the default so preview / first-person surfaces
-  // (which swap this system for ViewerZoneSystem) keep their labels.
-  const structureLayerState = useEditor((s) => s.structureLayer)
-  const isCaptureModeState = useEditor((s) => s.isCaptureMode)
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  const active = !!focusedUnitId && !isCaptureMode
   useEffect(() => {
-    useViewer.getState().setShowZones(structureLayerState === 'zones' && !isCaptureModeState)
+    useViewer.getState().setShowZones(active)
     return () => useViewer.getState().setShowZones(true)
-  }, [structureLayerState, isCaptureModeState])
+  }, [active])
 
   useFrame((_, delta) => {
     if (!useViewer.getState().showZones) return
 
-    const structureLayer = useEditor.getState().structureLayer
-    const editorMode = useEditor.getState().mode
-    const selectedLevelId = useViewer.getState().selection.levelId
-    const selectedZoneId = useViewer.getState().selection.zoneId
-    const hoveredId = useViewer.getState().hoveredId
-    // Snapshot capture is a clean, camera-only surface — never show zone
-    // geometry or the HTML zone tags in the framed shot.
-    const isCaptureMode = useEditor.getState().isCaptureMode
-
-    // During any active interaction zone labels step back entirely — they are
-    // not a primary editing concern and would distract / invite misclicks.
+    const { levelId: selectedLevelId } = useViewer.getState().selection
+    // During any active interaction zone labels step back entirely.
     const zoneLabelsHidden =
       resolveOverlayPolicy(useInteractionScope.getState().scope).zoneLabels === 'hidden'
-
-    const zoneGeometryVisible = structureLayer === 'zones'
     const zones = sceneRegistry.byType.zone || new Set()
     const nodes = useScene.getState().nodes
     const lerpSpeed = 10 * delta
@@ -52,59 +44,32 @@ export const ZoneSystem = () => {
       if (!obj) return
 
       const zone = nodes[zoneId as ZoneNode['id']] as ZoneNode | undefined
-
       const isOnSelectedLevel = zone?.parentId === selectedLevelId
-      const isSelected = zoneId === selectedZoneId
-      const isDeleteHovered = editorMode === 'delete' && hoveredId === zoneId
-
-      // Keep group visible (so <Html> labels stay active), hide/show meshes only.
-      // Show meshes when: in zone mode, selected, or delete-hovered.
-      if (!obj.visible) obj.visible = true
-      const meshVisible = !isCaptureMode && (zoneGeometryVisible || isSelected || isDeleteHovered)
-      const targetOpacity = isCaptureMode
-        ? 0
-        : isSelected || isDeleteHovered
-          ? 1
-          : zoneGeometryVisible
-            ? 1
-            : 0
-
-      // Raycast is re-disabled per frame (not once per group): the meshes
-      // remount whenever the zones layer toggles, so a one-shot flag on the
-      // persistent group would leave fresh meshes clickable.
-      const walls = (obj as Group).getObjectByName('walls') as Mesh | undefined
-      if (walls) {
-        walls.visible = meshVisible
-        walls.raycast = noopRaycast
-        const material = walls.material as MeshBasicNodeMaterial
-        if (material?.userData?.uOpacity) {
-          material.userData.uOpacity.value = MathUtils.lerp(
-            material.userData.uOpacity.value,
-            targetOpacity,
-            lerpSpeed,
-          )
-        }
-      }
+      // A zone the author hid (sidebar eye) takes its group with it; otherwise
+      // this per-frame write would undo the renderer's `visible` prop.
+      const nodeVisible = zone?.visible !== false
+      if (obj.visible !== nodeVisible) obj.visible = nodeVisible
+      const shown = nodeVisible && isOnSelectedLevel
 
-      const floor = (obj as Group).getObjectByName('floor') as Mesh | undefined
-      if (floor) {
-        floor.visible = meshVisible
-        floor.raycast = noopRaycast
-        const material = floor.material as MeshBasicNodeMaterial
+      // Raycast is re-disabled per frame: the meshes remount whenever zones
+      // mount again, so a one-shot flag on the persistent group would leave
+      // fresh meshes clickable.
+      for (const name of ['walls', 'floor']) {
+        const mesh = (obj as Group).getObjectByName(name) as Mesh | undefined
+        if (!mesh) continue
+        mesh.visible = shown
+        mesh.raycast = noopRaycast
+        const material = mesh.material as MeshBasicNodeMaterial
         if (material?.userData?.uOpacity) {
           material.userData.uOpacity.value = MathUtils.lerp(
             material.userData.uOpacity.value,
-            targetOpacity,
+            shown ? 1 : 0,
             lerpSpeed,
           )
         }
       }
 
-      // Labels: visible on the current level (regardless of mode), but never
-      // during snapshot capture.
-      const showLabel =
-        !isCaptureMode && !zoneLabelsHidden && !!selectedLevelId && isOnSelectedLevel
-      const labelOpacity = showLabel ? '1' : '0'
+      const labelOpacity = shown && !zoneLabelsHidden ? '1' : '0'
       const labelEl = document.getElementById(`${zoneId}-label`)
       if (labelEl && labelEl.style.opacity !== labelOpacity) {
         labelEl.style.opacity = labelOpacity

package/src/components/tools/__fixtures__/hosting.ts

@@ -0,0 +1,10 @@
+import { type AnyNodeDefinition, registerNode } from '@pascal-app/core'
+
+export function registerHostingTestNode(definition: AnyNodeDefinition) {
+  registerNode({
+    ...definition,
+    geometry: () => {
+      throw new Error('Unit-test host geometry must not be rendered')
+    },
+  })
+}

package/src/components/tools/item/item-surface-placement.test.ts

@@ -1,15 +1,9 @@
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
-import {
-  type ItemEvent,
-  ItemNode,
-  nodeRegistry,
-  registerNode,
-  sceneRegistry,
-  useScene,
-} from '@pascal-app/core'
+import { type ItemEvent, ItemNode, nodeRegistry, sceneRegistry, useScene } from '@pascal-app/core'
 import { Group, Vector3 } from 'three'
 import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
+import { registerHostingTestNode } from '../__fixtures__/hosting'
 import { itemSurfaceStrategy } from './placement-strategies'
 import type { PlacementContext } from './placement-types'
 
@@ -28,7 +22,7 @@ const scopeState = useInteractionScope.getState()
 beforeEach(() => {
   restoreRegistry = nodeRegistry._snapshot()
   nodeRegistry._reset()
-  registerNode({
+  registerHostingTestNode({
     kind: 'item',
     schemaVersion: 1,
     schema: ItemNode,

package/src/components/tools/item/item-surface-strategy-resolver.test.ts

@@ -1,16 +1,10 @@
 import { afterEach, beforeEach, expect, spyOn, test } from 'bun:test'
 import * as core from '@pascal-app/core'
-import {
-  type ItemEvent,
-  ItemNode,
-  nodeRegistry,
-  registerNode,
-  sceneRegistry,
-  useScene,
-} from '@pascal-app/core'
+import { type ItemEvent, ItemNode, nodeRegistry, sceneRegistry, useScene } from '@pascal-app/core'
 import { Group, Vector3 } from 'three'
 import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
+import { registerHostingTestNode } from '../__fixtures__/hosting'
 import { itemSurfaceStrategy } from './placement-strategies'
 import type { PlacementContext } from './placement-types'
 
@@ -37,7 +31,7 @@ let resolver: ReturnType<typeof spyOn<typeof core, 'resolveSurfacePlacement'>>
 beforeEach(() => {
   restoreRegistry = nodeRegistry._snapshot()
   nodeRegistry._reset()
-  registerNode({
+  registerHostingTestNode({
     kind: 'item',
     schemaVersion: 1,
     schema: ItemNode,