@pascal-app/viewer 0.9.1 → 1.0.0-beta.1

package/dist/systems/window/window-system.js

@@ -1,13 +1,22 @@
-import { getEffectiveNode, sceneRegistry, useInteractive, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { DEFAULT_WALL_THICKNESS, getEffectiveNode, getWallThickness, sceneRegistry, useInteractive, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
-import { createSurfaceRoleMaterial, glassMaterial as defaultGlassMaterial, baseMaterial as getBaseMaterial, } from '../../lib/materials';
+import { applyWorldScaleBoxUVs } from '../../lib/box-uv';
+import { createSurfaceRoleMaterial, glassMaterial as defaultGlassMaterial, baseMaterial as getBaseMaterial, resolveMaterialRef, } from '../../lib/materials';
 import useViewer from '../../store/use-viewer';
+import { getOpeningCutoutProxyDepth } from '../wall/opening-cutout-geometry';
 // Invisible material for root mesh — used as selection hitbox only
 const hitboxMaterial = new THREE.MeshBasicMaterial({ visible: false });
 let baseMaterial = getBaseMaterial();
 let glassMaterial = defaultGlassMaterial;
+let currentWindowSlot;
+// Per-frame viewer state, captured so the per-node mesh builder (which runs
+// outside React) can resolve each window's slot materials.
+let currentShading = 'rendered';
+let currentTextures = true;
+let currentColorPreset = 'clay';
+let currentSceneMaterials;
 export const CASEMENT_WINDOW_SASH_NAME = 'casement-window-sash';
 export const FRENCH_CASEMENT_LEFT_SASH_NAME = 'french-casement-left-sash';
 export const FRENCH_CASEMENT_RIGHT_SASH_NAME = 'french-casement-right-sash';
@@ -27,6 +36,7 @@ export const WindowSystem = () => {
     const shading = useViewer((state) => state.shading);
     const textures = useViewer((state) => state.textures);
     const colorPreset = useViewer((state) => state.colorPreset);
+    const sceneMaterials = useScene((state) => state.materials);
     const materialRevisionRef = useRef(null);
     // Subscribe so override-only updates re-run this component. Mirrors
     // WallSystem + DoorSystem.
@@ -49,6 +59,20 @@ export const WindowSystem = () => {
             }
         }
     });
+    // Editing a scene material a window slot references must rebuild that window
+    // (window meshes are built by this system, not <GeometrySystem>, so its
+    // scene-material re-dirty doesn't cover them).
+    useEffect(() => {
+        void sceneMaterials;
+        const nodes = useScene.getState().nodes;
+        for (const node of Object.values(nodes)) {
+            if (node?.type !== 'window')
+                continue;
+            if (!nodeReferencesSceneMaterial(node))
+                continue;
+            useScene.getState().dirtyNodes.add(node.id);
+        }
+    }, [sceneMaterials]);
     useFrame(() => {
         if (dirtyNodes.size === 0)
             return;
@@ -58,11 +82,15 @@ export const WindowSystem = () => {
         glassMaterial = textures
             ? defaultGlassMaterial
             : createSurfaceRoleMaterial('glazing', colorPreset);
+        currentShading = shading;
+        currentTextures = textures;
+        currentColorPreset = colorPreset;
+        currentSceneMaterials = sceneMaterials;
         const nodes = useScene.getState().nodes;
         const dirtyWindowIds = [];
         dirtyNodes.forEach((id) => {
             const node = nodes[id];
-            if (!node || node.type !== 'window')
+            if (node?.type !== 'window')
                 return;
             dirtyWindowIds.push(id);
         });
@@ -80,7 +108,7 @@ export const WindowSystem = () => {
                 }
             }
             const node = nodes[id];
-            if (!node || node.type !== 'window')
+            if (node?.type !== 'window')
                 continue;
             const mesh = sceneRegistry.nodes.get(id);
             if (!mesh)
@@ -102,9 +130,70 @@ export const WindowSystem = () => {
     }, 3);
     return null;
 };
+function tagWindowSlot(mesh) {
+    mesh.userData.slotId = currentWindowSlot;
+    return mesh;
+}
+const NO_RAYCAST = () => { };
+// An open casement sash swings perpendicular to the wall, so in a top-down view
+// its flat panel blankets the room interior and wins the selection raycast over
+// the slab/items beneath it. Drop the swung sash out of the raycast so a floor
+// click falls through; the window stays selectable via its proud invisible
+// cutout proxy at the opening (see syncWindowCutout). Skipped while closed so
+// paint-by-slot still resolves on the sash.
+function disableSubtreeRaycastIfSwung(object, rotationY) {
+    if (Math.abs(rotationY) <= 1e-3)
+        return;
+    object.traverse((child) => {
+        ;
+        child.raycast = NO_RAYCAST;
+    });
+}
+function nodeReferencesSceneMaterial(node) {
+    const slots = node.slots;
+    if (!slots)
+        return false;
+    for (const ref of Object.values(slots)) {
+        if (typeof ref === 'string' && ref.startsWith('scene:'))
+            return true;
+    }
+    return false;
+}
+// Window frame/glass default to catalog finishes (generic approach). `preset-glass`
+// is now FrontSide (it was the only glass we use), so it's safe for the WebGPU
+// MRT scene pass.
+const FRAME_DEFAULT_REF = 'library:preset-softwhite';
+const GLASS_DEFAULT_REF = 'library:preset-glass';
+function windowSlotDefault(slotId) {
+    if (slotId === 'glass') {
+        if (!currentTextures)
+            return createSurfaceRoleMaterial('glazing', currentColorPreset);
+        return (resolveMaterialRef(GLASS_DEFAULT_REF, currentSceneMaterials, currentShading) ??
+            defaultGlassMaterial);
+    }
+    if (!currentTextures)
+        return createSurfaceRoleMaterial('joinery', currentColorPreset);
+    return (resolveMaterialRef(FRAME_DEFAULT_REF, currentSceneMaterials, currentShading) ??
+        getBaseMaterial(currentShading));
+}
+// Resolve a window's slot to a material: the `node.slots` override (colored mode
+// only) → the role/base default. Textures-off ignores overrides — the monochrome
+// escape hatch.
+function resolveWindowSlotMaterial(node, slotId) {
+    const fallback = windowSlotDefault(slotId);
+    if (!currentTextures)
+        return fallback;
+    const ref = node.slots?.[slotId];
+    if (!ref)
+        return fallback;
+    return resolveMaterialRef(ref, currentSceneMaterials, currentShading) ?? fallback;
+}
 function addBox(parent, material, w, h, d, x, y, z) {
-    const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), material);
+    const geometry = new THREE.BoxGeometry(w, h, d);
+    applyWorldScaleBoxUVs(geometry, w, h, d);
+    const m = new THREE.Mesh(geometry, material);
     m.position.set(x, y, z);
+    tagWindowSlot(m);
     parent.add(m);
 }
 function addShape(parent, material, shape, depth, z = 0) {
@@ -115,6 +204,7 @@ function addShape(parent, material, shape, depth, z = 0) {
     });
     geometry.translate(0, 0, -depth / 2 + z);
     const mesh = new THREE.Mesh(geometry, material);
+    tagWindowSlot(mesh);
     parent.add(mesh);
 }
 function disposeObjectGeometry(object) {
@@ -331,9 +421,11 @@ function addRoundedWindowVisuals(node, mesh) {
     const innerW = innerRight - innerLeft;
     const innerH = innerTop - innerBottom;
     const innerRadii = insetCornerRadii(outerRadii, inset, innerW, innerH);
+    currentWindowSlot = 'frame';
     addShape(mesh, baseMaterial, createRoundedFrameShape(width, height, inset, outerRadii), frameDepth);
     if (innerW > 0.01 && innerH > 0.01) {
         const glassDepth = Math.max(0.004, frameDepth * 0.08);
+        currentWindowSlot = 'glass';
         addShape(mesh, glassMaterial, createRoundedShape(innerLeft, innerRight, innerBottom, innerTop, innerRadii), glassDepth);
         const numCols = columnRatios.length;
         const numRows = rowRatios.length;
@@ -344,6 +436,7 @@ function addRoundedWindowVisuals(node, mesh) {
         const colWidths = columnRatios.map((r) => (r / colSum) * usableW);
         const rowHeights = rowRatios.map((r) => (r / rowSum) * usableH);
         let x = innerLeft;
+        currentWindowSlot = 'frame';
         for (let c = 0; c < numCols - 1; c++) {
             x += colWidths[c];
             const x1 = x;
@@ -355,6 +448,7 @@ function addRoundedWindowVisuals(node, mesh) {
             x += columnDividerThickness;
         }
         let y = innerTop;
+        currentWindowSlot = 'frame';
         for (let r = 0; r < numRows - 1; r++) {
             y -= rowHeights[r];
             const yTop = y;
@@ -369,6 +463,7 @@ function addRoundedWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -387,9 +482,11 @@ function addArchedWindowVisuals(node, mesh) {
     const innerH = innerTop - innerBottom;
     const innerArchHeight = getClampedArchHeight(innerW, innerH, archHeight - inset);
     const innerSpringY = innerTop - innerArchHeight;
+    currentWindowSlot = 'frame';
     addShape(mesh, baseMaterial, createArchedFrameShape(width, height, archHeight, inset), frameDepth);
     if (innerW > 0.01 && innerH > 0.01) {
         const glassDepth = Math.max(0.004, frameDepth * 0.08);
+        currentWindowSlot = 'glass';
         addShape(mesh, glassMaterial, createArchShape(innerLeft, innerRight, innerBottom, innerTop, innerArchHeight), glassDepth);
         const numCols = columnRatios.length;
         const numRows = rowRatios.length;
@@ -401,6 +498,7 @@ function addArchedWindowVisuals(node, mesh) {
         const rowHeights = rowRatios.map((r) => (r / rowSum) * usableH);
         const innerHalfWidth = innerW / 2;
         let x = innerLeft;
+        currentWindowSlot = 'frame';
         for (let c = 0; c < numCols - 1; c++) {
             x += colWidths[c];
             const x1 = x;
@@ -412,6 +510,7 @@ function addArchedWindowVisuals(node, mesh) {
             x += columnDividerThickness;
         }
         let y = innerTop;
+        currentWindowSlot = 'frame';
         for (let r = 0; r < numRows - 1; r++) {
             y -= rowHeights[r];
             const yTop = y;
@@ -428,6 +527,7 @@ function addArchedWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -450,6 +550,7 @@ function addSlidingWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -473,11 +574,14 @@ function addSlidingWindowVisuals(node, mesh) {
         activePanel.position.set(leftPanelX, 0, leftZ);
         mesh.add(activePanel);
         // Twin tracks signal the sliding operation without adding editor-only state.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, innerW, trackThickness, frameDepth, 0, innerH / 2 - trackThickness / 2, 0);
         addBox(mesh, baseMaterial, innerW, trackThickness, frameDepth, 0, -innerH / 2 + trackThickness / 2, 0);
+        currentWindowSlot = 'glass';
         addBox(activePanel, glassMaterial, panelWidth, panelH, glassDepth, 0, 0, 0);
         addBox(mesh, glassMaterial, panelWidth, panelH, glassDepth, rightPanelX, 0, rightZ);
         // The right sash stays fixed. The left sash is the active panel that slides across it.
+        currentWindowSlot = 'frame';
         addBox(activePanel, baseMaterial, railThickness, panelH, frameDepth * 0.72, -panelWidth / 2 + railThickness / 2, 0, 0);
         addBox(mesh, baseMaterial, railThickness, panelH, frameDepth * 0.72, rightPanelX + panelWidth / 2 - railThickness / 2, 0, rightZ);
         addBox(activePanel, baseMaterial, railThickness, panelH, frameDepth * 0.78, panelWidth / 2 - railThickness / 2, 0, 0);
@@ -486,6 +590,7 @@ function addSlidingWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -500,15 +605,19 @@ function addRectCasementSash(parent, name, panelW, panelH, frameThickness, frame
     sash.position.set(pivotX, 0, frameDepth * 0.06);
     sash.rotation.y = rotationY;
     parent.add(sash);
+    currentWindowSlot = 'frame';
     addBox(sash, baseMaterial, panelW, sashFrameThickness, sashDepth, sashCenterX, panelH / 2 - sashFrameThickness / 2, 0);
     addBox(sash, baseMaterial, panelW, sashFrameThickness, sashDepth, sashCenterX, -panelH / 2 + sashFrameThickness / 2, 0);
     addBox(sash, baseMaterial, sashFrameThickness, panelH, sashDepth, sashCenterX - panelW / 2 + sashFrameThickness / 2, 0, 0);
     addBox(sash, baseMaterial, sashFrameThickness, panelH, sashDepth, sashCenterX + panelW / 2 - sashFrameThickness / 2, 0, 0);
+    currentWindowSlot = 'glass';
     addBox(sash, glassMaterial, glassW, glassH, glassDepth, sashCenterX, 0, sashDepth * 0.08);
+    disableSubtreeRaycastIfSwung(sash, rotationY);
 }
 function addFrenchCasementHingeMarkers(mesh, innerW, innerH, frameThickness, frameDepth) {
     const markerW = Math.max(frameThickness * 0.38, 0.018);
     const markerH = innerH * 0.24;
+    currentWindowSlot = 'frame';
     for (const pivotX of [-innerW / 2, innerW / 2]) {
         addBox(mesh, baseMaterial, markerW, markerH, frameDepth * 1.1, pivotX, innerH * 0.25, frameDepth * 0.08);
         addBox(mesh, baseMaterial, markerW, markerH, frameDepth * 1.1, pivotX, -innerH * 0.25, frameDepth * 0.08);
@@ -599,25 +708,32 @@ function addShapedFrenchCasementSash(parent, node, name, side, fullW, leafW, lea
         const outerArchHeight = getClampedArchHeight(node.width, node.height, node.archHeight);
         const sashArchHeight = getClampedArchHeight(fullW, leafH, outerArchHeight - frameThickness);
         const sashSpringY = node.height / 2 - outerArchHeight;
+        currentWindowSlot = 'frame';
         addShape(sashVisual, baseMaterial, createFrenchArchLeafFrameShape(leafW, leafH, fullW, sashSpringY, sashArchHeight, sashFrameThickness, side), sashDepth);
         const glassInset = Math.min(sashFrameThickness, leafW / 2 - 0.005, leafH / 2 - 0.005);
         if (glassInset > 0.001) {
+            currentWindowSlot = 'glass';
             addShape(sashVisual, glassMaterial, createFrenchArchLeafShape(leafW, leafH, fullW, sashSpringY, sashArchHeight, side, glassInset), glassDepth, sashDepth * 0.08);
         }
+        disableSubtreeRaycastIfSwung(sash, rotationY);
         return;
     }
     const frameRadii = insetCornerRadii(getWindowRoundedRadii(node, node.width, node.height), frameThickness, fullW, leafH);
+    currentWindowSlot = 'frame';
     addShape(sashVisual, baseMaterial, createFrenchRoundedLeafFrameShape(leafW, leafH, fullW, frameRadii, sashFrameThickness, side), sashDepth);
     const glassInset = Math.min(sashFrameThickness, leafW / 2 - 0.005, leafH / 2 - 0.005);
     if (glassInset > 0.001) {
+        currentWindowSlot = 'glass';
         addShape(sashVisual, glassMaterial, createFrenchRoundedLeafShape(leafW, leafH, fullW, frameRadii, side, glassInset), glassDepth, sashDepth * 0.08);
     }
+    disableSubtreeRaycastIfSwung(sash, rotationY);
 }
 function addFrenchCasementWindowVisuals(node, mesh) {
     const { width, height, frameDepth, frameThickness, sill, sillDepth, sillThickness } = node;
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Fixed outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -632,6 +748,7 @@ function addFrenchCasementWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -640,9 +757,11 @@ function addShapedCasementWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     if (node.openingShape === 'arch') {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createArchedFrameShape(width, height, getClampedArchHeight(width, height, node.archHeight), frameThickness), frameDepth);
     }
     else {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createRoundedFrameShape(width, height, frameThickness, getWindowRoundedRadii(node, width, height)), frameDepth);
     }
     if ((node.casementStyle ?? 'single') === 'french') {
@@ -656,6 +775,7 @@ function addShapedCasementWindowVisuals(node, mesh) {
         if (sill) {
             const sillW = width + sillDepth * 0.4;
             const sillZ = frameDepth / 2 + sillDepth / 2;
+            currentWindowSlot = 'frame';
             addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
         }
         return;
@@ -680,30 +800,37 @@ function addShapedCasementWindowVisuals(node, mesh) {
         mesh.add(sash);
         if (node.openingShape === 'arch') {
             const sashArchHeight = getClampedArchHeight(innerW, innerH, (node.archHeight ?? innerW / 2) - frameThickness);
+            currentWindowSlot = 'frame';
             addShape(sashVisual, baseMaterial, createArchedFrameShape(innerW, innerH, sashArchHeight, sashFrameThickness), sashDepth);
             const glassInset = Math.min(sashFrameThickness, innerW / 2 - 0.005, innerH / 2 - 0.005);
             if (glassInset > 0.001) {
                 const glassW = innerW - 2 * glassInset;
                 const glassH = innerH - 2 * glassInset;
+                currentWindowSlot = 'glass';
                 addShape(sashVisual, glassMaterial, createArchShape(-glassW / 2, glassW / 2, -glassH / 2, glassH / 2, getClampedArchHeight(glassW, glassH, sashArchHeight - glassInset)), glassDepth, sashDepth * 0.08);
             }
         }
         else {
             const outerRadii = getWindowRoundedRadii(node, innerW, innerH);
+            currentWindowSlot = 'frame';
             addShape(sashVisual, baseMaterial, createRoundedFrameShape(innerW, innerH, sashFrameThickness, outerRadii), sashDepth);
             const glassInset = Math.min(sashFrameThickness, innerW / 2 - 0.005, innerH / 2 - 0.005);
             if (glassInset > 0.001) {
                 const glassW = innerW - 2 * glassInset;
                 const glassH = innerH - 2 * glassInset;
+                currentWindowSlot = 'glass';
                 addShape(sashVisual, glassMaterial, createRoundedShape(-glassW / 2, glassW / 2, -glassH / 2, glassH / 2, insetCornerRadii(outerRadii, glassInset, glassW, glassH)), glassDepth, sashDepth * 0.08);
             }
         }
+        disableSubtreeRaycastIfSwung(sash, sash.rotation.y);
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, Math.max(frameThickness * 0.38, 0.018), innerH * 0.28, frameDepth * 1.1, pivotX, innerH * 0.24, frameDepth * 0.08);
         addBox(mesh, baseMaterial, Math.max(frameThickness * 0.38, 0.018), innerH * 0.28, frameDepth * 1.1, pivotX, -innerH * 0.24, frameDepth * 0.08);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -720,6 +847,7 @@ function addCasementWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Fixed outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -741,18 +869,23 @@ function addCasementWindowVisuals(node, mesh) {
         sash.position.set(pivotX, 0, frameDepth * 0.06);
         sash.rotation.y = hingeSign * openAngle;
         mesh.add(sash);
+        currentWindowSlot = 'frame';
         addBox(sash, baseMaterial, innerW, sashFrameThickness, sashDepth, sashCenterX, innerH / 2 - sashFrameThickness / 2, 0);
         addBox(sash, baseMaterial, innerW, sashFrameThickness, sashDepth, sashCenterX, -innerH / 2 + sashFrameThickness / 2, 0);
         addBox(sash, baseMaterial, sashFrameThickness, innerH, sashDepth, sashCenterX - innerW / 2 + sashFrameThickness / 2, 0, 0);
         addBox(sash, baseMaterial, sashFrameThickness, innerH, sashDepth, sashCenterX + innerW / 2 - sashFrameThickness / 2, 0, 0);
+        currentWindowSlot = 'glass';
         addBox(sash, glassMaterial, glassW, glassH, glassDepth, sashCenterX, 0, sashDepth * 0.08);
+        disableSubtreeRaycastIfSwung(sash, sash.rotation.y);
         // Small hinge markers make the pivot side legible when the sash is closed.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, Math.max(frameThickness * 0.38, 0.018), innerH * 0.28, frameDepth * 1.1, pivotX, innerH * 0.24, frameDepth * 0.08);
         addBox(mesh, baseMaterial, Math.max(frameThickness * 0.38, 0.018), innerH * 0.28, frameDepth * 1.1, pivotX, -innerH * 0.24, frameDepth * 0.08);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -765,6 +898,7 @@ function addAwningWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Fixed outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -785,17 +919,21 @@ function addAwningWindowVisuals(node, mesh) {
         sash.position.set(0, pivotY, frameDepth * 0.06);
         sash.rotation.x = -openAngle;
         mesh.add(sash);
+        currentWindowSlot = 'frame';
         addBox(sash, baseMaterial, innerW, sashFrameThickness, sashDepth, 0, sashCenterY + innerH / 2 - sashFrameThickness / 2, 0);
         addBox(sash, baseMaterial, innerW, sashFrameThickness, sashDepth, 0, sashCenterY - innerH / 2 + sashFrameThickness / 2, 0);
         addBox(sash, baseMaterial, sashFrameThickness, innerH, sashDepth, -innerW / 2 + sashFrameThickness / 2, sashCenterY, 0);
         addBox(sash, baseMaterial, sashFrameThickness, innerH, sashDepth, innerW / 2 - sashFrameThickness / 2, sashCenterY, 0);
+        currentWindowSlot = 'glass';
         addBox(sash, glassMaterial, glassW, glassH, glassDepth, 0, sashCenterY, sashDepth * 0.08);
         // Compact hinge rail, visible even when the sash is closed.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, innerW * 0.42, Math.max(frameThickness * 0.38, 0.018), frameDepth * 1.1, 0, pivotY, frameDepth * 0.08);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -804,9 +942,11 @@ function addShapedAwningWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     if (node.openingShape === 'arch') {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createArchedFrameShape(width, height, getClampedArchHeight(width, height, node.archHeight), frameThickness), frameDepth);
     }
     else {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createRoundedFrameShape(width, height, frameThickness, getWindowRoundedRadii(node, width, height)), frameDepth);
     }
     if (innerW > 0.01 && innerH > 0.01) {
@@ -827,29 +967,35 @@ function addShapedAwningWindowVisuals(node, mesh) {
         mesh.add(sash);
         if (node.openingShape === 'arch') {
             const sashArchHeight = getClampedArchHeight(innerW, innerH, (node.archHeight ?? innerW / 2) - frameThickness);
+            currentWindowSlot = 'frame';
             addShape(sashVisual, baseMaterial, createArchedFrameShape(innerW, innerH, sashArchHeight, sashFrameThickness), sashDepth);
             const glassInset = Math.min(sashFrameThickness, innerW / 2 - 0.005, innerH / 2 - 0.005);
             if (glassInset > 0.001) {
                 const glassW = innerW - 2 * glassInset;
                 const glassH = innerH - 2 * glassInset;
+                currentWindowSlot = 'glass';
                 addShape(sashVisual, glassMaterial, createArchShape(-glassW / 2, glassW / 2, -glassH / 2, glassH / 2, getClampedArchHeight(glassW, glassH, sashArchHeight - glassInset)), glassDepth, sashDepth * 0.08);
             }
         }
         else {
             const outerRadii = getWindowRoundedRadii(node, innerW, innerH);
+            currentWindowSlot = 'frame';
             addShape(sashVisual, baseMaterial, createRoundedFrameShape(innerW, innerH, sashFrameThickness, outerRadii), sashDepth);
             const glassInset = Math.min(sashFrameThickness, innerW / 2 - 0.005, innerH / 2 - 0.005);
             if (glassInset > 0.001) {
                 const glassW = innerW - 2 * glassInset;
                 const glassH = innerH - 2 * glassInset;
+                currentWindowSlot = 'glass';
                 addShape(sashVisual, glassMaterial, createRoundedShape(-glassW / 2, glassW / 2, -glassH / 2, glassH / 2, insetCornerRadii(outerRadii, glassInset, glassW, glassH)), glassDepth, sashDepth * 0.08);
             }
         }
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, innerW * 0.42, Math.max(frameThickness * 0.38, 0.018), frameDepth * 1.1, 0, pivotY, frameDepth * 0.08);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -862,6 +1008,7 @@ function addHopperWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Fixed outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -880,17 +1027,21 @@ function addHopperWindowVisuals(node, mesh) {
         sash.position.set(0, pivotY, frameDepth * 0.06);
         sash.rotation.x = -openAngle;
         mesh.add(sash);
+        currentWindowSlot = 'frame';
         addBox(sash, baseMaterial, innerW, sashFrameThickness, sashDepth, 0, innerH - sashFrameThickness / 2, 0);
         addBox(sash, baseMaterial, innerW, sashFrameThickness, sashDepth, 0, sashFrameThickness / 2, 0);
         addBox(sash, baseMaterial, sashFrameThickness, innerH, sashDepth, -innerW / 2 + sashFrameThickness / 2, innerH / 2, 0);
         addBox(sash, baseMaterial, sashFrameThickness, innerH, sashDepth, innerW / 2 - sashFrameThickness / 2, innerH / 2, 0);
+        currentWindowSlot = 'glass';
         addBox(sash, glassMaterial, glassW, glassH, glassDepth, 0, innerH / 2, sashDepth * 0.08);
         // Compact bottom hinge rail, visible even when the sash is closed.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, innerW * 0.42, Math.max(frameThickness * 0.38, 0.018), frameDepth * 1.1, 0, pivotY, frameDepth * 0.08);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -899,9 +1050,11 @@ function addShapedHopperWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     if (node.openingShape === 'arch') {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createArchedFrameShape(width, height, getClampedArchHeight(width, height, node.archHeight), frameThickness), frameDepth);
     }
     else {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createRoundedFrameShape(width, height, frameThickness, getWindowRoundedRadii(node, width, height)), frameDepth);
     }
     if (innerW > 0.01 && innerH > 0.01) {
@@ -921,37 +1074,45 @@ function addShapedHopperWindowVisuals(node, mesh) {
         mesh.add(sash);
         if (node.openingShape === 'arch') {
             const sashArchHeight = getClampedArchHeight(innerW, innerH, (node.archHeight ?? innerW / 2) - frameThickness);
+            currentWindowSlot = 'frame';
             addShape(sashVisual, baseMaterial, createArchedFrameShape(innerW, innerH, sashArchHeight, sashFrameThickness), sashDepth);
             const glassInset = Math.min(sashFrameThickness, innerW / 2 - 0.005, innerH / 2 - 0.005);
             if (glassInset > 0.001) {
                 const glassW = innerW - 2 * glassInset;
                 const glassH = innerH - 2 * glassInset;
+                currentWindowSlot = 'glass';
                 addShape(sashVisual, glassMaterial, createArchShape(-glassW / 2, glassW / 2, -glassH / 2, glassH / 2, getClampedArchHeight(glassW, glassH, sashArchHeight - glassInset)), glassDepth, sashDepth * 0.08);
             }
         }
         else {
             const outerRadii = getWindowRoundedRadii(node, innerW, innerH);
+            currentWindowSlot = 'frame';
             addShape(sashVisual, baseMaterial, createRoundedFrameShape(innerW, innerH, sashFrameThickness, outerRadii), sashDepth);
             const glassInset = Math.min(sashFrameThickness, innerW / 2 - 0.005, innerH / 2 - 0.005);
             if (glassInset > 0.001) {
                 const glassW = innerW - 2 * glassInset;
                 const glassH = innerH - 2 * glassInset;
+                currentWindowSlot = 'glass';
                 addShape(sashVisual, glassMaterial, createRoundedShape(-glassW / 2, glassW / 2, -glassH / 2, glassH / 2, insetCornerRadii(outerRadii, glassInset, glassW, glassH)), glassDepth, sashDepth * 0.08);
             }
         }
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, innerW * 0.42, Math.max(frameThickness * 0.38, 0.018), frameDepth * 1.1, 0, pivotY, frameDepth * 0.08);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
 function addHungSash(parent, panelW, panelHeight, sashFrameThickness, frameDepth, glassDepth, glassW, glassH) {
+    currentWindowSlot = 'frame';
     addBox(parent, baseMaterial, panelW, sashFrameThickness, frameDepth * 0.72, 0, panelHeight / 2 - sashFrameThickness / 2, 0);
     addBox(parent, baseMaterial, panelW, sashFrameThickness, frameDepth * 0.72, 0, -panelHeight / 2 + sashFrameThickness / 2, 0);
     addBox(parent, baseMaterial, sashFrameThickness, panelHeight, frameDepth * 0.72, -panelW / 2 + sashFrameThickness / 2, 0, 0);
     addBox(parent, baseMaterial, sashFrameThickness, panelHeight, frameDepth * 0.72, panelW / 2 - sashFrameThickness / 2, 0, 0);
+    currentWindowSlot = 'glass';
     addBox(parent, glassMaterial, glassW, glassH, glassDepth, 0, 0, 0);
 }
 function addSingleHungWindowVisuals(node, mesh) {
@@ -959,6 +1120,7 @@ function addSingleHungWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Fixed outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -984,6 +1146,7 @@ function addSingleHungWindowVisuals(node, mesh) {
         activeSash.position.set(0, bottomPanelY, bottomZ);
         mesh.add(activeSash);
         // Side tracks show the lower sash is the moving element.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, trackThickness, innerH, frameDepth, -innerW / 2 + trackThickness / 2, 0, 0);
         addBox(mesh, baseMaterial, trackThickness, innerH, frameDepth, innerW / 2 - trackThickness / 2, 0, 0);
         const topSash = new THREE.Group();
@@ -992,12 +1155,14 @@ function addSingleHungWindowVisuals(node, mesh) {
         addHungSash(topSash, panelW, panelHeight, sashFrameThickness, frameDepth, glassDepth, glassW, glassH);
         addHungSash(activeSash, panelW, panelHeight, sashFrameThickness, frameDepth, glassDepth, glassW, glassH);
         // Meeting rails: top sash fixed, bottom sash moves upward over it.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, panelW, railThickness, frameDepth * 0.78, 0, topPanelY - panelHeight / 2 + railThickness / 2, topZ);
         addBox(activeSash, baseMaterial, panelW, railThickness, frameDepth * 0.78, 0, panelHeight / 2 - railThickness / 2, 0);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -1006,6 +1171,7 @@ function addDoubleHungWindowVisuals(node, mesh) {
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
     // Fixed outer frame.
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -1035,17 +1201,20 @@ function addDoubleHungWindowVisuals(node, mesh) {
         bottomSash.position.set(0, bottomPanelY, bottomZ);
         mesh.add(bottomSash);
         // Side tracks show both sashes move vertically.
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, trackThickness, innerH, frameDepth, -innerW / 2 + trackThickness / 2, 0, 0);
         addBox(mesh, baseMaterial, trackThickness, innerH, frameDepth, innerW / 2 - trackThickness / 2, 0, 0);
         addHungSash(topSash, panelW, panelHeight, sashFrameThickness, frameDepth, glassDepth, glassW, glassH);
         addHungSash(bottomSash, panelW, panelHeight, sashFrameThickness, frameDepth, glassDepth, glassW, glassH);
         // Opposing meeting rails: top sash descends while bottom sash rises.
+        currentWindowSlot = 'frame';
         addBox(topSash, baseMaterial, panelW, railThickness, frameDepth * 0.78, 0, -panelHeight / 2 + railThickness / 2, 0);
         addBox(bottomSash, baseMaterial, panelW, railThickness, frameDepth * 0.78, 0, panelHeight / 2 - railThickness / 2, 0);
     }
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -1053,6 +1222,7 @@ function addBayWindowVisuals(node, mesh) {
     const { width, height, frameDepth, frameThickness, sill, sillDepth, sillThickness } = node;
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -1075,13 +1245,16 @@ function addBayWindowVisuals(node, mesh) {
         const addBayPanel = (parent, panelW) => {
             const glassW = Math.max(panelW - 2 * sashFrameThickness, 0.01);
             const glassH = Math.max(innerH - 2 * sashFrameThickness, 0.01);
+            currentWindowSlot = 'frame';
             addBox(parent, baseMaterial, panelW, sashFrameThickness, panelDepth, 0, innerH / 2 - sashFrameThickness / 2, 0);
             addBox(parent, baseMaterial, panelW, sashFrameThickness, panelDepth, 0, -innerH / 2 + sashFrameThickness / 2, 0);
             addBox(parent, baseMaterial, sashFrameThickness, innerH, panelDepth, -panelW / 2 + sashFrameThickness / 2, 0, 0);
             addBox(parent, baseMaterial, sashFrameThickness, innerH, panelDepth, panelW / 2 - sashFrameThickness / 2, 0, 0);
+            currentWindowSlot = 'glass';
             addBox(parent, glassMaterial, glassW, glassH, glassDepth, 0, 0, panelDepth * 0.08);
         };
         const addBayCap = (centerY) => {
+            currentWindowSlot = 'frame';
             const halfThickness = frameThickness / 2;
             const vertices = [];
             const indices = [];
@@ -1096,7 +1269,7 @@ function addBayWindowVisuals(node, mesh) {
             geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
             geometry.setIndex(indices);
             geometry.computeVertexNormals();
-            mesh.add(new THREE.Mesh(geometry, baseMaterial));
+            mesh.add(tagWindowSlot(new THREE.Mesh(geometry, baseMaterial)));
         };
         const center = new THREE.Group();
         center.position.set(0, 0, projectionDepth);
@@ -1118,6 +1291,7 @@ function addBayWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -1125,6 +1299,7 @@ function addBowWindowVisuals(node, mesh) {
     const { width, height, frameDepth, frameThickness, sill, sillDepth, sillThickness } = node;
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -1180,13 +1355,17 @@ function addBowWindowVisuals(node, mesh) {
             return geometry;
         };
         const addCurvedMesh = (material, geometry) => {
-            mesh.add(new THREE.Mesh(geometry, material));
+            mesh.add(tagWindowSlot(new THREE.Mesh(geometry, material)));
         };
+        currentWindowSlot = 'frame';
         addCurvedMesh(baseMaterial, createCurvedVerticalBand(glassTop, innerH / 2));
         addCurvedMesh(baseMaterial, createCurvedVerticalBand(-innerH / 2, glassBottom));
+        currentWindowSlot = 'glass';
         addCurvedMesh(glassMaterial, createCurvedVerticalBand(glassBottom, glassTop, frameDepth * 0.04));
+        currentWindowSlot = 'frame';
         addCurvedMesh(baseMaterial, createCurvedCap(slabYTop, frameThickness));
         addCurvedMesh(baseMaterial, createCurvedCap(slabYBottom, frameThickness));
+        currentWindowSlot = 'frame';
         for (let index = 0; index <= mullionCount; index += 1) {
             const x = -halfSpan + (innerW * index) / mullionCount;
             addBox(mesh, baseMaterial, sashFrameThickness, innerH, frameDepth * 0.72, x, 0, arcZAt(x));
@@ -1195,6 +1374,7 @@ function addBowWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -1206,6 +1386,7 @@ function addLouveredWindowVisuals(node, mesh) {
     }
     const innerW = width - 2 * frameThickness;
     const innerH = height - 2 * frameThickness;
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     addBox(mesh, baseMaterial, frameThickness, innerH, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
@@ -1221,8 +1402,10 @@ function addLouveredWindowVisuals(node, mesh) {
         const slats = new THREE.Group();
         slats.name = LOUVERED_WINDOW_SLATS_NAME;
         mesh.add(slats);
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, railThickness, innerH, frameDepth * 0.95, -innerW / 2 + railThickness / 2, 0, 0);
         addBox(mesh, baseMaterial, railThickness, innerH, frameDepth * 0.95, innerW / 2 - railThickness / 2, 0, 0);
+        currentWindowSlot = 'glass';
         for (let index = 0; index < slatCount; index += 1) {
             const y = innerH / 2 - slatGap * (index + 0.5);
             const slat = new THREE.Group();
@@ -1235,6 +1418,7 @@ function addLouveredWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
@@ -1251,9 +1435,11 @@ function addShapedLouveredWindowVisuals(node, mesh) {
     const innerW = innerRight - innerLeft;
     const innerH = innerTop - innerBottom;
     if (node.openingShape === 'arch') {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createArchedFrameShape(width, height, getClampedArchHeight(width, height, node.archHeight), frameThickness), frameDepth);
     }
     else {
+        currentWindowSlot = 'frame';
         addShape(mesh, baseMaterial, createRoundedFrameShape(width, height, frameThickness, getWindowRoundedRadii(node, width, height)), frameDepth);
     }
     if (innerW > 0.01 && innerH > 0.01) {
@@ -1283,6 +1469,7 @@ function addShapedLouveredWindowVisuals(node, mesh) {
                 return (y) => getRoundedHorizontalBoundsAtY(y, innerLeft, innerRight, innerTop, innerRadii);
             })();
         const addVerticalRail = (x) => {
+            currentWindowSlot = 'frame';
             const railX1 = x;
             const railX2 = x + (x < 0 ? railThickness : -railThickness);
             const sampleX = x < 0 ? Math.max(railX1, railX2) : Math.min(railX1, railX2);
@@ -1293,6 +1480,7 @@ function addShapedLouveredWindowVisuals(node, mesh) {
         };
         addVerticalRail(innerLeft);
         addVerticalRail(innerRight);
+        currentWindowSlot = 'glass';
         for (let index = 0; index < slatCount; index += 1) {
             const y = innerTop - slatGap * (index + 0.5);
             const topBounds = getBoundsAtY(Math.min(y + slatHeight / 2, innerTop));
@@ -1312,10 +1500,12 @@ function addShapedLouveredWindowVisuals(node, mesh) {
     if (sill) {
         const sillW = width + sillDepth * 0.4;
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
 }
 function updateWindowMesh(node, mesh) {
+    currentWindowSlot = undefined;
     // Root mesh is an invisible hitbox; all visuals live in child meshes
     mesh.geometry.dispose();
     mesh.geometry = new THREE.BoxGeometry(node.width, node.height, node.frameDepth);
@@ -1330,6 +1520,11 @@ function updateWindowMesh(node, mesh) {
         disposeObjectGeometry(child);
         mesh.remove(child);
     }
+    // Point the builder-facing frame/glass materials at this window's slot
+    // overrides for the duration of its build (recomputed per node, so the next
+    // window resets cleanly without a restore).
+    baseMaterial = resolveWindowSlotMaterial(node, 'frame');
+    glassMaterial = resolveWindowSlotMaterial(node, 'glass');
     const { width, height, frameDepth, frameThickness, columnRatios, rowRatios, columnDividerThickness, rowDividerThickness, sill, sillDepth, sillThickness, openingKind, openingShape, windowType, } = node;
     if (openingKind === 'opening') {
         syncWindowCutout(node, mesh);
@@ -1394,6 +1589,7 @@ function updateWindowMesh(node, mesh) {
     const innerH = height - 2 * frameThickness;
     // ── Frame members ──
     // Top / bottom — full width
+    currentWindowSlot = 'frame';
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, -height / 2 + frameThickness / 2, 0);
     // Left / right — inner height to avoid corner overlap
@@ -1428,6 +1624,7 @@ function updateWindowMesh(node, mesh) {
     }
     // Column dividers — full inner height
     cx = -innerW / 2;
+    currentWindowSlot = 'frame';
     for (let c = 0; c < numCols - 1; c++) {
         cx += colWidths[c];
         addBox(mesh, baseMaterial, columnDividerThickness, innerH, frameDepth, cx + columnDividerThickness / 2, 0, 0);
@@ -1435,6 +1632,7 @@ function updateWindowMesh(node, mesh) {
     }
     // Row dividers — per column width, so they don't overlap column dividers (top to bottom)
     cy = innerH / 2;
+    currentWindowSlot = 'frame';
     for (let r = 0; r < numRows - 1; r++) {
         cy -= rowHeights[r];
         const divY = cy - rowDividerThickness / 2;
@@ -1445,6 +1643,7 @@ function updateWindowMesh(node, mesh) {
     }
     // Glass panes
     const glassDepth = Math.max(0.004, frameDepth * 0.08);
+    currentWindowSlot = 'glass';
     for (let c = 0; c < numCols; c++) {
         for (let r = 0; r < numRows; r++) {
             addBox(mesh, glassMaterial, colWidths[c], rowHeights[r], glassDepth, colXCenters[c], rowYCenters[r], 0);
@@ -1455,40 +1654,67 @@ function updateWindowMesh(node, mesh) {
         const sillW = width + sillDepth * 0.4; // slightly wider than frame
         // Protrudes from the front face of the frame (+Z)
         const sillZ = frameDepth / 2 + sillDepth / 2;
+        currentWindowSlot = 'frame';
         addBox(mesh, baseMaterial, sillW, sillThickness, sillDepth, 0, -height / 2 - sillThickness / 2, sillZ);
     }
     syncWindowCutout(node, mesh);
 }
 function syncWindowCutout(node, mesh) {
-    // ── Cutout (for wall CSG) — always full window dimensions, 1m deep ──
+    // ── Cutout: invisible raycast hit target for the whole opening ──
     let cutout = mesh.getObjectByName('cutout');
     if (!cutout) {
         cutout = new THREE.Mesh();
         cutout.name = 'cutout';
+        // The cutout (invisible) is proud of the wall on both faces, so it wins the
+        // scene raycast over the wall in front of the recessed window — making it
+        // the selection AND paint hit target for the whole opening. The paint
+        // capability then re-raycasts the window's parts to find the slot. Its depth
+        // is snug to the wall (not 1m) so it no longer blankets the room floor in a
+        // top-down view; the wall CSG ignores this depth (see getOpeningCutoutProxyDepth).
         mesh.add(cutout);
     }
     cutout.geometry.dispose();
+    const depth = resolveOpeningCutoutProxyDepth(node);
     if (isRectangleOnlyWindowType(node)) {
-        cutout.geometry = new THREE.BoxGeometry(node.width, node.height, 1.0);
+        cutout.geometry = new THREE.BoxGeometry(node.width, node.height, depth);
     }
     else if (node.openingShape === 'arch') {
         cutout.geometry = new THREE.ExtrudeGeometry(createArchShape(-node.width / 2, node.width / 2, -node.height / 2, node.height / 2, getClampedArchHeight(node.width, node.height, node.archHeight)), {
-            depth: 1,
+            depth,
             bevelEnabled: false,
             curveSegments: 24,
         });
-        cutout.geometry.translate(0, 0, -0.5);
+        cutout.geometry.translate(0, 0, -depth / 2);
     }
     else if (node.openingShape === 'rounded') {
         cutout.geometry = new THREE.ExtrudeGeometry(createRoundedShape(-node.width / 2, node.width / 2, -node.height / 2, node.height / 2, getWindowRoundedRadii(node, node.width, node.height)), {
-            depth: 1,
+            depth,
             bevelEnabled: false,
             curveSegments: 24,
         });
-        cutout.geometry.translate(0, 0, -0.5);
+        cutout.geometry.translate(0, 0, -depth / 2);
     }
     else {
-        cutout.geometry = new THREE.BoxGeometry(node.width, node.height, 1.0);
+        cutout.geometry = new THREE.BoxGeometry(node.width, node.height, depth);
     }
     cutout.visible = false;
 }
+// Resolve the cutout proxy depth from the opening's parent wall thickness so
+// the proxy stays proud of both wall faces (front/back selection) without the
+// old 1m depth that blanketed the floor. Falls back to the default thickness
+// when the parent wall isn't a resolvable wall node.
+function resolveOpeningCutoutProxyDepth(node) {
+    const parentId = node.parentId;
+    const parent = parentId ? useScene.getState().nodes[parentId] : undefined;
+    const wallThickness = parent?.type === 'wall' ? getWallThickness(parent) : DEFAULT_WALL_THICKNESS;
+    return getOpeningCutoutProxyDepth(wallThickness);
+}
+/**
+ * Build a fresh window mesh for preview/ghost rendering.
+ * Returns a mesh with an invisible hitbox root and visible children (frame, glass, sash, hardware).
+ */
+export function buildWindowPreviewMesh(node) {
+    const mesh = new THREE.Mesh();
+    updateWindowMesh(node, mesh);
+    return mesh;
+}