@pascal-app/editor 0.5.1 → 0.6.0

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

@@ -1,73 +1,79 @@
 '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 {
+  getMaterialsForTarget,
+  toLibraryMaterialRef,
+  type MaterialSchema,
+  type MaterialTarget,
+} from '@pascal-app/core'
+import { useEffect, useState } from 'react'
 
 type MaterialPickerProps = {
+  nodeType?: MaterialTarget
   value?: MaterialSchema
-  onChange: (material: MaterialSchema) => void
+  selectedMaterialPreset?: string
+  onChange?: (material: MaterialSchema) => void
+  onSelectMaterialPreset?: (materialPreset: string) => void
+  hideSideControl?: boolean
+  disabled?: boolean
 }
 
-export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
-  const [showCustom, setShowCustom] = useState<boolean>(
-    value?.preset === 'custom' || !!value?.properties,
-  )
+export function MaterialPicker({
+  nodeType,
+  value,
+  selectedMaterialPreset,
+  onChange,
+  onSelectMaterialPreset,
+  hideSideControl = false,
+  disabled = false,
+}: MaterialPickerProps) {
+  const [showCustom, setShowCustom] = useState<boolean>(!!value?.properties)
+  const catalogItems = nodeType ? getMaterialsForTarget(nodeType) : []
 
-  const currentPreset = value?.preset || 'white'
-  const currentProps = value?.properties || DEFAULT_MATERIALS[currentPreset]
+  useEffect(() => {
+    setShowCustom(!!value?.properties && !selectedMaterialPreset)
+  }, [selectedMaterialPreset, value?.properties])
 
-  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 currentProps = value?.properties || {
+    color: '#ffffff',
+    roughness: 0.5,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front' as const,
+  }
+  const selectedCatalogId =
+    selectedMaterialPreset ?? (value?.id ? toLibraryMaterialRef(value.id) : undefined)
+
+  const handleCatalogSelect = (materialId: string) => {
+    if (disabled) return
+    setShowCustom(false)
+    onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
+  }
+
+  const handleCustomOpen = () => {
+    if (disabled) return
+    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',
+      },
+    })
   }
 
   const handlePropertyChange = (
     prop: keyof typeof currentProps,
     val: (typeof currentProps)[keyof typeof currentProps],
   ) => {
-    onChange({
-      preset: showCustom ? 'custom' : currentPreset,
+    if (disabled) return
+    onChange?.({
+      preset: 'custom',
       properties: {
         ...currentProps,
         [prop]: val,
@@ -76,32 +82,57 @@ export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
   }
 
   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>
+    <div className={`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 && (
+      {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>
@@ -173,20 +204,22 @@ export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
             </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>
+          {!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>
+          )}
         </div>
       )}
     </div>

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

@@ -21,6 +21,20 @@ function stepPrecision(s: number): number {
   return Math.max(0, Math.ceil(-Math.log10(s)))
 }
 
+function getAdjustedStep(
+  baseStep: number,
+  modifiers: {
+    shiftKey?: boolean
+    metaKey?: boolean
+    ctrlKey?: boolean
+    altKey?: boolean
+  },
+): number {
+  if (modifiers.shiftKey) return baseStep * 10
+  if (modifiers.metaKey || modifiers.ctrlKey || modifiers.altKey) return baseStep * 0.1
+  return baseStep
+}
+
 export function SliderControl({
   label,
   value,
@@ -58,16 +72,14 @@ 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)
     }
     el.addEventListener('wheel', handleWheel, { passive: false })
     return () => el.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, onChange, precision])
+  }, [isEditing, step, clamp, onChange])
 
   // Arrow key support while hovered
   useEffect(() => {
@@ -78,9 +90,7 @@ 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)
@@ -88,7 +98,7 @@ export function SliderControl({
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isHovered, isEditing, step, clamp, onChange, precision])
+  }, [isHovered, isEditing, step, clamp, onChange])
 
   const handleLabelPointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
@@ -107,16 +117,14 @@ export function SliderControl({
       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 s = getAdjustedStep(step, e)
       // 4 px per step at default sensitivity
       const newValue = clamp(
         Number.parseFloat((startValue + (dx / 4) * s).toFixed(stepPrecision(s))),
       )
       onChange(newValue)
     },
-    [step, precision, clamp, onChange],
+    [step, clamp, onChange],
   )
 
   const handleLabelPointerUp = useCallback(
@@ -163,12 +171,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))
       }

package/src/components/ui/item-catalog/catalog-items.tsx

@@ -1578,3 +1578,8 @@ export const CATALOG_ITEMS: AssetInput[] = [
     },
   },
 ]
+
+export function getDefaultCatalogItem(category: string | null | undefined): AssetInput | null {
+  if (!category) return null
+  return CATALOG_ITEMS.find((item) => item.category === category) ?? null
+}

package/src/components/ui/panels/ceiling-panel.tsx

@@ -2,27 +2,27 @@
 
 import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Edit, Plus, Trash2 } from 'lucide-react'
+import { Edit, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
+import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
-import { ActionButton } from '../controls/action-button'
+import { ActionButton, ActionGroup } from '../controls/action-button'
 import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
 
 export function CeilingPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const editingHole = useEditor((s) => s.editingHole)
   const setEditingHole = useEditor((s) => s.setEditingHole)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId
-    ? (nodes[selectedId as AnyNode['id']] as CeilingNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as CeilingNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<CeilingNode>) => {
@@ -34,7 +34,14 @@ export function CeilingPanel() {
 
   const handleMaterialChange = useCallback(
     (material: MaterialSchema) => {
-      handleUpdate({ material })
+      handleUpdate({ material, materialPreset: undefined })
+    },
+    [handleUpdate],
+  )
+
+  const handleMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      handleUpdate({ materialPreset, material: undefined })
     },
     [handleUpdate],
   )
@@ -77,7 +84,13 @@ export function CeilingPanel() {
       [cx - holeSize, cz + holeSize],
     ]
     const currentHoles = node?.holes || []
-    handleUpdate({ holes: [...currentHoles, newHole] })
+    const currentMetadata = currentHoles.map(
+      (_, index) => node?.holeMetadata?.[index] ?? { source: 'manual' as const },
+    )
+    handleUpdate({
+      holes: [...currentHoles, newHole],
+      holeMetadata: [...currentMetadata, { source: 'manual' }],
+    })
     setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
   }, [node, selectedId, handleUpdate, setEditingHole])
 
@@ -93,16 +106,28 @@ export function CeilingPanel() {
     (index: number) => {
       if (!selectedId) return
       const currentHoles = node?.holes || []
+      if (node?.holeMetadata?.[index]?.source === 'stair') return
       const newHoles = currentHoles.filter((_, i) => i !== index)
-      handleUpdate({ holes: newHoles })
+      const currentMetadata = currentHoles.map(
+        (_, metadataIndex) => node?.holeMetadata?.[metadataIndex] ?? { source: 'manual' as const },
+      )
+      const newMetadata = currentMetadata.filter((_, i) => i !== index)
+      handleUpdate({ holes: newHoles, holeMetadata: newMetadata })
       if (editingHole?.nodeId === selectedId && editingHole?.holeIndex === index) {
         setEditingHole(null)
       }
     },
-    [selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
+    [selectedId, node?.holes, node?.holeMetadata, handleUpdate, editingHole, setEditingHole],
   )
 
-  if (!node || node.type !== 'ceiling' || selectedIds.length !== 1) return null
+  const handleMove = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-pick')
+    setMovingNode(node)
+    setSelection({ selectedIds: [] })
+  }, [node, setMovingNode, setSelection])
+
+  if (!(node && node.type === 'ceiling' && selectedId)) return null
 
   const calculateArea = (polygon: Array<[number, number]>): number => {
     if (polygon.length < 3) return 0
@@ -110,8 +135,11 @@ export function CeilingPanel() {
     const n = polygon.length
     for (let i = 0; i < n; i++) {
       const j = (i + 1) % n
-      area += polygon[i]?.[0] * polygon[j]?.[1]
-      area -= polygon[j]?.[0] * polygon[i]?.[1]
+      const current = polygon[i]
+      const next = polygon[j]
+      if (!(current && next)) continue
+      area += current[0] * next[1]
+      area -= next[0] * current[1]
     }
     return Math.abs(area) / 2
   }
@@ -158,6 +186,8 @@ export function CeilingPanel() {
               const holeArea = calculateArea(hole)
               const isEditing =
                 editingHole?.nodeId === selectedId && editingHole?.holeIndex === index
+              const source = node.holeMetadata?.[index]?.source ?? 'manual'
+              const isAutoHole = source === 'stair'
               return (
                 <div
                   className={`flex items-center justify-between rounded-lg border p-2 transition-colors ${
@@ -174,7 +204,8 @@ export function CeilingPanel() {
                       Hole {index + 1} {isEditing && '(Editing)'}
                     </p>
                     <p className="text-[10px] text-muted-foreground">
-                      {holeArea.toFixed(2)} m² · {hole.length} pts
+                      {holeArea.toFixed(2)} m² · {hole.length} pts ·{' '}
+                      {isAutoHole ? 'Auto stair cutout' : 'Manual'}
                     </p>
                   </div>
                   <div className="flex items-center gap-1">
@@ -184,6 +215,10 @@ export function CeilingPanel() {
                         label="Done"
                         onClick={() => setEditingHole(null)}
                       />
+                    ) : isAutoHole ? (
+                      <div className="rounded-md bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
+                        Auto
+                      </div>
                     ) : (
                       <>
                         <button
@@ -223,8 +258,17 @@ export function CeilingPanel() {
       </PanelSection>
 
       <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+        <MaterialPicker
+          nodeType="ceiling"
+          onChange={handleMaterialChange}
+          onSelectMaterialPreset={handleMaterialPresetChange}
+          selectedMaterialPreset={node.materialPreset}
+          value={node.material}
+        />
       </PanelSection>
+      <ActionGroup>
+        <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
+      </ActionGroup>
     </PanelWrapper>
   )
 }

package/src/components/ui/panels/door-panel.tsx

@@ -25,17 +25,17 @@ import { PanelWrapper } from './panel-wrapper'
 import { PresetsPopover } from './presets/presets-popover'
 
 export function DoorPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
 
   const adapter = usePresetsAdapter()
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as DoorNode | undefined) : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as DoorNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<DoorNode>) => {
@@ -182,7 +182,7 @@ export function DoorPanel() {
     [handleUpdate],
   )
 
-  if (!node || node.type !== 'door' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'door' && selectedId)) return null
 
   const hSum = node.segments.reduce((s, seg) => s + seg.heightRatio, 0)
   const normHeights = node.segments.map((seg) => seg.heightRatio / hSum)