@crystaldesign/diva-web-planner-react 26.4.3-rc.4 → 26.4.3-rc.5

package/build/esm/{index-2569dccc.js → index-28b84a75.js}

@@ -1,10 +1,10 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import ArQrCodeIcon from './index-763b36fa.js';
-import ProductRoomList from './index-c9b969c6.js';
+import ArQrCodeIcon from './index-04de0d7e.js';
+import ProductRoomList from './index-997c040c.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
@@ -24,9 +24,9 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import 'react-laag';
-import './index-9774366c.js';
+import './index-a22989a7.js';
 import 'react-qr-code';
-import './index-3fb7c01c.js';
+import './index-9af43d49.js';
 
 var wcNav3DToolbar = "wc_Nav3DToolbar-5t7Cu";
 var arAbsoluteDesktop = "ar-absolute-desktop-2xHB1";

package/build/esm/{index-a90752c0.js → index-2969ea6f.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler, T as Toggle } from './index-22049a2e.js';
+import { u as useViewHandler, T as Toggle } from './index-0b83c79f.js';
 import 'react';
 import { DivaUtils } from '@crystaldesign/diva-core';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

package/build/esm/{index-2d469a57.js → index-2bedd802.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler, T as Toggle } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler, T as Toggle } from './index-0b83c79f.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { getLogger } from '@crystaldesign/diva-core';

package/build/esm/{index-1d089060.js → index-2d440640.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useState, useEffect } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -27,14 +27,13 @@ import 'react-countup';
 var wcConfiguratorAiRoom = "wc-configurator-ai-room-BITO0";
 var galleryContainer = "gallery-container-Ly7-0";
 var gallerySlide = "gallery-slide-GiS-r";
-var gallerySlideBlurred = "gallery-slide-blurred-S9KVT";
 var aiRoomImage = "ai-room-image-seKys";
 var slideCounter = "slide-counter-Uh6Iz";
 var loadingOverlay = "loading-overlay-t1CPa";
 var spinner = "spinner-bUgHj";
 var loadingText = "loading-text-v1LhC";
 var aiWarningBadge = "ai-warning-badge-VRwxc";
-var css_248z = ".wc-configurator-ai-room-BITO0 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 990;\n  display: flex;\n  background-color: #fff;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n/* ── Gallery ────────────────────────────────────────────── */\n\n.gallery-container-Ly7-0 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.gallery-container-Ly7-0 .swiper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.gallery-container-Ly7-0 .swiper-wrapper {\n  position: relative;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n}\n\n.gallery-container-Ly7-0 .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n}\n\n.gallery-slide-GiS-r {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n  will-change: filter, transform;\n}\n\n.gallery-slide-blurred-S9KVT {\n  filter: blur(16px) brightness(0.72);\n  transform: scale(1.04);\n}\n\n.ai-room-image-seKys {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  -o-object-fit: contain;\n     object-fit: contain;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n/* ── Navigation arrows ──────────────────────────────────── */\n\n.gallery-container-Ly7-0 .swiper-button-prev,\n.gallery-container-Ly7-0 .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  width: 44px;\n  height: 44px;\n  margin-top: -22px;\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.35);\n  border-radius: 50%;\n  color: #fff;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.2s,\n    transform 0.15s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:hover,\n.gallery-container-Ly7-0 .swiper-button-next:hover {\n  background: rgba(0, 0, 0, 0.55);\n  transform: scale(1.06);\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:active,\n.gallery-container-Ly7-0 .swiper-button-next:active {\n  transform: scale(0.96);\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:focus,\n.gallery-container-Ly7-0 .swiper-button-prev:active,\n.gallery-container-Ly7-0 .swiper-button-next:focus,\n.gallery-container-Ly7-0 .swiper-button-next:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev::before,\n.gallery-container-Ly7-0 .swiper-button-next::before {\n  display: none !important;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after,\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: 18px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev {\n  left: 16px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-next {\n  right: 16px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after {\n  content: 'prev';\n}\n\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  content: 'next';\n}\n\n.gallery-container-Ly7-0 .swiper-button-disabled {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev svg,\n.gallery-container-Ly7-0 .swiper-button-next svg {\n  display: none;\n}\n\n/* ── Slide counter ──────────────────────────────────────── */\n\n.slide-counter-Uh6Iz {\n  position: absolute;\n  bottom: 84px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 5;\n  padding: 5px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(0, 0, 0, 0.38);\n  border-radius: 20px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile .slide-counter-Uh6Iz {\n  bottom: 20px;\n}\n\n/* ── Loading overlay ────────────────────────────────────── */\n\n.loading-overlay-t1CPa {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 12;\n  background: rgba(0, 0, 0, 0.25);\n  animation: overlayFadeIn-aFU2G 0.6s ease both;\n  pointer-events: none;\n}\n\n@keyframes overlayFadeIn-aFU2G {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.spinner-bUgHj {\n  width: 52px;\n  height: 52px;\n  border: 3px solid rgba(255, 255, 255, 0.25);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: spin-CwPAa 0.9s linear infinite;\n}\n\n@keyframes spin-CwPAa {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text-v1LhC {\n  margin-top: 20px;\n  font-size: 15px;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  color: #fff;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);\n  animation: textSlideIn-u-Flk 0.5s ease both;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n@keyframes textSlideIn-u-Flk {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* ── Warning badge ──────────────────────────────────────── */\n\n.ai-warning-badge-VRwxc {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  padding: 6px 12px;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 12px;\n  border-radius: 4px;\n  pointer-events: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  font-weight: 500;\n  z-index: 5;\n}\n\n.mobile .ai-warning-badge-VRwxc {\n  font-size: 11px;\n}\n";
+var css_248z = ".wc-configurator-ai-room-BITO0 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 990;\n  display: flex;\n  background-color: #fff;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n/* ── Gallery ────────────────────────────────────────────── */\n\n.gallery-container-Ly7-0 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.gallery-container-Ly7-0 .swiper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.gallery-container-Ly7-0 .swiper-wrapper {\n  position: relative;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n}\n\n.gallery-container-Ly7-0 .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n}\n\n.gallery-slide-GiS-r {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n  will-change: filter, transform;\n}\n\n.ai-room-image-seKys {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  -o-object-fit: contain;\n     object-fit: contain;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n/* ── Navigation arrows ──────────────────────────────────── */\n\n.gallery-container-Ly7-0 .swiper-button-prev,\n.gallery-container-Ly7-0 .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  width: 44px;\n  height: 44px;\n  margin-top: -22px;\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.35);\n  border-radius: 50%;\n  color: #fff;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.2s,\n    transform 0.15s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:hover,\n.gallery-container-Ly7-0 .swiper-button-next:hover {\n  background: rgba(0, 0, 0, 0.55);\n  transform: scale(1.06);\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:active,\n.gallery-container-Ly7-0 .swiper-button-next:active {\n  transform: scale(0.96);\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:focus,\n.gallery-container-Ly7-0 .swiper-button-prev:active,\n.gallery-container-Ly7-0 .swiper-button-next:focus,\n.gallery-container-Ly7-0 .swiper-button-next:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev::before,\n.gallery-container-Ly7-0 .swiper-button-next::before {\n  display: none !important;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after,\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: 18px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev {\n  left: 16px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-next {\n  right: 16px;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev:after {\n  content: 'prev';\n}\n\n.gallery-container-Ly7-0 .swiper-button-next:after {\n  content: 'next';\n}\n\n.gallery-container-Ly7-0 .swiper-button-disabled {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.gallery-container-Ly7-0 .swiper-button-prev svg,\n.gallery-container-Ly7-0 .swiper-button-next svg {\n  display: none;\n}\n\n/* ── Slide counter ──────────────────────────────────────── */\n\n.slide-counter-Uh6Iz {\n  position: absolute;\n  bottom: 84px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 5;\n  padding: 5px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(0, 0, 0, 0.38);\n  border-radius: 20px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile .slide-counter-Uh6Iz {\n  bottom: 20px;\n}\n\n/* ── Loading slide (rendered inside the gallery swiper) ── */\n\n.loading-overlay-t1CPa {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.25);\n  animation: overlayFadeIn-aFU2G 0.6s ease both;\n}\n\n@keyframes overlayFadeIn-aFU2G {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.spinner-bUgHj {\n  width: 52px;\n  height: 52px;\n  border: 3px solid rgba(255, 255, 255, 0.25);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: spin-CwPAa 0.9s linear infinite;\n}\n\n@keyframes spin-CwPAa {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text-v1LhC {\n  margin-top: 20px;\n  font-size: 15px;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  color: #fff;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);\n  animation: textSlideIn-u-Flk 0.5s ease both;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n@keyframes textSlideIn-u-Flk {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* ── Warning badge ──────────────────────────────────────── */\n\n.ai-warning-badge-VRwxc {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  padding: 6px 12px;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 12px;\n  border-radius: 4px;\n  pointer-events: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  font-weight: 500;\n  z-index: 5;\n}\n\n.mobile .ai-warning-badge-VRwxc {\n  font-size: 11px;\n}\n";
 styleInject(css_248z);
 
 var LOADING_MESSAGES = {
@@ -66,8 +65,12 @@ var PlannerAIRoom = function PlannerAIRoom() {
   var images = aiState.generatedImageHistory;
   var isVisible = viewHandler.productState.doShowAIRoom;
   var hasImages = images.length > 0;
+  var totalSlides = images.length + (isGenerating ? 1 : 0);
+  // Loading slide sits at index 0 when generating; real images are offset by 1.
+  var imageIndexOffset = isGenerating ? 1 : 0;
+  var isLoadingSlideActive = isGenerating && activeSlide === 0;
   useEffect(function () {
-    var entry = images[activeSlide];
+    var entry = images[activeSlide - imageIndexOffset];
     if (entry) {
       aiState.setCurrentlyVisibleRoom({
         key: entry.key,
@@ -75,7 +78,7 @@ var PlannerAIRoom = function PlannerAIRoom() {
         src: entry.src
       });
     }
-  }, [activeSlide]);
+  }, [activeSlide, imageIndexOffset]);
   useEffect(function () {
     if (!isGenerating) {
       setMessageIndex(0);
@@ -92,28 +95,51 @@ var PlannerAIRoom = function PlannerAIRoom() {
   }, [isGenerating]);
   useEffect(function () {
     if (images.length > prevLengthRef.current && swiperRef.current) {
+      // Freshly generated images are prepended to the history; focus index 0 in the real image range.
+      var targetIdx = isGenerating ? 1 : 0;
       if (swiperRef.current.params.loop) {
-        swiperRef.current.slideToLoop(0, 300);
+        swiperRef.current.slideToLoop(targetIdx, 300);
       } else {
-        swiperRef.current.slideTo(0, 300);
+        swiperRef.current.slideTo(targetIdx, 300);
       }
     }
     prevLengthRef.current = images.length;
   }, [images.length]);
   useEffect(function () {
     if (!aiState.currentlyVisibleRoom || !swiperRef.current) return;
-    var idx = images.findIndex(function (img) {
+    var imgIdx = images.findIndex(function (img) {
       var _aiState$currentlyVis;
       return img.src === ((_aiState$currentlyVis = aiState.currentlyVisibleRoom) === null || _aiState$currentlyVis === void 0 ? void 0 : _aiState$currentlyVis.src);
     });
-    if (idx > -1 && idx !== swiperRef.current.realIndex) {
+    if (imgIdx < 0) return;
+    var swiperIdx = imgIdx + imageIndexOffset;
+    if (swiperIdx !== swiperRef.current.realIndex) {
       if (swiperRef.current.params.loop) {
-        swiperRef.current.slideToLoop(idx, 300);
+        swiperRef.current.slideToLoop(swiperIdx, 300);
       } else {
-        swiperRef.current.slideTo(idx, 300);
+        swiperRef.current.slideTo(swiperIdx, 300);
       }
     }
-  }, [aiState.currentlyVisibleRoom, images]);
+  }, [aiState.currentlyVisibleRoom, images, imageIndexOffset]);
+
+  // Auto-navigate the gallery to the loading slide (index 0) whenever generation
+  // starts or the style consultant explicitly asks for it (e.g. clicking the placeholder).
+  useEffect(function () {
+    if (!isGenerating || !swiperRef.current) return;
+    if (swiperRef.current.params.loop) {
+      swiperRef.current.slideToLoop(0, 300);
+    } else {
+      swiperRef.current.slideTo(0, 300);
+    }
+  }, [isGenerating, aiState.loadingSlideFocusRequest]);
+
+  // Publish loading-slide visibility so the style consultant can mirror it in the history.
+  useEffect(function () {
+    aiState.setLoadingSlideActive(isLoadingSlideActive);
+    return function () {
+      return aiState.setLoadingSlideActive(false);
+    };
+  }, [isLoadingSlideActive]);
   return /*#__PURE__*/jsxs("div", {
     className: wcConfiguratorAiRoom,
     id: "ai-room-container",
@@ -121,9 +147,9 @@ var PlannerAIRoom = function PlannerAIRoom() {
       visibility: isVisible ? 'visible' : 'hidden',
       pointerEvents: isVisible ? 'auto' : 'none'
     },
-    children: [hasImages ? /*#__PURE__*/jsxs("div", {
+    children: [hasImages || isGenerating ? /*#__PURE__*/jsxs("div", {
       className: galleryContainer,
-      children: [/*#__PURE__*/jsx(Swiper, {
+      children: [/*#__PURE__*/jsxs(Swiper, {
         modules: [Navigation],
         navigation: true,
         slidesPerView: 1,
@@ -133,11 +159,21 @@ var PlannerAIRoom = function PlannerAIRoom() {
         onSlideChange: function onSlideChange(swiper) {
           return setActiveSlide(swiper.realIndex);
         },
-        loop: (images === null || images === void 0 ? void 0 : images.length) > 1 ? true : false,
-        children: images.map(function (entry, idx) {
+        loop: totalSlides > 1,
+        children: [isGenerating && /*#__PURE__*/jsx(SwiperSlide, {
+          children: /*#__PURE__*/jsxs("div", {
+            className: "".concat(gallerySlide, " ").concat(loadingOverlay),
+            children: [/*#__PURE__*/jsx("div", {
+              className: spinner
+            }), /*#__PURE__*/jsx("p", {
+              className: loadingText,
+              children: messages[messageIndex]
+            }, messageIndex)]
+          })
+        }, "loading-slide"), images.map(function (entry, idx) {
           return /*#__PURE__*/jsx(SwiperSlide, {
             children: /*#__PURE__*/jsx("div", {
-              className: "".concat(gallerySlide, " ").concat(isGenerating ? gallerySlideBlurred : ''),
+              className: gallerySlide,
               children: /*#__PURE__*/jsx("img", {
                 className: aiRoomImage,
                 src: entry.src,
@@ -146,10 +182,10 @@ var PlannerAIRoom = function PlannerAIRoom() {
               })
             })
           }, "".concat(entry.key, "-").concat(entry.hash, "-").concat(idx));
-        })
-      }), images.length > 1 && !isGenerating && /*#__PURE__*/jsxs("div", {
+        })]
+      }), images.length > 1 && !isLoadingSlideActive && /*#__PURE__*/jsxs("div", {
         className: slideCounter,
-        children: [activeSlide + 1, " / ", images.length]
+        children: [activeSlide - imageIndexOffset + 1, " / ", images.length]
       })]
     }) : aiState.currentlyVisibleRoom && /*#__PURE__*/jsx("div", {
       className: gallerySlide,
@@ -159,14 +195,6 @@ var PlannerAIRoom = function PlannerAIRoom() {
         alt: "AI Generated Room",
         draggable: false
       })
-    }), isGenerating && /*#__PURE__*/jsxs("div", {
-      className: loadingOverlay,
-      children: [/*#__PURE__*/jsx("div", {
-        className: spinner
-      }), /*#__PURE__*/jsx("p", {
-        className: loadingText,
-        children: messages[messageIndex]
-      }, messageIndex)]
     }), hasImages && !isGenerating && /*#__PURE__*/jsx("div", {
       className: aiWarningBadge,
       children: t('configurator.roomRendering.aiGenerated')

package/build/esm/{index-1c502ce6.js → index-2ec91db2.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-22049a2e.js';
+import { u as useViewHandler } from './index-0b83c79f.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';

package/build/esm/{index-b11ee85d.js → index-2f17dc9f.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-3d38a038.js → index-30473191.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useDivaCore } from '@crystaldesign/diva-core';

package/build/esm/{index-a91bf001.js → index-30709e60.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-22049a2e.js';
+import { u as useViewHandler } from './index-0b83c79f.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';
 import { ContentItemComponent } from '@crystaldesign/content-item';

package/build/esm/{index-8f79f883.js → index-31be530b.js}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject } from './index-22049a2e.js';
+import { s as styleInject } from './index-0b83c79f.js';
 import { useState } from 'react';
 import classnames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/build/esm/{index-c4d43896.js → index-32cbe33b.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import MultiToggleSwitch from './index-bd25e428.js';
+import MultiToggleSwitch from './index-81f7e4cc.js';
 import classnames from 'classnames';
-import InfoIcon from './index-673ca36d.js';
+import InfoIcon from './index-12b1fcbb.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-e60c3c78.js → index-3420bb7f.js}

@@ -1,11 +1,11 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import { useState, useEffect } from 'react';
 import Collapsible from 'react-collapsible';
-import SubTabGroupHeader from './index-0ab00d41.js';
+import SubTabGroupHeader from './index-1db40e2b.js';
 import { observer } from 'mobx-react-lite';
-import SettingsItemsWrapper from './index-1d1c3714.js';
+import SettingsItemsWrapper from './index-b44d2fb4.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -24,84 +24,84 @@ import '@babel/runtime/helpers/typeof';
 import 'flat';
 import 'react-switch';
 import 'react-countup';
-import './index-5ecfdc6f.js';
+import './index-04c99a7e.js';
 import 'sift';
-import './index-68dc625a.js';
-import './index-0cb7f8c1.js';
-import './index-7cc03952.js';
-import './index-1f14f1f5.js';
-import './index.module-b5494b57.js';
-import './index-673ca36d.js';
-import './index-addd466a.js';
+import './index-e4f40229.js';
+import './index-c3501d4b.js';
+import './index-092db177.js';
+import './index-7b748555.js';
+import './index.module-6e107e3a.js';
+import './index-12b1fcbb.js';
+import './index-5ba98aec.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-8c660cb4.js';
+import './index-c279200e.js';
 import 'react-dropdown';
-import './index-48f46d16.js';
+import './index-73a18952.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-40c3aa55.js';
-import './index-64e04ea8.js';
-import './index-ce74bb99.js';
+import './index-43f1aaf1.js';
+import './index-f6e9c9ae.js';
+import './index-a0af8f05.js';
 import '@crystaldesign/content-box';
-import './index-42bf7ba6.js';
-import './index-320d6231.js';
-import './index-6a541dc9.js';
-import './index-1cc89593.js';
+import './index-a71ae9b2.js';
+import './index-899d89fd.js';
+import './index-a4794a86.js';
+import './index-a263984d.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-a9c0a340.js';
-import './index-072379d9.js';
-import './index-ce3fd2dd.js';
-import './index-03a87736.js';
-import './index-50d81f2b.js';
-import './index-566ac26c.js';
-import './index-1ad6bc31.js';
+import './UnlockCard-02aa9a69.js';
+import './index-72e2728b.js';
+import './index-15834f7e.js';
+import './index-be1e8de1.js';
+import './index-f8c8a196.js';
+import './index-1c047ad9.js';
+import './index-19a1ec6f.js';
 import 'react-laag';
-import './index.module-c5baf242.js';
-import './index-c19b15a9.js';
-import './index-769e119f.js';
-import './index-b2975c88.js';
-import './index-2efb3634.js';
-import './index-461dc61a.js';
-import './index.module-021d9040.js';
-import './index-270ed7ab.js';
-import './index-939c3fcb.js';
-import './index-756bfb44.js';
-import './index-667b836d.js';
-import './index-49b0ca7b.js';
-import './index-a19c4968.js';
-import './index-d372aea8.js';
-import './index-edcfe7ed.js';
-import './index-9c7fedf7.js';
-import './index-c773cfe3.js';
-import './index-1870516b.js';
-import './index-5baa5713.js';
-import './index-f700d17e.js';
+import './index.module-057f6f99.js';
+import './index-dd2b8f39.js';
+import './index-a696d9a5.js';
+import './index-f7097b49.js';
+import './index-98c89d12.js';
+import './index-873434f1.js';
+import './index.module-7ba44dcf.js';
+import './index-b92179a6.js';
+import './index-397e269c.js';
+import './index-a9e6adb6.js';
+import './index-127bd0ae.js';
+import './index-bc5a4369.js';
+import './index-b5191827.js';
+import './index-8176ed63.js';
+import './index-bf8ba883.js';
+import './index-9b2f9561.js';
+import './index-027243a1.js';
+import './index-b960cabf.js';
+import './index-363f363f.js';
+import './index-bc8e2d13.js';
 import 'rc-slider';
-import './index-c4d43896.js';
-import './index-bd25e428.js';
-import './index-604c3548.js';
-import './index-4cf7766e.js';
-import './index-1c502ce6.js';
+import './index-32cbe33b.js';
+import './index-81f7e4cc.js';
+import './index-ad8e4046.js';
+import './index-215bd124.js';
+import './index-2ec91db2.js';
 import 'react-confetti-explosion';
-import './index-068afe56.js';
-import './index-763b36fa.js';
-import './index-9774366c.js';
+import './index-64e4694e.js';
+import './index-04de0d7e.js';
+import './index-a22989a7.js';
 import 'react-qr-code';
-import './index-3fb7c01c.js';
-import './useCustomDimensions-a17f4739.js';
-import './index-130b910c.js';
-import './ussIsSticky-5a77c7e9.js';
-import './index-5fb8aeca.js';
-import './index-1219ff6b.js';
-import './index-032aa00e.js';
-import './index.module-4770510d.js';
-import './index-67fa18f0.js';
-import './index-388444e2.js';
-import './index-b0549eeb.js';
-import './index-53b09faa.js';
-import './index-3e55bccb.js';
-import './index-40c30570.js';
+import './index-9af43d49.js';
+import './useCustomDimensions-26686814.js';
+import './index-ab9da7af.js';
+import './ussIsSticky-5e068cfe.js';
+import './index-0f6c335b.js';
+import './index-e6679233.js';
+import './index-144b51f0.js';
+import './index.module-8fb7ab98.js';
+import './index-99619056.js';
+import './index-81bb1535.js';
+import './index-224feaac.js';
+import './index-cf51fa07.js';
+import './index-144c95f9.js';
+import './index-6ce39ae0.js';
 
 var collapsableOuter = "collapsable-outer-udXIP";
 var css_248z = ".collapsable-outer-udXIP {\n  overflow: visible !important;\n}\n.collapsable-outer-udXIP {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n";

package/build/esm/{index-b6980bff.js → index-34c12697.js}

@@ -1,5 +1,5 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler, w as wcPlannerMsgContainerParent, d as expanded, m as mobile, f as PlannerMsgItem } from './index-22049a2e.js';
+import { u as useViewHandler, w as wcPlannerMsgContainerParent, d as expanded, m as mobile, f as PlannerMsgItem } from './index-0b83c79f.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-3096e0bf.js → index-34da2c8f.js}

@@ -1,12 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, G as GenericToolTip } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler, G as GenericToolTip } from './index-0b83c79f.js';
 import { observer } from 'mobx-react-lite';
 import { useState, createElement } from 'react';
 import { useHover, useLayer } from 'react-laag';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
-import MetaData from './index-a19c4968.js';
+import MetaData from './index-b5191827.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';

package/build/esm/{index-fffa232d.js → index-359b2b89.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject } from './index-22049a2e.js';
+import { s as styleInject } from './index-0b83c79f.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import VerticalTabGroupItemStandard from './index-fb44c1a9.js';
+import VerticalTabGroupItemStandard from './index-d501d59d.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';

package/build/esm/{index-5baa5713.js → index-363f363f.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';

package/build/esm/{index-a1edc896.js → index-373fba49.js}

@@ -1,10 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import 'react';
-import InfoIcon from './index-673ca36d.js';
+import InfoIcon from './index-12b1fcbb.js';
 import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
 import { observer } from 'mobx-react-lite';
-import SummaryOptionTree from './index-03a87736.js';
+import SummaryOptionTree from './index-be1e8de1.js';
 import classnames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/build/esm/{index-f54121f1.js → index-37d3d2cd.js}

@@ -1,10 +1,10 @@
-import { u as useViewHandler } from './index-22049a2e.js';
+import { u as useViewHandler } from './index-0b83c79f.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-021d9040.js';
-import IsActive from './index-c19b15a9.js';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-7ba44dcf.js';
+import IsActive from './index-dd2b8f39.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-2b798d80.js → index-38c292e6.js}

@@ -1,21 +1,21 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import classnames from 'classnames';
-import DockFilter from './index-f31f6e78.js';
-import RALFilter from './index-48f46d16.js';
+import DockFilter from './index-208a002d.js';
+import RALFilter from './index-73a18952.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import Searchbar from './index-320d6231.js';
-import ToggleHeader from './index-2d469a57.js';
-import NumberInput from './index-44f80a69.js';
-import InfoButton from './index-e3034188.js';
-import PDFButton from './index-77537d77.js';
-import SummaryVariantButton from './index-a90752c0.js';
-import SelectedOpv from './index-a6235311.js';
-import InfoIcon from './index-673ca36d.js';
-import SettingsPosNr from './index-23044f9b.js';
-import SettingsConfigSingle from './index-dd00c08a.js';
-import { u as useStickyScroll } from './ussIsSticky-5a77c7e9.js';
+import Searchbar from './index-899d89fd.js';
+import ToggleHeader from './index-2bedd802.js';
+import NumberInput from './index-60a40cea.js';
+import InfoButton from './index-a9779c9b.js';
+import PDFButton from './index-7b92101a.js';
+import SummaryVariantButton from './index-2969ea6f.js';
+import SelectedOpv from './index-2355d3ce.js';
+import InfoIcon from './index-12b1fcbb.js';
+import SettingsPosNr from './index-fac02832.js';
+import SettingsConfigSingle from './index-8d2a9af2.js';
+import { u as useStickyScroll } from './ussIsSticky-5e068cfe.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
@@ -35,16 +35,16 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-40c3aa55.js';
+import './index-43f1aaf1.js';
 import 'react-dropdown';
-import './index-64e04ea8.js';
-import './index-ce74bb99.js';
+import './index-f6e9c9ae.js';
+import './index-a0af8f05.js';
 import '@crystaldesign/content-box';
-import './index-42bf7ba6.js';
-import './index-3096e0bf.js';
+import './index-a71ae9b2.js';
+import './index-34da2c8f.js';
 import 'react-laag';
-import './index-a19c4968.js';
-import './index-bb00d848.js';
+import './index-b5191827.js';
+import './index-5a6de101.js';
 import 'swiper/react';
 
 var headerWrapper = "header-wrapper-qVEmI";

package/build/esm/{index-18c75cd6.js → index-38eca6b9.js}

@@ -1,12 +1,12 @@
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-0b83c79f.js';
 import { useRef, useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
 import RealTimeRenderer from '@crystaldesign/real-time-viewer';
-import NavBar from './index-1b0bbf85.js';
+import NavBar from './index-f598c80b.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-939c3fcb.js → index-397e269c.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-22049a2e.js';
+import { s as styleInject } from './index-0b83c79f.js';
 import classnames from 'classnames';
 import 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';