@pascal-app/editor 0.4.0

package/src/components/ui/controls/action-button.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { cn } from '../../../lib/utils'
+
+interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  label: string
+}
+
+export function ActionButton({ icon, label, className, ...props }: ActionButtonProps) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 font-medium text-foreground text-xs transition-colors hover:bg-[#3e3e3e] active:bg-[#3e3e3e]',
+        className,
+      )}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  )
+}
+
+export function ActionGroup({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return <div className={cn('flex gap-1.5', className)}>{children}</div>
+}

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

@@ -0,0 +1,194 @@
+'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',
+}
+
+type MaterialPickerProps = {
+  value?: MaterialSchema
+  onChange: (material: MaterialSchema) => void
+}
+
+export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
+  const [showCustom, setShowCustom] = useState<boolean>(
+    value?.preset === 'custom' || !!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 })
+    }
+  }
+
+  const handlePropertyChange = (
+    prop: keyof typeof currentProps,
+    val: (typeof currentProps)[keyof typeof currentProps],
+  ) => {
+    onChange({
+      preset: showCustom ? 'custom' : currentPreset,
+      properties: {
+        ...currentProps,
+        [prop]: val,
+      },
+    })
+  }
+
+  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>
+
+          <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>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,262 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { cn } from '../../../lib/utils'
+
+interface MetricControlProps {
+  label: React.ReactNode
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  precision?: number
+  step?: number
+  className?: string
+  unit?: string
+}
+
+export function MetricControl({
+  label,
+  value,
+  onChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  precision = 2,
+  step = 1,
+  className,
+  unit = '',
+}: 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 displayValue = value * multiplier
+
+  const [isEditing, setIsEditing] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [inputValue, setInputValue] = useState(displayValue.toFixed(precision))
+  const startXRef = useRef(0)
+  const startValueRef = useRef(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  const clamp = useCallback(
+    (val: number) => {
+      return Math.min(Math.max(val, min), max)
+    },
+    [min, max],
+  )
+
+  useEffect(() => {
+    if (!isEditing) {
+      setInputValue(displayValue.toFixed(precision))
+    }
+  }, [displayValue, precision, isEditing])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const handleWheel = (e: WheelEvent) => {
+      if (isEditing) return
+
+      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
+
+      const newValue = clamp(valueRef.current + direction * scrollStep)
+      const finalValue = Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+
+      if (Math.abs(finalValue - valueRef.current) > 1e-6) {
+        onChange(finalValue)
+      }
+    }
+
+    container.addEventListener('wheel', handleWheel, { passive: false })
+    return () => container.removeEventListener('wheel', handleWheel)
+  }, [isEditing, step, clamp, onChange, precision, multiplier])
+
+  useEffect(() => {
+    if (!isHovered || isEditing) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      let direction = 0
+      if (e.key === 'ArrowUp') direction = 1
+      else if (e.key === 'ArrowDown') direction = -1
+
+      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
+
+        const newValue = clamp(valueRef.current + direction * scrollStep)
+        const finalValue =
+          Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+
+        if (Math.abs(finalValue - valueRef.current) > 1e-6) {
+          onChange(finalValue)
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isHovered, isEditing, step, clamp, onChange, precision, multiplier])
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (isEditing) return
+      e.preventDefault()
+
+      setIsDragging(true)
+      startXRef.current = e.clientX
+      startValueRef.current = value
+      useScene.temporal.getState().pause()
+
+      let finalValue = value
+
+      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
+
+        const deltaValue = deltaX * dragStep
+        const newValue = clamp(startValueRef.current + deltaValue)
+        const newFinalValue =
+          Number.parseFloat((newValue * multiplier).toFixed(precision)) / multiplier
+
+        if (Math.abs(newFinalValue - finalValue) > 1e-6) {
+          finalValue = newFinalValue
+          onChange(finalValue)
+        }
+      }
+
+      const handlePointerUp = () => {
+        setIsDragging(false)
+        document.removeEventListener('pointermove', handlePointerMove)
+        document.removeEventListener('pointerup', handlePointerUp)
+
+        if (Math.abs(finalValue - startValueRef.current) > 1e-6) {
+          onChange(startValueRef.current)
+          useScene.temporal.getState().resume()
+          onChange(finalValue)
+        } else {
+          useScene.temporal.getState().resume()
+        }
+      }
+
+      document.addEventListener('pointermove', handlePointerMove)
+      document.addEventListener('pointerup', handlePointerUp)
+    },
+    [isEditing, value, onChange, clamp, precision, step, multiplier],
+  )
+
+  const handleValueClick = useCallback(() => {
+    setIsEditing(true)
+    setInputValue((value * multiplier).toFixed(precision))
+  }, [value, multiplier, 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))
+    } else {
+      onChange(clamp(numValue / multiplier))
+    }
+    setIsEditing(false)
+  }, [inputValue, onChange, clamp, multiplier, value, precision])
+
+  const handleInputBlur = useCallback(() => {
+    submitValue()
+  }, [submitValue])
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        submitValue()
+      } else if (e.key === 'Escape') {
+        setInputValue((value * multiplier).toFixed(precision))
+        setIsEditing(false)
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        const newV = clamp(value + step / multiplier)
+        onChange(newV)
+        setInputValue((newV * multiplier).toFixed(precision))
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        const newV = clamp(value - step / multiplier)
+        onChange(newV)
+        setInputValue((newV * multiplier).toFixed(precision))
+      }
+    },
+    [submitValue, value, multiplier, precision, step, clamp, onChange],
+  )
+
+  return (
+    <div
+      className={cn(
+        'group flex h-10 w-full items-center justify-between rounded-lg border border-border/50 px-3 text-sm transition-colors',
+        isDragging ? 'bg-[#3e3e3e]' : 'bg-[#2C2C2E] hover:bg-[#3e3e3e]',
+        className,
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      ref={containerRef}
+    >
+      <div
+        className={cn(
+          'select-none truncate text-muted-foreground transition-colors',
+          isDragging
+            ? 'cursor-ew-resize text-foreground'
+            : 'hover:cursor-ew-resize hover:text-foreground',
+        )}
+        onPointerDown={handlePointerDown}
+      >
+        {label}
+      </div>
+
+      <div className="flex shrink-0 justify-end">
+        {isEditing ? (
+          <div className="flex items-center">
+            <input
+              autoFocus
+              className="w-full bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
+              onBlur={handleInputBlur}
+              onChange={handleInputChange}
+              onKeyDown={handleInputKeyDown}
+              type="text"
+              value={inputValue}
+            />
+            {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
+          </div>
+        ) : (
+          <div
+            className="flex w-full cursor-text items-center justify-end text-foreground transition-colors hover:text-primary"
+            onClick={handleValueClick}
+          >
+            <span className="font-mono tabular-nums tracking-tight">
+              {Number(displayValue.toFixed(precision)).toFixed(precision)}
+            </span>
+            {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/controls/panel-section.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import { useState } from 'react'
+import { cn } from '../../../lib/utils'
+
+interface PanelSectionProps {
+  title: string
+  children: React.ReactNode
+  defaultExpanded?: boolean
+  className?: string
+}
+
+export function PanelSection({
+  title,
+  children,
+  defaultExpanded = true,
+  className,
+}: PanelSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
+
+  return (
+    <motion.div
+      className={cn('flex shrink-0 flex-col overflow-hidden border-border/50 border-b', className)}
+      layout
+      transition={{ type: 'spring', bounce: 0, duration: 0.4 }}
+    >
+      <motion.button
+        className={cn(
+          'group/section flex h-10 shrink-0 items-center justify-between px-3 transition-all duration-200',
+          isExpanded
+            ? 'bg-accent/50 text-foreground'
+            : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+        )}
+        layout="position"
+        onClick={() => setIsExpanded(!isExpanded)}
+        type="button"
+      >
+        <span className="truncate font-medium text-sm">{title}</span>
+        <ChevronDown
+          className={cn(
+            'h-4 w-4 transition-transform duration-200',
+            isExpanded ? 'rotate-180' : 'rotate-0',
+            isExpanded ? 'text-foreground' : 'opacity-0 group-hover/section:opacity-100',
+          )}
+        />
+      </motion.button>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            animate={{ height: 'auto', opacity: 1 }}
+            className="overflow-hidden"
+            exit={{ height: 0, opacity: 0 }}
+            initial={{ height: 0, opacity: 0 }}
+            transition={{ type: 'spring', bounce: 0, duration: 0.4 }}
+          >
+            <div className="flex flex-col gap-1.5 p-3 pt-2">{children}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  )
+}

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

@@ -0,0 +1,45 @@
+'use client'
+
+import { cn } from '../../../lib/utils'
+
+interface SegmentedControlProps<T extends string> {
+  value: T
+  onChange: (value: T) => void
+  options: { label: React.ReactNode; value: T }[]
+  className?: string
+}
+
+export function SegmentedControl<T extends string>({
+  value,
+  onChange,
+  options,
+  className,
+}: SegmentedControlProps<T>) {
+  return (
+    <div
+      className={cn(
+        'flex h-9 w-full items-center rounded-lg border border-border/50 bg-[#2C2C2E] p-[3px]',
+        className,
+      )}
+    >
+      {options.map((option) => {
+        const isSelected = value === option.value
+        return (
+          <button
+            className={cn(
+              'relative flex h-full flex-1 items-center justify-center rounded-md font-medium text-xs transition-all duration-200',
+              isSelected
+                ? 'bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
+                : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
+            )}
+            key={option.value}
+            onClick={() => onChange(option.value)}
+            type="button"
+          >
+            <span className="relative z-10 flex items-center gap-1.5">{option.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}