@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -1,39 +1,62 @@
 'use client'
 
 import { useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  lingoUnitSpec,
+  measurementHint,
+  parseMeasurement,
+} from '../../../lib/measurement-parser'
+import { useLinearDisplay } from '../../../lib/use-linear-display'
 import { cn } from '../../../lib/utils'
 
 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'
-  const multiplier = isImperial ? 3.280_84 : 1
-  const displayUnit = isImperial ? 'ft' : unit
+  const {
+    isImperial,
+    displayUnit,
+    toDisplay: toDisplayValue,
+    toStored: toStoredValue,
+  } = useLinearDisplay(unit, precision)
 
-  const displayValue = value * multiplier
+  const clamp = useCallback(
+    (val: number) => {
+      return Math.min(Math.max(val, min), max)
+    },
+    [min, max],
+  )
+  const roundStoredValueForDisplayPrecision = useCallback(
+    (storedValue: number) =>
+      clamp(toStoredValue(Number.parseFloat(toDisplayValue(storedValue).toFixed(precision)))),
+    [clamp, precision, toDisplayValue, toStoredValue],
+  )
+
+  const displayValue = toDisplayValue(value)
 
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
@@ -46,11 +69,15 @@ export function MetricControl({
   const valueRef = useRef(value)
   valueRef.current = value
 
-  const clamp = useCallback(
-    (val: number) => {
-      return Math.min(Math.max(val, min), max)
+  const applyCommittedValue = useCallback(
+    (nextValue: number) => {
+      if (onCommit) {
+        onCommit(nextValue)
+      } else {
+        onChange(nextValue)
+      }
     },
-    [min, max],
+    [onChange, onCommit],
   )
 
   useEffect(() => {
@@ -69,21 +96,21 @@ export function MetricControl({
       e.preventDefault()
 
       const direction = e.deltaY < 0 ? 1 : -1
-      let scrollStep = step / multiplier
-      if (e.shiftKey) scrollStep = (step * 10) / multiplier
-      else if (e.altKey) scrollStep = (step * 0.1) / multiplier
+      let scrollStep = toStoredValue(step)
+      if (e.shiftKey) scrollStep = toStoredValue(step * 10)
+      else if (e.altKey) scrollStep = toStoredValue(step * 0.1)
 
       const newValue = clamp(valueRef.current + direction * scrollStep)
-      const finalValue = Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+      const finalValue = roundStoredValueForDisplayPrecision(newValue)
 
       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, toStoredValue, roundStoredValueForDisplayPrecision])
 
   useEffect(() => {
     if (!isHovered || isEditing) return
@@ -95,23 +122,30 @@ export function MetricControl({
 
       if (direction !== 0) {
         e.preventDefault()
-        let scrollStep = step / multiplier
-        if (e.shiftKey) scrollStep = (step * 10) / multiplier
-        else if (e.altKey) scrollStep = (step * 0.1) / multiplier
+        let scrollStep = toStoredValue(step)
+        if (e.shiftKey) scrollStep = toStoredValue(step * 10)
+        else if (e.altKey) scrollStep = toStoredValue(step * 0.1)
 
         const newValue = clamp(valueRef.current + direction * scrollStep)
-        const finalValue =
-          Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+        const finalValue = roundStoredValueForDisplayPrecision(newValue)
 
         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,
+    toStoredValue,
+    roundStoredValueForDisplayPrecision,
+  ])
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
@@ -128,14 +162,13 @@ export function MetricControl({
       const handlePointerMove = (moveEvent: PointerEvent) => {
         const deltaX = moveEvent.clientX - startXRef.current
 
-        let dragStep = step / multiplier
-        if (moveEvent.shiftKey) dragStep = (step * 10) / multiplier
-        else if (moveEvent.altKey) dragStep = (step * 0.1) / multiplier
+        let dragStep = toStoredValue(step)
+        if (moveEvent.shiftKey) dragStep = toStoredValue(step * 10)
+        else if (moveEvent.altKey) dragStep = toStoredValue(step * 0.1)
 
         const deltaValue = deltaX * dragStep
         const newValue = clamp(startValueRef.current + deltaValue)
-        const newFinalValue =
-          Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+        const newFinalValue = roundStoredValueForDisplayPrecision(newValue)
 
         if (Math.abs(newFinalValue - finalValue) > 1e-6) {
           finalValue = newFinalValue
@@ -148,7 +181,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,27 +200,69 @@ export function MetricControl({
       document.addEventListener('pointermove', handlePointerMove)
       document.addEventListener('pointerup', handlePointerUp)
     },
-    [isEditing, value, onChange, clamp, precision, step, multiplier],
+    [
+      isEditing,
+      value,
+      onChange,
+      onCommit,
+      restoreOnCommit,
+      clamp,
+      step,
+      toStoredValue,
+      roundStoredValueForDisplayPrecision,
+    ],
   )
 
   const handleValueClick = useCallback(() => {
     setIsEditing(true)
-    setInputValue((value * multiplier).toFixed(precision))
-  }, [value, multiplier, precision])
+    setInputValue(toDisplayValue(value).toFixed(precision))
+  }, [value, toDisplayValue, precision])
 
   const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
   }, [])
 
   const submitValue = useCallback(() => {
-    const numValue = Number.parseFloat(inputValue)
-    if (Number.isNaN(numValue)) {
-      setInputValue((value * multiplier).toFixed(precision))
+    const spec = lingoUnitSpec(unit)
+    let stored = spec
+      ? parseMeasurement(inputValue, spec, {
+          bareUnit: isImperial ? 'ft' : spec.unitId,
+          system: isImperial ? 'us' : 'metric',
+        })
+      : null
+    if (stored === null) {
+      const numValue = Number.parseFloat(inputValue)
+      stored = Number.isFinite(numValue) ? toStoredValue(numValue) : null
+    }
+    if (stored === null) {
+      setInputValue(toDisplayValue(value).toFixed(precision))
     } else {
-      onChange(clamp(numValue / multiplier))
+      applyCommittedValue(clamp(stored))
     }
     setIsEditing(false)
-  }, [inputValue, onChange, clamp, multiplier, value, precision])
+  }, [
+    inputValue,
+    unit,
+    isImperial,
+    applyCommittedValue,
+    clamp,
+    toStoredValue,
+    value,
+    precision,
+    toDisplayValue,
+  ])
+
+  const spec = lingoUnitSpec(unit)
+  const hint =
+    isEditing && spec
+      ? measurementHint(inputValue, spec, {
+          bareUnit: isImperial ? 'ft' : spec.unitId,
+          system: isImperial ? 'us' : 'metric',
+          displayUnit: isImperial ? 'ft' : spec.unitId,
+          precision,
+          clamp,
+        })
+      : null
 
   const handleInputBlur = useCallback(() => {
     submitValue()
@@ -191,21 +273,21 @@ export function MetricControl({
       if (e.key === 'Enter') {
         submitValue()
       } else if (e.key === 'Escape') {
-        setInputValue((value * multiplier).toFixed(precision))
+        setInputValue(toDisplayValue(value).toFixed(precision))
         setIsEditing(false)
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
-        const newV = clamp(value + step / multiplier)
-        onChange(newV)
-        setInputValue((newV * multiplier).toFixed(precision))
+        const newV = clamp(value + toStoredValue(step))
+        applyCommittedValue(newV)
+        setInputValue(toDisplayValue(newV).toFixed(precision))
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
-        const newV = clamp(value - step / multiplier)
-        onChange(newV)
-        setInputValue((newV * multiplier).toFixed(precision))
+        const newV = clamp(value - toStoredValue(step))
+        applyCommittedValue(newV)
+        setInputValue(toDisplayValue(newV).toFixed(precision))
       }
     },
-    [submitValue, value, multiplier, precision, step, clamp, onChange],
+    [submitValue, value, toDisplayValue, precision, step, clamp, applyCommittedValue, toStoredValue],
   )
 
   return (
@@ -234,6 +316,11 @@ export function MetricControl({
       <div className="flex shrink-0 justify-end">
         {isEditing ? (
           <div className="flex items-center">
+            {hint && (
+              <span className="mr-1.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/50 tabular-nums">
+                {hint}
+              </span>
+            )}
             <input
               autoFocus
               className="w-full bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
@@ -243,7 +330,16 @@ export function MetricControl({
               type="text"
               value={inputValue}
             />
-            {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
+            {displayUnit && (
+              <span
+                className={cn(
+                  'ml-[1px] transition-opacity duration-150',
+                  hint ? 'opacity-0' : 'text-muted-foreground/40',
+                )}
+              >
+                {displayUnit}
+              </span>
+            )}
           </div>
         ) : (
           <div

package/src/components/ui/controls/scene-material-list.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import {
+  generateSceneMaterialId,
+  type MaterialSchema,
+  type SceneMaterial,
+  type SceneMaterialId,
+  toSceneMaterialRef,
+  useScene,
+} from '@pascal-app/core'
+import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+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)
+  const addSceneMaterial = useScene((state) => state.addSceneMaterial)
+  const updateSceneMaterial = useScene((state) => state.updateSceneMaterial)
+  const removeSceneMaterial = useScene((state) => state.removeSceneMaterial)
+  const activePaintTarget = useEditor((state) => state.activePaintTarget)
+  const activePaintRef = useEditor((state) => state.activePaintMaterial?.materialPreset)
+  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+
+  const materialEntries = useMemo(
+    () => Object.entries(materials) as [SceneMaterialId, SceneMaterial][],
+    [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])
+
+  return (
+    <div className="space-y-2">
+      {materialEntries.map(([id, sceneMaterial]) => (
+        <SceneMaterialRow
+          addSceneMaterial={addSceneMaterial}
+          activePaintTarget={activePaintTarget}
+          autoEdit={autoEditId === id}
+          id={id}
+          isActive={activePaintRef === toSceneMaterialRef(id)}
+          key={id}
+          removeSceneMaterial={removeSceneMaterial}
+          sceneMaterial={sceneMaterial}
+          setActivePaintMaterial={setActivePaintMaterial}
+          updateSceneMaterial={updateSceneMaterial}
+          usageCount={usageCounts.get(id) ?? 0}
+        />
+      ))}
+    </div>
+  )
+}
+
+function SceneMaterialRow({
+  id,
+  sceneMaterial,
+  usageCount,
+  activePaintTarget,
+  autoEdit,
+  isActive,
+  addSceneMaterial,
+  updateSceneMaterial,
+  removeSceneMaterial,
+  setActivePaintMaterial,
+}: {
+  id: SceneMaterialId
+  sceneMaterial: SceneMaterial
+  usageCount: number
+  activePaintTarget: ReturnType<typeof useEditor.getState>['activePaintTarget']
+  autoEdit: boolean
+  isActive: boolean
+  addSceneMaterial: ReturnType<typeof useScene.getState>['addSceneMaterial']
+  updateSceneMaterial: ReturnType<typeof useScene.getState>['updateSceneMaterial']
+  removeSceneMaterial: ReturnType<typeof useScene.getState>['removeSceneMaterial']
+  setActivePaintMaterial: ReturnType<typeof useEditor.getState>['setActivePaintMaterial']
+}) {
+  // A freshly-created material (via "+ Custom") mounts with its editor open.
+  const [isEditingMaterial, setIsEditingMaterial] = useState(autoEdit)
+  const [draftName, setDraftName] = useState(sceneMaterial.name)
+  const swatchColor = sceneMaterial.material.properties?.color ?? '#ffffff'
+
+  useEffect(() => {
+    setDraftName(sceneMaterial.name)
+  }, [sceneMaterial.name])
+
+  const commitName = () => {
+    const nextName = draftName.trim()
+    if (!nextName) {
+      setDraftName(sceneMaterial.name)
+      return
+    }
+    if (nextName !== sceneMaterial.name) {
+      updateSceneMaterial(id, { name: nextName })
+    }
+  }
+
+  const duplicateMaterial = () => {
+    addSceneMaterial({
+      id: generateSceneMaterialId(),
+      name: `${sceneMaterial.name} copy`,
+      material: structuredClone(sceneMaterial.material) as MaterialSchema,
+    })
+  }
+
+  return (
+    <div
+      className={`rounded-md border border-border/60 bg-background/40 p-2 ${
+        isActive ? 'ring-1 ring-primary ring-inset' : ''
+      }`}
+    >
+      <div className="flex items-center gap-2">
+        <span
+          className="h-8 w-8 shrink-0 rounded-md border border-border/70"
+          style={{ backgroundColor: swatchColor }}
+        />
+        <Input
+          className="h-8 px-2 text-sm"
+          onBlur={commitName}
+          onChange={(e) => setDraftName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.currentTarget.blur()
+            }
+            if (e.key === 'Escape') {
+              setDraftName(sceneMaterial.name)
+              e.currentTarget.blur()
+            }
+          }}
+          value={draftName}
+        />
+      </div>
+
+      <div className="mt-2 flex items-center justify-between gap-2">
+        <span className="text-muted-foreground text-xs">
+          Used by {usageCount} {usageCount === 1 ? 'part' : 'parts'}
+        </span>
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                aria-label="Paint with"
+                onClick={() =>
+                  setActivePaintMaterial({
+                    materialPreset: toSceneMaterialRef(id),
+                    sourceTarget: activePaintTarget,
+                  })
+                }
+                size="icon-sm"
+                type="button"
+                variant="outline"
+              >
+                <Paintbrush />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Paint with</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                aria-label="Edit"
+                aria-pressed={isEditingMaterial}
+                onClick={() => setIsEditingMaterial((value) => !value)}
+                size="icon-sm"
+                type="button"
+                variant={isEditingMaterial ? 'default' : 'outline'}
+              >
+                <Pencil />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Edit</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                aria-label="Duplicate"
+                onClick={duplicateMaterial}
+                size="icon-sm"
+                type="button"
+                variant="outline"
+              >
+                <Copy />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Duplicate</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                aria-label="Delete"
+                onClick={() => removeSceneMaterial(id)}
+                size="icon-sm"
+                type="button"
+                variant="outline"
+              >
+                <Trash2 />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Delete</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      {isEditingMaterial ? (
+        <div className="mt-3 border-border/60 border-t pt-3">
+          <MaterialPropertiesEditor
+            onChange={(material) => updateSceneMaterial(id, { material })}
+            value={sceneMaterial.material}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}