) => {
+ if (!selectedId || !node) return
+ updateNode(selectedId as AnyNode['id'], updates)
+
+ // Mark parent wall as dirty if item is attached to wall
+ if (node.asset.attachTo === 'wall' && node.parentId) {
+ requestAnimationFrame(() => {
+ useScene.getState().dirtyNodes.add(node.parentId as AnyNode['id'])
+ })
+ }
+ },
+ [selectedId, node, updateNode],
+ )
+
+ const handleClose = useCallback(() => {
+ setSelection({ selectedIds: [] })
+ }, [setSelection])
+
+ const handleMove = useCallback(() => {
+ if (node) {
+ setMovingNode(node)
+ // Deselect so the panel closes
+ setSelection({ selectedIds: [] })
+ }
+ }, [node, setMovingNode, setSelection])
+
+ const handleDelete = useCallback(() => {
+ if (!selectedId) return
+ deleteNode(selectedId as AnyNode['id'])
+ setSelection({ selectedIds: [] })
+ }, [selectedId, deleteNode, setSelection])
+
+ // Only show if exactly one item is selected
+ if (!node || node.type !== 'item' || selectedIds.length !== 1) return null
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ {node.name || node.asset.name}
+
+
+
+
+
+ {/* Content */}
+
+
+ {/* Position */}
+
+
+
+ {
+ handleUpdate({ position: [value, node.position[1], node.position[2]] })
+ }}
+ precision={2}
+ />
+ {
+ handleUpdate({ position: [node.position[0], value, node.position[2]] })
+ }}
+ precision={2}
+ />
+ {
+ handleUpdate({ position: [node.position[0], node.position[1], value] })
+ }}
+ precision={2}
+ />
+
+
+
+ {/* Rotation */}
+
+
+
+ {
+ const radians = (degrees * Math.PI) / 180
+ handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
+ }}
+ precision={0}
+ className="flex-1"
+ />
+ °
+
+
+
+
+
+
+
+ {/* Dimensions (read-only) */}
+
+
+
+ {node.asset.dimensions[0]}m × {node.asset.dimensions[1]}m × {node.asset.dimensions[2]}m
+
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
{([0, 1, 2] as const).map((i) => (
-
-
- {
- const value = Number.parseFloat(e.target.value)
- if (!Number.isNaN(value)) {
- const pos = [...node.position] as [number, number, number]
- pos[i] = value
- handleUpdate({ position: pos })
- }
- }}
- step="0.1"
- type="number"
- value={Math.round(node.position[i] * 100) / 100}
- />
-
+
{
+ const pos = [...node.position] as [number, number, number]
+ pos[i] = value
+ handleUpdate({ position: pos })
+ }}
+ precision={2}
+ />
))}
- {
- const degrees = Number.parseFloat(e.target.value)
- if (!Number.isNaN(degrees)) {
- const radians = (degrees * Math.PI) / 180
- handleUpdate({
- rotation: [node.rotation[0], radians, node.rotation[2]],
- })
- }
- }}
- step="1"
- type="number"
+ {
+ const radians = (degrees * Math.PI) / 180
+ handleUpdate({
+ rotation: [node.rotation[0], radians, node.rotation[2]],
+ })
+ }}
+ precision={0}
+ className="min-w-0 flex-1"
/>
°
diff --git a/apps/editor/components/ui/panels/slab-panel.tsx b/apps/editor/components/ui/panels/slab-panel.tsx
index cd0c1f7e..1c126b77 100644
--- a/apps/editor/components/ui/panels/slab-panel.tsx
+++ b/apps/editor/components/ui/panels/slab-panel.tsx
@@ -5,6 +5,7 @@ import { useViewer } from '@pascal-app/viewer'
import { X } from 'lucide-react'
import Image from 'next/image'
import { useCallback } from 'react'
+import { NumberInput } from '@/components/ui/primitives/number-input'
export function SlabPanel() {
const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -76,17 +77,14 @@ export function SlabPanel() {
Elevation
- {
- const value = Number.parseFloat(e.target.value)
- if (!Number.isNaN(value)) {
- handleUpdate({ elevation: value })
- }
- }}
- step="0.05"
- type="number"
+ {
+ handleUpdate({ elevation: value })
+ }}
+ precision={3}
+ className="flex-1"
/>
m
diff --git a/apps/editor/components/ui/primitives/number-input.tsx b/apps/editor/components/ui/primitives/number-input.tsx
new file mode 100644
index 00000000..eb6659ef
--- /dev/null
+++ b/apps/editor/components/ui/primitives/number-input.tsx
@@ -0,0 +1,164 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useCallback, useRef, useState } from 'react'
+
+interface NumberInputProps {
+ label: string
+ value: number
+ onChange: (value: number) => void
+ min?: number
+ max?: number
+ precision?: number
+ className?: string
+}
+
+export function NumberInput({
+ label,
+ value,
+ onChange,
+ min,
+ max,
+ precision = 2,
+ className = '',
+}: NumberInputProps) {
+ const [isEditing, setIsEditing] = useState(false)
+ const [isDragging, setIsDragging] = useState(false)
+ const [inputValue, setInputValue] = useState(value.toFixed(precision))
+ const startXRef = useRef(0)
+ const startValueRef = useRef(0)
+ const labelRef = useRef(null)
+
+ const clamp = useCallback(
+ (val: number) => {
+ if (min !== undefined && val < min) return min
+ if (max !== undefined && val > max) return max
+ return val
+ },
+ [min, max],
+ )
+
+ const handleLabelMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ if (isEditing) return
+ e.preventDefault()
+ setIsDragging(true)
+ startXRef.current = e.clientX
+ startValueRef.current = value
+
+ // Pause history tracking during drag
+ useScene.temporal.getState().pause()
+
+ let finalValue = value
+
+ const handleMouseMove = (moveEvent: MouseEvent) => {
+ const deltaX = moveEvent.clientX - startXRef.current
+
+ // Determine step size based on modifier keys
+ let step = 0.1 // Default
+ if (moveEvent.shiftKey) {
+ step = 1.0 // Coarse
+ } else if (moveEvent.altKey) {
+ step = 0.01 // Fine
+ }
+
+ const deltaValue = deltaX * step
+ const newValue = clamp(startValueRef.current + deltaValue)
+ const newFinalValue = Number.parseFloat(newValue.toFixed(precision))
+
+ // Only call onChange if value actually changed (avoid extra processing on tiny moves)
+ if (newFinalValue !== finalValue) {
+ finalValue = newFinalValue
+ onChange(finalValue)
+ }
+ }
+
+ const handleMouseUp = () => {
+ setIsDragging(false)
+ document.removeEventListener('mousemove', handleMouseMove)
+ document.removeEventListener('mouseup', handleMouseUp)
+
+ // Reset to initial value while still paused (no history entry)
+ // Then resume and apply final value (creates single history entry)
+ if (finalValue !== startValueRef.current) {
+ onChange(startValueRef.current)
+ useScene.temporal.getState().resume()
+ onChange(finalValue)
+ } else {
+ useScene.temporal.getState().resume()
+ }
+ }
+
+ document.addEventListener('mousemove', handleMouseMove)
+ document.addEventListener('mouseup', handleMouseUp)
+ },
+ [isEditing, value, onChange, clamp, precision],
+ )
+
+ const handleValueClick = useCallback(() => {
+ setIsEditing(true)
+ setInputValue(value.toFixed(precision))
+ }, [value, precision])
+
+ const handleInputChange = useCallback((e: React.ChangeEvent) => {
+ setInputValue(e.target.value)
+ }, [])
+
+ const handleInputBlur = useCallback(() => {
+ const numValue = Number.parseFloat(inputValue)
+ if (!Number.isNaN(numValue)) {
+ onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+ }
+ setIsEditing(false)
+ }, [inputValue, onChange, clamp, precision])
+
+ const handleInputKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ const numValue = Number.parseFloat(inputValue)
+ if (!Number.isNaN(numValue)) {
+ onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+ }
+ setIsEditing(false)
+ } else if (e.key === 'Escape') {
+ setInputValue(value.toFixed(precision))
+ setIsEditing(false)
+ }
+ },
+ [inputValue, onChange, value, clamp, precision],
+ )
+
+ return (
+
+
+
+ {isEditing ? (
+
+ ) : (
+
+ {value.toFixed(precision)}
+
+ )}
+
+
{edge.dist.toFixed(2)}m