@pascal-app/editor 0.8.0 → 0.9.1

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

@@ -9,24 +9,28 @@ interface MetricControlProps {
   label: React.ReactNode
   value: number
   onChange: (value: number) => void
+  onCommit?: (value: number) => void
   min?: number
   max?: number
   precision?: number
   step?: number
   className?: string
   unit?: string
+  restoreOnCommit?: boolean
 }
 
 export function MetricControl({
   label,
   value,
   onChange,
+  onCommit,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
   precision = 2,
   step = 1,
   className,
   unit = '',
+  restoreOnCommit = true,
 }: MetricControlProps) {
   const viewerUnit = useViewer((state) => state.unit)
   const isImperial = viewerUnit === 'imperial' && unit === 'm'
@@ -53,6 +57,17 @@ export function MetricControl({
     [min, max],
   )
 
+  const applyCommittedValue = useCallback(
+    (nextValue: number) => {
+      if (onCommit) {
+        onCommit(nextValue)
+      } else {
+        onChange(nextValue)
+      }
+    },
+    [onChange, onCommit],
+  )
+
   useEffect(() => {
     if (!isEditing) {
       setInputValue(displayValue.toFixed(precision))
@@ -77,13 +92,13 @@ export function MetricControl({
       const finalValue = Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
 
       if (Math.abs(finalValue - valueRef.current) > 1e-6) {
-        onChange(finalValue)
+        applyCommittedValue(finalValue)
       }
     }
 
     container.addEventListener('wheel', handleWheel, { passive: false })
     return () => container.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, onChange, precision, multiplier])
+  }, [isEditing, step, clamp, applyCommittedValue, precision, multiplier])
 
   useEffect(() => {
     if (!isHovered || isEditing) return
@@ -104,14 +119,14 @@ export function MetricControl({
           Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
 
         if (Math.abs(finalValue - valueRef.current) > 1e-6) {
-          onChange(finalValue)
+          applyCommittedValue(finalValue)
         }
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isHovered, isEditing, step, clamp, onChange, precision, multiplier])
+  }, [isHovered, isEditing, step, clamp, applyCommittedValue, precision, multiplier])
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
@@ -148,7 +163,14 @@ export function MetricControl({
         document.removeEventListener('pointermove', handlePointerMove)
         document.removeEventListener('pointerup', handlePointerUp)
 
-        if (Math.abs(finalValue - startValueRef.current) > 1e-6) {
+        const changed = Math.abs(finalValue - startValueRef.current) > 1e-6
+        if (onCommit) {
+          if (changed && restoreOnCommit) {
+            onChange(startValueRef.current)
+          }
+          useScene.temporal.getState().resume()
+          onCommit(finalValue)
+        } else if (changed) {
           onChange(startValueRef.current)
           useScene.temporal.getState().resume()
           onChange(finalValue)
@@ -160,7 +182,7 @@ export function MetricControl({
       document.addEventListener('pointermove', handlePointerMove)
       document.addEventListener('pointerup', handlePointerUp)
     },
-    [isEditing, value, onChange, clamp, precision, step, multiplier],
+    [isEditing, value, onChange, onCommit, restoreOnCommit, clamp, precision, step, multiplier],
   )
 
   const handleValueClick = useCallback(() => {
@@ -177,10 +199,10 @@ export function MetricControl({
     if (Number.isNaN(numValue)) {
       setInputValue((value * multiplier).toFixed(precision))
     } else {
-      onChange(clamp(numValue / multiplier))
+      applyCommittedValue(clamp(numValue / multiplier))
     }
     setIsEditing(false)
-  }, [inputValue, onChange, clamp, multiplier, value, precision])
+  }, [inputValue, applyCommittedValue, clamp, multiplier, value, precision])
 
   const handleInputBlur = useCallback(() => {
     submitValue()
@@ -196,16 +218,16 @@ export function MetricControl({
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
         const newV = clamp(value + step / multiplier)
-        onChange(newV)
+        applyCommittedValue(newV)
         setInputValue((newV * multiplier).toFixed(precision))
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
         const newV = clamp(value - step / multiplier)
-        onChange(newV)
+        applyCommittedValue(newV)
         setInputValue((newV * multiplier).toFixed(precision))
       }
     },
-    [submitValue, value, multiplier, precision, step, clamp, onChange],
+    [submitValue, value, multiplier, precision, step, clamp, applyCommittedValue],
   )
 
   return (

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

@@ -26,7 +26,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Copy, GripVertical, MoreVertical, Plus, Trash2 } from 'lucide-react'
+import { ClipboardPaste, Copy, GripVertical, MoreVertical, Plus, Trash2 } from 'lucide-react'
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
@@ -34,13 +34,21 @@ import {
   useEffect,
   useRef,
   useState,
+  useSyncExternalStore,
 } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '../../lib/level-duplication'
+import { getDefaultLevelName, getLevelDisplayName } from '../../lib/level-name'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
+import {
+  getEditorClipboardSnapshot,
+  pasteEditorClipboardToLevel,
+  subscribeEditorClipboard,
+} from '../../lib/scene-clipboard'
+import { sfxEmitter } from '../../lib/sfx-bus'
 import { cn } from '../../lib/utils'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
 import {
@@ -53,10 +61,6 @@ import {
 } from './primitives/dialog'
 import { Popover, PopoverContent, PopoverTrigger } from './primitives/popover'
 
-function getLevelDisplayLabel(level: LevelNode) {
-  return level.name || `Level ${level.level}`
-}
-
 // ── Inline rename input for a level row ─────────────────────────────────────
 
 function LevelInlineRename({
@@ -69,7 +73,7 @@ function LevelInlineRename({
   onStopEditing: () => void
 }) {
   const updateNode = useScene((s) => s.updateNode)
-  const defaultName = `Level ${level.level}`
+  const defaultName = getDefaultLevelName(level.level)
   const [value, setValue] = useState(level.name || '')
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -126,6 +130,7 @@ function LevelRow({
   dragHandleRef,
   onSelect,
   onDuplicate,
+  onPaste,
   onRequestDelete,
 }: {
   level: LevelNode
@@ -135,6 +140,7 @@ function LevelRow({
   dragHandleRef?: (element: HTMLButtonElement | null) => void
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
+  onPaste?: () => void
   onRequestDelete: () => void
 }) {
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
@@ -160,7 +166,7 @@ function LevelRow({
         >
           <button
             {...dragHandleProps}
-            aria-label={`Reorder ${getLevelDisplayLabel(level)}`}
+            aria-label={`Reorder ${getLevelDisplayName(level)}`}
             className={cn(
               'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
               isDragging && 'cursor-grabbing opacity-100',
@@ -183,10 +189,10 @@ function LevelRow({
               e.stopPropagation()
               setIsEditing(true)
             }}
-            title={getLevelDisplayLabel(level)}
+            title={getLevelDisplayName(level)}
             type="button"
           >
-            <span className="truncate">{getLevelDisplayLabel(level)}</span>
+            <span className="truncate">{getLevelDisplayName(level)}</span>
           </button>
 
           {/* Vertical three-dot menu — inside the pill */}
@@ -223,6 +229,19 @@ function LevelRow({
                 <Copy className="h-3 w-3" />
                 Duplicate with options...
               </button>
+              {onPaste && (
+                <button
+                  className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onPaste()
+                  }}
+                  type="button"
+                >
+                  <ClipboardPaste className="h-3 w-3" />
+                  Paste copied selection
+                </button>
+              )}
               <button
                 className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-red-400"
                 onClick={(e) => {
@@ -256,12 +275,14 @@ function SortableLevelRow({
   isSelected,
   onSelect,
   onDuplicate,
+  onPaste,
   onRequestDelete,
 }: {
   level: LevelNode
   isSelected: boolean
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
+  onPaste?: () => void
   onRequestDelete: () => void
 }) {
   const {
@@ -291,6 +312,7 @@ function SortableLevelRow({
         isSelected={isSelected}
         level={level}
         onDuplicate={onDuplicate}
+        onPaste={onPaste}
         onRequestDelete={onRequestDelete}
         onSelect={onSelect}
       />
@@ -310,6 +332,11 @@ 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 },
@@ -424,6 +451,13 @@ export function FloatingLevelSelector() {
     [createNodes, levels, resolvedBuildingId, setSelection, updateNodes],
   )
 
+  const handlePasteToLevel = useCallback((level: LevelNode) => {
+    const result = pasteEditorClipboardToLevel(level.id)
+    if (result?.pastedIds.length) {
+      sfxEmitter.emit('sfx:item-place')
+    }
+  }, [])
+
   const handleDragStart = useCallback((event: DragStartEvent) => {
     setDraggingLevelId(String(event.active.id))
   }, [])
@@ -523,6 +557,9 @@ export function FloatingLevelSelector() {
                         isSelected={isSelected}
                         level={level}
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
+                        onPaste={
+                          clipboardSnapshot ? () => handlePasteToLevel(level) : undefined
+                        }
                         onRequestDelete={() => setDeletingLevel(level)}
                         onSelect={() =>
                           setSelection(
@@ -559,7 +596,7 @@ export function FloatingLevelSelector() {
             <DialogTitle>Delete level</DialogTitle>
             <DialogDescription>
               Are you sure you want to delete{' '}
-              <strong>{deletingLevel ? getLevelDisplayLabel(deletingLevel) : ''}</strong>? All
+              <strong>{deletingLevel ? getLevelDisplayName(deletingLevel) : ''}</strong>? All
               walls, floors, and objects on this level will be permanently removed.
             </DialogDescription>
           </DialogHeader>

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

@@ -1,13 +1,12 @@
 'use client'
 
+import { nodeRegistry } from '@pascal-app/core'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import useEditor from '../../../store/use-editor'
 import { BuildingHelper } from './building-helper'
-import { CeilingHelper } from './ceiling-helper'
 import { ItemHelper } from './item-helper'
+import { RegisteredToolHelper } from './registered-tool-helper'
 import { RoofHelper } from './roof-helper'
-import { SlabHelper } from './slab-helper'
-import { WallHelper } from './wall-helper'
 
 export function HelperManager() {
   const mode = useEditor((s) => s.mode)
@@ -27,19 +26,19 @@ export function HelperManager() {
     return null
   }
 
-  // Show appropriate helper based on current tool
-  switch (tool) {
-    case 'wall':
-      return <WallHelper />
-    case 'item':
-      return <ItemHelper />
-    case 'slab':
-      return <SlabHelper />
-    case 'ceiling':
-      return <CeilingHelper />
-    case 'roof':
-      return <RoofHelper />
-    default:
-      return null
+  // Registry-first: kinds with `def.toolHints` render through the generic
+  // `RegisteredToolHelper`. Today that covers ceiling / door / fence /
+  // item / shelf / slab / spawn / wall / window.
+  if (tool) {
+    const def = nodeRegistry.get(tool)
+    if (def?.toolHints && def.toolHints.length > 0) {
+      return <RegisteredToolHelper hints={def.toolHints} />
+    }
   }
+
+  // Legacy fallback — only `roof` remains because it hasn't migrated to
+  // `def.tool` / `def.toolHints` yet (no Stage D port). When roof
+  // migrates, this switch deletes outright.
+  if (tool === 'roof') return <RoofHelper />
+  return null
 }

package/src/components/ui/helpers/registered-tool-helper.tsx

@@ -0,0 +1,25 @@
+import type { ToolHint } from '@pascal-app/core'
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+/**
+ * Generic helper panel rendered from `def.toolHints` data. Matches the
+ * visual styling of the hand-written `<WallHelper>` / `<ItemHelper>` /
+ * etc. so registry-driven kinds get a consistent look without each kind
+ * writing its own component.
+ *
+ * Drops the need for per-kind helper files entirely — kinds declare
+ * their hints as static data in their `NodeDefinition`.
+ */
+export function RegisteredToolHelper({ hints }: { hints: ToolHint[] }) {
+  if (hints.length === 0) return null
+  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">
+      {hints.map((hint) => (
+        <div className="flex items-center gap-2 text-sm" key={`${hint.key}:${hint.label}`}>
+          <ShortcutToken value={hint.key} />
+          <span className="text-muted-foreground">{hint.label}</span>
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -628,6 +628,7 @@ export const CATALOG_ITEMS: AssetInput[] = [
     rotation: [0, 0, 0],
     scale: [1, 1, 1],
     attachTo: 'ceiling',
+    recessed: true,
     interactive: {
       controls: [
         { kind: 'toggle' },

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

@@ -9,6 +9,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from './../../../components/ui/primitives/tooltip'
+import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
 import { CATALOG_ITEMS } from './catalog-items'
@@ -94,10 +95,12 @@ export function ItemCatalog({
             )}
             key={index}
             onClick={() => {
+              triggerSFX('sfx:menu-click')
               setSelectedItem(item)
               setTool('item')
               setMode('build')
             }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"
           >
             <div className="relative aspect-square w-full overflow-hidden rounded-lg">

package/src/components/ui/level-duplicate-dialog.tsx

@@ -3,6 +3,7 @@
 import type { LevelNode } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
 import type { LevelDuplicatePreset } from '../../lib/level-duplication'
+import { getLevelDisplayName } from '../../lib/level-name'
 import { cn } from '../../lib/utils'
 import {
   Dialog,
@@ -42,7 +43,7 @@ const DUPLICATE_PRESETS: Array<{
 
 function getLevelLabel(level: LevelNode | null) {
   if (!level) return 'this level'
-  return level.name || `Level ${level.level}`
+  return getLevelDisplayName(level)
 }
 
 export function LevelDuplicateDialog({

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

@@ -13,6 +13,7 @@ const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
   slab: { icon: '/icons/floor.png', label: 'Slab' },
   ceiling: { icon: '/icons/ceiling.png', label: 'Ceiling' },
   column: { icon: '/icons/column.png', label: 'Column' },
+  elevator: { icon: '/icons/elevator.png', label: 'Elevator' },
   fence: { icon: '/icons/fence.png', label: 'Fence' },
   roof: { icon: '/icons/roof.png', label: 'Roof' },
   'roof-segment': { icon: '/icons/roof.png', label: 'Roof segment' },

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

@@ -5,8 +5,11 @@ import {
   type AnyNodeId,
   type BuildingNode,
   type CeilingNode,
+  type ChimneyNode,
   type ColumnNode,
   type DoorNode,
+  type DormerNode,
+  type ElevatorNode,
   type FenceNode,
   type ItemNode,
   type RoofNode,
@@ -23,31 +26,22 @@ import { useCallback, useEffect, useState } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
-import { CeilingPanel } from './ceiling-panel'
-import { ColumnPanel } from './column-panel'
-import { DoorPanel } from './door-panel'
-import { FencePanel } from './fence-panel'
-import { ItemPanel } from './item-panel'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
 import { getNodeDisplay } from './node-display'
 import { PaintPanel } from './paint-panel'
+import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
-import { RoofPanel } from './roof-panel'
-import { RoofSegmentPanel } from './roof-segment-panel'
-import { SlabPanel } from './slab-panel'
-import { SpawnPanel } from './spawn-panel'
-import { StairPanel } from './stair-panel'
-import { StairSegmentPanel } from './stair-segment-panel'
-import { WallPanel } from './wall-panel'
-import { WindowPanel } from './window-panel'
 
 type MovableNode =
   | ItemNode
   | WindowNode
   | DoorNode
+  | ElevatorNode
   | CeilingNode
+  | ChimneyNode
   | ColumnNode
+  | DormerNode
   | SlabNode
   | WallNode
   | FenceNode
@@ -61,8 +55,11 @@ const MOVABLE_TYPES = new Set<string>([
   'item',
   'window',
   'door',
+  'elevator',
   'ceiling',
+  'chimney',
   'column',
+  'dormer',
   'slab',
   'wall',
   'fence',
@@ -77,38 +74,17 @@ function isMovableNode(node: AnyNode | null): node is MovableNode {
   return !!node && MOVABLE_TYPES.has(node.type)
 }
 
-function panelForType(type: string | null) {
+function panelForType(type: string | null, footer?: React.ReactNode) {
   if (!type) return null
-  switch (type) {
-    case 'item':
-      return <ItemPanel />
-    case 'roof':
-      return <RoofPanel />
-    case 'roof-segment':
-      return <RoofSegmentPanel />
-    case 'stair':
-      return <StairPanel />
-    case 'stair-segment':
-      return <StairSegmentPanel />
-    case 'slab':
-      return <SlabPanel />
-    case 'spawn':
-      return <SpawnPanel />
-    case 'ceiling':
-      return <CeilingPanel />
-    case 'column':
-      return <ColumnPanel />
-    case 'wall':
-      return <WallPanel />
-    case 'fence':
-      return <FencePanel />
-    case 'door':
-      return <DoorPanel />
-    case 'window':
-      return <WindowPanel />
-    default:
-      return null
-  }
+  // Every kind now renders through `<ParametricInspector>`, which either
+  // composes auto-derived editors from `parametrics.groups` or lazy-
+  // loads the kind-owned panel via `parametrics.customPanel`. The
+  // hardcoded switch is gone — all per-kind panel layout lives in
+  // `nodes/src/<kind>/panel.tsx`. The `type` arg is preserved for
+  // future cases where we might want a non-registry fallback (e.g.
+  // reference scale, paint mode); leave the function shape intact.
+  void type
+  return <ParametricInspector footer={footer} />
 }
 
 function MobilePanelLayer({
@@ -192,9 +168,11 @@ function MobilePanelLayer({
   )
 }
 
-export function PanelManager() {
+export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.ReactNode }) {
   const isMobile = useIsMobile()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedZoneId = useViewer((s) => s.selection.zoneId)
+  const setSelection = useViewer((s) => s.setSelection)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
   const isPaintPanelOpen = useEditor((s) => s.isPaintPanelOpen)
   const mode = useEditor((s) => s.mode)
@@ -239,6 +217,16 @@ export function PanelManager() {
     return <PaintPanel />
   }
 
-  // Show appropriate panel based on selected node type
-  return panelForType(selectedNodeType)
+  if (selectedZoneId && selectedIds.length === 0) {
+    return (
+      <ParametricInspector
+        footer={inspectorFooter}
+        key={selectedZoneId}
+        nodeId={selectedZoneId as AnyNodeId}
+        onClose={() => setSelection({ zoneId: null })}
+      />
+    )
+  }
+
+  return panelForType(selectedNodeType, inspectorFooter)
 }