@pascal-app/editor 0.7.0 → 0.8.0

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

@@ -1,9 +1,8 @@
 'use client'
 
 import useEditor from '../../../store/use-editor'
-import { SliderControl } from '../controls/slider-control'
-import { Input } from '../primitives/input'
 import { PanelSection } from '../controls/panel-section'
+import { Input } from '../primitives/input'
 import { PanelWrapper } from './panel-wrapper'
 
 function buildDefaultCustomMaterial() {
@@ -53,11 +52,7 @@ export function PaintPanel() {
   }
 
   return (
-    <PanelWrapper
-      onClose={() => setPaintPanelOpen(false)}
-      title="Material"
-      width={320}
-    >
+    <PanelWrapper onClose={() => setPaintPanelOpen(false)} title="Material" width={320}>
       <PanelSection title="Custom Material">
         <div className="space-y-3">
           <div className="space-y-2">
@@ -78,41 +73,71 @@ export function PaintPanel() {
             </div>
           </div>
 
-          <div className="space-y-1">
-            <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
-              Surface
-            </label>
-            <div className="space-y-1 rounded-lg border border-border/50 bg-background/40 p-2">
-              <SliderControl
-                label="Roughness"
-                max={1}
-                min={0}
-                onChange={(roughness) => updateCustomMaterial({ roughness })}
-                precision={2}
-                step={0.01}
-                value={currentProps.roughness}
-              />
-              <SliderControl
-                label="Metalness"
-                max={1}
-                min={0}
-                onChange={(metalness) => updateCustomMaterial({ metalness })}
-                precision={2}
-                step={0.01}
-                value={currentProps.metalness}
-              />
-              <SliderControl
-                label="Opacity"
-                max={1}
-                min={0}
-                onChange={(opacity) =>
-                  updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
-                }
-                precision={2}
-                step={0.01}
-                value={currentProps.opacity}
-              />
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+                Roughness
+              </label>
+              <span className="font-mono text-muted-foreground text-xs">
+                {currentProps.roughness.toFixed(2)}
+              </span>
+            </div>
+            <input
+              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+              max={1}
+              min={0}
+              onChange={(e) =>
+                updateCustomMaterial({ roughness: Number.parseFloat(e.target.value) })
+              }
+              step={0.01}
+              type="range"
+              value={currentProps.roughness}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+                Metalness
+              </label>
+              <span className="font-mono text-muted-foreground text-xs">
+                {currentProps.metalness.toFixed(2)}
+              </span>
+            </div>
+            <input
+              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+              max={1}
+              min={0}
+              onChange={(e) =>
+                updateCustomMaterial({ metalness: Number.parseFloat(e.target.value) })
+              }
+              step={0.01}
+              type="range"
+              value={currentProps.metalness}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+                Opacity
+              </label>
+              <span className="font-mono text-muted-foreground text-xs">
+                {currentProps.opacity.toFixed(2)}
+              </span>
             </div>
+            <input
+              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+              max={1}
+              min={0}
+              onChange={(e) => {
+                const opacity = Number.parseFloat(e.target.value)
+                updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
+              }}
+              step={0.01}
+              type="range"
+              value={currentProps.opacity}
+            />
           </div>
 
           <div className="space-y-2">

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

@@ -92,6 +92,8 @@ function panelForType(type: string | null) {
       return <StairSegmentPanel />
     case 'slab':
       return <SlabPanel />
+    case 'spawn':
+      return <SpawnPanel />
     case 'ceiling':
       return <CeilingPanel />
     case 'column':
@@ -238,36 +240,5 @@ export function PanelManager() {
   }
 
   // Show appropriate panel based on selected node type
-  if (selectedNodeType) {
-    switch (selectedNodeType) {
-      case 'item':
-        return <ItemPanel />
-      case 'roof':
-        return <RoofPanel />
-      case 'roof-segment':
-        return <RoofSegmentPanel />
-      case 'stair':
-        return <StairPanel />
-      case 'stair-segment':
-        return <StairSegmentPanel />
-      case 'slab':
-        return <SlabPanel />
-      case 'spawn':
-        return <SpawnPanel />
-      case 'ceiling':
-        return <CeilingPanel />
-      case 'column':
-        return <ColumnPanel />
-      case 'wall':
-        return <WallPanel />
-      case 'fence':
-        return <FencePanel />
-      case 'door':
-        return <DoorPanel />
-      case 'window':
-        return <WindowPanel />
-    }
-  }
-
-  return null
+  return panelForType(selectedNodeType)
 }

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

@@ -4,11 +4,21 @@ import {
   type AnyNode,
   type GuideNode,
   loadAssetUrl,
-  saveAsset,
   type ScanNode,
+  saveAsset,
   useScene,
 } from '@pascal-app/core'
-import { Eye, EyeOff, LocateFixed, Lock, RotateCcw, Ruler, Trash2, Unlock, Upload } from 'lucide-react'
+import {
+  Eye,
+  EyeOff,
+  LocateFixed,
+  Lock,
+  RotateCcw,
+  Ruler,
+  Trash2,
+  Unlock,
+  Upload,
+} from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { guideEmitter } from '../../../lib/guide-events'
 import { getGuideImageName } from '../../../lib/local-guide-image'
@@ -32,7 +42,9 @@ function getScaleStatus(guide: GuideNode, scaleReferenceVisible: boolean) {
 export function ReferencePanel() {
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
-  const guideUi = useEditor((s) => (selectedReferenceId ? s.guideUi[selectedReferenceId] : undefined))
+  const guideUi = useEditor((s) =>
+    selectedReferenceId ? s.guideUi[selectedReferenceId] : undefined,
+  )
   const setGuideLocked = useEditor((s) => s.setGuideLocked)
   const setGuideScaleReferenceVisible = useEditor((s) => s.setGuideScaleReferenceVisible)
   const clearGuideUi = useEditor((s) => s.clearGuideUi)
@@ -77,11 +89,14 @@ export function ReferencePanel() {
 
       try {
         const assetUrl = await saveAsset(file)
-        updateNode(selectedReferenceId as AnyNode['id'], {
-          name: getGuideImageName(file.name),
-          url: assetUrl,
-          scaleReference: null,
-        } as Partial<GuideNode>)
+        updateNode(
+          selectedReferenceId as AnyNode['id'],
+          {
+            name: getGuideImageName(file.name),
+            url: assetUrl,
+            scaleReference: null,
+          } as Partial<GuideNode>,
+        )
         setGuideScaleReferenceVisible(selectedReferenceId, true)
       } catch {
         setReplaceError('Could not replace that image.')
@@ -138,7 +153,7 @@ export function ReferencePanel() {
   const isScan = node.type === 'scan'
   const guideLocked = !isScan && guideUi?.locked === true
   const scaleReferenceVisible = !isScan && guideUi?.scaleReferenceVisible !== false
-  const scaleStatus = !isScan ? getScaleStatus(node, scaleReferenceVisible) : null
+  const scaleStatus = isScan ? null : getScaleStatus(node, scaleReferenceVisible)
 
   return (
     <PanelWrapper
@@ -165,16 +180,16 @@ export function ReferencePanel() {
 
             <ActionGroup>
               <ActionButton
+                disabled={isReplacing}
                 icon={<Upload className="h-3.5 w-3.5" />}
                 label={isReplacing ? 'Replacing...' : 'Replace'}
                 onClick={() => replaceInputRef.current?.click()}
-                disabled={isReplacing}
               />
               <ActionButton
+                className="text-destructive hover:bg-destructive/10"
                 icon={<Trash2 className="h-3.5 w-3.5" />}
                 label="Delete"
                 onClick={handleDeleteGuide}
-                className="text-destructive hover:bg-destructive/10"
               />
             </ActionGroup>
 
@@ -232,16 +247,16 @@ export function ReferencePanel() {
 
             <ActionGroup>
               <ActionButton
-                label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
                 disabled={!node.scaleReference}
+                label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
                 onClick={() => {
                   if (!node.scaleReference) return
                   setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)
                 }}
               />
               <ActionButton
-                label="Clear Scale"
                 disabled={!node.scaleReference}
+                label="Clear Scale"
                 onClick={() => handleUpdate({ scaleReference: null } as Partial<GuideNode>)}
               />
             </ActionGroup>

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

@@ -3,21 +3,25 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveRoofSurfaceMaterial,
+  type MaterialSchema,
   type RoofNode,
-  type RoofSurfaceMaterialRole,
   RoofNode as RoofNodeSchema,
   type RoofSegmentNode,
   RoofSegmentNode as RoofSegmentNodeSchema,
+  type RoofSurfaceMaterialRole,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Copy, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { sfxEmitter } from '../../../lib/sfx-bus'
+import { buildRoofSurfaceMaterialPatch } from '../../../lib/material-paint'
 import { duplicateRoofSubtree } from '../../../lib/roof-duplication'
+import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 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'
@@ -28,6 +32,7 @@ export function RoofPanel() {
   const updateNode = useScene((s) => s.updateNode)
   const createNode = useScene((s) => s.createNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
 
   const node = useScene((s) =>
     selectedId ? (s.nodes[selectedId as AnyNode['id']] as RoofNode | undefined) : undefined,
@@ -50,6 +55,35 @@ export function RoofPanel() {
     [selectedId, updateNode],
   )
 
+  const materialTargetRole =
+    selectedMaterialTarget &&
+    selectedMaterialTarget.nodeId === node?.id &&
+    (selectedMaterialTarget.role === 'top' ||
+      selectedMaterialTarget.role === 'edge' ||
+      selectedMaterialTarget.role === 'wall')
+      ? selectedMaterialTarget.role
+      : null
+  const materialPickerValue =
+    node && materialTargetRole ? getEffectiveRoofSurfaceMaterial(node, materialTargetRole) : {}
+
+  const handleTargetedMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      if (!(node && materialTargetRole)) return
+      handleUpdate(buildRoofSurfaceMaterialPatch(node, materialTargetRole, material, undefined))
+    },
+    [handleUpdate, materialTargetRole, node],
+  )
+
+  const handleTargetedMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      if (!(node && materialTargetRole)) return
+      handleUpdate(
+        buildRoofSurfaceMaterialPatch(node, materialTargetRole, undefined, materialPreset),
+      )
+    },
+    [handleUpdate, materialTargetRole, node],
+  )
+
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -225,6 +259,22 @@ export function RoofPanel() {
           />
         </ActionGroup>
       </PanelSection>
+      <PanelSection title="Material">
+        {materialTargetRole ? null : (
+          <div className="mb-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-[11px] text-muted-foreground">
+            Click the roof surface you want to edit. Materials apply to one target at a time.
+          </div>
+        )}
+        <MaterialPicker
+          disabled={!materialTargetRole}
+          hideSideControl
+          nodeType="roof"
+          onChange={handleTargetedMaterialChange}
+          onSelectMaterialPreset={handleTargetedMaterialPresetChange}
+          selectedMaterialPreset={materialPickerValue.materialPreset}
+          value={materialPickerValue.material}
+        />
+      </PanelSection>
     </PanelWrapper>
   )
 }

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

@@ -87,7 +87,7 @@ export function SpawnPanel() {
 
   if (!(node && node.type === 'spawn' && selectedId)) return null
 
-  const rotationDegrees = Math.round((((draftRotation ?? node.rotation) * 180) / Math.PI))
+  const rotationDegrees = Math.round(((draftRotation ?? node.rotation) * 180) / Math.PI)
   const storedRotationDegrees = Math.round((node.rotation * 180) / Math.PI)
 
   return (
@@ -97,7 +97,9 @@ export function SpawnPanel() {
           label="X"
           max={node.position[0] + 2}
           min={node.position[0] - 2}
-          onChange={(value) => handleUpdate({ position: [value, node.position[1], node.position[2]] })}
+          onChange={(value) =>
+            handleUpdate({ position: [value, node.position[1], node.position[2]] })
+          }
           precision={2}
           step={0.01}
           unit="m"
@@ -107,7 +109,9 @@ export function SpawnPanel() {
           label="Y"
           max={node.position[1] + 2}
           min={node.position[1] - 2}
-          onChange={(value) => handleUpdate({ position: [node.position[0], value, node.position[2]] })}
+          onChange={(value) =>
+            handleUpdate({ position: [node.position[0], value, node.position[2]] })
+          }
           precision={2}
           step={0.01}
           unit="m"
@@ -117,7 +121,9 @@ export function SpawnPanel() {
           label="Z"
           max={node.position[2] + 2}
           min={node.position[2] - 2}
-          onChange={(value) => handleUpdate({ position: [node.position[0], node.position[1], value] })}
+          onChange={(value) =>
+            handleUpdate({ position: [node.position[0], node.position[1], value] })
+          }
           precision={2}
           step={0.01}
           unit="m"

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

@@ -3,25 +3,31 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveStairSurfaceMaterial,
   type LevelNode,
+  type MaterialSchema,
   type StairNode,
+  StairNode as StairNodeSchema,
   type StairRailingMode,
+  type StairSegmentNode,
+  StairSegmentNode as StairSegmentNodeSchema,
   type StairSlabOpeningMode,
+  type StairSurfaceMaterialRole,
   type StairTopLandingMode,
   type StairType,
-  type StairSegmentNode,
-  StairSegmentNode as StairSegmentNodeSchema,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Copy, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
-import { duplicateStairSubtree } from '../../../lib/stair-duplication'
 import { useShallow } from 'zustand/react/shallow'
+import { buildStairSurfaceMaterialPatch } from '../../../lib/material-paint'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { duplicateStairSubtree } from '../../../lib/stair-duplication'
 import useEditor from '../../../store/use-editor'
 import { DEFAULT_SPIRAL_STAIR_SWEEP_ANGLE } from '../../tools/stair/stair-defaults'
 import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
@@ -59,6 +65,7 @@ export function StairPanel() {
   const updateNode = useScene((s) => s.updateNode)
   const createNode = useScene((s) => s.createNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
 
   const node = useScene((s) =>
     selectedId ? (s.nodes[selectedId as AnyNode['id']] as StairNode | undefined) : undefined,
@@ -89,6 +96,35 @@ export function StairPanel() {
     [selectedId, updateNode],
   )
 
+  const materialTargetRole =
+    selectedMaterialTarget &&
+    selectedMaterialTarget.nodeId === node?.id &&
+    (selectedMaterialTarget.role === 'railing' ||
+      selectedMaterialTarget.role === 'tread' ||
+      selectedMaterialTarget.role === 'side')
+      ? selectedMaterialTarget.role
+      : null
+  const materialPickerValue =
+    node && materialTargetRole ? getEffectiveStairSurfaceMaterial(node, materialTargetRole) : {}
+
+  const handleTargetedMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      if (!(node && materialTargetRole)) return
+      handleUpdate(buildStairSurfaceMaterialPatch(node, materialTargetRole, material, undefined))
+    },
+    [handleUpdate, materialTargetRole, node],
+  )
+
+  const handleTargetedMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      if (!(node && materialTargetRole)) return
+      handleUpdate(
+        buildStairSurfaceMaterialPatch(node, materialTargetRole, undefined, materialPreset),
+      )
+    },
+    [handleUpdate, materialTargetRole, node],
+  )
+
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -222,11 +258,11 @@ export function StairPanel() {
           />
 
           <div className="space-y-1.5">
-            <div className="px-1 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+            <div className="px-1 text-[11px] text-muted-foreground uppercase tracking-[0.14em]">
               From Level
             </div>
             <select
-              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-foreground text-sm"
               onChange={(event) => handleUpdate({ fromLevelId: event.target.value })}
               value={resolvedFromLevelId ?? ''}
             >
@@ -239,11 +275,11 @@ export function StairPanel() {
           </div>
 
           <div className="space-y-1.5">
-            <div className="px-1 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+            <div className="px-1 text-[11px] text-muted-foreground uppercase tracking-[0.14em]">
               To Level
             </div>
             <select
-              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-foreground text-sm"
               onChange={(event) => handleUpdate({ toLevelId: event.target.value })}
               value={resolvedToLevelId ?? ''}
             >
@@ -262,7 +298,7 @@ export function StairPanel() {
           />
 
           {(node.slabOpeningMode ?? 'none') === 'destination' ? (
-            <SliderControl
+            <MetricControl
               label="Opening Offset"
               max={0.5}
               min={0}
@@ -308,7 +344,7 @@ export function StairPanel() {
 
       {(node.stairType === 'curved' || node.stairType === 'spiral') && (
         <PanelSection title="Geometry">
-          <SliderControl
+          <MetricControl
             label="Width"
             max={10}
             min={0.4}
@@ -318,7 +354,7 @@ export function StairPanel() {
             unit="m"
             value={Math.round((node.width ?? 1) * 100) / 100}
           />
-          <SliderControl
+          <MetricControl
             label="Rise"
             max={10}
             min={0.2}
@@ -328,7 +364,7 @@ export function StairPanel() {
             unit="m"
             value={Math.round((node.totalRise ?? 2.5) * 100) / 100}
           />
-          <SliderControl
+          <MetricControl
             label="Steps"
             max={32}
             min={2}
@@ -346,7 +382,7 @@ export function StairPanel() {
             />
           )}
           {(node.stairType === 'spiral' || !(node.fillToFloor ?? true)) && (
-            <SliderControl
+            <MetricControl
               label="Thickness"
               max={1}
               min={0.02}
@@ -357,7 +393,7 @@ export function StairPanel() {
               value={Math.round((node.thickness ?? 0.25) * 100) / 100}
             />
           )}
-          <SliderControl
+          <MetricControl
             label="Inner Radius"
             max={10}
             min={node.stairType === 'spiral' ? 0.05 : 0.2}
@@ -385,7 +421,7 @@ export function StairPanel() {
                 value={node.topLandingMode ?? 'none'}
               />
               {(node.topLandingMode ?? 'none') === 'integrated' && (
-                <SliderControl
+                <MetricControl
                   label="Top Landing"
                   max={5}
                   min={0.3}
@@ -520,6 +556,22 @@ export function StairPanel() {
           />
         </ActionGroup>
       </PanelSection>
+      <PanelSection title="Material">
+        {materialTargetRole ? null : (
+          <div className="mb-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-[11px] text-muted-foreground">
+            Click the stair surface you want to edit. Materials apply to one target at a time.
+          </div>
+        )}
+        <MaterialPicker
+          disabled={!materialTargetRole}
+          hideSideControl
+          nodeType="stair"
+          onChange={handleTargetedMaterialChange}
+          onSelectMaterialPreset={handleTargetedMaterialPresetChange}
+          selectedMaterialPreset={materialPickerValue.materialPreset}
+          value={materialPickerValue.material}
+        />
+      </PanelSection>
     </PanelWrapper>
   )
 }