kitchen-simulator 1.1.1-test.75 → 1.1.1-test.77

package/lib/devLiteRenderer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _mockProps = _interopRequireDefault(require("./mocks/mockProps.json"));
+var _categoryData = _interopRequireDefault(require("./mocks/categoryData.json"));
+var _dataBundle = _interopRequireDefault(require("./mocks/dataBundle.json"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _LiteKitchenConfigurator = _interopRequireDefault(require("./LiteKitchenConfigurator"));
+var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
+// --- renderer props ---
+var options = {
+  unit: 'in',
+  enable3D: true
+};
+var onSave = function onSave(_ref) {
+  var payload = _ref.payload;
+  console.log('SAVE triggered:', payload.scene);
+};
+var onEvent = function onEvent(evt) {
+  console.log('EVENT:', evt.type, evt.payload);
+};
+var onExternalEvent = function onExternalEvent(evt) {
+  console.log('EXTERNAL EVENT:', evt.type, evt.payload);
+};
+var onError = function onError(err) {
+  console.error('ERROR:', err);
+};
+document.getElementById('app').style.display = 'block';
+_reactDom["default"].render(/*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+  className: "flex gap-4"
+}, /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], {
+  width: 1264,
+  height: 1164,
+  projectElement: _mockProps["default"].projectElement,
+  categoryData: _categoryData["default"],
+  dataBundle: _dataBundle["default"],
+  configData: _mockProps["default"].configData,
+  options: options,
+  logoImg: "/assets/logo.png",
+  companyUrl: "https://example.com",
+  toolbarButtons: [],
+  onSave: onSave,
+  onEvent: onEvent,
+  onError: onError
+}))), document.getElementById('app'));

package/lib/index.js

@@ -8,10 +8,10 @@ exports["default"] = void 0;
 exports.renderKitchenSimulator = renderKitchenSimulator;
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _react = _interopRequireDefault(require("react"));
-var _KitchenConfiguratorApp = _interopRequireDefault(require("./KitchenConfiguratorApp"));
+var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
 function renderKitchenSimulator(container) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var root = _reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(_KitchenConfiguratorApp["default"], props), container);
+  var root = _reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], props), container);
   return {
     root: root,
     unmount: function unmount() {

package/lib/models.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Vertex = exports.State = exports.Scene = exports.Line = exports.Layer = exports.Item = exports.Hole = exports.HistoryStructure = exports.Group = exports.Grid = exports.ElementsSet = exports.DefaultLayers = exports.DefaultGrids = exports.CatalogElement = exports.Catalog = exports.Area = void 0;
+exports.Vertex = exports.State = exports.Scene = exports.Line = exports.Layer = exports.Item = exports.Hole = exports.HistoryStructure = exports.Group = exports.Grid = exports.ElementsSet = exports.DefaultLayers = exports.DefaultGrids = exports.CatalogElement = exports.Catalog = exports.Area = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -508,5 +508,4 @@ var State = exports.State = /*#__PURE__*/function (_Record12) {
   userId: 0,
   isHelp: false,
   isCabinetDrawing: false
-}, 'State'));
-var _default = exports["default"] = State;
+}, 'State'));

package/lib/plugins/export.js

@@ -4,12 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Autosave", {
-  enumerable: true,
-  get: function get() {
-    return _autosave["default"];
-  }
-});
 Object.defineProperty(exports, "ConsoleDebugger", {
   enumerable: true,
   get: function get() {
@@ -23,11 +17,9 @@ Object.defineProperty(exports, "Keyboard", {
   }
 });
 exports["default"] = void 0;
-var _autosave = _interopRequireDefault(require("./autosave"));
 var _keyboard = _interopRequireDefault(require("./keyboard"));
 var _consoleDebugger = _interopRequireDefault(require("./console-debugger"));
 var _default = exports["default"] = {
-  Autosave: _autosave["default"],
   Keyboard: _keyboard["default"],
   ConsoleDebugger: _consoleDebugger["default"]
 };

package/lib/reducers/user-reducer.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = _default;
+var _propTypes = require("prop-types");
 var _constants = require("../constants");
 var initialState = {
   success: false,

package/lib/renderer.js

@@ -0,0 +1,478 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactContainerDimensions = _interopRequireDefault(require("react-container-dimensions"));
+var _immutable = _interopRequireWildcard(require("immutable"));
+var _immutableDevtools = _interopRequireDefault(require("immutable-devtools"));
+var _redux = require("redux");
+var _reactRedux = require("react-redux");
+var _reactHotjar = require("react-hotjar");
+var Sentry = _interopRequireWildcard(require("@sentry/react"));
+var _history = _interopRequireDefault(require("./@history"));
+var history = _interopRequireWildcard(require("history"));
+var Areas = _interopRequireWildcard(require("./catalog/areas/area/planner-element"));
+var Lines = _interopRequireWildcard(require("./catalog/lines/wall/planner-element"));
+var Holes = _interopRequireWildcard(require("./catalog/holes/export"));
+var _AppContext = _interopRequireDefault(require("./AppContext"));
+var _reactRouterDom = require("react-router-dom");
+var _itemLoader = require("./catalog/utils/item-loader");
+var _exporter = _interopRequireDefault(require("./catalog/utils/exporter"));
+var _axios = _interopRequireDefault(require("axios"));
+var _Login = _interopRequireDefault(require("./components/login/Login"));
+var _Register = _interopRequireDefault(require("./components/login/Register"));
+var _constants = require("./constants");
+var _mobileDetect = _interopRequireDefault(require("mobile-detect"));
+var zlib = _interopRequireWildcard(require("browserify-zlib"));
+var _buffer = _interopRequireDefault(require("buffer"));
+var _helper = require("./utils/helper");
+var _catalog = _interopRequireDefault(require("./catalog/catalog"));
+var _KitchenConfigurator = _interopRequireDefault(require("./KitchenConfigurator"));
+var _reducer = _interopRequireDefault(require("./reducers/reducer"));
+var _projectActions = require("./actions/project-actions");
+var _SVGLoader = require("three/examples/jsm/loaders/SVGLoader");
+var _CrossSignOn = _interopRequireDefault(require("./CrossSignOn"));
+var _reactQuery = require("react-query");
+var _devtools = require("react-query/devtools");
+var _ga = require("./analytics/ga4");
+var _react3 = require("posthog-js/react");
+var _disclaimer = _interopRequireDefault(require("./components/disclaimer/disclaimer"));
+var _toolbarScreenshotButton = _interopRequireDefault(require("./components/toolbar/button/toolbar-screenshot-button"));
+var PlannerModels = _interopRequireWildcard(require("./models"));
+var _export2 = require("./plugins/export");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, 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) { (0, _defineProperty2["default"])(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; }
+// Axios config
+_axios["default"].defaults.baseURL = _constants.API_SERVER_URL;
+var md = new _mobileDetect["default"](window.navigator.userAgent);
+var isMobile = md.mobile();
+//define state
+var AppState = (0, _immutable.Map)({
+  KitchenConfigurator: new PlannerModels.State()
+});
+console.log('Version: 378.58-202510_DIY-425-window-snap');
+_ga.GA.resetSessionKeys();
+if (_constants.MODE === 'staging') {
+  _ga.GA.init({
+    measurementId: 'G-H2BYBW7V6H'
+  });
+} else {
+  _ga.GA.init({
+    measurementId: 'G-YK2JCC9F9G'
+  });
+}
+_reactHotjar.hotjar.initialize('3010506', '6');
+isProduction && Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  environment: process.env.SENTRY_ENVIRONMENT
+});
+
+//define reducer
+var reducer = function reducer(state, action) {
+  state = state || AppState;
+  state = state.update('KitchenConfigurator', function (plannerState) {
+    return (0, _reducer["default"])(plannerState, action);
+  });
+  return state;
+};
+var catalog = new _catalog["default"]();
+var blackList = isProduction === true ? [] : ['UPDATE_MOUSE_COORDS', 'UPDATE_ZOOM_SCALE', 'UPDATE_2D_CAMERA'];
+if (!isProduction) {
+  console.info('Environment is in development and these actions will be blacklisted', blackList);
+  console.info('Enable Chrome custom formatter for Immutable pretty print');
+  (0, _immutableDevtools["default"])(_immutable["default"]);
+}
+var options = {
+  api_host: process.env.VITE_PUBLIC_POSTHOG_HOST,
+  // important for 3D/canvas replays
+  session_recording: {
+    recordCanvas: true
+  },
+  // we'll capture pageviews manually if needed
+  capture_pageview: false
+};
+
+//init store
+var store = (0, _redux.createStore)(reducer, null, !isProduction && window.devToolsExtension ? window.devToolsExtension({
+  features: {
+    pause: true,
+    // start/pause recording of dispatched actions
+    lock: true,
+    // lock/unlock dispatching actions and side effects
+    persist: true,
+    // persist states on page reloading
+    "export": true,
+    // export history of actions in a file
+    "import": 'custom',
+    // import history of actions from a file
+    jump: true,
+    // jump back and forth (time travelling)
+    skip: true,
+    // skip (cancel) actions
+    reorder: true,
+    // drag and drop actions in the history list
+    dispatch: true,
+    // dispatch custom actions or action creators
+    test: true // generate tests for the selected actions
+  },
+  actionsBlacklist: blackList,
+  maxAge: 999999
+}) : function (f) {
+  return f;
+});
+var plugins = [(0, _export2.Keyboard)(), (0, _export2.ConsoleDebugger)()];
+var toolbarButtons = [_toolbarScreenshotButton["default"]];
+var categoryData;
+sessionStorage.setItem('visualizerName', (0, _helper.getPathInfo)(1));
+if (!isMobile) {
+  _axios["default"].get("".concat(_constants.API_SERVER_URL, "/api/dealer/").concat((0, _helper.getPathInfo)(1), "/config")).then(/*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(res) {
+      var _res$data, success, id, logoImg, companyUrl, config, configdata;
+      return _regenerator["default"].wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _res$data = res.data, success = _res$data.success, id = _res$data.id, logoImg = _res$data.logoImg, companyUrl = _res$data.companyUrl, config = _res$data.config;
+            configdata = JSON.parse(config);
+            if (!(success === false || id === 0 && logoImg === '' && companyUrl === '')) {
+              _context3.next = 1;
+              break;
+            }
+            alert('No Catalog');
+            return _context3.abrupt("return");
+          case 1:
+            _context3.next = 2;
+            return _axios["default"].post("".concat(_constants.API_SERVER_URL, "/api/planner/read/planner"), {
+              type: _constants.MODE === 'staging' ? 2 : 1
+            }, {
+              responseType: 'arraybuffer'
+            }).then(/*#__PURE__*/function () {
+              var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(response) {
+                var unzip_data, data, appliances, lighting, furnishing, success, svgLoadPromises, outlineSVGData, Item, x, _x4, _x5, _x6, MainComponent, queryClient, MainApp;
+                return _regenerator["default"].wrap(function (_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      unzip_data = JSON.parse(zlib.unzipSync(new _buffer["default"].Buffer.from(response.data)).toString());
+                      data = unzip_data.data, appliances = unzip_data.appliances, lighting = unzip_data.lighting, furnishing = unzip_data.furnishing, success = unzip_data.success;
+                      if (success === false) {
+                        console.log(_constants.NO_DATA_DATABASE);
+                      }
+                      if (success === 'error') {
+                        alert(_constants.ERROR_DATABASE);
+                      }
+                      _context2.next = 1;
+                      return _axios["default"].post("".concat(_constants.API_SERVER_URL, "/api/toolbar/getCategoryData"), {
+                        type: _constants.MODE === 'staging' ? 2 : 1
+                      }, {
+                        responseType: 'arraybuffer'
+                      }).then(function (response) {
+                        categoryData = JSON.parse(zlib.unzipSync(new _buffer["default"].Buffer.from(response.data)).toString());
+                        var _categoryData$data = categoryData.data,
+                          catalogs = _categoryData$data.catalogs,
+                          colorAlias = _categoryData$data.colorAlias,
+                          subgroups = _categoryData$data.subgroups;
+                        var door_color_alias = [];
+                        var subgroup_ids = catalogs.filter(function (item) {
+                          return item.id == id;
+                        })[0].manufacturer_subgroup_ids.split(',');
+                        var door_color_alias_ids = [];
+                        subgroups.forEach(function (subgroup) {
+                          if (subgroup_ids.some(function (id) {
+                            return id == subgroup.id.toString();
+                          })) {
+                            subgroup.door_color_alias_ids.split(',').forEach(function (item) {
+                              item != '' && door_color_alias_ids.push(item);
+                            });
+                          }
+                        });
+                        colorAlias.forEach(function (color) {
+                          return door_color_alias_ids.some(function (id) {
+                            return id == color.id.toString();
+                          }) && door_color_alias.push(color);
+                        });
+                        var doorStyleData = categoryData.data.doorStyles.items;
+                        categoryData.data.doorStyles.items = doorStyleData.treeStruct;
+                        // construct a doorStyle variable
+                        door_color_alias.forEach(function (dca) {
+                          doorStyleData.doorColorData.forEach(function (dc) {
+                            // convert string into integer.
+                            dc.door_style_id = parseInt(dc.door_style_id);
+
+                            // find the original for the alias.
+                            if (dc.id !== dca.door_color_id) return;
+                            dc.name = dca.alias_name;
+                            dc.color_sku_alias = dca.sku_alias_name;
+
+                            // judge the door style of the current door color
+                            doorStyleData.treeStruct.forEach(function (el) {
+                              el.items.forEach(function (elem) {
+                                return dc.door_style_id === elem.id && (dc.door_style_name = elem.name);
+                              });
+                            });
+
+                            // convert string into array
+                            dca.alias_installation_type = (0, _helper.isEmpty)(dca.alias_installation_type) ? [] : dca.alias_installation_type.split(',').map(function (item) {
+                              return parseInt(item);
+                            });
+
+                            // add door color to doorStyle variable according to 'alias_installation_type' of its alias
+                            categoryData.data.doorStyles.items.forEach(function (item) {
+                              if (dca.alias_installation_type.some(function (ait) {
+                                return ait === item.id;
+                              })) item.items.forEach(function (ds) {
+                                if (ds.name === dc.door_style_name) ds.items.push(dc);
+                              });
+                            });
+                          });
+                        });
+                        var molding = [];
+                        var toeMoldingData = [];
+                        var cabinets = categoryData.data.cabinets;
+                        cabinets[cabinets.length - 1].items.forEach(function (index) {
+                          if (index.name.toLowerCase().includes('molding')) {
+                            index.items.forEach(function (item) {
+                              molding.push(item);
+                            });
+                          }
+                          // store all toe kick molding templates
+                          if (index.name.includes(_constants.TOE_KICK_MOLDING)) {
+                            index.items.forEach(function (item) {
+                              toeMoldingData.push(item);
+                            });
+                          }
+                        });
+                        categoryData.data.toeMoldingData = toeMoldingData;
+                        var promises = molding.map(function (child) {
+                          return new Promise(function (resolve, reject) {
+                            var url = child === null || child === void 0 ? void 0 : child.shape_svg;
+                            if (!url) {
+                              // Skip if no SVG URL available
+                              return resolve();
+                            }
+                            var loader = new _SVGLoader.SVGLoader();
+                            loader.load(url, function (data) {
+                              var _data$xml$viewBox$ani, _data$xml, _data$xml$viewBox$ani2, _data$xml2;
+                              child.data = {
+                                paths: data.paths,
+                                svg_width: (_data$xml$viewBox$ani = (_data$xml = data.xml) === null || _data$xml === void 0 || (_data$xml = _data$xml.viewBox) === null || _data$xml === void 0 || (_data$xml = _data$xml.animVal) === null || _data$xml === void 0 ? void 0 : _data$xml.width) !== null && _data$xml$viewBox$ani !== void 0 ? _data$xml$viewBox$ani : 0,
+                                svg_height: (_data$xml$viewBox$ani2 = (_data$xml2 = data.xml) === null || _data$xml2 === void 0 || (_data$xml2 = _data$xml2.viewBox) === null || _data$xml2 === void 0 || (_data$xml2 = _data$xml2.animVal) === null || _data$xml2 === void 0 ? void 0 : _data$xml2.height) !== null && _data$xml$viewBox$ani2 !== void 0 ? _data$xml$viewBox$ani2 : 0
+                              };
+                              resolve();
+                            }, null, function (error) {
+                              console.error(error);
+                              reject(error);
+                            });
+                          });
+                        });
+                        return Promise.all(promises);
+                      });
+                    case 1:
+                      // Load Outline SVG Data
+                      svgLoadPromises = data.map(/*#__PURE__*/function () {
+                        var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(item) {
+                          var _parsed$xml$viewBox, _parsed$xml$viewBox2, _response, svgText, loader, parsed, _t;
+                          return _regenerator["default"].wrap(function (_context) {
+                            while (1) switch (_context.prev = _context.next) {
+                              case 0:
+                                if (!item.outline) {
+                                  _context.next = 6;
+                                  break;
+                                }
+                                _context.prev = 1;
+                                _context.next = 2;
+                                return fetch(item.outline, {
+                                  cache: 'no-store'
+                                });
+                              case 2:
+                                _response = _context.sent;
+                                _context.next = 3;
+                                return _response.text();
+                              case 3:
+                                svgText = _context.sent;
+                                loader = new _SVGLoader.SVGLoader();
+                                parsed = loader.parse(svgText);
+                                if (!(0, _helper.isEmpty)(parsed.paths)) {
+                                  _context.next = 4;
+                                  break;
+                                }
+                                return _context.abrupt("return", null);
+                              case 4:
+                                return _context.abrupt("return", {
+                                  paths: parsed.paths,
+                                  svgWidth: parseFloat(parsed.xml.getAttribute('width')) || ((_parsed$xml$viewBox = parsed.xml.viewBox) === null || _parsed$xml$viewBox === void 0 || (_parsed$xml$viewBox = _parsed$xml$viewBox.animVal) === null || _parsed$xml$viewBox === void 0 ? void 0 : _parsed$xml$viewBox.width) || 0,
+                                  svgHeight: parseFloat(parsed.xml.getAttribute('height')) || ((_parsed$xml$viewBox2 = parsed.xml.viewBox) === null || _parsed$xml$viewBox2 === void 0 || (_parsed$xml$viewBox2 = _parsed$xml$viewBox2.animVal) === null || _parsed$xml$viewBox2 === void 0 ? void 0 : _parsed$xml$viewBox2.height) || 0,
+                                  reverse: !!parseFloat(parsed.xml.getAttribute('height')) ? false : true
+                                });
+                              case 5:
+                                _context.prev = 5;
+                                _t = _context["catch"](1);
+                                console.error('Failed to load SVG:', item.outline, _t);
+                                return _context.abrupt("return", null);
+                              case 6:
+                                return _context.abrupt("return", null);
+                              case 7:
+                              case "end":
+                                return _context.stop();
+                            }
+                          }, _callee, null, [[1, 5]]);
+                        }));
+                        return function (_x3) {
+                          return _ref3.apply(this, arguments);
+                        };
+                      }());
+                      _context2.next = 2;
+                      return Promise.all(svgLoadPromises);
+                    case 2:
+                      outlineSVGData = _context2.sent;
+                      // End: Load Outline SVG Data
+                      Item = [];
+                      data.forEach(function (obj, index) {
+                        Item.push((0, _exporter["default"])(_objectSpread(_objectSpread({}, obj), {}, {
+                          type: 'cabinet',
+                          outlineSVGData: outlineSVGData[index],
+                          render2DItem: _itemLoader.render2DItem,
+                          render3DItem: _itemLoader.render3DItem
+                        })));
+                      });
+                      appliances.forEach(function (obj) {
+                        Item.push((0, _exporter["default"])(_objectSpread(_objectSpread({}, obj), {}, {
+                          render2DItem: _itemLoader.render2DItem,
+                          render3DItem: _itemLoader.render3DApplianceItem,
+                          type: 'appliance'
+                        })));
+                      });
+                      lighting.forEach(function (obj) {
+                        Item.push((0, _exporter["default"])(_objectSpread(_objectSpread({}, obj), {}, {
+                          type: 'lighting',
+                          render2DItem: _itemLoader.render2DItem,
+                          render3DItem: _itemLoader.render3DLightingItem
+                        })));
+                      });
+                      furnishing.forEach(function (obj) {
+                        Item.push((0, _exporter["default"])(_objectSpread(_objectSpread({}, obj), {}, {
+                          type: 'furnishing',
+                          render2DItem: _itemLoader.render2DItem,
+                          render3DItem: _itemLoader.render3DApplianceItem
+                        })));
+                      });
+                      for (x in Areas) catalog.registerElement(Areas[x]);
+                      for (_x4 in Lines) catalog.registerElement(Lines[_x4]);
+                      for (_x5 in Holes) catalog.registerElement(Holes[_x5]);
+                      catalog.registerCategory('Windows', 'Windows', [Holes.windowClear, Holes.windowCross, Holes.windowDoubleHung, Holes.windowVertical]);
+                      catalog.registerCategory('Doors', 'Doors', [Holes.doorInterior, Holes.doorExterior, Holes.doorCloset, Holes.doorSliding, Holes.doorwayFramed, Holes.doorwayFrameless]);
+                      for (_x6 in Item) catalog.registerElement(Item[_x6]);
+                      MainComponent = function MainComponent(props, width, height) {
+                        return /*#__PURE__*/_react["default"].createElement(_KitchenConfigurator["default"], (0, _extends2["default"])({
+                          catalog: catalog,
+                          width: width,
+                          height: height
+                        }, props, {
+                          logoImage: logoImg,
+                          companyURL: companyUrl,
+                          plugins: plugins,
+                          toolbarButtons: toolbarButtons,
+                          stateExtractor: function stateExtractor(state) {
+                            return state.get('KitchenConfigurator');
+                          },
+                          categoryData: categoryData,
+                          data: data,
+                          configData: configdata
+                        }));
+                      };
+                      queryClient = new _reactQuery.QueryClient();
+                      MainApp = function MainApp(props) {
+                        return /*#__PURE__*/_react["default"].createElement(_reactQuery.QueryClientProvider, {
+                          client: queryClient
+                        }, /*#__PURE__*/_react["default"].createElement(_devtools.ReactQueryDevtools, {
+                          initialIsOpen: false
+                        }), /*#__PURE__*/_react["default"].createElement(_AppContext["default"].Provider, null, /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+                          store: store
+                        }, /*#__PURE__*/_react["default"].createElement(_react3.PostHogProvider, {
+                          apiKey: process.env.VITE_PUBLIC_POSTHOG_KEY,
+                          options: options
+                        }, /*#__PURE__*/_react["default"].createElement(_reactContainerDimensions["default"], null, function (_ref4) {
+                          var width = _ref4.width,
+                            height = _ref4.height;
+                          return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.HashRouter, {
+                            history: history.createHashHistory()
+                          }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Router, {
+                            history: _history["default"]
+                          }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+                            exact: true,
+                            path: "/:visualizerName/",
+                            name: "kc",
+                            render: function render(routeProps) {
+                              return /*#__PURE__*/_react["default"].createElement(MainComponent, (0, _extends2["default"])({}, routeProps, props, {
+                                width: width,
+                                height: height
+                              }));
+                            }
+                          }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+                            path: "/login",
+                            render: function render() {
+                              return /*#__PURE__*/_react["default"].createElement(_Login["default"], null);
+                            }
+                          }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+                            path: "/register",
+                            render: function render() {
+                              return /*#__PURE__*/_react["default"].createElement(_Register["default"], null);
+                            }
+                          }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
+                            path: "/:visualizerName/project/:role/:token/:pid",
+                            render: function render(routeProps) {
+                              return /*#__PURE__*/_react["default"].createElement(MainComponent, (0, _extends2["default"])({}, routeProps, props, {
+                                width: width,
+                                height: height
+                              }));
+                            }
+                          }))));
+                        })))));
+                      };
+                      setTimeout(function () {
+                        _reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(_CrossSignOn["default"], {
+                          App: MainApp
+                        }), document.getElementById('app'));
+                      }, 100);
+                    case 3:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              }));
+              return function (_x2) {
+                return _ref2.apply(this, arguments);
+              };
+            }())["catch"](function (err) {
+              alert('Something wrong happened. Do you want to clear the cache and restart the app?');
+              console.log('Failed to load Category Data in src/renderer.jsx', err);
+              sessionStorage.clear();
+              store.dispatch((0, _projectActions.newProject)());
+            });
+          case 2:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+} else {
+  _reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(_disclaimer["default"], {
+    open: true,
+    onClose: function onClose() {
+      if (window.history.length > 1) {
+        window.history.back();
+      } else {
+        window.location.href = 'https://addovisuals.com/'; // fallback to home
+      }
+    }
+  }), document.getElementById('app'));
+}

package/lib/styles/tabs.css

@@ -0,0 +1,40 @@
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected,
+.react-tabs__tab:focus {
+  border-color: #aaa;
+  color: #1ca6fc;
+  outline: none;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}