@crystaldesign/diva-web-planner-react 26.13.0-beta.31 → 26.13.0-beta.33

package/build/esm/ArLaunchButton-b7804dbf.js

@@ -0,0 +1,477 @@
+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-069dfa13.js';
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import QRCode from 'react-qr-code';
+import { getLogger, useTranslation, getNativeArPlatform, isWebXrArSupported, openQuickLook } from '@crystaldesign/diva-core';
+import { useRTVStore } from '@crystaldesign/real-time-viewer-next';
+import { R as RoundToggle, S as StrokeIcon, v as viewerButtonsShown } from './RoundToggle-155ee330.js';
+import _typeof from '@babel/runtime/helpers/typeof';
+import { jsx, jsxs } 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/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var qrModal = "qr-modal-vGghi";
+var arModel = "ar-model-O-FdI";
+var arIframe = "ar-iframe-1t5ss";
+var css_248z = ".qr-modal-vGghi {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  text-align: center;\n}\n\n/* model-viewer for the WebXR session, screen-sized like a visible viewer (it frames the model by its own size). Its DOM\n   overlay (the exit button) lives inside it, so it shows while presenting. */\n.ar-model-O-FdI {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.ar-model-O-FdI[ar-status='not-presenting'] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* The AR landing page over the shop's page (arViewerIframe), hidden and without clicks until it is ready. */\n.ar-iframe-1t5ss {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  z-index: 2147483647;\n  background: #fff;\n}\n\n.ar-iframe-1t5ss:not([data-ready]) {\n  visibility: hidden;\n}\n";
+styleInject(css_248z);
+
+/** The part of model-viewer's element API that starts its WebXR session. */
+
+function isModelViewer(element) {
+  return 'activateAR' in element && 'canActivateAR' in element;
+}
+
+/** A GLB loaded into an invisible model-viewer, ready for a WebXR AR session. */
+
+/**
+ * How long (ms) a launch waits for model-viewer's script, then for the GLB to load: a failed chunk load never defines
+ * the element, a stalled load sends neither `load` nor `error`.
+ */
+var MODEL_VIEWER_TIMEOUT_MS = 20000;
+
+/** The answer of `ok`, or false when it does not come within {@link MODEL_VIEWER_TIMEOUT_MS}. */
+function withinDeadline(ok) {
+  var timer;
+  var timeout = new Promise(function (resolve) {
+    timer = setTimeout(function () {
+      return resolve(false);
+    }, MODEL_VIEWER_TIMEOUT_MS);
+  });
+  return Promise.race([ok, timeout])["finally"](function () {
+    return clearTimeout(timer);
+  });
+}
+
+/**
+ * Loads a GLB from a local blob URL into an invisible model-viewer for its WebXR session; needs model-viewer loading
+ * (`actions.loadModelViewer()`). `onFailed` runs when the session cannot start; undefined when model-viewer or the
+ * model does not load.
+ */
+function loadWebXrModel(_x, _x2) {
+  return _loadWebXrModel.apply(this, arguments);
+}
+function _loadWebXrModel() {
+  _loadWebXrModel = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(glb, onFailed) {
+    var element, url, dispose, failed, started, loaded;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return withinDeadline(customElements.whenDefined('model-viewer').then(function () {
+            return true;
+          }));
+        case 2:
+          if (_context.sent) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 4:
+          element = document.createElement('model-viewer');
+          if (isModelViewer(element)) {
+            _context.next = 7;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 7:
+          url = URL.createObjectURL(glb);
+          dispose = function dispose() {
+            element.remove();
+            URL.revokeObjectURL(url);
+          };
+          failed = function failed() {
+            dispose();
+            onFailed();
+          };
+          started = false; // model-viewer sets `ar-status` before it dispatches the event. A refused session ends in 'not-presenting', then 'failed'.
+          element.addEventListener('ar-status', function () {
+            var status = element.getAttribute('ar-status');
+            if (status === 'session-started') started = true;else if (status === 'not-presenting' && started) dispose();else if (status === 'failed') failed();
+          });
+          loaded = new Promise(function (resolve) {
+            element.addEventListener('load', function () {
+              return resolve(true);
+            }, {
+              once: true
+            });
+            element.addEventListener('error', function () {
+              return resolve(false);
+            }, {
+              once: true
+            });
+          });
+          element.className = arModel;
+          element.setAttribute('loading', 'eager');
+          element.setAttribute('ar', '');
+          element.setAttribute('ar-modes', 'webxr');
+          // The GLB is the furniture at its true size; pinching in AR must not scale it.
+          element.setAttribute('ar-scale', 'fixed');
+          element.setAttribute('src', url);
+          document.body.appendChild(element);
+          _context.next = 22;
+          return withinDeadline(loaded);
+        case 22:
+          if (_context.sent) {
+            _context.next = 25;
+            break;
+          }
+          dispose();
+          return _context.abrupt("return", undefined);
+        case 25:
+          return _context.abrupt("return", {
+            enter: function enter() {
+              // false when the device offers no immersive AR session (no ARCore, WebXR blocked).
+              if (!element.canActivateAR) return failed();
+              element.activateAR()["catch"](failed);
+            },
+            dispose: dispose
+          });
+        case 26:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _loadWebXrModel.apply(this, arguments);
+}
+
+/** How long the AR page in the iframe may take to load before the launch gives up. */
+var READY_TIMEOUT_MS = 30000;
+
+/** The AR models the page in the iframe opens: the GLB for model-viewer and WebXR, the USDZ for iOS Quick Look. */
+
+function messageType(data) {
+  return _typeof(data) === 'object' && data !== null && 'type' in data ? data.type : undefined;
+}
+
+/**
+ * Opens AR through the AR landing page in a full-screen iframe (`?arObject=1`): its `AR_READY` is answered with the
+ * models (`SET_AR_OBJECT`), its `AR_CLOSE` removes the iframe. Resolves false when the page does not answer.
+ */
+function openArIframe(arViewerUrl, models) {
+  var url;
+  try {
+    url = new URL(arViewerUrl);
+  } catch (_unused) {
+    return Promise.resolve(false);
+  }
+  url.searchParams.set('arObject', '1');
+  var iframe = document.createElement('iframe');
+  iframe.className = arIframe;
+  iframe.src = url.toString();
+  iframe.allow = 'xr-spatial-tracking; camera; accelerometer; magnetometer; gyroscope';
+  iframe.allowFullscreen = true;
+  return new Promise(function (resolve) {
+    var ready = false;
+    var close = function close() {
+      clearTimeout(timeout);
+      window.removeEventListener('message', onMessage);
+      iframe.remove();
+    };
+    var timeout = setTimeout(function () {
+      close();
+      resolve(false);
+    }, READY_TIMEOUT_MS);
+    var onMessage = function onMessage(event) {
+      // Only the page in this iframe, still on the AR page's own domain.
+      if (event.source !== iframe.contentWindow || event.origin !== url.origin) return;
+      var type = messageType(event.data);
+      // The page sends AR_READY again once the model is loaded; the models go over once.
+      if (type === 'AR_READY' && !ready) {
+        var _iframe$contentWindow;
+        ready = true;
+        clearTimeout(timeout);
+        iframe.dataset.ready = '';
+        (_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 || _iframe$contentWindow.postMessage({
+          type: 'SET_AR_OBJECT',
+          payload: models.glb,
+          usdz: models.usdz
+        }, url.origin);
+        resolve(true);
+      } else if (type === 'AR_CLOSE') {
+        close();
+      }
+    };
+    window.addEventListener('message', onMessage);
+    document.body.appendChild(iframe);
+  });
+}
+
+var LOG = getLogger('Planner', 'ArLaunch');
+
+/** How long an AR launch waits for a capture batch or a move in flight to end before it gives up. */
+var EXPORTABLE_WAIT_MS = 5000;
+var ArIcon = function ArIcon() {
+  return /*#__PURE__*/jsxs(StrokeIcon, {
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M3.5 8V5a1.5 1.5 0 0 1 1.5-1.5h3M16 3.5h3A1.5 1.5 0 0 1 20.5 5v3M20.5 16v3a1.5 1.5 0 0 1-1.5 1.5h-3M8 20.5H5A1.5 1.5 0 0 1 3.5 19v-3"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M12 7l4.5 2.25v5.5L12 17l-4.5-2.25v-5.5z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M7.5 9.25L12 11.5l4.5-2.25M12 11.5V17"
+    })]
+  });
+};
+
+/** Whether the AR button shows: rtv-next with AR for the catalog (`allowQRCodeAR`) and a 3D scene to export. */
+function isArLaunchVisible(viewHandler) {
+  var productState = viewHandler.productState;
+  if (!viewerButtonsShown(productState) || !productState.allowQRCodeAR) return false;
+  // The models come from the 3D scene.
+  return productState.doShowRTV || productState.doShow3DComb;
+}
+
+/**
+ * The rtv-next AR button: AR Quick Look on iOS, model-viewer's WebXR session on Android, both exported in the browser;
+ * on a desktop a QR code joins a phone to the planning's live AR connection.
+ */
+var ArLaunch = function ArLaunch() {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    preparing = _useState2[0],
+    setPreparing = _useState2[1];
+  if (!isArLaunchVisible(viewHandler)) return null;
+  var planner = viewHandler.divaWebPlanner;
+  var platform = getNativeArPlatform();
+  var label = t('configurator.arLaunch.title');
+  var fail = function fail(reason) {
+    var _viewHandler$actions;
+    var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : t('configurator.arLaunch.failed');
+    LOG.warn("AR launch failed: ".concat(reason));
+    (_viewHandler$actions = viewHandler.actions) === null || _viewHandler$actions === void 0 || _viewHandler$actions.openModal({
+      title: label,
+      text: text,
+      accept: 'OK'
+    });
+  };
+  var unsupported = t('configurator.arLaunch.openFailed');
+  var launch = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _viewHandler$actions4;
+      var store, arViewerUrl, glb, usdz, _usdz, _url, _viewHandler$actions2, _viewHandler$actions3, _glb, model, url;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(platform === 'unsupported')) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", fail('an iOS browser without AR Quick Look', unsupported));
+          case 2:
+            store = useRTVStore.getState(); // Every path with a platform exports: a capture or a move in flight is waited for, not refused.
+            _context.t0 = platform !== 'none';
+            if (!_context.t0) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 7;
+            return store.whenExportable(EXPORTABLE_WAIT_MS);
+          case 7:
+            _context.t0 = !_context.sent;
+          case 8:
+            if (!_context.t0) {
+              _context.next = 10;
+              break;
+            }
+            return _context.abrupt("return", fail('the scene stayed in a capture or a move'));
+          case 10:
+            if (!(platform !== 'none' && viewHandler.uiState.AllConfig.arViewerIframe)) {
+              _context.next = 32;
+              break;
+            }
+            arViewerUrl = planner.getArViewerUrl();
+            if (arViewerUrl) {
+              _context.next = 14;
+              break;
+            }
+            return _context.abrupt("return", fail('arViewerIframe without arViewerUrl'));
+          case 14:
+            _context.next = 16;
+            return store.exportSceneGlb();
+          case 16:
+            glb = _context.sent;
+            if (glb) {
+              _context.next = 19;
+              break;
+            }
+            return _context.abrupt("return", fail('no GLB export (empty planning)'));
+          case 19:
+            if (!(platform === 'quick-look')) {
+              _context.next = 25;
+              break;
+            }
+            _context.next = 22;
+            return store.exportSceneUsdz()["catch"](function () {
+              return null;
+            });
+          case 22:
+            _context.t1 = _context.sent;
+            _context.next = 26;
+            break;
+          case 25:
+            _context.t1 = null;
+          case 26:
+            usdz = _context.t1;
+            _context.next = 29;
+            return openArIframe(arViewerUrl, {
+              glb: glb.blob,
+              usdz: usdz === null || usdz === void 0 ? void 0 : usdz.blob
+            });
+          case 29:
+            if (_context.sent) {
+              _context.next = 31;
+              break;
+            }
+            return _context.abrupt("return", fail('the AR page in the iframe did not answer'));
+          case 31:
+            return _context.abrupt("return");
+          case 32:
+            if (!(platform === 'quick-look')) {
+              _context.next = 42;
+              break;
+            }
+            _context.next = 35;
+            return store.exportSceneUsdz();
+          case 35:
+            _usdz = _context.sent;
+            if (_usdz) {
+              _context.next = 38;
+              break;
+            }
+            return _context.abrupt("return", fail('no USDZ export (empty planning)'));
+          case 38:
+            _url = URL.createObjectURL(_usdz.blob);
+            openQuickLook(_url);
+            // Quick Look reads the blob asynchronously after the click.
+            setTimeout(function () {
+              return URL.revokeObjectURL(_url);
+            }, 60000);
+            return _context.abrupt("return");
+          case 42:
+            if (!(platform === 'webxr')) {
+              _context.next = 60;
+              break;
+            }
+            _context.next = 45;
+            return isWebXrArSupported();
+          case 45:
+            if (_context.sent) {
+              _context.next = 47;
+              break;
+            }
+            return _context.abrupt("return", fail('no immersive WebXR AR session on this device', unsupported));
+          case 47:
+            // model-viewer downloads while the GLB exports.
+            (_viewHandler$actions2 = viewHandler.actions) === null || _viewHandler$actions2 === void 0 || _viewHandler$actions2.loadModelViewer();
+            _context.next = 50;
+            return store.exportSceneGlb();
+          case 50:
+            _glb = _context.sent;
+            if (_glb) {
+              _context.next = 53;
+              break;
+            }
+            return _context.abrupt("return", fail('no GLB export (empty planning)'));
+          case 53:
+            _context.next = 55;
+            return loadWebXrModel(_glb.blob, function () {
+              return fail('the WebXR session did not start', unsupported);
+            });
+          case 55:
+            model = _context.sent;
+            if (model) {
+              _context.next = 58;
+              break;
+            }
+            return _context.abrupt("return", fail('model-viewer or the GLB did not load'));
+          case 58:
+            // A tap of its own: the export outlives the button's, and model-viewer disables WebXR after a refused request.
+            (_viewHandler$actions3 = viewHandler.actions) === null || _viewHandler$actions3 === void 0 || _viewHandler$actions3.openModal({
+              title: label,
+              text: t('configurator.arLaunch.ready'),
+              reject: true,
+              accept: t('configurator.arLaunch.open'),
+              callback: function callback(accepted) {
+                if (accepted === true) model.enter();else model.dispose();
+              }
+            });
+            return _context.abrupt("return");
+          case 60:
+            if (planner.getArViewerUrl()) {
+              _context.next = 62;
+              break;
+            }
+            return _context.abrupt("return", fail('no arViewerUrl configured'));
+          case 62:
+            _context.next = 64;
+            return planner.openARObserverConnection(function () {
+              return planner.getPlannerHandler().saveSetHQRenderScript();
+            }, 'rtv-next');
+          case 64:
+            url = _context.sent;
+            (_viewHandler$actions4 = viewHandler.actions) === null || _viewHandler$actions4 === void 0 || _viewHandler$actions4.openModal({
+              title: label,
+              text: /*#__PURE__*/jsxs("div", {
+                className: qrModal,
+                children: [/*#__PURE__*/jsx("a", {
+                  href: url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: /*#__PURE__*/jsx(QRCode, {
+                    value: url,
+                    size: 220
+                  })
+                }), /*#__PURE__*/jsx("p", {
+                  children: t('configurator.arLaunch.scan')
+                })]
+              }),
+              accept: 'OK'
+            });
+          case 66:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function launch() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var onLaunch = function onLaunch() {
+    if (preparing) return;
+    setPreparing(true);
+    launch()["catch"](function (error) {
+      fail("unexpected error: ".concat(error instanceof Error ? error.message : String(error)));
+    })["finally"](function () {
+      return setPreparing(false);
+    });
+  };
+  return /*#__PURE__*/jsx(RoundToggle, {
+    label: label,
+    busy: preparing,
+    onToggle: onLaunch,
+    children: /*#__PURE__*/jsx(ArIcon, {})
+  });
+};
+var ArLaunchButton = observer(ArLaunch);
+
+export { ArLaunchButton as default };

package/build/esm/DrawerSwipeHint-c3c3af32.js

@@ -0,0 +1,130 @@
+import './index-069dfa13.js';
+import { useRef, useCallback } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { useCoachHint, isElementVisibleAt, CoachMark, textFor } from '@crystaldesign/real-time-viewer-next';
+import { D as DRAWER_SWIPE_HINT } from './useSteppedWithoutSwipe-3f98081b.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+/** Least height (px) of the drawer content on screen for the swipe hint to show in it. */
+var MIN_VISIBLE_PX = 80;
+/** The hand swipes across this middle share of the content's width, right to left (towards the next step). */
+var SWIPE_FROM = 0.75;
+var SWIPE_TO = 0.25;
+/** The swipe runs this far down the visible content, at most {@link SWIPE_MAX_DEPTH_PX}. */
+var SWIPE_DEPTH = 0.4;
+var SWIPE_MAX_DEPTH_PX = 140;
+
+/** The part of `rect` inside a `viewportHeight` tall viewport, or null when too little of it shows. */
+function visibleContentBox(rect, viewportHeight) {
+  var top = Math.max(rect.top, 0);
+  var bottom = Math.min(rect.bottom, viewportHeight);
+  if (rect.width < 1 || bottom - top < MIN_VISIBLE_PX) return null;
+  return {
+    left: rect.left,
+    top: top,
+    right: rect.right,
+    bottom: bottom
+  };
+}
+
+/**
+ * Whether the drawer `swiperEl` takes a swipe that starts on `hit`, the topmost element at that point: its own content
+ * (not an overlay above it), outside its no-swiping areas (`noSwipingSelector`, null where the drawer has none).
+ */
+function swipeTakesHit(swiperEl, hit, noSwipingSelector) {
+  return !!hit && swiperEl.contains(hit) && !(noSwipingSelector && hit.closest(noSwipingSelector));
+}
+
+/** Lanes tried around the preferred one are this far apart (px). */
+var LANE_STEP_PX = 24;
+
+/**
+ * The swipe from right to left across the upper part of the visible content, in the lane nearest that spot where the
+ * drawer takes the swipe at its start, middle and end (`swipeAllowedAt`); null where no lane does.
+ */
+function swipePoints(box, out) {
+  var swipeAllowedAt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
+    return true;
+  };
+  var width = box.right - box.left;
+  var ax = box.left + width * SWIPE_FROM;
+  var bx = box.left + width * SWIPE_TO;
+  var preferred = box.top + Math.min((box.bottom - box.top) * SWIPE_DEPTH, SWIPE_MAX_DEPTH_PX);
+  var fits = function fits(y) {
+    return y > box.top && y < box.bottom;
+  };
+  for (var offset = 0; fits(preferred + offset) || fits(preferred - offset); offset += LANE_STEP_PX) {
+    for (var _i = 0, _arr = offset === 0 ? [preferred] : [preferred + offset, preferred - offset]; _i < _arr.length; _i++) {
+      var y = _arr[_i];
+      if (!fits(y) || !swipeAllowedAt(ax, y) || !swipeAllowedAt((ax + bx) / 2, y) || !swipeAllowedAt(bx, y)) continue;
+      out.ax = ax;
+      out.bx = bx;
+      out.ay = y;
+      out.by = y;
+      return out;
+    }
+  }
+  return null;
+}
+
+/** Coach hint, once per session: a hand swiping across the drawer towards the next step. */
+var DrawerSwipeHint = function DrawerSwipeHint(_ref) {
+  var swiper = _ref.swiper,
+    wanted = _ref.wanted;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var show = useCoachHint(DRAWER_SWIPE_HINT, wanted);
+  var swipe = useRef({
+    ax: 0,
+    ay: 0,
+    bx: 0,
+    by: 0
+  });
+  var visibleBox = useCallback(function () {
+    var element = swiper === null || swiper === void 0 ? void 0 : swiper.el;
+    var box = element ? visibleContentBox(element.getBoundingClientRect(), window.innerHeight) : null;
+    return element && box && isElementVisibleAt(element, (box.left + box.right) / 2, box.top + (box.bottom - box.top) / 2) ? box : null;
+  }, [swiper]);
+  var swipeAllowedAt = useCallback(function (x, y) {
+    var element = swiper === null || swiper === void 0 ? void 0 : swiper.el;
+    var params = swiper === null || swiper === void 0 ? void 0 : swiper.params;
+    var noSwiping = params !== null && params !== void 0 && params.noSwiping ? params.noSwipingSelector || ".".concat(params.noSwipingClass) : null;
+    return !!element && swipeTakesHit(element, document.elementFromPoint(x, y), noSwiping);
+  }, [swiper]);
+  var swipeAnchors = useCallback(function () {
+    var box = visibleBox();
+    return box ? swipePoints(box, swipe.current, swipeAllowedAt) : null;
+  }, [visibleBox, swipeAllowedAt]);
+  if (!show) return null;
+  return /*#__PURE__*/jsx(CoachMark, {
+    hintId: DRAWER_SWIPE_HINT,
+    gesture: "swipe",
+    text: textFor({
+      mouse: t('configurator.coach.drawerSwipe.mouse'),
+      touch: t('configurator.coach.drawerSwipe.touch')
+    }),
+    anchors: swipeAnchors,
+    chipBounds: visibleBox
+  });
+};
+
+export { DrawerSwipeHint as default };