@crystaldesign/diva-web-planner-react 26.4.0-rc.3 → 26.4.0-rc.4

package/build/esm/index-9e3b1b22.js

@@ -0,0 +1,178 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-cb4868f3.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+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 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";
+styleInject(css_248z);
+
+var LOADING_MESSAGES = {
+  de: ["Lichter werden eingerichtet\u2026", "Kamera wird positioniert\u2026", "M\xF6bel werden platziert\u2026", "Stoffe werden ausgew\xE4hlt\u2026", "Schatten werden angepasst\u2026", "Accessoires werden gestylt\u2026", "W\xE4nde werden gestrichen\u2026", "Letzte Details werden hinzugef\xFCgt\u2026", "Raum wird arrangiert\u2026", "Szene wird perfektioniert\u2026", "Oberfl\xE4chen werden poliert\u2026", "Ambiente wird abgestimmt\u2026"],
+  en: ["Setting up lights\u2026", "Positioning camera\u2026", "Placing furniture\u2026", "Choosing fabrics\u2026", "Adjusting shadows\u2026", "Styling accessories\u2026", "Painting the walls\u2026", "Adding final touches\u2026", "Arranging the room\u2026", "Perfecting the scene\u2026", "Polishing surfaces\u2026", "Tuning the ambiance\u2026"],
+  fr: ["Installation des lumi\xE8res\u2026", "Positionnement de la cam\xE9ra\u2026", "Placement des meubles\u2026", "Choix des tissus\u2026", "Ajustement des ombres\u2026", "Mise en place des accessoires\u2026", "Peinture des murs\u2026", "Ajout des touches finales\u2026", "Am\xE9nagement de la pi\xE8ce\u2026", "Perfectionnement de la sc\xE8ne\u2026", "Polissage des surfaces\u2026", "R\xE9glage de l\u2019ambiance\u2026"],
+  it: ["Preparazione delle luci\u2026", "Posizionamento della fotocamera\u2026", "Disposizione dei mobili\u2026", "Scelta dei tessuti\u2026", "Regolazione delle ombre\u2026", "Allestimento degli accessori\u2026", "Pittura delle pareti\u2026", "Aggiunta dei dettagli finali\u2026", "Organizzazione della stanza\u2026", "Perfezionamento della scena\u2026", "Lucidatura delle superfici\u2026", "Sintonizzazione dell\u2019atmosfera\u2026"]
+};
+var PlannerAIRoom = function PlannerAIRoom() {
+  var _i18n$language, _LOADING_MESSAGES$lan;
+  var viewHandler = useViewHandler();
+  var aiState = viewHandler.aiState;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n,
+    t = _useTranslation.t;
+  var swiperRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    messageIndex = _useState2[0],
+    setMessageIndex = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeSlide = _useState4[0],
+    setActiveSlide = _useState4[1];
+  var prevLengthRef = useRef(0);
+  var lang = ((_i18n$language = i18n.language) !== null && _i18n$language !== void 0 ? _i18n$language : 'de').toLowerCase().slice(0, 2);
+  var messages = (_LOADING_MESSAGES$lan = LOADING_MESSAGES[lang]) !== null && _LOADING_MESSAGES$lan !== void 0 ? _LOADING_MESSAGES$lan : LOADING_MESSAGES.de;
+  var isGenerating = aiState.isAnyGenerationInProgress;
+  var images = aiState.generatedImageHistory;
+  var isVisible = viewHandler.productState.doShowAIRoom;
+  var hasImages = images.length > 0;
+  useEffect(function () {
+    var entry = images[activeSlide];
+    if (entry) {
+      aiState.setCurrentlyVisibleRoom({
+        key: entry.key,
+        hash: entry.hash,
+        src: entry.src
+      });
+    }
+  }, [activeSlide]);
+  useEffect(function () {
+    if (!isGenerating) {
+      setMessageIndex(0);
+      return;
+    }
+    var interval = setInterval(function () {
+      setMessageIndex(function (prev) {
+        return (prev + 1) % messages.length;
+      });
+    }, 3000);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [isGenerating]);
+  useEffect(function () {
+    if (images.length > prevLengthRef.current && swiperRef.current) {
+      if (swiperRef.current.params.loop) {
+        swiperRef.current.slideToLoop(0, 300);
+      } else {
+        swiperRef.current.slideTo(0, 300);
+      }
+    }
+    prevLengthRef.current = images.length;
+  }, [images.length]);
+  useEffect(function () {
+    if (!aiState.currentlyVisibleRoom || !swiperRef.current) return;
+    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 (idx > -1 && idx !== swiperRef.current.realIndex) {
+      if (swiperRef.current.params.loop) {
+        swiperRef.current.slideToLoop(idx, 300);
+      } else {
+        swiperRef.current.slideTo(idx, 300);
+      }
+    }
+  }, [aiState.currentlyVisibleRoom, images]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wcConfiguratorAiRoom,
+    id: "ai-room-container",
+    style: {
+      visibility: isVisible ? 'visible' : 'hidden',
+      pointerEvents: isVisible ? 'auto' : 'none'
+    },
+    children: [hasImages ? /*#__PURE__*/jsxs("div", {
+      className: galleryContainer,
+      children: [/*#__PURE__*/jsx(Swiper, {
+        modules: [Navigation],
+        navigation: true,
+        slidesPerView: 1,
+        onSwiper: function onSwiper(swiper) {
+          swiperRef.current = swiper;
+        },
+        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) {
+          return /*#__PURE__*/jsx(SwiperSlide, {
+            children: /*#__PURE__*/jsx("div", {
+              className: "".concat(gallerySlide, " ").concat(isGenerating ? gallerySlideBlurred : ''),
+              children: /*#__PURE__*/jsx("img", {
+                className: aiRoomImage,
+                src: entry.src,
+                alt: "AI Generated Room",
+                draggable: false
+              })
+            })
+          }, "".concat(entry.key, "-").concat(entry.hash, "-").concat(idx));
+        })
+      }), images.length > 1 && !isGenerating && /*#__PURE__*/jsxs("div", {
+        className: slideCounter,
+        children: [activeSlide + 1, " / ", images.length]
+      })]
+    }) : aiState.currentlyVisibleRoom && /*#__PURE__*/jsx("div", {
+      className: gallerySlide,
+      children: /*#__PURE__*/jsx("img", {
+        className: aiRoomImage,
+        src: aiState.currentlyVisibleRoom.src,
+        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')
+    })]
+  });
+};
+var PlannerAIRoom$1 = observer(PlannerAIRoom);
+
+export { PlannerAIRoom$1 as default };

package/build/esm/index-9e62e06e.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-cb4868f3.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+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';
+
+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; }
+var ItemVariant = function ItemVariant(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "TabGroup/TabGroupVertical/ItemVariants"
+  }));
+};
+
+export { ItemVariant as default };

package/build/esm/index-9e6af365.js

@@ -0,0 +1,89 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-cb4868f3.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var inputBox = "input-box-NpxK9";
+var mobile = "mobile-OhbeO";
+var css_248z = ".input-box-NpxK9 {\n  width: 70px;\n  font-size: 20px;\n  height: 22px;\n}\n\n.input-box-NpxK9.mobile-OhbeO {\n  font-size: 16px;\n  height: 18px;\n  width: 50px;\n}\n";
+styleInject(css_248z);
+
+var NumberInput = function NumberInput(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useState = useState(item.numberInput),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputGotChangedByComponent = _useState4[0],
+    setInputGotChangedByComponent = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    invalidValue = _useState6[0],
+    setInvalidValue = _useState6[1];
+  useEffect(function () {
+    var _item$groups;
+    var opvItem = (_item$groups = item.groups) === null || _item$groups === void 0 || (_item$groups = _item$groups[0].items) === null || _item$groups === void 0 ? void 0 : _item$groups[0];
+    if (inputValue && opvItem && !isNaN(inputValue) && Number(opvItem.measureMinimum) <= inputValue && Number(opvItem.measureMaximum) >= inputValue) {
+      setInvalidValue(false);
+      if (inputValue !== Number(opvItem.freeText)) {
+        if (inputGotChangedByComponent) {
+          setInputGotChangedByComponent(false);
+          onRangeChange(opvItem);
+        }
+      }
+    } else {
+      setInvalidValue(true);
+    }
+  }, [inputValue]);
+  useEffect(function () {
+    setInputValue(item.numberInput);
+  }, [item]);
+  var onRangeChange = function onRangeChange(opvItem) {
+    if (inputValue) {
+      viewHandler.paletteViewHandler.onRangeClickChange(item, opvItem, inputValue.toString());
+    }
+  };
+  var onChange = function onChange(e) {
+    var newVal = Number(e.target.value);
+    if (newVal >= 0) {
+      setInputGotChangedByComponent(true);
+      setInputValue(newVal);
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [': ', /*#__PURE__*/jsx("input", {
+      className: classnames(inputBox, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      onChange: onChange,
+      style: {
+        color: invalidValue ? 'red' : undefined
+      },
+      type: "number",
+      value: inputValue
+    }), ' ', item.measureUnit]
+  });
+};
+var NumberInput$1 = observer(NumberInput);
+
+export { NumberInput$1 as default };

package/build/esm/index-9e8b07a5.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-cb4868f3.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-0fcf22e5.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-a01ebf98.js

@@ -0,0 +1,42 @@
+import './index-cb4868f3.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var DistanceToGround = function DistanceToGround(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      left: item.position.x + '%',
+      top: 100 - item.position.y + '%'
+    },
+    id: "distanceToGround",
+    className: classnames(plannerUIProps.classes.dimension.distanceToGround),
+    children: /*#__PURE__*/jsx("div", {
+      children: item.dimensionVal + ' cm'
+    })
+  });
+};
+var DistanceToGround$1 = observer(DistanceToGround);
+
+export { DistanceToGround$1 as default };

package/build/esm/index-a2c4f300.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-cb4868f3.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+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';
+
+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; }
+var Product = function Product(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/Product"
+  }));
+};
+
+export { Product as default };