door_models 2.0.1 → 2.0.2

package/dist/index.esm.js

@@ -1,9 +1,7 @@
-import require$$0, { useContext, createContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import require$$0, { useContext, createContext, useState, useCallback, useEffect, useMemo } from 'react';
 import { Geometry, Base, Subtraction } from '@react-three/csg';
 import { useSpring, a } from '@react-spring/three';
 import * as THREE from 'three';
-import { Box, Typography, Stack, Paper, FormControl, FormLabel, TextField, Button, Autocomplete, Tooltip, IconButton, Divider, RadioGroup, FormControlLabel, Radio, InputAdornment, Switch, Slider, Select, MenuItem } from '@mui/material';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -1450,7 +1448,7 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
-const _excluded$1 = ["doorDepth"];
+const _excluded = ["doorDepth"];
 const ConfiguratorContext = /*#__PURE__*/createContext(undefined);
 const ConfiguratorProvider = _ref => {
   let {
@@ -1938,7 +1936,7 @@ const ConfiguratorProvider = _ref => {
     const {
         doorDepth
       } = newSettings,
-      newFrameSettings = _objectWithoutProperties(newSettings, _excluded$1);
+      newFrameSettings = _objectWithoutProperties(newSettings, _excluded);
     setDoorFrame(prev => _objectSpread2(_objectSpread2({}, prev), newFrameSettings));
     if (doorDepth !== undefined) {
       setDoor(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
@@ -2967,1302 +2965,15 @@ function DoorModels(_ref3) {
   });
 }
 
-const _excluded = ["frameType"];
-const cpidOptions = ["P_SD_FH_AF20_40", "P_SD_FH_AF20_40OCC", "P_SD_FH_AF40_40", "P_SD_FH_AF40_40OCC", "P_SD_FH_WF_40", "P_SD_FH_WF_40OCC", "P_SD_FH_MXF_40", "P_SD_FH_MXF_40OCC", "P_SD_FH_MXCAF_40", "P_SD_FH_MXCAF_40OCC", "P_SD_FH_AF20_50", "P_SD_FH_AF20_50OCC", "P_SD_FH_AF40_50", "P_SD_FH_AF40_50OCC", "P_SD_FH_WF_50", "P_SD_FH_WF_50OCC", "P_SD_FH_WF_FLI", "P_SD_FH_AF20_SG8", "P_SD_FH_AF20_SG10", "P_SD_FH_AF20_SG12", "P_SD_FH_AF40_SG8", "P_SD_FH_AF40_SG10", "P_SD_FH_AF40_SG12", "P_SD_FH_NOF_SG8", "P_SD_FH_NOF_SG10", "P_SD_FH_NOF_SG12", "P_SD_FH_WF_100", "P_SD_FH_WDGF_WDG100", "P_SD_FH_AF20_40_IFL", "P_SD_FH_AF20_40OCC_IFL", "P_SD_FH_AF40_40_IFL", "P_SD_FH_AF40_40OCC_IFL", "P_SD_FH_WF_40_IFL", "P_SD_FH_WF_40OCC_IFL", "P_SD_FH_AF20_50_IFL", "P_SD_FH_AF20_50OCC_IFL", "P_SD_FH_AF40_50_IFL", "P_SD_FH_AF40_50OCC_IFL", "P_SD_FH_WF_50_IFL", "P_SD_FH_WF_50OCC_IFL", "P_SD_WPFL_AF20_40", "P_SD_WPFL_AF20_40OCC", "P_SD_WPFL_AF40_40", "P_SD_WPFL_AF40_40OCC", "P_SD_WPFL_WF_40", "P_SD_WPFL_WF_40OCC", "P_SD_WPFL_AF20_50", "P_SD_WPFL_AF20_50OCC", "P_SD_WPFL_AF40_50", "P_SD_WPFL_AF40_50OCC", "P_SD_WPFL_WF_50", "P_SD_WPFL_WF_50OCC", "P_SD_WPFL_AF20_SG8", "P_SD_WPFL_AF20_SG10", "P_SD_WPFL_AF20_SG12", "P_SD_WPFL_AF40_SG8", "P_SD_WPFL_AF40_SG10", "P_SD_WPFL_AF40_SG12", "P_SD_ALSGFL_AF20_40", "P_SD_ALSGFL_AF20_40OCC", "P_SD_ALSGFL_AF40_40", "P_SD_ALSGFL_AF40_40OCC", "P_SD_ALSGFL_WF_40", "P_SD_ALSGFL_WF_40OCC", "P_SD_ALSGFL_AF20_SG8", "P_SD_ALSGFL_AF20_SG10", "P_SD_ALSGFL_AF20_SG12", "P_SD_ALSGFL_AF40_SG8", "P_SD_ALSGFL_AF40_SG10", "P_SD_ALSGFL_AF40_SG12", "P_SD_ALDGFL_AF20_40", "P_SD_ALDGFL_AF20_40OCC", "P_SD_ALDGFL_AF40_40", "P_SD_ALDGFL_AF40_40OCC", "P_SD_ALDGFL_WF_40", "P_SD_ALDGFL_WF_40OCC", "P_SD_ALDGFL_AF20_50", "P_SD_ALDGFL_AF20_50OCC", "P_SD_ALDGFL_AF40_50", "P_SD_ALDGFL_AF40_50OCC", "P_SD_ALDGFL_WF_50", "P_SD_ALDGFL_WF_50OCC", "P_SD_ALDGFL_AF20_SG8", "P_SD_ALDGFL_AF20_SG10", "P_SD_ALDGFL_AF20_SG12", "P_SD_ALDGFL_AF40_SG8", "P_SD_ALDGFL_AF40_SG10", "P_SD_ALDGFL_AF40_SG12"];
-const EditableSlider = _ref => {
-  let {
-    label,
-    value,
-    min,
-    max,
-    step = 1,
-    onChange
-  } = _ref;
-  const [inputValue, setInputValue] = useState(String(value));
-  require$$0.useEffect(() => {
-    setInputValue(String(value));
-  }, [value]);
-  const handleSliderChange = (_, newValue) => {
-    onChange(Array.isArray(newValue) ? newValue[0] : newValue);
-  };
-  const handleInputChange = event => {
-    setInputValue(event.target.value);
-  };
-  const handleInputBlur = () => {
-    let numericValue = inputValue === "" || isNaN(Number(inputValue)) ? min : Number(inputValue);
-    if (numericValue < min) numericValue = min;
-    if (numericValue > max) numericValue = max;
-    onChange(numericValue);
-  };
-  const handleInputKeyDown = event => {
-    if (event.key === "Enter") {
-      handleInputBlur();
-      event.target.blur();
-    }
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-    fullWidth: true,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsxs(FormLabel, {
-      sx: {
-        mb: 1,
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
-        children: label
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(TextField, {
-        value: inputValue,
-        size: "small",
-        onChange: handleInputChange,
-        onBlur: handleInputBlur,
-        onKeyDown: handleInputKeyDown,
-        type: "number",
-        variant: "outlined",
-        inputProps: {
-          step: step,
-          min: min,
-          max: max,
-          "aria-labelledby": "input-slider"
-        },
-        InputProps: {
-          endAdornment: /*#__PURE__*/jsxRuntimeExports.jsx(InputAdornment, {
-            position: "end",
-            children: "mm"
-          })
-        },
-        sx: {
-          width: "140px"
-        }
-      })]
-    }), /*#__PURE__*/jsxRuntimeExports.jsx(Slider, {
-      value: typeof value === "number" ? value : min,
-      min: min,
-      max: max,
-      step: step,
-      onChange: handleSliderChange,
-      "aria-labelledby": "input-slider"
-    })]
-  });
-};
-const MaterialInput = _ref2 => {
-  let {
-    label,
-    value,
-    onChange,
-    onApply
-  } = _ref2;
-  const [inputValue, setInputValue] = useState(value);
-  require$$0.useEffect(() => {
-    setInputValue(value);
-  }, [value]);
-  const handleApply = () => {
-    if (onApply) {
-      onApply(inputValue);
-    }
-    onChange(inputValue);
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-    fullWidth: true,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-      children: label
-    }), /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-      direction: "row",
-      spacing: 1,
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(TextField, {
-        size: "small",
-        value: inputValue,
-        onChange: e => setInputValue(e.target.value)
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(Button, {
-        variant: "contained",
-        onClick: handleApply,
-        children: "Apply"
-      })]
-    })]
-  });
-};
-const MaterialSelector = _ref3 => {
-  let {
-    label,
-    value,
-    onChange
-  } = _ref3;
-  const materialOptions = Object.keys(availableMaterials);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-    fullWidth: true,
-    size: "small",
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-      children: label
-    }), /*#__PURE__*/jsxRuntimeExports.jsxs(Select, {
-      value: value,
-      onChange: e => onChange(e.target.value),
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(MenuItem, {
-        value: "none",
-        children: /*#__PURE__*/jsxRuntimeExports.jsx("em", {
-          children: "None"
-        })
-      }), materialOptions.map(name => /*#__PURE__*/jsxRuntimeExports.jsx(MenuItem, {
-        value: name,
-        children: name
-      }, name))]
-    })]
-  });
-};
-const Interface = () => {
-  const {
-    isPlaneVisible,
-    setIsPlaneVisible,
-    cpid,
-    setCpid,
-    door,
-    setDoor,
-    doorFrame,
-    setDoorFrame,
-    interiorFanlight,
-    setInteriorFanlight,
-    exteriorFanlight,
-    setExteriorFanlight,
-    occulus,
-    setOcculus,
-    frontCoverPanel,
-    setFrontCoverPanel,
-    backCoverPanel,
-    setBackCoverPanel,
-    frameType,
-    setFrameType,
-    bodyType,
-    setBodyType,
-    totalHeight,
-    setTotalHeight,
-    totalWidth,
-    setTotalWidth,
-    exteriorFanlightType,
-    setExteriorFanlightType,
-    testDoorMaterial,
-    setTestDoorMaterial,
-    testFrameMaterial,
-    setTestFrameMaterial,
-    testInteriorFanlightMaterial,
-    setTestInteriorFanlightMaterial,
-    testExteriorFanlightMaterial,
-    setTestExteriorFanlightMaterial,
-    testOcculusInfillMaterial,
-    setTestOcculusInfillMaterial,
-    testGlassInfillMaterial,
-    setTestGlassInfillMaterial,
-    testGasketMaterial,
-    setTestGasketMaterial,
-    testDoorStopMaterial,
-    setTestDoorStopMaterial,
-    testHingeMaterial,
-    setTestHingeMaterial,
-    glassVisible,
-    setGlassVisible,
-    glassDepth,
-    setGlassDepth,
-    testFrontCoverPanelMaterial,
-    setTestFrontCoverPanelMaterial,
-    setTestBackCoverPanelMaterial
-  } = useConfigurator();
-  const [parseMessage, setParseMessage] = useState({
-    type: "",
-    text: ""
-  });
-  const handleMaterialApply = materialName => {
-    console.log("[DATABASE SIMULATION] Started fetching data for material: \"".concat(materialName, "\""));
-  };
-  const fileInputRef = useRef(null);
-  const handleExport = () => {
-    if (!cpid || cpid.trim() === "") {
-      alert("Please enter a Door Title (CPID) before exporting.");
-      return;
-    }
-    const doorFrameWithFrameType = _objectSpread2(_objectSpread2({}, doorFrame), {}, {
-      frameType: frameType
-    });
-    const exportData = {
-      cpid,
-      door,
-      doorFrame: doorFrameWithFrameType,
-      interiorFanlight,
-      exteriorFanlight,
-      occulus,
-      frontCoverPanel,
-      backCoverPanel
-    };
-    const jsonString = "data:text/json;charset=utf-8,".concat(encodeURIComponent(JSON.stringify(exportData, null, 2)));
-    const link = document.createElement("a");
-    link.href = jsonString;
-    link.download = "".concat(cpid.trim(), ".json");
-    link.click();
-  };
-  const handleImportClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  };
-  const handleFileChange = event => {
-    var _event$target$files;
-    const file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = e => {
-      if (e.target && typeof e.target.result === "string") {
-        try {
-          const importedData = JSON.parse(e.target.result);
-          if (importedData.cpid) setCpid(importedData.cpid);
-          if (importedData.door) setDoor(importedData.door);
-          if (importedData.doorFrame) {
-            const _importedData$doorFra = importedData.doorFrame,
-              {
-                frameType: importedFrameType
-              } = _importedData$doorFra,
-              doorFrameData = _objectWithoutProperties(_importedData$doorFra, _excluded);
-            setDoorFrame(doorFrameData);
-            if (importedFrameType) setFrameType(importedFrameType);
-          }
-          if (importedData.interiorFanlight) setInteriorFanlight(importedData.interiorFanlight);
-          if (importedData.exteriorFanlight) setExteriorFanlight(importedData.exteriorFanlight);
-          if (importedData.occulus) setOcculus(importedData.occulus);
-          if (importedData.frontCoverPanel) setFrontCoverPanel(importedData.frontCoverPanel);
-          if (importedData.backCoverPanel) setBackCoverPanel(importedData.backCoverPanel);
-        } catch (error) {
-          console.error("Error parsing JSON file:", error);
-          alert("Error: Could not parse the JSON file.");
-        }
-      } else {
-        console.error("FileReader error: result is not a string or target is null");
-        alert("Error: Could not read the file.");
-      }
-    };
-    reader.readAsText(file);
-    event.target.value = "";
-  };
-  const handleParseCpid = useCallback(cpidToParse => {
-    const showMessage = function (text) {
-      let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "error";
-      setParseMessage({
-        text,
-        type
-      });
-      setTimeout(() => setParseMessage({
-        text: "",
-        type: ""
-      }), 4000);
-    };
-    if (!cpidToParse || !cpidToParse.trim().startsWith("P_")) {
-      showMessage("Invalid format: CPID must start with 'P_'.");
-      return;
-    }
-    const parts = cpidToParse.trim().split("_");
-    if (parts.length < 4) {
-      showMessage("Invalid format: Not enough parts in CPID.");
-      return;
-    }
-    const newConfig = {
-      fanlightVisible: false,
-      fanlightType: "WPFL",
-      interiorFanlightVisible: false,
-      occulusVisible: false,
-      frameType: "",
-      bodyType: ""
-    };
-    let currentIndex = 1;
-
-    //  Door Type
-    if (parts[currentIndex] === "SD") {
-      currentIndex++;
-    } else {
-      showMessage("Unsupported Door Type: Only 'SD' is supported.");
-      return;
-    }
-
-    //Fanlight Type
-    const fanlightPart = parts[currentIndex];
-    const validFanlights = ["WPFL", "ALDGFL", "ALSGFL"];
-    if (fanlightPart === "FH") {
-      newConfig.fanlightVisible = false;
-      currentIndex++;
-    } else if (validFanlights.includes(fanlightPart)) {
-      newConfig.fanlightVisible = true;
-      newConfig.fanlightType = fanlightPart;
-      currentIndex++;
-    } else {
-      showMessage("Invalid Fanlight Type: '".concat(fanlightPart, "'."));
-      return;
-    }
-
-    //  Frame and Body Type
-    const validSimpleFrameTypes = ["AF20", "AF40", "WF", "MXF", "MXCAF", "NOF"];
-    const validBodyTypes = ["40", "50", "FLI", "100", "WDG100", "SG8", "SG10", "SG12"];
-    let framePart = parts[currentIndex];
-    let bodyPartRaw = parts[currentIndex + 1] || "";
-    let frameFound = false;
-    if ("".concat(framePart, "_").concat(bodyPartRaw) === "WDGF_WDG100") {
-      newConfig.frameType = "WDGF_WDG100";
-      newConfig.bodyType = "WDG100";
-      currentIndex += 2;
-      frameFound = true;
-    } else if (validSimpleFrameTypes.includes(framePart)) {
-      let tempBody = bodyPartRaw.replace("OCC", "");
-      if (validBodyTypes.includes(tempBody)) {
-        newConfig.frameType = framePart === "NOF" ? "NOF" : "".concat(framePart, "_").concat(tempBody);
-        newConfig.bodyType = tempBody;
-        if (bodyPartRaw.endsWith("OCC")) {
-          newConfig.occulusVisible = true;
-        }
-        currentIndex += 2;
-        frameFound = true;
-      }
-    }
-    if (!frameFound) {
-      showMessage("Invalid Frame/Body combination starting with '".concat(framePart, "'."));
-      return;
-    }
-    for (let i = currentIndex; i < parts.length; i++) {
-      if (parts[i] === "IFL") {
-        newConfig.interiorFanlightVisible = true;
-      } else if (parts[i] === "OCC") {
-        newConfig.occulusVisible = true;
-      }
-    }
-
-    // Apply final configuration
-    setFrameType(newConfig.frameType);
-    setBodyType(newConfig.bodyType);
-    setExteriorFanlight(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-      visible: newConfig.fanlightVisible
-    }));
-    if (newConfig.fanlightVisible) {
-      setExteriorFanlightType(newConfig.fanlightType);
-    }
-    setInteriorFanlight(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-      visible: newConfig.interiorFanlightVisible
-    }));
-    setOcculus(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-      visible: newConfig.occulusVisible
-    }));
-    showMessage("Configuration Applied!", "success");
-  }, [setBodyType, setExteriorFanlight, setExteriorFanlightType, setFrameType, setInteriorFanlight, setOcculus]);
-  const mainDoorHeight = door.doorHeight - (interiorFanlight.visible ? interiorFanlight.height : 0);
-  const handleExteriorFanlightHeightChange = newHeight => {
-    const oldHeight = exteriorFanlight.height;
-    const heightDifference = newHeight - oldHeight;
-    setExteriorFanlight(_objectSpread2(_objectSpread2({}, exteriorFanlight), {}, {
-      height: newHeight
-    }));
-    setTotalHeight(totalHeight + heightDifference);
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [parseMessage.text && /*#__PURE__*/jsxRuntimeExports.jsx(Box, {
-      sx: {
-        position: "absolute",
-        top: 20,
-        left: "50%",
-        transform: "translateX(-50%)",
-        padding: "10px 20px",
-        backgroundColor: parseMessage.type === "error" ? "rgba(211, 47, 47, 0.8)" : "rgba(46, 125, 50, 0.8)",
-        backdropFilter: "blur(5px)",
-        borderRadius: "10px",
-        color: "white",
-        zIndex: 20,
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-        variant: "body1",
-        children: parseMessage.text
-      })
-    }), /*#__PURE__*/jsxRuntimeExports.jsxs(Box, {
-      sx: {
-        position: "absolute",
-        top: 20,
-        left: 20,
-        padding: "10px 15px",
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
-        backdropFilter: "blur(10px)",
-        borderRadius: "10px",
-        color: "white",
-        zIndex: 10
-      },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsxs(Typography, {
-        variant: "body1",
-        children: ["Total Width: ", Math.round(totalWidth), " mm"]
-      }), frontCoverPanel.visible && /*#__PURE__*/jsxRuntimeExports.jsxs(Typography, {
-        variant: "body1",
-        sx: {
-          color: "#81d4fa"
-        },
-        children: ["Total Width with CAS:", " ", Math.round(totalWidth + frontCoverPanel.width * 2), " mm"]
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Typography, {
-        variant: "body1",
-        children: ["Total Height: ", Math.round(totalHeight), " mm"]
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Typography, {
-        variant: "body1",
-        children: ["Frame Depth: ", Math.round(doorFrame.frameDepth), " mm"]
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Typography, {
-        variant: "body1",
-        children: ["Door Depth: ", Math.round(door.theDoorDepth), " mm"]
-      })]
-    }), /*#__PURE__*/jsxRuntimeExports.jsx(Box, {
-      sx: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        height: "100vh",
-        width: "25%",
-        overflowY: "auto",
-        boxSizing: "border-box",
-        backgroundColor: "rgba(255, 255, 255, 0.95)",
-        backdropFilter: "blur(10px)"
-      },
-      p: 2,
-      children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-        spacing: 2,
-        children: [/*#__PURE__*/jsxRuntimeExports.jsxs(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: [/*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-            fullWidth: true,
-            sx: {
-              mb: 2
-            },
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-              children: "Door Title (CPID)"
-            }), /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-              direction: "row",
-              spacing: 1,
-              alignItems: "center",
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx(TextField, {
-                value: cpid,
-                onChange: e => {
-                  setCpid(e.target.value);
-                },
-                variant: "outlined",
-                size: "small",
-                fullWidth: true,
-                placeholder: "e.g. P_SD_WPFL_AF20_50_IFL"
-              }), /*#__PURE__*/jsxRuntimeExports.jsx(Button, {
-                variant: "contained",
-                onClick: () => handleParseCpid(cpid),
-                children: "Apply"
-              })]
-            })]
-          }), /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-            fullWidth: true,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-              children: "Or Select a Preset (Searchable)"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Autocomplete, {
-              value: cpid,
-              onChange: (event, newValue) => {
-                if (newValue) {
-                  setCpid(newValue);
-                  handleParseCpid(newValue);
-                }
-              },
-              onInputChange: (event, newInputValue) => {
-                setCpid(newInputValue);
-              },
-              options: cpidOptions,
-              renderInput: params => /*#__PURE__*/jsxRuntimeExports.jsx(TextField, _objectSpread2(_objectSpread2({}, params), {}, {
-                size: "small"
-              })),
-              ListboxProps: {
-                style: {
-                  maxHeight: 300
-                }
-              },
-              freeSolo: true,
-              disableClearable: true
-            })]
-          })]
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            direction: "row",
-            spacing: 2,
-            justifyContent: "center",
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(Button, {
-              variant: "contained",
-              color: "primary",
-              onClick: handleExport,
-              children: "Export JSON"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Button, {
-              variant: "contained",
-              color: "secondary",
-              onClick: handleImportClick,
-              children: "Import JSON"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
-              type: "file",
-              ref: fileInputRef,
-              style: {
-                display: "none"
-              },
-              accept: ".json",
-              onChange: handleFileChange
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              title: isPlaneVisible ? "Hide Ground Plane" : "Show Ground Plane",
-              children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-                onClick: () => setIsPlaneVisible(!isPlaneVisible),
-                children: isPlaneVisible ? /*#__PURE__*/jsxRuntimeExports.jsx(Visibility, {}) : /*#__PURE__*/jsxRuntimeExports.jsx(VisibilityOff, {})
-              })
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-              variant: "h6",
-              color: "primary",
-              children: "Door Properties"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-              direction: "row",
-              spacing: 2,
-              alignItems: "flex-end",
-              children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                label: "Door Material",
-                value: door.doorMaterial,
-                onChange: value => setDoor(_objectSpread2(_objectSpread2({}, door), {}, {
-                  doorMaterial: value
-                })),
-                onApply: handleMaterialApply
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-              direction: "row",
-              spacing: 2,
-              alignItems: "flex-end",
-              children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                label: "Test Material",
-                value: testDoorMaterial,
-                onChange: setTestDoorMaterial
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Divider, {}), /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-                children: "Body Type"
-              }), /*#__PURE__*/jsxRuntimeExports.jsxs(RadioGroup, {
-                row: true,
-                value: bodyType,
-                onChange: (_, value) => setBodyType(value),
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "40",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "40mm"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "50",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "50mm"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "SG8",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "8mm Glass"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "SG10",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "10mm Glass"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "SG12",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "12mm Glass"
-                })]
-              })]
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Divider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-              label: "Total Width",
-              value: totalWidth,
-              min: 600,
-              max: 2200,
-              onChange: setTotalWidth
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControl, {
-              fullWidth: true,
-              children: /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabel, {
-                sx: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center"
-                },
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
-                  children: "Calculated Door Width"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(TextField, {
-                  value: Math.round(door.doorWidth),
-                  size: "small",
-                  disabled: true,
-                  variant: "outlined",
-                  InputProps: {
-                    endAdornment: /*#__PURE__*/jsxRuntimeExports.jsx(InputAdornment, {
-                      position: "end",
-                      children: "mm"
-                    })
-                  },
-                  sx: {
-                    width: "140px"
-                  }
-                })]
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-              label: "Total Height",
-              value: totalHeight,
-              min: 1500,
-              max: 4000,
-              onChange: setTotalHeight
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControl, {
-              fullWidth: true,
-              children: /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabel, {
-                sx: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center"
-                },
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
-                  children: "Calculated Door Height"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(TextField, {
-                  value: Math.round(door.doorHeight),
-                  size: "small",
-                  disabled: true,
-                  variant: "outlined",
-                  InputProps: {
-                    endAdornment: /*#__PURE__*/jsxRuntimeExports.jsx(InputAdornment, {
-                      position: "end",
-                      children: "mm"
-                    })
-                  },
-                  sx: {
-                    width: "140px"
-                  }
-                })]
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-              direction: "row",
-              justifyContent: "space-around",
-              children: [/*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-                  children: "Pivot"
-                }), /*#__PURE__*/jsxRuntimeExports.jsxs(RadioGroup, {
-                  row: true,
-                  value: door.doorPivot,
-                  onChange: (_, value) => setDoor(_objectSpread2(_objectSpread2({}, door), {}, {
-                    doorPivot: value
-                  })),
-                  children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                    value: "left",
-                    control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                      size: "small"
-                    }),
-                    label: "Left"
-                  }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                    value: "right",
-                    control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                      size: "small"
-                    }),
-                    label: "Right"
-                  })]
-                })]
-              }), /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-                  children: "Opening"
-                }), /*#__PURE__*/jsxRuntimeExports.jsxs(RadioGroup, {
-                  row: true,
-                  value: door.doorOpening,
-                  onChange: (_, value) => setDoor(_objectSpread2(_objectSpread2({}, door), {}, {
-                    doorOpening: value
-                  })),
-                  children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                    value: "in",
-                    control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                      size: "small"
-                    }),
-                    label: "In"
-                  }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                    value: "out",
-                    control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                      size: "small"
-                    }),
-                    label: "Out"
-                  })]
-                })]
-              })]
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-              variant: "h6",
-              color: "primary",
-              children: "Frame Properties"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-              direction: "row",
-              spacing: 2,
-              alignItems: "flex-end",
-              children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                label: "Frame Material",
-                value: doorFrame.frameMaterial,
-                onChange: value => setDoorFrame(_objectSpread2(_objectSpread2({}, doorFrame), {}, {
-                  frameMaterial: value
-                })),
-                onApply: handleMaterialApply
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-              label: "Test Material",
-              value: testFrameMaterial,
-              onChange: setTestFrameMaterial
-            }), /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx(Divider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-                variant: "subtitle1",
-                color: "secondary",
-                children: "Doorstop Properties"
-              }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-                direction: "row",
-                spacing: 2,
-                alignItems: "flex-end",
-                children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                  label: "Doorstop Material",
-                  value: doorFrame.doorStopMaterial || "",
-                  onChange: value => setDoorFrame(_objectSpread2(_objectSpread2({}, doorFrame), {}, {
-                    doorStopMaterial: value
-                  })),
-                  onApply: handleMaterialApply
-                })
-              }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                label: "Test Doorstop Material",
-                value: testDoorStopMaterial,
-                onChange: setTestDoorStopMaterial
-              })]
-            }), /*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-                children: "Frame Type"
-              }), /*#__PURE__*/jsxRuntimeExports.jsxs(RadioGroup, {
-                value: frameType,
-                onChange: (_, value) => setFrameType(value),
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "NOF",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "NOF"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "AF20_40",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "AF20_40"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "AF20_50",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "AF20_50"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "AF40_40",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "AF40_40"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "AF40_50",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "AF40_50"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "WF_40",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "WF_40"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "WF_50",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "WF_50"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "WF_100",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "WF_100"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "WF_FLI",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "WF_FLI"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "WDGF_WDG100",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "WDGF_WDG100"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "MXF_40",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "MXF_40"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "MXF_50",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "MXF_50"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "MXCAF_40",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "MXCAF_40"
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                  value: "MXCAF_50",
-                  control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                    size: "small"
-                  }),
-                  label: "MXCAF_50"
-                })]
-              })]
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Divider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-              variant: "subtitle1",
-              color: "secondary",
-              children: "Gasket Properties"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-              direction: "row",
-              spacing: 2,
-              alignItems: "flex-end",
-              children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                label: "Gasket Material",
-                value: doorFrame.gasketMaterial,
-                onChange: value => setDoorFrame(_objectSpread2(_objectSpread2({}, doorFrame), {}, {
-                  gasketMaterial: value
-                })),
-                onApply: handleMaterialApply
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-              label: "Test Gasket Material",
-              value: testGasketMaterial,
-              onChange: setTestGasketMaterial
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Divider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-              variant: "subtitle1",
-              color: "secondary",
-              children: "Hinge Properties"
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-              direction: "row",
-              spacing: 2,
-              alignItems: "flex-end",
-              children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                label: "Hinge Material",
-                value: doorFrame.hingeMaterial,
-                onChange: value => setDoorFrame(_objectSpread2(_objectSpread2({}, doorFrame), {}, {
-                  hingeMaterial: value
-                })),
-                onApply: handleMaterialApply
-              })
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-              label: "Test Hinge Material",
-              value: testHingeMaterial,
-              onChange: setTestHingeMaterial
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-              control: /*#__PURE__*/jsxRuntimeExports.jsx(Switch, {
-                checked: frontCoverPanel.visible,
-                onChange: e => {
-                  const isVisible = e.target.checked;
-                  setFrontCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                    visible: isVisible
-                  }));
-                  setBackCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                    visible: isVisible
-                  }));
-                }
-              }),
-              label: /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-                variant: "h6",
-                color: "primary",
-                children: "CAS Properties"
-              })
-            }), frontCoverPanel.visible && /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-              variant: "outlined",
-              sx: {
-                p: 2,
-                mt: 1
-              },
-              children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-                spacing: 2,
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                  label: "Material",
-                  value: frontCoverPanel.material,
-                  onChange: value => {
-                    setFrontCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                      material: value
-                    }));
-                    setBackCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                      material: value
-                    }));
-                  },
-                  onApply: handleMaterialApply
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                  label: "Test Material",
-                  value: testFrontCoverPanelMaterial,
-                  onChange: value => {
-                    setTestFrontCoverPanelMaterial(value);
-                    setTestBackCoverPanelMaterial(value);
-                  }
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Profile Width",
-                  value: frontCoverPanel.width,
-                  min: 20,
-                  max: 500,
-                  onChange: value => {
-                    setFrontCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                      width: value
-                    }));
-                    setBackCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                      width: value
-                    }));
-                  }
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Depth (from frame)",
-                  value: frontCoverPanel.depth,
-                  min: 5,
-                  max: 100,
-                  onChange: value => {
-                    setFrontCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                      depth: value
-                    }));
-                    setBackCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-                      depth: value
-                    }));
-                  }
-                })]
-              })
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-              control: /*#__PURE__*/jsxRuntimeExports.jsx(Switch, {
-                checked: interiorFanlight.visible,
-                onChange: e => {
-                  setInteriorFanlight(_objectSpread2(_objectSpread2({}, interiorFanlight), {}, {
-                    visible: e.target.checked
-                  }));
-                }
-              }),
-              label: /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-                variant: "h6",
-                color: "primary",
-                children: "Interior Fanlight"
-              })
-            }), interiorFanlight.visible && /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-              variant: "outlined",
-              sx: {
-                p: 2,
-                mt: 1
-              },
-              children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-                spacing: 2,
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-                  direction: "row",
-                  spacing: 2,
-                  alignItems: "flex-end",
-                  children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                    label: "Material",
-                    value: interiorFanlight.material,
-                    onChange: value => setInteriorFanlight(_objectSpread2(_objectSpread2({}, interiorFanlight), {}, {
-                      material: value
-                    })),
-                    onApply: handleMaterialApply
-                  })
-                }), " ", /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                  label: "Test Material",
-                  value: testInteriorFanlightMaterial,
-                  onChange: setTestInteriorFanlightMaterial
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Height",
-                  value: interiorFanlight.height,
-                  min: 100,
-                  max: door.doorHeight - 1500 > 100 ? door.doorHeight - 1500 : 100,
-                  onChange: value => setInteriorFanlight(_objectSpread2(_objectSpread2({}, interiorFanlight), {}, {
-                    height: value
-                  }))
-                })]
-              })
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-              control: /*#__PURE__*/jsxRuntimeExports.jsx(Switch, {
-                checked: exteriorFanlight.visible,
-                onChange: e => setExteriorFanlight(_objectSpread2(_objectSpread2({}, exteriorFanlight), {}, {
-                  visible: e.target.checked
-                }))
-              }),
-              label: /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-                variant: "h6",
-                color: "primary",
-                children: "Exterior Fanlight"
-              })
-            }), exteriorFanlight.visible && /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-              variant: "outlined",
-              sx: {
-                p: 2,
-                mt: 1
-              },
-              children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-                spacing: 2,
-                children: [/*#__PURE__*/jsxRuntimeExports.jsxs(FormControl, {
-                  children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormLabel, {
-                    children: "Type"
-                  }), /*#__PURE__*/jsxRuntimeExports.jsxs(RadioGroup, {
-                    row: true,
-                    value: exteriorFanlightType,
-                    onChange: e => setExteriorFanlightType(e.target.value),
-                    children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                      value: "WPFL",
-                      control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                        size: "small"
-                      }),
-                      label: "WPFL"
-                    }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                      value: "ALDGFL",
-                      control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                        size: "small"
-                      }),
-                      label: "ALDGFL"
-                    }), /*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                      value: "ALSGFL",
-                      control: /*#__PURE__*/jsxRuntimeExports.jsx(Radio, {
-                        size: "small"
-                      }),
-                      label: "ALSGFL"
-                    })]
-                  })]
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                  label: "Material",
-                  value: exteriorFanlight.material,
-                  onChange: value => setExteriorFanlight(_objectSpread2(_objectSpread2({}, exteriorFanlight), {}, {
-                    material: value
-                  })),
-                  onApply: handleMaterialApply
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                  label: "Test Material",
-                  value: testExteriorFanlightMaterial,
-                  onChange: setTestExteriorFanlightMaterial
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Height",
-                  value: exteriorFanlight.height,
-                  min: 100,
-                  max: 1000,
-                  onChange: handleExteriorFanlightHeightChange
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Depth",
-                  value: exteriorFanlight.depth,
-                  min: 40,
-                  max: doorFrame.frameDepth,
-                  onChange: value => setExteriorFanlight(_objectSpread2(_objectSpread2({}, exteriorFanlight), {}, {
-                    depth: value
-                  }))
-                })]
-              })
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-              control: /*#__PURE__*/jsxRuntimeExports.jsx(Switch, {
-                checked: occulus.visible,
-                onChange: e => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                  visible: e.target.checked
-                }))
-              }),
-              label: /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-                variant: "h6",
-                color: "primary",
-                children: "Occulus"
-              })
-            }), occulus.visible && /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-              variant: "outlined",
-              sx: {
-                p: 2,
-                mt: 1
-              },
-              children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-                spacing: 2,
-                children: [/*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Offset from Left (x1)",
-                  value: occulus.x1,
-                  min: 50,
-                  max: door.doorWidth - occulus.x2 - 50,
-                  onChange: value => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                    x1: value
-                  }))
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Offset from Right (x2)",
-                  value: occulus.x2,
-                  min: 50,
-                  max: door.doorWidth - occulus.x1 - 50,
-                  onChange: value => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                    x2: value
-                  }))
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Offset from Top (y1)",
-                  value: occulus.y1,
-                  min: 50,
-                  max: mainDoorHeight - occulus.y2 - 50,
-                  onChange: value => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                    y1: value
-                  }))
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                  label: "Offset from Bottom (y2)",
-                  value: occulus.y2,
-                  min: 50,
-                  max: mainDoorHeight - occulus.y1 - 50,
-                  onChange: value => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                    y2: value
-                  }))
-                }), /*#__PURE__*/jsxRuntimeExports.jsx(Divider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-                  variant: "outlined",
-                  sx: {
-                    p: 2,
-                    mt: 1
-                  },
-                  children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-                    spacing: 2,
-                    children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-                      control: /*#__PURE__*/jsxRuntimeExports.jsx(Switch, {
-                        checked: occulus.infillVisible,
-                        onChange: e => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                          infillVisible: e.target.checked
-                        }))
-                      }),
-                      label: "Show Infill"
-                    }), /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
-                      direction: "row",
-                      spacing: 2,
-                      alignItems: "flex-end",
-                      children: /*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                        label: "Infill Material",
-                        value: occulus.material,
-                        onChange: value => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                          material: value
-                        })),
-                        onApply: handleMaterialApply
-                      })
-                    }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                      label: "Test Material",
-                      value: testOcculusInfillMaterial,
-                      onChange: setTestOcculusInfillMaterial
-                    }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                      label: "Infill Depth",
-                      value: occulus.depth,
-                      min: 10,
-                      max: door.theDoorDepth,
-                      onChange: value => setOcculus(_objectSpread2(_objectSpread2({}, occulus), {}, {
-                        depth: value
-                      }))
-                    })]
-                  })
-                })]
-              })
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx(Paper, {
-          elevation: 3,
-          sx: {
-            p: 2
-          },
-          children: /*#__PURE__*/jsxRuntimeExports.jsxs(Stack, {
-            spacing: 2,
-            children: [/*#__PURE__*/jsxRuntimeExports.jsx(FormControlLabel, {
-              control: /*#__PURE__*/jsxRuntimeExports.jsx(Switch, {
-                checked: glassVisible,
-                onChange: e => setGlassVisible(e.target.checked)
-              }),
-              label: /*#__PURE__*/jsxRuntimeExports.jsx(Typography, {
-                variant: "h6",
-                color: "primary",
-                children: "Glass"
-              })
-            }), glassVisible && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx(MaterialInput, {
-                label: "Glass Material",
-                value: doorFrame.glassMaterial || "",
-                onChange: value => setDoorFrame(_objectSpread2(_objectSpread2({}, doorFrame), {}, {
-                  glassMaterial: value
-                })),
-                onApply: handleMaterialApply
-              }), /*#__PURE__*/jsxRuntimeExports.jsx(MaterialSelector, {
-                label: "Test Glass Material",
-                value: testGlassInfillMaterial,
-                onChange: setTestGlassInfillMaterial
-              }), /*#__PURE__*/jsxRuntimeExports.jsx(EditableSlider, {
-                label: "Glass Depth",
-                value: glassDepth,
-                min: 4,
-                max: 20,
-                step: 0.5,
-                onChange: setGlassDepth
-              })]
-            })]
-          })
-        })]
-      })
-    })]
-  });
-};
-
 const DoorConfigurator = _ref => {
   let {
     doorName,
     showInterface = true
   } = _ref;
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(ConfiguratorProvider, {
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(DoorModels, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ConfiguratorProvider, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(DoorModels, {
       doorName: doorName
-    }), showInterface && /*#__PURE__*/jsxRuntimeExports.jsx(Interface, {})]
+    })
   });
 };