@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/tools/select/select-candidates.test.ts

@@ -0,0 +1,109 @@
+import { beforeAll, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeDefinition,
+  nodeRegistry,
+  registerNode,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { z } from 'zod'
+import useEditor from '../../../store/use-editor'
+import { collectSelectableCandidateIds } from './select-candidates'
+
+function registerSelectableElevatorTestKind() {
+  if (nodeRegistry.has('elevator')) return
+
+  registerNode({
+    kind: 'elevator',
+    schemaVersion: 1,
+    schema: z.object({ type: z.literal('elevator') }) as never,
+    category: 'structure',
+    defaults: () => ({}),
+    capabilities: { selectable: {} },
+    floorplanScope: 'building',
+    renderer: { kind: 'parametric', module: async () => ({ default: () => null }) },
+  } as AnyNodeDefinition)
+}
+
+describe('selectable candidates', () => {
+  beforeAll(() => {
+    registerSelectableElevatorTestKind()
+  })
+
+  beforeEach(() => {
+    useScene.setState({
+      nodes: {},
+      rootNodeIds: [],
+      dirtyNodes: new Set(),
+      collections: {},
+    } as never)
+    useViewer.setState({
+      selection: {
+        buildingId: 'building_test',
+        levelId: 'level_test',
+        zoneId: null,
+        selectedIds: [],
+      },
+      previewSelectedIds: [],
+    })
+    useEditor.setState({
+      phase: 'structure',
+      structureLayer: 'elements',
+    })
+  })
+
+  test('includes building-scoped elevators for the active level building', () => {
+    useScene.setState({
+      nodes: {
+        building_test: {
+          id: 'building_test',
+          type: 'building',
+          children: ['level_test', 'elevator_test'],
+        },
+        level_test: {
+          id: 'level_test',
+          type: 'level',
+          parentId: 'building_test',
+          children: [],
+        },
+        elevator_test: {
+          id: 'elevator_test',
+          type: 'elevator',
+          parentId: 'building_test',
+          position: [1, 0, 2],
+          rotation: 0,
+        },
+      } as unknown as Record<string, AnyNode>,
+    } as never)
+
+    expect(collectSelectableCandidateIds()).toContain('elevator_test')
+  })
+
+  test('includes legacy level-parented elevators already loaded in the editor', () => {
+    useScene.setState({
+      nodes: {
+        building_test: {
+          id: 'building_test',
+          type: 'building',
+          children: ['level_test'],
+        },
+        level_test: {
+          id: 'level_test',
+          type: 'level',
+          parentId: 'building_test',
+          children: ['elevator_test'],
+        },
+        elevator_test: {
+          id: 'elevator_test',
+          type: 'elevator',
+          parentId: 'level_test',
+          position: [1, 0, 2],
+          rotation: 0,
+        },
+      } as unknown as Record<string, AnyNode>,
+    } as never)
+
+    expect(collectSelectableCandidateIds()).toContain('elevator_test')
+  })
+})

package/src/components/tools/select/select-candidates.ts

@@ -0,0 +1,85 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  isRegistrySelectable,
+  type LevelNode,
+  nodeRegistry,
+  resolveBuildingForLevel,
+  resolveLevelId,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor from '../../../store/use-editor'
+
+function isVisibleSelectableNode(node: AnyNode): boolean {
+  if ((node as { visible?: boolean }).visible === false) return false
+  return isRegistrySelectable(node.type)
+}
+
+export function collectSelectableCandidateIds(): string[] {
+  const { levelId } = useViewer.getState().selection
+  const { nodes } = useScene.getState()
+  const { phase, structureLayer } = useEditor.getState()
+  const result: string[] = []
+  const seen = new Set<string>()
+  const addNode = (node: AnyNode | undefined) => {
+    if (!node || seen.has(node.id) || (node as { visible?: boolean }).visible === false) return
+    seen.add(node.id)
+    result.push(node.id)
+  }
+  const visitLevelDescendant = (id: AnyNodeId) => {
+    const node = nodes[id]
+    if (!node || seen.has(node.id) || (node as { visible?: boolean }).visible === false) return
+
+    if (isRegistrySelectable(node.type)) {
+      addNode(node)
+    }
+
+    const children = 'children' in node && Array.isArray(node.children) ? node.children : []
+    for (const childId of children) {
+      visitLevelDescendant(childId as AnyNodeId)
+    }
+  }
+
+  if (phase === 'site') {
+    for (const node of Object.values(nodes)) {
+      if (node.type === 'building') addNode(node)
+    }
+    return result
+  }
+
+  if (!levelId) return []
+  const levelNode = nodes[levelId as AnyNodeId] as LevelNode | undefined
+  if (levelNode?.type !== 'level') return []
+
+  if (phase === 'structure' && structureLayer === 'zones') {
+    for (const childId of levelNode.children) {
+      const node = nodes[childId as AnyNodeId]
+      if (node?.type === 'zone') addNode(node)
+    }
+    return result
+  }
+
+  for (const childId of levelNode.children) {
+    visitLevelDescendant(childId as AnyNodeId)
+  }
+
+  const buildingId = resolveBuildingForLevel(levelId as AnyNodeId, nodes)
+  for (const node of Object.values(nodes)) {
+    if (!node || node.type === 'level' || !isVisibleSelectableNode(node)) continue
+
+    const def = nodeRegistry.get(node.type)
+    const isBuildingScoped = def?.floorplanScope === 'building'
+    const parentId = (node as { parentId?: AnyNodeId | null }).parentId
+    if (isBuildingScoped && buildingId && parentId === buildingId) {
+      addNode(node)
+      continue
+    }
+
+    if (!isBuildingScoped && resolveLevelId(node, nodes) === levelId) {
+      addNode(node)
+    }
+  }
+
+  return result
+}

package/src/components/tools/shared/affordance-dispatch.ts

@@ -0,0 +1,30 @@
+import { nodeRegistry } from '@pascal-app/core'
+import { type ComponentType, lazy } from 'react'
+
+/**
+ * Phase 5 Stage D — runtime lazy-load of a kind's affordance tool.
+ *
+ * The editor can't statically import from `@pascal-app/nodes` (the
+ * nodes package depends on editor — static imports would cycle). The
+ * kind declares its drag-affordance components in
+ * `def.affordanceTools[<key>]: () => import('./<name>-tool')`; this
+ * helper resolves that to a `React.lazy` component at the call site.
+ *
+ * Returns null when the kind doesn't declare the affordance — callers
+ * mount the legacy fallback in that case.
+ */
+const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
+
+export function getRegistryAffordanceTool(
+  kind: string,
+  affordance: string,
+): ComponentType<any> | null {
+  const def = nodeRegistry.get(kind)
+  const loader = def?.affordanceTools?.[affordance]
+  if (!loader) return null
+  const cached = lazyToolCache.get(loader)
+  if (cached) return cached
+  const Comp = lazy(loader as () => Promise<{ default: ComponentType<any> }>)
+  lazyToolCache.set(loader, Comp as unknown as ComponentType)
+  return Comp as unknown as ComponentType<any>
+}

package/src/components/tools/shared/cursor-sphere.tsx

@@ -6,24 +6,45 @@ import { furnishTools } from '../../../components/ui/action-menu/furnish-tools'
 import { tools } from '../../../components/ui/action-menu/structure-tools'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import useEditor from '../../../store/use-editor'
+import useWallSnapIndicator from '../../../store/use-wall-snap-indicator'
 
 interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
   color?: string
   depthWrite?: boolean
   showTooltip?: boolean
   height?: number
+  /**
+   * Put the bright marker dot at the TIP of the vertical line (y = height)
+   * instead of on the ground ring. Used when the point being placed hangs
+   * above the floor (e.g. duct drawn against the ceiling): the dot rides at
+   * the cursor / placement point while the line drops to a floor ring that
+   * keeps the plan position readable.
+   */
+  dotAtTip?: boolean
   /** Custom tooltip content — overrides the auto-detected build tool icon */
   tooltipContent?: React.ReactNode
 }
 
 export const CursorSphere = forwardRef<Group, CursorSphereProps>(function CursorSphere(
-  { color = '#818cf8', showTooltip = true, height = 2.5, visible = true, tooltipContent, ...props },
+  {
+    color = '#818cf8',
+    showTooltip = true,
+    height = 2.5,
+    dotAtTip = false,
+    visible = true,
+    tooltipContent,
+    ...props
+  },
   ref,
 ) {
   const tool = useEditor((s) => s.tool)
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  // While a wall snap is active the beacon layer already marks the point
+  // (green square at a corner); hide the cursor's ground dot/ring so it
+  // doesn't sit on top of that glyph.
+  const isSnapping = useWallSnapIndicator((s) => s.point !== null)
 
   // Find the icon for the current tool
   let activeToolConfig = null
@@ -39,32 +60,38 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
 
   return (
     <group ref={ref} {...props} visible={isVisible}>
-      {/* Flat marker on the ground */}
-      <group rotation={[-Math.PI / 2, 0, 0]}>
-        {/* Center dot */}
-        <mesh layers={EDITOR_LAYER} renderOrder={2}>
-          <circleGeometry args={[0.06, 32]} />
-          <meshBasicMaterial
-            color={color}
-            depthTest={false}
-            depthWrite={false}
-            opacity={0.9}
-            transparent
-          />
-        </mesh>
+      {/* Flat marker on the ground. The bright center dot moves to the tip
+          of the line in `dotAtTip` mode (the placement point hangs above the
+          floor), leaving a faint ring here so the plan position stays read. */}
+      {!isSnapping && (
+        <group rotation={[-Math.PI / 2, 0, 0]}>
+          {/* Center dot — at the ground unless the placement point is elevated */}
+          {!dotAtTip && (
+            <mesh layers={EDITOR_LAYER} renderOrder={2}>
+              <circleGeometry args={[0.06, 32]} />
+              <meshBasicMaterial
+                color={color}
+                depthTest={false}
+                depthWrite={false}
+                opacity={0.9}
+                transparent
+              />
+            </mesh>
+          )}
 
-        {/* Outer ring / glow */}
-        <mesh layers={EDITOR_LAYER} renderOrder={2}>
-          <circleGeometry args={[0.2, 32]} />
-          <meshBasicMaterial
-            color={color}
-            depthTest={false}
-            depthWrite={false}
-            opacity={0.25}
-            transparent
-          />
-        </mesh>
-      </group>
+          {/* Outer ring / glow */}
+          <mesh layers={EDITOR_LAYER} renderOrder={2}>
+            <circleGeometry args={[0.2, 32]} />
+            <meshBasicMaterial
+              color={color}
+              depthTest={false}
+              depthWrite={false}
+              opacity={dotAtTip ? 0.2 : 0.25}
+              transparent
+            />
+          </mesh>
+        </group>
+      )}
 
       {/* Vertical line */}
       {height > 0 && (
@@ -80,6 +107,15 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
         </mesh>
       )}
 
+      {/* Bright marker dot at the tip of the line — the actual placement
+          point, riding at the cursor while the line drops to the floor. */}
+      {dotAtTip && height > 0 && (
+        <mesh layers={EDITOR_LAYER} position={[0, height, 0]} renderOrder={2}>
+          <sphereGeometry args={[0.08, 20, 14]} />
+          <meshBasicMaterial color={color} depthTest={false} depthWrite={false} />
+        </mesh>
+      )}
+
       {/* Tool Icon Tooltip at the top of the line */}
       {isVisible && showTooltip && (activeToolConfig || tooltipContent) && (
         <Html

package/src/components/tools/shared/drag-bounding-box.tsx

@@ -0,0 +1,195 @@
+'use client'
+
+import { type AnyNodeId, resolveFacingIndicator, sceneRegistry, useScene } from '@pascal-app/core'
+import { useEffect, useMemo } from 'react'
+import {
+  Box3,
+  BoxGeometry,
+  EdgesGeometry,
+  Matrix4,
+  type Mesh,
+  type Object3D,
+  PlaneGeometry,
+  Vector3,
+} from 'three'
+import { distance, smoothstep, uv, vec2 } from 'three/tsl'
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import useFacingPose from '../../../store/use-facing-pose'
+
+const NO_RAYCAST = () => null
+
+/** green-500 — matches the item placement box's "placeable" state. */
+const DEFAULT_COLOR = 0x22_c5_5e
+
+type LocalBounds = { size: [number, number, number]; center: [number, number, number] }
+
+/**
+ * The node's bounding box in its OWN, unrotated frame — measured from the
+ * rendered geometry so it captures the full extent (base, cap, overhang),
+ * not just the declared width/height/depth. World position + rotation are
+ * cancelled out (invert the root's world matrix), so the result is stable
+ * regardless of where the live drag has moved the node; the caller re-applies
+ * the current Y rotation on the group. Returns null when nothing measurable.
+ */
+function measureLocalBounds(obj: Object3D): LocalBounds | null {
+  obj.updateWorldMatrix(true, true)
+  const inverseRoot = new Matrix4().copy(obj.matrixWorld).invert()
+  const box = new Box3()
+  const meshBox = new Box3()
+  const toLocal = new Matrix4()
+  let measured = false
+  obj.traverse((child) => {
+    const mesh = child as Mesh
+    if (!mesh.isMesh || !mesh.geometry) return
+    if (!mesh.geometry.boundingBox) mesh.geometry.computeBoundingBox()
+    const bb = mesh.geometry.boundingBox
+    if (!bb) return
+    toLocal.copy(inverseRoot).multiply(mesh.matrixWorld)
+    meshBox.copy(bb).applyMatrix4(toLocal)
+    box.union(meshBox)
+    measured = true
+  })
+  if (!measured || box.isEmpty()) return null
+  const size = box.getSize(new Vector3())
+  const center = box.getCenter(new Vector3())
+  return { size: [size.x, size.y, size.z], center: [center.x, center.y, center.z] }
+}
+
+interface DragBoundingBoxProps {
+  /** Node whose rendered geometry is measured for the box extents. */
+  nodeId: string
+  /** Footprint origin on the floor, `[x, 0, z]` — the node's live position. */
+  position: [number, number, number]
+  /** Y rotation (radians) applied to the box, matching the dragged node. */
+  rotationY?: number
+  /** Declared `[width, height, depth]`, used until/if the mesh can't be measured. */
+  fallbackSize?: [number, number, number]
+  /**
+   * Hard override for the box extents — wins over both mesh measurement and
+   * `fallbackSize`. Use when the rendered mesh contains extras the user
+   * wouldn't read as "the thing being dragged" (e.g. an elevator whose mesh
+   * includes per-level landings outside the shaft footprint).
+   */
+  size?: [number, number, number]
+  /** Local center of `size`. Defaults to the node origin plus half-height. */
+  center?: [number, number, number]
+  /** Y center of the box in the node's local frame. Defaults to `size[1] / 2`. */
+  centerY?: number
+  color?: number
+}
+
+/**
+ * Footprint box drawn around a node while it is being dragged — the same
+ * affordance items get during placement: a wireframe cube spanning the node's
+ * full measured extent plus a ground plane with a radial opacity gradient
+ * (transparent in the centre, opaque toward the edges). Overlay layer +
+ * `depthTest: false` keep it drawn on top of scene geometry throughout the
+ * drag, and the box visualises the bounds that drive alignment snapping.
+ */
+export function DragBoundingBox({
+  nodeId,
+  position,
+  rotationY = 0,
+  fallbackSize = [0, 0, 0],
+  size,
+  center,
+  centerY,
+  color = DEFAULT_COLOR,
+}: DragBoundingBoxProps) {
+  const nodeType = useScene((state) => state.nodes[nodeId as AnyNodeId]?.type)
+  const facing = nodeType ? resolveFacingIndicator(nodeType) : null
+
+  const measured = useMemo(() => {
+    if (size) return null
+    const obj = sceneRegistry.nodes.get(nodeId)
+    return obj ? measureLocalBounds(obj) : null
+  }, [nodeId, size])
+
+  const [w, h, d] = size ?? measured?.size ?? fallbackSize
+  const [cx, cy, cz] = size
+    ? (center ?? [0, centerY ?? size[1] / 2, 0])
+    : (measured?.center ?? [0, fallbackSize[1] / 2, 0])
+  const minY = cy - h / 2
+  const groundY = minY + 0.01
+
+  const edgeGeometry = useMemo(() => {
+    const box = new BoxGeometry(w, h, d)
+    const edges = new EdgesGeometry(box)
+    box.dispose()
+    return edges
+  }, [w, h, d])
+
+  // Flat on the ground (XZ) at the box's base, nudged up 0.01m to avoid
+  // z-fighting with slabs.
+  const planeGeometry = useMemo(() => {
+    const plane = new PlaneGeometry(w, d)
+    plane.rotateX(-Math.PI / 2)
+    plane.translate(cx, groundY, cz)
+    return plane
+  }, [w, d, cx, groundY, cz])
+
+  const edgeMaterial = useMemo(
+    () => new LineBasicNodeMaterial({ color, linewidth: 3, depthTest: false, depthWrite: false }),
+    [color],
+  )
+
+  const planeMaterial = useMemo(() => {
+    const material = new MeshBasicNodeMaterial({
+      color,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+    })
+    material.opacityNode = smoothstep(0, 0.7, distance(uv(), vec2(0.5, 0.5))).mul(0.6)
+    return material
+  }, [color])
+
+  useEffect(
+    () => () => {
+      edgeGeometry.dispose()
+      planeGeometry.dispose()
+      edgeMaterial.dispose()
+      planeMaterial.dispose()
+    },
+    [edgeGeometry, planeGeometry, edgeMaterial, planeMaterial],
+  )
+
+  // Publish the facing pose to the editor-side overlay (the single triangle
+  // renderer) rather than drawing it here. The node origin is `position`; the
+  // footprint centre is `[cx, cz]` in the node's local frame. Runs each drag
+  // frame so the triangle follows; a separate mount/unmount effect clears it.
+  useEffect(() => {
+    if (!facing || d <= 0) return
+    useFacingPose.getState().set({
+      position: [position[0], position[1] + groundY, position[2]],
+      rotationY,
+      depth: d,
+      center: [cx, cz],
+      reversed: facing.reversed,
+    })
+  }, [facing, position, rotationY, d, cx, cz, groundY])
+  useEffect(() => () => useFacingPose.getState().clear(), [])
+
+  if (w <= 0 || h <= 0 || d <= 0) return null
+
+  return (
+    <group position={position} rotation={[0, rotationY, 0]}>
+      <mesh
+        geometry={planeGeometry}
+        layers={EDITOR_LAYER}
+        material={planeMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={999}
+      />
+      <lineSegments
+        geometry={edgeGeometry}
+        layers={EDITOR_LAYER}
+        material={edgeMaterial}
+        position={[cx, cy, cz]}
+        raycast={NO_RAYCAST}
+        renderOrder={999}
+      />
+    </group>
+  )
+}

package/src/components/tools/shared/facing-indicator.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useMemo } from 'react'
+import { BufferGeometry, DoubleSide, Float32BufferAttribute } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../../lib/constants'
+
+// A flat forward-pointing triangle drawn on the floor just in front of a
+// placement ghost, so the direction the node will face is obvious. Tip at local
+// +Z (every kind's forward face); render it inside the ghost's rotated group so
+// it inherits the node's yaw. Matches the item coordinator / drag-bounding-box
+// indicators (same size, colour, double-sided so it shows from above).
+const FACING_INDICATOR_WIDTH = 0.4
+const FACING_INDICATOR_LENGTH = 0.46
+const FACING_INDICATOR_GAP = 0.45
+
+/**
+ * @param depth    bbox depth (along local Z) of the ghost — positions the
+ *                 triangle just past the front edge.
+ * @param center   optional [x, z] of the bbox centre in the ghost's local frame.
+ * @param reversed point along local -Z (the front is the -Z side, e.g. a stair
+ *                 entry) instead of +Z.
+ * @param y        small lift off the floor to avoid z-fighting.
+ */
+export function FacingIndicator({
+  depth,
+  center = [0, 0],
+  reversed = false,
+  y = 0.02,
+}: {
+  depth: number
+  center?: [number, number]
+  reversed?: boolean
+  y?: number
+}) {
+  const dir = reversed ? -1 : 1
+  // Per-instance geometry/material (not module singletons) so this works no
+  // matter which package mounts it (the tools live in `nodes`, imported via
+  // `@pascal-app/editor`). Disposed on unmount.
+  const geometry = useMemo(() => {
+    const g = new BufferGeometry()
+    g.setAttribute(
+      'position',
+      new Float32BufferAttribute(
+        [
+          0,
+          0,
+          dir * FACING_INDICATOR_LENGTH,
+          FACING_INDICATOR_WIDTH / 2,
+          0,
+          0,
+          -FACING_INDICATOR_WIDTH / 2,
+          0,
+          0,
+        ],
+        3,
+      ),
+    )
+    return g
+  }, [dir])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: 0x22_c5_5e, // green-500 (forward)
+        depthTest: false,
+        depthWrite: false,
+        side: DoubleSide,
+      }),
+    [],
+  )
+  useEffect(
+    () => () => {
+      geometry.dispose()
+      material.dispose()
+    },
+    [geometry, material],
+  )
+
+  return (
+    <mesh
+      frustumCulled={false}
+      geometry={geometry}
+      layers={EDITOR_LAYER}
+      material={material}
+      position={[center[0], y, center[1] + dir * (depth / 2 + FACING_INDICATOR_GAP)]}
+      renderOrder={1001}
+    />
+  )
+}

package/src/components/tools/shared/facing-pose-indicator.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+import type { Group } from 'three'
+import useFacingPose, { type FacingPose } from '../../../store/use-facing-pose'
+import { FacingIndicator } from './facing-indicator'
+
+// The single editor-side renderer for the placement/move facing triangle.
+// Mounted once inside ToolManager's building-local group; every tool publishes
+// its ghost pose to `useFacingPose` and this draws the triangle. The pose
+// (position/yaw) is applied imperatively to a ref so the per-frame cursor
+// updates don't re-render React — only a change in footprint shape (depth /
+// centre), which is constant per tool session, triggers a re-render.
+export function FacingPoseIndicator() {
+  const groupRef = useRef<Group>(null)
+  const [shape, setShape] = useState<Pick<FacingPose, 'depth' | 'center' | 'reversed'> | null>(null)
+
+  useEffect(() => {
+    const apply = (pose: FacingPose | null) => {
+      const group = groupRef.current
+      if (group) {
+        if (pose) {
+          group.visible = true
+          group.position.set(...pose.position)
+          group.rotation.y = pose.rotationY
+        } else {
+          group.visible = false
+        }
+      }
+      setShape((prev) => {
+        if (!pose) return null
+        const center = pose.center ?? [0, 0]
+        if (
+          prev &&
+          prev.depth === pose.depth &&
+          prev.reversed === pose.reversed &&
+          (prev.center ?? [0, 0])[0] === center[0] &&
+          (prev.center ?? [0, 0])[1] === center[1]
+        ) {
+          return prev
+        }
+        return { depth: pose.depth, center, reversed: pose.reversed }
+      })
+    }
+    apply(useFacingPose.getState().pose)
+    return useFacingPose.subscribe((state) => apply(state.pose))
+  }, [])
+
+  return (
+    <group ref={groupRef} visible={false}>
+      {shape ? (
+        <FacingIndicator center={shape.center} depth={shape.depth} reversed={shape.reversed} />
+      ) : null}
+    </group>
+  )
+}