kitchen-simulator 10.0.10 → 10.1.0

package/es/class/item.js

@@ -15,6 +15,7 @@ import { hasMoldingLayout } from "../utils/molding";
 import { getInstallationSuffix, isEmpty } from "../components/viewer2d/utils";
 import { historyPush } from "../utils/history";
 import { toJSIfNeeded } from "../shared/objects/immutable";
+import { normalizeLongName } from "../shared/domain/cabinet-identity";
 var allItemRect;
 var allItemSnap;
 var allLines;
@@ -268,10 +269,14 @@ var Item = /*#__PURE__*/function () {
         idSet = new Set(targetItemIDs);
       }
       layer.items.forEach(function (it) {
-        var _idSet, _picked$door_finish_i;
+        var _idSet, _ccdf_list$find, _picked$door_finish_i;
         var should = applyScope === DOORSTYLE_SCOPE_ALL ? true : (_idSet = idSet) === null || _idSet === void 0 ? void 0 : _idSet.has(it.id);
         if (!should) return;
-        var picked = ccdf_list.find(function (c) {
+
+        // Prefer stable join key: long_name. Fall back to cabinet_id for older payloads.
+        var picked = (_ccdf_list$find = ccdf_list.find(function (c) {
+          return (c === null || c === void 0 ? void 0 : c.long_name) && (it === null || it === void 0 ? void 0 : it.long_name) && normalizeLongName(c.long_name) === normalizeLongName(it.long_name);
+        })) !== null && _ccdf_list$find !== void 0 ? _ccdf_list$find : ccdf_list.find(function (c) {
           return (c === null || c === void 0 ? void 0 : c.cabinet_id) === it.itemID;
         });
         if (!picked) return;

package/es/devLiteRenderer.js

@@ -5,7 +5,8 @@ import React, { useState, useEffect } from 'react';
 import { Map } from 'immutable';
 import ContainerDimensions from 'react-container-dimensions';
 import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
-import mockProps from "./mocks/mockProps.json";
+import configData from "./mocks/configData.json";
+import projectJson from "./mocks/project.json";
 import cabinetPaylod from "./mocks/cabinetPayload.json";
 import appliancePaylod from "./mocks/appliancePayload.json";
 import doorStylePayload from "./mocks/doorStylePayload.json";
@@ -79,7 +80,7 @@ function WorkSpace(props) {
       var evt = {
         type: EXTERNAL_EVENT_LOAD_PROJECT,
         // send request for sync scene data to 3DTool
-        payload: mockProps.projectElement[0].project_data
+        payload: projectJson
       };
       setExternalEvent(evt);
     }
@@ -869,7 +870,7 @@ function WorkSpace(props) {
   }, "Setting-MeasurementUnit-'mm'")), /*#__PURE__*/React.createElement(LiteRenderer, {
     width: props.width,
     height: props.height,
-    configData: mockProps.configData,
+    configData: configData,
     options: options,
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",

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

@@ -1,7 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 export function handleChangeDoorStyleEvent(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8, _x9, _x0, _x1, _x10) {
   return _handleChangeDoorStyleEvent.apply(this, arguments);
@@ -51,12 +48,12 @@ function _handleChangeDoorStyleEvent() {
                   if (!ccdf_list.some(function (v) {
                     return item.itemID === v.itemID && item.name === v.name && doorStyle.id === v.doorFinishId;
                   })) {
-                    ccdf_list.push(_objectSpread(_objectSpread({}, item), {}, {
+                    ccdf_list.push({
                       cabinetSku: item.type,
                       sizeInfo: item.sizeinfo,
                       catalogSku: item.sku_number,
                       ccdf: item.ccdf
-                    }));
+                    });
                   }
                 case 1:
                 case "end":
@@ -92,7 +89,9 @@ function _handleChangeDoorStyleEvent() {
                 return _regeneratorRuntime.wrap(function (_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
-                      itemCDS = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list);
+                      // Map CCDF rows back to placed items using stable identity (long_name),
+                      // because host `cabinet_id` can vary by doorstyle.
+                      itemCDS = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list, targetItems);
                       mappedCabinetDefinitionList = ccdfMapper(result.ccdf_list, layer); // result: ccdf_list
                       rt = mergeSameElements(mappedCabinetDefinitionList);
                       _i = 0;

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

@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { convert } from "../../utils/convert-units-lite";
 import { INTERNAL_EVENT_ITEMS_CATALOG } from "../../constants";
 import { Scene, State } from "../../models";
+import { normalizeLongName } from "../../shared/domain/cabinet-identity";
 export function handleLoadProjectEvent(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8) {
   return _handleLoadProjectEvent.apply(this, arguments);
 }
@@ -32,8 +33,8 @@ function _handleLoadProjectEvent() {
                 var _it$doorStyle;
                 return it.itemID === v.itemID && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.id) === v.doorFinishId;
               })) ccdf_list.push({
-                cabinetSku: it.sku,
-                sizeInfo: it.sizeInfo,
+                cabinetSku: it.type,
+                sizeInfo: it.sizeinfo,
                 catalogSku: it.sku_number,
                 ccdf: it.ccdf
               });
@@ -56,7 +57,7 @@ function _handleLoadProjectEvent() {
                   return _regeneratorRuntime.wrap(function (_context) {
                     while (1) switch (_context.prev = _context.next) {
                       case 0:
-                        cdsList = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list);
+                        cdsList = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list, items);
                         evt.payload = updateProjectWithCDSList(evt.payload, cdsList);
 
                         // Attach matched ccdf to each scene instance before loading into state,
@@ -66,11 +67,13 @@ function _handleLoadProjectEvent() {
                         try {
                           resp = (_result$ccdf_list = result === null || result === void 0 ? void 0 : result.ccdf_list) !== null && _result$ccdf_list !== void 0 ? _result$ccdf_list : [];
                           Object.keys(items).forEach(function (k) {
-                            var _it$doorStyle$id, _it$doorStyle2;
+                            var _it$doorStyle$id, _it$doorStyle2, _resp$find;
                             var it = items[k];
                             var desiredDoorFinishId = (_it$doorStyle$id = it === null || it === void 0 || (_it$doorStyle2 = it.doorStyle) === null || _it$doorStyle2 === void 0 ? void 0 : _it$doorStyle2.id) !== null && _it$doorStyle$id !== void 0 ? _it$doorStyle$id : null;
                             if (!desiredDoorFinishId) return;
-                            var picked = resp.find(function (c) {
+                            var picked = (_resp$find = resp.find(function (c) {
+                              return (c === null || c === void 0 ? void 0 : c.long_name) && (it === null || it === void 0 ? void 0 : it.long_name) && normalizeLongName(c.long_name) === normalizeLongName(it.long_name);
+                            })) !== null && _resp$find !== void 0 ? _resp$find : resp.find(function (c) {
                               return (c === null || c === void 0 ? void 0 : c.cabinet_id) === it.itemID;
                             });
                             if (picked) {

package/es/mappings/external-events/mappers/addItemMapper.js

@@ -35,8 +35,8 @@ export function mapAddItemEvent(orgEvtPayload, state) {
   var cabinetDoorFinish = (_evtPayload3 = evtPayload) === null || _evtPayload3 === void 0 ? void 0 : _evtPayload3.ccdf;
   var assets3d = cabinetDoorFinish === null || cabinetDoorFinish === void 0 ? void 0 : cabinetDoorFinish.assets3d;
   if (isEmpty(assets3d)) {
-    // nothing to map; keep event as-is
-    return evtPayload;
+    var _evtPayload4;
+    tempStructure.base = (_evtPayload4 = evtPayload) === null || _evtPayload4 === void 0 ? void 0 : _evtPayload4.gltf;
   }
   if (!isEmpty(cabinetDoorFinish === null || cabinetDoorFinish === void 0 ? void 0 : cabinetDoorFinish.id)) {
     cabinetDoorFinishId = cabinetDoorFinish.id;
@@ -46,34 +46,36 @@ export function mapAddItemEvent(orgEvtPayload, state) {
   var updatedAssets3D = _toConsumableArray(assets3d);
 
   // first pass: inject door-handle assets where needed
-  assets3d.forEach(function (asItem) {
-    // make door handle
-    if (!isEmpty(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
-      var phName = asItem.placeholder_name;
-      if (phName.includes('door_')) {
-        var doorHandleName = phName.slice(0, phName.length - 2) + '_handle' + phName.slice(phName.length - 2);
-        updatedAssets3D.push({
-          placeholder_name: doorHandleName,
-          gltf: layer.get('doorHandle')
-        });
+  if (!isEmpty(assets3d)) {
+    assets3d.forEach(function (asItem) {
+      // make door handle
+      if (!isEmpty(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
+        var phName = asItem.placeholder_name;
+        if (phName.includes('door_')) {
+          var doorHandleName = phName.slice(0, phName.length - 2) + '_handle' + phName.slice(phName.length - 2);
+          updatedAssets3D.push({
+            placeholder_name: doorHandleName,
+            gltf: layer.get('doorHandle')
+          });
+        }
       }
-    }
-  });
+    });
 
-  // second pass: build structure + placeholders from full asset list
-  updatedAssets3D.forEach(function (asitem) {
-    var _evtPayload4;
-    // set base field with gltf
-    tempStructure.base = (_evtPayload4 = evtPayload) === null || _evtPayload4 === void 0 ? void 0 : _evtPayload4.gltf;
-    if (!isEmpty(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
-      // make the structure using placeholder_name and gltf
-      var phName = asitem.placeholder_name;
-      if (!phName.includes('_handle_') && !phName.includes('sink')) {
-        phName = 'base_' + phName;
+    // second pass: build structure + placeholders from full asset list
+    updatedAssets3D.forEach(function (asitem) {
+      var _evtPayload5;
+      // set base field with gltf
+      tempStructure.base = (_evtPayload5 = evtPayload) === null || _evtPayload5 === void 0 ? void 0 : _evtPayload5.gltf;
+      if (!isEmpty(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
+        // make the structure using placeholder_name and gltf
+        var phName = asitem.placeholder_name;
+        if (!phName.includes('_handle_') && !phName.includes('sink')) {
+          phName = 'base_' + phName;
+        }
+        tempStructure[phName] = asitem.gltf;
       }
-      tempStructure[phName] = asitem.gltf;
-    }
-  });
+    });
+  }
 
   // make the tempPlaceholders using structure and id
   tempPlaceholders.push({

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

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { isEmpty } from "../../../components/viewer2d/utils";
 import { toJSIfNeeded } from "../../../shared/objects/immutable";
+import { normalizeLongName } from "../../../shared/domain/cabinet-identity";
 export function ccdfMapper(ccdf_list, layer) {
   // This function make cabinet definition using ccdf, layer's item information and catalog
   // console.log(ccdf_list, catalog);
@@ -20,10 +21,12 @@ export function ccdfMapper(ccdf_list, layer) {
     var itemKeys = Object.keys(layerJS.items);
     var correctItemId = '';
     for (var i = 0; i < itemKeys.length; i++) {
-      if (layerJS.items[itemKeys[i]].itemID === ccdf.cabinet_id) correctItemId = layerJS.items[itemKeys[i]].id;
+      var it = layerJS.items[itemKeys[i]];
+      // Prefer stable join key: long_name. Fall back to cabinet_id.
+      if (!isEmpty(ccdf === null || ccdf === void 0 ? void 0 : ccdf.long_name) && !isEmpty(it === null || it === void 0 ? void 0 : it.long_name) && normalizeLongName(it.long_name) === normalizeLongName(ccdf.long_name) || it.itemID === ccdf.cabinet_id) correctItemId = layerJS.items[itemKeys[i]].id;
     }
     var cd = layerJS.items[correctItemId];
-    if (cd.itemID === ccdf.cabinet_id) {
+    if (cd && (!isEmpty(ccdf === null || ccdf === void 0 ? void 0 : ccdf.long_name) && !isEmpty(cd === null || cd === void 0 ? void 0 : cd.long_name) && normalizeLongName(cd.long_name) === normalizeLongName(ccdf.long_name) || cd.itemID === ccdf.cabinet_id)) {
       if (!isEmpty(ccdf === null || ccdf === void 0 ? void 0 : ccdf.id)) {
         cdfId = ccdf.id;
       }
@@ -45,7 +48,7 @@ export function ccdfMapper(ccdf_list, layer) {
       });
       updatedAssets3D.forEach(function (asitem) {
         // set base field with gltf
-        structure.base = cd.gltf;
+        structure.base = (ccdf === null || ccdf === void 0 ? void 0 : ccdf.gltf) || cd.gltf;
         if (!isEmpty(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
           // make the structure using placeholder_name and gltf
           var phName = asitem.placeholder_name;
@@ -75,7 +78,9 @@ export function ccdfMapper(ccdf_list, layer) {
         prototype: cd.prototype,
         base: cd.base,
         shape_svg: cd.shape_svg,
-        gltf: cd.gltf,
+        // If host provides cabinet base gltf/bin at CCDF top-level, prefer it.
+        gltf: (ccdf === null || ccdf === void 0 ? void 0 : ccdf.gltf) || cd.gltf,
+        bin: (ccdf === null || ccdf === void 0 ? void 0 : ccdf.bin) || (cd === null || cd === void 0 ? void 0 : cd.bin),
         structure_json: structure_json,
         layoutpos: cd.layoutpos,
         is_corner: cd.is_corner,

package/es/mappings/external-events/mappers/ccdfToCDSMapper.js

@@ -1,6 +1,11 @@
 import { isEmpty } from "../../../components/viewer2d/utils";
+import { normalizeLongName } from "../../../shared/domain/cabinet-identity";
 export function mapFromCCDFToCDS(ccdf_list) {
+  var sceneItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   // This function make CDS from CCDF_List
+  // `sceneItems` (optional) lets us map CCDF rows back onto placed scene items
+  // using stable identity (long_name), because host `cabinet_id` can vary per doorstyle.
+  var itemsArray = sceneItems ? Array.isArray(sceneItems) ? sceneItems : Object.values(sceneItems) : null;
   var itemCDSList = [];
   ccdf_list === null || ccdf_list === void 0 || ccdf_list.forEach(function (asItem) {
     // IMPORTANT: DIY-834-43
@@ -24,8 +29,21 @@ export function mapFromCCDFToCDS(ccdf_list) {
     });
     var data = [];
     data.push(itemCDSData);
+
+    // Prefer stable join key: long_name -> scene item's itemID.
+    // Fall back to host cabinet_id for backward compatibility.
+    var resolvedItemID = asItem === null || asItem === void 0 ? void 0 : asItem.cabinet_id;
+    var ln = asItem === null || asItem === void 0 ? void 0 : asItem.long_name;
+    if (itemsArray && !isEmpty(ln)) {
+      var nl = normalizeLongName(ln);
+      var match = itemsArray.find(function (it) {
+        return normalizeLongName(it === null || it === void 0 ? void 0 : it.long_name) === nl;
+      });
+      if (match !== null && match !== void 0 && match.itemID) resolvedItemID = match.itemID;
+    }
     itemCDSList.push({
-      itemID: asItem.cabinet_id,
+      itemID: resolvedItemID,
+      long_name: asItem === null || asItem === void 0 ? void 0 : asItem.long_name,
       data: data,
       cabinet_door_style_id: cabitnetDoorStyleId
     });

package/es/shared/domain/cabinet-identity.js

@@ -0,0 +1,6 @@
+// Domain utilities for identifying cabinets across backend responses and scene state.
+// We normalize `long_name` because it is the stable identity across door-style changes.
+
+export function normalizeLongName(value) {
+  return (value !== null && value !== void 0 ? value : '').toString().trim().toLowerCase();
+}

package/lib/class/item.js

@@ -20,6 +20,7 @@ var _molding = require("../utils/molding");
 var _utils = require("../components/viewer2d/utils");
 var _history = require("../utils/history");
 var _immutable2 = require("../shared/objects/immutable");
+var _cabinetIdentity = require("../shared/domain/cabinet-identity");
 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 allItemRect;
@@ -275,10 +276,14 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         idSet = new Set(targetItemIDs);
       }
       layer.items.forEach(function (it) {
-        var _idSet, _picked$door_finish_i;
+        var _idSet, _ccdf_list$find, _picked$door_finish_i;
         var should = applyScope === _constants.DOORSTYLE_SCOPE_ALL ? true : (_idSet = idSet) === null || _idSet === void 0 ? void 0 : _idSet.has(it.id);
         if (!should) return;
-        var picked = ccdf_list.find(function (c) {
+
+        // Prefer stable join key: long_name. Fall back to cabinet_id for older payloads.
+        var picked = (_ccdf_list$find = ccdf_list.find(function (c) {
+          return (c === null || c === void 0 ? void 0 : c.long_name) && (it === null || it === void 0 ? void 0 : it.long_name) && (0, _cabinetIdentity.normalizeLongName)(c.long_name) === (0, _cabinetIdentity.normalizeLongName)(it.long_name);
+        })) !== null && _ccdf_list$find !== void 0 ? _ccdf_list$find : ccdf_list.find(function (c) {
           return (c === null || c === void 0 ? void 0 : c.cabinet_id) === it.itemID;
         });
         if (!picked) return;

package/lib/devLiteRenderer.js

@@ -9,7 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _immutable = require("immutable");
 var _reactContainerDimensions = _interopRequireDefault(require("react-container-dimensions"));
 var _projectItemsCatalog = _interopRequireDefault(require("./mocks/projectItemsCatalog.json"));
-var _mockProps = _interopRequireDefault(require("./mocks/mockProps.json"));
+var _configData = _interopRequireDefault(require("./mocks/configData.json"));
+var _project = _interopRequireDefault(require("./mocks/project.json"));
 var _cabinetPayload = _interopRequireDefault(require("./mocks/cabinetPayload.json"));
 var _appliancePayload = _interopRequireDefault(require("./mocks/appliancePayload.json"));
 var _doorStylePayload = _interopRequireDefault(require("./mocks/doorStylePayload.json"));
@@ -83,7 +84,7 @@ function WorkSpace(props) {
       var evt = {
         type: _constants.EXTERNAL_EVENT_LOAD_PROJECT,
         // send request for sync scene data to 3DTool
-        payload: _mockProps["default"].projectElement[0].project_data
+        payload: _project["default"]
       };
       setExternalEvent(evt);
     }
@@ -873,7 +874,7 @@ function WorkSpace(props) {
   }, "Setting-MeasurementUnit-'mm'")), /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], {
     width: props.width,
     height: props.height,
-    configData: _mockProps["default"].configData,
+    configData: _configData["default"],
     options: options,
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",

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

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleChangeDoorStyleEvent = handleChangeDoorStyleEvent;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-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; }
 function handleChangeDoorStyleEvent(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8, _x9, _x0, _x1, _x10) {
   return _handleChangeDoorStyleEvent.apply(this, arguments);
 }
@@ -58,12 +55,12 @@ function _handleChangeDoorStyleEvent() {
                   if (!ccdf_list.some(function (v) {
                     return item.itemID === v.itemID && item.name === v.name && doorStyle.id === v.doorFinishId;
                   })) {
-                    ccdf_list.push(_objectSpread(_objectSpread({}, item), {}, {
+                    ccdf_list.push({
                       cabinetSku: item.type,
                       sizeInfo: item.sizeinfo,
                       catalogSku: item.sku_number,
                       ccdf: item.ccdf
-                    }));
+                    });
                   }
                 case 1:
                 case "end":
@@ -99,7 +96,9 @@ function _handleChangeDoorStyleEvent() {
                 return _regenerator["default"].wrap(function (_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
-                      itemCDS = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list);
+                      // Map CCDF rows back to placed items using stable identity (long_name),
+                      // because host `cabinet_id` can vary by doorstyle.
+                      itemCDS = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list, targetItems);
                       mappedCabinetDefinitionList = ccdfMapper(result.ccdf_list, layer); // result: ccdf_list
                       rt = mergeSameElements(mappedCabinetDefinitionList);
                       _i = 0;

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

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _constants = require("../../constants");
 var _models = require("../../models");
+var _cabinetIdentity = require("../../shared/domain/cabinet-identity");
 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; }
 function handleLoadProjectEvent(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8) {
@@ -39,8 +40,8 @@ function _handleLoadProjectEvent() {
                 var _it$doorStyle;
                 return it.itemID === v.itemID && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.id) === v.doorFinishId;
               })) ccdf_list.push({
-                cabinetSku: it.sku,
-                sizeInfo: it.sizeInfo,
+                cabinetSku: it.type,
+                sizeInfo: it.sizeinfo,
                 catalogSku: it.sku_number,
                 ccdf: it.ccdf
               });
@@ -63,7 +64,7 @@ function _handleLoadProjectEvent() {
                   return _regenerator["default"].wrap(function (_context) {
                     while (1) switch (_context.prev = _context.next) {
                       case 0:
-                        cdsList = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list);
+                        cdsList = mapFromCCDFToCDS(result === null || result === void 0 ? void 0 : result.ccdf_list, items);
                         evt.payload = updateProjectWithCDSList(evt.payload, cdsList);
 
                         // Attach matched ccdf to each scene instance before loading into state,
@@ -73,11 +74,13 @@ function _handleLoadProjectEvent() {
                         try {
                           resp = (_result$ccdf_list = result === null || result === void 0 ? void 0 : result.ccdf_list) !== null && _result$ccdf_list !== void 0 ? _result$ccdf_list : [];
                           Object.keys(items).forEach(function (k) {
-                            var _it$doorStyle$id, _it$doorStyle2;
+                            var _it$doorStyle$id, _it$doorStyle2, _resp$find;
                             var it = items[k];
                             var desiredDoorFinishId = (_it$doorStyle$id = it === null || it === void 0 || (_it$doorStyle2 = it.doorStyle) === null || _it$doorStyle2 === void 0 ? void 0 : _it$doorStyle2.id) !== null && _it$doorStyle$id !== void 0 ? _it$doorStyle$id : null;
                             if (!desiredDoorFinishId) return;
-                            var picked = resp.find(function (c) {
+                            var picked = (_resp$find = resp.find(function (c) {
+                              return (c === null || c === void 0 ? void 0 : c.long_name) && (it === null || it === void 0 ? void 0 : it.long_name) && (0, _cabinetIdentity.normalizeLongName)(c.long_name) === (0, _cabinetIdentity.normalizeLongName)(it.long_name);
+                            })) !== null && _resp$find !== void 0 ? _resp$find : resp.find(function (c) {
                               return (c === null || c === void 0 ? void 0 : c.cabinet_id) === it.itemID;
                             });
                             if (picked) {

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

@@ -41,8 +41,8 @@ function mapAddItemEvent(orgEvtPayload, state) {
   var cabinetDoorFinish = (_evtPayload3 = evtPayload) === null || _evtPayload3 === void 0 ? void 0 : _evtPayload3.ccdf;
   var assets3d = cabinetDoorFinish === null || cabinetDoorFinish === void 0 ? void 0 : cabinetDoorFinish.assets3d;
   if ((0, _helper.isEmpty)(assets3d)) {
-    // nothing to map; keep event as-is
-    return evtPayload;
+    var _evtPayload4;
+    tempStructure.base = (_evtPayload4 = evtPayload) === null || _evtPayload4 === void 0 ? void 0 : _evtPayload4.gltf;
   }
   if (!(0, _helper.isEmpty)(cabinetDoorFinish === null || cabinetDoorFinish === void 0 ? void 0 : cabinetDoorFinish.id)) {
     cabinetDoorFinishId = cabinetDoorFinish.id;
@@ -52,34 +52,36 @@ function mapAddItemEvent(orgEvtPayload, state) {
   var updatedAssets3D = (0, _toConsumableArray2["default"])(assets3d);
 
   // first pass: inject door-handle assets where needed
-  assets3d.forEach(function (asItem) {
-    // make door handle
-    if (!(0, _helper.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
-      var phName = asItem.placeholder_name;
-      if (phName.includes('door_')) {
-        var doorHandleName = phName.slice(0, phName.length - 2) + '_handle' + phName.slice(phName.length - 2);
-        updatedAssets3D.push({
-          placeholder_name: doorHandleName,
-          gltf: layer.get('doorHandle')
-        });
+  if (!(0, _helper.isEmpty)(assets3d)) {
+    assets3d.forEach(function (asItem) {
+      // make door handle
+      if (!(0, _helper.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.placeholder_name)) {
+        var phName = asItem.placeholder_name;
+        if (phName.includes('door_')) {
+          var doorHandleName = phName.slice(0, phName.length - 2) + '_handle' + phName.slice(phName.length - 2);
+          updatedAssets3D.push({
+            placeholder_name: doorHandleName,
+            gltf: layer.get('doorHandle')
+          });
+        }
       }
-    }
-  });
+    });
 
-  // second pass: build structure + placeholders from full asset list
-  updatedAssets3D.forEach(function (asitem) {
-    var _evtPayload4;
-    // set base field with gltf
-    tempStructure.base = (_evtPayload4 = evtPayload) === null || _evtPayload4 === void 0 ? void 0 : _evtPayload4.gltf;
-    if (!(0, _helper.isEmpty)(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
-      // make the structure using placeholder_name and gltf
-      var phName = asitem.placeholder_name;
-      if (!phName.includes('_handle_') && !phName.includes('sink')) {
-        phName = 'base_' + phName;
+    // second pass: build structure + placeholders from full asset list
+    updatedAssets3D.forEach(function (asitem) {
+      var _evtPayload5;
+      // set base field with gltf
+      tempStructure.base = (_evtPayload5 = evtPayload) === null || _evtPayload5 === void 0 ? void 0 : _evtPayload5.gltf;
+      if (!(0, _helper.isEmpty)(asitem === null || asitem === void 0 ? void 0 : asitem.placeholder_name)) {
+        // make the structure using placeholder_name and gltf
+        var phName = asitem.placeholder_name;
+        if (!phName.includes('_handle_') && !phName.includes('sink')) {
+          phName = 'base_' + phName;
+        }
+        tempStructure[phName] = asitem.gltf;
       }
-      tempStructure[phName] = asitem.gltf;
-    }
-  });
+    });
+  }
 
   // make the tempPlaceholders using structure and id
   tempPlaceholders.push({

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

@@ -8,6 +8,7 @@ exports.ccdfMapper = ccdfMapper;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("../../../components/viewer2d/utils");
 var _immutable = require("../../../shared/objects/immutable");
+var _cabinetIdentity = require("../../../shared/domain/cabinet-identity");
 function ccdfMapper(ccdf_list, layer) {
   // This function make cabinet definition using ccdf, layer's item information and catalog
   // console.log(ccdf_list, catalog);
@@ -27,10 +28,12 @@ function ccdfMapper(ccdf_list, layer) {
     var itemKeys = Object.keys(layerJS.items);
     var correctItemId = '';
     for (var i = 0; i < itemKeys.length; i++) {
-      if (layerJS.items[itemKeys[i]].itemID === ccdf.cabinet_id) correctItemId = layerJS.items[itemKeys[i]].id;
+      var it = layerJS.items[itemKeys[i]];
+      // Prefer stable join key: long_name. Fall back to cabinet_id.
+      if (!(0, _utils.isEmpty)(ccdf === null || ccdf === void 0 ? void 0 : ccdf.long_name) && !(0, _utils.isEmpty)(it === null || it === void 0 ? void 0 : it.long_name) && (0, _cabinetIdentity.normalizeLongName)(it.long_name) === (0, _cabinetIdentity.normalizeLongName)(ccdf.long_name) || it.itemID === ccdf.cabinet_id) correctItemId = layerJS.items[itemKeys[i]].id;
     }
     var cd = layerJS.items[correctItemId];
-    if (cd.itemID === ccdf.cabinet_id) {
+    if (cd && (!(0, _utils.isEmpty)(ccdf === null || ccdf === void 0 ? void 0 : ccdf.long_name) && !(0, _utils.isEmpty)(cd === null || cd === void 0 ? void 0 : cd.long_name) && (0, _cabinetIdentity.normalizeLongName)(cd.long_name) === (0, _cabinetIdentity.normalizeLongName)(ccdf.long_name) || cd.itemID === ccdf.cabinet_id)) {
       if (!(0, _utils.isEmpty)(ccdf === null || ccdf === void 0 ? void 0 : ccdf.id)) {
         cdfId = ccdf.id;
       }
@@ -52,7 +55,7 @@ function ccdfMapper(ccdf_list, layer) {
       });
       updatedAssets3D.forEach(function (asitem) {
         // set base field with gltf
-        structure.base = cd.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;
@@ -82,7 +85,9 @@ function ccdfMapper(ccdf_list, layer) {
         prototype: cd.prototype,
         base: cd.base,
         shape_svg: cd.shape_svg,
-        gltf: cd.gltf,
+        // If host provides cabinet base gltf/bin at CCDF top-level, prefer it.
+        gltf: (ccdf === null || ccdf === void 0 ? void 0 : ccdf.gltf) || cd.gltf,
+        bin: (ccdf === null || ccdf === void 0 ? void 0 : ccdf.bin) || (cd === null || cd === void 0 ? void 0 : cd.bin),
         structure_json: structure_json,
         layoutpos: cd.layoutpos,
         is_corner: cd.is_corner,

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

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mapFromCCDFToCDS = mapFromCCDFToCDS;
 var _utils = require("../../../components/viewer2d/utils");
+var _cabinetIdentity = require("../../../shared/domain/cabinet-identity");
 function mapFromCCDFToCDS(ccdf_list) {
+  var sceneItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   // This function make CDS from CCDF_List
+  // `sceneItems` (optional) lets us map CCDF rows back onto placed scene items
+  // using stable identity (long_name), because host `cabinet_id` can vary per doorstyle.
+  var itemsArray = sceneItems ? Array.isArray(sceneItems) ? sceneItems : Object.values(sceneItems) : null;
   var itemCDSList = [];
   ccdf_list === null || ccdf_list === void 0 || ccdf_list.forEach(function (asItem) {
     // IMPORTANT: DIY-834-43
@@ -30,8 +35,21 @@ function mapFromCCDFToCDS(ccdf_list) {
     });
     var data = [];
     data.push(itemCDSData);
+
+    // Prefer stable join key: long_name -> scene item's itemID.
+    // Fall back to host cabinet_id for backward compatibility.
+    var resolvedItemID = asItem === null || asItem === void 0 ? void 0 : asItem.cabinet_id;
+    var ln = asItem === null || asItem === void 0 ? void 0 : asItem.long_name;
+    if (itemsArray && !(0, _utils.isEmpty)(ln)) {
+      var nl = (0, _cabinetIdentity.normalizeLongName)(ln);
+      var match = itemsArray.find(function (it) {
+        return (0, _cabinetIdentity.normalizeLongName)(it === null || it === void 0 ? void 0 : it.long_name) === nl;
+      });
+      if (match !== null && match !== void 0 && match.itemID) resolvedItemID = match.itemID;
+    }
     itemCDSList.push({
-      itemID: asItem.cabinet_id,
+      itemID: resolvedItemID,
+      long_name: asItem === null || asItem === void 0 ? void 0 : asItem.long_name,
       data: data,
       cabinet_door_style_id: cabitnetDoorStyleId
     });

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeLongName = normalizeLongName;
+// Domain utilities for identifying cabinets across backend responses and scene state.
+// We normalize `long_name` because it is the stable identity across door-style changes.
+
+function normalizeLongName(value) {
+  return (value !== null && value !== void 0 ? value : '').toString().trim().toLowerCase();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "10.0.10",
+  "version": "10.1.0",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",