@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/ui/panels/mobile-panel-sheet.tsx

@@ -2,10 +2,10 @@
 
 import { X } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
-import Image from 'next/image'
 import { type ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import useEditor from '../../../store/use-editor'
+import { NodeIconImage } from '../node-icon-image'
 
 interface MobilePanelSheetProps {
   open: boolean
@@ -75,7 +75,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
           <div className="flex shrink-0 items-center justify-between border-border/50 border-b px-3 pt-1 pb-3">
             <div className="flex min-w-0 items-center gap-2">
               {icon && (
-                <Image
+                <NodeIconImage
                   alt=""
                   className="shrink-0 object-contain"
                   height={18}

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -2,9 +2,9 @@
 
 import type { AnyNode } from '@pascal-app/core'
 import { Copy, Move, SlidersHorizontal, Trash2 } from 'lucide-react'
-import Image from 'next/image'
 import type { MouseEventHandler } from 'react'
 import { cn } from '../../../lib/utils'
+import { NodeIconImage } from '../node-icon-image'
 import { getNodeDisplay } from './node-display'
 
 interface MobileSelectionBarProps {
@@ -45,7 +45,7 @@ export function MobileSelectionBar({
         onClick={onEdit}
         type="button"
       >
-        <Image
+        <NodeIconImage
           alt=""
           className="shrink-0 rounded object-contain"
           height={20}

package/src/components/ui/panels/multi-field-value.test.ts

@@ -5,6 +5,9 @@ import {
   BuildingNode,
   clearSceneHistory,
   LevelNode,
+  planStairFlightHeightEdit,
+  StairNode,
+  StairSegmentNode,
   useLiveNodeOverrides,
   useScene,
   WallNode,
@@ -124,9 +127,7 @@ describe('buildMultiNodePatches', () => {
       nodes,
       {
         derive: (next) => ({ thickness: (next as { height: number }).height / 10 }),
-        reconcile: (prev) => [
-          { id: `${prev.id}_follow` as AnyNodeId, data: { height: 4 } },
-        ],
+        reconcile: (prev) => [{ id: `${prev.id}_follow` as AnyNodeId, data: { height: 4 } }],
       },
     )
     expect(patches).toEqual([
@@ -207,3 +208,25 @@ describe('commitMultiNodeFields', () => {
     expect((useScene.getState().nodes[WALL_C] as { height?: number }).height).toBe(2.7)
   })
 })
+
+test('multi-flight edits reconcile their parent from the complete proposed scene', () => {
+  const first = StairSegmentNode.parse({ height: 1 })
+  const second = StairSegmentNode.parse({ height: 3 })
+  const stair = StairNode.parse({ totalRise: 4, children: [first.id, second.id] })
+  first.parentId = stair.id
+  second.parentId = stair.id
+  const nodes: Record<string, AnyNode> = Object.fromEntries(
+    [stair, first, second].map((node) => [node.id, node]),
+  )
+  const patches = buildMultiNodePatches([first.id, second.id], () => ({ height: 2 }), nodes, {
+    reconcile: (_prev, next, proposed) =>
+      next.type === 'stair-segment'
+        ? planStairFlightHeightEdit(next, next.height, proposed!).slice(1)
+        : [],
+  })
+  const result = { ...nodes }
+  for (const patch of patches) result[patch.id] = { ...result[patch.id], ...patch.data } as AnyNode
+  expect((result[first.id] as StairSegmentNode).height).toBe(2)
+  expect((result[second.id] as StairSegmentNode).height).toBe(2)
+  expect((result[stair.id] as StairNode).totalRise).toBe(4)
+})

package/src/components/ui/panels/multi-field-value.ts

@@ -125,9 +125,12 @@ export function buildMultiNodePatches(
       patch = { ...patch, ...parametrics.derive(next, patch, node) } as Partial<AnyNode>
     }
     updates.push({ id, data: patch })
-    if (parametrics?.reconcile) {
-      const next = { ...node, ...patch } as AnyNode
-      followUps.push(...parametrics.reconcile(node, next))
+  }
+  if (parametrics?.reconcile) {
+    const proposed = { ...nodes }
+    for (const { id, data } of updates) proposed[id] = { ...nodes[id], ...data } as AnyNode
+    for (const { id } of updates) {
+      followUps.push(...parametrics.reconcile(nodes[id]!, proposed[id]!, proposed))
     }
   }
   return [...updates, ...followUps]

package/src/components/ui/panels/multi-height-mode.tsx

@@ -58,6 +58,32 @@ function ceilingCustomHeight(node: CeilingNode, nodes: Record<string, AnyNode>):
   return Math.min(resolved, max)
 }
 
+export function applyMultiHeightMode(
+  nodeIds: AnyNodeId[],
+  next: 'storey' | 'custom',
+  parametrics: ParametricDescriptor<AnyNode>,
+) {
+  const nodes = useScene.getState().nodes as Record<string, AnyNode>
+  commitMultiNodeFields(
+    nodeIds,
+    (node) => {
+      const isCustom = (node as { height?: number }).height != null
+      if (next === 'custom') {
+        if (isCustom) return {}
+        if (node.type === 'ceiling') return { height: ceilingCustomHeight(node, nodes) }
+        if (node.type === 'wall') {
+          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
+        }
+        return {}
+      }
+      if (!isCustom) return {}
+      if (node.type === 'wall') return wallFollowsLevelPatch(node, nodes)
+      return { height: undefined }
+    },
+    parametrics,
+  )
+}
+
 export function MultiHeightModeField({
   nodeIds,
   nodeType,
@@ -97,27 +123,7 @@ export function MultiHeightModeField({
 
   const applyMode = useCallback(
     (next: 'storey' | 'custom') => {
-      const nodes = useScene.getState().nodes as Record<string, AnyNode>
-      commitMultiNodeFields(
-        nodeIds,
-        (node) => {
-          const isCustom = (node as { height?: number }).height != null
-          if (next === 'custom') {
-            if (isCustom) return {}
-            if (node.type === 'ceiling') {
-              return { height: ceilingCustomHeight(node, nodes) }
-            }
-            if (node.type === 'wall') {
-              return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
-            }
-            return {}
-          }
-          if (!isCustom) return {}
-          if (node.type === 'wall') return wallFollowsLevelPatch(node, nodes)
-          return { height: undefined }
-        },
-        parametrics,
-      )
+      applyMultiHeightMode(nodeIds, next, parametrics)
     },
     [nodeIds, parametrics],
   )

package/src/components/ui/panels/multi-parametric-inspector.tsx

@@ -11,9 +11,11 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { getNodePanelModel } from '../../../lib/panel-rows'
 import { selectionMatchesSessionGroup } from '../../../lib/session-groups'
 import useSessionGroups from '../../../store/use-session-groups'
 import { PanelSection } from '../controls/panel-section'
+import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import { resolveUniqueSelectionIds } from './homogeneous-selection'
 import {
@@ -52,6 +54,7 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
 
   const def = nodeType ? nodeRegistry.get(nodeType) : undefined
   const parametrics = def?.parametrics as ParametricDescriptor<AnyNode> | undefined
+  const hasKindControls = !!getNodePanelModel(def)?.multiControls
 
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
@@ -79,7 +82,11 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
           nodeType={nodeType}
           parametrics={parametrics}
           title={group.label}
-        />
+        >
+          {hasKindControls ? (
+            <MultiKindControls nodeIds={nodeIds} nodeType={nodeType} section={group.label} />
+          ) : null}
+        </MultiGroupFields>
       ))}
       <div className="border-border/50 border-t p-3">
         <MultiSelectionActions />
@@ -88,6 +95,46 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
   )
 }
 
+/**
+ * The kind's own multi-selection controls for one section (the wall's
+ * Reference), from its panel model — the same segmented control the single
+ * panel shows, mixed when the selection disagrees.
+ */
+function MultiKindControls({
+  nodeIds,
+  nodeType,
+  section,
+}: {
+  nodeIds: AnyNodeId[]
+  nodeType: AnyNode['type']
+  section: string
+}) {
+  const nodes = useScene((s) => s.nodes)
+  const controls = useMemo(() => {
+    const model = getNodePanelModel(nodeRegistry.get(nodeType))
+    if (!model?.multiControls) return []
+    const selection = nodeIds.flatMap((id) => (nodes[id] ? [nodes[id]!] : []))
+    return model.multiControls({ selection, nodes }).filter((control) => control.section === section)
+  }, [nodeIds, nodeType, nodes, section])
+  return (
+    <>
+      {controls.map((control) => (
+        <div className="flex flex-col gap-1" key={control.id}>
+          <div className="px-1 font-medium text-[10px] text-muted-foreground/80">
+            {control.label}
+          </div>
+          <SegmentedControl
+            mixed={control.value === null}
+            onChange={control.onChange}
+            options={control.options.map((option) => ({ ...option }))}
+            value={control.value ?? ''}
+          />
+        </div>
+      ))}
+    </>
+  )
+}
+
 function MultiGroupFields({
   defaultExpanded,
   title,
@@ -95,7 +142,9 @@ function MultiGroupFields({
   nodeIds,
   nodeType,
   parametrics,
+  children,
 }: {
+  children?: React.ReactNode
   defaultExpanded?: boolean
   title: string
   fields: ParamField<AnyNode>[]
@@ -109,7 +158,7 @@ function MultiGroupFields({
       fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
     ),
   )
-  if (genericFields.length === 0 || !anyVisible) return null
+  if ((genericFields.length === 0 || !anyVisible) && !children) return null
   return (
     <PanelSection defaultExpanded={defaultExpanded} title={title}>
       {genericFields.map((field, fi) => {
@@ -139,6 +188,7 @@ function MultiGroupFields({
           />
         )
       })}
+      {children}
     </PanelSection>
   )
 }

package/src/components/ui/panels/multi-selection-panel.tsx

@@ -1,10 +1,16 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type BuildingNode,
+  resolveBuildingForLevel,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Copy, Group, Trash2, Ungroup } from 'lucide-react'
+import { Building2, Copy, Group, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'
 import {
   canCreateSessionGroup,
   selectionIntersectsSessionGroup,
@@ -18,6 +24,25 @@ import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelWrapper } from './panel-wrapper'
 import { formatSelectionBreakdown } from './selection-breakdown'
 
+/** The building holding the level, when the selection is everything selectable on it. */
+function useWholeLevelBuildingId(selectedIds: readonly string[]) {
+  const levelId = useViewer((s) => s.selection.levelId)
+  const nodes = useScene((s) => s.nodes)
+  return useMemo(() => {
+    if (!levelId) return null
+    const candidates = collectSelectableCandidateIds()
+    if (candidates.length === 0) return null
+    const selected = new Set(selectedIds)
+    if (!candidates.every((id) => selected.has(id))) return null
+    return resolveBuildingForLevel(levelId as AnyNodeId, nodes) ?? null
+  }, [levelId, nodes, selectedIds])
+}
+
+/** The building's own selection (no level): its floating pill offers the whole-building Move. */
+function selectBuilding(buildingId: AnyNodeId) {
+  useViewer.getState().setSelection({ buildingId: buildingId as BuildingNode['id'] })
+}
+
 export function MultiSelectionActions() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const sessionGroups = useSessionGroups((s) => s.groups)
@@ -32,10 +57,22 @@ export function MultiSelectionActions() {
     [sessionGroups, selectedIds, liveIds],
   )
 
+  const buildingId = useWholeLevelBuildingId(selectedIds)
+
   return (
-    <ActionGroup>
+    <ActionGroup className="flex-wrap">
+      {buildingId && (
+        <ActionButton
+          className="basis-full whitespace-nowrap"
+          icon={<Building2 className="h-4 w-4" />}
+          label="Select building"
+          onClick={() => selectBuilding(buildingId)}
+          title="Select the whole building to move all its levels"
+        />
+      )}
       {showGroup && (
         <ActionButton
+          className="min-w-20 px-2"
           icon={<Group className="h-4 w-4" />}
           label="Group"
           onClick={() => groupCurrentSelection()}
@@ -44,6 +81,7 @@ export function MultiSelectionActions() {
       )}
       {showUngroup && (
         <ActionButton
+          className="min-w-20 px-2"
           icon={<Ungroup className="h-4 w-4" />}
           label="Ungroup"
           onClick={() => ungroupCurrentSelection()}
@@ -51,12 +89,13 @@ export function MultiSelectionActions() {
         />
       )}
       <ActionButton
+        className="min-w-20 px-2"
         icon={<Copy className="h-4 w-4" />}
         label="Duplicate"
         onClick={() => duplicateSelectionAndPickUp()}
       />
       <ActionButton
-        className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+        className="min-w-20 px-2 border-red-500/40 text-red-200 hover:bg-red-500/15"
         icon={<Trash2 className="h-4 w-4 text-red-400" />}
         label="Delete"
         onClick={() => deleteSelection()}

package/src/components/ui/panels/node-display.ts

@@ -1,4 +1,4 @@
-import type { AnyNode } from '@pascal-app/core'
+import { type AnyNode, scriptImages } from '@pascal-app/core'
 
 export type NodeDisplay = {
   icon: string
@@ -21,6 +21,7 @@ const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
   'stair-segment': { icon: '/icons/stairs.webp', label: 'Stair segment' },
   scan: { icon: '/icons/mesh.webp', label: '3D Scan' },
   guide: { icon: '/icons/floorplan.webp', label: 'Guide image' },
+  zone: { icon: '/icons/zone.webp', label: 'Zone' },
 }
 
 export function getTypeDisplay(type: string): NodeDisplay {
@@ -30,15 +31,19 @@ export function getTypeDisplay(type: string): NodeDisplay {
 export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
   if (!node) return { icon: '/icons/select.webp', label: 'Selection' }
   const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.webp', label: node.type }
+  const scripted = scriptImages(node)?.thumbnail
   // Item nodes carry an asset with its own thumbnail/name
   if (node.type === 'item') {
     return {
-      icon: node.asset?.thumbnail || fallback.icon,
+      icon: scripted ?? (node.asset?.thumbnail || fallback.icon),
       label: node.name || node.asset?.name || fallback.label,
     }
   }
+  if (node.type === 'zone' && node.spaceRole === 'room') {
+    return { icon: '/icons/kitchen.webp', label: node.name || 'Room' }
+  }
   return {
-    icon: fallback.icon,
+    icon: scripted ?? fallback.icon,
     label: node.name || fallback.label,
   }
 }

package/src/components/ui/panels/panel-manager.tsx

@@ -22,11 +22,16 @@ import {
   type WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useSelectedRoom, useZoneRoom } from '../../../hooks/use-selected-room'
+import { FloorOpeningPanel } from './floor-opening-panel'
+import { OpenRoomPanel, RoomPanel } from './room-panel'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import { shouldShowEditingControls } from '../../../lib/interaction/overlay-policy'
+import { captureElementActionOrigin, completeElementAction } from '../../../lib/room-zone-routing'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { duplicateNodeAndPickUp } from '../../editor/duplicate-node'
 import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from '../../editor/group-actions'
 import { resolveHomogeneousSelection } from './homogeneous-selection'
 import { MobilePanelSheet } from './mobile-panel-sheet'
@@ -34,7 +39,7 @@ import { MobileSelectionBar } from './mobile-selection-bar'
 import { MultiParametricInspector } from './multi-parametric-inspector'
 import { MultiSelectionPanel } from './multi-selection-panel'
 import { getNodeDisplay, getTypeDisplay } from './node-display'
-import { resetDesktopInspectorCollapsed } from './panel-wrapper'
+import { InspectedNodesContext } from './panel-wrapper'
 import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
 import { formatSelectionBreakdown } from './selection-breakdown'
@@ -127,24 +132,16 @@ function MobilePanelLayer({
   }, [node, setMovingNode, clearSelection])
 
   const handleDuplicate = useCallback(() => {
-    if (!isMovableNode(node)) return
-    sfxEmitter.emit('sfx:item-pick')
-    const cloned = structuredClone(node) as MovableNode & { id?: AnyNodeId }
-    delete (cloned as { id?: AnyNodeId }).id
-    const prevMeta =
-      cloned.metadata && typeof cloned.metadata === 'object' && !Array.isArray(cloned.metadata)
-        ? (cloned.metadata as Record<string, unknown>)
-        : {}
-    cloned.metadata = { ...prevMeta, isNew: true }
-    setMovingNode(cloned as MovableNode)
-    clearSelection()
-  }, [node, setMovingNode, clearSelection])
+    if (isMovableNode(node)) duplicateNodeAndPickUp(node)
+  }, [node])
 
   const handleDelete = useCallback(() => {
     if (!node) return
+    const origin = captureElementActionOrigin([node.id])
     sfxEmitter.emit('sfx:item-delete')
     deleteNode(node.id)
     clearSelection()
+    completeElementAction(origin)
   }, [node, deleteNode, clearSelection])
 
   if (!(node || isReference)) return null
@@ -222,6 +219,7 @@ export function PanelManager({
   multiSelectionFooter?: React.ReactNode
 }) {
   const isMobile = useIsMobile()
+  const room = useSelectedRoom()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const selectedZoneId = useViewer((s) => s.selection.zoneId)
   const setSelection = useViewer((s) => s.setSelection)
@@ -248,6 +246,16 @@ export function PanelManager({
       : '',
   )
 
+  // A room reached as a zone (a unit's member, a zone kept by a route that is not
+  // room-first) still gets the room panel.
+  const panelZoneId =
+    selectedIds.length === 0
+      ? selectedZoneId
+      : selectedNodeType === 'zone'
+        ? (selectedIds[0] ?? null)
+        : null
+  const zoneRoom = useZoneRoom(panelZoneId)
+
   // Node and reference selection are mutually exclusive: selecting a guide
   // clears the node selection (handleGuideSelect), but node selection never
   // cleared a lingering reference — so clicking a wall with a floorplan
@@ -255,74 +263,101 @@ export function PanelManager({
   // moment a scene selection appears.
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
   useEffect(() => {
-    if (selectedIds.length > 0 || selectedZoneId) {
+    if (selectedIds.length > 0 || selectedZoneId || room) {
       setSelectedReferenceId(null)
     }
-  }, [selectedIds, selectedZoneId, setSelectedReferenceId])
+  }, [selectedIds, selectedZoneId, room, setSelectedReferenceId])
 
-  // The inspector's expanded state is shared across panel swaps, but a fresh
-  // selection after everything was deselected should open collapsed again.
-  const hasAnySelection = selectedIds.length > 0 || Boolean(selectedZoneId) || Boolean(selectedReferenceId)
-  useEffect(() => {
-    if (!hasAnySelection) {
-      resetDesktopInspectorCollapsed()
-    }
-  }, [hasAnySelection])
+  // What the card shows, for its Collections section: a room is its zone.
+  const inspectedKey =
+    room && selectedIds.length === 0
+      ? room.zoneId
+      : panelZoneId && zoneRoom
+        ? panelZoneId
+        : selectedReferenceId
+          ? ''
+          : selectedIds.length === 0
+            ? (selectedZoneId ?? '')
+            : selectedIds.join(',')
+  const inspectedIds = useMemo(
+    () => (inspectedKey ? (inspectedKey.split(',') as AnyNodeId[]) : []),
+    [inspectedKey],
+  )
 
   if (!shouldShowEditingControls(readOnly)) return null
 
-  if (isMobile) {
-    if (selectedReferenceId) {
-      return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
+  return (
+    <InspectedNodesContext.Provider value={inspectedIds}>
+      {renderPanel()}
+    </InspectedNodesContext.Provider>
+  )
+
+  function renderPanel() {
+    if (room && selectedIds.length === 0) return <RoomPanel room={room} />
+    if (selectedNodeType === 'floor-opening' && selectedIds[0])
+      return <FloorOpeningPanel key={selectedIds[0]} openingId={selectedIds[0]} />
+    if (zoneRoom && panelZoneId) {
+      const closeZone = () => setSelection({ selectedIds: [], zoneId: null })
+      return zoneRoom.record ? (
+        <RoomPanel onClose={closeZone} room={zoneRoom.record} />
+      ) : (
+        <OpenRoomPanel key={panelZoneId} onClose={closeZone} zoneId={panelZoneId} />
+      )
     }
-    if (selectedIds.length > 1) {
+
+    if (isMobile) {
+      if (selectedReferenceId) {
+        return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
+      }
+      if (selectedIds.length > 1) {
+        return (
+          <MobileMultiPanelLayer
+            breakdown={multiBreakdown}
+            panel={
+              homogeneousType ? (
+                <MultiParametricInspector footer={multiSelectionFooter} />
+              ) : (
+                <MultiSelectionPanel footer={multiSelectionFooter} />
+              )
+            }
+            type={homogeneousType}
+          />
+        )
+      }
       return (
-        <MobileMultiPanelLayer
-          breakdown={multiBreakdown}
-          panel={
-            homogeneousType ? (
-              <MultiParametricInspector footer={multiSelectionFooter} />
-            ) : (
-              <MultiSelectionPanel footer={multiSelectionFooter} />
-            )
-          }
-          type={homogeneousType}
+        <MobilePanelLayer
+          isReference={false}
+          node={selectedNode}
+          panel={panelForType(selectedNodeType)}
         />
       )
     }
-    return (
-      <MobilePanelLayer
-        isReference={false}
-        node={selectedNode}
-        panel={panelForType(selectedNodeType)}
-      />
-    )
-  }
 
-  // Show reference panel if a reference is selected
-  if (selectedReferenceId) {
-    return <ReferencePanel />
-  }
+    // Show reference panel if a reference is selected
+    if (selectedReferenceId) {
+      return <ReferencePanel />
+    }
 
-  if (selectedZoneId && selectedIds.length === 0) {
-    return (
-      <ParametricInspector
-        footer={inspectorFooter}
-        key={selectedZoneId}
-        nodeId={selectedZoneId as AnyNodeId}
-        onClose={() => setSelection({ zoneId: null })}
-      />
-    )
-  }
+    if (selectedZoneId && selectedIds.length === 0) {
+      return (
+        <ParametricInspector
+          footer={inspectorFooter}
+          key={selectedZoneId}
+          nodeId={selectedZoneId as AnyNodeId}
+          onClose={() => setSelection({ zoneId: null })}
+        />
+      )
+    }
 
-  // Multi-selection: parametric inspector when every resolved id shares a type,
-  // otherwise the actions-only panel. Mobile uses the same panels in a sheet.
-  if (selectedIds.length > 1) {
-    if (homogeneousType) {
-      return <MultiParametricInspector footer={multiSelectionFooter} />
+    // Multi-selection: parametric inspector when every resolved id shares a type,
+    // otherwise the actions-only panel. Mobile uses the same panels in a sheet.
+    if (selectedIds.length > 1) {
+      if (homogeneousType) {
+        return <MultiParametricInspector footer={multiSelectionFooter} />
+      }
+      return <MultiSelectionPanel footer={multiSelectionFooter} />
     }
-    return <MultiSelectionPanel footer={multiSelectionFooter} />
-  }
 
-  return panelForType(selectedNodeType, inspectorFooter)
+    return panelForType(selectedNodeType, inspectorFooter)
+  }
 }