@pascal-app/editor 1.0.0-beta.5 → 1.0.0

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

@@ -0,0 +1,185 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type CeilingNode,
+  type ParametricDescriptor,
+  GROUND_SUPPORT_ID,
+  getCeilingClampBound,
+  getWallEffectiveHeightForNodes,
+  resolveCeilingHeight,
+  terrainSupportLift,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { formatLinearMeasurement } from '../../../lib/measurements'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import {
+  commitMultiNodeFields,
+  firstNumericFieldValue,
+  previewMultiNodeFields,
+  reduceFieldValue,
+  reduceHeightBoundMode,
+} from './multi-field-value'
+import { precisionForStep } from './parametric-field-utils'
+
+function wallFollowsLevelPatch(wall: WallNode, nodes: Record<string, AnyNode>): Partial<WallNode> {
+  const terrainSupported =
+    wall.parentId != null &&
+    terrainSupportLift(nodes, wall.parentId, wall.start[0], wall.start[1]) != null
+  return {
+    height: undefined,
+    supportOffset: undefined,
+    ...(wall.supportSlabId === GROUND_SUPPORT_ID && !terrainSupported
+      ? { supportSlabId: undefined }
+      : {}),
+  }
+}
+
+function effectiveHeight(node: AnyNode, nodes: Record<string, AnyNode>): number {
+  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes)
+  if (node.type === 'ceiling') return resolveCeilingHeight(node, nodes)
+  const height = (node as { height?: number }).height
+  return typeof height === 'number' ? height : 0
+}
+
+function ceilingCustomHeight(node: CeilingNode, nodes: Record<string, AnyNode>): number {
+  const resolved = resolveCeilingHeight(node, nodes)
+  const parent = node.parentId ? nodes[node.parentId] : undefined
+  const max =
+    parent?.type === 'level'
+      ? getCeilingClampBound(parent.id, nodes as Record<AnyNodeId, AnyNode>, node.polygon ?? [])
+      : Number.POSITIVE_INFINITY
+  return Math.min(resolved, max)
+}
+
+export function MultiHeightModeField({
+  nodeIds,
+  nodeType,
+  parametrics,
+  min = 1.5,
+  max = 20,
+  step = 0.05,
+}: {
+  nodeIds: AnyNodeId[]
+  nodeType: 'wall' | 'ceiling'
+  parametrics: ParametricDescriptor<AnyNode>
+  min?: number
+  max?: number
+  step?: number
+}) {
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const mode = useScene(useShallow((s) => reduceHeightBoundMode(nodeIds, s.nodes)))
+  const storedHeight = useScene(useShallow((s) => reduceFieldValue(nodeIds, 'height', s.nodes)))
+  const heightOrigin = useScene((s) => firstNumericFieldValue(nodeIds, 'height', s.nodes, min))
+  const liveHeight = useScene((s) => {
+    let seen = false
+    let shared: number | undefined
+    for (const id of nodeIds) {
+      const node = s.nodes[id]
+      if (!node) continue
+      const height = effectiveHeight(node, s.nodes as Record<string, AnyNode>)
+      if (!seen) {
+        seen = true
+        shared = height
+        continue
+      }
+      if (!Object.is(shared, height)) return Number.NaN
+    }
+    return seen && shared !== undefined ? shared : Number.NaN
+  })
+
+  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,
+      )
+    },
+    [nodeIds, parametrics],
+  )
+
+  const previewHeight = useCallback(
+    (height: number) => {
+      previewMultiNodeFields(nodeIds.map((id) => [id, { height }] as const))
+    },
+    [nodeIds],
+  )
+  const commitHeight = useCallback(
+    (height: number) => {
+      commitMultiNodeFields(nodeIds, () => ({ height }), parametrics)
+    },
+    [nodeIds, parametrics],
+  )
+
+  const mixedMode = mode.kind === 'mixed'
+  const isFollows = mode.kind === 'same' && mode.value === 'storey'
+  const isCustom = mode.kind === 'same' && mode.value === 'custom'
+  const sliderValue =
+    storedHeight.kind === 'same' && typeof storedHeight.value === 'number'
+      ? storedHeight.value
+      : heightOrigin
+  const sliderMixed = storedHeight.kind === 'mixed' || mixedMode
+  const currentLabel = Number.isFinite(liveHeight)
+    ? formatLinearMeasurement(liveHeight, unit, metricNotation)
+    : 'Mixed'
+
+  return (
+    <>
+      {nodeType === 'wall' && (
+        <div className="px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+          Top
+        </div>
+      )}
+      <SegmentedControl
+        mixed={mixedMode}
+        onChange={applyMode}
+        options={[
+          { label: 'Follows level', value: 'storey' },
+          { label: 'Custom height', value: 'custom' },
+        ]}
+        value={mode.kind === 'same' ? mode.value : 'storey'}
+      />
+      {isFollows ? (
+        <div className="px-1 text-[11px] text-muted-foreground">Currently {currentLabel}</div>
+      ) : isCustom ? (
+        <SliderControl
+          label="Height"
+          max={max}
+          min={min}
+          mixed={sliderMixed}
+          onChange={previewHeight}
+          onCommit={commitHeight}
+          precision={precisionForStep(step)}
+          restoreOnCommit={false}
+          step={step}
+          unit="m"
+          value={sliderValue}
+        />
+      ) : null}
+    </>
+  )
+}

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

@@ -0,0 +1,263 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  nodeRegistry,
+  type ParamField,
+  type ParametricDescriptor,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { selectionMatchesSessionGroup } from '../../../lib/session-groups'
+import useSessionGroups from '../../../store/use-session-groups'
+import { PanelSection } from '../controls/panel-section'
+import { SliderControl } from '../controls/slider-control'
+import { resolveUniqueSelectionIds } from './homogeneous-selection'
+import {
+  commitMultiNodeFields,
+  fieldVisibleForAll,
+  firstNumericFieldValue,
+  firstVec3FieldValue,
+  previewMultiNodeFields,
+  reduceFieldValue,
+} from './multi-field-value'
+import { MultiHeightModeField } from './multi-height-mode'
+import { MultiSelectionActions } from './multi-selection-panel'
+import { getTypeDisplay } from './node-display'
+import { ParametricFieldControl } from './parametric-field-control'
+import { PanelWrapper } from './panel-wrapper'
+import { formatSelectionBreakdown } from './selection-breakdown'
+
+export function MultiParametricInspector({ footer }: { footer?: React.ReactNode }) {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodeIds = useScene(
+    useShallow((s) => resolveUniqueSelectionIds(selectedIds, s.nodes)),
+  )
+  const nodeType = useScene((s) => {
+    const first = nodeIds[0] ? s.nodes[nodeIds[0]] : undefined
+    return first?.type ?? null
+  })
+  const breakdown = useScene((s) =>
+    formatSelectionBreakdown(nodeIds.map((id) => s.nodes[id]?.type)),
+  )
+  const sessionGroups = useSessionGroups((s) => s.groups)
+  const matchedGroup = useMemo(
+    () => selectionMatchesSessionGroup(sessionGroups, selectedIds),
+    [sessionGroups, selectedIds],
+  )
+
+  const def = nodeType ? nodeRegistry.get(nodeType) : undefined
+  const parametrics = def?.parametrics as ParametricDescriptor<AnyNode> | undefined
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+  }, [setSelection])
+
+  if (nodeIds.length < 2 || !nodeType || !parametrics) return null
+
+  const display = getTypeDisplay(nodeType)
+  const title = matchedGroup ? `${matchedGroup.label} · ${breakdown}` : breakdown || display.label
+
+  return (
+    <PanelWrapper footer={footer} icon={display.icon} onClose={handleClose} title={title} width={320}>
+      {matchedGroup && (
+        <div className="border-border/50 border-b px-3 py-2 text-muted-foreground text-xs">
+          {matchedGroup.label} (session only). Plain click reselects all members. Not saved with the
+          project.
+        </div>
+      )}
+      {parametrics.groups.map((group, gi) => (
+        <MultiGroupFields
+          fields={group.fields as ParamField<AnyNode>[]}
+          key={`group-${gi}`}
+          nodeIds={nodeIds}
+          nodeType={nodeType}
+          parametrics={parametrics}
+          title={group.label}
+        />
+      ))}
+      <div className="border-border/50 border-t p-3">
+        <MultiSelectionActions />
+      </div>
+    </PanelWrapper>
+  )
+}
+
+function MultiGroupFields({
+  title,
+  fields,
+  nodeIds,
+  nodeType,
+  parametrics,
+}: {
+  title: string
+  fields: ParamField<AnyNode>[]
+  nodeIds: AnyNodeId[]
+  nodeType: AnyNode['type']
+  parametrics: ParametricDescriptor<AnyNode>
+}) {
+  const genericFields = fields.filter((field) => field.kind !== 'custom')
+  const anyVisible = useScene((s) =>
+    genericFields.some((field) =>
+      fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
+    ),
+  )
+  if (genericFields.length === 0 || !anyVisible) return null
+  return (
+    <PanelSection title={title}>
+      {genericFields.map((field, fi) => {
+        if (
+          String(field.key) === 'height' &&
+          (nodeType === 'wall' || nodeType === 'ceiling') &&
+          field.kind === 'number'
+        ) {
+          return (
+            <MultiHeightModeField
+              key={`field-${fi}-height-mode`}
+              max={field.max}
+              min={field.min}
+              nodeIds={nodeIds}
+              nodeType={nodeType}
+              parametrics={parametrics}
+              step={field.step}
+            />
+          )
+        }
+        return (
+          <MultiFieldRenderer
+            field={field}
+            key={`field-${fi}-${String(field.key)}`}
+            nodeIds={nodeIds}
+            parametrics={parametrics}
+          />
+        )
+      })}
+    </PanelSection>
+  )
+}
+
+function MultiFieldRenderer({
+  field,
+  nodeIds,
+  parametrics,
+}: {
+  field: ParamField<AnyNode>
+  nodeIds: AnyNodeId[]
+  parametrics: ParametricDescriptor<AnyNode>
+}) {
+  const key = String(field.key)
+  const visible = useScene((s) =>
+    fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
+  )
+  const reduced = useScene(useShallow((s) => reduceFieldValue(nodeIds, key, s.nodes)))
+  const numericOrigin = useScene((s) => firstNumericFieldValue(nodeIds, key, s.nodes))
+  const vecOrigin = useScene(useShallow((s) => firstVec3FieldValue(nodeIds, key, s.nodes)))
+
+  const preview = useCallback(
+    (patch: Partial<AnyNode>) => {
+      previewMultiNodeFields(nodeIds.map((id) => [id, patch] as const))
+    },
+    [nodeIds],
+  )
+  const commit = useCallback(
+    (patch: Partial<AnyNode>) => {
+      commitMultiNodeFields(nodeIds, () => patch, parametrics)
+    },
+    [nodeIds, parametrics],
+  )
+
+  if (!visible) return null
+
+  if (field.kind === 'vec3') {
+    return (
+      <MultiVec3Field
+        fieldKey={key}
+        mixed={reduced.kind === 'mixed'}
+        nodeIds={nodeIds}
+        origin={vecOrigin}
+        parametrics={parametrics}
+        value={reduced.kind === 'same' && Array.isArray(reduced.value) ? (reduced.value as [number, number, number]) : vecOrigin}
+      />
+    )
+  }
+
+  const value =
+    reduced.kind === 'same' ? reduced.value : field.kind === 'number' ? numericOrigin : undefined
+
+  return (
+    <ParametricFieldControl
+      field={field}
+      mixed={reduced.kind === 'mixed'}
+      onChange={field.kind === 'number' ? preview : commit}
+      onCommit={field.kind === 'number' ? commit : undefined}
+      value={value}
+    />
+  )
+}
+
+function MultiVec3Field({
+  fieldKey,
+  mixed,
+  nodeIds,
+  origin,
+  parametrics,
+  value,
+}: {
+  fieldKey: string
+  mixed: boolean
+  nodeIds: AnyNodeId[]
+  origin: [number, number, number]
+  parametrics: ParametricDescriptor<AnyNode>
+  value: [number, number, number]
+}) {
+  const axes: Array<{ label: string; index: 0 | 1 | 2 }> = [
+    { label: 'X', index: 0 },
+    { label: 'Y', index: 1 },
+    { label: 'Z', index: 2 },
+  ]
+  return (
+    <>
+      {axes.map(({ label, index }) => {
+        const axisValue = value[index] ?? origin[index] ?? 0
+        const patchAxis = (next: number): Array<readonly [AnyNodeId, Partial<AnyNode>]> => {
+          const nodes = useScene.getState().nodes
+          return nodeIds.flatMap((id) => {
+            const node = nodes[id]
+            if (!node) return []
+            const current = (node as Record<string, unknown>)[fieldKey]
+            const nextVec = (
+              Array.isArray(current) && current.length >= 3 ? [...current] : [...origin]
+            ) as [number, number, number]
+            nextVec[index] = next
+            return [[id, { [fieldKey]: nextVec } as Partial<AnyNode>] as const]
+          })
+        }
+        return (
+          <SliderControl
+            key={`${fieldKey}-${label}`}
+            label={label}
+            mixed={mixed}
+            onChange={(next) => previewMultiNodeFields(patchAxis(next))}
+            onCommit={(next) => {
+              const entries = patchAxis(next)
+              commitMultiNodeFields(
+                nodeIds,
+                (node) => entries.find(([id]) => id === node.id)?.[1] ?? {},
+                parametrics,
+              )
+            }}
+            precision={2}
+            restoreOnCommit={false}
+            step={0.05}
+            unit="m"
+            value={Math.round(axisValue * 100) / 100}
+          />
+        )
+      })}
+    </>
+  )
+}

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

@@ -18,6 +18,53 @@ import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelWrapper } from './panel-wrapper'
 import { formatSelectionBreakdown } from './selection-breakdown'
 
+export function MultiSelectionActions() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const sessionGroups = useSessionGroups((s) => s.groups)
+  const sceneNodes = useScene((s) => s.nodes)
+  const liveIds = useMemo(() => new Set(Object.keys(sceneNodes)), [sceneNodes])
+  const showGroup = useMemo(
+    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+  const showUngroup = useMemo(
+    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+
+  return (
+    <ActionGroup>
+      {showGroup && (
+        <ActionButton
+          icon={<Group className="h-4 w-4" />}
+          label="Group"
+          onClick={() => groupCurrentSelection()}
+          title="Group (Ctrl/Cmd+G)"
+        />
+      )}
+      {showUngroup && (
+        <ActionButton
+          icon={<Ungroup className="h-4 w-4" />}
+          label="Ungroup"
+          onClick={() => ungroupCurrentSelection()}
+          title="Ungroup (Ctrl/Cmd+Shift+G)"
+        />
+      )}
+      <ActionButton
+        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"
+        icon={<Trash2 className="h-4 w-4 text-red-400" />}
+        label="Delete"
+        onClick={() => deleteSelection()}
+      />
+    </ActionGroup>
+  )
+}
+
 /**
  * Docked multi-selection panel. Includes Group / Ungroup for session selection sets.
  */
@@ -34,14 +81,6 @@ export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
     () => selectionMatchesSessionGroup(sessionGroups, selectedIds, liveIds),
     [sessionGroups, selectedIds, liveIds],
   )
-  const showGroup = useMemo(
-    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
-    [sessionGroups, selectedIds, liveIds],
-  )
-  const showUngroup = useMemo(
-    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
-    [sessionGroups, selectedIds, liveIds],
-  )
 
   return (
     <PanelWrapper
@@ -63,35 +102,7 @@ export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
         </div>
       )}
       <div className="border-border/50 border-t p-3">
-        <ActionGroup>
-          {showGroup && (
-            <ActionButton
-              icon={<Group className="h-4 w-4" />}
-              label="Group"
-              onClick={() => groupCurrentSelection()}
-              title="Group (Ctrl/Cmd+G)"
-            />
-          )}
-          {showUngroup && (
-            <ActionButton
-              icon={<Ungroup className="h-4 w-4" />}
-              label="Ungroup"
-              onClick={() => ungroupCurrentSelection()}
-              title="Ungroup (Ctrl/Cmd+Shift+G)"
-            />
-          )}
-          <ActionButton
-            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"
-            icon={<Trash2 className="h-4 w-4" />}
-            label="Delete"
-            onClick={() => deleteSelection()}
-          />
-        </ActionGroup>
+        <MultiSelectionActions />
       </div>
     </PanelWrapper>
   )

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

@@ -23,6 +23,10 @@ const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
   guide: { icon: '/icons/floorplan.webp', label: 'Guide image' },
 }
 
+export function getTypeDisplay(type: string): NodeDisplay {
+  return TYPE_DEFAULTS[type] ?? { icon: '/icons/select.webp', label: type }
+}
+
 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 }

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

@@ -24,15 +24,20 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useState } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
+import { shouldShowEditingControls } from '../../../lib/interaction/overlay-policy'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from '../../editor/group-actions'
+import { resolveHomogeneousSelection } from './homogeneous-selection'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
+import { MultiParametricInspector } from './multi-parametric-inspector'
 import { MultiSelectionPanel } from './multi-selection-panel'
-import { getNodeDisplay } from './node-display'
+import { getNodeDisplay, getTypeDisplay } from './node-display'
 import { resetDesktopInspectorCollapsed } from './panel-wrapper'
 import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
+import { formatSelectionBreakdown } from './selection-breakdown'
 
 type MovableNode =
   | ItemNode
@@ -169,6 +174,46 @@ function MobilePanelLayer({
   )
 }
 
+function MobileMultiPanelLayer({
+  breakdown,
+  panel,
+  type,
+}: {
+  breakdown: string
+  panel: React.ReactNode
+  type: string | null
+}) {
+  const [isSheetOpen, setIsSheetOpen] = useState(false)
+  const display = type ? getTypeDisplay(type) : { icon: '/icons/select.webp', label: 'Selection' }
+  const title = breakdown || display.label
+
+  useEffect(() => {
+    setIsSheetOpen(false)
+  }, [breakdown])
+
+  return (
+    <>
+      <MobileSelectionBar
+        icon={display.icon}
+        label={title}
+        node={null}
+        onDelete={() => deleteSelection()}
+        onDuplicate={() => duplicateSelectionAndPickUp()}
+        onEdit={() => setIsSheetOpen((v) => !v)}
+        onMove={() => startGroupPickUp()}
+      />
+      <MobilePanelSheet
+        icon={display.icon}
+        onClose={() => setIsSheetOpen(false)}
+        open={isSheetOpen}
+        title={title}
+      >
+        {panel}
+      </MobilePanelSheet>
+    </>
+  )
+}
+
 export function PanelManager({
   inspectorFooter,
   multiSelectionFooter,
@@ -181,6 +226,7 @@ export function PanelManager({
   const selectedZoneId = useViewer((s) => s.selection.zoneId)
   const setSelection = useViewer((s) => s.setSelection)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
+  const readOnly = useScene((s) => s.readOnly)
   // Only subscribe to the *type* of the single-selected node — string primitive
   // so we don't re-render on unrelated scene mutations.
   const selectedNodeType = useScene((s) => {
@@ -193,6 +239,14 @@ export function PanelManager({
     const id = selectedIds[0]
     return id ? (s.nodes[id as AnyNodeId] ?? null) : null
   })
+  const homogeneousType = useScene((s) =>
+    selectedIds.length > 1 ? resolveHomogeneousSelection(selectedIds, s.nodes) : null,
+  )
+  const multiBreakdown = useScene((s) =>
+    selectedIds.length > 1
+      ? formatSelectionBreakdown(selectedIds.map((id) => s.nodes[id as AnyNodeId]?.type))
+      : '',
+  )
 
   // Node and reference selection are mutually exclusive: selecting a guide
   // clears the node selection (handleGuideSelect), but node selection never
@@ -215,10 +269,27 @@ export function PanelManager({
     }
   }, [hasAnySelection])
 
+  if (!shouldShowEditingControls(readOnly)) return null
+
   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 (
       <MobilePanelLayer
         isReference={false}
@@ -244,9 +315,12 @@ export function PanelManager({
     )
   }
 
-  // Multi-selection: compact docked panel (desktop only — the mobile branch
-  // above keeps today's behavior and renders nothing for multi-selections).
+  // 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} />
   }