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>
2026-05-19 15:14:12 -04:00
parent 11015ea1ed
commit d747d2f0ea
204 changed files with 6888 additions and 7877 deletions
@@ -1,21 +1,291 @@
 'use client'

-import { ItemRenderer } from '@pascal-app/viewer'
+import {
+  type AnimationEffect,
+  type AnyNodeId,
+  type Interactive,
+  type ItemNode,
+  type LightEffect,
+  useInteractive,
+  useRegistry,
+  useScene,
+} from '@pascal-app/core'
+import {
+  baseMaterial,
+  ErrorBoundary,
+  glassMaterial,
+  NodeRenderer,
+  resolveCdnUrl,
+  useItemLightPool,
+  useNodeEvents,
+} from '@pascal-app/viewer'
+import { useAnimations } from '@react-three/drei'
+import { Clone } from '@react-three/drei/core/Clone'
+import { useGLTF } from '@react-three/drei/core/Gltf'
+import { useFrame } from '@react-three/fiber'
+import { Suspense, useEffect, useMemo, useRef } from 'react'
+import type { AnimationAction, Group, Material, Mesh } from 'three'
+import { MathUtils } from 'three'
+import { positionLocal, smoothstep, time } from 'three/tsl'
+import { MeshStandardNodeMaterial } from 'three/webgpu'
+
+const getMaterialForOriginal = (original: Material): Material => {
+  if (original.name.toLowerCase() === 'glass') {
+    return glassMaterial
+  }
+  return baseMaterial
+}
+
+const BrokenItemFallback = ({ node }: { node: ItemNode }) => {
+  const handlers = useNodeEvents(node, 'item')
+  const [w, h, d] = node.asset.dimensions
+  return (
+    <mesh position-y={h / 2} {...handlers}>
+      <boxGeometry args={[w, h, d]} />
+      <meshStandardMaterial color="#ef4444" opacity={0.6} transparent wireframe />
+    </mesh>
+  )
+}
+
+export const ItemRenderer = ({ node }: { node: ItemNode }) => {
+  const ref = useRef<Group>(null!)
+
+  useRegistry(node.id, node.type, ref)
+
+  return (
+    <group position={node.position} ref={ref} rotation={node.rotation} visible={node.visible}>
+      <ErrorBoundary fallback={<BrokenItemFallback node={node} />}>
+        <Suspense fallback={<PreviewModel node={node} />}>
+          <ModelRenderer node={node} />
+        </Suspense>
+      </ErrorBoundary>
+      {node.children?.map((childId) => (
+        <NodeRenderer key={childId} nodeId={childId} />
+      ))}
+    </group>
+  )
+}
+
+const previewMaterial = new MeshStandardNodeMaterial({
+  color: '#cccccc',
+  roughness: 1,
+  metalness: 0,
+  depthTest: false,
+})
+
+const previewOpacity = smoothstep(0.42, 0.55, positionLocal.y.add(time.mul(-0.2)).mul(10).fract())
+
+previewMaterial.opacityNode = previewOpacity
+previewMaterial.transparent = true
+
+const PreviewModel = ({ node }: { node: ItemNode }) => {
+  return (
+    <mesh material={previewMaterial} position-y={node.asset.dimensions[1] / 2}>
+      <boxGeometry
+        args={[node.asset.dimensions[0], node.asset.dimensions[1], node.asset.dimensions[2]]}
+      />
+    </mesh>
+  )
+}
+
+const multiplyScales = (
+  a: [number, number, number],
+  b: [number, number, number],
+): [number, number, number] => [a[0] * b[0], a[1] * b[1], a[2] * b[2]]
+
+const ModelRenderer = ({ node }: { node: ItemNode }) => {
+  const { scene, nodes, animations } = useGLTF(resolveCdnUrl(node.asset.src) || '')
+  const ref = useRef<Group>(null!)
+  const { actions } = useAnimations(animations, ref)
+  // Freeze the interactive definition at mount — asset schemas don't change at runtime
+  const interactiveRef = useRef(node.asset.interactive)
+
+  if (nodes.cutout) {
+    nodes.cutout.visible = false
+  }
+
+  const handlers = useNodeEvents(node, 'item')
+
+  useEffect(() => {
+    if (!node.parentId) return
+    useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
+  }, [node.parentId])
+
+  useEffect(() => {
+    const interactive = interactiveRef.current
+    if (!interactive) return
+    useInteractive.getState().initItem(node.id, interactive)
+    return () => useInteractive.getState().removeItem(node.id)
+  }, [node.id])
+
+  useMemo(() => {
+    scene.traverse((child) => {
+      if ((child as Mesh).isMesh) {
+        const mesh = child as Mesh
+        if (mesh.name === 'cutout') {
+          child.visible = false
+          return
+        }
+
+        let hasGlass = false
+
+        // Handle both single material and material array cases
+        if (Array.isArray(mesh.material)) {
+          mesh.material = mesh.material.map((mat) => getMaterialForOriginal(mat))
+          hasGlass = mesh.material.some((mat) => mat.name === 'glass')
+
+          // Fix geometry groups that reference materialIndex beyond the material
+          // array length — this causes three-mesh-bvh to crash with
+          // "Cannot read properties of undefined (reading 'side')"
+          const matCount = mesh.material.length
+          if (mesh.geometry.groups.length > 0) {
+            for (const group of mesh.geometry.groups) {
+              if (group.materialIndex !== undefined && group.materialIndex >= matCount) {
+                group.materialIndex = 0
+              }
+            }
+          }
+        } else {
+          mesh.material = getMaterialForOriginal(mesh.material)
+          hasGlass = mesh.material.name === 'glass'
+        }
+        mesh.castShadow = !hasGlass
+        mesh.receiveShadow = !hasGlass
+      }
+    })
+  }, [scene])
+
+  const interactive = interactiveRef.current
+  const animEffect =
+    interactive?.effects.find((e): e is AnimationEffect => e.kind === 'animation') ?? null
+  const lightEffects =
+    interactive?.effects.filter((e): e is LightEffect => e.kind === 'light') ?? []
+
+  // useGLTF caches scenes, and Clone shares child geometry/material references.
+  // Undo can unmount one item while another clone of the same asset still needs them.
+  return (
+    <>
+      <Clone
+        dispose={null}
+        object={scene}
+        position={node.asset.offset}
+        ref={ref}
+        rotation={node.asset.rotation}
+        scale={multiplyScales(node.asset.scale || [1, 1, 1], node.scale || [1, 1, 1])}
+        {...handlers}
+      />
+      {animations.length > 0 && (
+        <ItemAnimation
+          actions={actions}
+          animations={animations}
+          animEffect={animEffect}
+          interactive={interactive ?? null}
+          nodeId={node.id}
+        />
+      )}
+      {lightEffects.map((effect, i) => (
+        <ItemLightRegistrar
+          effect={effect}
+          index={i}
+          interactive={interactive!}
+          key={i}
+          nodeId={node.id}
+        />
+      ))}
+    </>
+  )
+}
+
+const ItemAnimation = ({
+  nodeId,
+  animEffect,
+  interactive,
+  actions,
+  animations,
+}: {
+  nodeId: AnyNodeId
+  animEffect: AnimationEffect | null
+  interactive: Interactive | null
+  actions: Record<string, AnimationAction | null>
+  animations: { name: string }[]
+}) => {
+  const activeClipRef = useRef<string | null>(null)
+  const fadingOutRef = useRef<AnimationAction | null>(null)
+
+  // Reactive: derive target clip name — only re-renders when the clip name itself changes
+  const targetClip = useInteractive((s) => {
+    const values = s.items[nodeId]?.controlValues
+    if (!animEffect) return animations[0]?.name ?? null
+    const toggleIndex = interactive!.controls.findIndex((c) => c.kind === 'toggle')
+    const isOn = toggleIndex >= 0 ? Boolean(values?.[toggleIndex]) : false
+    return isOn
+      ? (animEffect.clips.on ?? null)
+      : (animEffect.clips.off ?? animEffect.clips.loop ?? null)
+  })
+
+  // When target clip changes: kick off the transition
+  useEffect(() => {
+    // Cancel any ongoing fade-out immediately
+    if (fadingOutRef.current) {
+      fadingOutRef.current.timeScale = 0
+      fadingOutRef.current = null
+    }
+    // Move current clip to fade-out
+    if (activeClipRef.current && activeClipRef.current !== targetClip) {
+      const old = actions[activeClipRef.current]
+      if (old?.isRunning()) fadingOutRef.current = old
+    }
+    // Start new clip at timeScale 0.01 (as 0 would cause isRunning to be false and thus not play at all), then fade in to 1
+    activeClipRef.current = targetClip
+    if (targetClip) {
+      const next = actions[targetClip]
+      if (next) {
+        next.timeScale = 0.01
+        next.play()
+      }
+    }
+  }, [targetClip, actions])
+
+  // useFrame: only lerping — no logic
+  useFrame((_, delta) => {
+    if (fadingOutRef.current) {
+      const action = fadingOutRef.current
+      action.timeScale = MathUtils.lerp(action.timeScale, 0, Math.min(delta * 5, 1))
+      if (action.timeScale < 0.01) {
+        action.timeScale = 0
+        fadingOutRef.current = null
+      }
+    }
+    if (activeClipRef.current) {
+      const action = actions[activeClipRef.current]
+      if (action?.isRunning() && action.timeScale < 1) {
+        action.timeScale = MathUtils.lerp(action.timeScale, 1, Math.min(delta * 5, 1))
+        if (1 - action.timeScale < 0.01) action.timeScale = 1
+      }
+    }
+  })
+
+  return null
+}
+
+const ItemLightRegistrar = ({
+  nodeId,
+  effect,
+  interactive,
+  index,
+}: {
+  nodeId: AnyNodeId
+  effect: LightEffect
+  interactive: Interactive
+  index: number
+}) => {
+  useEffect(() => {
+    const key = `${nodeId}:${index}`
+    useItemLightPool.getState().register(key, nodeId, effect, interactive)
+    return () => useItemLightPool.getState().unregister(key)
+  }, [nodeId, index, effect, interactive])
+
+  return null
+}

-/**
- * Wrap-export of the legacy `ItemRenderer`.
- *
- * Item's renderer is ~280 lines using `useGLTF` from `@react-three/drei`
- * to load GLB assets from the CDN. It also handles asset-loaded
- * `interactive` widgets (clickable hot-spots, sliders inside the
- * scene), surface mounting, attachment offsets — too much code to
- * duplicate at Stage A. Phase 5 Stage F (cleanup) moves it into this
- * folder if useful, or leaves it in viewer with the public re-export.
- *
- * Item is also the first kind to demonstrate the "custom def.renderer"
- * escape hatch documented in plans/editor-node-registry.md — kinds with
- * GLB loaders, drei helpers, `useGLTF`, etc., set `def.renderer` to a
- * full React component rather than trying to express geometry as a
- * pure builder.
- */
 export default ItemRenderer