Phase 5 Stage E: full kind migration into packages/nodes

Wholesale move of every remaining kind into its own subdirectory under
`packages/nodes/src/`, finishing the registry-driven migration. Each
kind now ships its definition, schema (re-exported from core), and any
of `geometry` / `renderer` / `system` / `floorplan` / `tool` /
`move-tool` / `panel` / `floorplan-move` / `floorplan-affordances` /
`parametrics` / `preview` it needs — no per-kind code remains under
`packages/editor/src/components/tools/` or
`packages/viewer/src/components/renderers/`.

Deleted (replaced by registry-driven equivalents):
- `tools/{ceiling,column,door,fence,item,slab,spawn,wall,window}/...`
  (boundary editors, hole editors, placement tools, move tools,
  endpoint movers, curve tools, helpers, math libs)
- `ui/helpers/{ceiling,slab,wall}-helper.tsx`
- `ui/panels/{column,door,elevator,item,roof,roof-segment,spawn,
  stair,stair-segment,wall,window}-panel.tsx`
- `viewer/src/components/renderers/{building,ceiling,column,door,
  elevator,fence,guide,item,level,roof,roof-segment,scan,site,slab,
  spawn,stair,stair-segment,wall,window,zone}-renderer.tsx`
- `viewer/src/components/viewer/legacy-system.tsx`

Added under `packages/nodes/src/`:
- `building/`, `column/`, `elevator/`, `guide/`, `level/`, `roof/`,
  `roof-segment/`, `scan/`, `shared/`, `site/`, `stair/`,
  `stair-segment/` packages with definition + schema + renderer / system
  / floorplan / panel as appropriate.
- New `floorplan-move.ts` for every kind that supports 2D moves
  (ceiling, door, item, shelf, slab, window) — single registry-driven
  dispatch path via `def.floorplanMoveTarget`.
- New `floorplan-affordances.ts` for kinds with polygon / endpoint
  drags (ceiling, fence, slab, wall) — using the shared
  `polygon-vertex-affordance` factories.
- New per-kind `panel.tsx` for kinds with custom inspector content
  (door, item, shelf, spawn, wall, window).
- New per-kind `tool.tsx` for placement (door, item, shelf, window).
- New per-kind `move-tool.tsx` for kinds with custom 3D move flows
  (door, item, slab, window).

Coordinator + manager updates in `packages/editor/`:
- `tool-manager.tsx` resolves tools from the registry only — no
  hardcoded type→component map.
- `panel-manager.tsx` resolves inspector panels the same way.
- `placement-{coordinator,strategies,types}.ts` extended with
  shelf-surface placement.
- `selection-manager.tsx` adds the registry-selectable fallback.
- `floorplan-panel.tsx`, `floorplan-background-placement.ts`,
  `floorplan-render-context.tsx` updated for the registry layer's new
  contract (props, affordance dispatch, render context).

Viewer updates:
- `viewer/index.tsx` drops legacy renderer mounts.
- `node-renderer.tsx` resolves by registry only.
- `scene-bvh.tsx`, `use-node-events.ts`, `level-system.tsx`,
  `wall-cutout.tsx`, `zone-system.tsx`, `materials.ts` adjusted for
  the registry-only world.

Sidebar tree nodes for ceiling / fence / slab / shelf / tree-node
updated to read from the registered nodes instead of the deleted
legacy renderer trees.

Wiki: new `plugin-authoring.md` page, README index updated.

Tests in `packages/nodes/src/index.test.ts` validate every registered
kind has the required shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
2026-05-19 15:14:12 -04:00
co-authored by Claude Opus 4.7
parent 11015ea1ed
commit d747d2f0ea
204 changed files with 6888 additions and 7877 deletions
@@ -0,0 +1,52 @@
import { type NodeDefinition, RoofSegmentNode as RoofSegmentNodeSchema } from '@pascal-app/core'
import { buildRoofSegmentFloorplan } from './floorplan'
import { roofSegmentParametrics } from './parametrics'
import { RoofSegmentNode } from './schema'
/**
* Roof segment — Stage A. Child of a roof node, owns the per-segment
* polygon + pitch. Geometry is generated by `RoofSystem` (registered
* under the parent roof's `def.system`), so the segment kind itself
* only needs a renderer wrap.
*/
export const roofSegmentDefinition: NodeDefinition<typeof RoofSegmentNode> = {
kind: 'roof-segment',
schemaVersion: 1,
schema: RoofSegmentNode,
category: 'structure',
defaults: () => {
const stub = RoofSegmentNodeSchema.parse({
id: 'roof-segment_default' as never,
type: 'roof-segment',
})
const { id: _id, type: _type, ...rest } = stub
return rest
},
capabilities: {
selectable: { hitVolume: 'bbox' },
duplicable: false,
deletable: true,
},
parametrics: roofSegmentParametrics,
renderer: {
kind: 'parametric',
module: () => import('./renderer'),
},
floorplan: buildRoofSegmentFloorplan,
presentation: {
label: 'Roof Segment',
description: 'A single pitched plane of a parent roof.',
icon: { kind: 'url', src: '/icons/roof.png' },
paletteSection: 'structure',
paletteOrder: 101,
},
mcp: {
description: 'A single roof segment with polygon footprint + pitch.',
},
}
@@ -0,0 +1,106 @@
import type {
FloorplanGeometry,
FloorplanPoint,
GeometryContext,
RoofNode,
RoofSegmentNode,
} from '@pascal-app/core'
/**
* Stage C floor-plan builder for roof segment. Renders the segment's
* footprint as a rotated rectangle in world coords (parent roof's
* position + rotation composed with the segment's own).
*
* Inlined from `getRoofSegmentPolygon` / `getRoofSegmentCenter` in
* `floorplan-panel.tsx`. Ridge line not yet rendered — adds a follow-up
* for full visual parity.
*/
export function buildRoofSegmentFloorplan(
node: RoofSegmentNode,
ctx: GeometryContext,
): FloorplanGeometry | null {
const roof = ctx.parent as RoofNode | null
if (!roof || roof.type !== 'roof') return null
// Segment center in world coords: parent roof's transform applied to
// the segment's local position offset.
const cosRoof = Math.cos(roof.rotation)
const sinRoof = Math.sin(roof.rotation)
const localX = node.position[0]
const localZ = node.position[2]
const cx = roof.position[0] + localX * cosRoof - localZ * sinRoof
const cz = roof.position[2] + localX * sinRoof + localZ * cosRoof
const rotation = roof.rotation + node.rotation
const cos = Math.cos(rotation)
const sin = Math.sin(rotation)
const halfWidth = node.width / 2
const halfDepth = node.depth / 2
const corners: Array<[number, number]> = [
[-halfWidth, -halfDepth],
[halfWidth, -halfDepth],
[halfWidth, halfDepth],
[-halfWidth, halfDepth],
]
const points: FloorplanPoint[] = corners.map(([x, y]) => [
cx + x * cos - y * sin,
cz + x * sin + y * cos,
])
const view = ctx.viewState
const palette = view?.palette
const isSelected = view?.selected ?? false
const isHighlighted = view?.highlighted ?? false
const showSelectedChrome = isSelected || isHighlighted
const stroke =
showSelectedChrome && palette ? palette.selectedStroke : 'rgba(125, 211, 252, 0.82)'
const fill = showSelectedChrome ? '#fed7aa' : 'rgba(56, 189, 248, 0.16)'
const children: FloorplanGeometry[] = [
{
kind: 'polygon',
points,
fill,
stroke,
strokeWidth: showSelectedChrome ? 0.04 : 0.025,
strokeLinejoin: 'round',
opacity: 0.85,
},
]
// Ridge line — only for pitched segments, not flat roofs.
if (node.roofType !== 'flat') {
const ridgeAxis =
node.roofType === 'gable' || node.roofType === 'gambrel'
? 'x'
: node.roofType === 'dutch'
? node.width >= node.depth
? 'x'
: 'z'
: 'z'
const axisAngle = ridgeAxis === 'x' ? rotation : rotation + Math.PI / 2
const halfSpan = ridgeAxis === 'x' ? node.width / 2 : node.depth / 2
children.push({
kind: 'line',
x1: cx - halfSpan * Math.cos(axisAngle),
y1: cz - halfSpan * Math.sin(axisAngle),
x2: cx + halfSpan * Math.cos(axisAngle),
y2: cz + halfSpan * Math.sin(axisAngle),
stroke: showSelectedChrome ? '#eff6ff' : 'rgba(186, 230, 253, 0.84)',
strokeWidth: 1.4,
strokeLinecap: 'round',
vectorEffect: 'non-scaling-stroke',
})
}
if (isSelected) {
children.push({
kind: 'move-handle',
point: [cx, cz],
})
}
return { kind: 'group', children }
}
+1
View File
@@ -0,0 +1 @@
export { roofSegmentDefinition } from './definition'
+314
View File
@@ -0,0 +1,314 @@
'use client'
import {
type AnyNode,
type AnyNodeId,
type RoofSegmentNode,
RoofSegmentNode as RoofSegmentNodeSchema,
type RoofType,
useScene,
} from '@pascal-app/core'
import {
ActionButton,
ActionGroup,
PanelSection,
PanelWrapper,
SegmentedControl,
SliderControl,
triggerSFX,
useEditor,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { Copy, Move, Trash2 } from 'lucide-react'
import { useCallback } from 'react'
const ROOF_TYPE_OPTIONS: { label: string; value: RoofType }[] = [
{ label: 'Hip', value: 'hip' },
{ label: 'Gable', value: 'gable' },
{ label: 'Shed', value: 'shed' },
{ label: 'Flat', value: 'flat' },
]
const ROOF_TYPE_OPTIONS_2: { label: string; value: RoofType }[] = [
{ label: 'Gambrel', value: 'gambrel' },
{ label: 'Dutch', value: 'dutch' },
{ label: 'Mansard', value: 'mansard' },
]
export default function RoofSegmentPanel() {
const selectedId = useViewer((s) => s.selection.selectedIds[0])
const setSelection = useViewer((s) => s.setSelection)
const updateNode = useScene((s) => s.updateNode)
const setMovingNode = useEditor((s) => s.setMovingNode)
const node = useScene((s) =>
selectedId ? (s.nodes[selectedId as AnyNode['id']] as RoofSegmentNode | undefined) : undefined,
)
const handleUpdate = useCallback(
(updates: Partial<RoofSegmentNode>) => {
if (!selectedId) return
updateNode(selectedId as AnyNode['id'], updates)
},
[selectedId, updateNode],
)
const handleClose = useCallback(() => {
setSelection({ selectedIds: [] })
}, [setSelection])
const handleBack = useCallback(() => {
if (node?.parentId) {
setSelection({ selectedIds: [node.parentId] })
}
}, [node?.parentId, setSelection])
const handleDuplicate = useCallback(() => {
if (!node?.parentId) return
triggerSFX('sfx:item-pick')
let duplicateInfo = structuredClone(node) as any
delete duplicateInfo.id
duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
// Offset slightly so it's visible
duplicateInfo.position = [
duplicateInfo.position[0] + 1,
duplicateInfo.position[1],
duplicateInfo.position[2] + 1,
]
try {
const duplicate = RoofSegmentNodeSchema.parse(duplicateInfo)
useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
setSelection({ selectedIds: [] })
setMovingNode(duplicate)
} catch (e) {
console.error('Failed to duplicate roof segment', e)
}
}, [node, setSelection, setMovingNode])
const handleMove = useCallback(() => {
if (node) {
triggerSFX('sfx:item-pick')
setMovingNode(node)
setSelection({ selectedIds: [] })
}
}, [node, setMovingNode, setSelection])
const handleDelete = useCallback(() => {
if (!(selectedId && node)) return
triggerSFX('sfx:item-delete')
const parentId = node.parentId
useScene.getState().deleteNode(selectedId as AnyNodeId)
if (parentId) {
useScene.getState().dirtyNodes.add(parentId as AnyNodeId)
setSelection({ selectedIds: [parentId] })
} else {
setSelection({ selectedIds: [] })
}
}, [selectedId, node, setSelection])
if (!(node && node.type === 'roof-segment' && selectedId)) return null
return (
<PanelWrapper
icon="/icons/roof.png"
onBack={handleBack}
onClose={handleClose}
title={node.name || 'Roof Segment'}
width={300}
>
<PanelSection title="Roof Type">
<SegmentedControl
onChange={(v) => handleUpdate({ roofType: v })}
options={ROOF_TYPE_OPTIONS}
value={node.roofType}
/>
<SegmentedControl
onChange={(v) => handleUpdate({ roofType: v })}
options={ROOF_TYPE_OPTIONS_2}
value={node.roofType}
/>
</PanelSection>
<PanelSection title="Footprint">
<SliderControl
label="Width"
max={25}
min={0.5}
onChange={(v) => handleUpdate({ width: v })}
precision={2}
step={0.5}
unit="m"
value={Math.round(node.width * 100) / 100}
/>
<SliderControl
label="Depth"
max={25}
min={0.5}
onChange={(v) => handleUpdate({ depth: v })}
precision={2}
step={0.5}
unit="m"
value={Math.round(node.depth * 100) / 100}
/>
</PanelSection>
<PanelSection title="Heights">
<SliderControl
label="Wall"
max={5}
min={0}
onChange={(v) => handleUpdate({ wallHeight: v })}
precision={2}
step={0.1}
unit="m"
value={Math.round(node.wallHeight * 100) / 100}
/>
<SliderControl
label="Roof"
max={15}
min={0}
onChange={(v) => handleUpdate({ roofHeight: v })}
precision={2}
step={0.1}
unit="m"
value={Math.round(node.roofHeight * 100) / 100}
/>
</PanelSection>
<PanelSection title="Structure">
<SliderControl
label="Wall Thick."
max={1}
min={0.05}
onChange={(v) => handleUpdate({ wallThickness: v })}
precision={2}
step={0.05}
unit="m"
value={Math.round(node.wallThickness * 100) / 100}
/>
<SliderControl
label="Deck Thick."
max={0.3}
min={0.04}
onChange={(v) => handleUpdate({ deckThickness: v })}
precision={2}
step={0.01}
unit="m"
value={Math.round(node.deckThickness * 100) / 100}
/>
<SliderControl
label="Overhang"
max={1}
min={0}
onChange={(v) => handleUpdate({ overhang: v })}
precision={2}
step={0.05}
unit="m"
value={Math.round(node.overhang * 100) / 100}
/>
<SliderControl
label="Shingle Thick."
max={0.3}
min={0.02}
onChange={(v) => handleUpdate({ shingleThickness: v })}
precision={2}
step={0.01}
unit="m"
value={Math.round(node.shingleThickness * 100) / 100}
/>
</PanelSection>
<PanelSection title="Position">
<SliderControl
label="X"
max={50}
min={-50}
onChange={(v) => {
const pos = [...node.position] as [number, number, number]
pos[0] = v
handleUpdate({ position: pos })
}}
precision={2}
step={0.05}
unit="m"
value={Math.round(node.position[0] * 100) / 100}
/>
<SliderControl
label="Y"
max={50}
min={-50}
onChange={(v) => {
const pos = [...node.position] as [number, number, number]
pos[1] = v
handleUpdate({ position: pos })
}}
precision={2}
step={0.05}
unit="m"
value={Math.round(node.position[1] * 100) / 100}
/>
<SliderControl
label="Z"
max={50}
min={-50}
onChange={(v) => {
const pos = [...node.position] as [number, number, number]
pos[2] = v
handleUpdate({ position: pos })
}}
precision={2}
step={0.05}
unit="m"
value={Math.round(node.position[2] * 100) / 100}
/>
<SliderControl
label="Rotation"
max={180}
min={-180}
onChange={(degrees) => {
handleUpdate({ rotation: (degrees * Math.PI) / 180 })
}}
precision={0}
step={1}
unit="°"
value={Math.round((node.rotation * 180) / Math.PI)}
/>
<div className="flex gap-1.5 px-1 pt-2 pb-1">
<ActionButton
label="-45°"
onClick={() => {
triggerSFX('sfx:item-rotate')
handleUpdate({ rotation: node.rotation - Math.PI / 4 })
}}
/>
<ActionButton
label="+45°"
onClick={() => {
triggerSFX('sfx:item-rotate')
handleUpdate({ rotation: node.rotation + Math.PI / 4 })
}}
/>
</div>
</PanelSection>
<PanelSection title="Actions">
<ActionGroup>
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
<ActionButton
icon={<Copy className="h-3.5 w-3.5" />}
label="Duplicate"
onClick={handleDuplicate}
/>
<ActionButton
className="hover:bg-red-500/20"
icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
label="Delete"
onClick={handleDelete}
/>
</ActionGroup>
</PanelSection>
</PanelWrapper>
)
}
@@ -0,0 +1,6 @@
import type { ParametricDescriptor, RoofSegmentNode } from '@pascal-app/core'
export const roofSegmentParametrics: ParametricDescriptor<RoofSegmentNode> = {
groups: [],
customPanel: () => import('./panel'),
}
@@ -0,0 +1,65 @@
'use client'
import {
type AnyNodeId,
type RoofNode,
type RoofSegmentNode,
useRegistry,
useScene,
} from '@pascal-app/core'
import { getRoofMaterialArray, useNodeEvents, useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef } from 'react'
import * as THREE from 'three'
import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials'
export const RoofSegmentRenderer = ({ node }: { node: RoofSegmentNode }) => {
const ref = useRef<THREE.Mesh>(null!)
const nodes = useScene((state) => state.nodes)
useRegistry(node.id, 'roof-segment', ref)
const handlers = useNodeEvents(node, 'roof-segment')
const debugColors = useViewer((s) => s.debugColors)
const parentNode = node.parentId
? (nodes[node.parentId as AnyNodeId] as RoofNode | undefined)
: undefined
const placeholderGeometry = useMemo(() => {
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3))
geometry.addGroup(0, 0, 0)
geometry.addGroup(0, 0, 1)
geometry.addGroup(0, 0, 2)
geometry.addGroup(0, 0, 3)
return geometry
}, [])
const customMaterial = useMemo(() => {
if (node.material !== undefined || typeof node.materialPreset === 'string') {
return null
}
return parentNode ? getRoofMaterialArray(parentNode) : null
}, [node, parentNode])
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
useEffect(() => {
return () => {
placeholderGeometry.dispose()
}
}, [placeholderGeometry])
return (
<mesh
geometry={placeholderGeometry}
material={material}
position={node.position}
ref={ref}
rotation-y={node.rotation}
visible={node.visible}
{...handlers}
/>
)
}
export default RoofSegmentRenderer
@@ -0,0 +1 @@
export { RoofSegmentNode } from '@pascal-app/core'