@pascal-app/editor 0.4.0 → 0.6.0

package/src/components/ui/action-menu/control-modes.tsx

@@ -90,12 +90,17 @@ export function ControlModes() {
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
   const levelId = useViewer((s) => s.selection.levelId)
 
-  const levelNode = useScene((state) =>
-    levelId ? (state.nodes[levelId] as LevelNode | undefined) : undefined,
-  )
+  // Only subscribe to the primitive `level` number — when walls are added to
+  // this level the object ref changes but this number doesn't, so Object.is
+  // dedupes and we avoid a re-render.
+  const levelIndex = useScene((state) => {
+    if (!levelId) return null
+    const node = state.nodes[levelId]
+    return node?.type === 'level' ? (node as LevelNode).level : null
+  })
 
   const isSiteEditing = phase === 'site'
-  const isGroundFloor = levelNode?.type === 'level' && levelNode.level === 0
+  const isGroundFloor = levelIndex === 0
   const canEnterSiteEdit = isGroundFloor || isSiteEditing
 
   const structureLayer = useEditor((state) => state.structureLayer)

package/src/components/ui/action-menu/structure-tools.tsx

@@ -28,6 +28,7 @@ export const tools: ToolConfig[] = [
   { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
   { id: 'door', iconSrc: '/icons/door.png', label: 'Door' },
   { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
+  { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
   { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
 ]
 

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

@@ -35,6 +35,7 @@ import {
 } from 'lucide-react'
 import { useEffect } from 'react'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
+import { runRedo, runUndo } from '../../../lib/history'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import type { StructureTool } from '../../../store/use-editor'
 import useEditor from '../../../store/use-editor'
@@ -44,8 +45,12 @@ export function EditorCommands() {
   const register = useCommandRegistry((s) => s.register)
   const { navigateTo, setInputValue, setOpen } = useCommandPalette()
 
-  const { setPhase, setMode, setTool, setStructureLayer, isPreviewMode, setPreviewMode } =
-    useEditor()
+  const setPhase = useEditor((s) => s.setPhase)
+  const setMode = useEditor((s) => s.setMode)
+  const setTool = useEditor((s) => s.setTool)
+  const setStructureLayer = useEditor((s) => s.setStructureLayer)
+  const isPreviewMode = useEditor((s) => s.isPreviewMode)
+  const setPreviewMode = useEditor((s) => s.setPreviewMode)
 
   const exportScene = useViewer((s) => s.exportScene)
 
@@ -309,7 +314,7 @@ export function EditorCommands() {
         group: 'History',
         icon: <Undo2 className="h-4 w-4" />,
         keywords: ['undo', 'revert', 'back'],
-        execute: () => run(() => useScene.temporal.getState().undo()),
+        execute: () => run(() => runUndo()),
       },
       {
         id: 'editor.history.redo',
@@ -317,7 +322,7 @@ export function EditorCommands() {
         group: 'History',
         icon: <Redo2 className="h-4 w-4" />,
         keywords: ['redo', 'forward', 'repeat'],
-        execute: () => run(() => useScene.temporal.getState().redo()),
+        execute: () => run(() => runRedo()),
       },
 
       // ── Export & Share ───────────────────────────────────────────────────

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

@@ -219,7 +219,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
   const views = usePaletteViewRegistry((s) => s.views)
 
   const activeLevelId = useViewer((s) => s.selection.levelId)
-  const activeLevelNode = useScene((s) => (activeLevelId ? s.nodes[activeLevelId] : null))
 
   const wallMode = useViewer((s) => s.wallMode)
   const setWallMode = useViewer((s) => s.setWallMode)

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

@@ -1,73 +1,79 @@
 'use client'
 
-import { DEFAULT_MATERIALS, type MaterialPreset, type MaterialSchema } from '@pascal-app/core'
-import { useState } from 'react'
-
-const PRESET_COLORS: Record<MaterialPreset, string> = {
-  white: '#ffffff',
-  brick: '#8b4513',
-  concrete: '#808080',
-  wood: '#deb887',
-  glass: '#87ceeb',
-  metal: '#c0c0c0',
-  plaster: '#f5f5dc',
-  tile: '#d3d3d3',
-  marble: '#fafafa',
-  custom: '#ffffff',
-}
-
-const PRESET_LABELS: Record<MaterialPreset, string> = {
-  white: 'White',
-  brick: 'Brick',
-  concrete: 'Concrete',
-  wood: 'Wood',
-  glass: 'Glass',
-  metal: 'Metal',
-  plaster: 'Plaster',
-  tile: 'Tile',
-  marble: 'Marble',
-  custom: 'Custom',
-}
+import {
+  getMaterialsForTarget,
+  toLibraryMaterialRef,
+  type MaterialSchema,
+  type MaterialTarget,
+} from '@pascal-app/core'
+import { useEffect, useState } from 'react'
 
 type MaterialPickerProps = {
+  nodeType?: MaterialTarget
   value?: MaterialSchema
-  onChange: (material: MaterialSchema) => void
+  selectedMaterialPreset?: string
+  onChange?: (material: MaterialSchema) => void
+  onSelectMaterialPreset?: (materialPreset: string) => void
+  hideSideControl?: boolean
+  disabled?: boolean
 }
 
-export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
-  const [showCustom, setShowCustom] = useState<boolean>(
-    value?.preset === 'custom' || !!value?.properties,
-  )
+export function MaterialPicker({
+  nodeType,
+  value,
+  selectedMaterialPreset,
+  onChange,
+  onSelectMaterialPreset,
+  hideSideControl = false,
+  disabled = false,
+}: MaterialPickerProps) {
+  const [showCustom, setShowCustom] = useState<boolean>(!!value?.properties)
+  const catalogItems = nodeType ? getMaterialsForTarget(nodeType) : []
 
-  const currentPreset = value?.preset || 'white'
-  const currentProps = value?.properties || DEFAULT_MATERIALS[currentPreset]
+  useEffect(() => {
+    setShowCustom(!!value?.properties && !selectedMaterialPreset)
+  }, [selectedMaterialPreset, value?.properties])
 
-  const handlePresetChange = (preset: MaterialPreset) => {
-    if (preset === 'custom') {
-      setShowCustom(true)
-      onChange({
-        preset: 'custom',
-        properties: {
-          color: value?.properties?.color || '#ffffff',
-          roughness: value?.properties?.roughness ?? 0.5,
-          metalness: value?.properties?.metalness ?? 0,
-          opacity: value?.properties?.opacity ?? 1,
-          transparent: value?.properties?.transparent ?? false,
-          side: value?.properties?.side ?? 'front',
-        },
-      })
-    } else {
-      setShowCustom(false)
-      onChange({ preset })
-    }
+  const currentProps = value?.properties || {
+    color: '#ffffff',
+    roughness: 0.5,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front' as const,
+  }
+  const selectedCatalogId =
+    selectedMaterialPreset ?? (value?.id ? toLibraryMaterialRef(value.id) : undefined)
+
+  const handleCatalogSelect = (materialId: string) => {
+    if (disabled) return
+    setShowCustom(false)
+    onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
+  }
+
+  const handleCustomOpen = () => {
+    if (disabled) return
+    setShowCustom(true)
+    onChange?.({
+      preset: 'custom',
+      properties: {
+        color: value?.properties?.color || '#ffffff',
+        roughness: value?.properties?.roughness ?? 0.5,
+        metalness: value?.properties?.metalness ?? 0,
+        opacity: value?.properties?.opacity ?? 1,
+        transparent: value?.properties?.transparent ?? false,
+        side: value?.properties?.side ?? 'front',
+      },
+    })
   }
 
   const handlePropertyChange = (
     prop: keyof typeof currentProps,
     val: (typeof currentProps)[keyof typeof currentProps],
   ) => {
-    onChange({
-      preset: showCustom ? 'custom' : currentPreset,
+    if (disabled) return
+    onChange?.({
+      preset: 'custom',
       properties: {
         ...currentProps,
         [prop]: val,
@@ -76,32 +82,57 @@ export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
   }
 
   return (
-    <div className="space-y-3">
-      <div className="grid grid-cols-5 gap-1.5">
-        {(Object.keys(PRESET_COLORS) as MaterialPreset[]).map((preset) => (
-          <button
-            className={`h-8 w-8 rounded border-2 transition-all ${
-              currentPreset === preset
-                ? 'border-blue-500 ring-2 ring-blue-500/30'
-                : 'border-gray-300 hover:border-gray-400'
-            }`}
-            key={preset}
-            onClick={() => handlePresetChange(preset)}
-            style={{
-              backgroundColor: PRESET_COLORS[preset],
-              backgroundImage:
-                preset === 'glass'
-                  ? 'linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent)'
-                  : undefined,
-              backgroundSize: preset === 'glass' ? '8px 8px' : undefined,
-            }}
-            title={PRESET_LABELS[preset]}
-            type="button"
-          />
-        ))}
-      </div>
+    <div className={`space-y-3 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
+      {(catalogItems.length > 0 || onChange) && (
+        <div className="space-y-2">
+          {catalogItems.length > 0 ? (
+            <div className="text-gray-500 text-xs uppercase tracking-[0.16em]">Library</div>
+          ) : null}
+          <div className="flex flex-wrap gap-1.5">
+            {catalogItems.map((item) => (
+              <button
+                className={`h-14 w-14 shrink-0 overflow-hidden rounded-lg border transition-all ${
+                  selectedCatalogId === toLibraryMaterialRef(item.id)
+                    ? 'border-blue-500 ring-2 ring-blue-500/30'
+                    : 'border-gray-300 hover:border-gray-400'
+                }`}
+                key={item.id}
+                onClick={() => handleCatalogSelect(item.id)}
+                title={item.label}
+                type="button"
+              >
+                {item.previewThumbnailUrl ? (
+                  <img
+                    alt={item.label}
+                    className="h-full w-full object-cover"
+                    src={item.previewThumbnailUrl}
+                  />
+                ) : item.previewColor ? (
+                  <div className="h-full w-full" style={{ backgroundColor: item.previewColor }} />
+                ) : (
+                  <div className="h-full w-full bg-gray-100" />
+                )}
+              </button>
+            ))}
+            {onChange ? (
+              <button
+                className={`flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border text-[10px] font-medium transition-all ${
+                  showCustom
+                    ? 'border-blue-500 bg-blue-50 text-blue-700 ring-2 ring-blue-500/30'
+                    : 'border-gray-300 bg-white text-gray-500 hover:border-gray-400'
+                }`}
+                onClick={handleCustomOpen}
+                title="Custom"
+                type="button"
+              >
+                Custom
+              </button>
+            ) : null}
+          </div>
+        </div>
+      )}
 
-      {showCustom && (
+      {showCustom && onChange && (
         <div className="space-y-2 pt-2">
           <div className="flex items-center gap-2">
             <label className="w-16 text-gray-500 text-xs">Color</label>
@@ -173,20 +204,22 @@ export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
             </span>
           </div>
 
-          <div className="flex items-center gap-2">
-            <label className="w-16 text-gray-500 text-xs">Side</label>
-            <select
-              className="h-7 flex-1 rounded border border-gray-300 px-2 text-xs"
-              onChange={(e) =>
-                handlePropertyChange('side', e.target.value as 'front' | 'back' | 'double')
-              }
-              value={currentProps.side}
-            >
-              <option value="front">Front</option>
-              <option value="back">Back</option>
-              <option value="double">Double</option>
-            </select>
-          </div>
+          {!hideSideControl && (
+            <div className="flex items-center gap-2">
+              <label className="w-16 text-gray-500 text-xs">Side</label>
+              <select
+                className="h-7 flex-1 rounded border border-gray-300 px-2 text-xs"
+                onChange={(e) =>
+                  handlePropertyChange('side', e.target.value as 'front' | 'back' | 'double')
+                }
+                value={currentProps.side}
+              >
+                <option value="front">Front</option>
+                <option value="back">Back</option>
+                <option value="double">Double</option>
+              </select>
+            </div>
+          )}
         </div>
       )}
     </div>

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

@@ -21,6 +21,20 @@ function stepPrecision(s: number): number {
   return Math.max(0, Math.ceil(-Math.log10(s)))
 }
 
+function getAdjustedStep(
+  baseStep: number,
+  modifiers: {
+    shiftKey?: boolean
+    metaKey?: boolean
+    ctrlKey?: boolean
+    altKey?: boolean
+  },
+): number {
+  if (modifiers.shiftKey) return baseStep * 10
+  if (modifiers.metaKey || modifiers.ctrlKey || modifiers.altKey) return baseStep * 0.1
+  return baseStep
+}
+
 export function SliderControl({
   label,
   value,
@@ -58,16 +72,14 @@ export function SliderControl({
       if (isEditing) return
       e.preventDefault()
       const direction = e.deltaY < 0 ? 1 : -1
-      let s = step
-      if (e.shiftKey) s = step * 10
-      else if (e.altKey) s = step * 0.1
+      const s = getAdjustedStep(step, e)
       const newValue = clamp(valueRef.current + direction * s)
       const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
       if (final !== valueRef.current) onChange(final)
     }
     el.addEventListener('wheel', handleWheel, { passive: false })
     return () => el.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, onChange, precision])
+  }, [isEditing, step, clamp, onChange])
 
   // Arrow key support while hovered
   useEffect(() => {
@@ -78,9 +90,7 @@ export function SliderControl({
       else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') direction = -1
       if (direction !== 0) {
         e.preventDefault()
-        let s = step
-        if (e.shiftKey) s = step * 10
-        else if (e.metaKey || e.ctrlKey) s = step * 0.1
+        const s = getAdjustedStep(step, e)
         const newValue = clamp(valueRef.current + direction * s)
         const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
         if (final !== valueRef.current) onChange(final)
@@ -88,7 +98,7 @@ export function SliderControl({
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isHovered, isEditing, step, clamp, onChange, precision])
+  }, [isHovered, isEditing, step, clamp, onChange])
 
   const handleLabelPointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
@@ -107,16 +117,14 @@ export function SliderControl({
       if (!dragRef.current) return
       const { startX, startValue } = dragRef.current
       const dx = e.clientX - startX
-      let s = step
-      if (e.shiftKey) s = step * 10
-      else if (e.metaKey || e.ctrlKey) s = step * 0.1
+      const s = getAdjustedStep(step, e)
       // 4 px per step at default sensitivity
       const newValue = clamp(
         Number.parseFloat((startValue + (dx / 4) * s).toFixed(stepPrecision(s))),
       )
       onChange(newValue)
     },
-    [step, precision, clamp, onChange],
+    [step, clamp, onChange],
   )
 
   const handleLabelPointerUp = useCallback(
@@ -163,12 +171,18 @@ export function SliderControl({
         setIsEditing(false)
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
-        const newV = clamp(value + step)
+        const adjustedStep = getAdjustedStep(step, e)
+        const newV = clamp(
+          Number.parseFloat((value + adjustedStep).toFixed(stepPrecision(adjustedStep))),
+        )
         onChange(newV)
         setInputValue(newV.toFixed(precision))
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
-        const newV = clamp(value - step)
+        const adjustedStep = getAdjustedStep(step, e)
+        const newV = clamp(
+          Number.parseFloat((value - adjustedStep).toFixed(stepPrecision(adjustedStep))),
+        )
         onChange(newV)
         setInputValue(newV.toFixed(precision))
       }

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

@@ -0,0 +1,32 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+interface BuildingHelperProps {
+  showRotate?: boolean
+}
+
+export function BuildingHelper({ showRotate }: BuildingHelperProps) {
+  return (
+    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Left click" />
+        <span className="text-muted-foreground">Place building</span>
+      </div>
+      {showRotate && (
+        <>
+          <div className="flex items-center gap-2 text-sm">
+            <ShortcutToken value="R" />
+            <span className="text-muted-foreground">Rotate counterclockwise</span>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <ShortcutToken value="T" />
+            <span className="text-muted-foreground">Rotate clockwise</span>
+          </div>
+        </>
+      )}
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Esc" />
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

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

@@ -1,6 +1,7 @@
 'use client'
 
 import useEditor from '../../../store/use-editor'
+import { BuildingHelper } from './building-helper'
 import { CeilingHelper } from './ceiling-helper'
 import { ItemHelper } from './item-helper'
 import { RoofHelper } from './roof-helper'
@@ -12,6 +13,7 @@ export function HelperManager() {
   const movingNode = useEditor((state) => state.movingNode)
 
   if (movingNode) {
+    if (movingNode.type === 'building') return <BuildingHelper showRotate />
     return <ItemHelper showEsc />
   }
 

package/src/components/ui/item-catalog/catalog-items.tsx

@@ -1578,3 +1578,8 @@ export const CATALOG_ITEMS: AssetInput[] = [
     },
   },
 ]
+
+export function getDefaultCatalogItem(category: string | null | undefined): AssetInput | null {
+  if (!category) return null
+  return CATALOG_ITEMS.find((item) => item.category === category) ?? null
+}

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

@@ -2,27 +2,27 @@
 
 import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Edit, Plus, Trash2 } from 'lucide-react'
+import { Edit, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
+import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
-import { ActionButton } from '../controls/action-button'
+import { ActionButton, ActionGroup } from '../controls/action-button'
 import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
 
 export function CeilingPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const editingHole = useEditor((s) => s.editingHole)
   const setEditingHole = useEditor((s) => s.setEditingHole)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId
-    ? (nodes[selectedId as AnyNode['id']] as CeilingNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as CeilingNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<CeilingNode>) => {
@@ -34,7 +34,14 @@ export function CeilingPanel() {
 
   const handleMaterialChange = useCallback(
     (material: MaterialSchema) => {
-      handleUpdate({ material })
+      handleUpdate({ material, materialPreset: undefined })
+    },
+    [handleUpdate],
+  )
+
+  const handleMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      handleUpdate({ materialPreset, material: undefined })
     },
     [handleUpdate],
   )
@@ -77,7 +84,13 @@ export function CeilingPanel() {
       [cx - holeSize, cz + holeSize],
     ]
     const currentHoles = node?.holes || []
-    handleUpdate({ holes: [...currentHoles, newHole] })
+    const currentMetadata = currentHoles.map(
+      (_, index) => node?.holeMetadata?.[index] ?? { source: 'manual' as const },
+    )
+    handleUpdate({
+      holes: [...currentHoles, newHole],
+      holeMetadata: [...currentMetadata, { source: 'manual' }],
+    })
     setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
   }, [node, selectedId, handleUpdate, setEditingHole])
 
@@ -93,16 +106,28 @@ export function CeilingPanel() {
     (index: number) => {
       if (!selectedId) return
       const currentHoles = node?.holes || []
+      if (node?.holeMetadata?.[index]?.source === 'stair') return
       const newHoles = currentHoles.filter((_, i) => i !== index)
-      handleUpdate({ holes: newHoles })
+      const currentMetadata = currentHoles.map(
+        (_, metadataIndex) => node?.holeMetadata?.[metadataIndex] ?? { source: 'manual' as const },
+      )
+      const newMetadata = currentMetadata.filter((_, i) => i !== index)
+      handleUpdate({ holes: newHoles, holeMetadata: newMetadata })
       if (editingHole?.nodeId === selectedId && editingHole?.holeIndex === index) {
         setEditingHole(null)
       }
     },
-    [selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
+    [selectedId, node?.holes, node?.holeMetadata, handleUpdate, editingHole, setEditingHole],
   )
 
-  if (!node || node.type !== 'ceiling' || selectedIds.length !== 1) return null
+  const handleMove = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-pick')
+    setMovingNode(node)
+    setSelection({ selectedIds: [] })
+  }, [node, setMovingNode, setSelection])
+
+  if (!(node && node.type === 'ceiling' && selectedId)) return null
 
   const calculateArea = (polygon: Array<[number, number]>): number => {
     if (polygon.length < 3) return 0
@@ -110,8 +135,11 @@ export function CeilingPanel() {
     const n = polygon.length
     for (let i = 0; i < n; i++) {
       const j = (i + 1) % n
-      area += polygon[i]?.[0] * polygon[j]?.[1]
-      area -= polygon[j]?.[0] * polygon[i]?.[1]
+      const current = polygon[i]
+      const next = polygon[j]
+      if (!(current && next)) continue
+      area += current[0] * next[1]
+      area -= next[0] * current[1]
     }
     return Math.abs(area) / 2
   }
@@ -158,6 +186,8 @@ export function CeilingPanel() {
               const holeArea = calculateArea(hole)
               const isEditing =
                 editingHole?.nodeId === selectedId && editingHole?.holeIndex === index
+              const source = node.holeMetadata?.[index]?.source ?? 'manual'
+              const isAutoHole = source === 'stair'
               return (
                 <div
                   className={`flex items-center justify-between rounded-lg border p-2 transition-colors ${
@@ -174,7 +204,8 @@ export function CeilingPanel() {
                       Hole {index + 1} {isEditing && '(Editing)'}
                     </p>
                     <p className="text-[10px] text-muted-foreground">
-                      {holeArea.toFixed(2)} m² · {hole.length} pts
+                      {holeArea.toFixed(2)} m² · {hole.length} pts ·{' '}
+                      {isAutoHole ? 'Auto stair cutout' : 'Manual'}
                     </p>
                   </div>
                   <div className="flex items-center gap-1">
@@ -184,6 +215,10 @@ export function CeilingPanel() {
                         label="Done"
                         onClick={() => setEditingHole(null)}
                       />
+                    ) : isAutoHole ? (
+                      <div className="rounded-md bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
+                        Auto
+                      </div>
                     ) : (
                       <>
                         <button
@@ -223,8 +258,17 @@ export function CeilingPanel() {
       </PanelSection>
 
       <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+        <MaterialPicker
+          nodeType="ceiling"
+          onChange={handleMaterialChange}
+          onSelectMaterialPreset={handleMaterialPresetChange}
+          selectedMaterialPreset={node.materialPreset}
+          value={node.material}
+        />
       </PanelSection>
+      <ActionGroup>
+        <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
+      </ActionGroup>
     </PanelWrapper>
   )
 }