@crystaldesign/diva-web-planner-react 26.11.0-beta.2 → 26.11.0-beta.20

package/build/esm/{Planner2DGrid-be22bf89.js → Planner2DGrid-90b0b2a9.js}

@@ -1,7 +1,9 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-899b8922.js';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import './index-72ee1983.js';
 import { fabric } from 'fabric';
 import { Vector3, Vector2 } from '@crystaldesign/web-planner-logic';
 import { getLogger, DivaUtils } from '@crystaldesign/diva-core';
@@ -9,10 +11,8 @@ import 'react';
 import 'react-dynamic-multi-render';
 import 'react/jsx-runtime';
 import 'mobx-react-lite';
-import '@babel/runtime/helpers/asyncToGenerator';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/toConsumableArray';
 import '@crystaldesign/diva-utils';
 import 'mobx';
@@ -23,7 +23,13 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var LOG = getLogger('Planner', 'Planner2DGrid');
+
+/** Upper bound for one fabric SVG parse; buildSvgShape must never hang. */
+var SVG_PARSE_TIMEOUT_MS = 10000;
 var Planner2DGrid = /*#__PURE__*/function () {
   function Planner2DGrid(getConfiguratorState, getPlannerElementById, getPlannerViewConfig, forceViewToEnterPlannerMode, plannerPaletteViewInfo, settingsState) {
     var _this = this;
@@ -33,6 +39,8 @@ var Planner2DGrid = /*#__PURE__*/function () {
     _defineProperty(this, "dimGroupWidthName", 'DimensionGroup_Width');
     _defineProperty(this, "dimGroupHeightName", 'DimensionGroup_Height');
     _defineProperty(this, "canvas", void 0);
+    /** Counts render passes so an overtaken one cannot paint: shape building is async, so passes finish in completion order, not call order. */
+    _defineProperty(this, "renderGeneration", 0);
     _defineProperty(this, "canvas2DGridID", 'wcConfigurator-grid-2D-canvas');
     _defineProperty(this, "borderFactorHori", 0.7);
     //70 % des screens soll von der Planung ausgefüllt werden
@@ -604,61 +612,200 @@ var Planner2DGrid = /*#__PURE__*/function () {
     }
 
     /**
-     * This function is called in order to render the whole canvas with all planner shapes. First it cleans everything and then it updates everything.
-     * @param plannerElements   All planner elements in the scene
-     * @param boundingBox       The size and position information of the current planning
+     * Builds the fabric shape of every element that carries SVG data but no shape yet.
+     * The engine clears the shape when an element's SVG is reloaded, so a missing shape means stale or never built.
      */
   }, {
-    key: "updatePlannerView",
-    value: function updatePlannerView(plannerUIHandler, plannerElementsDict, boundingBox) {
-      var _this3 = this;
-      LOG.debug('UpdatePlanner2DGrid', 'Planner2DGrid');
-      this.clearView();
-      var curCanvasSize = plannerUIHandler.getCanvas2DGridSize();
-      if (this.canvas.getWidth() != curCanvasSize.x) this.canvas.setWidth(curCanvasSize.x);
-      if (this.canvas.getHeight() != curCanvasSize.y) this.canvas.setHeight(curCanvasSize.y);
-      if (plannerElementsDict.size == 0) return;
-      var allplannerSVGs = [];
-      plannerElementsDict.forEach(function (plannerElements, setId) {
-        for (var i = 0; i < plannerElements.length; i++) {
-          if (plannerElements[i].getSVGShapeOLF2D()) {
-            var svgShape2D = plannerElements[i].getSVGShapeOLF2D();
-            svgShape2D.scaleX = 1 / DivaUtils.UnitRecalc;
-            svgShape2D.scaleY = 1 / DivaUtils.UnitRecalc;
-            var corner = _this3.getWorldCorner(plannerElements[i], false);
-            svgShape2D.left = corner.x - boundingBox.worldPos.x;
-            svgShape2D.top = corner.z - boundingBox.worldPos.y;
-            svgShape2D.angle = plannerElements[i].getRotDeg();
-            allplannerSVGs.push(svgShape2D);
+    key: "ensureSvgShapes",
+    value: (function () {
+      var _ensureSvgShapes = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(plannerElementsDict) {
+        var _this3 = this;
+        var pending;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              pending = [];
+              plannerElementsDict.forEach(function (plannerElements) {
+                var _iterator = _createForOfIteratorHelper(plannerElements),
+                  _step;
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    var plannerElement = _step.value;
+                    if (plannerElement.getSVGShapeOLF2D() || !plannerElement.SvgData) continue;
+                    pending.push(_this3.buildSvgShape(plannerElement));
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
+                }
+              });
+              _context.next = 4;
+              return Promise.all(pending);
+            case 4:
+            case "end":
+              return _context.stop();
           }
+        }, _callee);
+      }));
+      function ensureSvgShapes(_x) {
+        return _ensureSvgShapes.apply(this, arguments);
+      }
+      return ensureSvgShapes;
+    }()
+    /**
+     * Parses the element's SVG into a fabric group. MUST always settle: fabric silently drops its callback
+     * on a malformed shape, and this promise is awaited up into the basket save, which would then hang forever.
+     */
+    )
+  }, {
+    key: "buildSvgShape",
+    value: function buildSvgShape(plannerElement) {
+      var _this4 = this;
+      return new Promise(function (resolve) {
+        var settled = false;
+        var finish = function finish() {
+          if (settled) return;
+          settled = true;
+          clearTimeout(timeout);
+          resolve();
+        };
+        var timeout = setTimeout(function () {
+          LOG.warn("2D shape build timed out after ".concat(SVG_PARSE_TIMEOUT_MS, "ms \u2014 element rendered without its SVG shape"), 'Planner2DGrid');
+          finish();
+        }, SVG_PARSE_TIMEOUT_MS);
+        try {
+          fabric.loadSVGFromString(plannerElement.SvgData, function (objects, options) {
+            // A late callback must be ignored: the element may already carry a newer SVG, and a stale shape counts as present.
+            if (settled) return;
+            try {
+              _this4.applySvgShape(plannerElement, objects, options);
+            } catch (error) {
+              LOG.warn("2D shape build failed: ".concat(error instanceof Error ? error.message : String(error)), 'Planner2DGrid');
+            }
+            finish();
+          });
+        } catch (error) {
+          LOG.warn("2D shape parse threw: ".concat(error instanceof Error ? error.message : String(error)), 'Planner2DGrid');
+          finish();
         }
       });
-      this.calcZoomFactor(boundingBox);
-      if (this.currZoomFactor > this.maxZoom) this.currZoomFactor = this.maxZoom;
-      var screenPosSet = new Vector2(boundingBox.worldPos.x * this.currZoomFactor, boundingBox.worldPos.y * this.currZoomFactor);
-      var setGroup = new fabric.Group(allplannerSVGs, {
+    }
+  }, {
+    key: "applySvgShape",
+    value: function applySvgShape(plannerElement, objects, options) {
+      for (var objNo = 0; objNo < objects.length; objNo++) {
+        var _object$id;
+        var object = objects[objNo];
+        object.setCoords();
+        var objID = (_object$id = object.id) === null || _object$id === void 0 ? void 0 : _object$id.toString();
+        if (objID && (objID.startsWith('OLF') || objID.startsWith('OLT'))) {
+          object.stroke = 'none';
+        }
+      }
+      var shape = fabric.util.groupSVGElements(objects, options);
+      shape.set({
         originX: 'left',
         originY: 'top',
-        left: screenPosSet.x,
-        top: screenPosSet.y,
-        opacity: 1,
-        scaleX: this.currZoomFactor,
-        scaleY: this.currZoomFactor,
-        hasControls: false,
-        selectable: false,
-        hoverCursor: 'default'
+        lockRotation: true,
+        hasRotatingPoint: true,
+        lockUniScaling: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        scaleX: 1,
+        scaleY: 1,
+        left: 0,
+        top: 0
       });
-      var offsetX = this.canvas.getWidth() / 2 - (setGroup.left + setGroup.width * this.currZoomFactor / 2);
-      var offsetY = this.canvas.getHeight() / 2 - (setGroup.top + setGroup.height * this.currZoomFactor / 2);
-      this.currCenteringOffset = new Vector2(offsetX, offsetY);
-      setGroup.left += offsetX;
-      setGroup.top += offsetY;
-      this.canvas.add(setGroup);
-      setGroup.bringToFront();
-      this.correctBackgroundPos(plannerUIHandler);
-      this.drawDimensions(setGroup, boundingBox);
-      this.canvas.renderAll();
+      plannerElement.SvgShapeOLF2D = shape;
     }
+
+    /**
+     * This function is called in order to render the whole canvas with all planner shapes. First it cleans everything and then it updates everything.
+     * @param plannerElements   All planner elements in the scene
+     * @param boundingBox       The size and position information of the current planning
+     */
+  }, {
+    key: "updatePlannerView",
+    value: (function () {
+      var _updatePlannerView = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(plannerUIHandler, plannerElementsDict, boundingBox) {
+        var _this5 = this;
+        var generation, curCanvasSize, allplannerSVGs, screenPosSet, setGroup, offsetX, offsetY;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              LOG.debug('UpdatePlanner2DGrid', 'Planner2DGrid');
+              generation = ++this.renderGeneration;
+              _context2.next = 4;
+              return this.ensureSvgShapes(plannerElementsDict);
+            case 4:
+              if (!(generation !== this.renderGeneration)) {
+                _context2.next = 6;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 6:
+              this.clearView();
+              curCanvasSize = plannerUIHandler.getCanvas2DGridSize();
+              if (this.canvas.getWidth() != curCanvasSize.x) this.canvas.setWidth(curCanvasSize.x);
+              if (this.canvas.getHeight() != curCanvasSize.y) this.canvas.setHeight(curCanvasSize.y);
+              if (!(plannerElementsDict.size == 0)) {
+                _context2.next = 12;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 12:
+              allplannerSVGs = [];
+              plannerElementsDict.forEach(function (plannerElements, setId) {
+                for (var i = 0; i < plannerElements.length; i++) {
+                  if (plannerElements[i].getSVGShapeOLF2D()) {
+                    var svgShape2D = plannerElements[i].getSVGShapeOLF2D();
+                    svgShape2D.scaleX = 1 / DivaUtils.UnitRecalc;
+                    svgShape2D.scaleY = 1 / DivaUtils.UnitRecalc;
+                    var corner = _this5.getWorldCorner(plannerElements[i], false);
+                    svgShape2D.left = corner.x - boundingBox.worldPos.x;
+                    svgShape2D.top = corner.z - boundingBox.worldPos.y;
+                    svgShape2D.angle = plannerElements[i].getRotDeg();
+                    allplannerSVGs.push(svgShape2D);
+                  }
+                }
+              });
+              this.calcZoomFactor(boundingBox);
+              if (this.currZoomFactor > this.maxZoom) this.currZoomFactor = this.maxZoom;
+              screenPosSet = new Vector2(boundingBox.worldPos.x * this.currZoomFactor, boundingBox.worldPos.y * this.currZoomFactor);
+              setGroup = new fabric.Group(allplannerSVGs, {
+                originX: 'left',
+                originY: 'top',
+                left: screenPosSet.x,
+                top: screenPosSet.y,
+                opacity: 1,
+                scaleX: this.currZoomFactor,
+                scaleY: this.currZoomFactor,
+                hasControls: false,
+                selectable: false,
+                hoverCursor: 'default'
+              });
+              offsetX = this.canvas.getWidth() / 2 - (setGroup.left + setGroup.width * this.currZoomFactor / 2);
+              offsetY = this.canvas.getHeight() / 2 - (setGroup.top + setGroup.height * this.currZoomFactor / 2);
+              this.currCenteringOffset = new Vector2(offsetX, offsetY);
+              setGroup.left += offsetX;
+              setGroup.top += offsetY;
+              this.canvas.add(setGroup);
+              setGroup.bringToFront();
+              this.correctBackgroundPos(plannerUIHandler);
+              this.drawDimensions(setGroup, boundingBox);
+              this.canvas.renderAll();
+            case 28:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function updatePlannerView(_x2, _x3, _x4) {
+        return _updatePlannerView.apply(this, arguments);
+      }
+      return updatePlannerView;
+    }())
   }]);
 }();
 

package/build/esm/{Planner3DImage-8f21be56.js → Planner3DImage-28657013.js}

@@ -1,7 +1,7 @@
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-899b8922.js';
+import './index-72ee1983.js';
 import { Vector2, Rendering } from '@crystaldesign/web-planner-logic';
 import 'react';
 import 'react-dynamic-multi-render';

package/build/esm/{UnlockCard-3fb76e70.js → UnlockCard-3f4735b2.js}

@@ -1,7 +1,7 @@
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject } from './index-899b8922.js';
+import { s as styleInject } from './index-72ee1983.js';
 import { useState, useEffect } from 'react';
 import { useTranslation, DivaUtils } from '@crystaldesign/diva-core';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/build/esm/{index-8a26a858.js → index-00d11115.js}

@@ -1,15 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-899b8922.js';
+import { u as useViewHandler } from './index-72ee1983.js';
 import 'react';
-import { s as shelfPlannerContainerRtv, a as shelfPlannerContainerHorizontal, b as shelfPlannerContainerVertical, e as expanded, c as shelfGrid, d as shelfGridBorder, w as warning, f as accessoires, g as configHeaderWrapper, h as closeButton, n as name, S as SelectedAcc, i as accessoireContainer } from './index-8b0a3174.js';
-import { c as collapsableInner } from './index-4a1aeedd.js';
-import ShelfAccessoires from './index-36c018f3.js';
-import ShelfAccessoiresOld from './index-24df5db1.js';
-import GridList from './index-be4baeb9.js';
+import { s as shelfPlannerContainerRtv, a as shelfPlannerContainerHorizontal, b as shelfPlannerContainerVertical, e as expanded, c as shelfGrid, d as shelfGridBorder, w as warning, f as accessoires, g as configHeaderWrapper, h as closeButton, n as name, S as SelectedAcc, i as accessoireContainer } from './index-f17b5e41.js';
+import { c as collapsableInner } from './index-c99d015b.js';
+import ShelfAccessoires from './index-064a58a8.js';
+import ShelfAccessoiresOld from './index-a937a019.js';
+import GridList from './index-211856e0.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import SettingsItemsWrapper from './index-7ae6b393.js';
+import SettingsItemsWrapper from './index-859f0bb8.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@crystaldesign/diva-core';
@@ -28,87 +28,146 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import 'sift';
-import './index-84f83c67.js';
-import './index-a784e48f.js';
-import './index-ada3c152.js';
-import './index-8b6d1b2c.js';
-import './index.module-ce9cbd44.js';
-import './index-37df8f9a.js';
-import './index-83d6bb83.js';
+import './index-98a74c16.js';
+import './index-d698061d.js';
+import './index-4f872377.js';
+import './index-33ce2722.js';
+import './index.module-5128abcd.js';
+import './index-20bc3775.js';
+import './index-272415ce.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-869d65ec.js';
+import './index-ad036a50.js';
 import 'react-dropdown';
-import './index-f74add7e.js';
+import './index-fdc1cd3c.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-624149c8.js';
-import './index-dc3778bc.js';
-import './index-ead3c18e.js';
+import './index-77c705e2.js';
+import './index-8206408d.js';
+import './index-f7feac8d.js';
 import '@crystaldesign/content-box';
-import './index-71c05fb2.js';
-import './index-45ae8ca7.js';
-import './index-985d0ac1.js';
-import './index-8ce6adb9.js';
+import './index-b24b2138.js';
+import './index-5ce2f921.js';
+import './index-f9162546.js';
+import './index-9a25ac85.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-3fb76e70.js';
-import './index-73c75e94.js';
-import './index-08d97746.js';
-import './index-5ad09ef7.js';
-import './index-61b4ebd3.js';
-import './index-afe33b8f.js';
-import './index-69650205.js';
+import './UnlockCard-3f4735b2.js';
+import './index-3d163534.js';
+import './index-feb5a4a4.js';
+import './index-ef505e6e.js';
+import './index-d06a14dc.js';
+import './index-1228f6d8.js';
+import './index-42f2a415.js';
 import 'react-laag';
-import './index.module-41cf846f.js';
-import './index-1e23c982.js';
-import './index-9562a9d8.js';
-import './index-f3bca3be.js';
-import './index-6fe3ff14.js';
-import './index-8d52e836.js';
-import './index.module-15c22604.js';
-import './index-1487d493.js';
-import './index-102ef56e.js';
-import './index-a7de9a70.js';
-import './index-031864a2.js';
-import './index-bd8d0479.js';
-import './index-1d2d7fb6.js';
-import './index-e7790e24.js';
-import './index-1010faf1.js';
-import './index-0908ac1e.js';
-import './index-84657f6d.js';
-import './index-fdd2f2b6.js';
-import './index-d8f30b62.js';
-import './index-2e12b9e1.js';
+import './index.module-4bbdd455.js';
+import './index-a41aa14b.js';
+import './index-d9100a6f.js';
+import './index-0c8051ed.js';
+import './index-d5081d20.js';
+import './index-a9ad56ce.js';
+import './index.module-86ecbbdf.js';
+import './index-9ad37044.js';
+import './index-13eba10c.js';
+import './index-50a4df67.js';
+import './index-0ec61a56.js';
+import './index-3d1b156f.js';
+import './index-76047a52.js';
+import './index-84b299d6.js';
+import './index-e5f412ac.js';
+import './index-0a53e583.js';
+import './index-1eda72f9.js';
+import './index-2e4dfaff.js';
+import './index-7ed4c41e.js';
+import './index-8888ff80.js';
 import 'rc-slider';
-import './index-16fe405b.js';
-import './index-e8eb5116.js';
-import './index-a52f90e6.js';
-import './index-da2a2a8b.js';
-import './index-7c7b6fc7.js';
+import './index-c3198b88.js';
+import './index-20a02afb.js';
+import './index-bd23079a.js';
+import './index-05ec5456.js';
+import './index-a037c82b.js';
 import 'react-confetti-explosion';
-import './index-17ba7b38.js';
-import './index-99c94447.js';
-import './index-048552f0.js';
+import './index-3a751e91.js';
+import './index-ad13b6fc.js';
+import './index-2198f950.js';
 import 'react-qr-code';
-import './index-eb30bc4d.js';
-import './useCustomDimensions-f2bb4edd.js';
-import './index-0ec473cc.js';
-import './ussIsSticky-6dac519b.js';
-import './index-85269def.js';
-import './index-10cd9e60.js';
-import './index-ac5a2704.js';
-import './index.module-25cdca01.js';
-import './index-f45ab225.js';
-import './index-46e9d390.js';
-import './index-89fd7133.js';
-import './index-52eb8599.js';
+import './index-c6392fa9.js';
+import './useCustomDimensions-79359314.js';
+import './index-89a5bec9.js';
+import './ussIsSticky-016ed6ab.js';
+import './index-f691c6e8.js';
+import './index-73fa2cb7.js';
+import './index-60ad7ed4.js';
+import './index.module-c9d42cc7.js';
+import './index-a91e9654.js';
+import './index-95d16f7e.js';
+import './index-ea08c6de.js';
+import './index-5da75e9a.js';
+import 'react-dom';
 import 'react-beautiful-dnd';
-import './index-5ec0c2dc.js';
-import './index-2a46675e.js';
-import './index-bf19aa67.js';
+import './index-dcd805e9.js';
+import './index-d9774535.js';
+import './index-38012daa.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/** Rough "size" of an accessory for picking the biggest family member (bbox volume, fallback cellSize). */
+var accSize = function accSize(i) {
+  var _i$width, _i$height, _i$depth;
+  return ((_i$width = i.width) !== null && _i$width !== void 0 ? _i$width : 0) * ((_i$height = i.height) !== null && _i$height !== void 0 ? _i$height : 0) * ((_i$depth = i.depth) !== null && _i$depth !== void 0 ? _i$depth : 0) || i.cellSize || 0;
+};
+
+/**
+ * `PaletteItemType` has no discriminant, but `cellSize` is declared only on `ShelfAccessoriesView`,
+ * so `in` narrows the union to it. Non-empty in practice: the SHELFPLANNER palette is fed solely by
+ * `ShelfItem.getAllItems()`, which is `ShelfAccessoriesView[]` — the element type is only lost when
+ * `updateItemPalette` widens it to `PaletteItemType[]`.
+ */
+var isShelfAccessory = function isShelfAccessory(i) {
+  return 'cellSize' in i;
+};
+
+/** Family key of a palette item: its accessory variant-family name, or null if it's not in a family. */
+function familyKeyOf(item) {
+  var _item$accessoireFamil;
+  return (_item$accessoireFamil = item.accessoireFamily) !== null && _item$accessoireFamil !== void 0 ? _item$accessoireFamil : null;
+}
+
+/**
+ * Collapse each variant family to a single palette entry — the BIGGEST member (its label/image/price
+ * represent the family; picking it auto-places that size, then the drag resizes to the right variant).
+ * Items not in a family pass through unchanged, keeping their original order.
+ */
+function collapseFamilies(items) {
+  var out = [];
+  var idxByFamily = new Map();
+  var _iterator = _createForOfIteratorHelper(items),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var it = _step.value;
+      var key = familyKeyOf(it);
+      if (!key) {
+        out.push(it);
+        continue;
+      }
+      var at = idxByFamily.get(key);
+      if (at === undefined) {
+        idxByFamily.set(key, out.length);
+        out.push(it);
+      } else if (accSize(it) > accSize(out[at])) {
+        out[at] = it;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return out;
+}
 var ShelfPlanner = function ShelfPlanner(_ref) {
   var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3, _viewHandler$settings4, _item$shelfPlannerGri, _item$shelfPlannerGri2, _item$shelfPlannerGri3, _filteredGroups$0$ite, _filteredGroups$, _selAccItem, _selAccItem2;
   var item = _ref.item,
@@ -121,11 +180,14 @@ var ShelfPlanner = function ShelfPlanner(_ref) {
     return g.ActAccessoire;
   })) !== null && _item$shelfPlannerGri !== void 0 ? _item$shelfPlannerGri : item === null || item === void 0 || (_item$shelfPlannerGri3 = item.shelfPlannerGrids) === null || _item$shelfPlannerGri3 === void 0 ? void 0 : _item$shelfPlannerGri3[0];
   if (!grid) return /*#__PURE__*/jsx(Fragment, {});
-  var items = (_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : [];
+  var allItems = ((_filteredGroups$0$ite = (_filteredGroups$ = filteredGroups[0]) === null || _filteredGroups$ === void 0 ? void 0 : _filteredGroups$.items) !== null && _filteredGroups$0$ite !== void 0 ? _filteredGroups$0$ite : []).filter(isShelfAccessory);
+  // In autoPlaceDrag, show one entry per variant family (the biggest member); the drag resizes it.
+  var items = collapseFamilies(allItems) ;
   var selAcc = grid.ActAccessoire;
   var selAccItem = undefined;
   if (selAcc) {
-    selAccItem = items.find(function (item) {
+    // Resolve from the full list — a selected member may have been collapsed away from the palette.
+    selAccItem = allItems.find(function (item) {
       return item.articleCodex == selAcc;
     });
   }
@@ -199,11 +261,14 @@ var ShelfPlanner = function ShelfPlanner(_ref) {
             overflow: mobileRTV ? 'visible' : undefined
           },
           children: items.map(function (acc, key) {
+            var _selAccItem3;
             return /*#__PURE__*/jsxs(Fragment, {
               children: [viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoires, {
                 grids: item.shelfPlannerGrids,
                 item: acc,
-                sel: acc.articleCodex == selAcc
+                // A collapsed family entry stands in for every member, so match the family too —
+                // the placed variant may be a smaller sibling of the entry on display.
+                sel: acc.articleCodex == selAcc || !!((_selAccItem3 = selAccItem) !== null && _selAccItem3 !== void 0 && _selAccItem3.accessoireFamily) && acc.accessoireFamily === selAccItem.accessoireFamily
               }, key), !viewHandler.productState.shelfPlannerRTV && /*#__PURE__*/jsx(ShelfAccessoiresOld, {
                 grids: item.shelfPlannerGrids,
                 item: acc