hide tools from thumbnail

apps/editor/components/tools/ceiling/ceiling-tool.tsx

@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, type Line, type Group, Shape, Vector3 } from 'three'
 import { mix, positionLocal } from 'three/tsl'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
 
@@ -295,14 +296,14 @@ export const CeilingTool: React.FC = () => {
       <CursorSphere ref={cursorRef} />
 
       {/* Grid-level cursor indicator */}
-      <mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]} renderOrder={2}>
+      <mesh ref={gridCursorRef} rotation={[-Math.PI / 2, 0, 0]} renderOrder={2} layers={EDITOR_LAYER}>
         <ringGeometry args={[0.15, 0.2, 32]} />
         <meshBasicMaterial color="#818cf8" side={DoubleSide} depthTest={false} depthWrite={true} opacity={0.5} transparent />
       </mesh>
 
       {/* Vertical connector: local y=0 at grid, y=H at ceiling; position.y set to gridY on move */}
       {/* @ts-ignore */}
-      <line ref={verticalLineRef} geometry={verticalGeo} renderOrder={1}>
+      <line ref={verticalLineRef} geometry={verticalGeo} renderOrder={1} layers={EDITOR_LAYER}>
         <lineBasicNodeMaterial color="#818cf8" opacityNode={gradientOpacityNode} depthTest={false} depthWrite={false} transparent />
       </line>
 
@@ -310,6 +311,7 @@ export const CeilingTool: React.FC = () => {
       {previewShape && (
         <mesh
           frustumCulled={false}
+          layers={EDITOR_LAYER}
           position={[0, levelY + CEILING_HEIGHT, 0]}
           rotation={[-Math.PI / 2, 0, 0]}
         >
@@ -328,6 +330,7 @@ export const CeilingTool: React.FC = () => {
       {previewShape && (
         <mesh
           frustumCulled={false}
+          layers={EDITOR_LAYER}
           position={[0, levelY + GRID_OFFSET, 0]}
           rotation={[-Math.PI / 2, 0, 0]}
         >
@@ -344,14 +347,14 @@ export const CeilingTool: React.FC = () => {
 
       {/* Main line */}
       {/* @ts-ignore */}
-      <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial color="#818cf8" linewidth={3} depthTest={false} depthWrite={false} />
       </line>
 
       {/* Closing line */}
       {/* @ts-ignore */}
-      <line ref={closingLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={closingLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial
           color="#818cf8"
@@ -365,14 +368,14 @@ export const CeilingTool: React.FC = () => {
 
       {/* Ground main line */}
       {/* @ts-ignore */}
-      <line ref={groundMainLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={groundMainLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial color="#818cf8" linewidth={3} depthTest={false} depthWrite={false} opacity={0.3} transparent />
       </line>
 
       {/* Ground closing line */}
       {/* @ts-ignore */}
-      <line ref={groundClosingLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={groundClosingLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial
           color="#818cf8"

apps/editor/components/tools/door/door-tool.tsx

@@ -19,6 +19,7 @@ import {
   snapToHalf,
 } from '../item/placement-math'
 import { clampToWall, hasWallChildOverlap, wallLocalToWorld } from './door-math'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 
 const edgeMaterial = new LineBasicNodeMaterial({
@@ -260,7 +261,7 @@ export const DoorTool: React.FC = () => {
 
   return (
     <group ref={cursorGroupRef} visible={false}>
-      <lineSegments ref={edgesRef} geometry={edgesGeo} material={edgeMaterial} />
+      <lineSegments ref={edgesRef} geometry={edgesGeo} material={edgeMaterial} layers={EDITOR_LAYER} />
     </group>
   )
 }

apps/editor/components/tools/door/move-door-tool.tsx

@@ -11,6 +11,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef } from 'react'
 import { BoxGeometry, EdgesGeometry, type Group } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import useEditor from '@/store/use-editor'
 import {
@@ -336,7 +337,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
 
   return (
     <group ref={cursorGroupRef} visible={false}>
-      <lineSegments geometry={edgesGeo} material={edgeMaterial} />
+      <lineSegments geometry={edgesGeo} material={edgeMaterial} layers={EDITOR_LAYER} />
     </group>
   )
 }

apps/editor/components/tools/item/use-placement-coordinator.tsx

@@ -30,6 +30,7 @@ import {
 } from 'three'
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import { ceilingStrategy, checkCanPlace, floorStrategy, itemSurfaceStrategy, wallStrategy } from './placement-strategies'
 import type { PlacementState, TransitionResult } from './placement-types'
@@ -759,10 +760,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
   return (
     <group ref={cursorGroupRef}>
-      <lineSegments ref={edgesRef} material={edgeMaterial}>
+      <lineSegments ref={edgesRef} material={edgeMaterial} layers={EDITOR_LAYER}>
         <edgesGeometry args={[initialBoxGeometry]} />
       </lineSegments>
-      <mesh ref={basePlaneRef} geometry={basePlaneGeometry} material={basePlaneMaterial} />
+      <mesh ref={basePlaneRef} geometry={basePlaneGeometry} material={basePlaneMaterial} layers={EDITOR_LAYER} />
     </group>
   )
 }

apps/editor/components/tools/roof/roof-tool.tsx

@@ -9,6 +9,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, type Line, type Group, Vector3 } from 'three'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import useEditor from '@/store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
@@ -210,7 +211,7 @@ export const RoofTool: React.FC = () => {
 
       {/* Outline showing rectangle being drawn (Ground) */}
       {/* @ts-ignore */}
-      <line ref={outlineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={outlineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial color="#818cf8" linewidth={2} depthTest={false} depthWrite={false} opacity={0.3} transparent />
       </line>
@@ -227,6 +228,7 @@ export const RoofTool: React.FC = () => {
       {/* Thin preview fill when drawing (Ground) */}
       {previewDimensions && previewDimensions.length > 0.1 && previewDimensions.width > 0.1 && (
         <mesh
+          layers={EDITOR_LAYER}
           position={[previewDimensions.centerX, levelY + GRID_OFFSET, previewDimensions.centerZ]}
           rotation={[-Math.PI / 2, 0, 0]}
         >

apps/editor/components/tools/shared/cursor-sphere.tsx

@@ -2,6 +2,7 @@ import type { ThreeElements } from '@react-three/fiber'
 import { forwardRef } from 'react'
 import type { Group } from 'three'
 import { Html } from '@react-three/drei'
+import { EDITOR_LAYER } from '@/lib/constants'
 import useEditor from '@/store/use-editor'
 import { tools } from '@/components/ui/action-menu/structure-tools'
 import { furnishTools } from '@/components/ui/action-menu/furnish-tools'
@@ -36,13 +37,13 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
       {/* Flat marker on the ground */}
       <group rotation={[-Math.PI / 2, 0, 0]}>
         {/* Center dot */}
-        <mesh renderOrder={2}>
+        <mesh renderOrder={2} layers={EDITOR_LAYER}>
           <circleGeometry args={[0.06, 32]} />
           <meshBasicMaterial color={color} depthTest={false} depthWrite={false} transparent opacity={0.9} />
         </mesh>
         
         {/* Outer ring / glow */}
-        <mesh renderOrder={2}>
+        <mesh renderOrder={2} layers={EDITOR_LAYER}>
           <circleGeometry args={[0.2, 32]} />
           <meshBasicMaterial color={color} depthTest={false} depthWrite={false} transparent opacity={0.25} />
         </mesh>
@@ -50,7 +51,7 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
 
       {/* Vertical line */}
       {height > 0 && (
-        <mesh position={[0, height / 2, 0]} renderOrder={2}>
+        <mesh position={[0, height / 2, 0]} renderOrder={2} layers={EDITOR_LAYER}>
           <cylinderGeometry args={[0.01, 0.01, height, 8]} />
           <meshBasicMaterial color={color} depthTest={false} depthWrite={false} transparent opacity={0.7} />
         </mesh>

apps/editor/components/tools/slab/slab-tool.tsx

@@ -2,6 +2,7 @@ import { emitter, type GridEvent, type LevelNode, SlabNode, useScene } from '@pa
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, type Line, type Group, Shape, Vector3 } from 'three'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
 
@@ -243,6 +244,7 @@ export const SlabTool: React.FC = () => {
       {previewShape && (
         <mesh
           frustumCulled={false}
+          layers={EDITOR_LAYER}
           position={[0, levelY + Y_OFFSET, 0]}
           rotation={[-Math.PI / 2, 0, 0]}
         >
@@ -259,14 +261,14 @@ export const SlabTool: React.FC = () => {
 
       {/* Main line */}
       {/* @ts-ignore */}
-      <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial color="#818cf8" linewidth={3} depthTest={false} depthWrite={false} />
       </line>
 
       {/* Closing line */}
       {/* @ts-ignore */}
-      <line ref={closingLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={closingLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial
           color="#818cf8"

apps/editor/components/tools/wall/wall-tool.tsx

@@ -2,6 +2,7 @@ import { emitter, type GridEvent, useScene, WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useRef } from 'react'
 import { DoubleSide, type Mesh, type Group, Shape, ShapeGeometry, Vector3 } from 'three'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
 
@@ -198,7 +199,7 @@ export const WallTool: React.FC = () => {
       <CursorSphere ref={cursorRef}  />
 
       {/* Wall preview */}
-      <mesh ref={wallPreviewRef} visible={false} renderOrder={1}>
+      <mesh ref={wallPreviewRef} visible={false} renderOrder={1} layers={EDITOR_LAYER}>
         <shapeGeometry />
         <meshBasicMaterial
           color="#818cf8"

apps/editor/components/tools/window/move-window-tool.tsx

@@ -11,6 +11,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef } from 'react'
 import { BoxGeometry, EdgesGeometry, type Group } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 import useEditor from '@/store/use-editor'
 import {
@@ -370,7 +371,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
 
   return (
     <group ref={cursorGroupRef} visible={false}>
-      <lineSegments geometry={edgesGeo} material={edgeMaterial} />
+      <lineSegments geometry={edgesGeo} material={edgeMaterial} layers={EDITOR_LAYER} />
     </group>
   )
 }

apps/editor/components/tools/window/window-tool.tsx

@@ -19,6 +19,7 @@ import {
   snapToHalf,
 } from '../item/placement-math'
 import { clampToWall, hasWallChildOverlap, wallLocalToWorld } from './window-math'
+import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 
 // Shared edge material — reuse across renders, just toggle color
@@ -269,7 +270,7 @@ export const WindowTool: React.FC = () => {
 
   return (
     <group ref={cursorGroupRef} visible={false}>
-      <lineSegments ref={edgesRef} geometry={edgesGeo} material={edgeMaterial} />
+      <lineSegments ref={edgesRef} geometry={edgesGeo} material={edgeMaterial} layers={EDITOR_LAYER} />
     </group>
   )
 }

apps/editor/components/tools/zone/zone-tool.tsx

@@ -2,6 +2,7 @@ import { emitter, type GridEvent, useScene, ZoneNode, type LevelNode } from "@pa
 import { useViewer } from "@pascal-app/viewer";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { BufferGeometry, DoubleSide, type Line, type Group, Shape, Vector3 } from "three";
+import { EDITOR_LAYER } from "@/lib/constants";
 import useEditor from "@/store/use-editor";
 import { CursorSphere } from "../shared/cursor-sphere";
 
@@ -318,6 +319,7 @@ export const ZoneTool: React.FC = () => {
       {previewShape && (
         <mesh
           frustumCulled={false}
+          layers={EDITOR_LAYER}
           position={[0, levelY + Y_OFFSET, 0]}
           rotation={[-Math.PI / 2, 0, 0]}
         >
@@ -334,7 +336,7 @@ export const ZoneTool: React.FC = () => {
 
       {/* Main line - uses native line element with TSL-compatible material */}
       {/* @ts-ignore */}
-      <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={mainLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial
           color="#818cf8"
@@ -346,7 +348,7 @@ export const ZoneTool: React.FC = () => {
 
       {/* Closing line - uses native line element with TSL-compatible material */}
       {/* @ts-ignore */}
-      <line ref={closingLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <line ref={closingLineRef} frustumCulled={false} renderOrder={1} visible={false} layers={EDITOR_LAYER}>
         <bufferGeometry />
         <lineBasicNodeMaterial
           color="#818cf8"