Merge pull request #201 from PMAT77/feature/material

Feature/material

AGENTS.md

@@ -1,91 +0,0 @@
-# Pascal Editor — Architecture
-
-## Project Structure
-
-Monorepo managed with Turborepo. Packages are shared libraries; apps are deployable applications.
-
-```
-apps/
-  editor/          # Main Next.js app (editor + public routes)
-packages/
-  core/            # Scene schema, state, systems, spatial logic
-  viewer/          # 3D canvas component (React Three Fiber)
-  ui/              # Shared React UI components
-```
-
----
-
-## packages/core
-
-Central library — no UI, no rendering. Everything else depends on it.
-
-- **schema/** — TypeScript types for all node types (`Wall`, `Slab`, `Door`, `Item`, etc.)
-- **store/** — Zustand scene store (`useScene`) with undo/redo via Zundo
-- **systems/** — Per-element business logic: geometry generation, constraints (`WallSystem`, `SlabSystem`, `DoorSystem`, …)
-- **events/** — Typed event bus for node changes
-- **hooks/** — `useRegistry` (node ID → THREE.Object3D), `useSpatialGrid` (2D spatial index)
-- **lib/** — Space detection, asset storage, polygon utilities
-
-Node storage is a flat dictionary (`nodes: Record<id, AnyNode>`). Systems are pure logic that runs in the render loop; they read nodes and write back derived geometry.
-
----
-
-## packages/viewer
-
-3D canvas component — presentation only, no editor concerns.
-
-- **components/viewer/** — Root `<Viewer>` canvas, camera, lights, post-processing, selection manager
-- **components/renderers/** — One renderer per node type (`WallRenderer`, `SlabRenderer`, …), dispatched by `NodeRenderer` → `SceneRenderer`
-- **systems/** — Viewer-specific systems: `LevelSystem` (stacked/exploded/solo), `WallCutout`, `ZoneSystem`, `InteractiveSystem`
-- **store/** — `useViewer`: selection path, camera mode, level mode, wall mode, theme, display toggles
-
-The viewer accepts external props and callbacks (`onSelect`, `onExport`, children) to expose control points. It must not import anything from `apps/editor`.
-
----
-
-## apps/editor
-
-Next.js 16 app. Composes `@pascal-app/viewer` and `@pascal-app/core` into a full editing experience.
-
-- **app/editor/[projectId]/** — Main editor route
-- **app/viewer/[id]/** — Read-only preview route
-- **store/use-editor.tsx** — `useEditor`: phase (`site | structure | furnish`), mode (`select | edit | delete | build`), active tool
-- **components/tools/** — One component per tool, coordinated by `ToolManager`
-- **components/systems/** — Editor-side systems that integrate with viewer (e.g. space detection for cutaway)
-- **components/editor/** — Camera controls, export, menus, panels
-
----
-
-## Data Flow
-
-```
-User input (pointer/keyboard)
-  → Tool component (apps/editor/components/tools/)
-  → useScene mutations
-  → Core systems recompute geometry
-  → Renderers re-render THREE meshes
-  → useViewer updates selection/hover
-```
-
----
-
-## Key Conventions
-
-- **Flat nodes** — All scene nodes live in a single flat record; hierarchy is expressed via `parentId`.
-- **System/renderer split** — Systems own logic; renderers own geometry and material. Never mix.
-- **Viewer isolation** — `@pascal-app/viewer` must never import from `apps/editor`. Editor-specific behaviour (tools, systems, selection) is injected as children or props.
-- **Registry pattern** — `useRegistry()` maps node IDs to live THREE objects without tree traversal.
-- **Spatial grid** — 2D grid for fast wall/zone neighbourhood queries; avoid brute-force iteration.
-- **Node creation** — Always use `NodeType.parse({…})` then `createNode(node, parentId)`. Never construct raw node objects.
-
----
-
-## Tech Stack
-
-| Layer | Technology |
-|---|---|
-| 3D | Three.js (WebGPU), React Three Fiber |
-| Framework | Next.js 16, React 19 |
-| State | Zustand + Zundo |
-| UI | Radix UI, Tailwind CSS 4 |
-| Tooling | Biome, TypeScript 5.9, Turborepo |

bun.lock

@@ -4,9 +4,6 @@
   "workspaces": {
     "": {
       "name": "editor",
-      "dependencies": {
-        "portless": "^0.4.2",
-      },
       "devDependencies": {
         "@biomejs/biome": "^2.4.6",
         "dotenv-cli": "^11.0.0",
@@ -51,7 +48,7 @@
     },
     "packages/core": {
       "name": "@pascal-app/core",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "dependencies": {
         "dedent": "^1.7.1",
         "idb-keyval": "^6.2.2",
@@ -73,7 +70,7 @@
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "react": "^18 || ^19",
-        "three": "^0.183",
+        "three": "^0.182",
       },
     },
     "packages/editor": {
@@ -169,7 +166,7 @@
     },
     "packages/viewer": {
       "name": "@pascal-app/viewer",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "dependencies": {
         "polygon-clipping": "^0.15.7",
         "zustand": "^5",
@@ -727,7 +724,7 @@
 
     "caniuse-lite": ["caniuse-lite@1.0.30001781", "", {}, "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw=="],
 
-    "chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "citty": ["citty@0.2.1", "", {}, "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="],
 
@@ -1173,8 +1170,6 @@
 
     "polygon-clipping": ["polygon-clipping@0.15.7", "", { "dependencies": { "robust-predicates": "^3.0.2", "splaytree": "^3.1.0" } }, "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA=="],
 
-    "portless": ["portless@0.4.2", "", { "dependencies": { "chalk": "^5.3.0" }, "os": [ "linux", "darwin", ], "bin": { "portless": "dist/cli.js" } }, "sha512-/G3jIeD1XokoO9KY/lUGTV9irKz3tgx8yqHkz+hvj/86QeR219GvYFB+QEfpvjRlvvLVJa5vE7BkRfBZBe/lQg=="],
-
     "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
 
     "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
@@ -1473,20 +1468,22 @@
 
     "editor/@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
 
-    "eslint/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
-
     "eslint-plugin-turbo/dotenv": ["dotenv@16.0.3", "", {}, "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "glob/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
 
+    "log-symbols/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+
     "log-symbols/is-unicode-supported": ["is-unicode-supported@1.3.0", "", {}, "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ=="],
 
     "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
+    "ora/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+
     "postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "react-scan/@types/node": ["@types/node@20.19.37", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw=="],

package.json

@@ -18,9 +18,6 @@
     "release:minor": "gh workflow run release.yml -f package=both -f bump=minor",
     "release:major": "gh workflow run release.yml -f package=both -f bump=major"
   },
-  "dependencies": {
-    "portless": "^0.4.2"
-  },
   "devDependencies": {
     "@biomejs/biome": "^2.4.6",
     "dotenv-cli": "^11.0.0",

packages/core/package.json

@@ -25,7 +25,7 @@
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "react": "^18 || ^19",
-    "three": "^0.183"
+    "three": "^0.182"
   },
   "dependencies": {
     "dedent": "^1.7.1",

packages/core/src/schema/index.ts

@@ -1,9 +1,17 @@
 // Base
-export { BaseNode, generateId, Material, nodeType, objectId } from './base'
+export { BaseNode, generateId, nodeType, objectId } from './base'
 // Camera
 export { CameraSchema } from './camera'
 // Collections
 export { type Collection, type CollectionId, generateCollectionId } from './collections'
+// Material
+export {
+  DEFAULT_MATERIALS,
+  MaterialPreset,
+  MaterialProperties,
+  MaterialSchema,
+  resolveMaterial,
+} from './material'
 export { BuildingNode } from './nodes/building'
 export { CeilingNode } from './nodes/ceiling'
 export { DoorNode, DoorSegment } from './nodes/door'

packages/core/src/schema/material.ts

@@ -0,0 +1,140 @@
+import { z } from 'zod'
+
+export const MaterialPreset = z.enum([
+  'white',
+  'brick',
+  'concrete',
+  'wood',
+  'glass',
+  'metal',
+  'plaster',
+  'tile',
+  'marble',
+  'custom',
+])
+export type MaterialPreset = z.infer<typeof MaterialPreset>
+
+export const MaterialProperties = z.object({
+  color: z.string().default('#ffffff'),
+  roughness: z.number().min(0).max(1).default(0.5),
+  metalness: z.number().min(0).max(1).default(0),
+  opacity: z.number().min(0).max(1).default(1),
+  transparent: z.boolean().default(false),
+  side: z.enum(['front', 'back', 'double']).default('front'),
+})
+export type MaterialProperties = z.infer<typeof MaterialProperties>
+
+export const MaterialSchema = z.object({
+  preset: MaterialPreset.optional(),
+  properties: MaterialProperties.optional(),
+  texture: z
+    .object({
+      url: z.string(),
+      repeat: z.tuple([z.number(), z.number()]).optional(),
+      scale: z.number().optional(),
+    })
+    .optional(),
+})
+export type MaterialSchema = z.infer<typeof MaterialSchema>
+
+export const DEFAULT_MATERIALS: Record<MaterialPreset, MaterialProperties> = {
+  white: {
+    color: '#ffffff',
+    roughness: 0.9,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  brick: {
+    color: '#8b4513',
+    roughness: 0.85,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  concrete: {
+    color: '#808080',
+    roughness: 0.8,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  wood: {
+    color: '#deb887',
+    roughness: 0.7,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  glass: {
+    color: '#87ceeb',
+    roughness: 0.1,
+    metalness: 0.1,
+    opacity: 0.3,
+    transparent: true,
+    side: 'double',
+  },
+  metal: {
+    color: '#c0c0c0',
+    roughness: 0.3,
+    metalness: 0.9,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  plaster: {
+    color: '#f5f5dc',
+    roughness: 0.95,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  tile: {
+    color: '#d3d3d3',
+    roughness: 0.4,
+    metalness: 0.1,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  marble: {
+    color: '#fafafa',
+    roughness: 0.2,
+    metalness: 0.1,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+  custom: {
+    color: '#ffffff',
+    roughness: 0.5,
+    metalness: 0,
+    opacity: 1,
+    transparent: false,
+    side: 'front',
+  },
+}
+
+export function resolveMaterial(material?: MaterialSchema): MaterialProperties {
+  if (!material) {
+    return DEFAULT_MATERIALS.white
+  }
+
+  if (material.preset && material.preset !== 'custom') {
+    const presetProps = DEFAULT_MATERIALS[material.preset]
+    return {
+      ...presetProps,
+      ...material.properties,
+    }
+  }
+
+  return {
+    ...DEFAULT_MATERIALS.custom,
+    ...material.properties,
+  }
+}

packages/core/src/schema/nodes/ceiling.ts

@@ -1,14 +1,14 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 import { ItemNode } from './item'
 
 export const CeilingNode = BaseNode.extend({
   id: objectId('ceiling'),
   type: nodeType('ceiling'),
   children: z.array(ItemNode.shape.id).default([]),
-  // Specific props
+  material: MaterialSchema.optional(),
-  // Polygon boundary - array of [x, z] coordinates defining the ceiling
   polygon: z.array(z.tuple([z.number(), z.number()])),
   holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
   height: z.number().default(2.5), // Height in meters

packages/core/src/schema/nodes/door.ts

@@ -1,6 +1,7 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 
 export const DoorSegment = z.object({
   type: z.enum(['panel', 'glass', 'empty']),
@@ -20,6 +21,7 @@ export type DoorSegment = z.infer<typeof DoorSegment>
 export const DoorNode = BaseNode.extend({
   id: objectId('door'),
   type: nodeType('door'),
+  material: MaterialSchema.optional(),
 
   position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
   rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),

packages/core/src/schema/nodes/roof-segment.ts

@@ -1,6 +1,7 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 
 export const RoofType = z.enum(['hip', 'gable', 'shed', 'gambrel', 'dutch', 'mansard', 'flat'])
 
@@ -9,7 +10,7 @@ export type RoofType = z.infer<typeof RoofType>
 export const RoofSegmentNode = BaseNode.extend({
   id: objectId('rseg'),
   type: nodeType('roof-segment'),
-  // Position relative to parent roof group
+  material: MaterialSchema.optional(),
   position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
   // Rotation around Y axis in radians
   rotation: z.number().default(0),

packages/core/src/schema/nodes/roof.ts

@@ -1,12 +1,13 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 import { RoofSegmentNode } from './roof-segment'
 
 export const RoofNode = BaseNode.extend({
   id: objectId('roof'),
   type: nodeType('roof'),
-  // Position of the roof group center
+  material: MaterialSchema.optional(),
   position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
   // Rotation around Y axis in radians
   rotation: z.number().default(0),

packages/core/src/schema/nodes/slab.ts

@@ -1,12 +1,12 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 
 export const SlabNode = BaseNode.extend({
   id: objectId('slab'),
   type: nodeType('slab'),
-  // Specific props
+  material: MaterialSchema.optional(),
-  // Polygon boundary - array of [x, z] coordinates defining the slab
   polygon: z.array(z.tuple([z.number(), z.number()])),
   holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
   elevation: z.number().default(0.05), // Elevation in meters

packages/core/src/schema/nodes/wall.ts

@@ -1,6 +1,7 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 import { ItemNode } from './item'
 // import { DoorNode } from "./door";
 // import { ItemNode } from "./item";
@@ -10,7 +11,7 @@ export const WallNode = BaseNode.extend({
   id: objectId('wall'),
   type: nodeType('wall'),
   children: z.array(ItemNode.shape.id).default([]),
-  // Specific props
+  material: MaterialSchema.optional(),
   thickness: z.number().optional(),
   height: z.number().optional(),
   // e.g., start/end points for path

packages/core/src/schema/nodes/window.ts

@@ -1,12 +1,13 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'
 
 export const WindowNode = BaseNode.extend({
   id: objectId('window'),
   type: nodeType('window'),
+  material: MaterialSchema.optional(),
 
-  // Position in wall-local coordinate system (center of window)
   position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
   rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
   side: z.enum(['front', 'back']).optional(),

packages/core/src/store/actions/node-actions.ts

@@ -104,11 +104,17 @@ export const updateNodesAction = (
   })
 
   // Collect all IDs that need to be marked dirty
-  updates.forEach((u) => idsToMarkDirty.add(u.id))
+  for (const u of updates) {
-  parentsToUpdate.forEach((pId) => idsToMarkDirty.add(pId))
+    idsToMarkDirty.add(u.id)
+  }
+  for (const pId of parentsToUpdate) {
+    idsToMarkDirty.add(pId)
+  }
 
   // Add to pending updates set
-  idsToMarkDirty.forEach((id) => pendingUpdates.add(id))
+  for (const id of idsToMarkDirty) {
+    pendingUpdates.add(id)
+  }
 
   // Cancel any pending RAF and schedule a new one
   if (pendingRafId !== null) {

packages/core/src/utils/clone-scene-graph.ts

@@ -52,9 +52,7 @@ export function cloneSceneGraph(sceneGraph: SceneGraph): SceneGraph {
 
     // Remap children array (walls, levels, buildings, sites, items can have children)
     if ('children' in clonedNode && Array.isArray(clonedNode.children)) {
-      ;(clonedNode as Record<string, unknown>).children = (
+      ;(clonedNode as Record<string, unknown>).children = (clonedNode.children as string[])
-        clonedNode.children as string[]
-      )
         .map((childId) => idMap.get(childId))
         .filter((id): id is string => id !== undefined)
     }

packages/editor/src/components/editor/export-manager.tsx

@@ -4,8 +4,8 @@ import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
-import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
+import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
 
 export function ExportManager() {
   const scene = useThree((state) => state.scene)

packages/editor/src/components/tools/wall/wall-tool.tsx

@@ -6,7 +6,12 @@ import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
-import { createWallOnCurrentLevel, snapWallDraftPoint, WALL_MIN_LENGTH, type WallPlanPoint } from './wall-drafting'
+import {
+  createWallOnCurrentLevel,
+  snapWallDraftPoint,
+  WALL_MIN_LENGTH,
+  type WallPlanPoint,
+} from './wall-drafting'
 
 const WALL_HEIGHT = 2.5
 

packages/editor/src/components/ui/controls/material-picker.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { DEFAULT_MATERIALS, type MaterialPreset, type MaterialSchema } from '@pascal-app/core'
+import { useState } from 'react'
+
+const PRESET_COLORS: Record<MaterialPreset, string> = {
+  white: '#ffffff',
+  brick: '#8b4513',
+  concrete: '#808080',
+  wood: '#deb887',
+  glass: '#87ceeb',
+  metal: '#c0c0c0',
+  plaster: '#f5f5dc',
+  tile: '#d3d3d3',
+  marble: '#fafafa',
+  custom: '#ffffff',
+}
+
+const PRESET_LABELS: Record<MaterialPreset, string> = {
+  white: 'White',
+  brick: 'Brick',
+  concrete: 'Concrete',
+  wood: 'Wood',
+  glass: 'Glass',
+  metal: 'Metal',
+  plaster: 'Plaster',
+  tile: 'Tile',
+  marble: 'Marble',
+  custom: 'Custom',
+}
+
+type MaterialPickerProps = {
+  value?: MaterialSchema
+  onChange: (material: MaterialSchema) => void
+}
+
+export function MaterialPicker({ value, onChange }: MaterialPickerProps) {
+  const [showCustom, setShowCustom] = useState<boolean>(value?.preset === 'custom' || !!value?.properties)
+
+  const currentPreset = value?.preset || 'white'
+  const currentProps = value?.properties || DEFAULT_MATERIALS[currentPreset]
+
+  const handlePresetChange = (preset: MaterialPreset) => {
+    if (preset === 'custom') {
+      setShowCustom(true)
+      onChange({
+        preset: 'custom',
+        properties: {
+          color: value?.properties?.color || '#ffffff',
+          roughness: value?.properties?.roughness ?? 0.5,
+          metalness: value?.properties?.metalness ?? 0,
+          opacity: value?.properties?.opacity ?? 1,
+          transparent: value?.properties?.transparent ?? false,
+          side: value?.properties?.side ?? 'front',
+        },
+      })
+    } else {
+      setShowCustom(false)
+      onChange({ preset })
+    }
+  }
+
+  const handlePropertyChange = (prop: keyof typeof currentProps, val: typeof currentProps[keyof typeof currentProps]) => {
+    onChange({
+      preset: showCustom ? 'custom' : currentPreset,
+      properties: {
+        ...currentProps,
+        [prop]: val,
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-5 gap-1.5">
+        {(Object.keys(PRESET_COLORS) as MaterialPreset[]).map((preset) => (
+          <button
+            className={`h-8 w-8 rounded border-2 transition-all ${
+              currentPreset === preset
+                ? 'border-blue-500 ring-2 ring-blue-500/30'
+                : 'border-gray-300 hover:border-gray-400'
+            }`}
+            key={preset}
+            onClick={() => handlePresetChange(preset)}
+            style={{
+              backgroundColor: PRESET_COLORS[preset],
+              backgroundImage: preset === 'glass' ? 'linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent)' : undefined,
+              backgroundSize: preset === 'glass' ? '8px 8px' : undefined,
+            }}
+            title={PRESET_LABELS[preset]}
+            type="button"
+          />
+        ))}
+      </div>
+
+      {showCustom && (
+        <div className="space-y-2 pt-2">
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-gray-500 w-16">Color</label>
+            <input
+              className="h-7 w-12 rounded border border-gray-300 cursor-pointer"
+              onChange={(e) => handlePropertyChange('color', e.target.value)}
+              type="color"
+              value={currentProps.color}
+            />
+            <input
+              className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded"
+              onChange={(e) => handlePropertyChange('color', e.target.value)}
+              type="text"
+              value={currentProps.color}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-gray-500 w-16">Roughness</label>
+            <input
+              className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+              max={1}
+              min={0}
+              onChange={(e) => handlePropertyChange('roughness', parseFloat(e.target.value))}
+              step={0.01}
+              type="range"
+              value={currentProps.roughness}
+            />
+            <span className="text-xs text-gray-400 w-8 text-right">{currentProps.roughness.toFixed(2)}</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-gray-500 w-16">Metalness</label>
+            <input
+              className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+              max={1}
+              min={0}
+              onChange={(e) => handlePropertyChange('metalness', parseFloat(e.target.value))}
+              step={0.01}
+              type="range"
+              value={currentProps.metalness}
+            />
+            <span className="text-xs text-gray-400 w-8 text-right">{currentProps.metalness.toFixed(2)}</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-gray-500 w-16">Opacity</label>
+            <input
+              className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+              max={1}
+              min={0}
+              onChange={(e) => {
+                const opacity = parseFloat(e.target.value)
+                handlePropertyChange('opacity', opacity)
+                if (opacity < 1 && !currentProps.transparent) {
+                  handlePropertyChange('transparent', true)
+                }
+              }}
+              step={0.01}
+              type="range"
+              value={currentProps.opacity}
+            />
+            <span className="text-xs text-gray-400 w-8 text-right">{currentProps.opacity.toFixed(2)}</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-gray-500 w-16">Side</label>
+            <select
+              className="flex-1 h-7 px-2 text-xs border border-gray-300 rounded"
+              onChange={(e) => handlePropertyChange('side', e.target.value as 'front' | 'back' | 'double')}
+              value={currentProps.side}
+            >
+              <option value="front">Front</option>
+              <option value="back">Back</option>
+              <option value="double">Double</option>
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

packages/editor/src/components/ui/panels/ceiling-panel.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { type AnyNode, type CeilingNode, useScene } from '@pascal-app/core'
+import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Edit, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
 import useEditor from '../../../store/use-editor'
 import { ActionButton } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
@@ -94,6 +95,10 @@ export function CeilingPanel() {
     [selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
   )
 
+  const handleMaterialChange = useCallback((material: MaterialSchema) => {
+    handleUpdate({ material })
+  }, [handleUpdate])
+
   if (!node || node.type !== 'ceiling' || selectedIds.length !== 1) return null
 
   const calculateArea = (polygon: Array<[number, number]>): number => {
@@ -217,6 +222,13 @@ export function CeilingPanel() {
           />
         </div>
       </PanelSection>
+
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={handleMaterialChange}
+          value={node.material}
+        />
+      </PanelSection>
     </PanelWrapper>
   )
 }

packages/editor/src/components/ui/panels/door-panel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type AnyNode, type AnyNodeId, DoorNode, emitter, useScene } from '@pascal-app/core'
+import { type AnyNode, type AnyNodeId, type MaterialSchema, DoorNode, emitter, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
@@ -8,6 +8,7 @@ import { usePresetsAdapter } from '../../../contexts/presets-context'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
@@ -562,6 +563,13 @@ export function DoorPanel() {
         </div>
       </PanelSection>
 
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={(material) => handleUpdate({ material })}
+          value={node.material}
+        />
+      </PanelSection>
+
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />

packages/editor/src/components/ui/panels/roof-panel.tsx

@@ -3,6 +3,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  type MaterialSchema,
   type RoofNode,
   RoofNode as RoofNodeSchema,
   type RoofSegmentNode,
@@ -15,6 +16,7 @@ import { useCallback } from 'react'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
@@ -122,6 +124,10 @@ export function RoofPanel() {
     setSelection({ selectedIds: [] })
   }, [selectedId, node, setSelection])
 
+  const handleMaterialChange = useCallback((material: MaterialSchema) => {
+    handleUpdate({ material })
+  }, [handleUpdate])
+
   if (!node || node.type !== 'roof' || selectedIds.length !== 1) return null
 
   const segments = (node.children ?? [])
@@ -229,6 +235,13 @@ export function RoofPanel() {
         </div>
       </PanelSection>
 
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={handleMaterialChange}
+          value={node.material}
+        />
+      </PanelSection>
+
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />

packages/editor/src/components/ui/panels/roof-segment-panel.tsx

@@ -3,6 +3,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  type MaterialSchema,
   type RoofSegmentNode,
   RoofSegmentNode as RoofSegmentNodeSchema,
   type RoofType,
@@ -14,6 +15,7 @@ import { useCallback } from 'react'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
@@ -108,6 +110,10 @@ export function RoofSegmentPanel() {
     }
   }, [selectedId, node, setSelection])
 
+  const handleMaterialChange = useCallback((material: MaterialSchema) => {
+    handleUpdate({ material })
+  }, [handleUpdate])
+
   if (!node || node.type !== 'roof-segment' || selectedIds.length !== 1) return null
 
   return (
@@ -293,6 +299,13 @@ export function RoofSegmentPanel() {
         </div>
       </PanelSection>
 
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={handleMaterialChange}
+          value={node.material}
+        />
+      </PanelSection>
+
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />

packages/editor/src/components/ui/panels/slab-panel.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { type AnyNode, type SlabNode, useScene } from '@pascal-app/core'
+import { type AnyNode, type MaterialSchema, type SlabNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Edit, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
@@ -29,6 +30,10 @@ export function SlabPanel() {
     [selectedId, updateNode],
   )
 
+  const handleMaterialChange = useCallback((material: MaterialSchema) => {
+    handleUpdate({ material })
+  }, [handleUpdate])
+
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
     setEditingHole(null)
@@ -216,6 +221,13 @@ export function SlabPanel() {
           />
         </div>
       </PanelSection>
+
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={handleMaterialChange}
+          value={node.material}
+        />
+      </PanelSection>
     </PanelWrapper>
   )
 }

packages/editor/src/components/ui/panels/wall-panel.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { type AnyNode, type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
+import { type AnyNode, type AnyNodeId, type MaterialSchema, useScene, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback } from 'react'
+import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
@@ -25,7 +26,6 @@ export function WallPanel() {
     [selectedId, updateNode],
   )
 
-  // Função mágica para a Issue #191: Atualiza o comprimento via cálculo vetorial
   const handleUpdateLength = useCallback((newLength: number) => {
     if (!node || newLength <= 0) return
 
@@ -35,11 +35,9 @@ export function WallPanel() {
 
     if (currentLength === 0) return
 
-    // Calcula a direção (vetor unitário)
     const dirX = dx / currentLength
     const dirZ = dz / currentLength
 
-    // Define o novo ponto final baseado no novo comprimento
     const newEnd: [number, number] = [
       node.start[0] + dirX * newLength,
       node.start[1] + dirZ * newLength
@@ -48,6 +46,10 @@ export function WallPanel() {
     handleUpdate({ end: newEnd })
   }, [node, handleUpdate])
 
+  const handleMaterialChange = useCallback((material: MaterialSchema) => {
+    handleUpdate({ material })
+  }, [handleUpdate])
+
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -69,7 +71,6 @@ export function WallPanel() {
       width={280}
     >
       <PanelSection title="Dimensions">
-        {/* Adicionando o controle de Length solicitado na Issue #191 */}
         <SliderControl
           label="Length"
           max={20}
@@ -101,6 +102,13 @@ export function WallPanel() {
           value={Math.round(thickness * 1000) / 1000}
         />
       </PanelSection>
+
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={handleMaterialChange}
+          value={node.material}
+        />
+      </PanelSection>
     </PanelWrapper>
   )
 }

packages/editor/src/components/ui/panels/window-panel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type AnyNode, type AnyNodeId, emitter, useScene, WindowNode } from '@pascal-app/core'
+import { type AnyNode, type AnyNodeId, emitter, type MaterialSchema, useScene, WindowNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
@@ -8,6 +8,7 @@ import { usePresetsAdapter } from '../../../contexts/presets-context'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
 import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
@@ -138,6 +139,10 @@ export function WindowPanel() {
     [handleUpdate],
   )
 
+  const handleMaterialChange = useCallback((material: MaterialSchema) => {
+    handleUpdate({ material })
+  }, [handleUpdate])
+
   if (!node || node.type !== 'window' || selectedIds.length !== 1) return null
 
   const numCols = node.columnRatios.length
@@ -402,6 +407,13 @@ export function WindowPanel() {
         )}
       </PanelSection>
 
+      <PanelSection title="Material">
+        <MaterialPicker
+          onChange={handleMaterialChange}
+          value={node.material}
+        />
+      </PanelSection>
+
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />

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

@@ -1,49 +1,37 @@
 import { type CeilingNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import { float, mix, positionWorld, smoothstep } from 'three/tsl'
 import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
 import { NodeRenderer } from '../node-renderer'
 
-// TSL material that renders differently based on face direction:
+const gridScale = 5
-// - Back face (looking up at ceiling from below): solid
+const gridX = positionWorld.x.mul(gridScale).fract()
-// - Front face (looking down at ceiling from above): 30% opacity
+const gridY = positionWorld.z.mul(gridScale).fract()
-const ceilingTopMaterial = new MeshBasicNodeMaterial({
+const lineWidth = 0.05
-  color: 0xb5_a7_8d,
+const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
+const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
+const gridPattern = lineX.max(lineY)
+const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
+
+function createCeilingMaterials(color: string = '#999999') {
+  const topMaterial = new MeshBasicNodeMaterial({
+    color,
     transparent: true,
     depthWrite: false,
     side: FrontSide,
-  // Disabled as we only show ceiling grid when needed
-  // alphaTestNode: float(0.4), // Discard pixels with alpha below 0.4 to create grid lines and not affect depth buffer
   })
+  topMaterial.opacityNode = gridOpacity
 
-const ceilingBottomMaterial = new MeshBasicNodeMaterial({
+  const bottomMaterial = new MeshBasicNodeMaterial({
-  color: 0x99_99_99,
+    color,
     transparent: true,
     side: BackSide,
   })
 
-// Create grid pattern based on local position
+  return { topMaterial, bottomMaterial }
-const gridScale = 5 // Grid cells per meter (1 = 1m grid)
+}
-const gridX = positionWorld.x.mul(gridScale).fract()
-const gridY = positionWorld.z.mul(gridScale).fract()
-
-// Create grid lines - they are at 0 and 1
-const lineWidth = 0.05 // Width of grid lines (0-1 range within cell)
-
-// Create visible lines at edges (near 0 and near 1)
-const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
-const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
-
-// Combine: if either X or Y is a line, show the line
-const gridPattern = lineX.max(lineY)
-
-// Grid lines at 0.6 opacity, spaces at 0.2 opacity
-const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
-
-// faceDirection is 1.0 for front face, -1.0 for back face
-// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
-ceilingTopMaterial.opacityNode = gridOpacity
 
 export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   const ref = useRef<Mesh>(null!)
@@ -51,12 +39,24 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   useRegistry(node.id, 'ceiling', ref)
   const handlers = useNodeEvents(node, 'ceiling')
 
+  const materials = useMemo(() => {
+    const mat = node.material
+    if (mat) {
+      const props = mat.properties
+      const color = props?.color || '#999999'
+      return createCeilingMaterials(color)
+    }
+    return {
+      topMaterial: createCeilingMaterials().topMaterial,
+      bottomMaterial: DEFAULT_CEILING_MATERIAL,
+    }
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
   return (
-    <mesh material={ceilingBottomMaterial} ref={ref}>
+    <mesh material={materials.bottomMaterial} ref={ref}>
-      {/* CeilingSystem will replace this geometry in the next frame */}
       <boxGeometry args={[0, 0, 0]} />
       <mesh
-        material={ceilingTopMaterial}
+        material={materials.topMaterial}
         name="ceiling-grid"
         {...handlers}
         scale={0}

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

@@ -1,7 +1,8 @@
 import { type DoorNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial, DEFAULT_DOOR_MATERIAL } from '../../../lib/materials'
 
 export const DoorRenderer = ({ node }: { node: DoorNode }) => {
   const ref = useRef<Mesh>(null!)
@@ -10,9 +11,16 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
   const handlers = useNodeEvents(node, 'door')
   const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
 
+  const material = useMemo(() => {
+    const mat = node.material
+    if (!mat) return DEFAULT_DOOR_MATERIAL
+    return createMaterial(mat)
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
   return (
     <mesh
       castShadow
+      material={material}
       position={node.position}
       receiveShadow
       ref={ref}
@@ -20,9 +28,7 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
       visible={node.visible}
       {...(isTransient ? {} : handlers)}
     >
-      {/* DoorSystem replaces this geometry each time the node is dirty */}
       <boxGeometry args={[0, 0, 0]} />
-      <meshStandardMaterial color="#d1d5db" />
     </mesh>
   )
 }

packages/viewer/src/components/renderers/roof-segment/roof-segment-renderer.tsx

@@ -1,7 +1,8 @@
 import { type RoofSegmentNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial } from '../../../lib/materials'
 import useViewer from '../../../store/use-viewer'
 import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials'
 
@@ -13,9 +14,17 @@ export const RoofSegmentRenderer = ({ node }: { node: RoofSegmentNode }) => {
   const handlers = useNodeEvents(node, 'roof-segment')
   const debugColors = useViewer((s) => s.debugColors)
 
+  const customMaterial = useMemo(() => {
+    const mat = node.material
+    if (!mat) return null
+    return createMaterial(mat)
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
+  const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
+
   return (
     <mesh
-      material={debugColors ? roofDebugMaterials : roofMaterials}
+      material={material}
       position={node.position}
       ref={ref}
       rotation-y={node.rotation}

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

@@ -1,7 +1,8 @@
 import { type RoofNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial } from '../../../lib/materials'
 import useViewer from '../../../store/use-viewer'
 import { NodeRenderer } from '../node-renderer'
 import { roofDebugMaterials, roofMaterials } from './roof-materials'
@@ -14,6 +15,14 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
   const handlers = useNodeEvents(node, 'roof')
   const debugColors = useViewer((s) => s.debugColors)
 
+  const customMaterial = useMemo(() => {
+    const mat = node.material
+    if (!mat) return null
+    return createMaterial(mat)
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
+  const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
+
   return (
     <group
       position={node.position}
@@ -22,12 +31,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
       visible={node.visible}
       {...handlers}
     >
-      <mesh
+      <mesh castShadow material={material} name="merged-roof" receiveShadow>
-        castShadow
-        material={debugColors ? roofDebugMaterials : roofMaterials}
-        name="merged-roof"
-        receiveShadow
-      >
         <boxGeometry args={[0, 0, 0]} />
       </mesh>
       <group name="segments-wrapper" visible={false}>

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

@@ -1,7 +1,8 @@
 import { type SlabNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial, DEFAULT_SLAB_MATERIAL } from '../../../lib/materials'
 
 export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const ref = useRef<Mesh>(null!)
@@ -10,11 +11,22 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
 
   const handlers = useNodeEvents(node, 'slab')
 
+  const material = useMemo(() => {
+    const mat = node.material
+    if (!mat) return DEFAULT_SLAB_MATERIAL
+    return createMaterial(mat)
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
   return (
-    <mesh castShadow receiveShadow ref={ref} {...handlers} visible={node.visible}>
+    <mesh
-      {/* SlabSystem will replace this geometry in the next frame */}
+      castShadow
+      receiveShadow
+      ref={ref}
+      {...handlers}
+      visible={node.visible}
+      material={material}
+    >
       <boxGeometry args={[0, 0, 0]} />
-      <meshStandardMaterial color="#e5e5e5" />
     </mesh>
   )
 }

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

@@ -1,7 +1,8 @@
 import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
-import { useLayoutEffect, useRef } from 'react'
+import { useLayoutEffect, useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials'
 import { NodeRenderer } from '../node-renderer'
 
 export const WallRenderer = ({ node }: { node: WallNode }) => {
@@ -9,18 +10,21 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
 
   useRegistry(node.id, 'wall', ref)
 
-  // Mark dirty on mount so WallSystem rebuilds geometry when wall (re)appears
   useLayoutEffect(() => {
     useScene.getState().markDirty(node.id)
   }, [node.id])
 
   const handlers = useNodeEvents(node, 'wall')
 
+  const material = useMemo(() => {
+    const mat = node.material
+    if (!mat) return DEFAULT_WALL_MATERIAL
+    return createMaterial(mat)
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
   return (
-    <mesh castShadow receiveShadow ref={ref} visible={node.visible}>
+    <mesh castShadow receiveShadow ref={ref} visible={node.visible} material={material}>
-      {/* WallSystem will replace this geometry in the next frame */}
       <boxGeometry args={[0, 0, 0]} />
-      {/* Collision mesh: full-wall geometry (no cutouts) for pointer events */}
       <mesh name="collision-mesh" visible={false} {...handlers}>
         <boxGeometry args={[0, 0, 0]} />
       </mesh>

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

@@ -1,7 +1,8 @@
 import { useRegistry, type WindowNode } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial, DEFAULT_WINDOW_MATERIAL } from '../../../lib/materials'
 
 export const WindowRenderer = ({ node }: { node: WindowNode }) => {
   const ref = useRef<Mesh>(null!)
@@ -10,9 +11,16 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
   const handlers = useNodeEvents(node, 'window')
   const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
 
+  const material = useMemo(() => {
+    const mat = node.material
+    if (!mat) return DEFAULT_WINDOW_MATERIAL
+    return createMaterial(mat)
+  }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
+
   return (
     <mesh
       castShadow
+      material={material}
       position={node.position}
       receiveShadow
       ref={ref}
@@ -20,9 +28,7 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
       visible={node.visible}
       {...(isTransient ? {} : handlers)}
     >
-      {/* WindowSystem replaces this geometry each time the node is dirty */}
       <boxGeometry args={[0, 0, 0]} />
-      <meshStandardMaterial color="#d1d5db" />
     </mesh>
   )
 }

packages/viewer/src/hooks/use-gltf-ktx2.tsx

@@ -36,4 +36,5 @@ const useGLTFKTX2 = (path: string): ReturnType<typeof useGLTF> => {
     loader.setMeshoptDecoder(MeshoptDecoder)
   })
 }
+
 export { useGLTFKTX2 }

packages/viewer/src/index.ts

@@ -1,6 +1,18 @@
 export { default as Viewer } from './components/viewer'
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url'
 export { SCENE_LAYER, ZONE_LAYER } from './lib/layers'
+export {
+  clearMaterialCache,
+  createDefaultMaterial,
+  createMaterial,
+  DEFAULT_CEILING_MATERIAL,
+  DEFAULT_DOOR_MATERIAL,
+  DEFAULT_ROOF_MATERIAL,
+  DEFAULT_SLAB_MATERIAL,
+  DEFAULT_WALL_MATERIAL,
+  DEFAULT_WINDOW_MATERIAL,
+  disposeMaterial,
+} from './lib/materials'
 export { default as useViewer } from './store/use-viewer'
 export { InteractiveSystem } from './systems/interactive/interactive-system'
 export { snapLevelsToTruePositions } from './systems/level/level-utils'

packages/viewer/src/lib/materials.ts

@@ -0,0 +1,72 @@
+import { type MaterialProperties, type MaterialSchema, resolveMaterial } from '@pascal-app/core'
+import * as THREE from 'three'
+
+const sideMap: Record<MaterialProperties['side'], THREE.Side> = {
+  front: THREE.FrontSide,
+  back: THREE.BackSide,
+  double: THREE.DoubleSide,
+}
+
+const materialCache = new Map<string, THREE.MeshStandardMaterial>()
+
+function getCacheKey(props: MaterialProperties): string {
+  return `${props.color}-${props.roughness}-${props.metalness}-${props.opacity}-${props.transparent}-${props.side}`
+}
+
+export function createMaterial(material?: MaterialSchema): THREE.MeshStandardMaterial {
+  const props = resolveMaterial(material)
+  const cacheKey = getCacheKey(props)
+
+  if (materialCache.has(cacheKey)) {
+    return materialCache.get(cacheKey)!
+  }
+
+  const threeMaterial = new THREE.MeshStandardMaterial({
+    color: props.color,
+    roughness: props.roughness,
+    metalness: props.metalness,
+    opacity: props.opacity,
+    transparent: props.transparent,
+    side: sideMap[props.side],
+  })
+
+  materialCache.set(cacheKey, threeMaterial)
+  return threeMaterial
+}
+
+export function createDefaultMaterial(
+  color: string = '#ffffff',
+  roughness: number = 0.9,
+): THREE.MeshStandardMaterial {
+  return new THREE.MeshStandardMaterial({
+    color,
+    roughness,
+    metalness: 0,
+    side: THREE.FrontSide,
+  })
+}
+
+export const DEFAULT_WALL_MATERIAL = createDefaultMaterial('#ffffff', 0.9)
+export const DEFAULT_SLAB_MATERIAL = createDefaultMaterial('#e5e5e5', 0.8)
+export const DEFAULT_DOOR_MATERIAL = createDefaultMaterial('#8b4513', 0.7)
+export const DEFAULT_WINDOW_MATERIAL = new THREE.MeshStandardMaterial({
+  color: '#87ceeb',
+  roughness: 0.1,
+  metalness: 0.1,
+  opacity: 0.3,
+  transparent: true,
+  side: THREE.DoubleSide,
+})
+export const DEFAULT_CEILING_MATERIAL = createDefaultMaterial('#f5f5dc', 0.95)
+export const DEFAULT_ROOF_MATERIAL = createDefaultMaterial('#808080', 0.85)
+
+export function disposeMaterial(material: THREE.Material): void {
+  material.dispose()
+}
+
+export function clearMaterialCache(): void {
+  for (const material of materialCache.values()) {
+    material.dispose()
+  }
+  materialCache.clear()
+}

packages/viewer/src/systems/wall/wall-cutout.tsx

@@ -10,81 +10,105 @@ const tmpVec = new Vector3()
 const u = new Vector3()
 const v = new Vector3()
 
-// Dot pattern shader
 const dotPattern = Fn(() => {
-  // Create a repeating grid pattern based on world position
+  const scale = float(0.1)
-  const scale = float(0.1) // Dot grid spacing (10cm)
+  const dotSize = float(0.3)
-  const dotSize = float(0.3) // Size of dots relative to grid
 
-  // Use XY coordinates for pattern on wall face
   const uv = vec2(positionLocal.x, positionLocal.y).div(scale)
   const gridUV = fract(uv)
 
-  // Distance from center of grid cell (creates circular dots)
   const dist = length(gridUV.sub(0.5))
 
-  // Create dots: 1 where we want dots, 0 elsewhere
   const dots = step(dist, dotSize.mul(0.5))
 
-  // Vertical fade: fade out as Y increases (from bottom to top)
+  const fadeHeight = float(2.5)
-  const fadeHeight = float(2.5) // Fade over 2.5 meters
   const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y))
 
   return dots.mul(yFade)
 })
 
-const invsibleWallMaterial = new MeshStandardNodeMaterial({
+interface WallMaterials {
-  transparent: true,
+  visible: MeshStandardNodeMaterial
-  opacityNode: mix(float(0.0), float(0.24), dotPattern()),
+  invisible: MeshStandardNodeMaterial
-  color: 'white',
+  materialHash: string
-  depthWrite: false,
+}
-  emissive: 'white',
+
-})
+const wallMaterialCache = new Map<string, WallMaterials>()
-const wallMaterial = new MeshStandardNodeMaterial({
+
-  color: 'white',
+function getMaterialHash(wallNode: WallNode): string {
+  if (!wallNode.material) return 'none'
+  const mat = wallNode.material
+  if (mat.preset && mat.preset !== 'custom') {
+    return `preset-${mat.preset}`
+  }
+  if (mat.properties) {
+    return `props-${mat.properties.color}-${mat.properties.roughness}-${mat.properties.metalness}`
+  }
+  return 'default'
+}
+
+const presetColors = {
+  white: '#ffffff',
+  brick: '#8b4513',
+  concrete: '#808080',
+  wood: '#deb887',
+  glass: '#87ceeb',
+  metal: '#c0c0c0',
+  plaster: '#f5f5dc',
+  tile: '#dcdcdc',
+  marble: '#f5f5f5',
+} as const
+
+function getPresetColor(preset: string): string {
+  return presetColors[preset as keyof typeof presetColors] ?? '#ffffff'
+}
+
+function getMaterialsForWall(wallNode: WallNode): WallMaterials {
+  const cacheKey = wallNode.id
+  const materialHash = getMaterialHash(wallNode)
+
+  const existing = wallMaterialCache.get(cacheKey)
+  if (existing && existing.materialHash === materialHash) {
+    return existing
+  }
+
+  if (existing) {
+    existing.visible.dispose()
+    existing.invisible.dispose()
+  }
+
+  let userColor = '#ffffff'
+  if (wallNode.material?.properties?.color) {
+    userColor = wallNode.material.properties.color
+  } else if (wallNode.material?.preset && wallNode.material.preset !== 'custom') {
+    userColor = getPresetColor(wallNode.material.preset)
+  }
+
+  const visibleMat = new MeshStandardNodeMaterial({
+    color: userColor,
     roughness: 1,
     metalness: 0,
   })
 
-export const WallCutout = () => {
+  const invisibleMat = new MeshStandardNodeMaterial({
-  const lastCameraPosition = useRef(new Vector3())
+    transparent: true,
-  const lastCameraTarget = useRef(new Vector3())
+    opacityNode: mix(float(0.0), float(0.24), dotPattern()),
-  const lastUpdateTime = useRef(0)
+    color: userColor,
-  const lastWallMode = useRef<string>(useViewer.getState().wallMode)
+    depthWrite: false,
-  const lastNumberOfWalls = useRef(0)
+    emissive: userColor,
+  })
 
-  useFrame(({ camera, clock }) => {
+  const result: WallMaterials = { visible: visibleMat, invisible: invisibleMat, materialHash }
-    const wallMode = useViewer.getState().wallMode
+  wallMaterialCache.set(cacheKey, result)
-    const currentTime = clock.elapsedTime
+  return result
-    const currentCameraPosition = camera.position
+}
-    camera.getWorldDirection(tmpVec)
-    tmpVec.add(currentCameraPosition)
 
-    // Throttle: only update if camera moved significantly AND enough time passed
+function getWallHideState(
-    const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current)
+  wallNode: WallNode,
-    const directionChanged = tmpVec.distanceTo(lastCameraTarget.current)
+  wallMesh: Mesh,
-    const timeSinceUpdate = currentTime - lastUpdateTime.current
+  wallMode: string,
-
+  cameraDir: Vector3,
-    // Update if moved > 0.5m OR direction changed > 0.3 AND at least 100ms passed
+): boolean {
-    if (
-      ((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
-      lastWallMode.current !== wallMode ||
-      sceneRegistry.byType.wall.size !== lastNumberOfWalls.current
-    ) {
-      // Camera has moved, update cutout logic here
-
-      // Update last known positions and time
-      lastCameraPosition.current.copy(currentCameraPosition)
-      lastCameraTarget.current.copy(tmpVec)
-      lastUpdateTime.current = currentTime
-      camera.getWorldDirection(u)
-
-      const walls = sceneRegistry.byType.wall
-      walls.forEach((wallId) => {
-        const wallMesh = sceneRegistry.nodes.get(wallId)
-        if (!wallMesh) return
-        const wallNode = useScene.getState().nodes[wallId as WallNode['id']]
-        if (!wallNode || wallNode.type !== 'wall') return
   let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior'
 
   if (wallMode === 'up') {
@@ -93,18 +117,94 @@ export const WallCutout = () => {
     hideWall = true
   } else {
     wallMesh.getWorldDirection(v)
-          if (v.dot(u) < 0) {
+    if (v.dot(cameraDir) < 0) {
-            // Front side
       if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
         hideWall = true
       }
     } else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
-            // Back side
       hideWall = true
     }
   }
-        ;(wallMesh as Mesh).material = hideWall ? invsibleWallMaterial : wallMaterial
+
+  return hideWall
+}
+
+export const WallCutout = () => {
+  const lastCameraPosition = useRef(new Vector3())
+  const lastCameraTarget = useRef(new Vector3())
+  const lastUpdateTime = useRef(0)
+  const lastWallMode = useRef<string>(useViewer.getState().wallMode)
+  const lastNumberOfWalls = useRef(0)
+  const lastWallMaterials = useRef<Map<string, WallMaterials>>(new Map())
+
+  useFrame(({ camera, clock }) => {
+    const wallMode = useViewer.getState().wallMode
+    const currentTime = clock.elapsedTime
+    const currentCameraPosition = camera.position
+    camera.getWorldDirection(tmpVec)
+    tmpVec.add(currentCameraPosition)
+
+    const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current)
+    const directionChanged = tmpVec.distanceTo(lastCameraTarget.current)
+    const timeSinceUpdate = currentTime - lastUpdateTime.current
+
+    const shouldUpdate =
+      ((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
+      lastWallMode.current !== wallMode ||
+      sceneRegistry.byType.wall.size !== lastNumberOfWalls.current
+
+    const walls = sceneRegistry.byType.wall
+    const currentWallIds = new Set<string>()
+
+    walls.forEach((wallId) => {
+      const wallMesh = sceneRegistry.nodes.get(wallId)
+      if (!wallMesh) return
+      const wallNode = useScene.getState().nodes[wallId as WallNode['id']]
+      if (!wallNode || wallNode.type !== 'wall') return
+
+      currentWallIds.add(wallId)
+
+      const hideWall = getWallHideState(wallNode, wallMesh as Mesh, wallMode, u)
+
+      if (shouldUpdate) {
+        const materials = getMaterialsForWall(wallNode)
+        ;(wallMesh as Mesh).material = hideWall ? materials.invisible : materials.visible
+      } else {
+        const currentMaterial = (wallMesh as Mesh).material
+        const materials = wallMaterialCache.get(wallId)
+        if (
+          !materials ||
+          currentMaterial !== (hideWall ? materials.invisible : materials.visible)
+        ) {
+          const newMaterials = getMaterialsForWall(wallNode)
+          ;(wallMesh as Mesh).material = hideWall ? newMaterials.invisible : newMaterials.visible
+        }
+      }
     })
+
+    if (shouldUpdate) {
+      lastCameraPosition.current.copy(currentCameraPosition)
+      lastCameraTarget.current.copy(tmpVec)
+      lastUpdateTime.current = currentTime
+      camera.getWorldDirection(u)
+
+      if (lastWallMode.current !== wallMode) {
+        wallMaterialCache.clear()
+      }
+
+      for (const [wallId, mats] of lastWallMaterials.current) {
+        if (!currentWallIds.has(wallId)) {
+          mats.visible.dispose()
+          mats.invisible.dispose()
+          wallMaterialCache.delete(wallId)
+        }
+      }
+
+      lastWallMaterials.current.clear()
+      for (const [wallId, mats] of wallMaterialCache) {
+        lastWallMaterials.current.set(wallId, mats)
+      }
+
       lastWallMode.current = wallMode
       lastNumberOfWalls.current = sceneRegistry.byType.wall.size
     }