@pascal-app/editor 0.5.1 → 0.7.0

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

@@ -219,7 +219,6 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
   const views = usePaletteViewRegistry((s) => s.views)
 
   const activeLevelId = useViewer((s) => s.selection.levelId)
-  const activeLevelNode = useScene((s) => (activeLevelId ? s.nodes[activeLevelId] : null))
 
   const wallMode = useViewer((s) => s.wallMode)
   const setWallMode = useViewer((s) => s.setWallMode)

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

@@ -1,191 +1,211 @@
 'use client'
 
-import { DEFAULT_MATERIALS, type MaterialPreset, type MaterialSchema } from '@pascal-app/core'
-import { useState } from 'react'
-
-const PRESET_COLORS: Record<MaterialPreset, string> = {
-  white: '#ffffff',
-  brick: '#8b4513',
-  concrete: '#808080',
-  wood: '#deb887',
-  glass: '#87ceeb',
-  metal: '#c0c0c0',
-  plaster: '#f5f5dc',
-  tile: '#d3d3d3',
-  marble: '#fafafa',
-  custom: '#ffffff',
-}
-
-const PRESET_LABELS: Record<MaterialPreset, string> = {
-  white: 'White',
-  brick: 'Brick',
-  concrete: 'Concrete',
-  wood: 'Wood',
-  glass: 'Glass',
-  metal: 'Metal',
-  plaster: 'Plaster',
-  tile: 'Tile',
-  marble: 'Marble',
-  custom: 'Custom',
-}
+import {
+  getCatalogMaterialById,
+  getLibraryMaterialIdFromRef,
+  getMaterialsForCategory,
+  MATERIAL_CATEGORIES,
+  toLibraryMaterialRef,
+  type MaterialSchema,
+} from '@pascal-app/core'
+import { useEffect, useRef, useState } from 'react'
+import useEditor from '../../../store/use-editor'
 
 type MaterialPickerProps = {
   value?: MaterialSchema
-  onChange: (material: MaterialSchema) => void
+  selectedMaterialPreset?: string
+  onChange?: (material: MaterialSchema) => void
+  onSelectMaterialPreset?: (materialPreset: string) => void
+  disabled?: boolean
 }
 
-export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
-  const [showCustom, setShowCustom] = useState<boolean>(
-    value?.preset === 'custom' || !!value?.properties,
+export function MaterialPicker({
+  value,
+  selectedMaterialPreset,
+  onChange,
+  onSelectMaterialPreset,
+  disabled = false,
+}: MaterialPickerProps) {
+  const setPaintPanelOpen = useEditor((state) => state.setPaintPanelOpen)
+  const [showCustom, setShowCustom] = useState<boolean>(!!value?.properties)
+  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 currentPreset = value?.preset || 'white'
-  const currentProps = value?.properties || DEFAULT_MATERIALS[currentPreset]
-
-  const handlePresetChange = (preset: MaterialPreset) => {
-    if (preset === 'custom') {
-      setShowCustom(true)
-      onChange({
-        preset: 'custom',
-        properties: {
-          color: value?.properties?.color || '#ffffff',
-          roughness: value?.properties?.roughness ?? 0.5,
-          metalness: value?.properties?.metalness ?? 0,
-          opacity: value?.properties?.opacity ?? 1,
-          transparent: value?.properties?.transparent ?? false,
-          side: value?.properties?.side ?? 'front',
-        },
-      })
-    } else {
-      setShowCustom(false)
-      onChange({ preset })
+  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))
   }
 
-  const handlePropertyChange = (
-    prop: keyof typeof currentProps,
-    val: (typeof currentProps)[keyof typeof currentProps],
-  ) => {
-    onChange({
-      preset: showCustom ? 'custom' : currentPreset,
+  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: {
-        ...currentProps,
-        [prop]: val,
+        color: value?.properties?.color || '#ffffff',
+        roughness: value?.properties?.roughness ?? 0.5,
+        metalness: value?.properties?.metalness ?? 0,
+        opacity: value?.properties?.opacity ?? 1,
+        transparent: value?.properties?.transparent ?? false,
+        side: value?.properties?.side ?? 'front',
       },
     })
   }
 
   return (
-    <div className="space-y-3">
-      <div className="grid grid-cols-5 gap-1.5">
-        {(Object.keys(PRESET_COLORS) as MaterialPreset[]).map((preset) => (
-          <button
-            className={`h-8 w-8 rounded border-2 transition-all ${
-              currentPreset === preset
-                ? 'border-blue-500 ring-2 ring-blue-500/30'
-                : 'border-gray-300 hover:border-gray-400'
-            }`}
-            key={preset}
-            onClick={() => handlePresetChange(preset)}
-            style={{
-              backgroundColor: PRESET_COLORS[preset],
-              backgroundImage:
-                preset === 'glass'
-                  ? 'linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent)'
-                  : undefined,
-              backgroundSize: preset === 'glass' ? '8px 8px' : undefined,
-            }}
-            title={PRESET_LABELS[preset]}
-            type="button"
-          />
-        ))}
-      </div>
-
-      {showCustom && (
-        <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 className={`min-w-0 space-y-3 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
+      {(catalogItems.length > 0 || onChange) && (
+        <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>
-
-          <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>
-
-          <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-inset ring-white/12" />
+                  {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 text-[10px] font-medium 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>
       )}

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,23 +23,58 @@ 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: {
+    shiftKey?: boolean
+    metaKey?: boolean
+    ctrlKey?: boolean
+    altKey?: boolean
+  },
+): number {
+  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
@@ -58,16 +95,15 @@ export function SliderControl({
       if (isEditing) return
       e.preventDefault()
       const direction = e.deltaY < 0 ? 1 : -1
-      let s = step
-      if (e.shiftKey) s = step * 10
-      else if (e.altKey) s = step * 0.1
+      const s = getAdjustedStep(step, e)
       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, precision])
+  }, [isEditing, step, clamp, onChange, onCommit])
 
   // Arrow key support while hovered
   useEffect(() => {
@@ -78,24 +114,28 @@ export function SliderControl({
       else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') direction = -1
       if (direction !== 0) {
         e.preventDefault()
-        let s = step
-        if (e.shiftKey) s = step * 10
-        else if (e.metaKey || e.ctrlKey) s = step * 0.1
+        const s = getAdjustedStep(step, e)
         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, precision])
+  }, [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()
     },
@@ -105,38 +145,52 @@ export function SliderControl({
   const handleLabelPointerMove = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
       if (!dragRef.current) return
-      const { startX, startValue } = dragRef.current
-      const dx = e.clientX - startX
-      let s = step
-      if (e.shiftKey) s = step * 10
-      else if (e.metaKey || e.ctrlKey) s = step * 0.1
+      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, precision, clamp, onChange],
+    [step, clamp, onChange],
   )
 
   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(() => {
@@ -149,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>) => {
@@ -163,12 +219,18 @@ export function SliderControl({
         setIsEditing(false)
       } else if (e.key === 'ArrowUp') {
         e.preventDefault()
-        const newV = clamp(value + step)
+        const adjustedStep = getAdjustedStep(step, e)
+        const newV = clamp(
+          Number.parseFloat((value + adjustedStep).toFixed(stepPrecision(adjustedStep))),
+        )
         onChange(newV)
         setInputValue(newV.toFixed(precision))
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
-        const newV = clamp(value - step)
+        const adjustedStep = getAdjustedStep(step, e)
+        const newV = clamp(
+          Number.parseFloat((value - adjustedStep).toFixed(stepPrecision(adjustedStep))),
+        )
         onChange(newV)
         setInputValue(newV.toFixed(precision))
       }