@pascal-app/editor 0.7.0 → 0.9.1

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

@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { Dialog, DialogContent, DialogTitle } from './../../../components/ui/primitives/dialog'
+import { getLevelDisplayName } from '../../../lib/level-name'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import { usePaletteViewRegistry } from '../../../store/use-palette-view-registry'
 
@@ -27,15 +28,13 @@ interface CommandPaletteStore {
   setInputValue: (value: string) => void
   navigateTo: (page: string) => void
   goBack: () => void
-  cameraScope: { nodeId: string; label: string } | null
-  setCameraScope: (scope: { nodeId: string; label: string } | null) => void
 }
 
 export const useCommandPalette = create<CommandPaletteStore>((set, get) => ({
   open: false,
   setOpen: (open) => {
     set({ open })
-    if (!open) set({ pages: [], inputValue: '', cameraScope: null, mode: 'command' })
+    if (!open) set({ pages: [], inputValue: '', mode: 'command' })
   },
   mode: 'command',
   setMode: (mode) => set({ mode }),
@@ -44,12 +43,8 @@ export const useCommandPalette = create<CommandPaletteStore>((set, get) => ({
   setInputValue: (value) => set({ inputValue: value }),
   navigateTo: (page) => set((s) => ({ pages: [...s.pages, page], inputValue: '' })),
   goBack: () => {
-    const { pages } = get()
-    if (pages[pages.length - 1] === 'camera-scope') set({ cameraScope: null })
     set((s) => ({ pages: s.pages.slice(0, -1), inputValue: '' }))
   },
-  cameraScope: null,
-  setCameraScope: (scope) => set({ cameraScope: scope }),
 }))
 
 // ---------------------------------------------------------------------------
@@ -157,8 +152,6 @@ const PAGE_LABEL: Record<string, string> = {
   'level-mode': 'Level Mode',
   'rename-level': 'Rename Level',
   'goto-level': 'Go to Level',
-  'camera-view': 'Camera Snapshot',
-  'camera-scope': '',
 }
 
 // ---------------------------------------------------------------------------
@@ -196,19 +189,8 @@ function EmptyActionItem({ action }: { action: CommandPaletteEmptyAction }) {
 // Main component
 // ---------------------------------------------------------------------------
 export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEmptyAction }) {
-  const {
-    open,
-    setOpen,
-    mode,
-    setMode,
-    pages,
-    inputValue,
-    setInputValue,
-    navigateTo,
-    goBack,
-    cameraScope,
-    setCameraScope,
-  } = useCommandPalette()
+  const { open, setOpen, mode, setMode, pages, inputValue, setInputValue, navigateTo, goBack } =
+    useCommandPalette()
 
   const [meta, setMeta] = useState('⌘')
   const [isFullscreen, setIsFullscreen] = useState(false)
@@ -233,11 +215,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     ),
   )
 
-  const cameraScopeNode = useScene((s) =>
-    cameraScope ? s.nodes[cameraScope.nodeId as AnyNodeId] : null,
-  )
-  const hasScopeSnapshot = !!(cameraScopeNode as any)?.camera
-
   // Platform detection
   useEffect(() => {
     setMeta(/Mac|iPhone|iPad|iPod/.test(navigator.platform) ? '⌘' : 'Ctrl')
@@ -279,7 +256,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     solo: 'Solo',
   }
 
-  // Camera snapshot helpers (used by sub-pages registered via EditorCommands)
   const confirmRename = () => {
     if (!(activeLevelId && inputValue.trim())) return
     run(() => {
@@ -287,29 +263,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     })
   }
 
-  const takeSnapshot = () => {
-    if (!cameraScope) return
-    import('@pascal-app/core').then(({ emitter }) => {
-      run(() =>
-        emitter.emit('camera-controls:capture', { nodeId: cameraScope.nodeId as AnyNodeId }),
-      )
-    })
-  }
-
-  const viewSnapshot = () => {
-    if (!(cameraScope && hasScopeSnapshot)) return
-    import('@pascal-app/core').then(({ emitter }) => {
-      run(() => emitter.emit('camera-controls:view', { nodeId: cameraScope.nodeId as AnyNodeId }))
-    })
-  }
-
-  const clearSnapshot = () => {
-    if (!(cameraScope && hasScopeSnapshot)) return
-    run(() => {
-      useScene.getState().updateNode(cameraScope.nodeId as AnyNodeId, { camera: undefined } as any)
-    })
-  }
-
   // ---------------------------------------------------------------------------
   // Group registered actions by group (preserving insertion order)
   // ---------------------------------------------------------------------------
@@ -363,9 +316,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                   onClick={goBack}
                   type="button"
                 >
-                  {page === 'camera-scope'
-                    ? (cameraScope?.label ?? 'Snapshot')
-                    : (PAGE_LABEL[page] ?? views.get(page)?.label ?? page)}
+                  {PAGE_LABEL[page] ?? views.get(page)?.label ?? page}
                 </button>
               )}
               <Command.Input
@@ -454,7 +405,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                     <OptionItem
                       isActive={level.id === activeLevelId}
                       key={level.id}
-                      label={level.name ?? `Level ${level.level}`}
+                      label={getLevelDisplayName(level)}
                       onSelect={() =>
                         run(() => useViewer.getState().setSelection({ levelId: level.id }))
                       }
@@ -500,207 +451,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                   </Command.Item>
                 </Command.Group>
               )}
-
-              {/* ── Camera Snapshot: scope picker ─────────────────────────── */}
-              {page === 'camera-view' && (
-                <Command.Group heading="Camera Snapshot — Select Scope">
-                  <OptionItem
-                    icon={
-                      <svg
-                        className="h-4 w-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path d="M3 3h18v18H3z" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M3 9h18M9 21V9" strokeLinecap="round" strokeLinejoin="round" />
-                      </svg>
-                    }
-                    label="Site"
-                    onSelect={() => {
-                      const { rootNodeIds } = useScene.getState()
-                      const siteId = rootNodeIds[0]
-                      if (siteId) {
-                        setCameraScope({ nodeId: siteId, label: 'Site' })
-                        navigateTo('camera-scope')
-                      }
-                    }}
-                  />
-                  <OptionItem
-                    icon={
-                      <svg
-                        className="h-4 w-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <polyline
-                          points="9 22 9 12 15 12 15 22"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    }
-                    label="Building"
-                    onSelect={() => {
-                      const building = Object.values(useScene.getState().nodes).find(
-                        (n) => n.type === 'building',
-                      )
-                      if (building) {
-                        setCameraScope({ nodeId: building.id, label: 'Building' })
-                        navigateTo('camera-scope')
-                      }
-                    }}
-                  />
-                  <OptionItem
-                    disabled={!activeLevelId}
-                    icon={
-                      <svg
-                        className="h-4 w-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2L2 7l10 5 10-5-10-5z"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <path
-                          d="M2 17l10 5 10-5M2 12l10 5 10-5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    }
-                    label="Level"
-                    onSelect={() => {
-                      if (activeLevelId) {
-                        setCameraScope({ nodeId: activeLevelId, label: 'Level' })
-                        navigateTo('camera-scope')
-                      }
-                    }}
-                  />
-                  <OptionItem
-                    disabled={!useViewer.getState().selection.selectedIds.length}
-                    icon={
-                      <svg
-                        className="h-4 w-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path d="M5 3l14 9-14 9V3z" strokeLinecap="round" strokeLinejoin="round" />
-                      </svg>
-                    }
-                    label="Selection"
-                    onSelect={() => {
-                      const firstId = useViewer.getState().selection.selectedIds[0]
-                      if (firstId) {
-                        setCameraScope({ nodeId: firstId, label: 'Selection' })
-                        navigateTo('camera-scope')
-                      }
-                    }}
-                  />
-                </Command.Group>
-              )}
-
-              {/* ── Camera Snapshot: actions for selected scope ───────────── */}
-              {page === 'camera-scope' && cameraScope && (
-                <Command.Group heading={`${cameraScope.label} Snapshot`}>
-                  <OptionItem
-                    icon={
-                      <svg
-                        className="h-4 w-4"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <circle
-                          cx="12"
-                          cy="13"
-                          r="4"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    }
-                    label={hasScopeSnapshot ? 'Update Snapshot' : 'Take Snapshot'}
-                    onSelect={takeSnapshot}
-                  />
-                  {hasScopeSnapshot && (
-                    <OptionItem
-                      icon={
-                        <svg
-                          className="h-4 w-4"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth={2}
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            r="3"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                      }
-                      label="View Snapshot"
-                      onSelect={viewSnapshot}
-                    />
-                  )}
-                  {hasScopeSnapshot && (
-                    <OptionItem
-                      icon={
-                        <svg
-                          className="h-4 w-4"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth={2}
-                          viewBox="0 0 24 24"
-                        >
-                          <polyline
-                            points="3 6 5 6 21 6"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M19 6l-1 14H6L5 6"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path d="M10 11v6M14 11v6" strokeLinecap="round" strokeLinejoin="round" />
-                          <path d="M9 6V4h6v2" strokeLinecap="round" strokeLinejoin="round" />
-                        </svg>
-                      }
-                      label="Clear Snapshot"
-                      onSelect={clearSnapshot}
-                    />
-                  )}
-                </Command.Group>
-              )}
             </Command.List>
 
             {/* Footer hint */}

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

@@ -0,0 +1,83 @@
+'use client'
+
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Eraser, RotateCcw } from 'lucide-react'
+import { useEffect } from 'react'
+import {
+  buildResetSurfaceMaterialUpdates,
+  resolvePaintTargetFromSelection,
+} from './../../../lib/material-paint'
+import useEditor from './../../../store/use-editor'
+import { Button } from '../primitives/button'
+import { MaterialPicker } from './material-picker'
+
+/**
+ * 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 owns the paint-target/material wiring so the host only needs
+ * to mount it; it fills its container's width.
+ */
+export function MaterialPaintPanel() {
+  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
+  const activePaintTarget = useEditor((state) => state.activePaintTarget)
+  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+  const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
+  const paintEraser = useEditor((state) => state.paintEraser)
+  const setPaintEraser = useEditor((state) => state.setPaintEraser)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const nodes = useScene((state) => state.nodes)
+  const selectedId = selectedIds.length === 1 ? (selectedIds[0] ?? null) : null
+  const selectedNode = selectedId ? nodes[selectedId as AnyNodeId] : null
+  const canResetSelection =
+    selectedNode != null && resolvePaintTargetFromSelection({ nodes, selectedId }) != null
+
+  useEffect(() => {
+    const selectedPaintTarget = resolvePaintTargetFromSelection({ nodes, selectedId })
+    if (selectedPaintTarget) {
+      setActivePaintTarget(selectedPaintTarget)
+    }
+  }, [nodes, selectedId, setActivePaintTarget])
+
+  const resetSelection = () => {
+    if (!selectedNode) return
+    useScene.getState().updateNodes(buildResetSurfaceMaterialUpdates(nodes, selectedNode))
+  }
+
+  return (
+    <div className="w-full space-y-2">
+      <div className="flex items-center gap-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>
+      <MaterialPicker
+        onChange={(material) => {
+          setActivePaintMaterial({ material, sourceTarget: activePaintTarget })
+        }}
+        onSelectMaterialPreset={(materialPreset) => {
+          setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
+        }}
+        selectedMaterialPreset={activePaintMaterial?.materialPreset}
+        value={activePaintMaterial?.material}
+      />
+    </div>
+  )
+}

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

@@ -5,8 +5,9 @@ import {
   getLibraryMaterialIdFromRef,
   getMaterialsForCategory,
   MATERIAL_CATEGORIES,
-  toLibraryMaterialRef,
   type MaterialSchema,
+  type MaterialTarget,
+  toLibraryMaterialRef,
 } from '@pascal-app/core'
 import { useEffect, useRef, useState } from 'react'
 import useEditor from '../../../store/use-editor'
@@ -17,6 +18,13 @@ type MaterialPickerProps = {
   onChange?: (material: MaterialSchema) => void
   onSelectMaterialPreset?: (materialPreset: string) => void
   disabled?: boolean
+  nodeType?: MaterialTarget
+  hideSideControl?: boolean
+}
+
+function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
+  if (category === 'roof') return 'Roofing'
+  return category.charAt(0).toUpperCase() + category.slice(1)
 }
 
 export function MaterialPicker({
@@ -31,7 +39,6 @@ export function MaterialPicker({
   const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
     MATERIAL_CATEGORIES[0],
   )
-  const catalogScrollRef = useRef<HTMLDivElement>(null)
   const categoryScrollRef = useRef<HTMLDivElement>(null)
   const catalogItems =
     selectedCategory === 'other'
@@ -48,8 +55,7 @@ export function MaterialPicker({
       return
     }
 
-    const catalogId =
-      getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
+    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
     const selectedCatalogEntry = getCatalogMaterialById(catalogId)
     if (selectedCatalogEntry?.category) {
       setSelectedCategory(selectedCatalogEntry.category)
@@ -66,27 +72,6 @@ export function MaterialPicker({
     onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
   }
 
-  useEffect(() => {
-    const container = catalogScrollRef.current
-    if (!container) return
-
-    const handleWheel = (event: WheelEvent) => {
-      const deltaX = event.deltaX
-      const deltaY = event.deltaY
-      const nextScrollLeft = container.scrollLeft + deltaX + deltaY
-
-      if (nextScrollLeft === container.scrollLeft) return
-
-      event.preventDefault()
-      container.scrollLeft = nextScrollLeft
-    }
-
-    container.addEventListener('wheel', handleWheel, { passive: false })
-    return () => {
-      container.removeEventListener('wheel', handleWheel)
-    }
-  }, [catalogItems.length, onChange, showCustom])
-
   useEffect(() => {
     const container = categoryScrollRef.current
     if (!container) return
@@ -154,20 +139,18 @@ export function MaterialPicker({
                   }}
                   type="button"
                 >
-                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                  {getCategoryLabel(category)}
                 </button>
               ))}
             </div>
           </div>
           <div
-            className="w-full max-w-full overflow-x-auto overflow-y-hidden"
-            ref={catalogScrollRef}
-            style={{ msOverflowStyle: 'none', scrollbarWidth: 'none' }}
+            className="grid gap-1.5 pb-1"
+            style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
           >
-            <div className="flex min-w-max gap-1.5 pb-1">
-              {catalogItems.map((item) => (
+            {catalogItems.map((item) => (
                 <button
-                  className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-lg border transition-all ${
+                  className={`relative aspect-square w-full 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'
@@ -177,7 +160,7 @@ export function MaterialPicker({
                   title={item.label}
                   type="button"
                 >
-                  <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-inset ring-white/12" />
+                  <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-white/12 ring-inset" />
                   {item.previewThumbnailUrl ? (
                     <img
                       alt={item.label}
@@ -193,7 +176,7 @@ export function MaterialPicker({
               ))}
               {selectedCategory === 'other' && onChange ? (
                 <button
-                  className={`flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border text-[10px] font-medium transition-all ${
+                  className={`flex aspect-square w-full items-center justify-center rounded-lg border font-medium text-[10px] transition-all ${
                     showCustom
                       ? 'border-blue-500 ring-2 ring-blue-500/30'
                       : 'border-gray-300 hover:border-gray-400'
@@ -205,7 +188,6 @@ export function MaterialPicker({
                   Custom
                 </button>
               ) : null}
-            </div>
           </div>
         </div>
       )}

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 (