@pascal-app/editor 1.0.0 → 1.0.3

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

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNodeId } from '@pascal-app/core'
-import { DEFAULT_LEVEL_HEIGHT, LevelNode, useScene } from '@pascal-app/core'
+import { DEFAULT_LEVEL_HEIGHT, LevelNode, type UnitNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
   AppWindow,
@@ -15,6 +15,7 @@ import {
   EyeOff,
   FileJson,
   Grid3X3,
+  Group,
   Hexagon,
   Layers,
   Map,
@@ -39,6 +40,7 @@ import {
 import { useEffect } from 'react'
 import { getHistoryCommandState, runRedo, runUndo } from '../../../lib/history'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
+import { createUnitInBuilding, enterUnitFocus, leaveUnitFocus } from '../../../lib/units'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import type { StructureTool } from '../../../store/use-editor'
 import useEditor from '../../../store/use-editor'
@@ -56,13 +58,25 @@ export function EditorCommands() {
   const setPreviewMode = useEditor((s) => s.setPreviewMode)
 
   const exportScene = useViewer((s) => s.exportScene)
+  // Focusable units are listed one command each; the key changes only when a
+  // unit is added, removed or renamed.
+  const unitListKey = useScene((s) =>
+    Object.values(s.nodes)
+      .filter((n): n is UnitNode => n.type === 'unit')
+      .map((n) => `${n.id}:${n.name ?? ''}`)
+      .join('|'),
+  )
 
   // Re-register when exportScene availability changes (it's a conditional action)
   useEffect(() => {
+    void unitListKey
     const run = (fn: () => void) => {
       fn()
       setOpen(false)
     }
+    const focusableUnits = Object.values(useScene.getState().nodes).filter(
+      (n): n is UnitNode => n.type === 'unit',
+    )
 
     const activateTool = (tool: StructureTool) => {
       run(() => {
@@ -249,6 +263,44 @@ export function EditorCommands() {
           }),
       },
 
+      // ── Units ────────────────────────────────────────────────────────────
+      {
+        id: 'editor.unit.new',
+        label: 'New unit',
+        group: 'Units',
+        icon: <Group className="h-4 w-4" />,
+        keywords: ['unit', 'apartment', 'hotel', 'room', 'add', 'create', 'new'],
+        when: () => Object.values(useScene.getState().nodes).some((n) => n.type === 'building'),
+        execute: () =>
+          run(() => {
+            const { nodes } = useScene.getState()
+            const selectedBuildingId = useViewer.getState().selection.buildingId
+            const building =
+              (selectedBuildingId ? nodes[selectedBuildingId] : undefined) ??
+              Object.values(nodes).find((n) => n.type === 'building')
+            if (building?.type !== 'building') return
+            createUnitInBuilding(building.id)
+          }),
+      },
+      ...focusableUnits.map((unit) => ({
+        id: `editor.unit.focus.${unit.id}`,
+        label: `Focus unit: ${unit.name || 'Unit'}`,
+        group: 'Units',
+        icon: <Group className="h-4 w-4" />,
+        keywords: ['unit', 'focus', 'apartment', unit.name || 'Unit'],
+        when: () => useViewer.getState().focusedUnitId !== unit.id,
+        execute: () => run(() => enterUnitFocus(unit.id)),
+      })),
+      {
+        id: 'editor.unit.exit-focus',
+        label: 'Exit unit focus',
+        group: 'Units',
+        icon: <Group className="h-4 w-4" />,
+        keywords: ['unit', 'focus', 'exit', 'leave', 'apartment'],
+        when: () => !!useViewer.getState().focusedUnitId,
+        execute: () => run(() => leaveUnitFocus()),
+      },
+
       // ── Viewer Controls ──────────────────────────────────────────────────
       {
         id: 'editor.viewer.wall-mode',
@@ -431,6 +483,7 @@ export function EditorCommands() {
     isPreviewMode,
     setPreviewMode,
     exportScene,
+    unitListKey,
   ])
 
   return null

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

@@ -1,20 +1,9 @@
 'use client'
 
-import {
-  type AnyNodeId,
-  generateSceneMaterialId,
-  type SceneMaterialId,
-  toSceneMaterialRef,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { type SceneMaterialId } from '@pascal-app/core'
 import { Eraser, Plus, RotateCcw } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import {
-  buildResetSurfaceMaterialUpdates,
-  resolvePaintTargetFromSelection,
-} from './../../../lib/material-paint'
-import useEditor from './../../../store/use-editor'
+import { useState } from 'react'
+import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
 import { Button } from '../primitives/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPicker } from './material-picker'
@@ -33,57 +22,9 @@ export type MaterialPaintPanelProps = {
 }
 
 export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
-  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
-  const activePaintTarget = useEditor((state) => state.activePaintTarget)
-  const armMaterialPaint = useEditor((state) => state.armMaterialPaint)
-  const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
-  const paintEraser = useEditor((state) => state.paintEraser)
-  const setPaintEraser = useEditor((state) => state.setPaintEraser)
-  // Id of a just-created scene material whose inline editor should open on mount.
+  const { activePaintMaterial, paintEraser, setPaintEraser, canResetSelection, resetSelection, materialCount, selectMaterial, createCustomMaterial: createMaterial } = useMaterialPaintPanelModel()
   const [autoEditMaterialId, setAutoEditMaterialId] = useState<SceneMaterialId | null>(null)
-  const selectedIds = useViewer((state) => state.selection.selectedIds)
-  const nodes = useScene((state) => state.nodes)
-  const materialCount = useScene((state) => Object.keys(state.materials).length)
-  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))
-  }
-
-  // Create a blank custom scene material, select it as the brush (`scene:` ref so
-  // edits propagate), and open its inline editor. Available from any category.
-  const createCustomMaterial = () => {
-    const id = generateSceneMaterialId()
-    const count = Object.keys(useScene.getState().materials).length
-    useScene.getState().addSceneMaterial({
-      id,
-      name: `Material ${count + 1}`,
-      material: {
-        preset: 'custom',
-        properties: {
-          color: '#ffffff',
-          roughness: 0.5,
-          metalness: 0,
-          opacity: 1,
-          transparent: false,
-          side: 'front',
-        },
-      },
-    })
-    armMaterialPaint({ materialPreset: toSceneMaterialRef(id), sourceTarget: activePaintTarget })
-    setAutoEditMaterialId(id)
-  }
+  const createCustomMaterial = () => setAutoEditMaterialId(createMaterial())
 
   return (
     <div className="flex h-full min-h-0 w-full flex-col">
@@ -117,9 +58,7 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
       <div className="min-h-0 flex-1" data-guide-target="paint-material">
         <MaterialPicker
           onCreateMaterialRequest={onCreateMaterialRequest}
-          onSelectMaterialPreset={(materialPreset) => {
-            armMaterialPaint({ materialPreset, sourceTarget: activePaintTarget })
-          }}
+          onSelectMaterialPreset={selectMaterial}
           selectedMaterialPreset={activePaintMaterial?.materialPreset}
         />
       </div>

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

@@ -1,23 +1,11 @@
 'use client'
 
-import {
-  getCatalogMaterialById,
-  getDynamicLibraryMaterials,
-  getLibraryMaterialIdFromRef,
-  getLibraryMaterialsVersion,
-  getMaterialsForCategory,
-  MATERIAL_CATEGORIES,
-  type MaterialCatalogItem,
-  type MaterialSource,
-  type MaterialTarget,
-  subscribeLibraryMaterials,
-  toLibraryMaterialRef,
-} from '@pascal-app/core'
+import { type MaterialTarget, toLibraryMaterialRef } from '@pascal-app/core'
 import { Plus } from 'lucide-react'
-import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { useMaterialCatalogModel, type MaterialSourceFilter } from '../../../lib/material-catalog-model'
 import { triggerSFX } from '../../../lib/sfx-bus'
 
-export type MaterialSourceFilter = MaterialSource
+export type { MaterialSourceFilter } from '../../../lib/material-catalog-model'
 
 export type MaterialPickerProps = {
   selectedMaterialPreset?: string
@@ -28,23 +16,10 @@ export type MaterialPickerProps = {
   onCreateMaterialRequest?: () => void
 }
 
-// No 'All': the browse surfaces (Items / Rooms / Build) dropped it and default
-// to the Pascal library — the combined list buried the curated set.
-const SOURCE_FILTERS: { id: MaterialSourceFilter; label: string }[] = [
-  { id: 'pascal', label: 'Pascal' },
-  { id: 'mine', label: 'Mine' },
-  { id: 'workspace', label: 'Workspace' },
-  { id: 'community', label: 'Community' },
-]
-
-function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
+function getCategoryLabel(category: string) {
   return category.charAt(0).toUpperCase() + category.slice(1)
 }
 
-function filterBySource(items: MaterialCatalogItem[], filter: MaterialSourceFilter) {
-  return items.filter((item) => (item.source ?? 'pascal') === filter)
-}
-
 /**
  * Catalog material picker: a fixed row of category tabs and a source filter row
  * over a scrollable grid of swatches. Scene-material creation lives in the
@@ -57,40 +32,7 @@ export function MaterialPicker({
   disabled = false,
   onCreateMaterialRequest,
 }: MaterialPickerProps) {
-  const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
-    MATERIAL_CATEGORIES[0],
-  )
-  const [sourceFilter, setSourceFilter] = useState<MaterialSourceFilter>('pascal')
-  // Version counter so host registrations/unregistrations re-render the picker.
-  const libraryVersion = useSyncExternalStore(
-    subscribeLibraryMaterials,
-    getLibraryMaterialsVersion,
-    getLibraryMaterialsVersion,
-  )
-  const hasWorkspaceMaterials = useMemo(
-    () => getDynamicLibraryMaterials().some((item) => item.source === 'workspace'),
-    [libraryVersion],
-  )
-  const visibleSourceFilters = SOURCE_FILTERS.filter(
-    (filter) => filter.id !== 'workspace' || hasWorkspaceMaterials,
-  )
-  const availableCategories = MATERIAL_CATEGORIES.filter(
-    (category) => getMaterialsForCategory(category).length > 0,
-  )
-  const catalogItems = filterBySource(getMaterialsForCategory(selectedCategory), sourceFilter)
-
-  // Keep the visible category in sync with the externally-selected catalog
-  // material (a `scene:` ref matches no catalog entry, so the tab stays put).
-  useEffect(() => {
-    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? undefined
-    const entry = getCatalogMaterialById(catalogId)
-    if (entry?.category) setSelectedCategory(entry.category)
-  }, [selectedMaterialPreset])
-
-  const handleCatalogSelect = (materialId: string) => {
-    if (disabled) return
-    onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
-  }
+  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled)
 
   return (
     <div
@@ -108,10 +50,6 @@ export function MaterialPicker({
             key={category}
             onClick={() => {
               setSelectedCategory(category)
-              // Auto-select the first material in the category so the brush is
-              // immediately ready (and the swatch shows as selected).
-              const first = filterBySource(getMaterialsForCategory(category), sourceFilter)[0]
-              if (first) handleCatalogSelect(first.id)
             }}
             type="button"
           >

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

@@ -2,11 +2,7 @@
 
 import { useScene } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  lingoUnitSpec,
-  measurementHint,
-  parseMeasurement,
-} from '../../../lib/measurement-parser'
+import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
 import { cn } from '../../../lib/utils'
 
@@ -31,8 +27,8 @@ export function MetricControl({
   onCommit,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
-  precision = 2,
-  step = 1,
+  precision: storedPrecision = 2,
+  step: storedStep = 1,
   className,
   unit = '',
   restoreOnCommit = true,
@@ -40,9 +36,12 @@ export function MetricControl({
   const {
     isImperial,
     displayUnit,
+    parseUnit,
+    precision,
+    step,
     toDisplay: toDisplayValue,
     toStored: toStoredValue,
-  } = useLinearDisplay(unit, precision)
+  } = useLinearDisplay(unit, storedPrecision, storedStep)
 
   const clamp = useCallback(
     (val: number) => {
@@ -110,7 +109,14 @@ export function MetricControl({
 
     container.addEventListener('wheel', handleWheel, { passive: false })
     return () => container.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, applyCommittedValue, toStoredValue, roundStoredValueForDisplayPrecision])
+  }, [
+    isEditing,
+    step,
+    clamp,
+    applyCommittedValue,
+    toStoredValue,
+    roundStoredValueForDisplayPrecision,
+  ])
 
   useEffect(() => {
     if (!isHovered || isEditing) return
@@ -226,7 +232,7 @@ export function MetricControl({
     const spec = lingoUnitSpec(unit)
     let stored = spec
       ? parseMeasurement(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
         })
       : null
@@ -244,6 +250,7 @@ export function MetricControl({
     inputValue,
     unit,
     isImperial,
+    parseUnit,
     applyCommittedValue,
     clamp,
     toStoredValue,
@@ -256,9 +263,9 @@ export function MetricControl({
   const hint =
     isEditing && spec
       ? measurementHint(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
-          displayUnit: isImperial ? 'ft' : spec.unitId,
+          displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
         })
@@ -287,7 +294,16 @@ export function MetricControl({
         setInputValue(toDisplayValue(newV).toFixed(precision))
       }
     },
-    [submitValue, value, toDisplayValue, precision, step, clamp, applyCommittedValue, toStoredValue],
+    [
+      submitValue,
+      value,
+      toDisplayValue,
+      precision,
+      step,
+      clamp,
+      applyCommittedValue,
+      toStoredValue,
+    ],
   )
 
   return (

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

@@ -2,11 +2,7 @@
 
 import { useScene } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  lingoUnitSpec,
-  measurementHint,
-  parseMeasurement,
-} from '../../../lib/measurement-parser'
+import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
 import { cn } from '../../../lib/utils'
 
@@ -15,6 +11,8 @@ interface SliderControlProps {
   value: number
   onChange: (value: number) => void
   onCommit?: (value: number) => void
+  onCancel?: () => void
+  previewWhileTyping?: boolean
   min?: number
   max?: number
   precision?: number
@@ -58,21 +56,20 @@ export function SliderControl({
   value,
   onChange,
   onCommit,
+  onCancel,
+  previewWhileTyping = false,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
-  precision = 0,
-  step = 1,
+  precision: storedPrecision = 0,
+  step: storedStep = 1,
   className,
   unit = '',
   restoreOnCommit = true,
   mixed = false,
 }: SliderControlProps) {
-  // Display/storage conversion so the value honors the metric/imperial toggle.
-  // `value`, `onChange`, `onCommit`, `min`/`max`/`clamp` are always in the
-  // stored unit (meters for `unit === 'm'`); the step, drag deltas, text field
-  // and rendered number are in the DISPLAY unit (feet when imperial). For
-  // metric and non-length units these conversions are the identity.
-  const { isImperial, displayUnit, toDisplay, toStored } = useLinearDisplay(unit, precision)
+  // Values and bounds stay in meters; gestures and input use the displayed unit.
+  const { isImperial, displayUnit, parseUnit, precision, step, toDisplay, toStored } =
+    useLinearDisplay(unit, storedPrecision, storedStep)
 
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
@@ -94,6 +91,9 @@ export function SliderControl({
     anchorValue: number
     stepMultiplier: number
   } | null>(null)
+  const cancelRef = useRef(onCancel)
+  cancelRef.current = onCancel
+  const editingRef = useRef(false)
   const labelRef = useRef<HTMLDivElement>(null)
   const shown = dragDisplay ?? value
   const valueRef = useRef(shown)
@@ -106,7 +106,9 @@ export function SliderControl({
     (storedValue: number, displayDelta: number, displayStep: number) =>
       clamp(
         toStored(
-          Number.parseFloat((toDisplay(storedValue) + displayDelta).toFixed(stepPrecision(displayStep))),
+          Number.parseFloat(
+            (toDisplay(storedValue) + displayDelta).toFixed(stepPrecision(displayStep)),
+          ),
         ),
       ),
     [clamp, toDisplay, toStored],
@@ -222,41 +224,82 @@ export function SliderControl({
     [onChange, onCommit, restoreOnCommit],
   )
 
+  const cancelEdit = useCallback(() => {
+    const drag = dragRef.current
+    dragRef.current = null
+    editingRef.current = false
+    if (drag) {
+      if (!onCancel) onChange(drag.originValue)
+      useScene.temporal.getState().resume()
+    }
+    onCancel?.()
+    setIsDragging(false)
+    setIsEditing(false)
+    setDragDisplay(null)
+  }, [onCancel, onChange])
+
+  useEffect(
+    () => () => {
+      if (dragRef.current) useScene.temporal.getState().resume()
+      if (dragRef.current || editingRef.current) cancelRef.current?.()
+    },
+    [],
+  )
+
+  useEffect(() => {
+    if (!isDragging) return
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') cancelEdit()
+    }
+    window.addEventListener('keydown', escape)
+    return () => window.removeEventListener('keydown', escape)
+  }, [isDragging, cancelEdit])
+
   const handleValueClick = useCallback(() => {
+    editingRef.current = true
     setIsEditing(true)
     setInputValue(toDisplay(value).toFixed(precision))
   }, [value, precision, toDisplay])
 
+  const parseInputValue = useCallback(
+    (text: string) => {
+      const spec = lingoUnitSpec(unit)
+      const parsed = spec
+        ? parseMeasurement(text, spec, {
+            bareUnit: parseUnit ?? spec.unitId,
+            system: isImperial ? 'us' : 'metric',
+          })
+        : null
+      const bare = Number(text)
+      const stored = parsed ?? (text.trim() && Number.isFinite(bare) ? toStored(bare) : null)
+      return stored === null
+        ? null
+        : clamp(toStored(Number.parseFloat(toDisplay(stored).toFixed(precision))))
+    },
+    [unit, parseUnit, isImperial, toStored, clamp, toDisplay, precision],
+  )
+
   const submitValue = useCallback(() => {
-    const spec = lingoUnitSpec(unit)
-    let stored = spec
-      ? parseMeasurement(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
-          system: isImperial ? 'us' : 'metric',
-        })
-      : null
-    if (stored === null) {
-      // Fallback: a bare number typed in the DISPLAY unit → convert to stored.
-      const numValue = Number.parseFloat(inputValue)
-      stored = Number.isFinite(numValue) ? toStored(numValue) : null
-    }
-    if (stored === null) {
+    if (!editingRef.current) return
+    editingRef.current = false
+    const nextValue = parseInputValue(inputValue)
+    if (nextValue === null) {
+      onCancel?.()
       setInputValue(toDisplay(value).toFixed(precision))
     } else {
-      const nextValue = clamp(toStored(Number.parseFloat(toDisplay(stored).toFixed(precision))))
       onChange(nextValue)
       onCommit?.(nextValue)
     }
     setIsEditing(false)
-  }, [inputValue, unit, isImperial, onChange, onCommit, clamp, precision, value, toDisplay, toStored])
+  }, [inputValue, parseInputValue, onCancel, onChange, onCommit, toDisplay, value, precision])
 
   const spec = lingoUnitSpec(unit)
   const hint =
     isEditing && spec
       ? measurementHint(inputValue, spec, {
-          bareUnit: isImperial ? 'ft' : spec.unitId,
+          bareUnit: parseUnit ?? spec.unitId,
           system: isImperial ? 'us' : 'metric',
-          displayUnit: isImperial ? 'ft' : spec.unitId,
+          displayUnit: parseUnit ?? spec.unitId,
           precision,
           clamp,
         })
@@ -267,8 +310,7 @@ export function SliderControl({
       if (e.key === 'Enter') {
         submitValue()
       } else if (e.key === 'Escape') {
-        setInputValue(toDisplay(value).toFixed(precision))
-        setIsEditing(false)
+        cancelEdit()
       } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault()
         const direction = e.key === 'ArrowUp' ? 1 : -1
@@ -278,7 +320,7 @@ export function SliderControl({
         setInputValue(toDisplay(newV).toFixed(precision))
       }
     },
-    [submitValue, value, precision, step, applyDisplayDelta, onChange, toDisplay],
+    [submitValue, cancelEdit, value, precision, step, applyDisplayDelta, onChange, toDisplay],
   )
 
   const displayValue = toDisplay(shown)
@@ -302,6 +344,10 @@ export function SliderControl({
         onPointerDown={handleLabelPointerDown}
         onPointerMove={handleLabelPointerMove}
         onPointerUp={handleLabelPointerUp}
+        onPointerCancel={cancelEdit}
+        onLostPointerCapture={() => {
+          if (dragRef.current) cancelEdit()
+        }}
         ref={labelRef}
       >
         {/* Grip dots — 2×3 grid */}
@@ -333,7 +379,13 @@ export function SliderControl({
               autoFocus
               className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
               onBlur={submitValue}
-              onChange={(e) => setInputValue(e.target.value)}
+              onChange={(e) => {
+                setInputValue(e.target.value)
+                if (previewWhileTyping) {
+                  const next = parseInputValue(e.target.value)
+                  if (next !== null) onChange(next)
+                }
+              }}
               onKeyDown={handleInputKeyDown}
               type="text"
               value={inputValue}