door_models 5.0.2 → 5.0.4

package/dist/index.cjs.js

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var csg = require('@react-three/csg');
 var three = require('@react-spring/three');
 var THREE = require('three');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -26,6 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 
 function _defineProperty(e, r, t) {
@@ -93,21 +96,21 @@ function _toPropertyKey(t) {
 }
 
 const _excluded = ["doorDepth"];
-const ConfiguratorContext = /*#__PURE__*/react.createContext(undefined);
+const ConfiguratorContext = /*#__PURE__*/React.createContext(undefined);
 const ConfiguratorProvider = _ref => {
   let {
     children,
     initialIs2D = false
   } = _ref;
-  const [is2D, setIs2D] = react.useState(initialIs2D);
-  const [isPlaneVisible, setIsPlaneVisible] = react.useState(false);
-  const [isFrameVisible, setIsFrameVisible] = react.useState(true);
-  const [cpid, setCpid] = react.useState("");
-  const [totalHeight, setTotalHeight] = react.useState(2700);
-  const [totalWidth, setTotalWidth] = react.useState(974);
-  const [glassVisible, setGlassVisible] = react.useState(false);
-  const [glassDepth, setGlassDepth] = react.useState(8);
-  const [door, setDoor] = react.useState({
+  const [is2D, setIs2D] = React.useState(initialIs2D);
+  const [isPlaneVisible, setIsPlaneVisible] = React.useState(false);
+  const [isFrameVisible, setIsFrameVisible] = React.useState(true);
+  const [cpid, setCpid] = React.useState("");
+  const [totalHeight, setTotalHeight] = React.useState(2700);
+  const [totalWidth, setTotalWidth] = React.useState(974);
+  const [glassVisible, setGlassVisible] = React.useState(false);
+  const [glassDepth, setGlassDepth] = React.useState(8);
+  const [door, setDoor] = React.useState({
     doorMaterial: "door_material",
     doorWidth: 0,
     doorHeight: 0,
@@ -115,7 +118,7 @@ const ConfiguratorProvider = _ref => {
     doorPivot: "left",
     doorOpening: "out"
   });
-  const [doorFrame, setDoorFrame] = react.useState({
+  const [doorFrame, setDoorFrame] = React.useState({
     frameMaterial: "doorFrame_material",
     doorStopMaterial: "doorStop_material",
     gasketMaterial: "gasket_material",
@@ -136,18 +139,18 @@ const ConfiguratorProvider = _ref => {
     secondDoorStopDepth: 30,
     secondDoorStopOffset: 13
   });
-  const [interiorFanlight, setInteriorFanlight] = react.useState({
+  const [interiorFanlight, setInteriorFanlight] = React.useState({
     visible: false,
     height: 300,
     material: "interiorFanlight_material"
   });
-  const [exteriorFanlight, setExteriorFanlight] = react.useState({
+  const [exteriorFanlight, setExteriorFanlight] = React.useState({
     visible: false,
     height: 300,
     depth: 60,
     material: "exteriorFanlight_material"
   });
-  const [occulus, setOcculus] = react.useState({
+  const [occulus, setOcculus] = React.useState({
     visible: false,
     infillVisible: true,
     x1: 150,
@@ -157,49 +160,49 @@ const ConfiguratorProvider = _ref => {
     material: "infill_material",
     depth: 20
   });
-  const [frontCoverPanel, setFrontCoverPanel] = react.useState({
+  const [frontCoverPanel, setFrontCoverPanel] = React.useState({
     visible: false,
     width: 73,
     height: 2200,
     depth: 12,
     material: "front_cover_material"
   });
-  const [backCoverPanel, setBackCoverPanel] = react.useState({
+  const [backCoverPanel, setBackCoverPanel] = React.useState({
     visible: false,
     width: 73,
     height: 2200,
     depth: 12,
     material: "back_cover_material"
   });
-  const [glass, setGlass] = react.useState({
+  const [glass, setGlass] = React.useState({
     visible: false,
     material: "infill_material",
     depth: 20
   });
-  const [frameType, setFrameType] = react.useState("AF20_40");
-  const [bodyType, setBodyType] = react.useState("40");
-  const [exteriorFanlightType, setExteriorFanlightType] = react.useState("WPFL");
-  const [testDoorMaterial, setTestDoorMaterial] = react.useState("brown");
-  const [testFrameMaterial, setTestFrameMaterial] = react.useState("black");
-  const [testGasketMaterial, setTestGasketMaterial] = react.useState("darkgrey");
-  const [testInteriorFanlightMaterial, setTestInteriorFanlightMaterial] = react.useState("grey");
-  const [testExteriorFanlightMaterial, setTestExteriorFanlightMaterial] = react.useState("metal");
-  const [testOcculusInfillMaterial, setTestOcculusInfillMaterial] = react.useState("glass");
-  const [testGlassInfillMaterial, setTestGlassInfillMaterial] = react.useState("glass");
-  const [testDoorStopMaterial, setTestDoorStopMaterial] = react.useState("black");
-  const [testHingeMaterial, setTestHingeMaterial] = react.useState("metal");
-  const [testFrontCoverPanelMaterial, setTestFrontCoverPanelMaterial] = react.useState("aluminum");
-  const [testBackCoverPanelMaterial, setTestBackCoverPanelMaterial] = react.useState("aluminum");
+  const [frameType, setFrameType] = React.useState("AF20_40");
+  const [bodyType, setBodyType] = React.useState("40");
+  const [exteriorFanlightType, setExteriorFanlightType] = React.useState("WPFL");
+  const [testDoorMaterial, setTestDoorMaterial] = React.useState("brown");
+  const [testFrameMaterial, setTestFrameMaterial] = React.useState("black");
+  const [testGasketMaterial, setTestGasketMaterial] = React.useState("darkgrey");
+  const [testInteriorFanlightMaterial, setTestInteriorFanlightMaterial] = React.useState("grey");
+  const [testExteriorFanlightMaterial, setTestExteriorFanlightMaterial] = React.useState("metal");
+  const [testOcculusInfillMaterial, setTestOcculusInfillMaterial] = React.useState("glass");
+  const [testGlassInfillMaterial, setTestGlassInfillMaterial] = React.useState("glass");
+  const [testDoorStopMaterial, setTestDoorStopMaterial] = React.useState("black");
+  const [testHingeMaterial, setTestHingeMaterial] = React.useState("metal");
+  const [testFrontCoverPanelMaterial, setTestFrontCoverPanelMaterial] = React.useState("aluminum");
+  const [testBackCoverPanelMaterial, setTestBackCoverPanelMaterial] = React.useState("aluminum");
 
   //
-  const [parseMessage, setParseMessage] = react.useState({
+  const [parseMessage, setParseMessage] = React.useState({
     type: "",
     text: ""
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     setIs2D(initialIs2D);
   }, [initialIs2D]);
-  const handleParseCpid = react.useCallback(cpidToParse => {
+  const handleParseCpid = React.useCallback(cpidToParse => {
     const showMessage = function (text) {
       let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "error";
       setParseMessage({
@@ -307,7 +310,7 @@ const ConfiguratorProvider = _ref => {
   }, [setBodyType, setExteriorFanlight, setExteriorFanlightType, setFrameType, setInteriorFanlight, setOcculus]);
 
   // --- BodyType Effect ---
-  react.useEffect(() => {
+  React.useEffect(() => {
     let newDoorDepth = 40;
     let newMaterial = "brown";
     switch (bodyType) {
@@ -334,7 +337,7 @@ const ConfiguratorProvider = _ref => {
   }, [bodyType]);
 
   // --- FrameType Effect ---
-  react.useEffect(() => {
+  React.useEffect(() => {
     setIsFrameVisible(frameType !== "NOF");
     setGlassVisible(false);
     let newSettings = {};
@@ -595,7 +598,7 @@ const ConfiguratorProvider = _ref => {
   }, [frameType]);
 
   // ---  Exterior Fanlight Logic ---
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!exteriorFanlight.visible) return;
     switch (exteriorFanlightType) {
       case "WPFL":
@@ -618,7 +621,7 @@ const ConfiguratorProvider = _ref => {
         break;
     }
   }, [exteriorFanlight.visible, exteriorFanlightType, doorFrame.frameDepth, setTestExteriorFanlightMaterial, setExteriorFanlight]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const topThkValue = parseInt(doorFrame.topThk) || 0;
     const exteriorFanlightHeight = exteriorFanlight.visible ? exteriorFanlight.height : 0;
     const newDoorHeight = totalHeight - topThkValue - exteriorFanlightHeight;
@@ -626,7 +629,7 @@ const ConfiguratorProvider = _ref => {
       doorHeight: newDoorHeight > 0 ? newDoorHeight : 0
     }));
   }, [totalHeight, doorFrame.topThk, exteriorFanlight.visible, exteriorFanlight.height]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const sidesThkValue = parseInt(doorFrame.sidesThk) || 0;
     const newDoorWidth = totalWidth - sidesThkValue * 2;
     setDoor(prevDoor => _objectSpread2(_objectSpread2({}, prevDoor), {}, {
@@ -701,7 +704,7 @@ const ConfiguratorProvider = _ref => {
   });
 };
 const useConfigurator = () => {
-  const context = react.useContext(ConfiguratorContext);
+  const context = React.useContext(ConfiguratorContext);
   if (!context) {
     throw new Error("useConfigurator must be used within a ConfiguratorProvider");
   }
@@ -747,9 +750,22 @@ const availableMaterials = {
     opacity: 0.7
   }),
   aluminum: new THREE__namespace.MeshStandardMaterial({
-    color: "#dcdcdc",
-    metalness: 1.0,
-    roughness: 0.3
+    color: "#abb0aa",
+    metalness: 0.8,
+    roughness: 0.5,
+    envMapIntensity: 1.2
+  }),
+  aluminumBrighter: new THREE__namespace.MeshStandardMaterial({
+    color: "#cdcdcd",
+    metalness: 0.8,
+    roughness: 0.5,
+    envMapIntensity: 1.2
+  }),
+  aluminumExtraBrighter: new THREE__namespace.MeshStandardMaterial({
+    color: "#ececec",
+    metalness: 0.8,
+    roughness: 0.5,
+    envMapIntensity: 1.2
   }),
   silver: new THREE__namespace.MeshStandardMaterial({
     color: "#c0c0c0",
@@ -770,159 +786,375 @@ const availableMaterials = {
     envMapIntensity: 1.5
   })
 };
+
+// Custom hook for door handle calculations
 function StandardHandle(_ref) {
   let {
     position,
     doorDepthM,
-    doorPivot
+    doorPivot,
+    frameType // 👈
   } = _ref;
-  // --- Basic Dimensions ---
-  const roseRadius = 0.03;
-  const roseThickness = 0.006;
-  const stemRadius = 0.007;
-  const leverRadius = 0.009;
-  const leverLength = 0.12;
-  const metal = availableMaterials.silver;
+  // --- Base Dimensions ---
+  const roseRadius = 0.025;
+
+  // --- Thickness ---
+  // default 5mm, but 8mm + 1–2mm if WDG frame
+  const roseThickness = frameType === "WDGF_WDG100" ? 0.008 + 0.0015 // average: 9.5mm
+  : 0.005; // 5mm default
+
+  const handleRadius = 0.009;
+  const handleLength = 0.12;
+
+  // face offset based on thickness
   const faceZ = doorDepthM / 2 + roseThickness / 2;
+  const connectorLength = handleLength - 0.08;
+  const cornerFrontZ = faceZ + roseThickness + connectorLength;
+  const cornerBackZ = -faceZ - roseThickness - connectorLength;
+  const roseGapY = 0.012;
   return /*#__PURE__*/jsxRuntime.jsxs("group", {
     position: position,
-    rotation: [0, 0, 0],
-    children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
-      "position-z": faceZ,
-      material: metal,
-      castShadow: true,
-      receiveShadow: true,
-      rotation: [Math.PI / 2, 0, 0],
-      children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-        args: [roseRadius, roseRadius, roseThickness, 48]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsxs("group", {
-      "scale-x": doorPivot === "left" ? -1 : 1,
-      children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
-        "position-z": doorDepthM / 2 + stemRadius,
-        material: metal,
+    children: [[faceZ, -faceZ].map((z, i) => /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+      children: [frameType === "WDGF_WDG100" ?
+      /*#__PURE__*/
+      // --- Capsule rose ---
+      jsxRuntime.jsxs("group", {
+        "position-z": z,
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+            args: [roseRadius * 2, roseRadius * 2, roseThickness]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          "position-y": roseRadius,
+          rotation: [Math.PI / 2, Math.PI / 2, 0],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [roseRadius, roseRadius, roseThickness, 32, 1, false, 0, Math.PI]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          "position-y": -roseRadius,
+          rotation: [-Math.PI / 2, Math.PI / 2, 0],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [roseRadius, roseRadius, roseThickness, 32, 1, false, 0, Math.PI]
+          })
+        })]
+      }) :
+      /*#__PURE__*/
+      // --- Round rose ---
+      jsxRuntime.jsx("mesh", {
+        rotation: [Math.PI / 2, 0, 0],
+        "position-z": z,
+        material: availableMaterials.aluminum,
         castShadow: true,
         receiveShadow: true,
-        rotation: [Math.PI / 2, 0, 0],
         children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-          args: [stemRadius, stemRadius, 0.02, 32]
+          args: [roseRadius, roseRadius, roseThickness, 48]
         })
-      }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-        position: [0.06, 0, doorDepthM / 2],
-        material: metal,
+      }), frameType === "WDGF_WDG100" ? /*#__PURE__*/jsxRuntime.jsxs("group", {
+        "position-z": z,
+        "position-y": -(0.08 + roseGapY),
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+            args: [(roseRadius - 0.008) * 2, (roseRadius - 0.008) * 2, roseThickness]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          "position-y": roseRadius - 0.008,
+          rotation: [Math.PI / 2, Math.PI / 2, 0],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [roseRadius - 0.008, roseRadius - 0.008, roseThickness, 32, 1, false, 0, Math.PI]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          "position-y": -(roseRadius - 0.008),
+          rotation: [-Math.PI / 2, Math.PI / 2, 0],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [roseRadius - 0.008, roseRadius - 0.008, roseThickness, 32, 1, false, 0, Math.PI]
+          })
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsx("mesh", {
+        rotation: [Math.PI / 2, 0, 0],
+        "position-z": z,
+        "position-y": -(0.08 + roseGapY),
+        material: availableMaterials.aluminum,
         castShadow: true,
         receiveShadow: true,
-        rotation: [0, 0, Math.PI / 2],
         children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-          args: [leverRadius, leverRadius, leverLength, 32]
+          args: [roseRadius, roseRadius, roseThickness, 48]
         })
+      }), /*#__PURE__*/jsxRuntime.jsxs("group", {
+        position: [0, -(0.08 + roseGapY),
+        // 👈 same Y as small rose
+        z + (z > 0 ? roseThickness : -roseThickness) // 👈 accounts for thickness
+        ],
+        castShadow: true,
+        receiveShadow: true,
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          rotation: [Math.PI / 2, 0, 0],
+          position: [0, 0.0075, 0],
+          material: availableMaterials.aluminumBrighter,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [0.008, 0.008, roseThickness, 32]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, -0.0075, 0],
+          material: availableMaterials.aluminumBrighter,
+          children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+            args: [0.008, 0.015, roseThickness]
+          })
+        })]
+      })]
+    }, i)), /*#__PURE__*/jsxRuntime.jsxs("group", {
+      scale: [doorPivot === "left" ? -1 : 1, 1, 1],
+      children: [/*#__PURE__*/jsxRuntime.jsxs("group", {
+        position: [0, 0, -0.01],
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, faceZ + roseThickness + connectorLength / 2],
+          rotation: [Math.PI / 2, 0, 0],
+          castShadow: true,
+          receiveShadow: true,
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, connectorLength, 48]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, cornerFrontZ],
+          castShadow: true,
+          receiveShadow: true,
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("sphereGeometry", {
+            args: [handleRadius, 32, 32]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [handleLength / 2, 0, cornerFrontZ],
+          rotation: [0, 0, Math.PI / 2],
+          castShadow: true,
+          receiveShadow: true,
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, handleLength, 48]
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("group", {
+        position: [0, 0, 0.01],
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, -faceZ - roseThickness - connectorLength / 2],
+          rotation: [Math.PI / 2, 0, 0],
+          castShadow: true,
+          receiveShadow: true,
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, connectorLength, 48]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, cornerBackZ],
+          castShadow: true,
+          receiveShadow: true,
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("sphereGeometry", {
+            args: [handleRadius, 32, 32]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [handleLength / 2, 0, cornerBackZ],
+          rotation: [0, 0, Math.PI / 2],
+          castShadow: true,
+          receiveShadow: true,
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, handleLength, 48]
+          })
+        })]
       })]
     })]
   });
 }
-function GlassHandle(_ref2) {
+const MergedPlate = _ref2 => {
+  let {
+    plateMaterial,
+    roseThickness,
+    faceZ
+  } = _ref2;
+  const geometry = React.useMemo(() => {
+    // Left half - sharp edges
+    const leftHalf = new THREE__namespace.BoxGeometry(0.05, 0.24, roseThickness);
+    leftHalf.translate(-0.025, 0, 0); // Center the left half
+
+    const shape = new THREE__namespace.Shape();
+    const width = 0.1;
+    const height = 0.24;
+    const radius = 0.01;
+    shape.moveTo(-width / 2, -height / 2);
+    shape.lineTo(-width / 2, height / 2);
+    shape.lineTo(width / 2 - radius, height / 2);
+    shape.absarc(width / 2 - radius, height / 2 - radius, radius, Math.PI / 2, 0, true);
+    shape.lineTo(width / 2, -height / 2 + radius);
+    shape.absarc(width / 2 - radius, -height / 2 + radius, radius, 0, -Math.PI / 2, true);
+    shape.lineTo(-width / 2, -height / 2);
+    const extrudeSettings = {
+      steps: 2,
+      depth: roseThickness,
+      bevelEnabled: false
+    };
+    return new THREE__namespace.ExtrudeGeometry(shape, extrudeSettings);
+  }, [roseThickness]);
+  return /*#__PURE__*/jsxRuntime.jsx("group", {
+    "position-z": faceZ,
+    children: /*#__PURE__*/jsxRuntime.jsx("mesh", {
+      geometry: geometry,
+      material: plateMaterial,
+      castShadow: true,
+      receiveShadow: true
+    })
+  });
+};
+function GlassHandle(_ref3) {
   let {
     position,
     doorDepthM,
     doorPivot
-  } = _ref2;
-  // --- Dimensions and materials ---
+  } = _ref3;
+  // --- Dimensions ---
   const roseRadius = 0.025;
   const roseThickness = 0.005;
-  const stemRadius = 0.005;
-  const leverRadius = 0.008;
-  const leverLength = 0.12;
-  const bendRadius = 0.012;
-  const metal = availableMaterials.silver;
-  const glassMaterial = availableMaterials.glass;
+  const handleRadius = 0.009;
+  const handleLength = 0.12;
   const faceZ = doorDepthM / 2 + roseThickness / 2;
+  const connectorLength = handleLength - 0.08;
   return /*#__PURE__*/jsxRuntime.jsxs("group", {
     position: position,
-    children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
-      rotation: [Math.PI / 2, 0, 0],
-      "position-z": faceZ,
-      material: metal,
-      castShadow: true,
-      receiveShadow: true,
-      children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-        args: [roseRadius, roseRadius * 0.92, roseThickness, 48]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-      rotation: [Math.PI / 2, 0, 0],
-      "position-z": -faceZ,
-      material: metal,
-      castShadow: true,
-      receiveShadow: true,
-      children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-        args: [roseRadius, roseRadius * 0.92, roseThickness, 48]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-      "position-z": faceZ + 0.001,
-      material: glassMaterial,
-      castShadow: true,
-      children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-        args: [roseRadius * 0.4, roseRadius * 0.4, roseThickness * 0.8, 32]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsxs("group", {
-      "scale-x": doorPivot === "left" ? -1 : 1,
+    children: [[faceZ, -faceZ].map((z, i) => /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
-        "position-z": doorDepthM / 2 + bendRadius,
-        material: metal,
-        castShadow: true,
-        receiveShadow: true,
         rotation: [Math.PI / 2, 0, 0],
-        children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-          args: [stemRadius, stemRadius, bendRadius, 24]
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-        position: [bendRadius, 0, doorDepthM / 2],
-        material: metal,
+        "position-z": z + (z > 0 ? roseThickness : -roseThickness) + 0.002,
+        material: availableMaterials.aluminum,
         castShadow: true,
         receiveShadow: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("torusGeometry", {
-          args: [bendRadius, stemRadius, 20, 48, Math.PI / 2]
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-        position: [bendRadius + leverLength / 2, 0, doorDepthM / 2],
-        material: metal,
-        castShadow: true,
-        receiveShadow: true,
-        rotation: [0, 0, Math.PI / 2],
         children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
-          args: [leverRadius, leverRadius * 0.8, leverLength, 32]
+          args: [roseRadius, roseRadius, roseThickness, 48]
         })
-      }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-        position: [bendRadius + leverLength, 0, doorDepthM / 2],
-        material: metal,
+      }), /*#__PURE__*/jsxRuntime.jsxs("mesh", {
+        position: [0, -0.08, z + (z > 0 ? roseThickness : -roseThickness)],
         castShadow: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("sphereGeometry", {
-          args: [leverRadius * 0.8, 12, 12]
-        })
+        receiveShadow: true,
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          rotation: [Math.PI / 2, 0, 0],
+          position: [0, 0.0075, 0],
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [0.008, 0.008, roseThickness, 32]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, -0.0075, 0],
+          material: availableMaterials.aluminum,
+          children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+            args: [0.008, 0.015, roseThickness]
+          })
+        })]
+      })]
+    }, i)), /*#__PURE__*/jsxRuntime.jsxs("group", {
+      "scale-x": doorPivot === "left" ? -1 : 1,
+      children: [[faceZ, -faceZ].map((z, i) => /*#__PURE__*/jsxRuntime.jsx(MergedPlate, {
+        faceZ: z,
+        plateMaterial: availableMaterials.aluminumExtraBrighter,
+        roseThickness: roseThickness
+      }, "plate-".concat(i))), /*#__PURE__*/jsxRuntime.jsxs("group", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [handleLength / 2, 0, faceZ + connectorLength],
+          rotation: [0, 0, Math.PI / 2],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, handleLength, 48]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, faceZ + connectorLength / 2],
+          rotation: [Math.PI / 2, 0, 0],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, connectorLength, 48]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, faceZ + connectorLength],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("sphereGeometry", {
+            args: [handleRadius, 32, 32]
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("group", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [handleLength / 2, 0, -(faceZ + connectorLength)],
+          rotation: [0, 0, Math.PI / 2],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, handleLength, 48]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, -(faceZ + connectorLength / 2)],
+          rotation: [Math.PI / 2, 0, 0],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("cylinderGeometry", {
+            args: [handleRadius, handleRadius, connectorLength, 48]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
+          position: [0, 0, -(faceZ + connectorLength)],
+          material: availableMaterials.aluminum,
+          castShadow: true,
+          receiveShadow: true,
+          children: /*#__PURE__*/jsxRuntime.jsx("sphereGeometry", {
+            args: [handleRadius, 32, 32]
+          })
+        })]
       })]
     })]
   });
 }
-function DoorHandle(_ref3) {
+function DoorHandle(_ref4) {
   let {
     bodyType,
     handleX,
     handleHeightM,
     doorDepthM,
     doorPivot
-  } = _ref3;
+  } = _ref4;
   const isSingleGlass = ["SG8", "SG10", "SG12"].includes(bodyType);
   const handlePos = [handleX, handleHeightM, 0];
+  const frameType = useConfigurator().frameType;
   return isSingleGlass ? /*#__PURE__*/jsxRuntime.jsx(GlassHandle, {
-    position: handlePos,
+    position: [handleX, handleHeightM, -0.0024],
     doorDepthM: doorDepthM,
     doorPivot: doorPivot
   }) : /*#__PURE__*/jsxRuntime.jsx(StandardHandle, {
     position: handlePos,
     doorDepthM: doorDepthM,
-    doorPivot: doorPivot
+    doorPivot: doorPivot,
+    frameType: frameType
   });
 }
-function GlassHinge(_ref4) {
+function GlassHinge(_ref5) {
   let {
     position,
     pivot,
@@ -930,7 +1162,7 @@ function GlassHinge(_ref4) {
     doorDepthM,
     material,
     gasketMaterial
-  } = _ref4;
+  } = _ref5;
   const plateWidth = 130 / 1000;
   const plateHeight = 55 / 1000;
   const plateThickness = 8 / 1000;
@@ -1006,7 +1238,7 @@ function GlassHinge(_ref4) {
     })]
   });
 }
-function DoorStopCuts(_ref5) {
+function DoorStopCuts(_ref6) {
   let {
     visible,
     width,
@@ -1018,7 +1250,7 @@ function DoorStopCuts(_ref5) {
     glassDepthOffset = 0,
     material,
     setName
-  } = _ref5;
+  } = _ref6;
   if (!visible) return null;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(csg.Subtraction, {
@@ -1045,10 +1277,10 @@ function DoorStopCuts(_ref5) {
     })]
   });
 }
-function DoorModels(_ref6) {
+function DoorModels(_ref7) {
   let {
     doorName
-  } = _ref6;
+  } = _ref7;
   const {
     is2D,
     totalWidth,
@@ -1081,7 +1313,7 @@ function DoorModels(_ref6) {
     glassDepth,
     handleParseCpid
   } = useConfigurator();
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (doorName) {
       handleParseCpid(doorName);
     }
@@ -1117,26 +1349,26 @@ function DoorModels(_ref6) {
   } = backCoverPanel;
 
   // --- Material Logic ---
-  const doorMaterial = react.useMemo(() => availableMaterials[testDoorMaterial] || availableMaterials[doorMaterialName] || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
-  const frameMaterial = react.useMemo(() => availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
-  const gasketMaterial = react.useMemo(() => availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
+  const doorMaterial = React.useMemo(() => availableMaterials[testDoorMaterial] || availableMaterials[doorMaterialName] || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
+  const frameMaterial = React.useMemo(() => availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
+  const gasketMaterial = React.useMemo(() => availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
     color: "#111111"
   }), [testGasketMaterial, gasketMaterialName]);
-  const doorStopMaterial = react.useMemo(() => {
+  const doorStopMaterial = React.useMemo(() => {
     return availableMaterials[testDoorStopMaterial] || availableMaterials[doorStopMaterialName || ""] || frameMaterial;
   }, [testDoorStopMaterial, doorStopMaterialName, frameType, frameMaterial]);
-  const interiorFanlightMaterial = react.useMemo(() => availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
-  const exteriorFanlightMaterial = react.useMemo(() => availableMaterials[testExteriorFanlightMaterial] || availableMaterials[exteriorFanlightMaterialName] || placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
-  const occulusInfillMaterial = react.useMemo(() => availableMaterials[testOcculusInfillMaterial] || availableMaterials[occulusInfillMaterialName] || placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
-  const glassInfillMaterial = react.useMemo(() => availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
-  const hingeBodyMaterial = react.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || new THREE__namespace.MeshStandardMaterial({
+  const interiorFanlightMaterial = React.useMemo(() => availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
+  const exteriorFanlightMaterial = React.useMemo(() => availableMaterials[testExteriorFanlightMaterial] || availableMaterials[exteriorFanlightMaterialName] || placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
+  const occulusInfillMaterial = React.useMemo(() => availableMaterials[testOcculusInfillMaterial] || availableMaterials[occulusInfillMaterialName] || placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
+  const glassInfillMaterial = React.useMemo(() => availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
+  const hingeBodyMaterial = React.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || new THREE__namespace.MeshStandardMaterial({
     color: "#d4d4d4",
     metalness: 1.0,
     roughness: 0.4
   }), [testHingeMaterial, hingeMaterialName]);
-  const frontCoverPanelMaterial = react.useMemo(() => availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
-  const backCoverPanelMaterial = react.useMemo(() => availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
-  const hingeAccentMaterial = react.useMemo(() => new THREE__namespace.MeshStandardMaterial({
+  const frontCoverPanelMaterial = React.useMemo(() => availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
+  const backCoverPanelMaterial = React.useMemo(() => availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
+  const hingeAccentMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#1a1a1a",
     roughness: 0.1
   }), []);
@@ -1221,8 +1453,8 @@ function DoorModels(_ref6) {
   const notchWidthM = notchWidthValue / 1000;
   const notchDepthM = notchDepthValue / 1000;
   const isOpeningIn = doorOpening === "in";
-  const doorStopPositionZ = react.useMemo(() => isOpeningIn ? frameDepthM / 2 - doorStopOffsetFromEdgeM - doorStopDepthM / 2 : -frameDepthM / 2 + doorStopOffsetFromEdgeM + doorStopDepthM / 2, [isOpeningIn, frameDepthM, doorStopOffsetFromEdgeM, doorStopDepthM]);
-  const gasketZPosition = react.useMemo(() => isOpeningIn ? doorStopPositionZ - doorStopDepthM / 2 - gasketDepthM / 2 : doorStopPositionZ + doorStopDepthM / 2 + gasketDepthM / 2, [isOpeningIn, doorStopPositionZ, doorStopDepthM, gasketDepthM]);
+  const doorStopPositionZ = React.useMemo(() => isOpeningIn ? frameDepthM / 2 - doorStopOffsetFromEdgeM - doorStopDepthM / 2 : -frameDepthM / 2 + doorStopOffsetFromEdgeM + doorStopDepthM / 2, [isOpeningIn, frameDepthM, doorStopOffsetFromEdgeM, doorStopDepthM]);
+  const gasketZPosition = React.useMemo(() => isOpeningIn ? doorStopPositionZ - doorStopDepthM / 2 - gasketDepthM / 2 : doorStopPositionZ + doorStopDepthM / 2 + gasketDepthM / 2, [isOpeningIn, doorStopPositionZ, doorStopDepthM, gasketDepthM]);
   const secondDoorStopWidthM = secondDoorStopWidth / 1000;
   const secondDoorStopDepthM = secondDoorStopDepth / 1000;
   const secondDoorStopPositionZ = isOpeningIn ? frameDepthM / 2 - secondDoorStopDepthM / 2 : -frameDepthM / 2 + secondDoorStopDepthM / 2;
@@ -1230,7 +1462,7 @@ function DoorModels(_ref6) {
   // Position the first glass panel against the primary doorstop
 
   const secondGasketZPosition = isOpeningIn ? secondDoorStopPositionZ - secondDoorStopDepthM / 2 - gasketDepthM / 2 : secondDoorStopPositionZ + secondDoorStopDepthM / 2 + gasketDepthM / 2;
-  const doorCenterZ = react.useMemo(() => {
+  const doorCenterZ = React.useMemo(() => {
     if (frameType === "WF_FLI") {
       if (isOpeningIn) {
         return frameDepthM / 2 - doorDepthM / 2;
@@ -1259,12 +1491,12 @@ function DoorModels(_ref6) {
   const occulusHeightM = mainDoorHeightM - occulusY1M - occulusY2M;
   const occulusPositionXM = (occulusX1M - occulusX2M) / 2;
   const occulusPositionYM = (occulusY2M - occulusY1M) / 2;
-  const [isOpen, setIsOpen] = react.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
   const hingeSideX = doorPivot === "left" ? -doorWidthM / 2 : doorWidthM / 2;
   const leftGlass_Z = -frameDepthM / 2 + GlassPanelDepthM / 2 - GlassPanelDepthM;
   const rightGlass_Z = frameDepthM / 2 - GlassPanelDepthM / 2 + GlassPanelDepthM;
   // --- PIVOT ---
-  const hingeZ = react.useMemo(() => {
+  const hingeZ = React.useMemo(() => {
     if (frameType === "WF_FLI") {
       if (isOpeningIn) {
         return doorCenterZ - doorDepthM / 2;
@@ -1274,7 +1506,7 @@ function DoorModels(_ref6) {
     }
     return isOpeningIn ? -frameDepthM / 2 : frameDepthM / 2;
   }, [frameType, isOpeningIn, doorCenterZ, doorDepthM, frameDepthM]);
-  const doorOffsetZ = react.useMemo(() => doorCenterZ - hingeZ, [doorCenterZ, hingeZ]);
+  const doorOffsetZ = React.useMemo(() => doorCenterZ - hingeZ, [doorCenterZ, hingeZ]);
   const directionMultiplier = doorOpening === "in" ? 1 : -1;
   const {
     rotation
@@ -1312,10 +1544,21 @@ function DoorModels(_ref6) {
   const handleCenterYFromDoorBottom = 1.0; // 1000 mm from bottom by default
   const safeHandleY = Math.min(Math.max(handleCenterYFromDoorBottom, 0.25), mainDoorHeightM - 0.25);
   const handleHeightM = -mainDoorHeightM / 2 + safeHandleY; // convert to door local Y
-  const latchMarginM = 0.08; // 80 mm from latch edge
-  const nonHingeSideX = doorPivot === "left" ? doorWidthM / 2 : -doorWidthM / 2;
-  const handleX = nonHingeSideX + (doorPivot === "left" ? -latchMarginM : latchMarginM);
 
+  // Check if the door is a glass type to adjust handle positioning
+  const isSingleGlass = ["SG8", "SG10", "SG12"].includes(bodyType);
+  const nonHingeSideX = doorPivot === "left" ? doorWidthM / 2 : -doorWidthM / 2;
+  let handleX;
+  if (isSingleGlass) {
+    // For the glass handle, position it right at the edge.
+    // The MergedPlate in GlassHandle is 0.1m wide, so we offset by half its width (0.05m).
+    const plateHalfWidth = 0.05;
+    handleX = nonHingeSideX + (doorPivot === "left" ? -plateHalfWidth : plateHalfWidth);
+  } else {
+    // For standard handles, keep the original margin.
+    const latchMarginM = 0.08; // 80 mm from latch edge
+    handleX = nonHingeSideX + (doorPivot === "left" ? -latchMarginM : latchMarginM);
+  }
   // --- Primary Gasket Edge Position Calculations ---
   const topGasketYPosition = totalOpeningHeightM / 2 - doorStopWidthM + gasketWidthM / 2;
   const leftGasketXPosition = -doorWidthM / 2 + doorStopWidthM - gasketWidthM / 2;
@@ -1334,10 +1577,10 @@ function DoorModels(_ref6) {
   const barrelPartHeight = (hingeTotalHeightM - capHeightM * 2 - separatorHeightM) / 2;
 
   // --- HINGE VISIBILITY LOGIC ---
-  const isGlassDoor = react.useMemo(() => ["SG8", "SG10", "SG12"].includes(bodyType), [bodyType]);
+  const isGlassDoor = React.useMemo(() => ["SG8", "SG10", "SG12"].includes(bodyType), [bodyType]);
 
   // Calculate evenly spaced hinge positions
-  const standardHingeYPositions = react.useMemo(() => {
+  const standardHingeYPositions = React.useMemo(() => {
     const numHinges = 4;
     const topMargin = 180 / 1000;
     const bottomMargin = 180 / 1000;
@@ -1351,7 +1594,7 @@ function DoorModels(_ref6) {
   }, [mainDoorHeightM]);
 
   // Y positions for the new glass hinges
-  const glassHingeYPositions = react.useMemo(() => {
+  const glassHingeYPositions = React.useMemo(() => {
     const topMargin = 250 / 1000;
     const secondTopMargin = 450 / 1000;
     const bottomMargin = 250 / 1000;
@@ -1360,7 +1603,7 @@ function DoorModels(_ref6) {
     const bottom = -mainDoorHeightM / 2 + bottomMargin;
     return [top, secondTop, bottom];
   }, [mainDoorHeightM]);
-  const isStandardHingeVisible = react.useMemo(() => {
+  const isStandardHingeVisible = React.useMemo(() => {
     if (isGlassDoor) return false;
     if (!isFrameVisible) return false;
     const invisibleFrameTypes = ["WDGF_WDG100", "WF_100", "WF_FLI"];
@@ -1371,7 +1614,7 @@ function DoorModels(_ref6) {
   }, [isFrameVisible, frameType, isGlassDoor]);
   if (is2D) {
     return /*#__PURE__*/jsxRuntime.jsx("group", {
-      "position-y": yCenteringOffset + 0.2,
+      "position-y": yCenteringOffset + 0.1,
       children: /*#__PURE__*/jsxRuntime.jsxs("mesh", {
         children: [/*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
           args: [totalWidth / 1000, 0.1, frameDepth / 1000]