@pascal-app/viewer 0.8.0 → 0.9.2

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

@@ -1,49 +1,227 @@
-import { clampDoorOperationState, getDoorRenderOpenAmount, sceneRegistry, useInteractive, 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 { baseMaterial, glassMaterial } 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 revealMaterial = new THREE.MeshBasicMaterial({ color: '#7f766c' });
+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;
+const DOOR_PROGRESSIVE_TIME_BUDGET_MS = 8;
+// Legacy/unparsed door nodes can miss schema-defaulted fields (segments,
+// columnRatios, dividerThickness, …) and crash the geometry build. Re-apply the
+// Zod defaults; if the node is structurally invalid (e.g. a segment missing a
+// required field) drop the bad segments, then fall back to defaults entirely.
+function normalizeDoorNodeForRender(node) {
+    const parsed = DoorNodeSchema.safeParse(node);
+    if (parsed.success)
+        return parsed.data;
+    const retry = DoorNodeSchema.safeParse({ ...node, segments: undefined });
+    if (retry.success)
+        return retry.data;
+    return { ...DOOR_RENDER_DEFAULTS, id: node.id, parentId: node.parentId };
+}
 export const DoorSystem = () => {
     const dirtyNodes = useScene((state) => state.dirtyNodes);
     const clearDirty = useScene((state) => state.clearDirty);
+    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
+    // set from the same render pass that received the override-publishing
+    // `markDirty` call. Mirrors WallSystem.
+    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)
+            return;
+        materialRevisionRef.current = materialRevision;
+        const nodes = useScene.getState().nodes;
+        for (const node of Object.values(nodes)) {
+            if (node?.type === 'door') {
+                useScene.getState().dirtyNodes.add(node.id);
+            }
+        }
+    });
+    // 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);
+        });
+        const useProgressiveDoorRebuilds = dirtyDoorIds.length > DOOR_PROGRESSIVE_DIRTY_THRESHOLD;
+        const frameStartedAt = performance.now();
+        let rebuiltDoorsThisFrame = 0;
+        for (const id of dirtyDoorIds) {
+            if (useProgressiveDoorRebuilds) {
+                if (rebuiltDoorsThisFrame >= MAX_DOOR_REBUILDS_PER_FRAME) {
+                    break;
+                }
+                if (rebuiltDoorsThisFrame > 0 &&
+                    performance.now() - frameStartedAt >= DOOR_PROGRESSIVE_TIME_BUDGET_MS) {
+                    break;
+                }
+            }
+            const node = nodes[id];
+            if (node?.type !== 'door')
+                continue;
             const mesh = sceneRegistry.nodes.get(id);
             if (!mesh)
-                return; // Keep dirty until mesh mounts
-            updateDoorMesh(node, mesh);
+                continue; // Keep dirty until mesh mounts
+            // Merge any live override (width / height / position) so the mesh
+            // rebuild reflects the in-flight drag without zustand churn. When
+            // no override is set this returns the scene node unchanged.
+            const effectiveNode = getEffectiveNode(node);
+            updateDoorMesh(effectiveNode, mesh);
             clearDirty(id);
+            rebuiltDoorsThisFrame += 1;
             // Rebuild the parent wall so its cutout reflects the updated door geometry
-            if (node.parentId) {
-                useScene.getState().dirtyNodes.add(node.parentId);
+            // Avoid triggering expensive wall CSG rebuilds while the door is being interactively moved/duplicated.
+            // The editor tools will request a final wall rebuild on commit.
+            const isTransient = !!node.metadata?.isTransient;
+            if (!isTransient && effectiveNode.parentId) {
+                useScene.getState().dirtyNodes.add(effectiveNode.parentId);
             }
-        });
+        }
     }, 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) {
@@ -54,6 +232,18 @@ 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) {
+    const geometry = new THREE.ExtrudeGeometry(shape, {
+        depth,
+        bevelEnabled: false,
+        curveSegments: 24,
+    });
+    geometry.translate(x, y, z - depth / 2);
+    const mesh = new THREE.Mesh(geometry, material);
+    tagDoorSlot(mesh);
     parent.add(mesh);
 }
 function getClampedArchHeight(width, height, archHeight) {
@@ -83,6 +273,32 @@ function getArchBoundaryY(x, halfWidth, springY, archHeight) {
     const t = Math.min(Math.abs(x) / halfWidth, 1);
     return springY + archHeight * Math.sqrt(Math.max(1 - t * t, 0));
 }
+function getOneSidedArchBoundaryYAtX(x, left, right, top, archHeight, curvedSide) {
+    const width = right - left;
+    if (width <= 1e-6)
+        return top;
+    const clampedArchHeight = getClampedArchHeight(width, Number.MAX_SAFE_INTEGER, archHeight);
+    const springY = top - clampedArchHeight;
+    const distanceFromApex = curvedSide === 'left'
+        ? Math.max(0, Math.min((right - x) / width, 1))
+        : Math.max(0, Math.min((x - left) / width, 1));
+    return (springY + clampedArchHeight * Math.sqrt(Math.max(1 - distanceFromApex * distanceFromApex, 0)));
+}
+function getRoundedBoundaryYAtX(x, left, right, top, radii) {
+    if (radii.topLeft > 1e-6 && x < left + radii.topLeft) {
+        const centerX = left + radii.topLeft;
+        const centerY = top - radii.topLeft;
+        const dx = x - centerX;
+        return centerY + Math.sqrt(Math.max(radii.topLeft * radii.topLeft - dx * dx, 0));
+    }
+    if (radii.topRight > 1e-6 && x > right - radii.topRight) {
+        const centerX = right - radii.topRight;
+        const centerY = top - radii.topRight;
+        const dx = x - centerX;
+        return centerY + Math.sqrt(Math.max(radii.topRight * radii.topRight - dx * dx, 0));
+    }
+    return top;
+}
 function createArchBandShape(width, outerSpringY, outerTopY, innerSpringY, innerTopY, insetX) {
     const halfWidth = width / 2;
     const innerHalfWidth = Math.max(halfWidth - insetX, 0);
@@ -215,6 +431,87 @@ function createRoundedLeafFrameShape(width, bottom, top, radii, insetX, insetY)
     outer.holes.push(shapeToReversedPath(createRoundedTopShape(innerLeft, innerRight, innerBottom, innerTop, innerRadii)));
     return outer;
 }
+function createRoundedClippedLeafFrameShape(left, right, bottom, top, fullLeft, fullRight, radii, insetX, insetY) {
+    const outerRadii = normalizeTopCornerRadii(radii, fullRight - fullLeft, top - bottom);
+    const outer = createTopClippedRectShape(left, right, bottom, top, (x) => getRoundedBoundaryYAtX(x, fullLeft, fullRight, top, {
+        topLeft: outerRadii.topLeft,
+        topRight: outerRadii.topRight,
+    }));
+    if (!outer)
+        return null;
+    const innerLeft = left + insetX;
+    const innerRight = right - insetX;
+    const innerBottom = bottom + insetY;
+    const innerTop = top - insetY;
+    if (innerRight <= innerLeft + 0.01 || innerTop <= innerBottom + 0.01)
+        return outer;
+    const innerFullLeft = fullLeft + insetX;
+    const innerFullRight = fullRight - insetX;
+    const innerRadii = normalizeTopCornerRadii({
+        topLeft: Math.max(outerRadii.topLeft - Math.max(insetX, insetY), 0),
+        topRight: Math.max(outerRadii.topRight - Math.max(insetX, insetY), 0),
+    }, innerFullRight - innerFullLeft, innerTop - innerBottom);
+    const holeShape = createTopClippedRectShape(innerLeft, innerRight, innerBottom, innerTop, (x) => getRoundedBoundaryYAtX(x, innerFullLeft, innerFullRight, innerTop, {
+        topLeft: innerRadii.topLeft,
+        topRight: innerRadii.topRight,
+    }));
+    if (holeShape)
+        outer.holes.push(shapeToReversedPath(holeShape));
+    return outer;
+}
+function createArchedLeafFrameShape(width, bottom, top, archHeight, insetX, insetY) {
+    const halfWidth = width / 2;
+    const outer = createArchShape(-halfWidth, halfWidth, bottom, top, archHeight);
+    const innerLeft = -halfWidth + insetX;
+    const innerRight = halfWidth - insetX;
+    const innerBottom = bottom + insetY;
+    const innerTop = top - insetY;
+    if (innerRight <= innerLeft + 0.01 || innerTop <= innerBottom + 0.01)
+        return outer;
+    const innerArchHeight = getClampedArchHeight(innerRight - innerLeft, innerTop - innerBottom, Math.max(archHeight - insetY, 0.01));
+    outer.holes.push(shapeToReversedPath(createArchShape(innerLeft, innerRight, innerBottom, innerTop, innerArchHeight)));
+    return outer;
+}
+function createArchedClippedLeafFrameShape(left, right, bottom, top, fullLeft, fullRight, archHeight, insetX, insetY) {
+    const fullCenterX = (fullLeft + fullRight) / 2;
+    const fullHalfWidth = (fullRight - fullLeft) / 2;
+    const springY = top - archHeight;
+    const outer = createTopClippedRectShape(left, right, bottom, top, (x) => getArchBoundaryY(x - fullCenterX, fullHalfWidth, springY, archHeight));
+    if (!outer)
+        return null;
+    const innerLeft = left + insetX;
+    const innerRight = right - insetX;
+    const innerBottom = bottom + insetY;
+    const innerTop = top - insetY;
+    if (innerRight <= innerLeft + 0.01 || innerTop <= innerBottom + 0.01)
+        return outer;
+    const innerFullLeft = fullLeft + insetX;
+    const innerFullRight = fullRight - insetX;
+    const innerArchHeight = getClampedArchHeight(innerFullRight - innerFullLeft, innerTop - innerBottom, Math.max(archHeight - insetY, 0.01));
+    const innerFullCenterX = (innerFullLeft + innerFullRight) / 2;
+    const innerFullHalfWidth = (innerFullRight - innerFullLeft) / 2;
+    const innerSpringY = innerTop - innerArchHeight;
+    const holeShape = createTopClippedRectShape(innerLeft, innerRight, innerBottom, innerTop, (x) => getArchBoundaryY(x - innerFullCenterX, innerFullHalfWidth, innerSpringY, innerArchHeight));
+    if (holeShape)
+        outer.holes.push(shapeToReversedPath(holeShape));
+    return outer;
+}
+function createOneSidedArchLeafFrameShape(left, right, bottom, top, archHeight, insetX, insetY, curvedSide) {
+    const outer = createTopClippedRectShape(left, right, bottom, top, (x) => getOneSidedArchBoundaryYAtX(x, left, right, top, archHeight, curvedSide));
+    if (!outer)
+        return null;
+    const innerLeft = left + insetX;
+    const innerRight = right - insetX;
+    const innerBottom = bottom + insetY;
+    const innerTop = top - insetY;
+    if (innerRight <= innerLeft + 0.01 || innerTop <= innerBottom + 0.01)
+        return outer;
+    const innerArchHeight = getClampedArchHeight(innerRight - innerLeft, innerTop - innerBottom, Math.max(archHeight - insetY, 0.01));
+    const holeShape = createTopClippedRectShape(innerLeft, innerRight, innerBottom, innerTop, (x) => getOneSidedArchBoundaryYAtX(x, innerLeft, innerRight, innerTop, innerArchHeight, curvedSide));
+    if (holeShape)
+        outer.holes.push(shapeToReversedPath(holeShape));
+    return outer;
+}
 function createTopClippedRectShape(left, right, bottom, top, getBoundaryY) {
     const segments = 20;
     const points = [];
@@ -242,17 +539,19 @@ function disposeObject(object) {
             child.geometry.dispose();
     });
 }
-function addLeafSegmentContent({ addLeafBox, leafWidth, leafHeight, leafCenterX, leafCenterY, leafDepth, segments, contentPadding, keepFrameWhenEmpty = false, }) {
+function addLeafSegmentContent({ addLeafBox, addLeafShape, leafWidth, leafHeight, leafCenterX, leafCenterY, leafDepth, segments, contentPadding, keepFrameWhenEmpty = false, renderPerimeterFrame = true, openingShape = 'rectangle', openingTopRadii, archHeight, archOuterSide, }) {
     const hasLeafContent = segments.some((seg) => seg.type !== 'empty');
     const shouldRenderFrame = hasLeafContent || keepFrameWhenEmpty;
     const cpX = contentPadding[0];
     const cpY = contentPadding[1];
-    if (shouldRenderFrame && cpY > 0) {
+    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 (shouldRenderFrame && cpX > 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);
     }
@@ -261,9 +560,32 @@ function addLeafSegmentContent({ addLeafBox, leafWidth, leafHeight, leafCenterX,
     const totalRatio = segments.reduce((sum, s) => sum + s.heightRatio, 0);
     const contentTop = leafCenterY + contentH / 2;
     let segY = contentTop;
+    const leafLeft = leafCenterX - leafWidth / 2;
+    const leafRight = leafCenterX + leafWidth / 2;
+    const leafTop = leafCenterY + leafHeight / 2;
+    const hasShapedTop = openingShape === 'rounded' || openingShape === 'arch';
+    const clampedLeafArchHeight = openingShape === 'arch' ? getClampedArchHeight(leafWidth, leafHeight, archHeight) : 0;
+    const leafSpringY = leafTop - clampedLeafArchHeight;
+    const topBoundaryAtX = (x) => {
+        if (openingShape === 'rounded' && openingTopRadii) {
+            return getRoundedBoundaryYAtX(x, leafLeft, leafRight, leafTop, {
+                topLeft: openingTopRadii.topLeft,
+                topRight: openingTopRadii.topRight,
+            });
+        }
+        if (openingShape === 'arch') {
+            if (archOuterSide) {
+                return getOneSidedArchBoundaryYAtX(x, leafLeft, leafRight, leafTop, clampedLeafArchHeight, archOuterSide);
+            }
+            return getArchBoundaryY(x - leafCenterX, leafWidth / 2, leafSpringY, clampedLeafArchHeight);
+        }
+        return leafTop;
+    };
     for (const seg of segments) {
         const segH = (seg.heightRatio / totalRatio) * contentH;
         const segCenterY = segY - segH / 2;
+        const segTop = segY;
+        const segBottom = segY - segH;
         const numCols = seg.columnRatios.length;
         const colSum = seg.columnRatios.reduce((a, b) => a + b, 0);
         const usableW = contentW - (numCols - 1) * seg.dividerThickness;
@@ -278,9 +600,20 @@ function addLeafSegmentContent({ addLeafBox, leafWidth, leafHeight, leafCenterX,
         }
         if (seg.type !== 'empty') {
             cx = leafCenterX - contentW / 2;
+            currentDoorSlot = 'panel';
             for (let c = 0; c < numCols - 1; c++) {
                 cx += colWidths[c];
-                addLeafBox(baseMaterial, seg.dividerThickness, segH, leafDepth + 0.001, cx + seg.dividerThickness / 2, segCenterY, 0);
+                const dividerLeft = cx;
+                const dividerRight = cx + seg.dividerThickness;
+                const dividerShape = hasShapedTop && addLeafShape
+                    ? createTopClippedRectShape(dividerLeft, dividerRight, segBottom, segTop, topBoundaryAtX)
+                    : null;
+                if (dividerShape && addLeafShape) {
+                    addLeafShape(baseMaterial, dividerShape, leafDepth + 0.001);
+                }
+                else {
+                    addLeafBox(baseMaterial, seg.dividerThickness, segH, leafDepth + 0.001, cx + seg.dividerThickness / 2, segCenterY, 0);
+                }
                 cx += seg.dividerThickness;
             }
         }
@@ -288,32 +621,107 @@ function addLeafSegmentContent({ addLeafBox, leafWidth, leafHeight, leafCenterX,
             const colW = colWidths[c];
             const colX = colXCenters[c];
             if (seg.type === 'glass') {
+                currentDoorSlot = 'glass';
                 const glassDepth = Math.max(0.004, leafDepth * 0.15);
-                addLeafBox(glassMaterial, colW, segH, glassDepth, colX, segCenterY, 0);
+                const segmentLeft = colX - colW / 2;
+                const segmentRight = colX + colW / 2;
+                const glassShape = hasShapedTop && addLeafShape
+                    ? createTopClippedRectShape(segmentLeft, segmentRight, segBottom, segTop, topBoundaryAtX)
+                    : null;
+                if (glassShape && addLeafShape) {
+                    addLeafShape(glassMaterial, glassShape, glassDepth);
+                }
+                else {
+                    addLeafBox(glassMaterial, colW, segH, glassDepth, colX, segCenterY, 0);
+                }
             }
             else if (seg.type === 'panel') {
-                addLeafBox(baseMaterial, colW, segH, leafDepth, colX, segCenterY, 0);
+                currentDoorSlot = 'panel';
+                const segmentLeft = colX - colW / 2;
+                const segmentRight = colX + colW / 2;
+                const outerPanelShape = hasShapedTop && addLeafShape
+                    ? createTopClippedRectShape(segmentLeft, segmentRight, segBottom, segTop, topBoundaryAtX)
+                    : null;
+                if (outerPanelShape && addLeafShape) {
+                    addLeafShape(baseMaterial, outerPanelShape, leafDepth);
+                }
+                else {
+                    addLeafBox(baseMaterial, colW, segH, leafDepth, colX, segCenterY, 0);
+                }
                 const panelW = colW - 2 * seg.panelInset;
                 const panelH = segH - 2 * seg.panelInset;
                 if (panelW > 0.01 && panelH > 0.01) {
                     const effectiveDepth = Math.abs(seg.panelDepth) < 0.002 ? 0.005 : Math.abs(seg.panelDepth);
                     const panelZ = leafDepth / 2 + effectiveDepth / 2;
-                    addLeafBox(baseMaterial, panelW, panelH, effectiveDepth, colX, segCenterY, panelZ);
+                    const insetLeft = colX - panelW / 2;
+                    const insetRight = colX + panelW / 2;
+                    const insetTop = segTop - seg.panelInset;
+                    const insetBottom = segBottom + seg.panelInset;
+                    const innerPanelShape = hasShapedTop && addLeafShape
+                        ? createTopClippedRectShape(insetLeft, insetRight, insetBottom, insetTop, topBoundaryAtX)
+                        : null;
+                    if (innerPanelShape && addLeafShape) {
+                        addLeafShape(baseMaterial, innerPanelShape, effectiveDepth);
+                    }
+                    else {
+                        addLeafBox(baseMaterial, panelW, panelH, effectiveDepth, colX, segCenterY, panelZ);
+                    }
                 }
             }
         }
         segY -= segH;
     }
 }
-function addDoorLeaf(mesh, { leafWidth, leafHeight, leafCenterX, leafCenterY, leafDepth, hingeX, hingeSide, swingRotation, segments, contentPadding, handle, handleBothSides = false, handleHeight, handleSide, doorCloser, panicBar, panicBarHeight, doorHeight, }) {
+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);
+    const localLeafCenterX = leafCenterX - hingeX;
+    const leafBottom = leafCenterY - leafHeight / 2;
+    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])
+                : createRoundedLeafFrameShape(leafWidth, leafBottom, leafTop, openingTopRadii, contentPadding[0], contentPadding[1]);
+            if (roundedLeafShape) {
+                if (roundedBoundary) {
+                    addLeafShape(baseMaterial, roundedLeafShape, leafDepth);
+                }
+                else {
+                    addShapeAt(leafGroup, baseMaterial, roundedLeafShape, leafDepth, localLeafCenterX, 0, 0);
+                }
+            }
+        }
+        else if (openingShape === 'arch') {
+            const archedLeafShape = archOuterSide
+                ? createOneSidedArchLeafFrameShape(leafCenterX - leafWidth / 2, leafCenterX + leafWidth / 2, leafBottom, leafTop, archHeight, contentPadding[0], contentPadding[1], archOuterSide)
+                : archedBoundary
+                    ? createArchedClippedLeafFrameShape(leafCenterX - leafWidth / 2, leafCenterX + leafWidth / 2, leafBottom, leafTop, archedBoundary.fullLeft, archedBoundary.fullRight, archedBoundary.archHeight, contentPadding[0], contentPadding[1])
+                    : createArchedLeafFrameShape(leafWidth, leafBottom, leafTop, getClampedArchHeight(leafWidth, leafHeight, archHeight), contentPadding[0], contentPadding[1]);
+            if (archedLeafShape) {
+                if (archOuterSide || archedBoundary) {
+                    addLeafShape(baseMaterial, archedLeafShape, leafDepth);
+                }
+                else {
+                    addShapeAt(leafGroup, baseMaterial, archedLeafShape, leafDepth, localLeafCenterX, 0, 0);
+                }
+            }
+        }
+    }
     addLeafSegmentContent({
         addLeafBox,
+        addLeafShape,
         leafWidth,
         leafHeight,
         leafCenterX,
@@ -321,72 +729,224 @@ function addDoorLeaf(mesh, { leafWidth, leafHeight, leafCenterX, leafCenterY, le
         leafDepth,
         segments,
         contentPadding,
+        renderPerimeterFrame: !usesShapedLeafFrame,
+        openingShape,
+        openingTopRadii,
+        archHeight,
+        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;
-        const leafBottom = leafCenterY - leafHeight / 2;
-        const leafTop = leafCenterY + leafHeight / 2;
-        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);
+    }
+}
+// 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, operationState, leafCount, doorHeight, handleHeight, segments, contentPadding, }) {
+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 }];
+    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 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),
-        });
-    }
-    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),
@@ -398,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;
@@ -478,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,
@@ -510,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);
-    }
-    addBox(mesh, revealMaterial, insideWidth, 0.032, Math.max(frameDepth * 0.36, 0.03), 0, railY, 0);
+        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);
+    }
+    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);
@@ -562,52 +1133,83 @@ 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' ||
+        node.doorType === 'pocket' ||
+        node.doorType === 'barn' ||
+        node.doorType === 'sliding'
+        ? 'rectangle'
+        : (node.openingShape ?? 'rectangle');
 }
-function updateDoorMesh(node, mesh) {
+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);
@@ -622,7 +1224,15 @@ function updateDoorMesh(node, mesh) {
         disposeObject(child);
         mesh.remove(child);
     }
-    const { width, height, openingKind, openingShape, 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;
+    // 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];
     const swingAngle = runtimeDoorState?.swingAngle ?? nodeSwingAngle;
     const operationState = runtimeDoorState?.operationState ?? nodeOperationState;
@@ -637,6 +1247,7 @@ function updateDoorMesh(node, 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;
@@ -647,26 +1258,27 @@ function updateDoorMesh(node, 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, {
@@ -676,7 +1288,6 @@ function updateDoorMesh(node, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             garagePanelCount,
         });
     }
@@ -699,7 +1310,6 @@ function updateDoorMesh(node, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
         });
     }
     else if (doorType === 'folding') {
@@ -710,7 +1320,6 @@ function updateDoorMesh(node, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             leafCount,
             doorHeight: height,
             handleHeight,
@@ -726,7 +1335,6 @@ function updateDoorMesh(node, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             slideDirection,
             doorHeight: height,
             handleHeight,
@@ -742,7 +1350,6 @@ function updateDoorMesh(node, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             slideDirection,
             doorHeight: height,
             handleHeight,
@@ -758,7 +1365,6 @@ function updateDoorMesh(node, mesh) {
             leafDepth,
             frameThickness,
             frameDepth,
-            operationState,
             slideDirection,
             doorHeight: height,
             handleHeight,
@@ -768,6 +1374,14 @@ function updateDoorMesh(node, mesh) {
     }
     else if (doorType === 'double' || doorType === 'french') {
         const doubleLeafW = insideWidth / 2;
+        const fullLeafTopRadii = getDoorTopRadii(node, insideWidth, leafH);
+        const roundedBoundary = openingShape === 'rounded'
+            ? {
+                fullLeft: -insideWidth / 2,
+                fullRight: insideWidth / 2,
+                radii: fullLeafTopRadii,
+            }
+            : undefined;
         addDoorLeaf(mesh, {
             leafWidth: doubleLeafW,
             leafHeight: leafH,
@@ -777,6 +1391,7 @@ function updateDoorMesh(node, mesh) {
             hingeX: -insideWidth / 2,
             hingeSide: 'left',
             swingRotation: -clampedSwingAngle * swingDirectionSign,
+            openRotationY: (-Math.PI / 2) * swingDirectionSign,
             segments,
             contentPadding,
             handle,
@@ -787,6 +1402,13 @@ function updateDoorMesh(node, mesh) {
             panicBar,
             panicBarHeight,
             doorHeight: height,
+            openingShape,
+            openingTopRadii: openingShape === 'rounded'
+                ? { topLeft: fullLeafTopRadii.topLeft, topRight: 0 }
+                : fullLeafTopRadii,
+            archHeight: node.archHeight ?? 0.45,
+            roundedBoundary,
+            archOuterSide: openingShape === 'arch' ? 'left' : undefined,
         });
         addDoorLeaf(mesh, {
             leafWidth: doubleLeafW,
@@ -797,6 +1419,7 @@ function updateDoorMesh(node, mesh) {
             hingeX: insideWidth / 2,
             hingeSide: 'right',
             swingRotation: clampedSwingAngle * swingDirectionSign,
+            openRotationY: (Math.PI / 2) * swingDirectionSign,
             segments,
             contentPadding,
             handle,
@@ -807,6 +1430,13 @@ function updateDoorMesh(node, mesh) {
             panicBar,
             panicBarHeight,
             doorHeight: height,
+            openingShape,
+            openingTopRadii: openingShape === 'rounded'
+                ? { topLeft: 0, topRight: fullLeafTopRadii.topRight }
+                : fullLeafTopRadii,
+            archHeight: node.archHeight ?? 0.45,
+            roundedBoundary,
+            archOuterSide: openingShape === 'arch' ? 'right' : undefined,
         });
     }
     else {
@@ -821,6 +1451,7 @@ function updateDoorMesh(node, mesh) {
             hingeX,
             hingeSide: hingesSide,
             swingRotation: clampedSwingAngle * swingDirectionSign * hingeDirectionSign,
+            openRotationY: (Math.PI / 2) * swingDirectionSign * hingeDirectionSign,
             segments,
             contentPadding,
             handle,
@@ -831,37 +1462,90 @@ function updateDoorMesh(node, mesh) {
             panicBar,
             panicBarHeight,
             doorHeight: height,
+            openingShape,
+            openingTopRadii: getDoorTopRadii(node, insideWidth, leafH),
+            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.
+    // Submitting such a mesh trips a WebGPU error ("Vertex buffer slot 0
+    // … was not set" on a Draw(0, …)). Hide any empty mesh so it is never
+    // drawn (it would render nothing anyway).
+    hideEmptyGeometryMeshes(mesh);
+}
+function hideEmptyGeometryMeshes(root) {
+    root.traverse((obj) => {
+        const child = obj;
+        if (!child.isMesh || !child.geometry)
+            return;
+        const position = child.geometry.getAttribute('position');
+        if (!position || position.count === 0)
+            child.visible = false;
+    });
 }
 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();
-    if (node.openingShape === 'arch') {
+    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 (node.openingShape === 'rounded') {
+    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;
+}