@crystaldesign/diva-web-planner-react 26.11.0 → 26.12.0-beta.10

package/build/esm/{index-4243c67b.js → index-2b40a94d.js}

@@ -1,7 +1,7 @@
-import { s as styleInject, u as useViewHandler } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler } from './index-b0d03bad.js';
 import 'react';
-import { S as SettingsItem } from './index-a5761569.js';
-import ContentItemTeaser from './index-21c0fba0.js';
+import { S as SettingsItem } from './index-f92acdcf.js';
+import ContentItemTeaser from './index-4129afa9.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -21,83 +21,84 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 import 'sift';
-import './index-1da9c60a.js';
-import './index-8704af31.js';
-import './index-3291b12a.js';
-import './index-21898f72.js';
-import './index.module-5363353b.js';
-import './index-d23933c9.js';
-import './index-d4d532d7.js';
+import './index-3af6f9df.js';
+import './index-fbb27769.js';
+import './index-c280748f.js';
+import './index-b60938ba.js';
+import './index.module-bcb5f9bf.js';
+import './index-0445770e.js';
+import './index-88008c4f.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-9e1ac68d.js';
+import './index-c703601b.js';
 import 'react-dropdown';
-import './index-e396c824.js';
+import './index-fc685be4.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-f9fa80a0.js';
-import './index-4e544da5.js';
-import './index-ba7d0833.js';
+import './index-2b72f423.js';
+import './index-a586fbbf.js';
+import './index-b0a0af75.js';
 import '@crystaldesign/content-box';
-import './index-94423552.js';
-import './index-3290d9fe.js';
-import './index-b544637c.js';
-import './index-f59b9f78.js';
+import './index-20ea2541.js';
+import './index-b16d65cb.js';
+import './index-af8daff0.js';
+import './index-f82a3ee3.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-13e4ebfe.js';
-import './index-42fd236c.js';
-import './index-2a905739.js';
-import './index-021068db.js';
-import './index-b8e801ab.js';
-import './index-55fd82a6.js';
-import './index-ae2bb1c1.js';
+import './UnlockCard-9ff0eebf.js';
+import './index-169525f2.js';
+import './index-0acd19c8.js';
+import './index-4c837c89.js';
+import './index-16df4bb2.js';
+import './index-bb3ce1c9.js';
+import './index-f33bfdb3.js';
 import 'react-laag';
-import './index.module-bef51177.js';
-import './index-f3aae641.js';
-import './index-37703a4e.js';
-import './index-574138ad.js';
-import './index-d14df474.js';
-import './index-38a05739.js';
-import './index.module-b6f399ea.js';
-import './index-08bf1a3c.js';
-import './index-7d0c868c.js';
-import './index-00b47a78.js';
-import './index-48f00157.js';
-import './index-949744b3.js';
-import './index-f6ee7c34.js';
-import './index-c98caf0b.js';
-import './index-ff75a4cf.js';
-import './index-3086ddd5.js';
-import './index-8fe22a1f.js';
-import './index-8867a395.js';
-import './index-5ab5fce7.js';
-import './index-327efa82.js';
+import './index.module-6cdd67cd.js';
+import './index-2c79a801.js';
+import './index-5126adc2.js';
+import './index-c33c21d2.js';
+import './index-6de49de8.js';
+import './index-1449fd64.js';
+import './index.module-af6bc627.js';
+import './index-ecdcca31.js';
+import './index-df400f0e.js';
+import './index-c83c49d0.js';
+import './index-07de143a.js';
+import './index-2fa481ee.js';
+import './index-781198de.js';
+import './index-3517493b.js';
+import './index-f957e1de.js';
+import './index-f1c7c22f.js';
+import './index-b92aebc6.js';
+import './index-520127c2.js';
+import './index-80c26f63.js';
+import './index-bdcc107d.js';
 import 'rc-slider';
-import './index-74d37e50.js';
-import './index-c1ece084.js';
-import './index-4dca57d4.js';
-import './index-271180a4.js';
-import './index-636f741b.js';
+import './index-094f2e89.js';
+import './index-ffb978c2.js';
+import './index-4c3c7dff.js';
+import './index-7f630300.js';
+import './index-4aecf0b5.js';
 import 'react-confetti-explosion';
-import './index-c97f5819.js';
-import './index-83641736.js';
-import './index-4f5cdd18.js';
+import './index-366bc68e.js';
+import './index-83dd1e3f.js';
+import './index-b4ea5a8c.js';
 import 'react-qr-code';
-import './index-2cea7238.js';
-import './useCustomDimensions-6ee877ae.js';
-import './index-6cf78af8.js';
-import './ussIsSticky-be456ecc.js';
-import './index-08d286df.js';
-import './index-670617fc.js';
-import './index-f03c45f7.js';
-import './index.module-f4843ba0.js';
-import './index-5559cbf9.js';
-import './index-9c426156.js';
-import './index-bcbc210e.js';
-import './index-b5b10e52.js';
+import './index-774955de.js';
+import './useCustomDimensions-64966f25.js';
+import './index-722e7b25.js';
+import './ussIsSticky-eaa4e987.js';
+import './index-42c7ce7b.js';
+import './index-6dc8dda5.js';
+import './index-03fe8a29.js';
+import './index.module-e6711517.js';
+import './index-81532bf5.js';
+import './index-84f541db.js';
+import './index-23030907.js';
+import './index-9eb3d512.js';
 
 var wrapper = "wrapper-u-Jk1";
 var left = "left-T5gs2";

package/build/esm/{index-f9fa80a0.js → index-2b72f423.js}

@@ -1,9 +1,9 @@
-import { s as styleInject, u as useViewHandler } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler } from './index-b0d03bad.js';
 import 'react';
 import Dropdown from 'react-dropdown';
 import { useTranslation } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
-import Arrow from './index-4e544da5.js';
+import Arrow from './index-a586fbbf.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -21,6 +21,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 

package/build/esm/{index-45965399.js → index-2bbfbf39.js}

@@ -1,13 +1,12 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler, g as useRTVAnalyzerComponentsFromPlanner, h as registerRtvNextViewer } from './index-6f06219e.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-b0d03bad.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 { A as ACCESSORY_PLACEMENT_MODE } from './accessoryPlacementMode-26efbbde.js';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { jsx } from 'react/jsx-runtime';
@@ -24,6 +23,14 @@ 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; }
@@ -134,7 +141,7 @@ function useCreateImageShot(viewHandler, scene2d, preset) {
               break;
             }
             _context.next = 21;
-            return reencodeJpeg(result.blob, cfg.jpegQuality);
+            return reencodeJpegDataUrl(result.blob, cfg.jpegQuality);
           case 21:
             _context.t0 = _context.sent;
             _context.next = 27;
@@ -199,60 +206,6 @@ function useCreateImageShot(viewHandler, scene2d, preset) {
     };
   }, [enabled, signature, viewHandler, preset]);
 }
-function blobToDataUrl(blob) {
-  return new Promise(function (resolve, reject) {
-    var reader = new FileReader();
-    reader.onload = function () {
-      return resolve(reader.result);
-    };
-    reader.onerror = function () {
-      var _reader$error;
-      return reject((_reader$error = reader.error) !== null && _reader$error !== void 0 ? _reader$error : new Error('Failed to read image blob'));
-    };
-    reader.readAsDataURL(blob);
-  });
-}
-
-/**
- * JPEG has no alpha channel and a direct JPEG read of the (transparent) WebGL canvas would
- * composite onto black — re-encode the PNG master onto a white background instead.
- */
-function reencodeJpeg(_x, _x2) {
-  return _reencodeJpeg.apply(this, arguments);
-}
-function _reencodeJpeg() {
-  _reencodeJpeg = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(pngBlob, quality) {
-    var bitmap, canvas, ctx;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.next = 2;
-          return createImageBitmap(pngBlob);
-        case 2:
-          bitmap = _context2.sent;
-          canvas = document.createElement('canvas');
-          canvas.width = bitmap.width;
-          canvas.height = bitmap.height;
-          ctx = canvas.getContext('2d');
-          if (ctx) {
-            _context2.next = 9;
-            break;
-          }
-          throw new Error('2D canvas context unavailable for JPEG encoding');
-        case 9:
-          ctx.fillStyle = '#ffffff';
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-          ctx.drawImage(bitmap, 0, 0);
-          bitmap.close();
-          return _context2.abrupt("return", canvas.toDataURL('image/jpeg', quality));
-        case 14:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  }));
-  return _reencodeJpeg.apply(this, arguments);
-}
 
 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; }
@@ -849,18 +802,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;
 
@@ -874,8 +850,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;
@@ -912,7 +887,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-f3aae641.js → index-2c79a801.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-6f06219e.js';
+import './index-b0d03bad.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';
@@ -19,6 +19,7 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 

package/build/esm/{index-c196959d.js → index-2cc2783e.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler } from './index-b0d03bad.js';
 import 'react';
 import { Rnd } from 'react-rnd';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -20,6 +20,7 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 

package/build/esm/{index-d0f6422a.js → index-2d800b17.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-6f06219e.js';
+import { s as styleInject } from './index-b0d03bad.js';
 import 'react';
 import classnames from 'classnames';
 import { jsx } from 'react/jsx-runtime';
@@ -19,6 +19,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 

package/build/esm/{index-c6f39eb5.js → index-2dce500f.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler } from './index-b0d03bad.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useRef, useEffect } from 'react';
@@ -19,6 +19,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 

package/build/esm/{index-4df61952.js → index-2ee3c2e0.js}

@@ -1,7 +1,7 @@
-import { s as styleInject, u as useViewHandler } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler } from './index-b0d03bad.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import NavBar from './index-f37a13dc.js';
+import NavBar from './index-744c8b1d.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var wcConfiguratorProductCenter = "wcConfigurator-product-center-T-Vr3";

package/build/esm/{index-d08eb566.js → index-2ef6d13f.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler } from './index-b0d03bad.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useState, useEffect } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -21,6 +21,7 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 

package/build/esm/{index-949744b3.js → index-2fa481ee.js}

@@ -1,15 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-6f06219e.js';
+import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-b0d03bad.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-bef51177.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-6cdd67cd.js';
 import { useHover, useLayer } from 'react-laag';
-import MetaData from './index-f6ee7c34.js';
+import MetaData from './index-781198de.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import InfoIcon from './index-d23933c9.js';
-import ReverseCheck from './index-d4d532d7.js';
+import InfoIcon from './index-0445770e.js';
+import ReverseCheck from './index-88008c4f.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/asyncToGenerator';
@@ -24,6 +24,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
+import '@crystaldesign/real-time-viewer-next';
 import 'react-switch';
 import 'react-countup';
 import '@mui/icons-material/Block';