@pascal-app/editor 0.6.0 → 0.8.0

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

@@ -1,59 +1,120 @@
 'use client'
 
 import {
+  getCatalogMaterialById,
+  getLibraryMaterialIdFromRef,
+  getMaterialsForCategory,
   getMaterialsForTarget,
-  toLibraryMaterialRef,
+  MATERIAL_CATEGORIES,
   type MaterialSchema,
   type MaterialTarget,
+  toLibraryMaterialRef,
 } from '@pascal-app/core'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import useEditor from '../../../store/use-editor'
 
 type MaterialPickerProps = {
-  nodeType?: MaterialTarget
   value?: MaterialSchema
   selectedMaterialPreset?: string
   onChange?: (material: MaterialSchema) => void
   onSelectMaterialPreset?: (materialPreset: string) => void
-  hideSideControl?: boolean
   disabled?: boolean
+  nodeType?: MaterialTarget
+  hideSideControl?: boolean
 }
 
 export function MaterialPicker({
-  nodeType,
   value,
   selectedMaterialPreset,
   onChange,
   onSelectMaterialPreset,
-  hideSideControl = false,
   disabled = false,
 }: MaterialPickerProps) {
+  const setPaintPanelOpen = useEditor((state) => state.setPaintPanelOpen)
   const [showCustom, setShowCustom] = useState<boolean>(!!value?.properties)
-  const catalogItems = nodeType ? getMaterialsForTarget(nodeType) : []
+  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'
+      ? getMaterialsForCategory('other')
+      : getMaterialsForCategory(selectedCategory)
 
   useEffect(() => {
     setShowCustom(!!value?.properties && !selectedMaterialPreset)
   }, [selectedMaterialPreset, value?.properties])
 
-  const currentProps = value?.properties || {
-    color: '#ffffff',
-    roughness: 0.5,
-    metalness: 0,
-    opacity: 1,
-    transparent: false,
-    side: 'front' as const,
-  }
+  useEffect(() => {
+    if (!selectedMaterialPreset && value?.properties) {
+      setSelectedCategory('other')
+      return
+    }
+
+    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
+    const selectedCatalogEntry = getCatalogMaterialById(catalogId)
+    if (selectedCatalogEntry?.category) {
+      setSelectedCategory(selectedCatalogEntry.category)
+    }
+  }, [selectedMaterialPreset, value?.id])
+
   const selectedCatalogId =
     selectedMaterialPreset ?? (value?.id ? toLibraryMaterialRef(value.id) : undefined)
 
   const handleCatalogSelect = (materialId: string) => {
     if (disabled) return
     setShowCustom(false)
+    setPaintPanelOpen(false)
     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
+
+    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)
+    }
+  }, [])
+
   const handleCustomOpen = () => {
     if (disabled) return
     setShowCustom(true)
+    setPaintPanelOpen(true)
     onChange?.({
       preset: 'custom',
       properties: {
@@ -67,159 +128,88 @@ export function MaterialPicker({
     })
   }
 
-  const handlePropertyChange = (
-    prop: keyof typeof currentProps,
-    val: (typeof currentProps)[keyof typeof currentProps],
-  ) => {
-    if (disabled) return
-    onChange?.({
-      preset: 'custom',
-      properties: {
-        ...currentProps,
-        [prop]: val,
-      },
-    })
-  }
-
   return (
-    <div className={`space-y-3 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
+    <div className={`min-w-0 space-y-3 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
       {(catalogItems.length > 0 || onChange) && (
-        <div className="space-y-2">
-          {catalogItems.length > 0 ? (
-            <div className="text-gray-500 text-xs uppercase tracking-[0.16em]">Library</div>
-          ) : null}
-          <div className="flex flex-wrap gap-1.5">
-            {catalogItems.map((item) => (
-              <button
-                className={`h-14 w-14 shrink-0 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'
-                }`}
-                key={item.id}
-                onClick={() => handleCatalogSelect(item.id)}
-                title={item.label}
-                type="button"
-              >
-                {item.previewThumbnailUrl ? (
-                  <img
-                    alt={item.label}
-                    className="h-full w-full object-cover"
-                    src={item.previewThumbnailUrl}
-                  />
-                ) : item.previewColor ? (
-                  <div className="h-full w-full" style={{ backgroundColor: item.previewColor }} />
-                ) : (
-                  <div className="h-full w-full bg-gray-100" />
-                )}
-              </button>
-            ))}
-            {onChange ? (
-              <button
-                className={`flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border text-[10px] font-medium transition-all ${
-                  showCustom
-                    ? 'border-blue-500 bg-blue-50 text-blue-700 ring-2 ring-blue-500/30'
-                    : 'border-gray-300 bg-white text-gray-500 hover:border-gray-400'
-                }`}
-                onClick={handleCustomOpen}
-                title="Custom"
-                type="button"
-              >
-                Custom
-              </button>
-            ) : null}
-          </div>
-        </div>
-      )}
-
-      {showCustom && onChange && (
-        <div className="space-y-2 pt-2">
-          <div className="flex items-center gap-2">
-            <label className="w-16 text-gray-500 text-xs">Color</label>
-            <input
-              className="h-7 w-12 cursor-pointer rounded border border-gray-300"
-              onChange={(e) => handlePropertyChange('color', e.target.value)}
-              type="color"
-              value={currentProps.color}
-            />
-            <input
-              className="h-7 flex-1 rounded border border-gray-300 px-2 text-xs"
-              onChange={(e) => handlePropertyChange('color', e.target.value)}
-              type="text"
-              value={currentProps.color}
-            />
-          </div>
-
-          <div className="flex items-center gap-2">
-            <label className="w-16 text-gray-500 text-xs">Roughness</label>
-            <input
-              className="h-1.5 flex-1 cursor-pointer appearance-none rounded-lg bg-gray-200"
-              max={1}
-              min={0}
-              onChange={(e) => handlePropertyChange('roughness', Number.parseFloat(e.target.value))}
-              step={0.01}
-              type="range"
-              value={currentProps.roughness}
-            />
-            <span className="w-8 text-right text-gray-400 text-xs">
-              {currentProps.roughness.toFixed(2)}
-            </span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <label className="w-16 text-gray-500 text-xs">Metalness</label>
-            <input
-              className="h-1.5 flex-1 cursor-pointer appearance-none rounded-lg bg-gray-200"
-              max={1}
-              min={0}
-              onChange={(e) => handlePropertyChange('metalness', Number.parseFloat(e.target.value))}
-              step={0.01}
-              type="range"
-              value={currentProps.metalness}
-            />
-            <span className="w-8 text-right text-gray-400 text-xs">
-              {currentProps.metalness.toFixed(2)}
-            </span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <label className="w-16 text-gray-500 text-xs">Opacity</label>
-            <input
-              className="h-1.5 flex-1 cursor-pointer appearance-none rounded-lg bg-gray-200"
-              max={1}
-              min={0}
-              onChange={(e) => {
-                const opacity = Number.parseFloat(e.target.value)
-                handlePropertyChange('opacity', opacity)
-                if (opacity < 1 && !currentProps.transparent) {
-                  handlePropertyChange('transparent', true)
-                }
-              }}
-              step={0.01}
-              type="range"
-              value={currentProps.opacity}
-            />
-            <span className="w-8 text-right text-gray-400 text-xs">
-              {currentProps.opacity.toFixed(2)}
-            </span>
+        <div className="min-w-0 space-y-1">
+          <div
+            className="w-full max-w-full overflow-x-auto overflow-y-hidden"
+            ref={categoryScrollRef}
+            style={{ msOverflowStyle: 'none', scrollbarWidth: 'none' }}
+          >
+            <div className="flex min-w-max gap-1 pb-1">
+              {MATERIAL_CATEGORIES.map((category) => (
+                <button
+                  className={`shrink-0 px-2 font-medium text-[11px] uppercase tracking-[0.12em] transition-all ${
+                    selectedCategory === category
+                      ? 'bg-transparent text-foreground'
+                      : 'bg-transparent text-muted-foreground opacity-70 hover:text-foreground hover:opacity-100'
+                  }`}
+                  key={category}
+                  onClick={() => {
+                    setSelectedCategory(category)
+                    if (showCustom) {
+                      setShowCustom(false)
+                    }
+                    if (category !== 'other') {
+                      setPaintPanelOpen(false)
+                    }
+                  }}
+                  type="button"
+                >
+                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                </button>
+              ))}
+            </div>
           </div>
-
-          {!hideSideControl && (
-            <div className="flex items-center gap-2">
-              <label className="w-16 text-gray-500 text-xs">Side</label>
-              <select
-                className="h-7 flex-1 rounded border border-gray-300 px-2 text-xs"
-                onChange={(e) =>
-                  handlePropertyChange('side', e.target.value as 'front' | 'back' | 'double')
-                }
-                value={currentProps.side}
-              >
-                <option value="front">Front</option>
-                <option value="back">Back</option>
-                <option value="double">Double</option>
-              </select>
+          <div
+            className="w-full max-w-full overflow-x-auto overflow-y-hidden"
+            ref={catalogScrollRef}
+            style={{ msOverflowStyle: 'none', scrollbarWidth: 'none' }}
+          >
+            <div className="flex min-w-max gap-1.5 pb-1">
+              {catalogItems.map((item) => (
+                <button
+                  className={`relative h-14 w-14 shrink-0 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'
+                  }`}
+                  key={item.id}
+                  onClick={() => handleCatalogSelect(item.id)}
+                  title={item.label}
+                  type="button"
+                >
+                  <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-white/12 ring-inset" />
+                  {item.previewThumbnailUrl ? (
+                    <img
+                      alt={item.label}
+                      className="h-full w-full object-cover"
+                      src={item.previewThumbnailUrl}
+                    />
+                  ) : item.previewColor ? (
+                    <div className="h-full w-full" style={{ backgroundColor: item.previewColor }} />
+                  ) : (
+                    <div className="h-full w-full bg-gray-100" />
+                  )}
+                </button>
+              ))}
+              {selectedCategory === 'other' && onChange ? (
+                <button
+                  className={`flex h-14 w-14 shrink-0 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'
+                  }`}
+                  onClick={handleCustomOpen}
+                  title="Custom"
+                  type="button"
+                >
+                  Custom
+                </button>
+              ) : null}
             </div>
-          )}
+          </div>
         </div>
       )}
     </div>

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

@@ -8,12 +8,14 @@ interface SliderControlProps {
   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
 }
 
 function stepPrecision(s: number): number {
@@ -21,6 +23,17 @@ function stepPrecision(s: number): number {
   return Math.max(0, Math.ceil(-Math.log10(s)))
 }
 
+function getStepMultiplier(modifiers: {
+  shiftKey?: boolean
+  metaKey?: boolean
+  ctrlKey?: boolean
+  altKey?: boolean
+}): number {
+  if (modifiers.shiftKey) return 10
+  if (modifiers.metaKey || modifiers.ctrlKey || modifiers.altKey) return 0.1
+  return 1
+}
+
 function getAdjustedStep(
   baseStep: number,
   modifiers: {
@@ -30,28 +43,38 @@ function getAdjustedStep(
     altKey?: boolean
   },
 ): number {
-  if (modifiers.shiftKey) return baseStep * 10
-  if (modifiers.metaKey || modifiers.ctrlKey || modifiers.altKey) return baseStep * 0.1
-  return baseStep
+  return baseStep * getStepMultiplier(modifiers)
 }
 
 export function SliderControl({
   label,
   value,
   onChange,
+  onCommit,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
   precision = 0,
   step = 1,
   className,
   unit = '',
+  restoreOnCommit = true,
 }: SliderControlProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
   const [inputValue, setInputValue] = useState(value.toFixed(precision))
 
-  const dragRef = useRef<{ startX: number; startValue: number } | null>(null)
+  const dragRef = useRef<{
+    // Original value at drag start — preserved across modifier re-anchors so
+    // undo/redo rolls back to the pre-drag state, not to a mid-drag anchor.
+    originValue: number
+    // Anchor pointer position and value — updated whenever modifier keys
+    // change so the delta calculation continues smoothly from the current
+    // position at the new step size.
+    anchorX: number
+    anchorValue: number
+    stepMultiplier: number
+  } | null>(null)
   const labelRef = useRef<HTMLDivElement>(null)
   const valueRef = useRef(value)
   valueRef.current = value
@@ -76,10 +99,11 @@ export function SliderControl({
       const newValue = clamp(valueRef.current + direction * s)
       const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
       if (final !== valueRef.current) onChange(final)
+      onCommit?.(final)
     }
     el.addEventListener('wheel', handleWheel, { passive: false })
     return () => el.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, onChange])
+  }, [isEditing, step, clamp, onChange, onCommit])
 
   // Arrow key support while hovered
   useEffect(() => {
@@ -94,18 +118,24 @@ export function SliderControl({
         const newValue = clamp(valueRef.current + direction * s)
         const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
         if (final !== valueRef.current) onChange(final)
+        onCommit?.(final)
       }
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isHovered, isEditing, step, clamp, onChange])
+  }, [isHovered, isEditing, step, clamp, onChange, onCommit])
 
   const handleLabelPointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
       if (isEditing) return
       e.preventDefault()
       e.currentTarget.setPointerCapture(e.pointerId)
-      dragRef.current = { startX: e.clientX, startValue: valueRef.current }
+      dragRef.current = {
+        originValue: valueRef.current,
+        anchorX: e.clientX,
+        anchorValue: valueRef.current,
+        stepMultiplier: getStepMultiplier(e),
+      }
       setIsDragging(true)
       useScene.temporal.getState().pause()
     },
@@ -115,14 +145,28 @@ export function SliderControl({
   const handleLabelPointerMove = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
       if (!dragRef.current) return
-      const { startX, startValue } = dragRef.current
-      const dx = e.clientX - startX
-      const s = getAdjustedStep(step, e)
+      const multiplier = getStepMultiplier(e)
+      // If modifier keys changed mid-drag, re-anchor from the current pointer
+      // position and value — otherwise the accumulated dx would be applied
+      // with a new step size and jump the value (e.g. pressing Cmd while
+      // already far from the starting point would snap back toward it).
+      if (multiplier !== dragRef.current.stepMultiplier) {
+        dragRef.current.anchorX = e.clientX
+        dragRef.current.anchorValue = valueRef.current
+        dragRef.current.stepMultiplier = multiplier
+        return
+      }
+      const { anchorX, anchorValue } = dragRef.current
+      const dx = e.clientX - anchorX
+      const s = step * multiplier
       // 4 px per step at default sensitivity
       const newValue = clamp(
-        Number.parseFloat((startValue + (dx / 4) * s).toFixed(stepPrecision(s))),
+        Number.parseFloat((anchorValue + (dx / 4) * s).toFixed(stepPrecision(s))),
       )
-      onChange(newValue)
+      if (newValue !== valueRef.current) {
+        valueRef.current = newValue
+        onChange(newValue)
+      }
     },
     [step, clamp, onChange],
   )
@@ -130,21 +174,23 @@ export function SliderControl({
   const handleLabelPointerUp = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
       if (!dragRef.current) return
-      const { startValue } = dragRef.current
+      const { originValue } = dragRef.current
       const finalVal = valueRef.current
       dragRef.current = null
       setIsDragging(false)
       e.currentTarget.releasePointerCapture(e.pointerId)
 
-      if (startValue !== finalVal) {
-        onChange(startValue)
+      if (originValue !== finalVal && restoreOnCommit) {
+        onChange(originValue)
         useScene.temporal.getState().resume()
         onChange(finalVal)
+        onCommit?.(finalVal)
       } else {
         useScene.temporal.getState().resume()
+        onCommit?.(finalVal)
       }
     },
-    [onChange],
+    [onChange, onCommit, restoreOnCommit],
   )
 
   const handleValueClick = useCallback(() => {
@@ -157,10 +203,12 @@ export function SliderControl({
     if (Number.isNaN(numValue)) {
       setInputValue(value.toFixed(precision))
     } else {
-      onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+      const nextValue = clamp(Number.parseFloat(numValue.toFixed(precision)))
+      onChange(nextValue)
+      onCommit?.(nextValue)
     }
     setIsEditing(false)
-  }, [inputValue, onChange, clamp, precision, value])
+  }, [inputValue, onChange, onCommit, clamp, precision, value])
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {