door_models 0.1.0

package/dist/components/Interface.js

@@ -0,0 +1,1307 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Interface = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _DoorContext = require("../context/DoorContext.tsx");
+var _DoorModels = require("../components/DoorModels.tsx");
+var _iconsMaterial = require("@mui/icons-material");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["frameType"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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] = (0, _react.useState)(value);
+  _react.default.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  const handleSliderChange = (_, newValue) => {
+    onChange(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__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    fullWidth: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormLabel, {
+      sx: {
+        mb: 1,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+            position: "end",
+            children: "mm"
+          })
+        },
+        sx: {
+          width: "140px"
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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] = (0, _react.useState)(value);
+  _react.default.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  const handleApply = () => {
+    if (onApply) {
+      onApply(inputValue);
+    }
+    onChange(inputValue);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    fullWidth: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      spacing: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+        size: "small",
+        value: inputValue,
+        onChange: e => setInputValue(e.target.value)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        onClick: handleApply,
+        children: "Apply"
+      })]
+    })]
+  });
+};
+const MaterialSelector = _ref3 => {
+  let {
+    label,
+    value,
+    onChange
+  } = _ref3;
+  const materialOptions = Object.keys(_DoorModels.availableMaterials);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+    fullWidth: true,
+    size: "small",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, {
+      value: value,
+      onChange: e => onChange(e.target.value),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        value: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
+          children: "None"
+        })
+      }), materialOptions.map(name => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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
+  } = (0, _DoorContext.useConfigurator)();
+  const [parseMessage, setParseMessage] = (0, _react.useState)({
+    type: "",
+    text: ""
+  });
+  const handleMaterialApply = materialName => {
+    console.log("[DATABASE SIMULATION] Started fetching data for material: \"".concat(materialName, "\""));
+  };
+  const fileInputRef = (0, _react.useRef)(null);
+  const handleExport = () => {
+    if (!cpid || cpid.trim() === "") {
+      alert("Please enter a Door Title (CPID) before exporting.");
+      return;
+    }
+    const doorFrameWithFrameType = _objectSpread(_objectSpread({}, 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 = (0, _react.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 => _objectSpread(_objectSpread({}, prev), {}, {
+      visible: newConfig.fanlightVisible
+    }));
+    if (newConfig.fanlightVisible) {
+      setExteriorFanlightType(newConfig.fanlightType);
+    }
+    setInteriorFanlight(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      visible: newConfig.interiorFanlightVisible
+    }));
+    setOcculus(prev => _objectSpread(_objectSpread({}, 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(_objectSpread(_objectSpread({}, exteriorFanlight), {}, {
+      height: newHeight
+    }));
+    setTotalHeight(totalHeight + heightDifference);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [parseMessage.text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body1",
+        children: parseMessage.text
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.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__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "body1",
+        children: ["Total Width: ", Math.round(totalWidth), " mm"]
+      }), frontCoverPanel.visible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "body1",
+        sx: {
+          color: "#81d4fa"
+        },
+        children: ["Total Width with CAS:", " ", Math.round(totalWidth + frontCoverPanel.width * 2), " mm"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "body1",
+        children: ["Total Height: ", Math.round(totalHeight), " mm"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "body1",
+        children: ["Frame Depth: ", Math.round(doorFrame.frameDepth), " mm"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "body1",
+        children: ["Door Depth: ", Math.round(door.theDoorDepth), " mm"]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+            fullWidth: true,
+            sx: {
+              mb: 2
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+              children: "Door Title (CPID)"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              spacing: 1,
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                variant: "contained",
+                onClick: () => handleParseCpid(cpid),
+                children: "Apply"
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+            fullWidth: true,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+              children: "Or Select a Preset (Searchable)"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+              value: cpid,
+              onChange: (event, newValue) => {
+                if (newValue) {
+                  setCpid(newValue);
+                  handleParseCpid(newValue);
+                }
+              },
+              onInputChange: (event, newInputValue) => {
+                setCpid(newInputValue);
+              },
+              options: cpidOptions,
+              renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+                size: "small"
+              })),
+              ListboxProps: {
+                style: {
+                  maxHeight: 300
+                }
+              },
+              freeSolo: true,
+              disableClearable: true
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 2,
+            justifyContent: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "contained",
+              color: "primary",
+              onClick: handleExport,
+              children: "Export JSON"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "contained",
+              color: "secondary",
+              onClick: handleImportClick,
+              children: "Import JSON"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "file",
+              ref: fileInputRef,
+              style: {
+                display: "none"
+              },
+              accept: ".json",
+              onChange: handleFileChange
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: isPlaneVisible ? "Hide Ground Plane" : "Show Ground Plane",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+                onClick: () => setIsPlaneVisible(!isPlaneVisible),
+                children: isPlaneVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Visibility, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.VisibilityOff, {})
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              color: "primary",
+              children: "Door Properties"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "flex-end",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                label: "Door Material",
+                value: door.doorMaterial,
+                onChange: value => setDoor(_objectSpread(_objectSpread({}, door), {}, {
+                  doorMaterial: value
+                })),
+                onApply: handleMaterialApply
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "flex-end",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                label: "Test Material",
+                value: testDoorMaterial,
+                onChange: setTestDoorMaterial
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+                children: "Body Type"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
+                row: true,
+                value: bodyType,
+                onChange: (_, value) => setBodyType(value),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "40",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "40mm"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "50",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "50mm"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "SG8",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "8mm Glass"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "SG10",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "10mm Glass"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "SG12",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "12mm Glass"
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+              label: "Total Width",
+              value: totalWidth,
+              min: 600,
+              max: 2200,
+              onChange: setTotalWidth
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+              fullWidth: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormLabel, {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "Calculated Door Width"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+                  value: Math.round(door.doorWidth),
+                  size: "small",
+                  disabled: true,
+                  variant: "outlined",
+                  InputProps: {
+                    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                      position: "end",
+                      children: "mm"
+                    })
+                  },
+                  sx: {
+                    width: "140px"
+                  }
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+              label: "Total Height",
+              value: totalHeight,
+              min: 1500,
+              max: 4000,
+              onChange: setTotalHeight
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+              fullWidth: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormLabel, {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "Calculated Door Height"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+                  value: Math.round(door.doorHeight),
+                  size: "small",
+                  disabled: true,
+                  variant: "outlined",
+                  InputProps: {
+                    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                      position: "end",
+                      children: "mm"
+                    })
+                  },
+                  sx: {
+                    width: "140px"
+                  }
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              justifyContent: "space-around",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+                  children: "Pivot"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
+                  row: true,
+                  value: door.doorPivot,
+                  onChange: (_, value) => setDoor(_objectSpread(_objectSpread({}, door), {}, {
+                    doorPivot: value
+                  })),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                    value: "left",
+                    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                      size: "small"
+                    }),
+                    label: "Left"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                    value: "right",
+                    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                      size: "small"
+                    }),
+                    label: "Right"
+                  })]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+                  children: "Opening"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
+                  row: true,
+                  value: door.doorOpening,
+                  onChange: (_, value) => setDoor(_objectSpread(_objectSpread({}, door), {}, {
+                    doorOpening: value
+                  })),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                    value: "in",
+                    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                      size: "small"
+                    }),
+                    label: "In"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                    value: "out",
+                    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                      size: "small"
+                    }),
+                    label: "Out"
+                  })]
+                })]
+              })]
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              color: "primary",
+              children: "Frame Properties"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "flex-end",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                label: "Frame Material",
+                value: doorFrame.frameMaterial,
+                onChange: value => setDoorFrame(_objectSpread(_objectSpread({}, doorFrame), {}, {
+                  frameMaterial: value
+                })),
+                onApply: handleMaterialApply
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+              label: "Test Material",
+              value: testFrameMaterial,
+              onChange: setTestFrameMaterial
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "subtitle1",
+                color: "secondary",
+                children: "Doorstop Properties"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+                direction: "row",
+                spacing: 2,
+                alignItems: "flex-end",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                  label: "Doorstop Material",
+                  value: doorFrame.doorStopMaterial || "",
+                  onChange: value => setDoorFrame(_objectSpread(_objectSpread({}, doorFrame), {}, {
+                    doorStopMaterial: value
+                  })),
+                  onApply: handleMaterialApply
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                label: "Test Doorstop Material",
+                value: testDoorStopMaterial,
+                onChange: setTestDoorStopMaterial
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+                children: "Frame Type"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
+                value: frameType,
+                onChange: (_, value) => setFrameType(value),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "NOF",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "NOF"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "AF20_40",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "AF20_40"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "AF20_50",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "AF20_50"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "AF40_40",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "AF40_40"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "AF40_50",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "AF40_50"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "WF_40",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "WF_40"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "WF_50",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "WF_50"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "WF_100",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "WF_100"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "WF_FLI",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "WF_FLI"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "WDGF_WDG100",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "WDGF_WDG100"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "MXF_40",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "MXF_40"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "MXF_50",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "MXF_50"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "MXCAF_40",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "MXCAF_40"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                  value: "MXCAF_50",
+                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                    size: "small"
+                  }),
+                  label: "MXCAF_50"
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "subtitle1",
+              color: "secondary",
+              children: "Gasket Properties"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "flex-end",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                label: "Gasket Material",
+                value: doorFrame.gasketMaterial,
+                onChange: value => setDoorFrame(_objectSpread(_objectSpread({}, doorFrame), {}, {
+                  gasketMaterial: value
+                })),
+                onApply: handleMaterialApply
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+              label: "Test Gasket Material",
+              value: testGasketMaterial,
+              onChange: setTestGasketMaterial
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "subtitle1",
+              color: "secondary",
+              children: "Hinge Properties"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "flex-end",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                label: "Hinge Material",
+                value: doorFrame.hingeMaterial,
+                onChange: value => setDoorFrame(_objectSpread(_objectSpread({}, doorFrame), {}, {
+                  hingeMaterial: value
+                })),
+                onApply: handleMaterialApply
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+              label: "Test Hinge Material",
+              value: testHingeMaterial,
+              onChange: setTestHingeMaterial
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                checked: frontCoverPanel.visible,
+                onChange: e => {
+                  const isVisible = e.target.checked;
+                  setFrontCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                    visible: isVisible
+                  }));
+                  setBackCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                    visible: isVisible
+                  }));
+                }
+              }),
+              label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h6",
+                color: "primary",
+                children: "CAS Properties"
+              })
+            }), frontCoverPanel.visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                p: 2,
+                mt: 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 2,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                  label: "Material",
+                  value: frontCoverPanel.material,
+                  onChange: value => {
+                    setFrontCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                      material: value
+                    }));
+                    setBackCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                      material: value
+                    }));
+                  },
+                  onApply: handleMaterialApply
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                  label: "Test Material",
+                  value: testFrontCoverPanelMaterial,
+                  onChange: value => {
+                    setTestFrontCoverPanelMaterial(value);
+                    setTestBackCoverPanelMaterial(value);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Profile Width",
+                  value: frontCoverPanel.width,
+                  min: 20,
+                  max: 500,
+                  onChange: value => {
+                    setFrontCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                      width: value
+                    }));
+                    setBackCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                      width: value
+                    }));
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Depth (from frame)",
+                  value: frontCoverPanel.depth,
+                  min: 5,
+                  max: 100,
+                  onChange: value => {
+                    setFrontCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                      depth: value
+                    }));
+                    setBackCoverPanel(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                      depth: value
+                    }));
+                  }
+                })]
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                checked: interiorFanlight.visible,
+                onChange: e => {
+                  setInteriorFanlight(_objectSpread(_objectSpread({}, interiorFanlight), {}, {
+                    visible: e.target.checked
+                  }));
+                }
+              }),
+              label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h6",
+                color: "primary",
+                children: "Interior Fanlight"
+              })
+            }), interiorFanlight.visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                p: 2,
+                mt: 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 2,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+                  direction: "row",
+                  spacing: 2,
+                  alignItems: "flex-end",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                    label: "Material",
+                    value: interiorFanlight.material,
+                    onChange: value => setInteriorFanlight(_objectSpread(_objectSpread({}, interiorFanlight), {}, {
+                      material: value
+                    })),
+                    onApply: handleMaterialApply
+                  })
+                }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                  label: "Test Material",
+                  value: testInteriorFanlightMaterial,
+                  onChange: setTestInteriorFanlightMaterial
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Height",
+                  value: interiorFanlight.height,
+                  min: 100,
+                  max: door.doorHeight - 1500 > 100 ? door.doorHeight - 1500 : 100,
+                  onChange: value => setInteriorFanlight(_objectSpread(_objectSpread({}, interiorFanlight), {}, {
+                    height: value
+                  }))
+                })]
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                checked: exteriorFanlight.visible,
+                onChange: e => setExteriorFanlight(_objectSpread(_objectSpread({}, exteriorFanlight), {}, {
+                  visible: e.target.checked
+                }))
+              }),
+              label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h6",
+                color: "primary",
+                children: "Exterior Fanlight"
+              })
+            }), exteriorFanlight.visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                p: 2,
+                mt: 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 2,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
+                    children: "Type"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
+                    row: true,
+                    value: exteriorFanlightType,
+                    onChange: e => setExteriorFanlightType(e.target.value),
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                      value: "WPFL",
+                      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                        size: "small"
+                      }),
+                      label: "WPFL"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                      value: "ALDGFL",
+                      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                        size: "small"
+                      }),
+                      label: "ALDGFL"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                      value: "ALSGFL",
+                      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {
+                        size: "small"
+                      }),
+                      label: "ALSGFL"
+                    })]
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                  label: "Material",
+                  value: exteriorFanlight.material,
+                  onChange: value => setExteriorFanlight(_objectSpread(_objectSpread({}, exteriorFanlight), {}, {
+                    material: value
+                  })),
+                  onApply: handleMaterialApply
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                  label: "Test Material",
+                  value: testExteriorFanlightMaterial,
+                  onChange: setTestExteriorFanlightMaterial
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Height",
+                  value: exteriorFanlight.height,
+                  min: 100,
+                  max: 1000,
+                  onChange: handleExteriorFanlightHeightChange
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Depth",
+                  value: exteriorFanlight.depth,
+                  min: 40,
+                  max: doorFrame.frameDepth,
+                  onChange: value => setExteriorFanlight(_objectSpread(_objectSpread({}, exteriorFanlight), {}, {
+                    depth: value
+                  }))
+                })]
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                checked: occulus.visible,
+                onChange: e => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                  visible: e.target.checked
+                }))
+              }),
+              label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h6",
+                color: "primary",
+                children: "Occulus"
+              })
+            }), occulus.visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                p: 2,
+                mt: 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 2,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Offset from Left (x1)",
+                  value: occulus.x1,
+                  min: 50,
+                  max: door.doorWidth - occulus.x2 - 50,
+                  onChange: value => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                    x1: value
+                  }))
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Offset from Right (x2)",
+                  value: occulus.x2,
+                  min: 50,
+                  max: door.doorWidth - occulus.x1 - 50,
+                  onChange: value => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                    x2: value
+                  }))
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Offset from Top (y1)",
+                  value: occulus.y1,
+                  min: 50,
+                  max: mainDoorHeight - occulus.y2 - 50,
+                  onChange: value => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                    y1: value
+                  }))
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                  label: "Offset from Bottom (y2)",
+                  value: occulus.y2,
+                  min: 50,
+                  max: mainDoorHeight - occulus.y1 - 50,
+                  onChange: value => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                    y2: value
+                  }))
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+                  variant: "outlined",
+                  sx: {
+                    p: 2,
+                    mt: 1
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+                    spacing: 2,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                        checked: occulus.infillVisible,
+                        onChange: e => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                          infillVisible: e.target.checked
+                        }))
+                      }),
+                      label: "Show Infill"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+                      direction: "row",
+                      spacing: 2,
+                      alignItems: "flex-end",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                        label: "Infill Material",
+                        value: occulus.material,
+                        onChange: value => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                          material: value
+                        })),
+                        onApply: handleMaterialApply
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                      label: "Test Material",
+                      value: testOcculusInfillMaterial,
+                      onChange: setTestOcculusInfillMaterial
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                      label: "Infill Depth",
+                      value: occulus.depth,
+                      min: 10,
+                      max: door.theDoorDepth,
+                      onChange: value => setOcculus(_objectSpread(_objectSpread({}, occulus), {}, {
+                        depth: value
+                      }))
+                    })]
+                  })
+                })]
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+          elevation: 3,
+          sx: {
+            p: 2
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                checked: glassVisible,
+                onChange: e => setGlassVisible(e.target.checked)
+              }),
+              label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h6",
+                color: "primary",
+                children: "Glass"
+              })
+            }), glassVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialInput, {
+                label: "Glass Material",
+                value: doorFrame.glassMaterial || "",
+                onChange: value => setDoorFrame(_objectSpread(_objectSpread({}, doorFrame), {}, {
+                  glassMaterial: value
+                })),
+                onApply: handleMaterialApply
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaterialSelector, {
+                label: "Test Glass Material",
+                value: testGlassInfillMaterial,
+                onChange: setTestGlassInfillMaterial
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSlider, {
+                label: "Glass Depth",
+                value: glassDepth,
+                min: 4,
+                max: 20,
+                step: 0.5,
+                onChange: setGlassDepth
+              })]
+            })]
+          })
+        })]
+      })
+    })]
+  });
+};
+exports.Interface = Interface;