@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/ui/command-palette/editor-commands.tsx

@@ -31,7 +31,6 @@ import {
   Redo2,
   Sparkles,
   Square,
-  SquareStack,
   Sun,
   Trash2,
   Undo2,
@@ -40,6 +39,7 @@ import {
 import { useEffect } from 'react'
 import { getHistoryCommandState, runRedo, runUndo } from '../../../lib/history'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
+import { getSavedSceneDocument } from '../../../lib/scene'
 import { createUnitInBuilding, enterUnitFocus, leaveUnitFocus } from '../../../lib/units'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import type { StructureTool } from '../../../store/use-editor'
@@ -50,10 +50,8 @@ export function EditorCommands() {
   const register = useCommandRegistry((s) => s.register)
   const { navigateTo, setInputValue, setOpen } = useCommandPalette()
 
-  const setPhase = useEditor((s) => s.setPhase)
   const armToolMode = useEditor((s) => s.armToolMode)
   const armMaterialPaint = useEditor((s) => s.armMaterialPaint)
-  const setStructureLayer = useEditor((s) => s.setStructureLayer)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
   const setPreviewMode = useEditor((s) => s.setPreviewMode)
 
@@ -79,12 +77,7 @@ export function EditorCommands() {
     )
 
     const activateTool = (tool: StructureTool) => {
-      run(() => {
-        setPhase('structure')
-        if (tool === 'zone') setStructureLayer('zones')
-        else setStructureLayer('elements')
-        armToolMode({ mode: 'build', tool })
-      })
+      run(() => armToolMode({ mode: 'build', tool }))
     }
 
     return register([
@@ -175,11 +168,7 @@ export function EditorCommands() {
         keywords: ['paint', 'material', 'texture', 'bucket', 'surface'],
         shortcut: ['P'],
         execute: () =>
-          run(() => {
-            setPhase('structure')
-            setStructureLayer('elements')
-            armMaterialPaint()
-          }),
+          run(() => armMaterialPaint()),
       },
       {
         id: 'editor.mode.terrain-sculpt',
@@ -315,19 +304,6 @@ export function EditorCommands() {
         navigate: true,
         execute: () => navigateTo('wall-mode'),
       },
-      {
-        id: 'editor.viewer.level-mode',
-        label: 'Level Mode',
-        group: 'Viewer Controls',
-        icon: <SquareStack className="h-4 w-4" />,
-        keywords: ['level', 'floor', 'exploded', 'stacked', 'solo'],
-        badge: () => {
-          const mode = useViewer.getState().levelMode
-          return { manual: 'Manual', stacked: 'Stacked', exploded: 'Exploded', solo: 'Solo' }[mode]
-        },
-        navigate: true,
-        execute: () => navigateTo('level-mode'),
-      },
       {
         id: 'editor.viewer.camera-mode',
         label: () => {
@@ -422,7 +398,7 @@ export function EditorCommands() {
         keywords: ['export', 'download', 'json', 'save', 'data'],
         execute: () =>
           run(() => {
-            const { nodes, rootNodeIds } = useScene.getState()
+            const { nodes, rootNodeIds } = getSavedSceneDocument()
             const blob = new Blob([JSON.stringify({ nodes, rootNodeIds }, null, 2)], {
               type: 'application/json',
             })
@@ -476,10 +452,8 @@ export function EditorCommands() {
     navigateTo,
     setInputValue,
     setOpen,
-    setPhase,
     armToolMode,
     armMaterialPaint,
-    setStructureLayer,
     isPreviewMode,
     setPreviewMode,
     exportScene,

package/src/components/ui/command-palette/index.tsx

@@ -149,7 +149,6 @@ function OptionItem({
 // ---------------------------------------------------------------------------
 const PAGE_LABEL: Record<string, string> = {
   'wall-mode': 'Wall Mode',
-  'level-mode': 'Level Mode',
   'rename-level': 'Rename Level',
   'goto-level': 'Go to Level',
 }
@@ -204,8 +203,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
 
   const wallMode = useViewer((s) => s.wallMode)
   const setWallMode = useViewer((s) => s.setWallMode)
-  const levelMode = useViewer((s) => s.levelMode)
-  const setLevelMode = useViewer((s) => s.setLevelMode)
 
   const allLevels = useScene(
     useShallow((s) =>
@@ -250,12 +247,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     down: 'Down',
     translucent: 'Translucent',
   }
-  const levelModeLabel: Record<'manual' | 'stacked' | 'exploded' | 'solo', string> = {
-    manual: 'Manual',
-    stacked: 'Stacked',
-    exploded: 'Exploded',
-    solo: 'Solo',
-  }
 
   const confirmRename = () => {
     if (!(activeLevelId && inputValue.trim())) return
@@ -364,7 +355,11 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                         keywords={action.keywords}
                         label={action.label}
                         navigate={action.navigate}
-                        onSelect={() => action.execute()}
+                        // A registered command that does not navigate within the
+                        // palette closes it, like the built-ins — otherwise the
+                        // dialog overlay keeps swallowing clicks under a full-screen
+                        // surface the command opened (Sheets).
+                        onSelect={() => (action.navigate ? action.execute() : run(() => action.execute()))}
                         shortcut={action.shortcut}
                       />
                     ))}
@@ -385,20 +380,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                 </Command.Group>
               )}
 
-              {/* ── Level Mode sub-page ───────────────────────────────────── */}
-              {page === 'level-mode' && (
-                <Command.Group heading="Level Mode">
-                  {(['stacked', 'exploded', 'solo'] as const).map((mode) => (
-                    <OptionItem
-                      isActive={levelMode === mode}
-                      key={mode}
-                      label={levelModeLabel[mode]}
-                      onSelect={() => run(() => setLevelMode(mode))}
-                    />
-                  ))}
-                </Command.Group>
-              )}
-
               {/* ── Go to Level sub-page ──────────────────────────────────── */}
               {page === 'goto-level' && (
                 <Command.Group heading="Go to Level">

package/src/components/ui/controls/finish-swatch.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import {
+  type AnyNode,
+  getCatalogMaterialById,
+  getLibraryMaterialIdFromRef,
+  getSceneMaterialIdFromRef,
+  nodeRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useState } from 'react'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { MaterialPicker } from './material-picker'
+
+type Swatch = { label: string; color: string | null; image: string | null }
+
+/** How a finish reference reads in a panel: its catalog tile, its colour, or its scene material. */
+function useFinishSwatch(ref: string | undefined, fallback: string): Swatch {
+  const materials = useScene((state) => state.materials)
+  if (!ref) return { ...describe(fallback, materials), label: 'Default' }
+  return describe(ref, materials)
+}
+
+function describe(ref: string, materials: ReturnType<typeof useScene.getState>['materials']) {
+  const library = getCatalogMaterialById(getLibraryMaterialIdFromRef(ref) ?? undefined)
+  if (library)
+    return {
+      label: library.label,
+      color: library.previewColor ?? null,
+      image: library.previewThumbnailUrl ?? null,
+    }
+  const sceneId = getSceneMaterialIdFromRef(ref)
+  const scene = sceneId ? materials[sceneId as keyof typeof materials] : undefined
+  if (scene) return { label: scene.name, color: scene.material.properties?.color ?? null, image: null }
+  if (ref.startsWith('#')) return { label: ref.toUpperCase(), color: ref, image: null }
+  return { label: 'Default', color: null, image: null }
+}
+
+/**
+ * Paints one surface of a node from its panel, exactly as the paint tool does:
+ * the kind's own paint commit for that role (same write, one undo step).
+ */
+export function paintSurface(node: AnyNode, role: string, materialPreset: string) {
+  const paint = nodeRegistry.get(node.type)?.capabilities?.paint
+  if (!paint) return
+  const args = { node, role, material: undefined, materialPreset }
+  if (paint.commit) paint.commit(args)
+  else useScene.getState().updateNode(node.id, paint.buildPatch(args) as Partial<AnyNode>)
+}
+
+/**
+ * A finish row: the swatch and its name. A click opens the paint tool's
+ * material picker; a pick paints the surface through the paint tool's path.
+ */
+export function FinishSwatch({
+  label,
+  node,
+  role,
+  value,
+  fallback,
+  hint,
+}: {
+  label: string
+  node: AnyNode
+  /** The paint role of the surface (`edge`, `foundation`, …). */
+  role: string
+  /** The authored finish reference; absent shows `fallback` as "Default". */
+  value: string | undefined
+  fallback: string
+  /** Tooltip on the row. */
+  hint?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const swatch = useFinishSwatch(value, fallback)
+  return (
+    <div className="flex min-h-8 items-center justify-between gap-3" title={hint}>
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <Popover onOpenChange={setOpen} open={open}>
+        <PopoverTrigger asChild>
+          <button
+            aria-label={`${label}: ${swatch.label}`}
+            className="flex min-w-0 items-center gap-2 rounded-full border border-border/50 py-0.5 pr-2.5 pl-1 text-xs transition-colors hover:bg-accent"
+            data-finish-swatch={label}
+            type="button"
+          >
+            <span
+              aria-hidden
+              className="size-4 shrink-0 overflow-hidden rounded-full border border-border/50"
+              style={{ backgroundColor: swatch.color ?? 'transparent' }}
+            >
+              {swatch.image && <img alt="" className="size-full object-cover" src={swatch.image} />}
+            </span>
+            <span className="truncate">{swatch.label}</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="flex h-96 w-80 flex-col p-2" side="left">
+          <MaterialPicker
+            onSelectMaterialPreset={(ref) => {
+              const live = useScene.getState().nodes[node.id as keyof ReturnType<typeof useScene.getState>['nodes']]
+              if (live) paintSurface(live, role, ref)
+              setOpen(false)
+            }}
+            selectOnCategoryChange={false}
+            selectedMaterialPreset={value}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

package/src/components/ui/controls/material-paint-panel.tsx

@@ -1,19 +1,22 @@
 'use client'
 
 import { type SceneMaterialId } from '@pascal-app/core'
-import { Eraser, Plus, RotateCcw } from 'lucide-react'
+import { Eraser, PaintBucket, Pentagon, Pipette, Plus, Square } from 'lucide-react'
 import { useState } from 'react'
 import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
+import { type PaintMode, usePaintRegionMode } from '../../../lib/paint-region-mode'
+import useEditor, { armMaterialPaint } from '../../../store/use-editor'
 import { Button } from '../primitives/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPicker } from './material-picker'
 import { SceneMaterialList } from './scene-material-list'
+import { SegmentedControl } from './segmented-control'
 
 /**
  * Material picker for paint mode. Embedders render this wherever paint controls
  * belong (the community editor places it in the Build sidebar while paint mode
  * is active). It fills its container's height and lays out as three bands: a
- * fixed control/category header, a single scrolling catalog grid, and a fixed
+ * fixed mode header, a single scrolling catalog grid, and a fixed
  * scene-material footer (always visible, with a `+` to add a custom material).
  */
 export type MaterialPaintPanelProps = {
@@ -21,37 +24,103 @@ export type MaterialPaintPanelProps = {
   onCreateMaterialRequest?: () => void
 }
 
+const PAINT_MODE_OPTIONS: { value: PaintMode; label: string; icon: typeof PaintBucket }[] = [
+  { value: 'surface', label: 'Whole surface: a click paints the surface under it', icon: PaintBucket },
+  {
+    value: 'rectangle',
+    label: 'Rectangle: press anywhere on a wall, floor or ceiling, drag to the opposite corner',
+    icon: Square,
+  },
+  {
+    value: 'polygon',
+    label: 'Polygon: click the points of a shape on a floor or ceiling',
+    icon: Pentagon,
+  },
+  {
+    value: 'erase',
+    label: 'Erase: click a painted part to remove it, or a painted surface to reset it',
+    icon: Eraser,
+  },
+  {
+    value: 'pick',
+    label: 'Pick: click a surface to paint with its material (or hold Alt / Option)',
+    icon: Pipette,
+  },
+]
+
+/**
+ * Paint the whole surface, draw part of a wall, floor or ceiling first, erase, or
+ * pick a material off a surface. Erase
+ * is the eraser the paint path already knows (a click writes "no finish"), so a
+ * painted region goes and a whole-surface paint returns to its default. The row
+ * shows a choice only while paint mode is on; any pick (erase included) turns it
+ * on, so nothing here needs a colour first.
+ */
+function PaintModeControl() {
+  const painting = useEditor((s) => s.mode === 'material-paint')
+  const mode = usePaintRegionMode((s) => s.mode)
+  const select = (next: PaintMode) => {
+    if (painting) usePaintRegionMode.getState().setMode(next)
+    else armMaterialPaint(undefined, next)
+  }
+  return (
+    <div
+      className="shrink-0 space-y-1.5 pb-2"
+      data-paint-mode={painting ? mode : 'off'}
+      // A clicked option must not keep focus: the next shortcut (V) would light
+      // its focus ring and it would read as still chosen after paint mode ends.
+      onPointerUp={(event) => (event.target as HTMLElement).closest('button')?.blur()}
+    >
+      <div className="px-0.5 font-medium text-muted-foreground text-xs">
+        {painting && mode === 'erase' ? 'Erase' : painting && mode === 'pick' ? 'Pick material' : 'Paint'}
+      </div>
+      <SegmentedControl
+        mixed={!painting}
+        onChange={select}
+        options={PAINT_MODE_OPTIONS.map(({ value, label, icon: Icon }) => ({
+          value,
+          label: (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span aria-label={label} className="flex items-center justify-center">
+                  <Icon className="h-3.5 w-3.5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+          ),
+        }))}
+        value={mode}
+      />
+    </div>
+  )
+}
+
 export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
-  const { activePaintMaterial, paintEraser, setPaintEraser, canResetSelection, resetSelection, materialCount, selectMaterial, createCustomMaterial: createMaterial } = useMaterialPaintPanelModel()
+  const painting = useEditor((s) => s.mode === 'material-paint')
+  const erasing = usePaintRegionMode((s) => s.mode) === 'erase' && painting
+  const {
+    activePaintMaterial,
+    materialCount,
+    selectMaterial,
+    createCustomMaterial: createMaterial,
+  } = useMaterialPaintPanelModel()
   const [autoEditMaterialId, setAutoEditMaterialId] = useState<SceneMaterialId | null>(null)
   const createCustomMaterial = () => setAutoEditMaterialId(createMaterial())
 
   return (
     <div className="flex h-full min-h-0 w-full flex-col">
-      {/* Fixed: eraser / reset. */}
-      <div className="flex shrink-0 items-center gap-2 pb-2">
-        <Button
-          aria-pressed={paintEraser}
-          className="flex-1"
-          onClick={() => setPaintEraser(!paintEraser)}
-          size="sm"
-          variant={paintEraser ? 'default' : 'outline'}
-        >
-          <Eraser />
-          Erase
-        </Button>
-        <Button
-          className="flex-1"
-          disabled={!canResetSelection}
-          onClick={resetSelection}
-          size="sm"
-          variant="outline"
-        >
-          <RotateCcw />
-          Reset all
-        </Button>
-      </div>
+      {/* Fixed: whole surface, part of a surface, or erase. */}
+      <PaintModeControl />
 
+      {/* Erasing paints nothing: no swatches to pick from, just what a click does. */}
+      {erasing ? (
+        <p className="px-0.5 py-1 text-muted-foreground text-xs" data-paint-erase-note>
+          Click a painted part of a wall, floor or ceiling to remove it, or a painted surface to reset it to
+          its default.
+        </p>
+      ) : (
+        <>
       {/* Scrolls: category tabs (fixed inside) + catalog grid (the scroll). */}
       {/* A stable hook for host-app onboarding to point at. Static, and read
           only from outside: nothing here depends on it. */}
@@ -94,6 +163,8 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
           )}
         </div>
       </div>
+        </>
+      )}
     </div>
   )
 }

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

@@ -14,6 +14,8 @@ export type MaterialPickerProps = {
   nodeType?: MaterialTarget
   hideSideControl?: boolean
   onCreateMaterialRequest?: () => void
+  /** Whether switching category tabs selects the tab's first material (paint mode does). */
+  selectOnCategoryChange?: boolean
 }
 
 function getCategoryLabel(category: string) {
@@ -31,8 +33,9 @@ export function MaterialPicker({
   onSelectMaterialPreset,
   disabled = false,
   onCreateMaterialRequest,
+  selectOnCategoryChange = true,
 }: MaterialPickerProps) {
-  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled)
+  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled, selectOnCategoryChange)
 
   return (
     <div

package/src/components/ui/controls/scene-material-list.tsx

@@ -10,21 +10,13 @@ import {
 } from '@pascal-app/core'
 import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
+import { sceneMaterialUsageCounts } from '../../../lib/scene-material-refs'
 import useEditor from '../../../store/use-editor'
 import { Button } from '../primitives/button'
 import { Input } from '../primitives/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPropertiesEditor } from './material-properties-editor'
 
-type SlotRecord = Record<string, string | undefined>
-
-function getSlotRecord(node: unknown): SlotRecord | null {
-  if (!node || typeof node !== 'object' || !('slots' in node)) return null
-  const slots = (node as { slots?: unknown }).slots
-  if (!slots || typeof slots !== 'object' || Array.isArray(slots)) return null
-  return slots as SlotRecord
-}
-
 export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId | null }) {
   const materials = useScene((state) => state.materials)
   const nodes = useScene((state) => state.nodes)
@@ -40,29 +32,9 @@ export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId
     [materials],
   )
 
-  const usageCounts = useMemo(() => {
-    const counts = new Map<SceneMaterialId, number>()
-    const refToId = new Map<string, SceneMaterialId>()
-
-    for (const [id] of materialEntries) {
-      counts.set(id, 0)
-      refToId.set(toSceneMaterialRef(id), id)
-    }
-
-    for (const node of Object.values(nodes)) {
-      const slots = getSlotRecord(node)
-      if (!slots) continue
-
-      for (const value of Object.values(slots)) {
-        if (typeof value !== 'string') continue
-        const materialId = refToId.get(value)
-        if (!materialId) continue
-        counts.set(materialId, (counts.get(materialId) ?? 0) + 1)
-      }
-    }
-
-    return counts
-  }, [materialEntries, nodes])
+  // Every place a scene material can be used — slots and the room, wall and
+  // footprint finishes — counted by the same walker saving and pasting use.
+  const usageCounts = useMemo(() => sceneMaterialUsageCounts(nodes), [nodes])
 
   return (
     <div className="space-y-2">

package/src/components/ui/controls/select-control.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+
+interface SelectControlProps<T extends string> {
+  label: string
+  value: T
+  onChange: (value: T) => void
+  options: { label: string; value: T }[]
+  className?: string
+  mixed?: boolean
+}
+
+export function SelectControl<T extends string>({
+  label,
+  value,
+  onChange,
+  options,
+  className,
+  mixed = false,
+}: SelectControlProps<T>) {
+  const current = mixed ? 'Mixed' : options.find((option) => option.value === value)?.label
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          aria-label={label}
+          className={cn(
+            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e] data-[state=open]:bg-[#3e3e3e]',
+            className,
+          )}
+          type="button"
+        >
+          <span className="select-none text-muted-foreground transition-colors group-hover:text-foreground">
+            {label}
+          </span>
+          <span className="flex min-w-0 items-center gap-1.5 text-foreground">
+            <span className="truncate">{current}</span>
+            <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-(--radix-dropdown-menu-trigger-width)">
+        <DropdownMenuRadioGroup
+          onValueChange={(next) => onChange(next as T)}
+          value={mixed ? '' : value}
+        >
+          {options.map((option) => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -50,12 +50,13 @@ import { pasteSelectionAndPickUp } from '../editor/group-actions'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
-} from '../../lib/level-duplication'
+} from '@pascal-app/core/building'
 import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
 import { unitMemberLevels, leaveUnitFocus } from '../../lib/units'
 import { useLinearDisplay } from '../../lib/use-linear-display'
 import { cn } from '../../lib/utils'
+import { useIsMobile } from '../../hooks/use-mobile'
 import { ActionButton } from './controls/action-button'
 import { SliderControl } from './controls/slider-control'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
@@ -448,11 +449,13 @@ function UnitFocusChip() {
 // ── Main component ──────────────────────────────────────────────────────────
 
 export function FloatingLevelSelector() {
+  // Desktop's view bar is a row above the stage; mobile's floats over it.
+  const isMobile = useIsMobile()
   const selectedBuildingId = useViewer((s) => s.selection.buildingId)
   const levelId = useViewer((s) => s.selection.levelId)
   const setSelection = useViewer((s) => s.setSelection)
   const createNode = useScene((s) => s.createNode)
-  const createNodes = useScene((s) => s.createNodes)
+  const applyNodeChanges = useScene((s) => s.applyNodeChanges)
   const updateNodes = useScene((s) => s.updateNodes)
 
   const [deletingLevel, setDeletingLevel] = useState<LevelNode | null>(null)
@@ -560,29 +563,21 @@ export function FloatingLevelSelector() {
 
   const handleDuplicateLevel = useCallback(
     (level: LevelNode, preset: LevelDuplicatePreset = 'everything') => {
-      const { createOps, newLevelId, shiftedLevels } = buildLevelDuplicateCreateOps({
+      const { createOps, newLevelId, updateOps } = buildLevelDuplicateCreateOps({
         nodes: useScene.getState().nodes,
         level,
         levels,
         preset,
       })
 
-      if (shiftedLevels.length > 0) {
-        updateNodes(
-          shiftedLevels.map((shiftedLevel) => ({
-            id: shiftedLevel.id as AnyNodeId,
-            data: { level: shiftedLevel.level } as Partial<AnyNode>,
-          })),
-        )
-      }
-      createNodes(createOps)
+      applyNodeChanges({ create: createOps, update: updateOps })
 
       setSelection({
         buildingId: resolvedBuildingId ?? undefined,
         levelId: newLevelId as LevelNode['id'],
       })
     },
-    [createNodes, levels, resolvedBuildingId, setSelection, updateNodes],
+    [applyNodeChanges, levels, resolvedBuildingId, setSelection],
   )
 
   const handlePasteToLevel = useCallback((level: LevelNode) => {
@@ -641,7 +636,7 @@ export function FloatingLevelSelector() {
 
   return (
     <>
-      <div className="pointer-events-auto absolute top-14 left-3 z-20">
+      <div className={cn('pointer-events-auto absolute left-3 z-20', isMobile ? 'top-14' : 'top-3')}>
         <div className="relative">
           {/* Floating + at top edge */}
           {!draggingLevelId && (

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

@@ -1,14 +1,17 @@
+import type { HudTitle } from '../../../lib/hud-title'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 
 interface BuildingHelperProps {
   showRotate?: boolean
+  title?: HudTitle | null
 }
 
 // Rotate is one hint with both keys (R / T) — never two separate
 // counterclockwise / clockwise rows — to match every other placement helper.
-export function BuildingHelper({ showRotate }: BuildingHelperProps) {
+export function BuildingHelper({ showRotate, title = null }: BuildingHelperProps) {
   return (
     <ContextualHelperPanel
+      title={title}
       hints={[
         { keys: ['Left click'], label: 'Place building' },
         ...(showRotate ? [{ keys: ['R', 'T'], label: 'Rotate' }] : []),