@pascal-app/editor 0.4.0 → 0.5.1

package/src/components/tools/window/window-tool.tsx

@@ -151,13 +151,25 @@ export const WindowTool: React.FC = () => {
       const { clampedX, clampedY } = clampToWall(event.node, localX, localY, width, height)
 
       if (draftRef.current) {
-        useScene.getState().updateNode(draftRef.current.id, {
-          position: [clampedX, clampedY, 0],
-          rotation: [0, itemRotation, 0],
-          side,
-          parentId: event.node.id,
-          wallId: event.node.id,
-        })
+        if (event.node.id !== draftRef.current.parentId) {
+          // Wall changed without enter/leave: must updateNode to reparent
+          useScene.getState().updateNode(draftRef.current.id, {
+            position: [clampedX, clampedY, 0],
+            rotation: [0, itemRotation, 0],
+            side,
+            parentId: event.node.id,
+            wallId: event.node.id,
+          })
+        } else {
+          // Same wall: update Three.js mesh directly to avoid store churn
+          const draftMesh = sceneRegistry.nodes.get(draftRef.current.id as AnyNodeId)
+          if (draftMesh) {
+            draftMesh.position.set(clampedX, clampedY, 0)
+            draftMesh.rotation.set(0, itemRotation, 0)
+            draftMesh.updateMatrixWorld(true)
+          }
+          markWallDirty(event.node.id)
+        }
       }
 
       const valid = !hasWallChildOverlap(

package/src/components/tools/zone/zone-tool.tsx

@@ -174,18 +174,18 @@ export const ZoneTool: React.FC = () => {
       if (!cursorRef.current) return
 
       // Snap to 0.5 grid
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
       cursorPosition = [gridX, gridZ]
-      levelYRef.current = event.position[1]
+      levelYRef.current = event.localPosition[1]
 
       // If we have points, snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
       if (lastPoint) {
         const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        cursorRef.current.position.set(snapped[0], event.position[1], snapped[1])
+        cursorRef.current.position.set(snapped[0], event.localPosition[1], snapped[1])
       } else {
-        cursorRef.current.position.set(gridX, event.position[1], gridZ)
+        cursorRef.current.position.set(gridX, event.localPosition[1], gridZ)
       }
 
       updatePreview()
@@ -194,8 +194,8 @@ export const ZoneTool: React.FC = () => {
     const onGridClick = (event: GridEvent) => {
       if (!currentLevelId) return
 
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
       let clickPoint: [number, number] = [gridX, gridZ]
 
       // Snap to axis from last point

package/src/components/ui/action-menu/structure-tools.tsx

@@ -28,6 +28,7 @@ export const tools: ToolConfig[] = [
   { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
   { id: 'door', iconSrc: '/icons/door.png', label: 'Door' },
   { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
+  { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
   { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
 ]
 

package/src/components/ui/helpers/building-helper.tsx

@@ -0,0 +1,32 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+interface BuildingHelperProps {
+  showRotate?: boolean
+}
+
+export function BuildingHelper({ showRotate }: BuildingHelperProps) {
+  return (
+    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Left click" />
+        <span className="text-muted-foreground">Place building</span>
+      </div>
+      {showRotate && (
+        <>
+          <div className="flex items-center gap-2 text-sm">
+            <ShortcutToken value="R" />
+            <span className="text-muted-foreground">Rotate counterclockwise</span>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <ShortcutToken value="T" />
+            <span className="text-muted-foreground">Rotate clockwise</span>
+          </div>
+        </>
+      )}
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Esc" />
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/helpers/helper-manager.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import useEditor from '../../../store/use-editor'
+import { BuildingHelper } from './building-helper'
 import { CeilingHelper } from './ceiling-helper'
 import { ItemHelper } from './item-helper'
 import { RoofHelper } from './roof-helper'
@@ -12,6 +13,7 @@ export function HelperManager() {
   const movingNode = useEditor((state) => state.movingNode)
 
   if (movingNode) {
+    if (movingNode.type === 'building') return <BuildingHelper showRotate />
     return <ItemHelper showEsc />
   }
 

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

@@ -0,0 +1,184 @@
+'use client'
+
+import { type AnyNode, type AnyNodeId, type FenceBaseStyle, type FenceNode, type FenceStyle, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+import { PanelSection } from '../controls/panel-section'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import { PanelWrapper } from './panel-wrapper'
+
+const FENCE_STYLE_OPTIONS: { label: string; value: FenceStyle }[] = [
+  { label: 'Slat', value: 'slat' },
+  { label: 'Rail', value: 'rail' },
+  { label: 'Privacy', value: 'privacy' },
+]
+
+const FENCE_BASE_STYLE_OPTIONS: { label: string; value: FenceBaseStyle }[] = [
+  { label: 'Grounded', value: 'grounded' },
+  { label: 'Floating', value: 'floating' },
+]
+
+export function FencePanel() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodes = useScene((s) => s.nodes)
+  const updateNode = useScene((s) => s.updateNode)
+
+  const selectedId = selectedIds[0]
+  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as FenceNode | undefined) : undefined
+
+  const handleUpdate = useCallback(
+    (updates: Partial<FenceNode>) => {
+      if (!selectedId) return
+      updateNode(selectedId as AnyNode['id'], updates)
+      useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
+    },
+    [selectedId, updateNode],
+  )
+
+  const handleUpdateLength = useCallback(
+    (newLength: number) => {
+      if (!node || newLength <= 0) return
+
+      const dx = node.end[0] - node.start[0]
+      const dz = node.end[1] - node.start[1]
+      const currentLength = Math.sqrt(dx * dx + dz * dz)
+      if (currentLength === 0) return
+
+      const dirX = dx / currentLength
+      const dirZ = dz / currentLength
+      const newEnd: [number, number] = [
+        node.start[0] + dirX * newLength,
+        node.start[1] + dirZ * newLength,
+      ]
+
+      handleUpdate({ end: newEnd })
+    },
+    [node, handleUpdate],
+  )
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+  }, [setSelection])
+
+  if (!node || node.type !== 'fence' || selectedIds.length !== 1) return null
+
+  const dx = node.end[0] - node.start[0]
+  const dz = node.end[1] - node.start[1]
+  const length = Math.sqrt(dx * dx + dz * dz)
+
+  return (
+    <PanelWrapper icon="/icons/build.png" onClose={handleClose} title={node.name || 'Fence'} width={300}>
+      <PanelSection title="Style">
+        <SegmentedControl
+          onChange={(value) => handleUpdate({ style: value })}
+          options={FENCE_STYLE_OPTIONS}
+          value={node.style}
+        />
+        <SegmentedControl
+          className="mt-2"
+          onChange={(value) => handleUpdate({ baseStyle: value })}
+          options={FENCE_BASE_STYLE_OPTIONS}
+          value={node.baseStyle}
+        />
+      </PanelSection>
+
+      <PanelSection title="Dimensions">
+        <SliderControl
+          label="Length"
+          max={50}
+          min={0.1}
+          onChange={handleUpdateLength}
+          precision={2}
+          step={0.01}
+          unit="m"
+          value={length}
+        />
+        <SliderControl
+          label="Height"
+          max={4}
+          min={0.4}
+          onChange={(value) => handleUpdate({ height: Math.max(0.4, value) })}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={node.height}
+        />
+        <SliderControl
+          label="Thickness"
+          max={0.5}
+          min={0.03}
+          onChange={(value) => handleUpdate({ thickness: Math.max(0.03, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.thickness}
+        />
+      </PanelSection>
+
+      <PanelSection title="Structure">
+        <SliderControl
+          label="Base Height"
+          max={1}
+          min={0.04}
+          onChange={(value) => handleUpdate({ baseHeight: Math.max(0.04, value) })}
+          precision={3}
+          step={0.01}
+          unit="m"
+          value={node.baseHeight}
+        />
+        <SliderControl
+          label="Top Rail"
+          max={0.25}
+          min={0.01}
+          onChange={(value) => handleUpdate({ topRailHeight: Math.max(0.01, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.topRailHeight}
+        />
+        <SliderControl
+          label="Post Spacing"
+          max={5}
+          min={0.2}
+          onChange={(value) => handleUpdate({ postSpacing: Math.max(0.2, value) })}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={node.postSpacing}
+        />
+        <SliderControl
+          label="Post Size"
+          max={0.4}
+          min={0.01}
+          onChange={(value) => handleUpdate({ postSize: Math.max(0.01, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.postSize}
+        />
+        <SliderControl
+          label="Ground Clear"
+          max={0.6}
+          min={0}
+          onChange={(value) => handleUpdate({ groundClearance: Math.max(0, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.groundClearance}
+        />
+        <SliderControl
+          label="Edge Inset"
+          max={0.25}
+          min={0.005}
+          onChange={(value) => handleUpdate({ edgeInset: Math.max(0.005, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.edgeInset}
+        />
+      </PanelSection>
+    </PanelWrapper>
+  )
+}

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

@@ -5,6 +5,7 @@ import { useViewer } from '@pascal-app/viewer'
 import useEditor from '../../../store/use-editor'
 import { CeilingPanel } from './ceiling-panel'
 import { DoorPanel } from './door-panel'
+import { FencePanel } from './fence-panel'
 import { ItemPanel } from './item-panel'
 import { ReferencePanel } from './reference-panel'
 import { RoofPanel } from './roof-panel'
@@ -47,6 +48,8 @@ export function PanelManager() {
           return <CeilingPanel />
         case 'wall':
           return <WallPanel />
+        case 'fence':
+          return <FencePanel />
         case 'door':
           return <DoorPanel />
         case 'window':

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

@@ -5,6 +5,9 @@ import {
   type AnyNodeId,
   type MaterialSchema,
   type StairNode,
+  type StairRailingMode,
+  type StairTopLandingMode,
+  type StairType,
   StairNode as StairNodeSchema,
   type StairSegmentNode,
   StairSegmentNode as StairSegmentNodeSchema,
@@ -15,19 +18,41 @@ import { Copy, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
 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'
 
+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' },
+]
+
 export function StairPanel() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   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 selectedId = selectedIds[0]
@@ -114,7 +139,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 +149,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) {
@@ -179,33 +207,158 @@ 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>
+
+      {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}
           />
-          <ActionButton
-            icon={<Plus className="h-3.5 w-3.5" />}
-            label="Add landing"
-            onClick={handleAddLanding}
+          <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}
           />
-        </div>
-      </PanelSection>
+          <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
@@ -280,6 +433,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} />