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

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

@@ -1,15 +1,37 @@
-import { clampDoorOperationState, DoorNode as DoorNodeSchema, getDoorRenderOpenAmount, getEffectiveNode, sceneRegistry, useInteractive, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { clampDoorOperationState, DEFAULT_WALL_THICKNESS, DoorNode as DoorNodeSchema, getDoorRenderOpenAmount, 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 { createDefaultMaterial, 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 });
 const defaultRevealMaterial = new THREE.MeshBasicMaterial({ color: '#7f766c' });
+// Door hardware (handle / hinges / closer / panic bar) renders a catalog metal
+// finish by default (chrome), separate from the door body. The flat material is
+// only a fallback if the catalog ref ever fails to resolve.
+const HARDWARE_DEFAULT_REF = 'library:metal-chrome';
+// Door body defaults to a catalog colour (generic approach). Glass keeps the
+// built-in FrontSide glass material — the catalog `preset-glass` is DoubleSide,
+// which poisons the WebGPU MRT scene pass.
+const PANEL_DEFAULT_REF = 'library:preset-softwhite';
+const FRAME_DEFAULT_REF = 'library:preset-softwhite';
+const GLASS_DEFAULT_REF = 'library:preset-glass';
+const defaultHardwareMaterial = createDefaultMaterial('#3a3a3a', 0.4);
 let baseMaterial = getBaseMaterial();
+let frameMaterial = getBaseMaterial();
 let revealMaterial = defaultRevealMaterial;
 let glassMaterial = defaultGlassMaterial;
+let hardwareMaterial = defaultHardwareMaterial;
+let currentDoorSlot;
+// Per-frame viewer state, captured so the per-node mesh builder (which runs
+// outside React) can resolve each door's slot materials.
+let currentShading = 'rendered';
+let currentTextures = true;
+let currentColorPreset = 'clay';
+let currentSceneMaterials;
 const DOOR_RENDER_DEFAULTS = DoorNodeSchema.parse({ id: 'door_render_default' });
 const MAX_DOOR_REBUILDS_PER_FRAME = 16;
 const DOOR_PROGRESSIVE_DIRTY_THRESHOLD = MAX_DOOR_REBUILDS_PER_FRAME;
@@ -33,6 +55,7 @@ export const DoorSystem = () => {
     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 an override-only update (no scene write) still re-runs
     // the component, letting the gate below pick up the latest dirtyNodes
@@ -41,8 +64,10 @@ export const DoorSystem = () => {
     useLiveNodeOverrides((s) => s.overrides);
     const joineryMaterial = createSurfaceRoleMaterial('joinery', colorPreset);
     baseMaterial = textures ? getBaseMaterial(shading) : joineryMaterial;
+    frameMaterial = textures ? getBaseMaterial(shading) : joineryMaterial;
     revealMaterial = textures ? defaultRevealMaterial : joineryMaterial;
     glassMaterial = textures ? defaultGlassMaterial : joineryMaterial;
+    hardwareMaterial = textures ? defaultHardwareMaterial : joineryMaterial;
     useEffect(() => {
         const materialRevision = `${shading}:${textures ? 'textures' : 'solid'}:${colorPreset}`;
         if (materialRevisionRef.current === materialRevision)
@@ -55,18 +80,37 @@ export const DoorSystem = () => {
             }
         }
     });
+    // Editing a scene material a door slot references must rebuild that door
+    // (door meshes are built by this system, not <GeometrySystem>).
+    useEffect(() => {
+        void sceneMaterials;
+        const nodes = useScene.getState().nodes;
+        for (const node of Object.values(nodes)) {
+            if (node?.type !== 'door')
+                continue;
+            if (!nodeReferencesSceneMaterial(node))
+                continue;
+            useScene.getState().dirtyNodes.add(node.id);
+        }
+    }, [sceneMaterials]);
     useFrame(() => {
         if (dirtyNodes.size === 0)
             return;
         const frameJoineryMaterial = createSurfaceRoleMaterial('joinery', colorPreset);
         baseMaterial = textures ? getBaseMaterial(shading) : frameJoineryMaterial;
+        frameMaterial = textures ? getBaseMaterial(shading) : frameJoineryMaterial;
         revealMaterial = textures ? defaultRevealMaterial : frameJoineryMaterial;
         glassMaterial = textures ? defaultGlassMaterial : frameJoineryMaterial;
+        hardwareMaterial = textures ? defaultHardwareMaterial : frameJoineryMaterial;
+        currentShading = shading;
+        currentTextures = textures;
+        currentColorPreset = colorPreset;
+        currentSceneMaterials = sceneMaterials;
         const nodes = useScene.getState().nodes;
         const dirtyDoorIds = [];
         dirtyNodes.forEach((id) => {
             const node = nodes[id];
-            if (!node || node.type !== 'door')
+            if (node?.type !== 'door')
                 return;
             dirtyDoorIds.push(id);
         });
@@ -84,7 +128,7 @@ export const DoorSystem = () => {
                 }
             }
             const node = nodes[id];
-            if (!node || node.type !== 'door')
+            if (node?.type !== 'door')
                 continue;
             const mesh = sceneRegistry.nodes.get(id);
             if (!mesh)
@@ -107,21 +151,77 @@ export const DoorSystem = () => {
     }, 3);
     return null;
 };
+function tagDoorSlot(mesh) {
+    mesh.userData.slotId = currentDoorSlot;
+    return mesh;
+}
+const NO_RAYCAST = () => { };
+// An open door leaf 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 leaf out of the raycast so a click on
+// the floor falls through to what's underneath; the door stays selectable via
+// its proud invisible cutout proxy at the opening (see syncDoorCutout).
+function disableSubtreeRaycast(object) {
+    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;
+}
+function doorSlotDefault(slotId) {
+    if (!currentTextures)
+        return createSurfaceRoleMaterial('joinery', currentColorPreset);
+    if (slotId === 'glass') {
+        return (resolveMaterialRef(GLASS_DEFAULT_REF, currentSceneMaterials, currentShading) ??
+            defaultGlassMaterial);
+    }
+    if (slotId === 'hardware') {
+        return (resolveMaterialRef(HARDWARE_DEFAULT_REF, currentSceneMaterials, currentShading) ??
+            defaultHardwareMaterial);
+    }
+    if (slotId === 'frame') {
+        return (resolveMaterialRef(FRAME_DEFAULT_REF, currentSceneMaterials, currentShading) ??
+            getBaseMaterial(currentShading));
+    }
+    return (resolveMaterialRef(PANEL_DEFAULT_REF, currentSceneMaterials, currentShading) ??
+        getBaseMaterial(currentShading));
+}
+// Resolve a door's slot to a material: the `node.slots` override (colored mode
+// only) → the body/glass/hardware default. Textures-off ignores overrides — the
+// monochrome escape hatch.
+function resolveDoorSlotMaterial(node, slotId) {
+    const fallback = doorSlotDefault(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);
+    tagDoorSlot(m);
     parent.add(m);
 }
 function addRotatedBox(parent, material, w, h, d, x, y, z, rotationY) {
-    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);
     m.rotation.y = rotationY;
-    parent.add(m);
-}
-function addBoxWithRotation(parent, material, w, h, d, x, y, z, rotation) {
-    const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), material);
-    m.position.set(x, y, z);
-    m.rotation.set(rotation[0], rotation[1], rotation[2]);
+    tagDoorSlot(m);
     parent.add(m);
 }
 function addShape(parent, material, shape, depth) {
@@ -132,6 +232,7 @@ function addShape(parent, material, shape, depth) {
     });
     geometry.translate(0, 0, -depth / 2);
     const mesh = new THREE.Mesh(geometry, material);
+    tagDoorSlot(mesh);
     parent.add(mesh);
 }
 function addShapeAt(parent, material, shape, depth, x, y, z) {
@@ -142,6 +243,7 @@ function addShapeAt(parent, material, shape, depth, x, y, z) {
     });
     geometry.translate(x, y, z - depth / 2);
     const mesh = new THREE.Mesh(geometry, material);
+    tagDoorSlot(mesh);
     parent.add(mesh);
 }
 function getClampedArchHeight(width, height, archHeight) {
@@ -443,11 +545,13 @@ function addLeafSegmentContent({ addLeafBox, addLeafShape, leafWidth, leafHeight
     const cpX = contentPadding[0];
     const cpY = contentPadding[1];
     if (renderPerimeterFrame && shouldRenderFrame && cpY > 0) {
+        currentDoorSlot = 'panel';
         addLeafBox(baseMaterial, leafWidth, cpY, leafDepth, leafCenterX, leafCenterY + leafHeight / 2 - cpY / 2, 0);
         addLeafBox(baseMaterial, leafWidth, cpY, leafDepth, leafCenterX, leafCenterY - leafHeight / 2 + cpY / 2, 0);
     }
     if (renderPerimeterFrame && shouldRenderFrame && cpX > 0) {
         const innerH = leafHeight - 2 * cpY;
+        currentDoorSlot = 'panel';
         addLeafBox(baseMaterial, cpX, innerH, leafDepth, leafCenterX - leafWidth / 2 + cpX / 2, leafCenterY, 0);
         addLeafBox(baseMaterial, cpX, innerH, leafDepth, leafCenterX + leafWidth / 2 - cpX / 2, leafCenterY, 0);
     }
@@ -496,6 +600,7 @@ function addLeafSegmentContent({ addLeafBox, addLeafShape, leafWidth, leafHeight
         }
         if (seg.type !== 'empty') {
             cx = leafCenterX - contentW / 2;
+            currentDoorSlot = 'panel';
             for (let c = 0; c < numCols - 1; c++) {
                 cx += colWidths[c];
                 const dividerLeft = cx;
@@ -516,6 +621,7 @@ function addLeafSegmentContent({ addLeafBox, addLeafShape, leafWidth, leafHeight
             const colW = colWidths[c];
             const colX = colXCenters[c];
             if (seg.type === 'glass') {
+                currentDoorSlot = 'glass';
                 const glassDepth = Math.max(0.004, leafDepth * 0.15);
                 const segmentLeft = colX - colW / 2;
                 const segmentRight = colX + colW / 2;
@@ -530,6 +636,7 @@ function addLeafSegmentContent({ addLeafBox, addLeafShape, leafWidth, leafHeight
                 }
             }
             else if (seg.type === 'panel') {
+                currentDoorSlot = 'panel';
                 const segmentLeft = colX - colW / 2;
                 const segmentRight = colX + colW / 2;
                 const outerPanelShape = hasShapedTop && addLeafShape
@@ -565,11 +672,15 @@ function addLeafSegmentContent({ addLeafBox, addLeafShape, leafWidth, leafHeight
         segY -= segH;
     }
 }
-function addDoorLeaf(mesh, { leafWidth, leafHeight, leafCenterX, leafCenterY, leafDepth, hingeX, hingeSide, swingRotation, segments, contentPadding, handle, handleBothSides = false, handleHeight, handleSide, doorCloser, panicBar, panicBarHeight, doorHeight, openingShape, openingTopRadii, archHeight, roundedBoundary, archedBoundary, archOuterSide, }) {
+function addDoorLeaf(mesh, { leafWidth, leafHeight, leafCenterX, leafCenterY, leafDepth, hingeX, hingeSide, swingRotation, openRotationY, segments, contentPadding, handle, handleBothSides = false, handleHeight, handleSide, doorCloser, panicBar, panicBarHeight, doorHeight, openingShape, openingTopRadii, archHeight, roundedBoundary, archedBoundary, archOuterSide, }) {
     const hasLeafContent = segments.some((seg) => seg.type !== 'empty');
     const leafGroup = new THREE.Group();
     leafGroup.position.set(hingeX, 0, 0);
     leafGroup.rotation.y = swingRotation;
+    // Marks this group as the swing leaf and records its fully-open angle so the
+    // GLB exporter can bake an open/close animation clip from a single pose. The
+    // exporter strips this marker before writing the file.
+    leafGroup.userData.pascalSwingLeaf = { axis: 'y', openRotationY };
     mesh.add(leafGroup);
     const addLeafBox = (material, w, h, d, x, y, z) => addBox(leafGroup, material, w, h, d, x - hingeX, y, z);
     const addLeafShape = (material, shape, depth) => addShapeAt(leafGroup, material, shape, depth, -hingeX, 0, 0);
@@ -578,6 +689,7 @@ function addDoorLeaf(mesh, { leafWidth, leafHeight, leafCenterX, leafCenterY, le
     const leafTop = leafCenterY + leafHeight / 2;
     const usesShapedLeafFrame = openingShape === 'rounded' || openingShape === 'arch';
     if (usesShapedLeafFrame && hasLeafContent) {
+        currentDoorSlot = 'panel';
         if (openingShape === 'rounded') {
             const roundedLeafShape = roundedBoundary
                 ? createRoundedClippedLeafFrameShape(leafCenterX - leafWidth / 2, leafCenterX + leafWidth / 2, leafBottom, leafTop, roundedBoundary.fullLeft, roundedBoundary.fullRight, roundedBoundary.radii, contentPadding[0], contentPadding[1])
@@ -624,68 +736,217 @@ function addDoorLeaf(mesh, { leafWidth, leafHeight, leafCenterX, leafCenterY, le
         archOuterSide,
     });
     if (hasLeafContent && handle) {
+        currentDoorSlot = 'hardware';
         const handleY = handleHeight - doorHeight / 2;
         const faceZ = leafDepth / 2;
         const handleX = handleSide === 'right'
             ? leafCenterX + leafWidth / 2 - 0.045
             : leafCenterX - leafWidth / 2 + 0.045;
-        addLeafBox(baseMaterial, 0.028, 0.14, 0.01, handleX, handleY, faceZ + 0.005);
-        addLeafBox(baseMaterial, 0.022, 0.1, 0.035, handleX, handleY, faceZ + 0.025);
+        addLeafBox(hardwareMaterial, 0.028, 0.14, 0.01, handleX, handleY, faceZ + 0.005);
+        addLeafBox(hardwareMaterial, 0.022, 0.1, 0.035, handleX, handleY, faceZ + 0.025);
         if (handleBothSides) {
-            addLeafBox(baseMaterial, 0.028, 0.14, 0.01, handleX, handleY, -faceZ - 0.005);
-            addLeafBox(baseMaterial, 0.022, 0.1, 0.035, handleX, handleY, -faceZ - 0.025);
+            addLeafBox(hardwareMaterial, 0.028, 0.14, 0.01, handleX, handleY, -faceZ - 0.005);
+            addLeafBox(hardwareMaterial, 0.022, 0.1, 0.035, handleX, handleY, -faceZ - 0.025);
         }
     }
     if (hasLeafContent && doorCloser) {
+        currentDoorSlot = 'hardware';
         const closerY = leafCenterY + leafHeight / 2 - 0.04;
-        addLeafBox(baseMaterial, 0.28, 0.055, 0.055, leafCenterX, closerY, leafDepth / 2 + 0.03);
-        addLeafBox(baseMaterial, 0.14, 0.015, 0.015, leafCenterX + leafWidth / 4, closerY + 0.025, leafDepth / 2 + 0.015);
+        addLeafBox(hardwareMaterial, 0.28, 0.055, 0.055, leafCenterX, closerY, leafDepth / 2 + 0.03);
+        addLeafBox(hardwareMaterial, 0.14, 0.015, 0.015, leafCenterX + leafWidth / 4, closerY + 0.025, leafDepth / 2 + 0.015);
     }
     if (hasLeafContent && panicBar) {
+        currentDoorSlot = 'hardware';
         const barY = panicBarHeight - doorHeight / 2;
-        addLeafBox(baseMaterial, leafWidth * 0.72, 0.04, 0.055, leafCenterX, barY, leafDepth / 2 + 0.03);
+        addLeafBox(hardwareMaterial, leafWidth * 0.72, 0.04, 0.055, leafCenterX, barY, leafDepth / 2 + 0.03);
     }
     if (hasLeafContent) {
+        currentDoorSlot = 'hardware';
         const hingeMarkerX = hingeSide === 'right' ? hingeX - 0.012 : hingeX + 0.012;
         const hingeH = 0.1;
         const hingeW = 0.024;
         const hingeD = leafDepth + 0.016;
-        addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafBottom + 0.25, 0);
-        addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeMarkerX, (leafBottom + leafTop) / 2, 0);
-        addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafTop - 0.25, 0);
+        addBox(mesh, hardwareMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafBottom + 0.25, 0);
+        addBox(mesh, hardwareMaterial, hingeW, hingeH, hingeD, hingeMarkerX, (leafBottom + leafTop) / 2, 0);
+        addBox(mesh, hardwareMaterial, hingeW, hingeH, hingeD, hingeMarkerX, leafTop - 0.25, 0);
+    }
+    // When the leaf is swung open it projects into the room and would otherwise
+    // win a top-down selection click over the floor beneath it. Drop only the
+    // swung leaf out of the raycast; a closed leaf stays in the wall plane and
+    // keeps its hit-eligibility (so paint-by-slot still works on it).
+    if (Math.abs(swingRotation) > 1e-3) {
+        disableSubtreeRaycast(leafGroup);
     }
 }
-function addFoldingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, leafCount, doorHeight, handleHeight, segments, contentPadding, }) {
+// Names of the re-poseable moving groups each operation-door builder emits. The
+// builder fills them with geometry at the CLOSED pose; `poseDoorMovingParts`
+// then transforms the group to a given open fraction. This is the same
+// build-once + pose-at-t split windows use (`poseWindowMovingParts`), and it is
+// the single source of truth for door kinematics: the live system poses the
+// registered mesh, and the GLB exporter poses an export clone to sample the
+// open/close keyframes for a baked animation clip.
+const SLIDING_ACTIVE_PANEL_NAME = 'door-sliding-active';
+const POCKET_LEAF_NAME = 'door-pocket-leaf';
+const BARN_LEAF_NAME = 'door-barn-leaf';
+const TILTUP_LEAF_NAME = 'door-tiltup-leaf';
+// Folding panels form a hinged chain; each `<name><index>` group is parented to
+// the previous one so a single per-joint rotation reproduces the accordion.
+const FOLDING_PANEL_NAME = 'door-fold-';
+// Sectional panels each ride the overhead curve independently (non-rigid as a
+// set), so each `<name><index>` group is posed on its own.
+const SECTIONAL_PANEL_NAME = 'door-sectional-';
+const ROLLUP_CURTAIN_NAME = 'door-rollup-curtain';
+/**
+ * Pose an operation door's moving parts (sliding/pocket/barn leaf, tilt-up and
+ * sectional panels, folding chain, roll-up curtain) at `value` (0 = closed,
+ * 1 = open) by transforming the named groups its builder emitted at the closed
+ * pose. Returns true when the door type has a pose path and its groups exist.
+ *
+ * Mirrors `poseWindowMovingParts`: the live door system calls it after a
+ * (re)build so `operationState` is reflected, and the GLB exporter calls it on a
+ * clone to sample keyframes. Swing doors are not handled here — their leaf group
+ * carries a `pascalSwingLeaf` marker the exporter reads directly.
+ *
+ * Roll-up is the one type whose live geometry changes (slats vanish onto a
+ * drum), which a glTF clip can't express; the baked approximation scales the
+ * curtain up into the lintel. The live roll-up animation keeps its full-detail
+ * rebuild and is intentionally NOT routed through this scale.
+ */
+export function poseDoorMovingParts(node, mesh, value) {
+    if (!mesh)
+        return false;
+    const t = clampDoorOperationState(value);
+    const frameThickness = node.frameThickness;
+    const insideWidth = node.width - 2 * frameThickness;
+    const leafHeight = node.height - frameThickness;
+    const leafCenterY = -frameThickness / 2;
+    switch (node.doorType) {
+        case 'sliding': {
+            const group = mesh.getObjectByName(SLIDING_ACTIVE_PANEL_NAME);
+            if (!group)
+                return false;
+            const activeSign = node.slideDirection === 'left' ? 1 : -1;
+            group.position.x = -activeSign * insideWidth * 0.44 * t;
+            return true;
+        }
+        case 'pocket': {
+            const group = mesh.getObjectByName(POCKET_LEAF_NAME);
+            if (!group)
+                return false;
+            const slideSign = node.slideDirection === 'right' ? 1 : -1;
+            group.position.x = slideSign * insideWidth * t;
+            return true;
+        }
+        case 'barn': {
+            const group = mesh.getObjectByName(BARN_LEAF_NAME);
+            if (!group)
+                return false;
+            const slideSign = node.slideDirection === 'right' ? 1 : -1;
+            group.position.x = slideSign * insideWidth * t;
+            return true;
+        }
+        case 'garage-tiltup': {
+            const group = mesh.getObjectByName(TILTUP_LEAF_NAME);
+            if (!group)
+                return false;
+            // Rigid hinge: the closed leaf hangs from the lintel; opening rotates it
+            // about the top edge. `position` keeps the top edge tracking the hinge as
+            // the group rotates about its own origin (see the closed build below).
+            const angle = (Math.PI / 2) * t;
+            const hingeY = leafCenterY + leafHeight / 2;
+            group.rotation.set(-angle, 0, 0);
+            group.position.set(0, hingeY * (1 - Math.cos(angle)), Math.sin(angle) * (hingeY - leafHeight));
+            return true;
+        }
+        case 'folding': {
+            const panelCount = node.leafCount === 2 ? 2 : 4;
+            const foldAngle = Math.PI * 0.44 * t;
+            // Each panel group is parented to the previous, so its rotation is the
+            // joint angle (the change in absolute segment direction), not the absolute
+            // angle: alternating panels target ∓foldAngle, so joints fold by ±2·angle.
+            // The leading sign folds the leaves toward −z (matching the original rig).
+            let posed = false;
+            let prevDirection = 0;
+            for (let index = 0; index < panelCount; index++) {
+                const group = mesh.getObjectByName(`${FOLDING_PANEL_NAME}${index}`);
+                const direction = index % 2 === 0 ? -1 : 1;
+                if (group) {
+                    posed = true;
+                    // Set the full triple (not just `.y`): when the export clones and
+                    // decomposes the door matrix, a |Y| > π/2 rotation re-derives into a
+                    // gimbal-flipped euler (x=z=π). Assigning only `.y` would leave that
+                    // π residue on x/z and bake a flipped rest pose.
+                    group.rotation.set(0, (prevDirection - direction) * foldAngle, 0);
+                }
+                prevDirection = direction;
+            }
+            return posed;
+        }
+        case 'garage-sectional': {
+            const panelCount = Math.max(3, Math.min(12, Math.round(node.garagePanelCount)));
+            const panelHeight = leafHeight / panelCount;
+            const curveRadius = panelHeight * 0.58;
+            const curveLength = (Math.PI / 2) * curveRadius;
+            const overheadY = leafCenterY + leafHeight / 2 - panelHeight / 2;
+            const openAmount = getDoorRenderOpenAmount('garage-sectional', t);
+            const travel = openAmount * ((panelCount - 1) * panelHeight + curveLength + panelHeight * 0.65);
+            let posed = false;
+            for (let index = 0; index < panelCount; index++) {
+                const group = mesh.getObjectByName(`${SECTIONAL_PANEL_NAME}${index}`);
+                if (!group)
+                    continue;
+                posed = true;
+                const orderFromTop = panelCount - 1 - index;
+                const pathPosition = travel - orderFromTop * panelHeight;
+                let y = overheadY + pathPosition;
+                let z = 0;
+                let rotationX = 0;
+                if (pathPosition > 0 && pathPosition <= curveLength) {
+                    const theta = pathPosition / curveRadius;
+                    rotationX = -theta;
+                    y = overheadY + curveRadius * Math.sin(theta);
+                    z = -curveRadius * (1 - Math.cos(theta));
+                }
+                else if (pathPosition > curveLength) {
+                    rotationX = -Math.PI / 2;
+                    y = overheadY + curveRadius;
+                    z = -(curveRadius + pathPosition - curveLength);
+                }
+                group.position.set(0, y, z);
+                group.rotation.set(rotationX, 0, 0);
+            }
+            return posed;
+        }
+        case 'garage-rollup': {
+            const group = mesh.getObjectByName(ROLLUP_CURTAIN_NAME);
+            if (!group)
+                return false;
+            group.scale.y = Math.max(0.02, 1 - t);
+            return true;
+        }
+        default:
+            return false;
+    }
+}
+function addFoldingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, leafCount, doorHeight, handleHeight, segments, contentPadding, }) {
     const panelCount = leafCount === 2 ? 2 : 4;
-    const foldAmount = clampDoorOperationState(operationState);
     const panelLength = insideWidth / panelCount;
-    const foldAngle = Math.PI * 0.44 * foldAmount;
-    addBox(mesh, baseMaterial, insideWidth, Math.min(frameThickness * 0.5, 0.025), Math.max(frameDepth * 0.45, 0.035), 0, leafCenterY + leafHeight / 2 - 0.018, 0);
-    const vertices = [{ x: -insideWidth / 2, z: 0 }];
-    for (let index = 0; index < panelCount; index++) {
-        const previous = vertices[index];
-        const direction = index % 2 === 0 ? -1 : 1;
-        const angle = direction * foldAngle;
-        vertices.push({
-            x: previous.x + panelLength * Math.cos(angle),
-            z: previous.z + panelLength * Math.sin(angle),
-        });
-    }
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, insideWidth, Math.min(frameThickness * 0.5, 0.025), Math.max(frameDepth * 0.45, 0.035), 0, leafCenterY + leafHeight / 2 - 0.018, 0);
+    // Build the panels as a hinged chain at the CLOSED pose: each panel group is
+    // parented to the previous one at that panel's end (`panelLength` along local
+    // x), starting from the left jamb. At rest every joint is straight, so the
+    // panels lie flat across the opening; `poseDoorMovingParts` folds the joints.
+    let parent = mesh;
     for (let index = 0; index < panelCount; index++) {
-        const start = vertices[index];
-        const end = vertices[index + 1];
-        const dx = end.x - start.x;
-        const dz = end.z - start.z;
-        const centerX = (start.x + end.x) / 2;
-        const centerZ = (start.z + end.z) / 2;
-        const rotationY = Math.atan2(-dz, dx);
-        const localX = {
-            x: Math.cos(rotationY),
-            z: -Math.sin(rotationY),
-        };
-        const addFoldingLeafBox = (material, w, h, d, x, y, z) => {
-            addRotatedBox(mesh, material, w, h, d, centerX + localX.x * x + Math.sin(rotationY) * z, y, centerZ + localX.z * x + Math.cos(rotationY) * z, rotationY);
-        };
+        const group = new THREE.Group();
+        group.name = `${FOLDING_PANEL_NAME}${index}`;
+        group.position.set(index === 0 ? -insideWidth / 2 : panelLength, 0, 0);
+        parent.add(group);
+        // Panel content runs from local x=0 to x=panelLength, so it is centred at
+        // panelLength/2 within the group (the segment helper centres on leafCenterX).
+        currentDoorSlot = undefined;
+        const addFoldingLeafBox = (material, w, h, d, x, y, z) => addBox(group, material, w, h, d, panelLength / 2 + x, y, z);
         addLeafSegmentContent({
             addLeafBox: addFoldingLeafBox,
             leafWidth: Math.max(0.08, panelLength),
@@ -697,79 +958,96 @@ function addFoldingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth,
             contentPadding,
             keepFrameWhenEmpty: true,
         });
-        for (const point of [start, end]) {
-            addBox(mesh, revealMaterial, 0.018, leafHeight * 0.92, leafDepth + 0.016, point.x, leafCenterY, point.z);
+        // Reveal posts at the panel's hinge edges (local x=0 and x=panelLength).
+        currentDoorSlot = undefined;
+        for (const px of [0, panelLength]) {
+            addBox(group, revealMaterial, 0.018, leafHeight * 0.92, leafDepth + 0.016, px, leafCenterY, 0);
         }
+        parent = group;
     }
-    const handlePoint = vertices[vertices.length - 1];
+    // Handle on the free end of the last panel (its local x=panelLength edge).
     const handleY = handleHeight - doorHeight / 2;
-    addBox(mesh, baseMaterial, 0.035, 0.16, leafDepth + 0.035, handlePoint.x - 0.035, handleY, handlePoint.z + 0.045);
-    addBox(mesh, baseMaterial, 0.035, 0.16, leafDepth + 0.035, handlePoint.x - 0.035, handleY, handlePoint.z - 0.045);
+    currentDoorSlot = 'hardware';
+    addBox(parent, hardwareMaterial, 0.035, 0.16, leafDepth + 0.035, panelLength - 0.035, handleY, 0.045);
+    addBox(parent, hardwareMaterial, 0.035, 0.16, leafDepth + 0.035, panelLength - 0.035, handleY, -0.045);
 }
-function addPocketDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, slideDirection, doorHeight, handleHeight, segments, contentPadding, }) {
-    const openAmount = clampDoorOperationState(operationState);
+function addPocketDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, slideDirection, doorHeight, handleHeight, segments, contentPadding, }) {
     const slideSign = slideDirection === 'right' ? 1 : -1;
     const leafWidth = insideWidth;
-    const leafCenterX = slideSign * insideWidth * openAmount;
     const topY = leafCenterY + leafHeight / 2;
     const pocketCenterX = slideSign * insideWidth;
     const handleY = handleHeight - doorHeight / 2;
-    const handleX = leafCenterX - slideSign * (leafWidth / 2 - 0.055);
-    addBox(mesh, baseMaterial, insideWidth * 2, Math.min(frameThickness * 0.45, 0.024), Math.max(frameDepth * 0.38, 0.03), slideSign * (insideWidth / 2), topY - 0.018, 0);
+    // Leaf built closed (centred in the opening); `poseDoorMovingParts` slides the
+    // group into the pocket. Handle rides inside the group at its closed offset.
+    const handleX = -slideSign * (leafWidth / 2 - 0.055);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, insideWidth * 2, Math.min(frameThickness * 0.45, 0.024), Math.max(frameDepth * 0.38, 0.03), slideSign * (insideWidth / 2), topY - 0.018, 0);
+    currentDoorSlot = undefined;
     addBox(mesh, revealMaterial, insideWidth * 0.9, 0.018, Math.max(frameDepth * 0.32, 0.026), pocketCenterX, topY - 0.055, 0);
     addBox(mesh, revealMaterial, 0.018, leafHeight * 0.94, leafDepth + 0.014, slideSign * insideWidth * 0.5, leafCenterY, 0);
-    const addPocketLeafBox = (material, w, h, d, x, y, z) => addBox(mesh, material, w, h, d, x, y, z);
+    const leafGroup = new THREE.Group();
+    leafGroup.name = POCKET_LEAF_NAME;
+    mesh.add(leafGroup);
+    const addPocketLeafBox = (material, w, h, d, x, y, z) => addBox(leafGroup, material, w, h, d, x, y, z);
     addLeafSegmentContent({
         addLeafBox: addPocketLeafBox,
         leafWidth,
         leafHeight,
-        leafCenterX,
+        leafCenterX: 0,
         leafCenterY,
         leafDepth,
         segments,
         contentPadding,
     });
-    addBox(mesh, baseMaterial, 0.03, 0.18, leafDepth + 0.03, handleX, handleY, leafDepth / 2 + 0.02);
-    addBox(mesh, baseMaterial, 0.03, 0.18, leafDepth + 0.03, handleX, handleY, -leafDepth / 2 - 0.02);
+    currentDoorSlot = 'hardware';
+    addBox(leafGroup, hardwareMaterial, 0.03, 0.18, leafDepth + 0.03, handleX, handleY, leafDepth / 2 + 0.02);
+    addBox(leafGroup, hardwareMaterial, 0.03, 0.18, leafDepth + 0.03, handleX, handleY, -leafDepth / 2 - 0.02);
 }
-function addBarnDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, slideDirection, doorHeight, handleHeight, segments, contentPadding, }) {
-    const openAmount = clampDoorOperationState(operationState);
+function addBarnDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, slideDirection, doorHeight, handleHeight, segments, contentPadding, }) {
     const slideSign = slideDirection === 'right' ? 1 : -1;
     const leafWidth = insideWidth * 1.06;
-    const leafCenterX = slideSign * insideWidth * openAmount;
     const faceZ = frameDepth / 2 + leafDepth / 2 + 0.028;
     const trackY = leafCenterY + leafHeight / 2 + Math.max(frameThickness * 0.55, 0.045);
     const railLength = insideWidth * 2.25;
     const railCenterX = slideSign * (insideWidth * 0.56);
     const handleY = handleHeight - doorHeight / 2;
-    const handleX = leafCenterX - slideSign * (leafWidth / 2 - 0.075);
+    // Leaf + wheels + handle ride the BARN_LEAF group, built closed (leaf centred
+    // in the opening); `poseDoorMovingParts` slides the group along the rail. The
+    // rail and end stops stay static on the mesh.
+    const handleX = -slideSign * (leafWidth / 2 - 0.075);
     const wheelY = trackY - 0.075;
-    addBox(mesh, revealMaterial, railLength, 0.035, 0.035, railCenterX, trackY, faceZ + 0.01);
-    addBox(mesh, revealMaterial, 0.05, 0.13, 0.035, -insideWidth / 2, trackY - 0.02, faceZ + 0.01);
-    addBox(mesh, revealMaterial, 0.05, 0.13, 0.035, insideWidth / 2, trackY - 0.02, faceZ + 0.01);
-    const addBarnLeafBox = (material, w, h, d, x, y, z) => addBox(mesh, material, w, h, d, x, y, faceZ + z);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, railLength, 0.035, 0.035, railCenterX, trackY, faceZ + 0.01);
+    addBox(mesh, hardwareMaterial, 0.05, 0.13, 0.035, -insideWidth / 2, trackY - 0.02, faceZ + 0.01);
+    addBox(mesh, hardwareMaterial, 0.05, 0.13, 0.035, insideWidth / 2, trackY - 0.02, faceZ + 0.01);
+    const leafGroup = new THREE.Group();
+    leafGroup.name = BARN_LEAF_NAME;
+    mesh.add(leafGroup);
+    const addBarnLeafBox = (material, w, h, d, x, y, z) => addBox(leafGroup, material, w, h, d, x, y, faceZ + z);
     addLeafSegmentContent({
         addLeafBox: addBarnLeafBox,
         leafWidth,
         leafHeight,
-        leafCenterX,
+        leafCenterX: 0,
         leafCenterY,
         leafDepth,
         segments,
         contentPadding,
         keepFrameWhenEmpty: true,
     });
-    addRotatedBox(mesh, revealMaterial, 0.018, leafHeight * 0.86, 0.012, leafCenterX, leafCenterY, faceZ + leafDepth / 2 + 0.014, -0.52);
-    addRotatedBox(mesh, revealMaterial, 0.018, leafHeight * 0.86, 0.012, leafCenterX, leafCenterY, faceZ + leafDepth / 2 + 0.014, 0.52);
+    currentDoorSlot = undefined;
+    addRotatedBox(leafGroup, revealMaterial, 0.018, leafHeight * 0.86, 0.012, 0, leafCenterY, faceZ + leafDepth / 2 + 0.014, -0.52);
+    addRotatedBox(leafGroup, revealMaterial, 0.018, leafHeight * 0.86, 0.012, 0, leafCenterY, faceZ + leafDepth / 2 + 0.014, 0.52);
+    currentDoorSlot = 'hardware';
     for (const offset of [-leafWidth * 0.28, leafWidth * 0.28]) {
-        addBox(mesh, revealMaterial, 0.085, 0.085, 0.035, leafCenterX + offset, wheelY, faceZ + 0.022);
-        addBox(mesh, revealMaterial, 0.026, 0.16, 0.026, leafCenterX + offset, wheelY - 0.075, faceZ + 0.022);
+        addBox(leafGroup, hardwareMaterial, 0.085, 0.085, 0.035, offset, wheelY, faceZ + 0.022);
+        addBox(leafGroup, hardwareMaterial, 0.026, 0.16, 0.026, offset, wheelY - 0.075, faceZ + 0.022);
     }
-    addBox(mesh, baseMaterial, 0.032, 0.22, leafDepth + 0.034, handleX, handleY, faceZ + leafDepth / 2 + 0.02);
-    addBox(mesh, baseMaterial, 0.032, 0.22, leafDepth + 0.034, handleX, handleY, faceZ - leafDepth / 2 - 0.02);
+    currentDoorSlot = 'hardware';
+    addBox(leafGroup, hardwareMaterial, 0.032, 0.22, leafDepth + 0.034, handleX, handleY, faceZ + leafDepth / 2 + 0.02);
+    addBox(leafGroup, hardwareMaterial, 0.032, 0.22, leafDepth + 0.034, handleX, handleY, faceZ - leafDepth / 2 - 0.02);
 }
-function addSlidingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, slideDirection, doorHeight, handleHeight, segments, contentPadding, }) {
-    const openAmount = clampDoorOperationState(operationState);
+function addSlidingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, slideDirection, doorHeight, handleHeight, segments, contentPadding, }) {
     const activeOnRight = slideDirection === 'left';
     const fixedSign = activeOnRight ? -1 : 1;
     const activeSign = activeOnRight ? 1 : -1;
@@ -777,16 +1055,22 @@ function addSlidingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth,
     const panelHeight = leafHeight;
     const closedActiveX = activeSign * insideWidth * 0.23;
     const fixedX = fixedSign * insideWidth * 0.23;
-    const activeX = closedActiveX - activeSign * insideWidth * 0.44 * openAmount;
     const frontZ = leafDepth / 2 + 0.016;
     const backZ = -leafDepth / 2 - 0.006;
     const railY = leafCenterY + panelHeight / 2 - Math.min(frameThickness * 0.35, 0.02);
     const handleY = handleHeight - doorHeight / 2;
-    const handleX = activeX + activeSign * (panelWidth / 2 - 0.06);
-    addBox(mesh, revealMaterial, insideWidth, 0.024, Math.max(frameDepth * 0.32, 0.026), 0, railY, 0);
-    addBox(mesh, revealMaterial, insideWidth, 0.018, Math.max(frameDepth * 0.28, 0.022), 0, -leafHeight / 2 + 0.04, 0);
+    // Active panel + handle ride the SLIDING_ACTIVE_PANEL group, built at the
+    // closed position; `poseDoorMovingParts` slides the group behind the fixed
+    // panel. The fixed panel and rails stay static on the mesh.
+    const handleX = closedActiveX + activeSign * (panelWidth / 2 - 0.06);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, insideWidth, 0.024, Math.max(frameDepth * 0.32, 0.026), 0, railY, 0);
+    addBox(mesh, hardwareMaterial, insideWidth, 0.018, Math.max(frameDepth * 0.28, 0.022), 0, -leafHeight / 2 + 0.04, 0);
     const addFixedPanelBox = (material, w, h, d, x, y, z) => addBox(mesh, material, w, h, d, x + fixedX, y, z + backZ);
-    const addActivePanelBox = (material, w, h, d, x, y, z) => addBox(mesh, material, w, h, d, x + activeX, y, z + frontZ);
+    const activePanelGroup = new THREE.Group();
+    activePanelGroup.name = SLIDING_ACTIVE_PANEL_NAME;
+    mesh.add(activePanelGroup);
+    const addActivePanelBox = (material, w, h, d, x, y, z) => addBox(activePanelGroup, material, w, h, d, x + closedActiveX, y, z + frontZ);
     addLeafSegmentContent({
         addLeafBox: addFixedPanelBox,
         leafWidth: panelWidth,
@@ -809,51 +1093,39 @@ function addSlidingDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth,
         contentPadding,
         keepFrameWhenEmpty: true,
     });
-    addBox(mesh, baseMaterial, 0.032, 0.24, 0.016, handleX, handleY, frontZ + leafDepth / 2 + 0.01);
-    addBox(mesh, baseMaterial, 0.032, 0.24, 0.016, handleX, handleY, frontZ - leafDepth / 2 - 0.01);
+    currentDoorSlot = 'hardware';
+    addBox(activePanelGroup, hardwareMaterial, 0.032, 0.24, 0.016, handleX, handleY, frontZ + leafDepth / 2 + 0.01);
+    addBox(activePanelGroup, hardwareMaterial, 0.032, 0.24, 0.016, handleX, handleY, frontZ - leafDepth / 2 - 0.01);
 }
-function addGarageSectionalDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, garagePanelCount, }) {
-    const openAmount = getDoorRenderOpenAmount('garage-sectional', operationState);
+function addGarageSectionalDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, garagePanelCount, }) {
     const panelCount = Math.max(3, Math.min(12, Math.round(garagePanelCount)));
     const panelHeight = leafHeight / panelCount;
     const panelGap = Math.min(0.012, panelHeight * 0.08);
     const travelDepth = Math.max(leafHeight, 1.4);
-    const curveRadius = panelHeight * 0.58;
-    const curveLength = (Math.PI / 2) * curveRadius;
-    const travel = openAmount * ((panelCount - 1) * panelHeight + curveLength + panelHeight * 0.65);
-    const overheadY = leafCenterY + leafHeight / 2 - panelHeight / 2;
     const railY = leafCenterY + leafHeight / 2 - 0.04;
     const railZ = -travelDepth / 2;
-    addBox(mesh, revealMaterial, 0.035, Math.max(0.04, frameThickness * 0.75), travelDepth, -insideWidth / 2 + 0.035, railY, railZ);
-    addBox(mesh, revealMaterial, 0.035, Math.max(0.04, frameThickness * 0.75), travelDepth, insideWidth / 2 - 0.035, railY, railZ);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, 0.035, Math.max(0.04, frameThickness * 0.75), travelDepth, -insideWidth / 2 + 0.035, railY, railZ);
+    addBox(mesh, hardwareMaterial, 0.035, Math.max(0.04, frameThickness * 0.75), travelDepth, insideWidth / 2 - 0.035, railY, railZ);
+    // Each panel is built flat (centred at its group origin) and the trims sit on
+    // the panel's front face in local space; `poseDoorMovingParts` rides each
+    // group along the overhead curve. Panel order, geometry and trim placement
+    // match the inline curve math (which the pose function reuses).
+    const revealOffset = (panelHeight - panelGap) * 0.22;
+    const trimDepth = 0.01;
+    const trimFaceOffset = leafDepth / 2 + trimDepth + 0.006;
     for (let index = 0; index < panelCount; index++) {
-        const orderFromTop = panelCount - 1 - index;
-        const pathPosition = travel - orderFromTop * panelHeight;
-        let y = overheadY + pathPosition;
-        let z = 0;
-        let rotationX = 0;
-        if (pathPosition > 0 && pathPosition <= curveLength) {
-            const theta = pathPosition / curveRadius;
-            rotationX = -theta;
-            y = overheadY + curveRadius * Math.sin(theta);
-            z = -curveRadius * (1 - Math.cos(theta));
-        }
-        else if (pathPosition > curveLength) {
-            rotationX = -Math.PI / 2;
-            y = overheadY + curveRadius;
-            z = -(curveRadius + pathPosition - curveLength);
-        }
-        const revealOffset = (panelHeight - panelGap) * 0.22;
-        const trimDepth = 0.01;
-        const trimFaceOffset = leafDepth / 2 + trimDepth + 0.006;
-        const addSectionalTrim = (localY) => {
-            addBoxWithRotation(mesh, revealMaterial, insideWidth - 0.16, 0.012, trimDepth, 0, y + localY * Math.cos(rotationX) - trimFaceOffset * Math.sin(rotationX), z + localY * Math.sin(rotationX) + trimFaceOffset * Math.cos(rotationX), [rotationX, 0, 0]);
-        };
-        addBoxWithRotation(mesh, baseMaterial, insideWidth, Math.max(0.04, panelHeight - panelGap), leafDepth, 0, y, z, [rotationX, 0, 0]);
-        addSectionalTrim(revealOffset);
-        addSectionalTrim(-revealOffset);
+        const group = new THREE.Group();
+        group.name = `${SECTIONAL_PANEL_NAME}${index}`;
+        mesh.add(group);
+        currentDoorSlot = 'panel';
+        addBox(group, baseMaterial, insideWidth, Math.max(0.04, panelHeight - panelGap), leafDepth, 0, 0, 0);
+        currentDoorSlot = undefined;
+        addBox(group, revealMaterial, insideWidth - 0.16, 0.012, trimDepth, 0, revealOffset, trimFaceOffset);
+        addBox(group, revealMaterial, insideWidth - 0.16, 0.012, trimDepth, 0, -revealOffset, trimFaceOffset);
     }
-    addBox(mesh, revealMaterial, insideWidth, 0.032, Math.max(frameDepth * 0.36, 0.03), 0, railY, 0);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, insideWidth, 0.032, Math.max(frameDepth * 0.36, 0.03), 0, railY, 0);
 }
 function addGarageRollupDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, }) {
     const openAmount = clampDoorOperationState(operationState);
@@ -861,50 +1133,71 @@ function addGarageRollupDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafD
     const visibleHeight = leafHeight * (1 - openAmount);
     const visibleSlatCount = Math.ceil(visibleHeight / slatHeight);
     const topY = leafCenterY + leafHeight / 2;
-    const curtainCenterY = topY - visibleHeight / 2;
     const drumMaxRadius = Math.max(0.12, Math.min(0.22, leafHeight * 0.075));
     const drumY = topY + drumMaxRadius * 0.12;
     const drumZ = -frameDepth / 2 - drumMaxRadius * 0.72;
-    addBox(mesh, revealMaterial, 0.032, leafHeight, Math.max(frameDepth * 0.48, 0.035), -insideWidth / 2 + 0.03, leafCenterY, 0);
-    addBox(mesh, revealMaterial, 0.032, leafHeight, Math.max(frameDepth * 0.48, 0.035), insideWidth / 2 - 0.03, leafCenterY, 0);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, 0.032, leafHeight, Math.max(frameDepth * 0.48, 0.035), -insideWidth / 2 + 0.03, leafCenterY, 0);
+    addBox(mesh, hardwareMaterial, 0.032, leafHeight, Math.max(frameDepth * 0.48, 0.035), insideWidth / 2 - 0.03, leafCenterY, 0);
     if (visibleHeight > 0.01) {
-        addBox(mesh, baseMaterial, insideWidth, visibleHeight, leafDepth, 0, curtainCenterY, 0);
+        // Wrap the visible curtain in a group pivoted at the lintel (topY). The live
+        // door keeps rebuilding the full slat detail per `operationState` (this group
+        // is just an organisational wrapper at scale 1 — world positions unchanged),
+        // but it gives the GLB exporter a single node to scale up into the header as
+        // an open clip, since the slats can't literally vanish in a glTF animation.
+        const curtain = new THREE.Group();
+        curtain.name = ROLLUP_CURTAIN_NAME;
+        curtain.position.set(0, topY, 0);
+        mesh.add(curtain);
+        currentDoorSlot = 'panel';
+        addBox(curtain, baseMaterial, insideWidth, visibleHeight, leafDepth, 0, -visibleHeight / 2, 0);
+        currentDoorSlot = undefined;
         for (let index = 0; index < visibleSlatCount; index++) {
-            const y = topY - Math.min(visibleHeight, index * slatHeight);
-            addBox(mesh, revealMaterial, insideWidth - 0.08, 0.01, 0.012, 0, y, leafDepth / 2 + 0.012);
+            const y = -Math.min(visibleHeight, index * slatHeight);
+            addBox(curtain, revealMaterial, insideWidth - 0.08, 0.01, 0.012, 0, y, leafDepth / 2 + 0.012);
         }
-        addBox(mesh, revealMaterial, insideWidth - 0.04, 0.028, leafDepth + 0.018, 0, topY - visibleHeight, leafDepth / 2 + 0.004);
+        const bottomBarHeight = 0.028;
+        addBox(curtain, revealMaterial, insideWidth - 0.04, bottomBarHeight, leafDepth + 0.018, 0, -visibleHeight + bottomBarHeight / 2, leafDepth / 2 + 0.004);
     }
+    currentDoorSlot = 'panel';
     const drum = new THREE.Mesh(new THREE.CylinderGeometry(drumMaxRadius, drumMaxRadius, insideWidth + frameThickness, 36), baseMaterial);
     drum.position.set(0, drumY, drumZ);
     drum.rotation.z = Math.PI / 2;
+    tagDoorSlot(drum);
     mesh.add(drum);
-    addBox(mesh, revealMaterial, insideWidth + frameThickness, 0.026, Math.max(frameDepth * 0.52, 0.04), 0, topY + 0.02, 0);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, insideWidth + frameThickness, 0.026, Math.max(frameDepth * 0.52, 0.04), 0, topY + 0.02, 0);
 }
-function addGarageTiltupDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, operationState, }) {
-    const openAmount = clampDoorOperationState(operationState);
-    const angle = (Math.PI / 2) * openAmount;
+function addGarageTiltupDoor(mesh, { insideWidth, leafHeight, leafCenterY, leafDepth, frameThickness, frameDepth, }) {
     const hingeY = leafCenterY + leafHeight / 2;
-    const panelCenterY = hingeY - Math.cos(angle) * (leafHeight / 2);
-    const panelCenterZ = -Math.sin(angle) * (leafHeight / 2);
+    // Leaf built closed (hanging from the lintel); `poseDoorMovingParts` rotates
+    // the group about the top hinge to open it. Rails + top bar stay static.
+    const panelCenterY = hingeY - leafHeight / 2;
     const railLength = Math.max(leafHeight * 0.72, 1.2);
     const railY = hingeY - frameThickness * 0.35;
     const railZ = -railLength / 2;
-    addBox(mesh, revealMaterial, 0.03, Math.max(frameThickness * 0.7, 0.035), railLength, -insideWidth / 2 + 0.04, railY, railZ);
-    addBox(mesh, revealMaterial, 0.03, Math.max(frameThickness * 0.7, 0.035), railLength, insideWidth / 2 - 0.04, railY, railZ);
-    addBoxWithRotation(mesh, baseMaterial, insideWidth, leafHeight, leafDepth, 0, panelCenterY, panelCenterZ, [-angle, 0, 0]);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, 0.03, Math.max(frameThickness * 0.7, 0.035), railLength, -insideWidth / 2 + 0.04, railY, railZ);
+    addBox(mesh, hardwareMaterial, 0.03, Math.max(frameThickness * 0.7, 0.035), railLength, insideWidth / 2 - 0.04, railY, railZ);
+    const leafGroup = new THREE.Group();
+    leafGroup.name = TILTUP_LEAF_NAME;
+    mesh.add(leafGroup);
+    currentDoorSlot = 'panel';
+    addBox(leafGroup, baseMaterial, insideWidth, leafHeight, leafDepth, 0, panelCenterY, 0);
     const insetWidth = Math.max(0.1, insideWidth - 0.22);
     const insetHeight = Math.max(0.1, leafHeight - 0.28);
     const trimDepth = 0.012;
     const trimFaceOffset = leafDepth / 2 + trimDepth + 0.006;
     const addTiltupTrim = (localX, localY, trimWidth, trimHeight) => {
-        addBoxWithRotation(mesh, revealMaterial, trimWidth, trimHeight, trimDepth, localX, panelCenterY + localY * Math.cos(angle) + trimFaceOffset * Math.sin(angle), panelCenterZ - localY * Math.sin(angle) + trimFaceOffset * Math.cos(angle), [-angle, 0, 0]);
+        currentDoorSlot = undefined;
+        addBox(leafGroup, revealMaterial, trimWidth, trimHeight, trimDepth, localX, panelCenterY + localY, trimFaceOffset);
     };
     addTiltupTrim(0, insetHeight / 2, insetWidth, 0.018);
     addTiltupTrim(0, -insetHeight / 2, insetWidth, 0.018);
     addTiltupTrim(-insetWidth / 2, 0, 0.018, insetHeight);
     addTiltupTrim(insetWidth / 2, 0, 0.018, insetHeight);
-    addBox(mesh, revealMaterial, insideWidth, 0.026, Math.max(frameDepth * 0.4, 0.035), 0, hingeY, 0);
+    currentDoorSlot = 'hardware';
+    addBox(mesh, hardwareMaterial, insideWidth, 0.026, Math.max(frameDepth * 0.4, 0.035), 0, hingeY, 0);
 }
 function getEffectiveOpeningShape(node) {
     return node.doorType === 'folding' ||
@@ -916,6 +1209,7 @@ function getEffectiveOpeningShape(node) {
 }
 function updateDoorMesh(rawNode, mesh) {
     const node = normalizeDoorNodeForRender(rawNode);
+    currentDoorSlot = 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);
@@ -930,6 +1224,13 @@ function updateDoorMesh(rawNode, mesh) {
         disposeObject(child);
         mesh.remove(child);
     }
+    // Point the builder-facing materials at this door's slot overrides for the
+    // duration of its build (recomputed per node, so the next door resets cleanly
+    // without a restore). Reveal keeps its own material.
+    baseMaterial = resolveDoorSlotMaterial(node, 'panel');
+    frameMaterial = resolveDoorSlotMaterial(node, 'frame');
+    glassMaterial = resolveDoorSlotMaterial(node, 'glass');
+    hardwareMaterial = resolveDoorSlotMaterial(node, 'hardware');
     const { width, height, openingKind, openingShape: rawOpeningShape, frameThickness, frameDepth, threshold, thresholdHeight, segments, handle, handleHeight, handleSide, doorCloser, panicBar, panicBarHeight, contentPadding, hingesSide, swingDirection, swingAngle: nodeSwingAngle = 0, doorType = 'hinged', operationState: nodeOperationState = 0, leafCount = 1, slideDirection = 'left', garagePanelCount = 4, } = node;
     const openingShape = getEffectiveOpeningShape(node) ?? rawOpeningShape;
     const runtimeDoorState = useInteractive.getState().doors[node.id];
@@ -946,6 +1247,7 @@ function updateDoorMesh(rawNode, mesh) {
     const leafCenterY = -frameThickness / 2;
     const swingDirectionSign = swingDirection === 'inward' ? 1 : -1;
     // ── Frame members ──
+    currentDoorSlot = 'frame';
     if (openingShape === 'arch') {
         const frameBottom = -height / 2;
         const frameTop = height / 2;
@@ -956,26 +1258,27 @@ function updateDoorMesh(rawNode, mesh) {
         const useShallowHeadBar = frameArchHeight <= frameThickness * 2;
         const frameHeadBottomY = useShallowHeadBar ? frameSpringY - frameThickness : frameSpringY;
         const postHeight = Math.max(frameHeadBottomY - frameBottom, 0.01);
-        addBox(mesh, baseMaterial, frameThickness, postHeight, frameDepth, -width / 2 + frameThickness / 2, frameBottom + postHeight / 2, 0);
-        addBox(mesh, baseMaterial, frameThickness, postHeight, frameDepth, width / 2 - frameThickness / 2, frameBottom + postHeight / 2, 0);
-        addShape(mesh, baseMaterial, useShallowHeadBar
+        addBox(mesh, frameMaterial, frameThickness, postHeight, frameDepth, -width / 2 + frameThickness / 2, frameBottom + postHeight / 2, 0);
+        addBox(mesh, frameMaterial, frameThickness, postHeight, frameDepth, width / 2 - frameThickness / 2, frameBottom + postHeight / 2, 0);
+        addShape(mesh, frameMaterial, useShallowHeadBar
             ? createArchHeadBarShape(width, frameHeadBottomY, frameSpringY, frameTop)
             : createArchBandShape(width, frameSpringY, frameTop, frameInnerSpringY, frameInnerTopY, frameThickness), frameDepth);
     }
     else if (openingShape === 'rounded') {
-        addShape(mesh, baseMaterial, createRoundedDoorFrameShape(width, height, frameThickness, getDoorTopRadii(node, width, height)), frameDepth);
+        addShape(mesh, frameMaterial, createRoundedDoorFrameShape(width, height, frameThickness, getDoorTopRadii(node, width, height)), frameDepth);
     }
     else {
         // Left post — full height
-        addBox(mesh, baseMaterial, frameThickness, height, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
+        addBox(mesh, frameMaterial, frameThickness, height, frameDepth, -width / 2 + frameThickness / 2, 0, 0);
         // Right post — full height
-        addBox(mesh, baseMaterial, frameThickness, height, frameDepth, width / 2 - frameThickness / 2, 0, 0);
+        addBox(mesh, frameMaterial, frameThickness, height, frameDepth, width / 2 - frameThickness / 2, 0, 0);
         // Head (top bar) — full width
-        addBox(mesh, baseMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
+        addBox(mesh, frameMaterial, width, frameThickness, frameDepth, 0, height / 2 - frameThickness / 2, 0);
     }
     // ── Threshold (inside the frame) ──
     if (threshold) {
-        addBox(mesh, baseMaterial, insideWidth, thresholdHeight, frameDepth, 0, -height / 2 + thresholdHeight / 2, 0);
+        currentDoorSlot = 'frame';
+        addBox(mesh, frameMaterial, insideWidth, thresholdHeight, frameDepth, 0, -height / 2 + thresholdHeight / 2, 0);
     }
     if (doorType === 'garage-sectional') {
         addGarageSectionalDoor(mesh, {
@@ -985,7 +1288,6 @@ function updateDoorMesh(rawNode, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             garagePanelCount,
         });
     }
@@ -1008,7 +1310,6 @@ function updateDoorMesh(rawNode, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
         });
     }
     else if (doorType === 'folding') {
@@ -1019,7 +1320,6 @@ function updateDoorMesh(rawNode, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             leafCount,
             doorHeight: height,
             handleHeight,
@@ -1035,7 +1335,6 @@ function updateDoorMesh(rawNode, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             slideDirection,
             doorHeight: height,
             handleHeight,
@@ -1051,7 +1350,6 @@ function updateDoorMesh(rawNode, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             slideDirection,
             doorHeight: height,
             handleHeight,
@@ -1067,7 +1365,6 @@ function updateDoorMesh(rawNode, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             slideDirection,
             doorHeight: height,
             handleHeight,
@@ -1094,6 +1391,7 @@ function updateDoorMesh(rawNode, mesh) {
             hingeX: -insideWidth / 2,
             hingeSide: 'left',
             swingRotation: -clampedSwingAngle * swingDirectionSign,
+            openRotationY: (-Math.PI / 2) * swingDirectionSign,
             segments,
             contentPadding,
             handle,
@@ -1121,6 +1419,7 @@ function updateDoorMesh(rawNode, mesh) {
             hingeX: insideWidth / 2,
             hingeSide: 'right',
             swingRotation: clampedSwingAngle * swingDirectionSign,
+            openRotationY: (Math.PI / 2) * swingDirectionSign,
             segments,
             contentPadding,
             handle,
@@ -1152,6 +1451,7 @@ function updateDoorMesh(rawNode, mesh) {
             hingeX,
             hingeSide: hingesSide,
             swingRotation: clampedSwingAngle * swingDirectionSign * hingeDirectionSign,
+            openRotationY: (Math.PI / 2) * swingDirectionSign * hingeDirectionSign,
             segments,
             contentPadding,
             handle,
@@ -1167,6 +1467,13 @@ function updateDoorMesh(rawNode, mesh) {
             archHeight: node.archHeight ?? 0.45,
         });
     }
+    // Operation doors build their moving parts at the closed pose inside named
+    // groups; reflect the door's current `operationState` by posing them. Roll-up
+    // is excluded: its live rebuild already renders the open state at full detail
+    // (the named curtain group is only there for the GLB exporter's scale clip).
+    if (doorType !== 'garage-rollup') {
+        poseDoorMovingParts(node, mesh, operationState);
+    }
     syncDoorCutout(node, mesh);
     // Guard: some degenerate door configs can leave a child mesh with an
     // empty (0-vertex) geometry — e.g. a zero-area extruded leaf frame.
@@ -1186,33 +1493,59 @@ function hideEmptyGeometryMeshes(root) {
     });
 }
 function syncDoorCutout(node, mesh) {
-    // ── Cutout (for wall CSG) — always full door 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 door body — making it
+        // the selection AND paint hit target for the whole opening. The paint
+        // capability then re-raycasts the door'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);
     const openingShape = getEffectiveOpeningShape(node);
     if (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 (openingShape === 'rounded') {
         cutout.geometry = new THREE.ExtrudeGeometry(createRoundedTopShape(-node.width / 2, node.width / 2, -node.height / 2, node.height / 2, getDoorTopRadii(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 door mesh for preview/ghost rendering.
+ * Returns a mesh with an invisible hitbox root and visible children (frame, panels, hardware).
+ */
+export function buildDoorPreviewMesh(node) {
+    const mesh = new THREE.Mesh();
+    updateDoorMesh(node, mesh);
+    return mesh;
+}