@pascal-app/editor 0.4.0 → 0.6.0

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

@@ -3,8 +3,15 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveStairSurfaceMaterial,
+  type LevelNode,
   type MaterialSchema,
   type StairNode,
+  type StairRailingMode,
+  type StairSurfaceMaterialRole,
+  type StairSlabOpeningMode,
+  type StairTopLandingMode,
+  type StairType,
   StairNode as StairNodeSchema,
   type StairSegmentNode,
   StairSegmentNode as StairSegmentNodeSchema,
@@ -13,27 +20,98 @@ import {
 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 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'
 import { SliderControl } from '../controls/slider-control'
+import { ToggleControl } from '../controls/toggle-control'
 import { PanelWrapper } from './panel-wrapper'
 
+function buildStairSurfaceMaterialPatch(
+  node: StairNode,
+  targetRole: StairSurfaceMaterialRole,
+  material: MaterialSchema | undefined,
+  materialPreset: string | undefined,
+): Partial<StairNode> {
+  const nextSurfaceMaterial = { material, materialPreset }
+  const nextRailing =
+    targetRole === 'railing' ? nextSurfaceMaterial : getEffectiveStairSurfaceMaterial(node, 'railing')
+  const nextTread =
+    targetRole === 'tread' ? nextSurfaceMaterial : getEffectiveStairSurfaceMaterial(node, 'tread')
+  const nextSide =
+    targetRole === 'side' ? nextSurfaceMaterial : getEffectiveStairSurfaceMaterial(node, 'side')
+
+  return {
+    railingMaterial: nextRailing.material,
+    railingMaterialPreset: nextRailing.materialPreset,
+    treadMaterial: nextTread.material,
+    treadMaterialPreset: nextTread.materialPreset,
+    sideMaterial: nextSide.material,
+    sideMaterialPreset: nextSide.materialPreset,
+    material: undefined,
+    materialPreset: undefined,
+  }
+}
+
+const RAILING_MODE_OPTIONS: { label: string; value: StairRailingMode }[] = [
+  { label: 'None', value: 'none' },
+  { label: 'Left', value: 'left' },
+  { label: 'Right', value: 'right' },
+  { label: 'Both', value: 'both' },
+]
+
+const STAIR_TYPE_OPTIONS: { label: string; value: StairType }[] = [
+  { label: 'Straight', value: 'straight' },
+  { label: 'Curved', value: 'curved' },
+  { label: 'Spiral', value: 'spiral' },
+]
+
+const TOP_LANDING_MODE_OPTIONS: { label: string; value: StairTopLandingMode }[] = [
+  { label: 'None', value: 'none' },
+  { label: 'Integrated', value: 'integrated' },
+]
+
+const STAIR_SLAB_OPENING_OPTIONS: { label: string; value: StairSlabOpeningMode }[] = [
+  { label: 'None', value: 'none' },
+  { label: 'Destination', value: 'destination' },
+]
+
 export function StairPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
+  const selectedCount = useViewer((s) => s.selection.selectedIds.length)
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const createNode = useScene((s) => s.createNode)
+  const createNodes = useScene((s) => s.createNodes)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId
-    ? (nodes[selectedId as AnyNode['id']] as StairNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as StairNode | undefined) : undefined,
+  )
+  const levels = useScene(
+    useShallow((s) =>
+      Object.values(s.nodes)
+        .filter((entry): entry is LevelNode => entry.type === 'level')
+        .sort((left, right) => left.level - right.level),
+    ),
+  )
+  const segments = useScene(
+    useShallow((s) => {
+      if (!selectedId) return []
+      const stairNode = s.nodes[selectedId as AnyNode['id']] as StairNode | undefined
+      if (stairNode?.type !== 'stair') return []
+      return (stairNode.children ?? [])
+        .map((childId) => s.nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
+        .filter((entry): entry is StairSegmentNode => entry?.type === 'stair-segment')
+    }),
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<StairNode>) => {
@@ -43,11 +121,31 @@ export function StairPanel() {
     [selectedId, updateNode],
   )
 
-  const handleMaterialChange = useCallback(
+  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) => {
-      handleUpdate({ material })
+      if (!node || !materialTargetRole) return
+      handleUpdate(buildStairSurfaceMaterialPatch(node, materialTargetRole, material, undefined))
     },
-    [handleUpdate],
+    [handleUpdate, materialTargetRole, node],
+  )
+
+  const handleTargetedMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      if (!node || !materialTargetRole) return
+      handleUpdate(buildStairSurfaceMaterialPatch(node, materialTargetRole, undefined, materialPreset))
+    },
+    [handleUpdate, materialTargetRole, node],
   )
 
   const handleClose = useCallback(() => {
@@ -59,13 +157,15 @@ export function StairPanel() {
     const children = node.children ?? []
     const lastChildId = children[children.length - 1]
     if (lastChildId) {
-      const lastChild = nodes[lastChildId as AnyNodeId] as StairSegmentNode | undefined
+      const lastChild = useScene.getState().nodes[lastChildId as AnyNodeId] as
+        | StairSegmentNode
+        | undefined
       if (lastChild?.type === 'stair-segment') {
         return { fillToFloor: lastChild.fillToFloor }
       }
     }
     return { fillToFloor: true }
-  }, [node, nodes])
+  }, [node])
 
   const handleAddFlight = useCallback(() => {
     if (!node) return
@@ -114,7 +214,8 @@ export function StairPanel() {
 
     let duplicateInfo = structuredClone(node) as any
     delete duplicateInfo.id
-    duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
+    duplicateInfo.metadata = { ...duplicateInfo.metadata }
+    duplicateInfo.children = []
     duplicateInfo.position = [
       duplicateInfo.position[0] + 1,
       duplicateInfo.position[1],
@@ -123,29 +224,31 @@ export function StairPanel() {
 
     try {
       const duplicate = StairNodeSchema.parse(duplicateInfo)
-      useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
 
-      // Also duplicate all child segments
       const nodesState = useScene.getState().nodes
       const children = node.children || []
+      const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
+        { node: duplicate, parentId: duplicate.parentId as AnyNodeId },
+      ]
 
       for (const childId of children) {
         const childNode = nodesState[childId]
         if (childNode && childNode.type === 'stair-segment') {
           let childDuplicateInfo = structuredClone(childNode) as any
           delete childDuplicateInfo.id
-          childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
+          childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata }
           const childDuplicate = StairSegmentNodeSchema.parse(childDuplicateInfo)
-          useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
+          createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
         }
       }
 
-      setSelection({ selectedIds: [] })
-      setMovingNode(duplicate)
+      createNodes(createOps)
+
+      setSelection({ selectedIds: [duplicate.id as AnyNode['id']] })
     } catch (e) {
       console.error('Failed to duplicate stair', e)
     }
-  }, [node, setSelection, setMovingNode])
+  }, [createNodes, node, setSelection])
 
   const handleMove = useCallback(() => {
     if (node) {
@@ -166,11 +269,10 @@ export function StairPanel() {
     setSelection({ selectedIds: [] })
   }, [selectedId, node, setSelection])
 
-  if (!node || node.type !== 'stair' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'stair' && selectedId && selectedCount === 1)) return null
 
-  const segments = (node.children ?? [])
-    .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
-    .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+  const resolvedFromLevelId = node.fromLevelId ?? node.parentId ?? levels[0]?.id ?? null
+  const resolvedToLevelId = node.toLevelId ?? resolvedFromLevelId
 
   return (
     <PanelWrapper
@@ -179,36 +281,228 @@ export function StairPanel() {
       title={node.name || 'Staircase'}
       width={300}
     >
-      <PanelSection title="Segments">
-        <div className="flex flex-col gap-1">
-          {segments.map((seg, i) => (
-            <button
-              className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
-              key={seg.id}
-              onClick={() => handleSelectSegment(seg.id)}
-              type="button"
-            >
-              <span className="truncate">{seg.name || `Segment ${i + 1}`}</span>
-              <span className="text-muted-foreground text-xs capitalize">{seg.segmentType}</span>
-            </button>
-          ))}
-        </div>
-        <div className="flex gap-1.5">
-          <ActionButton
-            icon={<Plus className="h-3.5 w-3.5" />}
-            label="Add flight"
-            onClick={handleAddFlight}
+      <PanelSection title="Type">
+        <SegmentedControl
+          onChange={(value) =>
+            handleUpdate(
+              value === 'spiral' && node.stairType !== 'spiral'
+                ? {
+                    stairType: value,
+                    sweepAngle: DEFAULT_SPIRAL_STAIR_SWEEP_ANGLE,
+                    position: [node.position[0], 0, node.position[2]],
+                  }
+                : { stairType: value },
+            )
+          }
+          options={STAIR_TYPE_OPTIONS}
+          value={node.stairType ?? 'straight'}
+        />
+      </PanelSection>
+
+      <PanelSection title="Opening">
+        <div className="space-y-3">
+          <ToggleControl
+            checked={(node.slabOpeningMode ?? 'none') === 'destination'}
+            label="Auto Cutout"
+            onChange={(checked) =>
+              handleUpdate({
+                slabOpeningMode: checked ? 'destination' : 'none',
+              })
+            }
           />
-          <ActionButton
-            icon={<Plus className="h-3.5 w-3.5" />}
-            label="Add landing"
-            onClick={handleAddLanding}
+
+          <div className="space-y-1.5">
+            <div className="px-1 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+              From Level
+            </div>
+            <select
+              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+              onChange={(event) => handleUpdate({ fromLevelId: event.target.value })}
+              value={resolvedFromLevelId ?? ''}
+            >
+              {levels.map((level) => (
+                <option key={level.id} value={level.id}>
+                  {level.name || `Level ${level.level + 1}`}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="px-1 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+              To Level
+            </div>
+            <select
+              className="h-9 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground"
+              onChange={(event) => handleUpdate({ toLevelId: event.target.value })}
+              value={resolvedToLevelId ?? ''}
+            >
+              {levels.map((level) => (
+                <option key={level.id} value={level.id}>
+                  {level.name || `Level ${level.level + 1}`}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <SegmentedControl
+            onChange={(value) => handleUpdate({ slabOpeningMode: value as StairSlabOpeningMode })}
+            options={STAIR_SLAB_OPENING_OPTIONS}
+            value={node.slabOpeningMode ?? 'none'}
           />
+
+          {(node.slabOpeningMode ?? 'none') === 'destination' ? (
+            <MetricControl
+              label="Opening Offset"
+              max={0.5}
+              min={0}
+              onChange={(value) => handleUpdate({ openingOffset: value })}
+              precision={2}
+              step={0.01}
+              unit="m"
+              value={Math.round((node.openingOffset ?? 0) * 100) / 100}
+            />
+          ) : null}
         </div>
       </PanelSection>
 
+      {node.stairType === 'straight' && (
+        <PanelSection title="Segments">
+          <div className="flex flex-col gap-1">
+            {segments.map((seg, i) => (
+              <button
+                className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+                key={seg.id}
+                onClick={() => handleSelectSegment(seg.id)}
+                type="button"
+              >
+                <span className="truncate">{seg.name || `Segment ${i + 1}`}</span>
+                <span className="text-muted-foreground text-xs capitalize">{seg.segmentType}</span>
+              </button>
+            ))}
+          </div>
+          <div className="flex gap-1.5">
+            <ActionButton
+              icon={<Plus className="h-3.5 w-3.5" />}
+              label="Add flight"
+              onClick={handleAddFlight}
+            />
+            <ActionButton
+              icon={<Plus className="h-3.5 w-3.5" />}
+              label="Add landing"
+              onClick={handleAddLanding}
+            />
+          </div>
+        </PanelSection>
+      )}
+
+      {(node.stairType === 'curved' || node.stairType === 'spiral') && (
+        <PanelSection title="Geometry">
+          <MetricControl
+            label="Width"
+            max={10}
+            min={0.4}
+            onChange={(value) => handleUpdate({ width: value })}
+            precision={2}
+            step={0.05}
+            unit="m"
+            value={Math.round((node.width ?? 1) * 100) / 100}
+          />
+          <MetricControl
+            label="Rise"
+            max={10}
+            min={0.2}
+            onChange={(value) => handleUpdate({ totalRise: value })}
+            precision={2}
+            step={0.05}
+            unit="m"
+            value={Math.round((node.totalRise ?? 2.5) * 100) / 100}
+          />
+          <MetricControl
+            label="Steps"
+            max={32}
+            min={2}
+            onChange={(value) => handleUpdate({ stepCount: Math.max(2, Math.round(value)) })}
+            precision={0}
+            step={1}
+            unit=""
+            value={Math.max(2, Math.round(node.stepCount ?? 10))}
+          />
+          {node.stairType !== 'spiral' && (
+            <ToggleControl
+              checked={node.fillToFloor ?? true}
+              label="Fit To Floor"
+              onChange={(checked) => handleUpdate({ fillToFloor: checked })}
+            />
+          )}
+          {(node.stairType === 'spiral' || !(node.fillToFloor ?? true)) && (
+            <MetricControl
+              label="Thickness"
+              max={1}
+              min={0.02}
+              onChange={(value) => handleUpdate({ thickness: value })}
+              precision={2}
+              step={0.01}
+              unit="m"
+              value={Math.round((node.thickness ?? 0.25) * 100) / 100}
+            />
+          )}
+          <MetricControl
+            label="Inner Radius"
+            max={10}
+            min={node.stairType === 'spiral' ? 0.05 : 0.2}
+            onChange={(value) => handleUpdate({ innerRadius: value })}
+            precision={2}
+            step={0.05}
+            unit="m"
+            value={Math.round((node.innerRadius ?? 0.9) * 100) / 100}
+          />
+          <SliderControl
+            label="Sweep"
+            max={node.stairType === 'spiral' ? 720 : 270}
+            min={node.stairType === 'spiral' ? -720 : -270}
+            onChange={(degrees) => handleUpdate({ sweepAngle: (degrees * Math.PI) / 180 })}
+            precision={0}
+            step={1}
+            unit="°"
+            value={Math.round(((node.sweepAngle ?? Math.PI / 2) * 180) / Math.PI)}
+          />
+          {node.stairType === 'spiral' && (
+            <>
+              <SegmentedControl
+                onChange={(value) => handleUpdate({ topLandingMode: value })}
+                options={TOP_LANDING_MODE_OPTIONS}
+                value={node.topLandingMode ?? 'none'}
+              />
+              {(node.topLandingMode ?? 'none') === 'integrated' && (
+                <MetricControl
+                  label="Top Landing"
+                  max={5}
+                  min={0.3}
+                  onChange={(value) => handleUpdate({ topLandingDepth: value })}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round((node.topLandingDepth ?? 0.9) * 100) / 100}
+                />
+              )}
+              <ToggleControl
+                checked={node.showCenterColumn ?? true}
+                label="Center Column"
+                onChange={(checked) => handleUpdate({ showCenterColumn: checked })}
+              />
+              <ToggleControl
+                checked={node.showStepSupports ?? true}
+                label="Step Supports"
+                onChange={(checked) => handleUpdate({ showStepSupports: checked })}
+              />
+            </>
+          )}
+        </PanelSection>
+      )}
+
       <PanelSection title="Position">
-        <MetricControl
+        <SliderControl
           label="X"
           max={50}
           min={-50}
@@ -222,7 +516,7 @@ export function StairPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Y"
           max={50}
           min={-50}
@@ -236,7 +530,7 @@ export function StairPanel() {
           unit="m"
           value={Math.round(node.position[1] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Z"
           max={50}
           min={-50}
@@ -280,6 +574,26 @@ export function StairPanel() {
         </div>
       </PanelSection>
 
+      <PanelSection title="Railing">
+        <SegmentedControl
+          onChange={(value) => handleUpdate({ railingMode: value })}
+          options={RAILING_MODE_OPTIONS}
+          value={node.railingMode ?? 'none'}
+        />
+        {(node.railingMode ?? 'none') !== 'none' && (
+          <SliderControl
+            label="Height"
+            max={1.4}
+            min={0.7}
+            onChange={(value) => handleUpdate({ railingHeight: value })}
+            precision={2}
+            step={0.02}
+            unit="m"
+            value={Math.round((node.railingHeight ?? 0.92) * 100) / 100}
+          />
+        )}
+      </PanelSection>
+
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
@@ -297,7 +611,20 @@ export function StairPanel() {
         </ActionGroup>
       </PanelSection>
       <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+        {!materialTargetRole ? (
+          <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>
+        ) : null}
+        <MaterialPicker
+          disabled={!materialTargetRole}
+          hideSideControl
+          nodeType="stair"
+          onChange={handleTargetedMaterialChange}
+          onSelectMaterialPreset={handleTargetedMaterialPresetChange}
+          selectedMaterialPreset={materialPickerValue.materialPreset}
+          value={materialPickerValue.material}
+        />
       </PanelSection>
     </PanelWrapper>
   )

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

@@ -17,7 +17,6 @@ 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 { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
@@ -35,25 +34,24 @@ const ATTACHMENT_SIDE_OPTIONS: { label: string; value: AttachmentSide }[] = [
 ]
 
 export function StairSegmentPanel() {
-  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 setMovingNode = useEditor((s) => s.setMovingNode)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId
-    ? (nodes[selectedId as AnyNode['id']] as StairSegmentNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as StairSegmentNode | undefined) : undefined,
+  )
 
-  // Check if this is the first segment in the parent stair
-  const isFirstSegment = (() => {
+  // Boolean selector — re-renders only when this segment's position among the
+  // parent stair's children flips to/from "first".
+  const isFirstSegment = useScene((s) => {
     if (!node?.parentId) return true
-    const parent = nodes[node.parentId as AnyNodeId]
+    const parent = s.nodes[node.parentId as AnyNodeId]
     if (!parent || parent.type !== 'stair') return true
     const children = (parent as any).children ?? []
     return children[0] === node.id
-  })()
+  })
 
   const handleUpdate = useCallback(
     (updates: Partial<StairSegmentNode>) => {
@@ -65,7 +63,14 @@ export function StairSegmentPanel() {
 
   const handleMaterialChange = useCallback(
     (material: MaterialSchema) => {
-      handleUpdate({ material })
+      handleUpdate({ material, materialPreset: undefined })
+    },
+    [handleUpdate],
+  )
+
+  const handleMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      handleUpdate({ materialPreset, material: undefined })
     },
     [handleUpdate],
   )
@@ -124,7 +129,7 @@ export function StairSegmentPanel() {
     }
   }, [selectedId, node, setSelection])
 
-  if (!node || node.type !== 'stair-segment' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'stair-segment' && selectedId)) return null
 
   return (
     <PanelWrapper
@@ -243,7 +248,7 @@ export function StairSegmentPanel() {
       </PanelSection>
 
       <PanelSection title="Position">
-        <MetricControl
+        <SliderControl
           label="X"
           max={50}
           min={-50}
@@ -257,7 +262,7 @@ export function StairSegmentPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Y"
           max={50}
           min={-50}
@@ -271,7 +276,7 @@ export function StairSegmentPanel() {
           unit="m"
           value={Math.round(node.position[1] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Z"
           max={50}
           min={-50}
@@ -332,7 +337,13 @@ export function StairSegmentPanel() {
         </ActionGroup>
       </PanelSection>
       <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+        <MaterialPicker
+          nodeType="stair-segment"
+          onChange={handleMaterialChange}
+          onSelectMaterialPreset={handleMaterialPresetChange}
+          selectedMaterialPreset={node.materialPreset}
+          value={node.material}
+        />
       </PanelSection>
     </PanelWrapper>
   )