@pascal-app/editor 1.0.1 → 1.0.4

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

@@ -1,30 +1,22 @@
 'use client'
 
-import {
-  type AnyNodeId,
-  generateSceneMaterialId,
-  type SceneMaterialId,
-  toSceneMaterialRef,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-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 { type SceneMaterialId } from '@pascal-app/core'
+import { Eraser, PaintBucket, Pentagon, Pipette, Plus, Square } from 'lucide-react'
+import { useState } from 'react'
+import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
+import { type PaintMode, usePaintRegionMode } from '../../../lib/paint-region-mode'
+import useEditor, { armMaterialPaint } from '../../../store/use-editor'
 import { Button } from '../primitives/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPicker } from './material-picker'
 import { SceneMaterialList } from './scene-material-list'
+import { SegmentedControl } from './segmented-control'
 
 /**
  * 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 fills its container's height and lays out as three bands: a
- * fixed control/category header, a single scrolling catalog grid, and a fixed
+ * fixed mode header, a single scrolling catalog grid, and a fixed
  * scene-material footer (always visible, with a `+` to add a custom material).
  */
 export type MaterialPaintPanelProps = {
@@ -32,94 +24,110 @@ export type MaterialPaintPanelProps = {
   onCreateMaterialRequest?: () => void
 }
 
-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 [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
+const PAINT_MODE_OPTIONS: { value: PaintMode; label: string; icon: typeof PaintBucket }[] = [
+  { value: 'surface', label: 'Whole surface: a click paints the surface under it', icon: PaintBucket },
+  {
+    value: 'rectangle',
+    label: 'Rectangle: press anywhere on a wall, floor or ceiling, drag to the opposite corner',
+    icon: Square,
+  },
+  {
+    value: 'polygon',
+    label: 'Polygon: click the points of a shape on a floor or ceiling',
+    icon: Pentagon,
+  },
+  {
+    value: 'erase',
+    label: 'Erase: click a painted part to remove it, or a painted surface to reset it',
+    icon: Eraser,
+  },
+  {
+    value: 'pick',
+    label: 'Pick: click a surface to paint with its material (or hold Alt / Option)',
+    icon: Pipette,
+  },
+]
 
-  useEffect(() => {
-    const selectedPaintTarget = resolvePaintTargetFromSelection({ nodes, selectedId })
-    if (selectedPaintTarget) {
-      setActivePaintTarget(selectedPaintTarget)
-    }
-  }, [nodes, selectedId, setActivePaintTarget])
-
-  const resetSelection = () => {
-    if (!selectedNode) return
-    useScene.getState().updateNodes(buildResetSurfaceMaterialUpdates(nodes, selectedNode))
+/**
+ * Paint the whole surface, draw part of a wall, floor or ceiling first, erase, or
+ * pick a material off a surface. Erase
+ * is the eraser the paint path already knows (a click writes "no finish"), so a
+ * painted region goes and a whole-surface paint returns to its default. The row
+ * shows a choice only while paint mode is on; any pick (erase included) turns it
+ * on, so nothing here needs a colour first.
+ */
+function PaintModeControl() {
+  const painting = useEditor((s) => s.mode === 'material-paint')
+  const mode = usePaintRegionMode((s) => s.mode)
+  const select = (next: PaintMode) => {
+    if (painting) usePaintRegionMode.getState().setMode(next)
+    else armMaterialPaint(undefined, next)
   }
+  return (
+    <div
+      className="shrink-0 space-y-1.5 pb-2"
+      data-paint-mode={painting ? mode : 'off'}
+      // A clicked option must not keep focus: the next shortcut (V) would light
+      // its focus ring and it would read as still chosen after paint mode ends.
+      onPointerUp={(event) => (event.target as HTMLElement).closest('button')?.blur()}
+    >
+      <div className="px-0.5 font-medium text-muted-foreground text-xs">
+        {painting && mode === 'erase' ? 'Erase' : painting && mode === 'pick' ? 'Pick material' : 'Paint'}
+      </div>
+      <SegmentedControl
+        mixed={!painting}
+        onChange={select}
+        options={PAINT_MODE_OPTIONS.map(({ value, label, icon: Icon }) => ({
+          value,
+          label: (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span aria-label={label} className="flex items-center justify-center">
+                  <Icon className="h-3.5 w-3.5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+          ),
+        }))}
+        value={mode}
+      />
+    </div>
+  )
+}
 
-  // 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)
-  }
+export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
+  const painting = useEditor((s) => s.mode === 'material-paint')
+  const erasing = usePaintRegionMode((s) => s.mode) === 'erase' && painting
+  const {
+    activePaintMaterial,
+    materialCount,
+    selectMaterial,
+    createCustomMaterial: createMaterial,
+  } = useMaterialPaintPanelModel()
+  const [autoEditMaterialId, setAutoEditMaterialId] = useState<SceneMaterialId | null>(null)
+  const createCustomMaterial = () => setAutoEditMaterialId(createMaterial())
 
   return (
     <div className="flex h-full min-h-0 w-full flex-col">
-      {/* Fixed: eraser / reset. */}
-      <div className="flex shrink-0 items-center gap-2 pb-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>
+      {/* Fixed: whole surface, part of a surface, or erase. */}
+      <PaintModeControl />
 
+      {/* Erasing paints nothing: no swatches to pick from, just what a click does. */}
+      {erasing ? (
+        <p className="px-0.5 py-1 text-muted-foreground text-xs" data-paint-erase-note>
+          Click a painted part of a wall, floor or ceiling to remove it, or a painted surface to reset it to
+          its default.
+        </p>
+      ) : (
+        <>
       {/* Scrolls: category tabs (fixed inside) + catalog grid (the scroll). */}
       {/* A stable hook for host-app onboarding to point at. Static, and read
           only from outside: nothing here depends on it. */}
       <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>
@@ -155,6 +163,8 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
           )}
         </div>
       </div>
+        </>
+      )}
     </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
@@ -26,25 +14,14 @@ export type MaterialPickerProps = {
   nodeType?: MaterialTarget
   hideSideControl?: boolean
   onCreateMaterialRequest?: () => void
+  /** Whether switching category tabs selects the tab's first material (paint mode does). */
+  selectOnCategoryChange?: boolean
 }
 
-// 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
@@ -56,41 +33,9 @@ export function MaterialPicker({
   onSelectMaterialPreset,
   disabled = false,
   onCreateMaterialRequest,
+  selectOnCategoryChange = true,
 }: 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, selectOnCategoryChange)
 
   return (
     <div
@@ -108,10 +53,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/scene-material-list.tsx

@@ -10,21 +10,13 @@ import {
 } from '@pascal-app/core'
 import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
+import { sceneMaterialUsageCounts } from '../../../lib/scene-material-refs'
 import useEditor from '../../../store/use-editor'
 import { Button } from '../primitives/button'
 import { Input } from '../primitives/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPropertiesEditor } from './material-properties-editor'
 
-type SlotRecord = Record<string, string | undefined>
-
-function getSlotRecord(node: unknown): SlotRecord | null {
-  if (!node || typeof node !== 'object' || !('slots' in node)) return null
-  const slots = (node as { slots?: unknown }).slots
-  if (!slots || typeof slots !== 'object' || Array.isArray(slots)) return null
-  return slots as SlotRecord
-}
-
 export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId | null }) {
   const materials = useScene((state) => state.materials)
   const nodes = useScene((state) => state.nodes)
@@ -40,29 +32,9 @@ export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId
     [materials],
   )
 
-  const usageCounts = useMemo(() => {
-    const counts = new Map<SceneMaterialId, number>()
-    const refToId = new Map<string, SceneMaterialId>()
-
-    for (const [id] of materialEntries) {
-      counts.set(id, 0)
-      refToId.set(toSceneMaterialRef(id), id)
-    }
-
-    for (const node of Object.values(nodes)) {
-      const slots = getSlotRecord(node)
-      if (!slots) continue
-
-      for (const value of Object.values(slots)) {
-        if (typeof value !== 'string') continue
-        const materialId = refToId.get(value)
-        if (!materialId) continue
-        counts.set(materialId, (counts.get(materialId) ?? 0) + 1)
-      }
-    }
-
-    return counts
-  }, [materialEntries, nodes])
+  // Every place a scene material can be used — slots and the room, wall and
+  // footprint finishes — counted by the same walker saving and pasting use.
+  const usageCounts = useMemo(() => sceneMaterialUsageCounts(nodes), [nodes])
 
   return (
     <div className="space-y-2">

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

@@ -0,0 +1,65 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+
+interface SelectControlProps<T extends string> {
+  label: string
+  value: T
+  onChange: (value: T) => void
+  options: { label: string; value: T }[]
+  className?: string
+  mixed?: boolean
+}
+
+export function SelectControl<T extends string>({
+  label,
+  value,
+  onChange,
+  options,
+  className,
+  mixed = false,
+}: SelectControlProps<T>) {
+  const current = mixed ? 'Mixed' : options.find((option) => option.value === value)?.label
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          aria-label={label}
+          className={cn(
+            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e] data-[state=open]:bg-[#3e3e3e]',
+            className,
+          )}
+          type="button"
+        >
+          <span className="select-none text-muted-foreground transition-colors group-hover:text-foreground">
+            {label}
+          </span>
+          <span className="flex min-w-0 items-center gap-1.5 text-foreground">
+            <span className="truncate">{current}</span>
+            <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-(--radix-dropdown-menu-trigger-width)">
+        <DropdownMenuRadioGroup
+          onValueChange={(next) => onChange(next as T)}
+          value={mixed ? '' : value}
+        >
+          {options.map((option) => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -11,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
@@ -54,6 +56,8 @@ export function SliderControl({
   value,
   onChange,
   onCommit,
+  onCancel,
+  previewWhileTyping = false,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
   precision: storedPrecision = 0,
@@ -87,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)
@@ -217,45 +224,74 @@ 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: parseUnit ?? 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,
-    parseUnit,
-    onChange,
-    onCommit,
-    clamp,
-    precision,
-    value,
-    toDisplay,
-    toStored,
-  ])
+  }, [inputValue, parseInputValue, onCancel, onChange, onCommit, toDisplay, value, precision])
 
   const spec = lingoUnitSpec(unit)
   const hint =
@@ -274,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
@@ -285,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)
@@ -309,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 */}
@@ -340,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}