door_models 5.2.8 → 5.3.0

package/dist/index.cjs.js

@@ -179,11 +179,11 @@ const ConfiguratorProvider = _ref => {
   });
   const [frontDoorPlane, setFrontDoorPlane] = React.useState({
     visible: true,
-    material: "test_material"
+    material: "frontDoor_material"
   });
   const [backDoorPlane, setBackDoorPlane] = React.useState({
     visible: true,
-    material: "test_material"
+    material: "frontDoor_material"
   });
   const [glass, setGlass] = React.useState({
     visible: false,
@@ -662,6 +662,7 @@ const ConfiguratorProvider = _ref => {
   return /*#__PURE__*/jsxRuntime.jsx(ConfiguratorContext.Provider, {
     value: {
       materials,
+      setMaterials,
       is2D,
       setIs2D,
       isPlaneVisible,
@@ -722,41 +723,6 @@ const useConfigurator = () => {
   return context;
 };
 
-// Re-use the same loader instance to leverage Three.js's caching
-const textureLoader = new THREE__namespace.TextureLoader();
-
-/**
- * Creates a THREE.MeshStandardMaterial from a string prop.
- * - If the string starts with '#', it's treated as a hex color.
- * - Otherwise, it's treated as a path to a texture image (URL or local path).
- * @param value The color string or texture path.
- * @returns A THREE.MeshStandardMaterial or null if no value is provided.
- */
-const createMaterialFromProp = value => {
-  if (!value) {
-    return null; // Return null if the prop is empty
-  }
-
-  // Check if the value is a hexadecimal color code
-  if (value.startsWith("#")) {
-    return new THREE__namespace.MeshStandardMaterial({
-      color: value,
-      roughness: 0.8
-    });
-  }
-
-  // Otherwise, assume it is a path to a texture
-  const texture = textureLoader.load(value);
-  texture.wrapS = THREE__namespace.RepeatWrapping;
-  texture.wrapT = THREE__namespace.RepeatWrapping;
-
-  // Improve texture sharpness at glancing angles
-  texture.anisotropy = 16;
-  return new THREE__namespace.MeshStandardMaterial({
-    map: texture,
-    roughness: 0.8
-  });
-};
 const availableMaterials = {
   black: new THREE__namespace.MeshStandardMaterial({
     color: "#000000"
@@ -766,6 +732,21 @@ const availableMaterials = {
     metalness: 1.0,
     roughness: 0.4
   }),
+  darkgrey: new THREE__namespace.MeshStandardMaterial({
+    color: "#5e5e5e"
+  }),
+  grey: new THREE__namespace.MeshStandardMaterial({
+    color: "#cccccc"
+  }),
+  yellow: new THREE__namespace.MeshStandardMaterial({
+    color: "#ffff00"
+  }),
+  darkBrown: new THREE__namespace.MeshStandardMaterial({
+    color: "#a0522d"
+  }),
+  brown: new THREE__namespace.MeshStandardMaterial({
+    color: "#d2b48c"
+  }),
   glass: new THREE__namespace.MeshStandardMaterial({
     color: "#ffffff",
     roughness: 0.1,
@@ -789,32 +770,134 @@ const availableMaterials = {
     metalness: 0.8,
     roughness: 0.5,
     envMapIntensity: 1.2
+  }),
+  silver: new THREE__namespace.MeshStandardMaterial({
+    color: "#c0c0c0",
+    metalness: 1.0,
+    roughness: 0.2
+  }),
+  gold: new THREE__namespace.MeshStandardMaterial({
+    color: "#ffd700",
+    metalness: 1.0,
+    roughness: 0.3
+  }),
+  diamond: new THREE__namespace.MeshStandardMaterial({
+    color: "#e0f7fa",
+    metalness: 0.9,
+    roughness: 0.05,
+    transparent: true,
+    opacity: 0.9,
+    envMapIntensity: 1.5
+  }),
+  test_material: new THREE__namespace.MeshStandardMaterial({
+    color: "red",
+    roughness: 0.1
   })
 };
-const placeholderMaterial = new THREE__namespace.MeshStandardMaterial({
+new THREE__namespace.MeshStandardMaterial({
   color: "#cccccc",
   roughness: 0.8
 });
-const placeholderMaterialforFrames = new THREE__namespace.MeshStandardMaterial({
+new THREE__namespace.MeshStandardMaterial({
   color: "#000",
   roughness: 0.8
 });
 
+const textureLoader = new THREE__namespace.TextureLoader();
+const textureCache = {};
+const isHexColor = str => /^#([0-9A-F]{3}){1,2}$/i.test(str);
+const isUrl = str => str.startsWith("http") || str.startsWith("/");
+const getFirstValidValue = values => {
+  for (const val of values) {
+    if (val) {
+      return val;
+    }
+  }
+  return undefined;
+};
+const createDynamicMaterial = prop => {
+  if (!prop) {
+    return new THREE__namespace.MeshStandardMaterial({
+      color: "#cccccc",
+      roughness: 0.8
+    });
+  }
+  const sourceValue = typeof prop === "string" ? prop : prop.value;
+  const opacity = typeof prop === "object" ? prop.opacity : 1;
+  const params = {
+    roughness: 0.8
+  };
+  if (isHexColor(sourceValue)) {
+    params.color = sourceValue;
+  } else if (isUrl(sourceValue)) {
+    if (!textureCache[sourceValue]) {
+      textureCache[sourceValue] = textureLoader.load(sourceValue);
+    }
+    params.map = textureCache[sourceValue];
+  } else {
+    params.color = "#cccccc";
+  }
+  if (opacity !== undefined && opacity < 1) {
+    params.transparent = true;
+    params.opacity = opacity;
+  }
+  return new THREE__namespace.MeshStandardMaterial(params);
+};
+
+/**
+ * A custom hook to generate memoized materials for the door model.
+ * @param materialsProp - The materials object passed as props.
+ * @returns An object containing all the necessary THREE.Material instances.
+ */
+const useDoorMaterials = function () {
+  let materialsProp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  // --- Material Logic ---
+
+  const doorMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.Body), [materialsProp.Body]);
+  const frameMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
+  const gasketMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_GASKET), [materialsProp.D_GASKET]);
+  const doorStopMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
+  const interiorFanlightMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR), [materialsProp.D_SRF_DECOR]);
+  const exteriorFanlightMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR), [materialsProp.D_SRF_DECOR]);
+  const occulusInfillMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_FR_COLOR), [materialsProp.D_FR_COLOR]);
+  const glassInfillMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_FR_COLOR), [materialsProp.D_FR_COLOR]);
+  const frontCoverPanelMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
+  const backCoverPanelMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
+  const frontDoorPlaneMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR_2), [materialsProp.D_SRF_DECOR_2]);
+  const backDoorPlaneMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR), [materialsProp.D_SRF_DECOR]);
+  const hingeBodyMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.Hinge), [materialsProp.Hinge]);
+  const hingeAccentMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.HingeCuts), [materialsProp.HingeCuts]);
+  return React.useMemo(() => ({
+    doorMaterial,
+    frameMaterial,
+    gasketMaterial,
+    doorStopMaterial,
+    interiorFanlightMaterial,
+    exteriorFanlightMaterial,
+    occulusInfillMaterial,
+    glassInfillMaterial,
+    hingeBodyMaterial,
+    frontCoverPanelMaterial,
+    backCoverPanelMaterial,
+    frontDoorPlaneMaterial,
+    backDoorPlaneMaterial,
+    hingeAccentMaterial
+  }), [doorMaterial, frameMaterial, gasketMaterial, doorStopMaterial, interiorFanlightMaterial, exteriorFanlightMaterial, occulusInfillMaterial, glassInfillMaterial, hingeBodyMaterial, frontCoverPanelMaterial, backCoverPanelMaterial, frontDoorPlaneMaterial, backDoorPlaneMaterial, hingeAccentMaterial]);
+};
+
 function StandardHandle(_ref) {
   let {
     position,
     doorDepthM,
     doorPivot,
-    frameType // 👈
+    frameType
   } = _ref;
   // --- Base Dimensions ---
   const roseRadius = 0.035;
 
   // --- 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 roseThickness = frameType === "WDGF_WDG100" ? 0.008 + 0.0015 : 0.005;
   const handleRadius = 0.015;
   const handleLength = 0.2;
 
@@ -902,10 +985,8 @@ function StandardHandle(_ref) {
           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
-        ],
+        position: [0, -(0.08 + roseGapY), z + (z > 0 ? roseThickness : -roseThickness)],
+        castShadow: true,
         children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
           rotation: [Math.PI / 2, 0, 0],
           position: [0, 0.0075, 0],
@@ -979,6 +1060,11 @@ function StandardHandle(_ref) {
     })]
   });
 }
+
+// {
+//   /* MergedPlate */
+// }
+
 const MergedPlate = _ref2 => {
   let {
     plateMaterial,
@@ -986,10 +1072,6 @@ const MergedPlate = _ref2 => {
     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;
@@ -1017,13 +1099,17 @@ const MergedPlate = _ref2 => {
     })
   });
 };
+
+// {
+//   /* GlassHandle */
+// }
+
 function GlassHandle(_ref3) {
   let {
     position,
     doorDepthM,
     doorPivot
   } = _ref3;
-  // --- Dimensions ---
   const roseRadius = 0.035;
   const roseThickness = 0.005;
   const handleRadius = 0.015;
@@ -1119,6 +1205,10 @@ function GlassHandle(_ref3) {
     })]
   });
 }
+
+// {
+//   /* DoorHandle */
+// }
 function DoorHandle(_ref4) {
   let {
     bodyType,
@@ -1129,7 +1219,9 @@ function DoorHandle(_ref4) {
   } = _ref4;
   const isSingleGlass = ["SG8", "SG10", "SG12"].includes(bodyType);
   const handlePos = [handleX, handleHeightM, 0];
-  const frameType = useConfigurator().frameType;
+  const {
+    frameType
+  } = useConfigurator();
   return isSingleGlass ? /*#__PURE__*/jsxRuntime.jsx(GlassHandle, {
     position: [handleX, handleHeightM, -0.0024],
     doorDepthM: doorDepthM,
@@ -1141,6 +1233,11 @@ function DoorHandle(_ref4) {
     frameType: frameType
   });
 }
+
+// {
+//   /* GlassHinge */
+// }
+
 function GlassHinge(_ref5) {
   let {
     position,
@@ -1221,6 +1318,13 @@ function GlassHinge(_ref5) {
     })]
   });
 }
+// {
+//   /* DoorStopCutsProps */
+// }
+
+// {
+//   /* DoorStopCuts */
+// }
 function DoorStopCuts(_ref6) {
   let {
     visible,
@@ -1259,84 +1363,85 @@ function DoorStopCuts(_ref6) {
     })]
   });
 }
+
+// {
+//   /* DoorModelsProps */
+// }
+
+// {
+//   /* AllMaterialsType */
+// }
+
+// {
+//   /* DoorLeafProps */
+// }
+
+// {
+//   /* DoorModels */
+// }
+
 function DoorModels(_ref7) {
   let {
-    doorName
+    doorName,
+    materials: materialsProp,
+    doorPivot: doorPivotProp,
+    doorOpening: doorOpeningProp
   } = _ref7;
   const {
     is2D,
     totalWidth,
-    totalHeight,
     isFrameVisible,
     door,
+    setDoor,
     doorFrame,
     interiorFanlight,
     exteriorFanlight,
-    occulus,
     frontCoverPanel,
     backCoverPanel,
-    frontDoorPlane,
-    backDoorPlane,
     frameType,
-    bodyType,
-    exteriorFanlightType,
     glassVisible,
     glassDepth,
     handleParseCpid,
     isDoubleDoor,
-    materials
+    setMaterials
   } = useConfigurator();
   React.useEffect(() => {
     if (doorName) {
       handleParseCpid(doorName);
     }
   }, [doorName, handleParseCpid]);
-  const pers = React.useMemo(() => {
-    const dynamicMaterials = {};
-    for (const key in materials) {
-      if (Object.prototype.hasOwnProperty.call(materials, key)) {
-        const value = materials[key];
-        dynamicMaterials[key] = createMaterialFromProp(value);
-      }
+  React.useEffect(() => {
+    if (materialsProp) {
+      setMaterials(materialsProp);
     }
-    return dynamicMaterials;
-  }, [materials]);
-
-  // --- Material Logic ---
-  React.useMemo(() => placeholderMaterial, []);
-  const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterialforFrames, [pers]);
-  const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials.black, [pers]);
-  const doorStopMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || frameMaterial, [pers, frameMaterial]);
-  const interiorFanlightMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [pers]);
-  const exteriorFanlightMaterial = React.useMemo(() => {
-    switch (exteriorFanlightType) {
-      case "ALDGFL":
-      case "ALSGFL":
-        return availableMaterials.glass;
-      default:
-        return availableMaterials.metal;
+  }, [materialsProp, setMaterials]);
+  React.useEffect(() => {
+    if (doorName) handleParseCpid(doorName);
+  }, [doorName, handleParseCpid]);
+  React.useEffect(() => {
+    if (materialsProp) setMaterials(materialsProp);
+  }, [materialsProp, setMaterials]);
+  React.useEffect(() => {
+    if (doorPivotProp || doorOpeningProp) {
+      setDoor(prevDoor => _objectSpread2(_objectSpread2(_objectSpread2({}, prevDoor), doorPivotProp && {
+        doorPivot: doorPivotProp
+      }), doorOpeningProp && {
+        doorOpening: doorOpeningProp
+      }));
     }
-  }, [exteriorFanlightType]);
-  React.useMemo(() => availableMaterials.glass, []);
-  const glassInfillMaterial = React.useMemo(() => pers.D_FR_COLOR || availableMaterials.glass, [pers]);
-  React.useMemo(() => availableMaterials.aluminum, []);
-  const frontCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterial, [pers]);
-  const backCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterial, [pers]);
-  React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [pers]);
-  React.useMemo(() => pers.D_SRF_DECOR || placeholderMaterial, [pers]);
-  React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
-    color: "#1a1a1a",
-    roughness: 0.1
-  }), []);
+  }, [doorPivotProp, doorOpeningProp, setDoor]);
+
+  // --- Material Logic (Centralized in parent component) ---
+  const allMaterials = useDoorMaterials(materialsProp);
 
   // --- Dimension calculations ---
   const {
     doorWidth,
     doorHeight,
-    theDoorDepth,
-    doorPivot,
-    doorOpening
+    theDoorDepth
   } = door;
+  const doorPivot = doorPivotProp || door.doorPivot;
+  const doorOpening = doorOpeningProp || door.doorOpening;
   const {
     frameDepth,
     topThk,
@@ -1369,8 +1474,8 @@ function DoorModels(_ref7) {
   const sidesThkValue = parseInt(sidesThk) || 20;
 
   // Convert dimensions from mm to meters
-  const doorWidthM = doorWidth / 1000;
   const interiorFanlightHeightM = interiorFanlightHeight / 1000;
+  const doorWidthM = doorWidth / 1000;
   const totalOpeningHeightM = doorHeight / 1000;
   const doorDepthM = theDoorDepth / 1000;
   const frameDepthM = frameDepth / 1000;
@@ -1381,106 +1486,31 @@ function DoorModels(_ref7) {
   const exteriorFanlightDepthM = exteriorFanlightDepthValue / 1000;
   const doorStopWidthM = doorStopWidth / 1000;
   const doorStopDepthM = doorStopDepth / 1000;
-
-  // Architrave Dimensions
   const architraveProfileM = architraveWidth / 1000;
   const architraveDepthM = architraveDepth / 1000;
-
-  // Gasket Dimensions
   const gasketWidthM = gasketWidth / 1000;
   const gasketDepthM = gasketDepth / 1000;
-  const doorStopOffsetValue = parseInt(doorStopOffset);
-  const doorStopOffsetFromEdgeM = doorStopOffsetValue / 1000;
-  const notchDepthValue = parseInt(notchDepth) || 40;
-  const notchWidthValue = parseInt(notchWidth) || 20;
-  const notchWidthM = notchWidthValue / 1000;
-  const notchDepthM = notchDepthValue / 1000;
+  const doorStopOffsetFromEdgeM = parseInt(doorStopOffset) / 1000;
+  const notchWidthM = (parseInt(notchWidth) || 20) / 1000;
+  const notchDepthM = (parseInt(notchDepth) || 40) / 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 secondDoorStopWidthM = secondDoorStopWidth / 1000;
   const secondDoorStopDepthM = secondDoorStopDepth / 1000;
   const secondDoorStopPositionZ = isOpeningIn ? frameDepthM / 2 - secondDoorStopDepthM / 2 : -frameDepthM / 2 + secondDoorStopDepthM / 2;
-
-  // 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(() => {
     if (frameType === "WF_FLI") {
-      if (isOpeningIn) {
-        return frameDepthM / 2 - doorDepthM / 2;
-      } else {
-        return -frameDepthM / 2 + doorDepthM / 2;
-      }
+      return isOpeningIn ? frameDepthM / 2 - doorDepthM / 2 : -frameDepthM / 2 + doorDepthM / 2;
     }
-    if (frameType === "WDGF_WDG100" || frameType === "WF_100") {
+    if (["WDGF_WDG100", "WF_100"].includes(frameType)) {
       return 0;
-    } else {
-      if (isOpeningIn) {
-        const gasketBackFaceZ = gasketZPosition - gasketDepthM / 2;
-        return gasketBackFaceZ - doorDepthM / 2;
-      } else {
-        const gasketFrontFaceZ = gasketZPosition + gasketDepthM / 2;
-        return gasketFrontFaceZ + doorDepthM / 2;
-      }
     }
+    const gasketFaceZ = isOpeningIn ? gasketZPosition - gasketDepthM / 2 : gasketZPosition + gasketDepthM / 2;
+    return isOpeningIn ? gasketFaceZ - doorDepthM / 2 : gasketFaceZ + doorDepthM / 2;
   }, [isOpeningIn, gasketZPosition, gasketDepthM, doorDepthM, frameType, frameDepthM]);
   const GlassPanelDepthM = glassDepth / 1000;
-  const exteriorFanlightZPosition = exteriorFanlightType === "ALSGFL" ? 0 // Center it
-  : isOpeningIn ? -frameDepthM / 2 + exteriorFanlightDepthM / 2 : frameDepthM / 2 - exteriorFanlightDepthM / 2;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const leftGlass_Z = -frameDepthM / 2 + GlassPanelDepthM / 2 - GlassPanelDepthM;
-  const rightGlass_Z = frameDepthM / 2 - GlassPanelDepthM / 2 + GlassPanelDepthM;
-  const directionMultiplier = doorOpening === "in" ? 1 : -1;
-  three.useSpring({
-    rotation: isOpen ? [0, (doorPivot === "left" ? Math.PI / 2 : -Math.PI / 2) * directionMultiplier, 0] : [0, 0, 0],
-    config: {
-      mass: 1,
-      tension: 100,
-      friction: 20
-    }
-  });
-  const totalFrameWidth = totalOpeningWidthM + sidesFrameWidthM * 2;
-  const totalFrameHeightM = totalOpeningHeightM + topFrameWidthM;
-  const yCenteringOffset = -topFrameWidthM / 2;
-  const sideFrameCenterY = topFrameWidthM / 2;
-  const interiorFanlightYPosition = totalOpeningHeightM / 2 - interiorFanlightHeightM / 2;
-  const topFrameCenterY = totalOpeningHeightM / 2 + topFrameWidthM / 2;
-  const topOfFrameY = topFrameCenterY + topFrameWidthM / 2;
-  const exteriorFanlightYPosition = topOfFrameY + exteriorFanlightHeightM / 2;
-  const frontArchitraveZ = frameDepthM / 2 + architraveDepthM / 2;
-  const backArchitraveZ = -frameDepthM / 2 - architraveDepthM / 2;
-  const sideArchitraveHeight = totalOpeningHeightM;
-  const sideArchitraveCenterY = 0;
-  const leftArchitraveX = -totalOpeningWidthM / 2 - architraveProfileM / 2;
-  const rightArchitraveX = totalOpeningWidthM / 2 + architraveProfileM / 2;
-  const topArchitraveY = totalOpeningHeightM / 2 + architraveProfileM / 2;
-  const topArchitraveWidth = totalOpeningWidthM + 2 * architraveProfileM;
-  const topGasketYPosition = totalOpeningHeightM / 2 - doorStopWidthM + gasketWidthM / 2;
-  const leftGasketXPosition = -totalOpeningWidthM / 2 + doorStopWidthM - gasketWidthM / 2;
-  const rightGasketXPosition = totalOpeningWidthM / 2 - doorStopWidthM + gasketWidthM / 2;
-
-  // --- Second Gasket ---
-
-  const secondTopGasketYPosition = totalOpeningHeightM / 2 - secondDoorStopWidthM + gasketWidthM / 2;
-  const secondLeftGasketXPosition = -totalOpeningWidthM / 2 + secondDoorStopWidthM - gasketWidthM / 2;
-  const secondRightGasketXPosition = totalOpeningWidthM / 2 - secondDoorStopWidthM + gasketWidthM / 2;
-  const isGlassDoor = React.useMemo(() => ["SG8", "SG10", "SG12"].includes(bodyType), [bodyType]);
-  const pivotNewPosition = React.useMemo(() => {
-    if (initialDoorHeight.current === null || initialDoorHeight.current === 0) {
-      return 0;
-    }
-    return (doorHeight - initialDoorHeight.current) / 2 / 1000;
-  }, [doorHeight]);
-  React.useMemo(() => {
-    if (isGlassDoor) return false;
-    if (!isFrameVisible) return false;
-    const invisibleFrameTypes = ["WDGF_WDG100", "WF_100", "WF_FLI"];
-    if (invisibleFrameTypes.includes(frameType)) {
-      return false;
-    }
-    return true;
-  }, [isFrameVisible, frameType, isGlassDoor]);
   const doorInstances = React.useMemo(() => {
     if (isDoubleDoor) {
       return [{
@@ -1499,6 +1529,31 @@ function DoorModels(_ref7) {
       x: 0
     }];
   }, [isDoubleDoor, doorWidthM, doorPivot]);
+  const pivotNewPosition = React.useMemo(() => {
+    if (!initialDoorHeight.current || initialDoorHeight.current === 0) return 0;
+    return (doorHeight - initialDoorHeight.current) / 2 / 1000;
+  }, [doorHeight]);
+
+  // --- Centering & Positioning ---
+  const yCenteringOffset = -topFrameWidthM / 2;
+  const sideFrameCenterY = topFrameWidthM / 2;
+  const interiorFanlightYPosition = totalOpeningHeightM / 2 - interiorFanlightHeightM / 2;
+  const topFrameCenterY = totalOpeningHeightM / 2 + topFrameWidthM / 2;
+  const exteriorFanlightYPosition = topFrameCenterY + topFrameWidthM / 2 + exteriorFanlightHeightM / 2;
+  const frontArchitraveZ = frameDepthM / 2 + architraveDepthM / 2;
+  const backArchitraveZ = -frameDepthM / 2 - architraveDepthM / 2;
+  const leftArchitraveX = -totalOpeningWidthM / 2 - architraveProfileM / 2;
+  const rightArchitraveX = totalOpeningWidthM / 2 + architraveProfileM / 2;
+  const topArchitraveY = totalOpeningHeightM / 2 + architraveProfileM / 2;
+  const topArchitraveWidth = totalOpeningWidthM + 2 * architraveProfileM;
+  const topGasketYPosition = totalOpeningHeightM / 2 - doorStopWidthM + gasketWidthM / 2;
+  const leftGasketXPosition = -totalOpeningWidthM / 2 + doorStopWidthM - gasketWidthM / 2;
+  const rightGasketXPosition = totalOpeningWidthM / 2 - doorStopWidthM + gasketWidthM / 2;
+  const secondTopGasketYPosition = totalOpeningHeightM / 2 - secondDoorStopWidthM + gasketWidthM / 2;
+  const secondLeftGasketXPosition = -totalOpeningWidthM / 2 + secondDoorStopWidthM - gasketWidthM / 2;
+  const secondRightGasketXPosition = totalOpeningWidthM / 2 - secondDoorStopWidthM + gasketWidthM / 2;
+  const leftGlass_Z = -frameDepthM / 2 + GlassPanelDepthM / 2 - GlassPanelDepthM;
+  const rightGlass_Z = frameDepthM / 2 - GlassPanelDepthM / 2 + GlassPanelDepthM;
   if (is2D) {
     return /*#__PURE__*/jsxRuntime.jsx("group", {
       "position-y": yCenteringOffset + 0.1,
@@ -1520,23 +1575,23 @@ function DoorModels(_ref7) {
         children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
           position: [0, topArchitraveY, 0],
           castShadow: true,
-          material: frontCoverPanelMaterial,
+          material: allMaterials.frontCoverPanelMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
             args: [topArchitraveWidth, architraveProfileM, architraveDepthM]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-          position: [leftArchitraveX, sideArchitraveCenterY, 0],
+          position: [leftArchitraveX, 0, 0],
           castShadow: true,
-          material: frontCoverPanelMaterial,
+          material: allMaterials.frontCoverPanelMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-            args: [architraveProfileM, sideArchitraveHeight, architraveDepthM]
+            args: [architraveProfileM, totalOpeningHeightM, architraveDepthM]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-          position: [rightArchitraveX, sideArchitraveCenterY, 0],
+          position: [rightArchitraveX, 0, 0],
           castShadow: true,
-          material: frontCoverPanelMaterial,
+          material: allMaterials.frontCoverPanelMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-            args: [architraveProfileM, sideArchitraveHeight, architraveDepthM]
+            args: [architraveProfileM, totalOpeningHeightM, architraveDepthM]
           })
         })]
       }), backCoverPanel.visible && /*#__PURE__*/jsxRuntime.jsxs("group", {
@@ -1544,31 +1599,31 @@ function DoorModels(_ref7) {
         children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
           position: [0, topArchitraveY, 0],
           castShadow: true,
-          material: backCoverPanelMaterial,
+          material: allMaterials.backCoverPanelMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
             args: [topArchitraveWidth, architraveProfileM, architraveDepthM]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-          position: [leftArchitraveX, sideArchitraveCenterY, 0],
+          position: [leftArchitraveX, 0, 0],
           castShadow: true,
-          material: backCoverPanelMaterial,
+          material: allMaterials.backCoverPanelMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-            args: [architraveProfileM, sideArchitraveHeight, architraveDepthM]
+            args: [architraveProfileM, totalOpeningHeightM, architraveDepthM]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
-          position: [rightArchitraveX, sideArchitraveCenterY, 0],
+          position: [rightArchitraveX, 0, 0],
           castShadow: true,
-          material: backCoverPanelMaterial,
+          material: allMaterials.backCoverPanelMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-            args: [architraveProfileM, sideArchitraveHeight, architraveDepthM]
+            args: [architraveProfileM, totalOpeningHeightM, architraveDepthM]
           })
         })]
       }), exteriorFanlight.visible && /*#__PURE__*/jsxRuntime.jsx("mesh", {
-        position: [0, exteriorFanlightYPosition, exteriorFanlightZPosition],
+        position: [0, exteriorFanlightYPosition, 0],
         castShadow: true,
-        material: exteriorFanlightMaterial,
+        material: allMaterials.exteriorFanlightMaterial,
         children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-          args: [totalFrameWidth, exteriorFanlightHeightM, exteriorFanlightDepthM]
+          args: [totalOpeningWidthM + sidesFrameWidthM * 2, exteriorFanlightHeightM, exteriorFanlightDepthM]
         })
       }), isFrameVisible && /*#__PURE__*/jsxRuntime.jsxs("group", {
         children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
@@ -1578,13 +1633,13 @@ function DoorModels(_ref7) {
             useGroups: true,
             children: [/*#__PURE__*/jsxRuntime.jsx(csg.Base, {
               name: "frame-base",
-              material: frameMaterial,
+              material: allMaterials.frameMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [totalOpeningWidthM, topFrameWidthM, frameDepthM]
               })
             }), !["MXF_40", "MXF_50", "MXCAF_40", "MXCAF_50"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx(csg.Subtraction, {
               name: "cut-exterior",
-              material: frameMaterial,
+              material: allMaterials.frameMaterial,
               position: [0, notchposition, 0],
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [totalOpeningWidthM + 0.01, notchWidthM, notchDepthM]
@@ -1598,16 +1653,16 @@ function DoorModels(_ref7) {
             useGroups: true,
             children: [/*#__PURE__*/jsxRuntime.jsx(csg.Base, {
               name: "frame-base",
-              material: frameMaterial,
+              material: allMaterials.frameMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                args: [sidesFrameWidthM, totalFrameHeightM, frameDepthM]
+                args: [sidesFrameWidthM, totalOpeningHeightM + topFrameWidthM, frameDepthM]
               })
             }), !["MXF_40", "MXF_50", "MXCAF_40", "MXCAF_50"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx(csg.Subtraction, {
               name: "cut-exterior",
-              material: frameMaterial,
+              material: allMaterials.frameMaterial,
               position: [-notchposition, 0, 0],
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                args: [notchWidthM, totalFrameHeightM + 0.01, notchDepthM]
+                args: [notchWidthM, totalOpeningHeightM + topFrameWidthM + 0.01, notchDepthM]
               })
             })]
           })
@@ -1618,37 +1673,37 @@ function DoorModels(_ref7) {
             useGroups: true,
             children: [/*#__PURE__*/jsxRuntime.jsx(csg.Base, {
               name: "frame-base",
-              material: frameMaterial,
+              material: allMaterials.frameMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                args: [sidesFrameWidthM, totalFrameHeightM, frameDepthM]
+                args: [sidesFrameWidthM, totalOpeningHeightM + topFrameWidthM, frameDepthM]
               })
             }), !["MXF_40", "MXF_50", "MXCAF_40", "MXCAF_50"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx(csg.Subtraction, {
               name: "cut-exterior",
-              material: frameMaterial,
+              material: allMaterials.frameMaterial,
               position: [notchposition, 0, 0],
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                args: [notchWidthM, totalFrameHeightM + 0.01, notchDepthM]
+                args: [notchWidthM, totalOpeningHeightM + topFrameWidthM + 0.01, notchDepthM]
               })
             })]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
           castShadow: true,
           position: [0, totalOpeningHeightM / 2 - doorStopWidthM / 2, doorStopPositionZ],
-          material: doorStopMaterial,
+          material: allMaterials.doorStopMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
             args: [totalOpeningWidthM, doorStopWidthM, doorStopDepthM]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
           castShadow: true,
           position: [-totalOpeningWidthM / 2 + doorStopWidthM / 2, 0, doorStopPositionZ],
-          material: doorStopMaterial,
+          material: allMaterials.doorStopMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
             args: [doorStopWidthM, totalOpeningHeightM, doorStopDepthM]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
           castShadow: true,
           position: [totalOpeningWidthM / 2 - doorStopWidthM / 2, 0, doorStopPositionZ],
-          material: doorStopMaterial,
+          material: allMaterials.doorStopMaterial,
           children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
             args: [doorStopWidthM, totalOpeningHeightM, doorStopDepthM]
           })
@@ -1656,45 +1711,45 @@ function DoorModels(_ref7) {
           children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
             castShadow: true,
             position: [0, topGasketYPosition, gasketZPosition],
-            material: gasketMaterial,
+            material: allMaterials.gasketMaterial,
             children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
               args: [totalOpeningWidthM - 0.03, gasketWidthM + 0.005, gasketDepthM]
             })
           }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
             castShadow: true,
             position: [leftGasketXPosition - 0.005, -0.005, gasketZPosition],
-            material: gasketMaterial,
+            material: allMaterials.gasketMaterial,
             children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
               args: [gasketWidthM + 0.005, totalOpeningHeightM - 0.02, gasketDepthM]
             })
           }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
             castShadow: true,
             position: [rightGasketXPosition + 0.005, -0.005, gasketZPosition],
-            material: gasketMaterial,
+            material: allMaterials.gasketMaterial,
             children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
               args: [gasketWidthM + 0.005, totalOpeningHeightM - 0.02, gasketDepthM]
             })
           })]
-        }), (frameType === "WDGF_WDG100" || frameType === "WF_100" || frameType === "WF_FLI") && /*#__PURE__*/jsxRuntime.jsxs("group", {
+        }), ["WDGF_WDG100", "WF_100", "WF_FLI"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsxs("group", {
           children: [/*#__PURE__*/jsxRuntime.jsxs("group", {
             children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
               castShadow: true,
               position: [0, totalOpeningHeightM / 2 - secondDoorStopWidthM / 2, secondDoorStopPositionZ],
-              material: doorStopMaterial,
+              material: allMaterials.doorStopMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [totalOpeningWidthM, secondDoorStopWidthM, secondDoorStopDepthM]
               })
             }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
               castShadow: true,
               position: [-totalOpeningWidthM / 2 + secondDoorStopWidthM / 2, 0, secondDoorStopPositionZ],
-              material: doorStopMaterial,
+              material: allMaterials.doorStopMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [secondDoorStopWidthM, totalOpeningHeightM, secondDoorStopDepthM]
               })
             }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
               castShadow: true,
               position: [totalOpeningWidthM / 2 - secondDoorStopWidthM / 2, 0, secondDoorStopPositionZ],
-              material: doorStopMaterial,
+              material: allMaterials.doorStopMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [secondDoorStopWidthM, totalOpeningHeightM, secondDoorStopDepthM]
               })
@@ -1703,77 +1758,77 @@ function DoorModels(_ref7) {
             children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
               castShadow: true,
               position: [0, secondTopGasketYPosition - 0.005, secondGasketZPosition],
-              material: gasketMaterial,
+              material: allMaterials.gasketMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [totalOpeningWidthM - 0.03, gasketWidthM + 0.005, gasketDepthM]
               })
             }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
               castShadow: true,
               position: [secondLeftGasketXPosition - 0.005, -0.01, secondGasketZPosition],
-              material: gasketMaterial,
+              material: allMaterials.gasketMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [gasketWidthM + 0.005, totalOpeningHeightM - 0.04, gasketDepthM]
               })
             }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
               castShadow: true,
               position: [secondRightGasketXPosition + 0.005, -0.01, secondGasketZPosition],
-              material: gasketMaterial,
+              material: allMaterials.gasketMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [gasketWidthM + 0.004, totalOpeningHeightM - 0.04, gasketDepthM]
               })
             })]
           }), glassVisible && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [/*#__PURE__*/jsxRuntime.jsxs("group", {
-              children: [(frameType === "WDGF_WDG100" || frameType === "WF_100") && /*#__PURE__*/jsxRuntime.jsx("mesh", {
+              children: [["WDGF_WDG100", "WF_100"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [0, topFrameCenterY - secondDoorStopWidthM / 2, leftGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                   args: [totalOpeningWidthM - 2 * secondDoorStopWidthM, topFrameWidthM + secondDoorStopWidthM, GlassPanelDepthM]
                 })
-              }), frameType !== "WDGF_WDG100" && frameType !== "WF_100" && /*#__PURE__*/jsxRuntime.jsx("mesh", {
+              }), !["WDGF_WDG100", "WF_100"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [0, topFrameCenterY, leftGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                   args: [totalOpeningWidthM - 2 * secondDoorStopWidthM, topFrameWidthM, GlassPanelDepthM]
                 })
               }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [-totalOpeningWidthM / 2 - sidesFrameWidthM / 2 + secondDoorStopWidthM / 2, sideFrameCenterY, leftGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [sidesFrameWidthM + secondDoorStopWidthM, totalFrameHeightM, GlassPanelDepthM]
+                  args: [sidesFrameWidthM + secondDoorStopWidthM, totalOpeningHeightM + topFrameWidthM, GlassPanelDepthM]
                 })
               }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [totalOpeningWidthM / 2 + sidesFrameWidthM / 2 - secondDoorStopWidthM / 2, sideFrameCenterY, leftGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [sidesFrameWidthM + secondDoorStopWidthM, totalFrameHeightM, GlassPanelDepthM]
+                  args: [sidesFrameWidthM + secondDoorStopWidthM, totalOpeningHeightM + topFrameWidthM, GlassPanelDepthM]
                 })
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("group", {
               children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [0, topFrameCenterY, rightGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                   args: [totalOpeningWidthM, topFrameWidthM, GlassPanelDepthM]
                 })
               }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [-totalOpeningWidthM / 2 - sidesFrameWidthM / 2, sideFrameCenterY, rightGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [sidesFrameWidthM, totalFrameHeightM, GlassPanelDepthM]
+                  args: [sidesFrameWidthM, totalOpeningHeightM + topFrameWidthM, GlassPanelDepthM]
                 })
               }), /*#__PURE__*/jsxRuntime.jsx("mesh", {
                 castShadow: true,
                 position: [totalOpeningWidthM / 2 + sidesFrameWidthM / 2, sideFrameCenterY, rightGlass_Z],
-                material: glassInfillMaterial,
+                material: allMaterials.glassInfillMaterial,
                 children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [sidesFrameWidthM, totalFrameHeightM, GlassPanelDepthM]
+                  args: [sidesFrameWidthM, totalOpeningHeightM + topFrameWidthM, GlassPanelDepthM]
                 })
               })]
             })]
@@ -1782,23 +1837,43 @@ function DoorModels(_ref7) {
       }), interiorFanlight.visible && /*#__PURE__*/jsxRuntime.jsx("mesh", {
         position: [0, interiorFanlightYPosition, doorCenterZ],
         castShadow: true,
-        material: interiorFanlightMaterial,
+        material: allMaterials.interiorFanlightMaterial,
         children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
           args: [totalOpeningWidthM, interiorFanlightHeightM, doorDepthM]
         })
       }), doorInstances.map(instance => /*#__PURE__*/jsxRuntime.jsx(DoorLeaf, {
         pivot: instance.pivot,
-        xOffset: instance.x
+        xOffset: instance.x,
+        materials: allMaterials
       }, instance.key))]
     })
   });
 }
+
+// {
+//   /* DoorLeaf */
+// }
 function DoorLeaf(_ref8) {
   let {
     pivot,
-    xOffset
+    xOffset,
+    materials
   } = _ref8;
+  // Destructure materials from props.
   const {
+    doorMaterial,
+    glassInfillMaterial,
+    hingeBodyMaterial,
+    gasketMaterial,
+    occulusInfillMaterial,
+    frontDoorPlaneMaterial,
+    backDoorPlaneMaterial,
+    hingeAccentMaterial
+  } = materials;
+
+  // Get NON-MATERIAL state from the context.
+  const {
+    isFrameVisible,
     door,
     doorFrame,
     interiorFanlight,
@@ -1809,33 +1884,8 @@ function DoorLeaf(_ref8) {
     bodyType,
     exteriorFanlightType,
     glassVisible,
-    materials
+    glassDepth
   } = useConfigurator();
-  const pers = React.useMemo(() => {
-    const dynamicMaterials = {};
-    for (const key in materials) {
-      if (Object.prototype.hasOwnProperty.call(materials, key)) {
-        const value = materials[key];
-        dynamicMaterials[key] = createMaterialFromProp(value);
-      }
-    }
-    return dynamicMaterials;
-  }, [materials]);
-
-  // --- Material Logic ---
-  const doorMaterial = React.useMemo(() => placeholderMaterial, []);
-  const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterialforFrames, [pers]);
-  const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials.black, [pers]);
-  React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || frameMaterial, [pers, frameMaterial]);
-  const occulusInfillMaterial = React.useMemo(() => availableMaterials.glass, []);
-  const glassInfillMaterial = React.useMemo(() => pers.D_FR_COLOR || availableMaterials.glass, [pers]);
-  const hingeBodyMaterial = React.useMemo(() => availableMaterials.aluminum, []);
-  const frontDoorPlaneMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [pers]);
-  const backDoorPlaneMaterial = React.useMemo(() => pers.D_SRF_DECOR || placeholderMaterial, [pers]);
-  const hingeAccentMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
-    color: "#1a1a1a",
-    roughness: 0.1
-  }), []);
 
   // --- Dimension calculations ---
   const {
@@ -1846,27 +1896,21 @@ function DoorLeaf(_ref8) {
   } = door;
   const {
     frameDepth,
+    topThk,
+    sidesThk,
     doorStopWidth,
     doorStopDepth,
     doorStopOffset,
-    gasketWidth,
     gasketDepth,
     secondDoorStopWidth,
     secondDoorStopDepth
   } = doorFrame;
   const initialDoorHeight = React.useRef(null);
-  const initialDoorWidth = React.useRef(null);
   React.useEffect(() => {
     if (doorHeight > 0 && initialDoorHeight.current === null) {
       initialDoorHeight.current = doorHeight;
     }
-    if (doorWidth > 0 && initialDoorWidth.current === null) {
-      initialDoorWidth.current = doorWidth;
-    }
-  }, [doorHeight, doorWidth]);
-  const {
-    height: interiorFanlightHeightValue
-  } = interiorFanlight;
+  }, [doorHeight]);
   const {
     x1: occulusX1,
     x2: occulusX2,
@@ -1874,8 +1918,9 @@ function DoorLeaf(_ref8) {
     y2: occulusY2,
     depth: occulusInfillDepth
   } = occulus;
-  const interiorFanlightHeight = interiorFanlight.visible ? interiorFanlightHeightValue : 0;
+  const interiorFanlightHeight = interiorFanlight.visible ? interiorFanlight.height : 0;
   const mainDoorHeight = doorHeight - interiorFanlightHeight;
+  const sidesThkValue = parseInt(sidesThk) || 20;
 
   // Convert dimensions from mm to meters
   const doorWidthM = doorWidth / 1000;
@@ -1883,6 +1928,7 @@ function DoorLeaf(_ref8) {
   const totalOpeningHeightM = doorHeight / 1000;
   const doorDepthM = theDoorDepth / 1000;
   const frameDepthM = frameDepth / 1000;
+  const sidesFrameWidthM = sidesThkValue / 1000;
   const occulusX1M = occulusX1 / 1000;
   const occulusX2M = occulusX2 / 1000;
   const occulusY1M = occulusY1 / 1000;
@@ -1891,8 +1937,7 @@ function DoorLeaf(_ref8) {
   const doorStopWidthM = doorStopWidth / 1000;
   const doorStopDepthM = doorStopDepth / 1000;
   const gasketDepthM = gasketDepth / 1000;
-  const doorStopOffsetValue = parseInt(doorStopOffset);
-  const doorStopOffsetFromEdgeM = doorStopOffsetValue / 1000;
+  const doorStopOffsetFromEdgeM = parseInt(doorStopOffset) / 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]);
@@ -1901,25 +1946,15 @@ function DoorLeaf(_ref8) {
   const secondDoorStopPositionZ = isOpeningIn ? frameDepthM / 2 - secondDoorStopDepthM / 2 : -frameDepthM / 2 + secondDoorStopDepthM / 2;
   const doorCenterZ = React.useMemo(() => {
     if (frameType === "WF_FLI") {
-      if (isOpeningIn) {
-        return frameDepthM / 2 - doorDepthM / 2;
-      } else {
-        return -frameDepthM / 2 + doorDepthM / 2;
-      }
+      return isOpeningIn ? frameDepthM / 2 - doorDepthM / 2 : -frameDepthM / 2 + doorDepthM / 2;
     }
-    if (frameType === "WDGF_WDG100" || frameType === "WF_100") {
+    if (["WDGF_WDG100", "WF_100"].includes(frameType)) {
       return 0;
-    } else {
-      if (isOpeningIn) {
-        const gasketBackFaceZ = gasketZPosition - gasketDepthM / 2;
-        return gasketBackFaceZ - doorDepthM / 2;
-      } else {
-        const gasketFrontFaceZ = gasketZPosition + gasketDepthM / 2;
-        return gasketFrontFaceZ + doorDepthM / 2;
-      }
     }
+    const gasketFaceZ = isOpeningIn ? gasketZPosition - gasketDepthM / 2 : gasketZPosition + gasketDepthM / 2;
+    return isOpeningIn ? gasketFaceZ - doorDepthM / 2 : gasketFaceZ + doorDepthM / 2;
   }, [isOpeningIn, gasketZPosition, gasketDepthM, doorDepthM, frameType, frameDepthM]);
-  const GlassPanelDepthM = 8 / 1000;
+  const GlassPanelDepthM = glassDepth / 1000;
   const frontGlassOffsetZ = doorDepthM / 2 + GlassPanelDepthM / 2;
   const backGlassOffsetZ = -doorDepthM / 2 - GlassPanelDepthM / 2;
   const occulusWidthM = doorWidthM - occulusX1M - occulusX2M;
@@ -1928,13 +1963,11 @@ function DoorLeaf(_ref8) {
   const occulusPositionYM = (occulusY2M - occulusY1M) / 2;
   const [isOpen, setIsOpen] = React.useState(false);
   const hingeSideX = pivot === "left" ? -doorWidthM / 2 : doorWidthM / 2;
+
+  // --- PIVOT ---
   const hingeZ = React.useMemo(() => {
     if (frameType === "WF_FLI") {
-      if (isOpeningIn) {
-        return doorCenterZ - doorDepthM / 2;
-      } else {
-        return doorCenterZ + doorDepthM / 2;
-      }
+      return isOpeningIn ? doorCenterZ - doorDepthM / 2 : doorCenterZ + doorDepthM / 2;
     }
     return isOpeningIn ? -frameDepthM / 2 : frameDepthM / 2;
   }, [frameType, isOpeningIn, doorCenterZ, doorDepthM, frameDepthM]);
@@ -1952,6 +1985,8 @@ function DoorLeaf(_ref8) {
   });
   const handleClick = () => setIsOpen(!isOpen);
   const doorYPosition = -totalOpeningHeightM / 2 + mainDoorHeightM / 2;
+
+  // Handle positioning logic
   const handleCenterYFromDoorBottom = 1.0;
   const safeHandleY = Math.min(Math.max(handleCenterYFromDoorBottom, 0.25), mainDoorHeightM - 0.25);
   const handleHeightM = -mainDoorHeightM / 2 + safeHandleY;
@@ -1965,75 +2000,33 @@ function DoorLeaf(_ref8) {
     const latchMarginM = 0.08;
     handleX = nonHingeSideX + (pivot === "left" ? -latchMarginM : latchMarginM);
   }
+
+  // Hinge dimension calculations
   const hingeTotalHeightM = 120 / 1000;
   const hingeRadiusM = 8 / 1000;
   const capHeightM = 4 / 1000;
   const separatorHeightM = 4 / 1000;
   const barrelPartHeight = (hingeTotalHeightM - capHeightM * 2 - separatorHeightM) / 2;
   const isGlassDoor = React.useMemo(() => ["SG8", "SG10", "SG12"].includes(bodyType), [bodyType]);
+
+  // Hinge positioning logic
   const standardHingeYPositions = React.useMemo(() => {
     const numHinges = 4;
     const topMargin = 180 / 1000;
     const bottomMargin = 180 / 1000;
     const availableHeight = mainDoorHeightM - topMargin - bottomMargin;
     const spacing = availableHeight / (numHinges - 1);
-    const positions = [];
-    for (let i = 0; i < numHinges; i++) {
-      positions.push(mainDoorHeightM / 2 - topMargin - i * spacing);
-    }
-    return positions;
+    return Array.from({
+      length: numHinges
+    }, (_, i) => mainDoorHeightM / 2 - topMargin - i * spacing);
   }, [mainDoorHeightM]);
   const glassHingeYPositions = React.useMemo(() => {
-    const topMargin = 250 / 1000;
-    const secondTopMargin = 450 / 1000;
-    const bottomMargin = 250 / 1000;
-    const top = mainDoorHeightM / 2 - topMargin;
-    const secondTop = mainDoorHeightM / 2 - secondTopMargin;
-    const bottom = -mainDoorHeightM / 2 + bottomMargin;
-    return [top, secondTop, bottom];
+    return [mainDoorHeightM / 2 - 250 / 1000, mainDoorHeightM / 2 - 450 / 1000, -mainDoorHeightM / 2 + 250 / 1000];
   }, [mainDoorHeightM]);
   const isStandardHingeVisible = React.useMemo(() => {
-    if (isGlassDoor) return false;
-    const invisibleFrameTypes = ["WDGF_WDG100", "WF_100", "WF_FLI"];
-    if (invisibleFrameTypes.includes(frameType)) {
-      return false;
-    }
-    return true;
-  }, [frameType, isGlassDoor]);
-
-  // --- DYNAMIC TEXTURE MATERIALS ---
-  React.useEffect(() => {
-    // This effect runs when the material or dimensions change
-    if (frontDoorPlaneMaterial.map) {
-      const texture = frontDoorPlaneMaterial.map;
-
-      // Ensure the texture repeats
-      texture.wrapS = THREE__namespace.RepeatWrapping;
-      texture.wrapT = THREE__namespace.RepeatWrapping;
-      const initialHeightM = initialDoorHeight.current ? initialDoorHeight.current / 1000 : mainDoorHeightM;
-      const initialWidthM = initialDoorWidth.current ? initialDoorWidth.current / 1000 : doorWidthM;
-      const repeatY = initialHeightM > 0 ? mainDoorHeightM / initialHeightM : 1;
-      const repeatX = initialWidthM > 0 ? doorWidthM / initialWidthM : 1;
-      texture.repeat.set(repeatX, repeatY * 2);
-
-      // Tell Three.js the texture needs to be updated
-      texture.needsUpdate = true;
-    }
-  }, [frontDoorPlaneMaterial, mainDoorHeightM, doorWidthM]);
-  React.useEffect(() => {
-    // Same logic for the back material
-    if (backDoorPlaneMaterial.map) {
-      const texture = backDoorPlaneMaterial.map;
-      texture.wrapS = THREE__namespace.RepeatWrapping;
-      texture.wrapT = THREE__namespace.RepeatWrapping;
-      const initialHeightM = initialDoorHeight.current ? initialDoorHeight.current / 1000 : mainDoorHeightM;
-      const initialWidthM = initialDoorWidth.current ? initialDoorWidth.current / 1000 : doorWidthM;
-      const repeatY = initialHeightM > 0 ? mainDoorHeightM / initialHeightM : 1;
-      const repeatX = initialWidthM > 0 ? doorWidthM / initialWidthM : 1;
-      texture.repeat.set(repeatX, repeatY * 2);
-      texture.needsUpdate = true;
-    }
-  }, [backDoorPlaneMaterial, mainDoorHeightM, doorWidthM]);
+    if (isGlassDoor || !isFrameVisible) return false;
+    return !["WDGF_WDG100", "WF_100", "WF_FLI"].includes(frameType);
+  }, [isFrameVisible, frameType, isGlassDoor]);
   return /*#__PURE__*/jsxRuntime.jsxs("group", {
     "position-x": xOffset,
     children: [isStandardHingeVisible && standardHingeYPositions.map((y, index) => /*#__PURE__*/jsxRuntime.jsxs("group", {
@@ -2083,10 +2076,10 @@ function DoorLeaf(_ref8) {
             args: [hingeRadiusM, hingeRadiusM, separatorHeightM, 32]
           })
         })]
-      }, "door-hinge-".concat(index))), isGlassDoor && glassHingeYPositions.map((y, index) => /*#__PURE__*/jsxRuntime.jsx(GlassHinge, {
+      }, "door-hinge-".concat(index))), isGlassDoor && isFrameVisible && glassHingeYPositions.map((y, index) => /*#__PURE__*/jsxRuntime.jsx(GlassHinge, {
         position: [0, y, doorOffsetZ + 0.0001],
         pivot: pivot,
-        frameSideWidth: 0,
+        frameSideWidth: sidesFrameWidthM,
         doorDepthM: doorDepthM,
         material: hingeBodyMaterial,
         gasketMaterial: gasketMaterial
@@ -2104,7 +2097,7 @@ function DoorLeaf(_ref8) {
                 args: [doorWidthM, mainDoorHeightM, doorDepthM]
               })
             }), /*#__PURE__*/jsxRuntime.jsx(DoorStopCuts, {
-              visible: frameType === "WDGF_WDG100" || frameType === "WF_100" || frameType === "WF_FLI",
+              visible: ["WDGF_WDG100", "WF_100", "WF_FLI"].includes(frameType),
               width: doorWidthM,
               height: totalOpeningHeightM,
               stopWidth: doorStopWidthM,
@@ -2114,7 +2107,7 @@ function DoorLeaf(_ref8) {
               material: doorMaterial,
               setName: "1"
             }), /*#__PURE__*/jsxRuntime.jsx(DoorStopCuts, {
-              visible: frameType === "WDGF_WDG100" || frameType === "WF_100" || frameType === "WF_FLI",
+              visible: ["WDGF_WDG100", "WF_100", "WF_FLI"].includes(frameType),
               width: doorWidthM,
               height: totalOpeningHeightM,
               stopWidth: secondDoorStopWidthM,
@@ -2123,37 +2116,36 @@ function DoorLeaf(_ref8) {
               centerZ: doorCenterZ,
               material: doorMaterial,
               setName: "2"
-            }), glassVisible && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
-                position: [0, 0, frontGlassOffsetZ],
-                castShadow: true,
-                material: glassInfillMaterial,
-                children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [doorWidthM, mainDoorHeightM, GlassPanelDepthM]
-                })
-              }), frameType !== "WDGF_WDG100" && frameType !== "WF_100" && /*#__PURE__*/jsxRuntime.jsx("mesh", {
-                position: [0, 0, backGlassOffsetZ],
-                castShadow: true,
-                material: glassInfillMaterial,
-                children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [doorWidthM, mainDoorHeightM, GlassPanelDepthM]
-                })
-              }), (frameType === "WDGF_WDG100" || frameType === "WF_100") && /*#__PURE__*/jsxRuntime.jsx("mesh", {
-                position: [0, -secondDoorStopWidthM / 2, backGlassOffsetZ],
-                castShadow: true,
-                material: glassInfillMaterial,
-                children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
-                  args: [doorWidthM - 2 * secondDoorStopWidthM, mainDoorHeightM - secondDoorStopWidthM, GlassPanelDepthM]
-                })
-              })]
             }), occulus.visible && occulusWidthM > 0 && occulusHeightM > 0 && /*#__PURE__*/jsxRuntime.jsx(csg.Subtraction, {
-              material: placeholderMaterial,
               position: [occulusPositionXM, occulusPositionYM, 0],
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [occulusWidthM, occulusHeightM, doorDepthM + 0.01]
               })
             })]
           })
+        }), glassVisible && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("mesh", {
+            position: [0, 0, frontGlassOffsetZ],
+            castShadow: true,
+            material: glassInfillMaterial,
+            children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+              args: [doorWidthM, mainDoorHeightM, GlassPanelDepthM]
+            })
+          }), !["WDGF_WDG100", "WF_100"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx("mesh", {
+            position: [0, 0, backGlassOffsetZ],
+            castShadow: true,
+            material: glassInfillMaterial,
+            children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+              args: [doorWidthM, mainDoorHeightM, GlassPanelDepthM]
+            })
+          }), ["WDGF_WDG100", "WF_100"].includes(frameType) && /*#__PURE__*/jsxRuntime.jsx("mesh", {
+            position: [0, -secondDoorStopWidthM / 2, backGlassOffsetZ],
+            castShadow: true,
+            material: glassInfillMaterial,
+            children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
+              args: [doorWidthM - 2 * secondDoorStopWidthM, mainDoorHeightM - secondDoorStopWidthM, GlassPanelDepthM]
+            })
+          })]
         }), frontDoorPlane.visible && /*#__PURE__*/jsxRuntime.jsx("mesh", {
           position: [0, 0, doorDepthM / 2 + 0.0005],
           castShadow: true,
@@ -2210,12 +2202,11 @@ function DoorLeaf(_ref8) {
 const DoorConfigurator = _ref => {
   let {
     doorName,
-    is2D = false,
-    materials
+    showInterface = true,
+    is2D = false
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(ConfiguratorProvider, {
     initialIs2D: is2D,
-    initialMaterials: materials,
     children: /*#__PURE__*/jsxRuntime.jsx(DoorModels, {
       doorName: doorName
     })