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

package/build/esm/index-1cc89593.js

@@ -0,0 +1,216 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { u as useViewHandler } from './index-22049a2e.js';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { c as container, e as emptyText, h as headline, s as subheadline, a as styleSelection, b as styleButtonsSwiper, d as styleButton, f as styleButtonSelected, g as styleButtonImage, i as styleDescription, j as styleName, k as styleDescriptionText, l as generateSection, m as customInputSection, n as customInput, o as generateButton, p as errorMessage, r as remainingText, U as UnlockCard, q as sceneHistory, t as sceneHistoryTitle, u as sceneHistorySwiper, v as sceneThumb, w as sceneThumbSelected, x as tryVariantLink } from './UnlockCard-a9c0a340.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var StyleConsultant = function StyleConsultant(_ref) {
+  var _viewHandler$getViewC, _aiState$enrichedAiRo, _budget$remaining, _viewHandler$settings, _viewHandler$settings2, _aiState$aiGeneration, _selectedItem$key, _aiState$customPrompt, _budget$isLimitReache, _budget$total, _budget$leadKeyActive;
+  _ref.item;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var aiState = viewHandler.aiState;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    keepUnlockVisible = _useState2[0],
+    setKeepUnlockVisible = _useState2[1];
+  if (!((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.showStyleConsultant) || !((_aiState$enrichedAiRo = aiState.enrichedAiRoomRenderings) !== null && _aiState$enrichedAiRo !== void 0 && _aiState$enrichedAiRo.length)) {
+    return /*#__PURE__*/jsx("div", {
+      className: container,
+      children: /*#__PURE__*/jsx("p", {
+        className: emptyText,
+        children: t('configurator.roomRendering.noStylesAvailable', 'Keine Stilwelten verfügbar.')
+      })
+    });
+  }
+  var roomItems = aiState.enrichedAiRoomRenderings;
+  var selectedItem = roomItems.find(function (r) {
+    return r.key === aiState.selectedRoom;
+  });
+  var budget = aiState.usageBudget;
+  var scenesRemaining = (_budget$remaining = budget === null || budget === void 0 ? void 0 : budget.remaining) !== null && _budget$remaining !== void 0 ? _budget$remaining : 0;
+  var leadBonus = (_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.organizationAISettings) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.leadRewardBonus) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0;
+  var generatedImages = aiState.generatedImageHistory;
+  var generationErrorKey = (_aiState$aiGeneration = aiState.aiGenerationErrors[(_selectedItem$key = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) !== null && _selectedItem$key !== void 0 ? _selectedItem$key : '']) === null || _aiState$aiGeneration === void 0 ? void 0 : _aiState$aiGeneration[aiState.setHash];
+  var hasImageForCurrentPrompt = generatedImages.some(function (e) {
+    return e.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && e.hash === aiState.setHash && (e.customPrompt || '') === (aiState.customPromptInput || '');
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/jsx("h1", {
+      className: headline,
+      children: t('configurator.inspiration.headline')
+    }), /*#__PURE__*/jsx("p", {
+      className: subheadline,
+      children: t('configurator.inspiration.subheadline')
+    }), /*#__PURE__*/jsxs("div", {
+      className: styleSelection,
+      children: [/*#__PURE__*/jsx("div", {
+        className: styleButtonsSwiper,
+        children: /*#__PURE__*/jsx(Swiper, {
+          modules: [Navigation],
+          spaceBetween: 10,
+          slidesPerView: "auto",
+          navigation: true,
+          wrapperClass: "no-swiping",
+          resizeObserver: true,
+          children: roomItems.map(function (style) {
+            return /*#__PURE__*/jsx(SwiperSlide, {
+              children: /*#__PURE__*/jsx("button", {
+                type: "button",
+                className: "".concat(styleButton, " ").concat(aiState.selectedRoom === style.key ? styleButtonSelected : ''),
+                onClick: function onClick() {
+                  return aiState.setSelectedRoom(style.key);
+                },
+                title: style.name,
+                children: /*#__PURE__*/jsx("img", {
+                  src: style.image,
+                  alt: style.name,
+                  className: styleButtonImage
+                })
+              })
+            }, style.key);
+          })
+        })
+      }), selectedItem && /*#__PURE__*/jsxs("div", {
+        className: styleDescription,
+        children: [/*#__PURE__*/jsx("h3", {
+          className: styleName,
+          children: selectedItem.name
+        }), !!selectedItem.description && /*#__PURE__*/jsx("p", {
+          className: styleDescriptionText,
+          children: selectedItem.description
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: generateSection,
+      children: scenesRemaining > 0 && !keepUnlockVisible ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: customInputSection,
+          children: [/*#__PURE__*/jsx("p", {
+            className: styleDescriptionText,
+            children: t('configurator.inspiration.customPromptDescription')
+          }), /*#__PURE__*/jsx("input", {
+            type: "text",
+            className: customInput,
+            value: (_aiState$customPrompt = aiState.customPromptInput) !== null && _aiState$customPrompt !== void 0 ? _aiState$customPrompt : '',
+            onChange: function onChange(e) {
+              return aiState.setCustomPromptInput(e.target.value);
+            },
+            placeholder: t('configurator.inspiration.customPlaceholder')
+          })]
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: generateButton,
+          onClick: function onClick() {
+            return selectedItem && aiState.handleGenerate(selectedItem.key, true);
+          },
+          disabled: !selectedItem || aiState.isAnyGenerationInProgress || ((_budget$isLimitReache = budget === null || budget === void 0 ? void 0 : budget.isLimitReached) !== null && _budget$isLimitReache !== void 0 ? _budget$isLimitReache : false) || hasImageForCurrentPrompt,
+          children: hasImageForCurrentPrompt ? t('configurator.inspiration.generated') : aiState.isAnyGenerationInProgress ? t('configurator.inspiration.generating') : generationErrorKey ? t('configurator.inspiration.retry') : t('configurator.inspiration.generate')
+        }), generationErrorKey && /*#__PURE__*/jsx("p", {
+          className: errorMessage,
+          children: t(generationErrorKey, generationErrorKey === 'configurator.roomRendering.aiGenerationError.imageSafety' ? t('configurator.inspiration.imageSafetyError') : generationErrorKey === 'configurator.roomRendering.aiGenerationError.resourceExhausted' ? t('configurator.inspiration.resourceExhaustedError') : t('configurator.inspiration.unknownError'))
+        }), /*#__PURE__*/jsx("p", {
+          className: remainingText,
+          children: scenesRemaining === 1 ? t('configurator.inspiration.remainingOne') : t('configurator.inspiration.remaining', {
+            scenesRemaining: scenesRemaining
+          })
+        })]
+      }) : /*#__PURE__*/jsx(UnlockCard, {
+        budgetTotal: (_budget$total = budget === null || budget === void 0 ? void 0 : budget.total) !== null && _budget$total !== void 0 ? _budget$total : 3,
+        leadBonus: leadBonus,
+        leadKeyActive: (_budget$leadKeyActive = budget === null || budget === void 0 ? void 0 : budget.leadKeyActive) !== null && _budget$leadKeyActive !== void 0 ? _budget$leadKeyActive : false,
+        onSubmit: (/*#__PURE__*/function () {
+          var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(email) {
+            var result;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  setKeepUnlockVisible(true);
+                  _context.next = 3;
+                  return aiState.createLeadKey(email);
+                case 3:
+                  result = _context.sent;
+                  return _context.abrupt("return", result !== null && result !== void 0 ? result : {
+                    success: false
+                  });
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          return function (_x) {
+            return _ref2.apply(this, arguments);
+          };
+        }()),
+        onSuccess: function onSuccess() {
+          return setKeepUnlockVisible(false);
+        }
+      })
+    }), generatedImages.length > 0 && /*#__PURE__*/jsxs("div", {
+      className: sceneHistory,
+      children: [/*#__PURE__*/jsx("h4", {
+        className: sceneHistoryTitle,
+        children: t('configurator.inspiration.sceneHistory')
+      }), /*#__PURE__*/jsx("div", {
+        className: sceneHistorySwiper,
+        children: /*#__PURE__*/jsx(Swiper, {
+          modules: [Navigation],
+          spaceBetween: 8,
+          slidesPerView: "auto",
+          navigation: true,
+          wrapperClass: "no-swiping",
+          resizeObserver: true,
+          children: generatedImages.map(function (entry, idx) {
+            var _aiState$currentlyVis;
+            return /*#__PURE__*/jsx(SwiperSlide, {
+              onClick: function onClick() {
+                return aiState.useAiGeneratedRoom(entry.key, entry.hash, false, entry.src);
+              },
+              children: /*#__PURE__*/jsx("div", {
+                className: "".concat(sceneThumb, " ").concat(((_aiState$currentlyVis = aiState.currentlyVisibleRoom) === null || _aiState$currentlyVis === void 0 ? void 0 : _aiState$currentlyVis.src) === entry.src ? sceneThumbSelected : ''),
+                children: /*#__PURE__*/jsx("img", {
+                  src: entry.src
+                })
+              })
+            }, "".concat(entry.key, "-").concat(entry.hash, "-").concat(idx));
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: tryVariantLink,
+      onClick: function onClick() {
+        var firstStep = viewHandler.tabGroupState.firstVisibleConfigStep;
+        if (firstStep) viewHandler.navigateToConfigStep(firstStep.key);
+      },
+      children: t('configurator.inspiration.tryVariant')
+    })]
+  });
+};
+var StyleConsultant$1 = observer(StyleConsultant);
+
+export { StyleConsultant$1 as default };

package/build/esm/{index-0399c6be.js → index-1d089060.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-b99aefce.js';
+import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useState, useEffect } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -27,13 +27,14 @@ 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.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";
+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";
 styleInject(css_248z);
 
 var LOADING_MESSAGES = {
@@ -65,12 +66,8 @@ 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 - imageIndexOffset];
+    var entry = images[activeSlide];
     if (entry) {
       aiState.setCurrentlyVisibleRoom({
         key: entry.key,
@@ -78,7 +75,7 @@ var PlannerAIRoom = function PlannerAIRoom() {
         src: entry.src
       });
     }
-  }, [activeSlide, imageIndexOffset]);
+  }, [activeSlide]);
   useEffect(function () {
     if (!isGenerating) {
       setMessageIndex(0);
@@ -95,51 +92,28 @@ 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(targetIdx, 300);
+        swiperRef.current.slideToLoop(0, 300);
       } else {
-        swiperRef.current.slideTo(targetIdx, 300);
+        swiperRef.current.slideTo(0, 300);
       }
     }
     prevLengthRef.current = images.length;
   }, [images.length]);
   useEffect(function () {
     if (!aiState.currentlyVisibleRoom || !swiperRef.current) return;
-    var imgIdx = images.findIndex(function (img) {
+    var idx = 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 (imgIdx < 0) return;
-    var swiperIdx = imgIdx + imageIndexOffset;
-    if (swiperIdx !== swiperRef.current.realIndex) {
+    if (idx > -1 && idx !== swiperRef.current.realIndex) {
       if (swiperRef.current.params.loop) {
-        swiperRef.current.slideToLoop(swiperIdx, 300);
+        swiperRef.current.slideToLoop(idx, 300);
       } else {
-        swiperRef.current.slideTo(swiperIdx, 300);
+        swiperRef.current.slideTo(idx, 300);
       }
     }
-  }, [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]);
+  }, [aiState.currentlyVisibleRoom, images]);
   return /*#__PURE__*/jsxs("div", {
     className: wcConfiguratorAiRoom,
     id: "ai-room-container",
@@ -147,9 +121,9 @@ var PlannerAIRoom = function PlannerAIRoom() {
       visibility: isVisible ? 'visible' : 'hidden',
       pointerEvents: isVisible ? 'auto' : 'none'
     },
-    children: [hasImages || isGenerating ? /*#__PURE__*/jsxs("div", {
+    children: [hasImages ? /*#__PURE__*/jsxs("div", {
       className: galleryContainer,
-      children: [/*#__PURE__*/jsxs(Swiper, {
+      children: [/*#__PURE__*/jsx(Swiper, {
         modules: [Navigation],
         navigation: true,
         slidesPerView: 1,
@@ -159,21 +133,11 @@ var PlannerAIRoom = function PlannerAIRoom() {
         onSlideChange: function onSlideChange(swiper) {
           return setActiveSlide(swiper.realIndex);
         },
-        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) {
+        loop: (images === null || images === void 0 ? void 0 : images.length) > 1 ? true : false,
+        children: images.map(function (entry, idx) {
           return /*#__PURE__*/jsx(SwiperSlide, {
             children: /*#__PURE__*/jsx("div", {
-              className: gallerySlide,
+              className: "".concat(gallerySlide, " ").concat(isGenerating ? gallerySlideBlurred : ''),
               children: /*#__PURE__*/jsx("img", {
                 className: aiRoomImage,
                 src: entry.src,
@@ -182,10 +146,10 @@ var PlannerAIRoom = function PlannerAIRoom() {
               })
             })
           }, "".concat(entry.key, "-").concat(entry.hash, "-").concat(idx));
-        })]
-      }), images.length > 1 && !isLoadingSlideActive && /*#__PURE__*/jsxs("div", {
+        })
+      }), images.length > 1 && !isGenerating && /*#__PURE__*/jsxs("div", {
         className: slideCounter,
-        children: [activeSlide - imageIndexOffset + 1, " / ", images.length]
+        children: [activeSlide + 1, " / ", images.length]
       })]
     }) : aiState.currentlyVisibleRoom && /*#__PURE__*/jsx("div", {
       className: gallerySlide,
@@ -195,6 +159,14 @@ 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-697887b0.js → index-1d1c3714.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-b99aefce.js';
+import { u as useViewHandler } from './index-22049a2e.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { S as SettingsItem } from './index-7ef5edd3.js';
-import SettingsItemsGroup from './index-d71eb1ae.js';
-import ContentItemTeaser from './index-675e93f1.js';
+import { S as SettingsItem } from './index-5ecfdc6f.js';
+import SettingsItemsGroup from './index-3e55bccb.js';
+import ContentItemTeaser from './index-40c30570.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -25,80 +25,80 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import 'sift';
-import './index-204c7ace.js';
-import './index-e99a8649.js';
-import './index-36d5dd74.js';
-import './index-d384b90f.js';
-import './index.module-30d35317.js';
-import './index-48c19916.js';
-import './index-942e6312.js';
+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 '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-0e40998a.js';
+import './index-8c660cb4.js';
 import 'react-dropdown';
-import './index-8428b3b6.js';
+import './index-48f46d16.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-d9355729.js';
-import './index-4067ecb8.js';
-import './index-08ad5908.js';
+import './index-40c3aa55.js';
+import './index-64e04ea8.js';
+import './index-ce74bb99.js';
 import '@crystaldesign/content-box';
-import './index-8af989f6.js';
-import './index-a11dd159.js';
-import './index-c6f79213.js';
-import './index-b7dad95e.js';
+import './index-42bf7ba6.js';
+import './index-320d6231.js';
+import './index-6a541dc9.js';
+import './index-1cc89593.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-c5f07fdd.js';
-import './index-b9beebb4.js';
-import './index-a23bda6e.js';
-import './index-102999d2.js';
-import './index-76e0975e.js';
-import './index-264b0e9e.js';
-import './index-85807869.js';
+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 'react-laag';
-import './index.module-ac0a5de0.js';
-import './index-88c3afe8.js';
-import './index-decd01ad.js';
-import './index-2dc7daf0.js';
-import './index-5f6cae18.js';
-import './index-af6a6a2a.js';
-import './index.module-a62b991f.js';
-import './index-e4c0dc03.js';
-import './index-2e8bf7e2.js';
-import './index-7b95dd9d.js';
-import './index-23a99f8e.js';
-import './index-7b910a59.js';
-import './index-26234653.js';
-import './index-607a1fa0.js';
-import './index-5e82efe7.js';
-import './index-a22c1a67.js';
-import './index-de59a5a5.js';
-import './index-92fbb4db.js';
-import './index-0fe910d6.js';
-import './index-a66db6c5.js';
+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 'rc-slider';
-import './index-31abdc10.js';
-import './index-4c65b3e8.js';
-import './index-e94c610f.js';
-import './index-accdaf72.js';
-import './index-c1144e77.js';
+import './index-c4d43896.js';
+import './index-bd25e428.js';
+import './index-604c3548.js';
+import './index-4cf7766e.js';
+import './index-1c502ce6.js';
 import 'react-confetti-explosion';
-import './index-bdc3ee6b.js';
-import './index-73668730.js';
-import './index-96f71e3a.js';
+import './index-068afe56.js';
+import './index-763b36fa.js';
+import './index-9774366c.js';
 import 'react-qr-code';
-import './index-1ef08e18.js';
-import './useCustomDimensions-276c0c18.js';
-import './index-f3a0854c.js';
-import './ussIsSticky-b937d3df.js';
-import './index-7494bb81.js';
-import './index-928724c1.js';
-import './index-02194380.js';
-import './index.module-61b141ee.js';
-import './index-e271d014.js';
-import './index-45294198.js';
-import './index-ff336081.js';
-import './index-33b546c2.js';
+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';
 
 var SettingsItemsWrapper = function SettingsItemsWrapper(_ref) {
   var itemPalettesArr = _ref.itemPalettesArr;

package/build/esm/{index-0a5a6e4a.js → index-1eaa156a.js}

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

package/build/esm/{index-73153349.js → index-1eb596e8.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-b99aefce.js';
+import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
 import 'react';
 import classnames from 'classnames';
 import { useTranslation } from '@crystaldesign/diva-core';

package/build/esm/{index-d384b90f.js → index-1f14f1f5.js}

@@ -1,12 +1,12 @@
-import { u as useViewHandler, P as PricePreview, T as Toggle } from './index-b99aefce.js';
+import { u as useViewHandler, P as PricePreview, T as Toggle } from './index-22049a2e.js';
 import 'react';
 import classnames from 'classnames';
-import { r as row, c as colum, t as title, a as toggle } from './index.module-30d35317.js';
+import { r as row, c as colum, t as title, a as toggle } from './index.module-b5494b57.js';
 import { observer } from 'mobx-react-lite';
 import { getLogger } from '@crystaldesign/diva-core';
 import { DivaError } from '@crystaldesign/diva-utils';
-import InfoIcon from './index-48c19916.js';
-import ReverseCheck from './index-942e6312.js';
+import InfoIcon from './index-673ca36d.js';
+import ReverseCheck from './index-addd466a.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-49844900.js → index-20069ffe.js}

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