@pascal-app/editor 0.9.2 → 1.0.0-beta.1

package/src/components/ui/controls/material-picker.tsx

@@ -2,44 +2,82 @@
 
 import {
   getCatalogMaterialById,
+  getDynamicLibraryMaterials,
   getLibraryMaterialIdFromRef,
+  getLibraryMaterialsVersion,
   getMaterialsForCategory,
   MATERIAL_CATEGORIES,
+  type MaterialCatalogItem,
+  type MaterialSource,
   type MaterialTarget,
+  subscribeLibraryMaterials,
   toLibraryMaterialRef,
 } from '@pascal-app/core'
-import { useEffect, useState } from 'react'
+import { Plus } from 'lucide-react'
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { triggerSFX } from '../../../lib/sfx-bus'
 
-type MaterialPickerProps = {
+export type MaterialSourceFilter = 'all' | MaterialSource
+
+export type MaterialPickerProps = {
   selectedMaterialPreset?: string
   onSelectMaterialPreset?: (materialPreset: string) => void
   disabled?: boolean
   nodeType?: MaterialTarget
   hideSideControl?: boolean
+  onCreateMaterialRequest?: () => void
 }
 
+const SOURCE_FILTERS: { id: MaterialSourceFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'pascal', label: 'Pascal' },
+  { id: 'mine', label: 'Mine' },
+  { id: 'workspace', label: 'Workspace' },
+  { id: 'community', label: 'Community' },
+]
+
 function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
   return category.charAt(0).toUpperCase() + category.slice(1)
 }
 
+function filterBySource(items: MaterialCatalogItem[], filter: MaterialSourceFilter) {
+  if (filter === 'all') return items
+  return items.filter((item) => (item.source ?? 'pascal') === filter)
+}
+
 /**
- * Catalog material picker: a fixed row of category tabs over a scrollable grid
- * of swatches. Custom-material creation lives in the scene-material section
- * (the host's `+` action), not here, so it's available from any category.
+ * Catalog material picker: a fixed row of category tabs and a source filter row
+ * over a scrollable grid of swatches. Scene-material creation lives in the
+ * scene-material section (the host's `+` action); `onCreateMaterialRequest` is
+ * the host's entry point for authoring a new *library* material.
  */
 export function MaterialPicker({
   selectedMaterialPreset,
   onSelectMaterialPreset,
   disabled = false,
+  onCreateMaterialRequest,
 }: MaterialPickerProps) {
   const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
     MATERIAL_CATEGORIES[0],
   )
+  const [sourceFilter, setSourceFilter] = useState<MaterialSourceFilter>('all')
+  // Version counter so host registrations/unregistrations re-render the picker.
+  const libraryVersion = useSyncExternalStore(
+    subscribeLibraryMaterials,
+    getLibraryMaterialsVersion,
+    getLibraryMaterialsVersion,
+  )
+  const hasWorkspaceMaterials = useMemo(
+    () => getDynamicLibraryMaterials().some((item) => item.source === 'workspace'),
+    [libraryVersion],
+  )
+  const visibleSourceFilters = SOURCE_FILTERS.filter(
+    (filter) => filter.id !== 'workspace' || hasWorkspaceMaterials,
+  )
   const availableCategories = MATERIAL_CATEGORIES.filter(
     (category) => getMaterialsForCategory(category).length > 0,
   )
-  const catalogItems = getMaterialsForCategory(selectedCategory)
+  const catalogItems = filterBySource(getMaterialsForCategory(selectedCategory), sourceFilter)
 
   // Keep the visible category in sync with the externally-selected catalog
   // material (a `scene:` ref matches no catalog entry, so the tab stays put).
@@ -72,7 +110,7 @@ export function MaterialPicker({
               setSelectedCategory(category)
               // Auto-select the first material in the category so the brush is
               // immediately ready (and the swatch shows as selected).
-              const first = getMaterialsForCategory(category)[0]
+              const first = filterBySource(getMaterialsForCategory(category), sourceFilter)[0]
               if (first) handleCatalogSelect(first.id)
             }}
             type="button"
@@ -81,11 +119,52 @@ export function MaterialPicker({
           </button>
         ))}
       </div>
+      {/* Fixed source filter tabs — underline style, matching the catalog
+          browse surfaces (Items / Rooms / Build / Search) rather than the
+          pill-button category row above. */}
+      <div className="flex shrink-0 items-center gap-4 px-1">
+        {visibleSourceFilters.map((filter) => (
+          <button
+            className={`-mb-px border-b-2 px-0.5 py-1.5 font-medium text-xs transition-colors ${
+              sourceFilter === filter.id
+                ? 'border-foreground text-foreground'
+                : 'border-transparent text-muted-foreground hover:text-foreground'
+            }`}
+            key={filter.id}
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              setSourceFilter(filter.id)
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+            type="button"
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
       {/* The only scrolling region. */}
       <div
         className="subtle-scrollbar grid min-h-0 flex-1 auto-rows-min gap-2 overflow-y-auto pb-1"
         style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
       >
+        {onCreateMaterialRequest ? (
+          <button
+            className="group relative flex flex-col gap-1.5 rounded-xl p-1.5 transition-colors hover:cursor-pointer hover:bg-sidebar-accent"
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              onCreateMaterialRequest()
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+            type="button"
+          >
+            <div className="flex aspect-square w-full items-center justify-center rounded-lg border border-border/45 border-dashed">
+              <Plus className="size-5 text-muted-foreground group-hover:text-foreground" />
+            </div>
+            <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
+              New material
+            </span>
+          </button>
+        ) : null}
         {catalogItems.map((item) => {
           const isSelected = selectedMaterialPreset === toLibraryMaterialRef(item.id)
           return (

package/src/components/ui/controls/terrain-sculpt-panel.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  RAISE_METRES_PER_STROKE,
+  type SiteNode,
+  type TerrainVerb,
+  useScene,
+} from '@pascal-app/core'
+import { Mountain, Pipette } from 'lucide-react'
+import { brushRadiusRange, flattenSite, resetSiteTerrain } from '../../../lib/terrain-sculpt'
+import useEditor from '../../../store/use-editor'
+import { Button } from '../primitives/button'
+import { SegmentedControl } from './segmented-control'
+import { SliderControl } from './slider-control'
+
+const VERB_OPTIONS: Array<{ value: TerrainVerb; iconSrc: string; hint: string }> = [
+  { value: 'raise', iconSrc: '/icons/terrain-raise.webp', hint: 'Raise' },
+  { value: 'lower', iconSrc: '/icons/terrain-lower.webp', hint: 'Lower' },
+  { value: 'flatten', iconSrc: '/icons/terrain-flatten.webp', hint: 'Flatten' },
+  { value: 'smooth', iconSrc: '/icons/terrain-smooth.webp', hint: 'Smooth' },
+]
+
+const VERB_HINTS: Record<TerrainVerb, string> = {
+  raise: `Drag to raise the ground. One pass moves it up to ${RAISE_METRES_PER_STROKE} m — release and drag again to go further.`,
+  lower: `Drag to lower the ground. One pass moves it down to ${RAISE_METRES_PER_STROKE} m.`,
+  flatten: 'Drag to level the ground toward the target height. It never overshoots.',
+  smooth: 'Drag to soften slopes and remove ridges. Flat ground stays flat.',
+}
+
+/**
+ * Sculpt controls for terrain mode — verb, brush, and the two lot-wide actions.
+ *
+ * A panel rather than a floating HUD because the brush settings are the sort of
+ * thing a user adjusts between strokes and then leaves alone, and because
+ * sculpting already owns the whole viewport pointer: putting controls over the
+ * canvas would put them over the surface being sculpted.
+ *
+ * Embedders mount this wherever their sculpt controls belong (the community
+ * editor puts it in the Build sidebar while sculpt mode is active), exactly like
+ * `MaterialPaintPanel`.
+ */
+export function TerrainSculptPanel() {
+  const verb = useEditor((state) => state.terrainVerb)
+  const setTerrainVerb = useEditor((state) => state.setTerrainVerb)
+  const brush = useEditor((state) => state.terrainBrush)
+  const setTerrainBrush = useEditor((state) => state.setTerrainBrush)
+  const flattenTarget = useEditor((state) => state.terrainFlattenTarget)
+  const setTerrainFlattenTarget = useEditor((state) => state.setTerrainFlattenTarget)
+  const sampling = useEditor((state) => state.terrainSampling)
+  const setTerrainSampling = useEditor((state) => state.setTerrainSampling)
+
+  const nodes = useScene((state) => state.nodes)
+  const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const siteId = rootNodeIds[0]
+  const siteNode = siteId ? nodes[siteId as AnyNodeId] : undefined
+  const site = siteNode?.type === 'site' ? (siteNode as SiteNode) : null
+  const [minRadius, maxRadius] = brushRadiusRange(site)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1.5">
+        <SegmentedControl
+          className="h-14"
+          onChange={(next) => setTerrainVerb(next)}
+          options={VERB_OPTIONS.map(({ value, iconSrc, hint }) => ({
+            value,
+            label: (
+              <span className="flex flex-col items-center gap-0.5">
+                <img
+                  alt=""
+                  aria-hidden
+                  className="size-7 object-contain"
+                  draggable={false}
+                  height={28}
+                  src={iconSrc}
+                  width={28}
+                />
+                <span className="text-[9px] leading-none">{hint}</span>
+              </span>
+            ),
+          }))}
+          value={verb}
+        />
+        <p className="px-0.5 text-muted-foreground text-xs">{VERB_HINTS[verb]}</p>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        {/*
+          Range from `brushRadiusRange`, shared with the `[`/`]` keys. The low end
+          is not a preference: it tracks the field's sample spacing, and a brush
+          under it lands between samples and paints nothing at all.
+        */}
+        <SliderControl
+          label="Size"
+          max={maxRadius}
+          min={minRadius}
+          onChange={(radius) => setTerrainBrush({ radius })}
+          precision={1}
+          step={0.5}
+          unit="m"
+          value={brush.radius}
+        />
+        <SliderControl
+          label="Strength"
+          max={1}
+          min={0.05}
+          onChange={(strength) => setTerrainBrush({ strength })}
+          precision={2}
+          step={0.05}
+          value={brush.strength}
+        />
+        <SliderControl
+          label="Softness"
+          max={1}
+          min={0}
+          onChange={(falloff) => setTerrainBrush({ falloff })}
+          precision={2}
+          step={0.05}
+          value={brush.falloff}
+        />
+        <SegmentedControl
+          onChange={(shape) => setTerrainBrush({ shape })}
+          options={[
+            { value: 'round', label: 'Round' },
+            { value: 'square', label: 'Square' },
+          ]}
+          value={brush.shape}
+        />
+      </div>
+
+      {verb === 'flatten' && (
+        <div className="flex flex-col gap-1.5 border-border/60 border-t pt-3">
+          <div className="flex items-center gap-2">
+            <div className="min-w-0 flex-1">
+              <SliderControl
+                label="Target"
+                max={50}
+                min={-50}
+                onChange={setTerrainFlattenTarget}
+                precision={2}
+                step={0.1}
+                unit="m"
+                value={flattenTarget ?? 0}
+              />
+            </div>
+            <Button
+              aria-label="Pick target height from the ground"
+              aria-pressed={sampling}
+              onClick={() => setTerrainSampling(!sampling)}
+              size="icon-sm"
+              type="button"
+              variant={sampling ? 'default' : 'outline'}
+            >
+              <Pipette />
+            </Button>
+          </div>
+          <p className="px-0.5 text-muted-foreground text-xs">
+            {sampling
+              ? 'Click the ground to pick its height as the target.'
+              : flattenTarget === null
+                ? 'No target yet — the first click samples the ground under it.'
+                : 'Every flatten stroke levels toward this height.'}
+          </p>
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 border-border/60 border-t pt-3">
+        <Button
+          className="flex-1"
+          disabled={!site}
+          onClick={() => site && flattenSite(site, flattenTarget ?? 0)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <Mountain />
+          Level lot
+        </Button>
+        <Button
+          className="flex-1"
+          disabled={!site?.terrain}
+          onClick={() => site && resetSiteTerrain(site)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          Clear terrain
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/floating-level-selector.tsx

@@ -22,6 +22,8 @@ import {
   type AnyNode,
   type AnyNodeId,
   type BuildingNode,
+  DEFAULT_LEVEL_HEIGHT,
+  getStoredLevelHeight,
   LevelNode,
   useScene,
 } from '@pascal-app/core'
@@ -34,22 +36,19 @@ import {
   useEffect,
   useRef,
   useState,
-  useSyncExternalStore,
 } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { pasteSelectionAndPickUp } from '../editor/group-actions'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '../../lib/level-duplication'
 import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
-import {
-  getEditorClipboardSnapshot,
-  pasteEditorClipboardToLevel,
-  subscribeEditorClipboard,
-} from '../../lib/scene-clipboard'
-import { sfxEmitter } from '../../lib/sfx-bus'
+import { useLinearDisplay } from '../../lib/use-linear-display'
 import { cn } from '../../lib/utils'
+import { ActionButton } from './controls/action-button'
+import { SliderControl } from './controls/slider-control'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
 import {
   Dialog,
@@ -145,6 +144,26 @@ function LevelRow({
 }) {
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
+  const updateNode = useScene((s) => s.updateNode)
+  const { isImperial, toDisplay, displayUnit } = useLinearDisplay('m', 2)
+
+  const storeyHeight = getStoredLevelHeight(level)
+  // toFixed(2) + strip one trailing zero: "2.50" → "2.5", "2.75" stays.
+  const storeyHeightLabel = `${toDisplay(storeyHeight).toFixed(2).replace(/0$/, '')} ${displayUnit}`
+
+  // Clean preset values per display system; imperial stores exact meters
+  // for whole-foot storey heights.
+  const heightPresets = isImperial
+    ? [
+        { label: '8 ft', height: 2.4384 },
+        { label: '9 ft', height: 2.7432 },
+        { label: '10 ft', height: 3.048 },
+      ]
+    : [
+        { label: '2.5 m', height: 2.5 },
+        { label: '3.0 m', height: 3.0 },
+        { label: '3.5 m', height: 3.5 },
+      ]
 
   return (
     <div className="group/level">
@@ -195,6 +214,48 @@ function LevelRow({
             <span className="truncate">{getLevelDisplayName(level)}</span>
           </button>
 
+          {/* Storey height badge — opens the height popover */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                className="mr-0.5 shrink-0 whitespace-nowrap rounded px-1 py-0.5 font-mono text-[10px] text-muted-foreground/50 tabular-nums transition-colors hover:bg-white/5 hover:text-foreground"
+                onClick={(e) => e.stopPropagation()}
+                title="Level height"
+                type="button"
+              >
+                {storeyHeightLabel}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              className="w-56 p-2"
+              onClick={(e) => e.stopPropagation()}
+              side="right"
+              sideOffset={8}
+            >
+              <SliderControl
+                label="Level height"
+                max={6}
+                min={1}
+                onChange={(v) => updateNode(level.id, { height: v })}
+                precision={3}
+                step={0.1}
+                unit="m"
+                value={Math.round(storeyHeight * 1000) / 1000}
+              />
+              <div className="mt-1.5 grid grid-cols-3 gap-1.5">
+                {heightPresets.map((preset) => (
+                  <ActionButton
+                    className="h-7 px-2"
+                    key={preset.label}
+                    label={preset.label}
+                    onClick={() => updateNode(level.id, { height: preset.height })}
+                  />
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+
           {/* Vertical three-dot menu — inside the pill */}
           <Popover>
             <PopoverTrigger asChild>
@@ -332,11 +393,6 @@ export function FloatingLevelSelector() {
 
   const [deletingLevel, setDeletingLevel] = useState<LevelNode | null>(null)
   const [draggingLevelId, setDraggingLevelId] = useState<string | null>(null)
-  const clipboardSnapshot = useSyncExternalStore(
-    subscribeEditorClipboard,
-    getEditorClipboardSnapshot,
-    getEditorClipboardSnapshot,
-  )
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 4 },
@@ -371,6 +427,7 @@ export function FloatingLevelSelector() {
     const maxLevel = levels.length > 0 ? Math.max(...levels.map((l) => l.level)) : -1
     const newLevel = LevelNode.parse({
       level: maxLevel + 1,
+      height: DEFAULT_LEVEL_HEIGHT,
       children: [],
       parentId: resolvedBuildingId,
     })
@@ -383,6 +440,7 @@ export function FloatingLevelSelector() {
     const minLevel = levels.length > 0 ? Math.min(...levels.map((l) => l.level)) : 1
     const newLevel = LevelNode.parse({
       level: minLevel - 1,
+      height: DEFAULT_LEVEL_HEIGHT,
       children: [],
       parentId: resolvedBuildingId,
     })
@@ -409,6 +467,7 @@ export function FloatingLevelSelector() {
 
       const newLevel = LevelNode.parse({
         level: newLevelNumber,
+        height: DEFAULT_LEVEL_HEIGHT,
         children: [],
         parentId: resolvedBuildingId,
       })
@@ -452,10 +511,7 @@ export function FloatingLevelSelector() {
   )
 
   const handlePasteToLevel = useCallback((level: LevelNode) => {
-    const result = pasteEditorClipboardToLevel(level.id)
-    if (result?.pastedIds.length) {
-      sfxEmitter.emit('sfx:item-place')
-    }
+    void pasteSelectionAndPickUp(level.id)
   }, [])
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
@@ -557,9 +613,7 @@ export function FloatingLevelSelector() {
                         isSelected={isSelected}
                         level={level}
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
-                        onPaste={
-                          clipboardSnapshot ? () => handlePasteToLevel(level) : undefined
-                        }
+                        onPaste={() => handlePasteToLevel(level)}
                         onRequestDelete={() => setDeletingLevel(level)}
                         onSelect={() =>
                           setSelection(

package/src/components/ui/helpers/helper-manager.tsx

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   nodeRegistry,
+  type TerrainVerb,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
@@ -53,6 +54,35 @@ function reshapingHints(reshape: ReshapeKind): ContextualShortcutHint[] {
   ]
 }
 
+// Sculpt mode's HUD. The verb is named rather than described because it is the one
+// piece of state a user loses track of between strokes. This stays even though the
+// brush ring now carries the verb in colour (`brushRingColor`): the ring says
+// *which* verb only to someone who already knows the mapping, and the HUD is what
+// teaches it.
+function terrainSculptHints(verb: TerrainVerb, sampling: boolean): ContextualShortcutHint[] {
+  if (sampling) {
+    return [
+      { keys: ['Click'], label: 'Pick target height' },
+      { keys: ['Esc'], label: 'Cancel picking' },
+    ]
+  }
+  const action =
+    verb === 'raise'
+      ? 'Raise ground'
+      : verb === 'lower'
+        ? 'Lower ground'
+        : verb === 'flatten'
+          ? 'Level ground'
+          : 'Smooth ground'
+  return [
+    { keys: ['Drag'], label: action },
+    // Nested, so the two render as alternatives ("[ / ]") rather than a chord —
+    // a flat `['[', ']']` joins with "+" and would read as "press both".
+    { keys: [['[', ']']], label: 'Brush size' },
+    { keys: ['Esc'], label: 'Cancel stroke' },
+  ]
+}
+
 type ActiveModifierKeys = {
   command: boolean
   shift: boolean
@@ -95,6 +125,9 @@ function useActiveModifierKeys(): ActiveModifierKeys {
 export function HelperManager() {
   const mode = useEditor((s) => s.mode)
   const tool = useEditor((s) => s.tool)
+  const terrainVerb = useEditor((s) => s.terrainVerb)
+  const terrainSampling = useEditor((s) => s.terrainSampling)
+  const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
   const measurementToolKind = useEditor((s) => s.toolDefaults.measurement?.kind)
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const scope = useInteractionScope((s) => s.scope)
@@ -148,6 +181,10 @@ export function HelperManager() {
   // Helpers are keyboard-driven hints (Esc, R, etc.) — irrelevant on touch.
   if (isMobile) return null
 
+  // First-person walkthrough has its own HUD; editor shortcut hints (e.g. the
+  // Ctrl multi-select hint — Ctrl is crouch there) don't apply while walking.
+  if (isFirstPersonMode) return null
+
   // The studio workspace (compose panel / gallery) has no scene selection or
   // tools — editor shortcut hints would only mislead there.
   if (workspaceMode === 'studio') return null
@@ -209,6 +246,15 @@ export function HelperManager() {
     return <ContextualHelperPanel hints={[]} showPaintScope />
   }
 
+  // Sculpt mode. The HUD is what makes a sustained brush mode legible: it names
+  // the active verb (the same word the panel's segmented control shows, so the
+  // two never disagree), and it advertises the two keys whose behaviour is
+  // mode-specific — bracket resize, and an Esc that abandons the stroke rather
+  // than exiting the mode.
+  if (mode === 'terrain-sculpt') {
+    return <ContextualHelperPanel hints={terrainSculptHints(terrainVerb, terrainSampling)} />
+  }
+
   // Idle select only — an active scope (handle-drag, box-select, …) must not show
   // the idle selection hints.
   if (mode === 'select' && scope.kind === 'idle') {

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

@@ -0,0 +1,57 @@
+'use client'
+
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Copy, Trash2 } from 'lucide-react'
+import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import { ActionButton, ActionGroup } from '../controls/action-button'
+import { PanelWrapper } from './panel-wrapper'
+import { formatSelectionBreakdown } from './selection-breakdown'
+
+/**
+ * Docked right-side panel for a MULTI-selection — the compact sibling of the
+ * single-node inspector, rendered by `PanelManager` when more than one node
+ * is selected. Same collapsed-by-default `PanelWrapper` shell (header always
+ * visible; the shared desktop collapse state carries across single ↔ multi
+ * swaps). Actions mirror the floating group pill: Duplicate clones the
+ * selection and picks the clones up, Delete removes the whole selection
+ * (including its bulk-delete confirm). Unlike the pill, the docked panel
+ * stays visible during interactions. `footer` is the host-injected slot
+ * (e.g. community's "Save to my catalog").
+ */
+export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  // String selector — recomputed on scene ticks, but the === compare keeps
+  // unrelated mutations from re-rendering the panel.
+  const breakdown = useScene((s) =>
+    formatSelectionBreakdown(selectedIds.map((id) => s.nodes[id as AnyNodeId]?.type)),
+  )
+
+  return (
+    <PanelWrapper
+      footer={footer}
+      icon="/icons/select.webp"
+      onClose={() => setSelection({ selectedIds: [] })}
+      title={`${selectedIds.length} selected`}
+      width={320}
+    >
+      {breakdown && <div className="px-3 py-3 text-muted-foreground text-xs">{breakdown}</div>}
+      <div className="border-border/50 border-t p-3">
+        <ActionGroup>
+          <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>
+      </div>
+    </PanelWrapper>
+  )
+}

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

@@ -28,6 +28,7 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
+import { MultiSelectionPanel } from './multi-selection-panel'
 import { getNodeDisplay } from './node-display'
 import { resetDesktopInspectorCollapsed } from './panel-wrapper'
 import { ParametricInspector } from './parametric-inspector'
@@ -168,7 +169,13 @@ function MobilePanelLayer({
   )
 }
 
-export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.ReactNode }) {
+export function PanelManager({
+  inspectorFooter,
+  multiSelectionFooter,
+}: {
+  inspectorFooter?: React.ReactNode
+  multiSelectionFooter?: React.ReactNode
+}) {
   const isMobile = useIsMobile()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const selectedZoneId = useViewer((s) => s.selection.zoneId)
@@ -237,5 +244,11 @@ export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.Reac
     )
   }
 
+  // Multi-selection: compact docked panel (desktop only — the mobile branch
+  // above keeps today's behavior and renders nothing for multi-selections).
+  if (selectedIds.length > 1) {
+    return <MultiSelectionPanel footer={multiSelectionFooter} />
+  }
+
   return panelForType(selectedNodeType, inspectorFooter)
 }