Add two-sided wall material targeting

packages/viewer/src/components/renderers/wall/wall-renderer.tsx

@@ -1,12 +1,8 @@
 import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
-import { useLayoutEffect, useMemo, useRef } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import {
-  createMaterial,
-  createMaterialFromPresetRef,
-  DEFAULT_WALL_MATERIAL,
-} from '../../../lib/materials'
+import { getVisibleWallMaterials } from '../../../systems/wall/wall-materials'
 import { NodeRenderer } from '../node-renderer'
 
 export const WallRenderer = ({ node }: { node: WallNode }) => {
@@ -19,20 +15,7 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
   }, [node.id])
 
   const handlers = useNodeEvents(node, 'wall')
-
-  const material = useMemo(() => {
-    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
-    if (presetMaterial) return presetMaterial
-    const mat = node.material
-    if (!mat) return DEFAULT_WALL_MATERIAL
-    return createMaterial(mat)
-  }, [
-    node.material,
-    node.material?.preset,
-    node.material?.properties,
-    node.material?.texture,
-    node.materialPreset,
-  ])
+  const material = getVisibleWallMaterials(node)
 
   return (
     <mesh castShadow material={material} receiveShadow ref={ref} visible={node.visible}>