kitchen-simulator 11.0.0-react-18 → 11.0.0

package/lib/events/external/handlers.changeDoorStyle.js

@@ -47,7 +47,7 @@ function _handleChangeDoorStyleEvent() {
         case 4:
           ccdf_list = [];
           _loop = /*#__PURE__*/_regenerator["default"].mark(function _loop() {
-            var item, _doorStyle$id2, _item$long_name;
+            var item, _item$ccdf$catalog_ca, _item$ccdf, _item$ccdf$cabinet_id, _item$ccdf2, _doorStyle$id2, _item$long_name;
             return _regenerator["default"].wrap(function (_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
@@ -58,9 +58,10 @@ function _handleChangeDoorStyleEvent() {
                     ccdf_list.push({
                       cabinet_sku: item.type,
                       sizeinfo: item.sizeinfo,
-                      catalog_cabinet_sku: item.sku_number,
+                      catalog_cabinet_sku: (_item$ccdf$catalog_ca = item === null || item === void 0 || (_item$ccdf = item.ccdf) === null || _item$ccdf === void 0 ? void 0 : _item$ccdf.catalog_cabinet_sku) !== null && _item$ccdf$catalog_ca !== void 0 ? _item$ccdf$catalog_ca : item.sku_number,
+                      cabinet_id: (_item$ccdf$cabinet_id = item === null || item === void 0 || (_item$ccdf2 = item.ccdf) === null || _item$ccdf2 === void 0 ? void 0 : _item$ccdf2.cabinet_id) !== null && _item$ccdf$cabinet_id !== void 0 ? _item$ccdf$cabinet_id : null,
                       ccdf: item.ccdf,
-                      door_finish_id: (_doorStyle$id2 = doorStyle === null || doorStyle === void 0 ? void 0 : doorStyle.id) !== null && _doorStyle$id2 !== void 0 ? _doorStyle$id2 : null,
+                      target_door_finish_id: (_doorStyle$id2 = doorStyle === null || doorStyle === void 0 ? void 0 : doorStyle.id) !== null && _doorStyle$id2 !== void 0 ? _doorStyle$id2 : null,
                       long_name: (_item$long_name = item === null || item === void 0 ? void 0 : item.long_name) !== null && _item$long_name !== void 0 ? _item$long_name : null,
                       scene_cabinet_id: item.id
                     });
@@ -87,6 +88,7 @@ function _handleChangeDoorStyleEvent() {
             (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
               type: INTERNAL_EVENT_ITEMS_CATALOG,
               value: {
+                event_type: 'change_door_style',
                 ccdf_list: ccdf_list
               }
             },

package/lib/events/external/handlers.loadProject.js

@@ -38,13 +38,14 @@ function _handleLoadProjectEvent() {
               if (!ccdf_list.some(function (v) {
                 return v.scene_cabinet_id === it.id;
               })) {
-                var _it$long_name;
+                var _it$ccdf$catalog_cabi, _it$ccdf, _it$ccdf$cabinet_id, _it$ccdf2, _it$ccdf$door_finish_, _it$ccdf3, _it$long_name;
                 ccdf_list.push({
                   cabinet_sku: it.type,
                   sizeinfo: it.sizeinfo,
-                  catalog_cabinet_sku: it.sku_number,
+                  catalog_cabinet_sku: (_it$ccdf$catalog_cabi = it === null || it === void 0 || (_it$ccdf = it.ccdf) === null || _it$ccdf === void 0 ? void 0 : _it$ccdf.catalog_cabinet_sku) !== null && _it$ccdf$catalog_cabi !== void 0 ? _it$ccdf$catalog_cabi : it.sku_number,
+                  cabinet_id: (_it$ccdf$cabinet_id = it === null || it === void 0 || (_it$ccdf2 = it.ccdf) === null || _it$ccdf2 === void 0 ? void 0 : _it$ccdf2.cabinet_id) !== null && _it$ccdf$cabinet_id !== void 0 ? _it$ccdf$cabinet_id : it === null || it === void 0 ? void 0 : it.itemID,
                   ccdf: it.ccdf,
-                  door_finish_id: it.doorStyle.id,
+                  target_door_finish_id: (_it$ccdf$door_finish_ = it === null || it === void 0 || (_it$ccdf3 = it.ccdf) === null || _it$ccdf3 === void 0 ? void 0 : _it$ccdf3.door_finish_id) !== null && _it$ccdf$door_finish_ !== void 0 ? _it$ccdf$door_finish_ : it.doorStyle.id,
                   long_name: (_it$long_name = it === null || it === void 0 ? void 0 : it.long_name) !== null && _it$long_name !== void 0 ? _it$long_name : null,
                   scene_cabinet_id: it.id
                 });
@@ -59,6 +60,7 @@ function _handleLoadProjectEvent() {
               (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {
                 type: _constants.INTERNAL_EVENT_ITEMS_CATALOG,
                 value: {
+                  event_type: 'load_project',
                   ccdf_list: ccdf_list
                 }
               }, /*#__PURE__*/function () {

package/lib/events/external/handlers.syncScene.js

@@ -15,7 +15,7 @@ function handleSyncScene(props, state, layer, layerId, getMoldingDataOfScene2, c
 
   // get skin panel data
   var skinPanelExclusionSKUs = (_props$configData$ski = props === null || props === void 0 || (_props$configData2 = props.configData) === null || _props$configData2 === void 0 ? void 0 : _props$configData2.skinPanelExclusionSKUs) !== null && _props$configData$ski !== void 0 ? _props$configData$ski : [];
-  sceneData.layers[layerId].skinPanelData = computeSkinPanels(layer, skinPanelExclusionSKUs, props.catalog);
+  sceneData.layers[layerId].skinPanelData = computeSkinPanels(layer, skinPanelExclusionSKUs);
 
   // send scene object from 3DTool to HostApp using internalEvent
   (_props$onInternalEven = props.onInternalEvent) === null || _props$onInternalEven === void 0 || _props$onInternalEven.call(props, {

package/lib/mappings/external-events/mappers/ccdfMapper.js

@@ -36,9 +36,14 @@ function ccdfMapper(ccdf_list, layer) {
       if (!(0, _utils.isEmpty)(ccdf === null || ccdf === void 0 ? void 0 : ccdf.id)) {
         cdfId = ccdf.id;
       }
-      var assets3d = ccdf === null || ccdf === void 0 ? void 0 : ccdf.assets3d;
+      var assets3d = Array.isArray(ccdf === null || ccdf === void 0 ? void 0 : ccdf.assets3d) ? ccdf.assets3d : [];
       var updatedAssets3D = (0, _toConsumableArray2["default"])(assets3d);
-      // make structure
+
+      // Always set base cabinet gltf even when there are no door/drawer assets.
+      // This ensures we can render a naked cabinet (base-only) for unsupported door styles.
+      structure.base = (ccdf === null || ccdf === void 0 ? void 0 : ccdf.gltf) || cd.gltf;
+
+      // make structure (augment assets3d with door handles)
       assets3d.forEach(function (asItem) {
         // make door handle
         if (!(0, _utils.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
@@ -53,8 +58,6 @@ function ccdfMapper(ccdf_list, layer) {
         }
       });
       updatedAssets3D.forEach(function (asitem) {
-        // set base field with gltf
-        structure.base = (ccdf === null || ccdf === void 0 ? void 0 : ccdf.gltf) || cd.gltf;
         if (!(0, _utils.isEmpty)(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
           // make the structure using placeholder_name and gltf
           var phName = asitem.placeholder_name;
@@ -65,10 +68,13 @@ function ccdfMapper(ccdf_list, layer) {
         }
       });
       // make tempPlaceholders
-      tempPlaceholders.push({
-        structure: structure,
-        id: cdfId
-      });
+      // Only push when we have at least a base cabinet gltf to render.
+      if (!(0, _utils.isEmpty)(structure === null || structure === void 0 ? void 0 : structure.base)) {
+        tempPlaceholders.push({
+          structure: structure,
+          id: cdfId
+        });
+      }
       // make structure_json
       structure_json = {
         tempPlaceholders: tempPlaceholders

package/lib/shared/domain/cabinet-warning.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWarningCabinet = isWarningCabinet;
+var _constants = require("../../constants");
+var _immutable = require("../objects/immutable");
+// Centralized warning heuristic for cabinets across 2D/3D.
+// Rule: a cabinet is "warning" when there are no assets for the current door style.
+
+// Implementation: return true if item.category === 'cabinet' and (no ccdf or empty ccdf.assets3d)
+function isWarningCabinet(item) {
+  var _js$ccdf;
+  var js = (0, _immutable.toJSIfNeeded)(item);
+  var isCabinet = (js === null || js === void 0 ? void 0 : js.category) === _constants.ITEM_TYPE.CABINET;
+  var assets3d = js === null || js === void 0 || (_js$ccdf = js.ccdf) === null || _js$ccdf === void 0 ? void 0 : _js$ccdf.assets3d;
+  var hasAssets3d = !!assets3d && Array.isArray(assets3d) && assets3d.length > 0;
+  return isCabinet && !hasAssets3d;
+}

package/lib/utils/geometry.js

@@ -843,7 +843,8 @@ function getAllItemSpecified(scene, catalog, filter) {
       rotRad: item.rotation / 180 * Math.PI
     };
     var cat = item.type ? findCatalogElement(catalog, item.type) : null;
-    var info = cat === null || cat === void 0 ? void 0 : cat.info;
+    val.layoutpos = item.layoutpos;
+    val.is_corner = item.is_corner;
     var props = item.properties;
     var getSize = function getSize(key) {
       var _props$getIn, _props$getIn2, _props$getIn3;
@@ -856,15 +857,11 @@ function getAllItemSpecified(scene, catalog, filter) {
       depth: getSize('depth')
     };
     val.item = item;
-    if (info) {
-      val.layoutpos = info.layoutpos;
-      val.is_corner = info.is_corner;
-    }
 
     // Filter check
     if (Array.isArray(filter)) {
-      if (info && !filter.includes(info.layoutpos)) return;
-    } else if ((info === null || info === void 0 ? void 0 : info.layoutpos) !== filter || (0, _helper.isEmpty)(cat) || (cat === null || cat === void 0 ? void 0 : cat.type) === 'appliance' && ['Cook Top', 'Microwave'].includes(cat === null || cat === void 0 || (_cat$obj = cat.obj) === null || _cat$obj === void 0 ? void 0 : _cat$obj.category)) {
+      if (!val.layoutpos || !filter.includes(val.layoutpos)) return;
+    } else if (val.layoutpos !== filter || (0, _helper.isEmpty)(cat) || (cat === null || cat === void 0 ? void 0 : cat.type) === 'appliance' && ['Cook Top', 'Microwave'].includes(cat === null || cat === void 0 || (_cat$obj = cat.obj) === null || _cat$obj === void 0 ? void 0 : _cat$obj.category)) {
       return;
     }
 

package/lib/utils/helper.js

@@ -11,9 +11,8 @@ exports.base64Decode = void 0;
 exports.centering2D = centering2D;
 exports.compareSVGRect = void 0;
 exports.debugUtil = debugUtil;
-exports.getPathInfo = exports.getPath = void 0;
-exports.getSkuAliasFromCatalog = getSkuAliasFromCatalog;
-exports.getSkuAliasFromCatalogElement = getSkuAliasFromCatalogElement;
+exports.getCatalogCabinetSku = getCatalogCabinetSku;
+exports.getSignedUrl = exports.getPathInfo = exports.getPath = void 0;
 exports.handleCamRect = handleCamRect;
 exports.isCeilLimitation = isCeilLimitation;
 exports.isElevationView = isElevationView;
@@ -33,17 +32,87 @@ var _HDRCubeTextureLoader = require("three/examples/jsm/loaders/HDRCubeTextureLo
 var _constants = require("../constants");
 var Three = _interopRequireWildcard(require("three"));
 var _utils = require("./../components/viewer2d/utils");
+var _cabinetWarning = require("../shared/domain/cabinet-warning");
 var _convertUnitsLite = require("./convert-units-lite");
 var _math = require("./math");
+var _awsSdk = _interopRequireDefault(require("aws-sdk"));
 var _export = require("./export");
 var _geometry = require("./geometry");
+var _immutable = require("../shared/objects/immutable");
 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" != _typeof3(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 _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 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; }
+var s3 = new _awsSdk["default"].S3({
+  accessKeyId: process.env.REACT_APP_AWS_ID,
+  secretAccessKey: process.env.REACT_APP_AWS_SECRET
+});
+var s3ParseUrl = function s3ParseUrl(url) {
+  var _decodedUrl = decodeURIComponent(url);
+  var _result = null;
+
+  // http://s3.amazonaws.com/bucket/key1/key2
+  var match = decodedUrl.match(/^https?:\/\/s3.amazonaws.com\/([^\/]+)\/?(.*?)$/);
+  if (_match) {
+    _result = {
+      bucket: _match[1],
+      key: _match[2],
+      region: ''
+    };
+  }
+
+  // http://s3-aws-region.amazonaws.com/bucket/key1/key2
+  match = decodedUrl.match(/^https?:\/\/s3-([^.]+).amazonaws.com\/([^\/]+)\/?(.*?)$/);
+  if (_match) {
+    _result = {
+      bucket: _match[2],
+      key: _match[3],
+      region: _match[1]
+    };
+  }
+
+  // http://bucket.s3.amazonaws.com/key1/key2
+  match = decodedUrl.match(/^https?:\/\/([^.]+).s3.amazonaws.com\/?(.*?)$/);
+  if (_match) {
+    _result = {
+      bucket: _match[1],
+      key: _match[2],
+      region: ''
+    };
+  }
+
+  // http://bucket.s3-aws-region.amazonaws.com/key1/key2 or,
+  // http://bucket.s3.aws-region.amazonaws.com/key1/key2
+  match = decodedUrl.match(/^https?:\/\/([^.]+).(?:s3-|s3\.)([^.]+).amazonaws.com\/?(.*?)$/);
+  if (_match) {
+    _result = {
+      bucket: _match[1],
+      key: _match[3],
+      region: _match[2]
+    };
+  }
+  return _result;
+};
 var textureCube = exports.textureCube = new _HDRCubeTextureLoader.HDRCubeTextureLoader().setPath('/catalog/envMap/').load(_constants.HDR_URLS, function () {
   textureCube.magFilter = Three.LinearFilter;
   textureCube.needsUpdate = true;
 });
+var getSignedUrl = exports.getSignedUrl = function getSignedUrl(url) {
+  if (!url) return url;
+  var signedUrl = url;
+  try {
+    var _s3ParseUrl = s3ParseUrl(url),
+      bucket = _s3ParseUrl.bucket,
+      key = _s3ParseUrl.key;
+    signedUrl = s3.getSignedUrl('getObject', {
+      Bucket: bucket,
+      Key: key,
+      ResponseCacheControl: 'no-cache'
+    });
+  } catch (e) {
+    signedUrl = url;
+  }
+  return signedUrl;
+};
 var base64Decode = exports.base64Decode = function base64Decode(targetStr) {
   if (!targetStr) return null;
   try {
@@ -361,11 +430,11 @@ function centering2D(state) {
   if (viewer2DActions) updateViwer2D(viewer, viewer2DActions);
   return state;
 }
-function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
-  var pointArray = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+function updatePayloadOfInternalEvent(currentObject, layer) {
+  var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   if (isEmpty(currentObject)) return null;
   var updatedPayload = currentObject.toJS();
-  if (isEmpty(layer) || isEmpty(catalog)) return updatedPayload;
+  if (isEmpty(layer)) return updatedPayload;
   if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'lines') {
     // caculating length of selected line//
     var v_a = layer.vertices.get(currentObject.vertices.get(0));
@@ -376,7 +445,7 @@ function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     //////////////////////////////////////
   } else if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'items') {
     // check this cabinet has warning box
-    updatedPayload.isWarning = (0, _utils.isWarningItem)(currentObject);
+    updatedPayload.isWarning = (0, _cabinetWarning.isWarningCabinet)(currentObject);
     // check this item is available molding
     updatedPayload.isMoldingAvailable = _export.MoldingUtils.isEnableItemForMolding(layer, currentObject);
     // check this item is snapped to wall
@@ -385,7 +454,7 @@ function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
     if (pointArray) updatedPayload.distArray = pointArray;
 
     // update sku_number using sku_array
-    updatedPayload.sku_number = getSkuAliasFromCatalog(catalog, currentObject);
+    updatedPayload.sku_number = getCatalogCabinetSku(currentObject);
   } else if ((currentObject === null || currentObject === void 0 ? void 0 : currentObject.prototype) === 'holes') {
     var _calcDistancesFromHol = (0, _geometry.calcDistancesFromHoleToNearestOneOrWall)(currentObject, layer),
       distLeft = _calcDistancesFromHol.distLeft,
@@ -403,20 +472,9 @@ function updatePayloadOfInternalEvent(currentObject, layer, catalog) {
   }
   return updatedPayload;
 }
-function getSkuAliasFromCatalog(catalog, sceneObject) {
-  var _catalog$elements;
-  var sceneObjectJS = typeof (sceneObject === null || sceneObject === void 0 ? void 0 : sceneObject.toJS) === 'function' ? sceneObject.toJS() : sceneObject;
-  var elementName = sceneObjectJS === null || sceneObjectJS === void 0 ? void 0 : sceneObjectJS.name;
-  var catalogElement = catalog === null || catalog === void 0 || (_catalog$elements = catalog.elements) === null || _catalog$elements === void 0 ? void 0 : _catalog$elements[elementName];
-  return getSkuAliasFromCatalogElement(catalogElement, sceneObjectJS);
-}
-function getSkuAliasFromCatalogElement(catalogElement, sceneObject) {
-  var _sceneObjectJS$doorSt, _catalogElement$obj, _skuAlias$sku;
-  var sceneObjectJS = typeof (sceneObject === null || sceneObject === void 0 ? void 0 : sceneObject.toJS) === 'function' ? sceneObject.toJS() : sceneObject;
-  var doorColorId = sceneObjectJS === null || sceneObjectJS === void 0 || (_sceneObjectJS$doorSt = sceneObjectJS.doorStyle) === null || _sceneObjectJS$doorSt === void 0 ? void 0 : _sceneObjectJS$doorSt.id;
-  var skuArray = catalogElement === null || catalogElement === void 0 || (_catalogElement$obj = catalogElement.obj) === null || _catalogElement$obj === void 0 ? void 0 : _catalogElement$obj.skuArray;
-  var skuAlias = skuArray === null || skuArray === void 0 ? void 0 : skuArray.find(function (sku) {
-    return sku.door_color_id === doorColorId;
-  });
-  return (_skuAlias$sku = skuAlias === null || skuAlias === void 0 ? void 0 : skuAlias.sku) !== null && _skuAlias$sku !== void 0 ? _skuAlias$sku : sceneObjectJS === null || sceneObjectJS === void 0 ? void 0 : sceneObjectJS.sku_number;
+function getCatalogCabinetSku(sceneObject) {
+  var _sceneObjectJS$ccdf;
+  var sceneObjectJS = (0, _immutable.toJSIfNeeded)(sceneObject);
+  var ccdfSku = sceneObjectJS === null || sceneObjectJS === void 0 || (_sceneObjectJS$ccdf = sceneObjectJS.ccdf) === null || _sceneObjectJS$ccdf === void 0 ? void 0 : _sceneObjectJS$ccdf.catalog_cabinet_sku;
+  return ccdfSku !== null && ccdfSku !== void 0 ? ccdfSku : '';
 }

package/lib/utils/skinPanelEngine.js

@@ -501,16 +501,12 @@ function buildSkinPanelData(faces) {
   });
   return result;
 }
-function shouldExcludeSkinPanel(itemJS, exclusionSet, catalog) {
-  var _itemJS$doorStyle;
-  var cabinetSku = (0, _helper.getSkuAliasFromCatalog)(catalog, itemJS);
-  var doorColorSku = itemJS === null || itemJS === void 0 || (_itemJS$doorStyle = itemJS.doorStyle) === null || _itemJS$doorStyle === void 0 ? void 0 : _itemJS$doorStyle.sku;
-  if (!cabinetSku || !doorColorSku) return false;
-  return exclusionSet.has("".concat(cabinetSku, "-").concat(doorColorSku));
+function shouldExcludeSkinPanel(itemJS, exclusionSet) {
+  var catalogCabinetSku = (0, _helper.getCatalogCabinetSku)(itemJS);
+  return exclusionSet.has(catalogCabinetSku);
 }
 function computeSkinPanels(layer) {
   var skinPanelExclusionSKUs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var catalog = arguments.length > 2 ? arguments[2] : undefined;
   var exclusionSet = new Set(skinPanelExclusionSKUs);
 
   // Get candidate skin panel items and other items
@@ -518,7 +514,7 @@ function computeSkinPanels(layer) {
     skinPanelItems = _collectLayerItems.skinPanelItems,
     otherItems = _collectLayerItems.otherItems;
   var filteredSkinPanelItems = skinPanelItems.filter(function (item) {
-    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet, catalog);
+    return !shouldExcludeSkinPanel(item.toJS(), exclusionSet);
   });
 
   // Get all skin face list of [skinPanelItems] & [otherItems]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "11.0.0-react-18",
+  "version": "11.0.0",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",
@@ -61,6 +61,7 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@sentry/react": "^9.10.1",
+    "aws-sdk": "^2.984.0",
     "axios": "^0.20.0",
     "camera-controls": "^2.8.5",
     "clsx": "^2.1.1",
@@ -75,26 +76,36 @@
     "polylabel": "1.0.2",
     "posthog-js": "^1.271.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.1.0",
-    "react-svg-pan-zoom": "^3.12.1",
-    "redux": "^4.2.1",
+    "react": "^16.9.0",
+    "react-container-dimensions": "1.4.1",
+    "react-dom": "16.9.0",
+    "react-hotjar": "^1.0.11",
+    "react-icons": "3.5.0",
+    "react-redux": "5.0.7",
+    "react-svg-pan-zoom": "2.18.0",
+    "redux": "4.0.1",
     "three": "0.166.0",
     "moment": "^2.30.1",
     "jwt-decode": "^2.2.0",
+    "react-ga4": "^1.4.1",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
     "localstorage-slim": "^1.3.0",
+    "react-tabs": "3.0.0",
     "sass": "^1.29.0",
+    "reactjs-popup": "^2.0.4",
     "sass-loader": "^10.0.5",
+    "antd": "^4.24.16",
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.28.4",
     "@babel/plugin-transform-modules-commonjs": "^7.27.1",
     "@babel/plugin-transform-runtime": "^7.28.3",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@sentry/webpack-plugin": "^3.2.4",
     "assert": "^2.1.0",
     "babel-loader": "^9.1.3",
@@ -110,7 +121,11 @@
     "css-loader": "*",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.6.0",
+    "immutable-devtools": "0.1.4",
+    "mobile-detect": "^1.4.5",
     "path-browserify": "^1.0.1",
+    "react-query": "^3.39.3",
+    "react-router-dom": "5.1.2",
     "rimraf": "^2.6.3",
     "stream-browserify": "^3.0.0",
     "style-loader": "*",