@crystaldesign/diva-web-planner-react 26.12.0-beta.2 → 26.12.0-beta.21

package/build/esm/{index-d892a48f.js → index-5466d458.js}

@@ -1,17 +1,17 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-a71d1695.js';
+import { s as styleInject, u as useViewHandler } from './index-591eb01e.js';
 import classnames from 'classnames';
 import { useEffect } from 'react';
-import Inputbox from './index-6c3c1054.js';
-import Product from './index-98b6a736.js';
-import Settings from './index-0238f439.js';
-import TabGroup from './index-e60b4b07.js';
-import NavigationButtons from './index-6de9ec10.js';
+import Inputbox from './index-f29c4d8d.js';
+import Product from './index-8cbc2668.js';
+import Settings from './index-23d6b193.js';
+import TabGroup from './index-170eafb6.js';
+import NavigationButtons from './index-a4947717.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import BasketAction from './index-c3a47c81.js';
+import BasketAction from './index-5da77633.js';
 import { observer } from 'mobx-react-lite';
-import BasketMobile from './index-1053e4d6.js';
-import ProgressBar from './index-386955eb.js';
+import BasketMobile from './index-2d64b729.js';
+import ProgressBar from './index-044a43af.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -31,99 +31,99 @@ import 'flat';
 import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
-import './index-496fbe88.js';
-import './index-fa6e157c.js';
-import './index-1ff22333.js';
-import './index-be361f00.js';
-import './index-29dddee0.js';
+import './index-20ece305.js';
+import './index-55060953.js';
+import './index-752b7f1e.js';
+import './index-2acb9711.js';
+import './index-6f07f5f0.js';
 import 'sift';
-import './index-b38f4589.js';
-import './index-be65c36f.js';
-import './index-d58535a2.js';
-import './index-f3bb0857.js';
-import './index.module-50eddf6c.js';
-import './index-c8f26884.js';
-import './index-31887eac.js';
+import './index-37c998ad.js';
+import './index-b9602c67.js';
+import './index-5fdd10a4.js';
+import './index-a3f8bbcc.js';
+import './index.module-559ffab5.js';
+import './index-1410e29e.js';
+import './index-7711d5f4.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-70e7c44e.js';
+import './index-08af1147.js';
 import 'react-dropdown';
-import './index-90012b62.js';
-import './index-b39f928d.js';
-import './index-c49af147.js';
-import './index-c1291580.js';
+import './index-786963cf.js';
+import './index-17de3018.js';
+import './index-1fd8510b.js';
+import './index-1458fcb2.js';
 import '@crystaldesign/content-box';
-import './index-bef75c16.js';
-import './index-860e43eb.js';
-import './index-713920f6.js';
-import './index-2e256130.js';
+import './index-3568c615.js';
+import './index-d7d767b9.js';
+import './index-bb42e3e4.js';
+import './index-259c016c.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-7c5ebd15.js';
-import './index-565611f4.js';
-import './index-7119da5b.js';
-import './index-9171fe4c.js';
-import './index-0a3addb2.js';
-import './index-2c01ec07.js';
-import './index-abab1b7a.js';
+import './UnlockCard-8af1957c.js';
+import './index-145c5e37.js';
+import './index-cb29a951.js';
+import './index-7e9bf82f.js';
+import './index-d50f502b.js';
+import './index-553de433.js';
+import './index-f7327b87.js';
 import 'react-laag';
-import './index.module-dd48a9fd.js';
-import './index-1465298d.js';
-import './index-473bcdff.js';
-import './index-b440609e.js';
-import './index-868453f2.js';
-import './index-ea6cda73.js';
-import './index.module-6fc6e8fd.js';
-import './index-be178435.js';
-import './index-c7da4c28.js';
-import './index-ac8408c3.js';
-import './index-a039bd9c.js';
-import './index-d888df68.js';
-import './index-e221108d.js';
-import './index-ca2aa0a9.js';
-import './index-1c8f78a4.js';
-import './index-b027f912.js';
-import './index-9b5d74e0.js';
-import './index-cc3e6a15.js';
-import './index-89177618.js';
-import './index-0aab4ccb.js';
+import './index.module-ee4b2ab0.js';
+import './index-82090b14.js';
+import './index-a766be1d.js';
+import './index-e3fb0fbc.js';
+import './index-fabeeea7.js';
+import './index-e2b33aa3.js';
+import './index.module-503917c3.js';
+import './index-0b6881aa.js';
+import './index-3cc85bb2.js';
+import './index-e66c536e.js';
+import './index-fd876e6c.js';
+import './index-9f5973db.js';
+import './index-eaa2e6ae.js';
+import './index-327828cb.js';
+import './index-d5838c29.js';
+import './index-b2c82203.js';
+import './index-3fc5798c.js';
+import './index-d30982d6.js';
+import './index-bdb027b8.js';
+import './index-58677266.js';
 import 'rc-slider';
-import './index-50afb8e8.js';
-import './index-c8b3ded7.js';
-import './index-b24a65cd.js';
-import './index-0e6bfe2d.js';
-import './index-a02b0822.js';
+import './index-83cfc9d7.js';
+import './index-d5d25407.js';
+import './index-9e71137f.js';
+import './index-9aa5b0c4.js';
+import './index-c546807a.js';
 import 'react-confetti-explosion';
-import './index-383b911f.js';
-import './index-6be8924c.js';
-import './index-889421ac.js';
+import './index-fa19e699.js';
+import './index-1ace13cc.js';
+import './index-afd75d5e.js';
 import 'react-qr-code';
-import './index-d0e73831.js';
-import './useCustomDimensions-518f56ca.js';
-import './index-2fb2d2bd.js';
-import './ussIsSticky-1979fd12.js';
-import './index-161f38ae.js';
-import './index-8da58fc9.js';
-import './index-e1bdd175.js';
-import './index.module-763485cb.js';
-import './index-2b154972.js';
-import './index-04fbb469.js';
-import './index-66daf2fd.js';
-import './index-fcd95a9e.js';
-import './index-07a1c9c8.js';
-import './index-b7d9d339.js';
-import './index.module-9b6f8a0c.js';
-import './index-fdd627d4.js';
-import './index-6a37cb71.js';
-import './index-566fc603.js';
-import './index-3b0fcf76.js';
+import './index-4f3331d5.js';
+import './useCustomDimensions-63e2055d.js';
+import './index-01f37215.js';
+import './ussIsSticky-e3e78749.js';
+import './index-b4d73339.js';
+import './index-734fcb60.js';
+import './index-94e1be25.js';
+import './index.module-56bb82bf.js';
+import './index-d873dc2b.js';
+import './index-978c2461.js';
+import './index-4d97178c.js';
+import './index-3c114e66.js';
+import './index-820852c0.js';
+import './index-edafe60f.js';
+import './index.module-b052f18e.js';
+import './index-5b9b30da.js';
+import './index-48553db3.js';
+import './index-db067c1b.js';
+import './index-5b2430b6.js';
 import '@mui/material';
-import './index-141b7e3b.js';
-import './index-b7e7419f.js';
-import './index-21b78b22.js';
-import './index-2046ee6a.js';
-import './index-67b6b08b.js';
-import './index.module-803a3f0d.js';
+import './index-1b1bb31d.js';
+import './index-affca9a1.js';
+import './index-ae69535a.js';
+import './index-96b14536.js';
+import './index-e7396a6f.js';
+import './index.module-ed8a0ffa.js';
 
 var wcConfigurator = "wcConfigurator-YOuy8";
 var landscape = "landscape-EyFBs";

package/build/esm/{index-fa6e157c.js → index-55060953.js}

@@ -1,11 +1,11 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-a71d1695.js';
+import { s as styleInject, u as useViewHandler } from './index-591eb01e.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useEffect } from 'react';
-import SettingsHeaderContainer from './index-496fbe88.js';
+import SettingsHeaderContainer from './index-20ece305.js';
 import classnames from 'classnames';
-import TotalPrice from './index-1ff22333.js';
-import SettingsItemsWrapper from './index-be361f00.js';
+import TotalPrice from './index-752b7f1e.js';
+import SettingsItemsWrapper from './index-2acb9711.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -26,83 +26,83 @@ import 'flat';
 import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
-import './index-29dddee0.js';
+import './index-6f07f5f0.js';
 import 'sift';
-import './index-b38f4589.js';
-import './index-be65c36f.js';
-import './index-d58535a2.js';
-import './index-f3bb0857.js';
-import './index.module-50eddf6c.js';
-import './index-c8f26884.js';
-import './index-31887eac.js';
+import './index-37c998ad.js';
+import './index-b9602c67.js';
+import './index-5fdd10a4.js';
+import './index-a3f8bbcc.js';
+import './index.module-559ffab5.js';
+import './index-1410e29e.js';
+import './index-7711d5f4.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-70e7c44e.js';
+import './index-08af1147.js';
 import 'react-dropdown';
-import './index-90012b62.js';
-import './index-b39f928d.js';
-import './index-c49af147.js';
-import './index-c1291580.js';
+import './index-786963cf.js';
+import './index-17de3018.js';
+import './index-1fd8510b.js';
+import './index-1458fcb2.js';
 import '@crystaldesign/content-box';
-import './index-bef75c16.js';
-import './index-860e43eb.js';
-import './index-713920f6.js';
-import './index-2e256130.js';
+import './index-3568c615.js';
+import './index-d7d767b9.js';
+import './index-bb42e3e4.js';
+import './index-259c016c.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-7c5ebd15.js';
-import './index-565611f4.js';
-import './index-7119da5b.js';
-import './index-9171fe4c.js';
-import './index-0a3addb2.js';
-import './index-2c01ec07.js';
-import './index-abab1b7a.js';
+import './UnlockCard-8af1957c.js';
+import './index-145c5e37.js';
+import './index-cb29a951.js';
+import './index-7e9bf82f.js';
+import './index-d50f502b.js';
+import './index-553de433.js';
+import './index-f7327b87.js';
 import 'react-laag';
-import './index.module-dd48a9fd.js';
-import './index-1465298d.js';
-import './index-473bcdff.js';
-import './index-b440609e.js';
-import './index-868453f2.js';
-import './index-ea6cda73.js';
-import './index.module-6fc6e8fd.js';
-import './index-be178435.js';
-import './index-c7da4c28.js';
-import './index-ac8408c3.js';
-import './index-a039bd9c.js';
-import './index-d888df68.js';
-import './index-e221108d.js';
-import './index-ca2aa0a9.js';
-import './index-1c8f78a4.js';
-import './index-b027f912.js';
-import './index-9b5d74e0.js';
-import './index-cc3e6a15.js';
-import './index-89177618.js';
-import './index-0aab4ccb.js';
+import './index.module-ee4b2ab0.js';
+import './index-82090b14.js';
+import './index-a766be1d.js';
+import './index-e3fb0fbc.js';
+import './index-fabeeea7.js';
+import './index-e2b33aa3.js';
+import './index.module-503917c3.js';
+import './index-0b6881aa.js';
+import './index-3cc85bb2.js';
+import './index-e66c536e.js';
+import './index-fd876e6c.js';
+import './index-9f5973db.js';
+import './index-eaa2e6ae.js';
+import './index-327828cb.js';
+import './index-d5838c29.js';
+import './index-b2c82203.js';
+import './index-3fc5798c.js';
+import './index-d30982d6.js';
+import './index-bdb027b8.js';
+import './index-58677266.js';
 import 'rc-slider';
-import './index-50afb8e8.js';
-import './index-c8b3ded7.js';
-import './index-b24a65cd.js';
-import './index-0e6bfe2d.js';
-import './index-a02b0822.js';
+import './index-83cfc9d7.js';
+import './index-d5d25407.js';
+import './index-9e71137f.js';
+import './index-9aa5b0c4.js';
+import './index-c546807a.js';
 import 'react-confetti-explosion';
-import './index-383b911f.js';
-import './index-6be8924c.js';
-import './index-889421ac.js';
+import './index-fa19e699.js';
+import './index-1ace13cc.js';
+import './index-afd75d5e.js';
 import 'react-qr-code';
-import './index-d0e73831.js';
-import './useCustomDimensions-518f56ca.js';
-import './index-2fb2d2bd.js';
-import './ussIsSticky-1979fd12.js';
-import './index-161f38ae.js';
-import './index-8da58fc9.js';
-import './index-e1bdd175.js';
-import './index.module-763485cb.js';
-import './index-2b154972.js';
-import './index-04fbb469.js';
-import './index-66daf2fd.js';
-import './index-fcd95a9e.js';
-import './index-07a1c9c8.js';
-import './index-b7d9d339.js';
+import './index-4f3331d5.js';
+import './useCustomDimensions-63e2055d.js';
+import './index-01f37215.js';
+import './ussIsSticky-e3e78749.js';
+import './index-b4d73339.js';
+import './index-734fcb60.js';
+import './index-94e1be25.js';
+import './index.module-56bb82bf.js';
+import './index-d873dc2b.js';
+import './index-978c2461.js';
+import './index-4d97178c.js';
+import './index-3c114e66.js';
+import './index-820852c0.js';
+import './index-edafe60f.js';
 
 var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
 var expanded = "expanded-r-uGX";

package/build/esm/{index-2c01ec07.js → index-553de433.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-a71d1695.js';
+import './index-591eb01e.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-fc1240a5.js → index-586406be.js}

@@ -1,12 +1,13 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { g as blobToDataUrl, h as reencodeJpegDataUrl, u as useViewHandler, i as useRTVAnalyzerComponentsFromPlanner, j as registerRtvNextViewer } from './index-a71d1695.js';
-import { useRef, useEffect, useMemo } from 'react';
+import { g as blobToDataUrl, h as reencodeJpegDataUrl, u as useViewHandler, i as useRTVAnalyzerComponentsFromPlanner, j as registerRtvNextViewer } from './index-591eb01e.js';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { getLogger, useDivaCore } from '@crystaldesign/diva-core';
 import RealTimeRendererNext, { emitConfig, ENVIRONMENT_CONFIG, useRTVStore, WHITE_ROOM_PRESET } from '@crystaldesign/real-time-viewer-next';
 import { bootMark } from '@crystaldesign/web-planner-logic';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { A as ACCESSORY_PLACEMENT_MODE } from './accessoryPlacementMode-33d881bc.js';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { jsx } from 'react/jsx-runtime';
@@ -23,14 +24,6 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 
-/**
- * Host-side accessory placement mode for the rtv-next planner. Single source of truth shared by the
- * viewer host (passed into `uiConfig.accessoryPlacement`) and the accessory palette (which collapses
- * variant families to one entry only in `autoPlaceDrag`). Flip to `'cellBoxes'` for the legacy
- * click-to-place behavior.
- */
-var ACCESSORY_PLACEMENT_MODE = 'autoPlaceDrag';
-
 function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(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$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(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$1(r, a) : void 0; } }
 function _arrayLikeToArray$1(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; }
@@ -802,18 +795,41 @@ var PlannerRTVNext = function PlannerRTVNext() {
   var showRTV = viewHandler.productState.doShowRTV;
   var show3DComb = viewHandler.productState.doShow3DComb;
   var showGrid = viewHandler.productState.doShowGrid;
-  // Nothing is rendered in either case, so the planner→viewer translation is skipped: a hidden
-  // planner still re-renders on every MobX planner change and would otherwise walk the whole
-  // planned-elements dict and re-encode every element SVG for a viewer that is not mounted.
   // CREATE_IMAGE never goes through the footer, so none of the view flags is ever set for it — the
   // viewer must still mount, it *is* the capture source (see useCreateImageShot below).
   var isCreateImage = viewHandler.configState.initMode === 'CREATE_IMAGE';
-  var isHidden = !isVisible || !showRTV && !show3DComb && !showGrid && !isCreateImage;
+  // Another product-center view is on top (AI room, rendered image). Once the viewer has been on
+  // screen this only PAUSES it (`stopRender`): unmounting would drop the WebGL context, the
+  // assembled scene and every cache, and rebuild them all on the way back.
+  var viewCovered = !showRTV && !show3DComb && !showGrid && !isCreateImage;
+  // A hidden parent view still unmounts, and resets the latch: the rtv-next store is page-global,
+  // so a hidden planner's viewer and the visible planner's would fight over it. Committed state
+  // adjusted during render, not a ref written in render: an abandoned render leaves nothing behind.
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shownOnce = _useState2[0],
+    setShownOnce = _useState2[1];
+  var isMounted = isVisible && (shownOnce || !viewCovered);
+  if (isMounted !== shownOnce) setShownOnce(isMounted);
+  // While covered the view mode is frozen: the show flags are all false then, and deriving '3d'
+  // from them would fly a 2D planner to 3D (and load its 3D assets) behind the covering view.
+  var _useState3 = useState('3d'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    frozenViewMode = _useState4[0],
+    setFrozenViewMode = _useState4[1];
+  var viewMode = viewCovered ? frozenViewMode : showGrid || isCreateImage ? '2d' : '3d';
+  if (viewMode !== frozenViewMode) setFrozenViewMode(viewMode);
 
   // `isPoolPlanning`: a planning whose articles carry a dimension config is a static drawing (pool
   // plan) — hide all on-canvas buttons (posNr/move/rotate/trash chrome and docking-point buttons,
   // both gated on `hideUiIcons` inside rtv-next) and force the dimension lines on.
-  var scene = isHidden ? undefined : buildScene2D(viewHandler);
+  // Nothing is rendered while unmounted or covered, so the planner→viewer translation is skipped:
+  // the planner still re-renders on every MobX planner change and would otherwise walk the whole
+  // planned-elements dict and re-encode every element SVG for a viewer nobody is looking at. While
+  // covered the last built scene is kept, so `scene2d` also stays identity-stable in the store.
+  var lastSceneRef = useRef(undefined);
+  var scene = !isMounted ? undefined : viewCovered ? lastSceneRef.current : buildScene2D(viewHandler);
+  lastSceneRef.current = scene;
   var scene2d = scene === null || scene === void 0 ? void 0 : scene.scene2d;
   var isPoolPlanning = (_scene$isPoolPlanning = scene === null || scene === void 0 ? void 0 : scene.isPoolPlanning) !== null && _scene$isPoolPlanning !== void 0 ? _scene$isPoolPlanning : false;
 
@@ -827,8 +843,7 @@ var PlannerRTVNext = function PlannerRTVNext() {
   // has to stay above the guard below — it is inert without a scene, and while the planner renders
   // nothing there is no mounted viewer to capture from anyway.
   useCreateImageShot(viewHandler, scene2d, rtvPreset);
-  if (isHidden) return null;
-  var viewMode = showGrid || isCreateImage ? '2d' : '3d';
+  if (!isMounted) return null;
   var curTabGroupType = (_viewHandler$tabGroup4 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup4 === void 0 ? void 0 : _viewHandler$tabGroup4.type;
   var plannerMode = curTabGroupType != null && PLANNER_TAB_GROUP_TYPES.has(curTabGroupType);
   var focusElementId = viewHandler.productState.rtvFocusElementId;
@@ -865,7 +880,7 @@ var PlannerRTVNext = function PlannerRTVNext() {
     hqRenderScript: needs3D ? viewHandler.hqRenderScript : undefined,
     scene2d: scene2d,
     viewMode: viewMode,
-    stopRender: !isVisible,
+    stopRender: viewCovered,
     config: {
       // Strip a trailing slash so downstream URL building (material blob paths, geo/texture URLs)
       // doesn't emit `…/diva3darchiv//…` double slashes that the archive host may mis-route.

package/build/esm/{index-0aab4ccb.js → index-58677266.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-a71d1695.js';
+import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-591eb01e.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import Slider$1 from 'rc-slider';