@neurodyn/react-room-viewer 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -86,6 +86,11 @@ declare const resources: {
                 readonly unauthorized: "Invalid API key";
                 readonly 'payment-required': "Viewer temporarily unavailable";
             };
+            readonly loadError: {
+                readonly 'viewer-load-failed': "We could not load the viewer. Please try again.";
+                readonly 'artwork-load-failed': "The image could not be loaded — its link is missing or incorrect in the widget settings.";
+                readonly 'room-load-failed': "The room photo could not be loaded. Please try again.";
+            };
             readonly resourceType: {
                 readonly rugs: {
                     readonly productCategory: "Rug";
@@ -200,6 +205,11 @@ declare const resources: {
                 readonly unauthorized: "Неверный API-ключ";
                 readonly 'payment-required': "Просмотр временно недоступен";
             };
+            readonly loadError: {
+                readonly 'viewer-load-failed': "Не удалось загрузить просмотр. Попробуйте ещё раз.";
+                readonly 'artwork-load-failed': "Не удалось загрузить изображение — ссылка на него отсутствует или указана неверно в настройках виджета.";
+                readonly 'room-load-failed': "Не удалось загрузить фото комнаты. Попробуйте ещё раз.";
+            };
             readonly resourceType: {
                 readonly rugs: {
                     readonly productCategory: "Ковер";

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx as jsx_runtime_jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, createContext, forwardRef, use as external_react_use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo as external_react_useMemo, useReducer, useRef, useState } from "react";
+import { Component, Suspense, createContext, forwardRef, use as external_react_use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo as external_react_useMemo, useReducer, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { I18nextProvider, initReactI18next, useTranslation } from "react-i18next";
 import react_shadow from "react-shadow";
@@ -19,7 +19,8 @@ import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { Content as react_tabs_Content, List, Root as react_tabs_Root, Trigger } from "@radix-ui/react-tabs";
 import { formatHex, oklch } from "culori";
 import qrcode from "qrcode";
-import { GLTFExporter, USDZExporter } from "three/examples/jsm/Addons.js";
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
+import { USDZExporter } from "three/examples/jsm/exporters/USDZExporter.js";
 import "@google/model-viewer";
 import { Clone, DragControls, Environment, useGLTF, useProgress, useTexture } from "@react-three/drei";
 import { Canvas, useLoader, useThree } from "@react-three/fiber";
@@ -1359,6 +1360,10 @@ var __webpack_modules__ = {
     height: auto;
   }
 
+  .h-dvh {
+    height: 100dvh;
+  }
+
   .h-full {
     height: 100%;
   }
@@ -1371,10 +1376,6 @@ var __webpack_modules__ = {
     height: 1px;
   }
 
-  .h-svh {
-    height: 100svh;
-  }
-
   .max-h-\\(--radix-select-content-available-height\\) {
     max-height: var(--radix-select-content-available-height);
   }
@@ -6640,6 +6641,11 @@ const ns1 = {
         unauthorized: 'Invalid API key',
         'payment-required': 'Viewer temporarily unavailable'
     },
+    loadError: {
+        'viewer-load-failed': 'We could not load the viewer. Please try again.',
+        'artwork-load-failed': 'The image could not be loaded — its link is missing or incorrect in the widget settings.',
+        'room-load-failed': 'The room photo could not be loaded. Please try again.'
+    },
     resourceType: {
         rugs: {
             productCategory: 'Rug',
@@ -6753,6 +6759,11 @@ const ns1_ns1 = {
         unauthorized: 'Неверный API-ключ',
         'payment-required': 'Просмотр временно недоступен'
     },
+    loadError: {
+        'viewer-load-failed': 'Не удалось загрузить просмотр. Попробуйте ещё раз.',
+        'artwork-load-failed': 'Не удалось загрузить изображение — ссылка на него отсутствует или указана неверно в настройках виджета.',
+        'room-load-failed': 'Не удалось загрузить фото комнаты. Попробуйте ещё раз.'
+    },
     resourceType: {
         rugs: {
             productCategory: 'Ковер',
@@ -6833,18 +6844,28 @@ roomViewerI18n.use(i18next_browser_languagedetector).use(initReactI18next).init(
     }
 });
 const PROPERTY_BLOCK_RE = /@property\s+(--[^{\s]+)\s*\{([^}]*)\}/g;
-const INITIAL_VALUE_RE = /initial-value:([^;\n]+);/i;
+const INITIAL_VALUE_RE = /initial-value:([^;}]+)/i;
+const NON_INHERITING_RE = /inherits:\s*false(?:\s*;|\s*$)/i;
 const ROOT_TO_HOST_SELECTOR_RE = /:root\s*,\s*:host|:root/g;
 function createShadowRootCssText(cssText) {
     const cssForHost = cssText.replace(ROOT_TO_HOST_SELECTOR_RE, ':host');
     const propertyBlocks = Array.from(cssText.matchAll(PROPERTY_BLOCK_RE));
     const propertyDefaults = propertyBlocks.map(([, name, body])=>{
-        const match = body.match(INITIAL_VALUE_RE);
-        if (!match) return null;
-        const initialValue = match[1].trim();
-        return `  ${name}: ${initialValue};`;
+        if (!NON_INHERITING_RE.test(body)) return null;
+        const initialValue = body.match(INITIAL_VALUE_RE)?.[1].trim() ?? 'initial';
+        return `    ${name}: ${initialValue};`;
     }).filter((value)=>null !== value).join('\n');
-    return propertyDefaults ? `:host {\n${propertyDefaults}\n}\n\n${cssForHost}` : cssForHost;
+    if (!propertyDefaults) return cssForHost;
+    return `${cssForHost}\n\n@layer base {
+  :host,
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+${propertyDefaults}
+  }
+}`;
 }
 var styleinline = __webpack_require__("./src/style.css?inline");
 const shadowRootCssText = createShadowRootCssText(styleinline.A);
@@ -8392,7 +8413,7 @@ function progress_Progress({ className, value, max = 100, ...props }) {
         })
     });
 }
-const fullscreenDialogContentClassName = 'inset-0 h-svh min-w-full max-w-none translate-x-0 translate-y-0 rounded-none border-none bg-transparent p-0 shadow-none sm:p-0 sm:max-w-none';
+const fullscreenDialogContentClassName = 'inset-0 h-dvh min-w-full max-w-none translate-x-0 translate-y-0 rounded-none border-none bg-transparent p-0 shadow-none sm:p-0 sm:max-w-none';
 const RoomViewerMetadataContext = createContext(null);
 const RoomViewerSurfaceContext = createContext(null);
 const RoomViewerRoomsContext = createContext(null);
@@ -8449,6 +8470,7 @@ const device_isMobile = 'mobile' === device.type;
 function getErrorMessageKey(variant) {
     if ('custom-interior-processing' === variant) return 'floor.error.processingBody';
     if ('viewer-load-failed' === variant) return 'floor.error.loadBody';
+    if ('artwork-load-failed' === variant || 'room-load-failed' === variant) return `loadError.${variant}`;
     return `accessError.${variant}`;
 }
 function FloorErrorDialog({ variant, open, portalContainer, showDialogCloseButton = false, onOpenChange, onTryAgain, onCancel }) {
@@ -10057,6 +10079,23 @@ function CanvasCaptureBridge({ ref }) {
     ]);
     return null;
 }
+class SceneErrorBoundary extends Component {
+    state = {
+        hasFailed: false
+    };
+    static getDerivedStateFromError() {
+        return {
+            hasFailed: true
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Room viewer scene failed to render', error, errorInfo.componentStack);
+        this.props.onError(error);
+    }
+    render() {
+        return this.state.hasFailed ? null : this.props.children;
+    }
+}
 const RESOURCE_BASE_NORMAL = new Vector3(0, 0, 1);
 const WORLD_UP = new Vector3(0, 0, 1);
 const MIN_PROJECTED_UP_LENGTH = 1e-6;
@@ -10997,7 +11036,7 @@ function WallResource({ src, position, quaternion, materialPatch }) {
 }
 function Room() {
     const { placement } = useRoomViewerMetadata();
-    const { src, glbUrl } = useRoomViewerResource();
+    const { src, glbUrl, setLoadError } = useRoomViewerResource();
     const { room } = useRoomViewerRooms();
     const { patchSceneLoad } = useRoomViewerSceneState();
     const { gl, size, camera, invalidate, raycaster, pointer } = useThree();
@@ -11099,16 +11138,19 @@ function Room() {
                     quaternion: scenePlacement.resourcePose.quaternion,
                     materialPatch: materialPatch
                 })
-            }) : scenePlacement.resourcePose && src && /*#__PURE__*/ jsx_runtime_jsx(DragControls, {
-                autoTransform: false,
-                onDrag: scenePlacement.handleDrag,
-                onDragEnd: scenePlacement.handleDragEnd,
-                onDragStart: scenePlacement.handleDragStart,
-                children: /*#__PURE__*/ jsx_runtime_jsx(WallResource, {
-                    src: src,
-                    position: scenePlacement.resourcePose.position,
-                    quaternion: scenePlacement.resourcePose.quaternion,
-                    materialPatch: materialPatch
+            }) : scenePlacement.resourcePose && src && /*#__PURE__*/ jsx_runtime_jsx(SceneErrorBoundary, {
+                onError: ()=>setLoadError('artwork-load-failed'),
+                children: /*#__PURE__*/ jsx_runtime_jsx(DragControls, {
+                    autoTransform: false,
+                    onDrag: scenePlacement.handleDrag,
+                    onDragEnd: scenePlacement.handleDragEnd,
+                    onDragStart: scenePlacement.handleDragStart,
+                    children: /*#__PURE__*/ jsx_runtime_jsx(WallResource, {
+                        src: src,
+                        position: scenePlacement.resourcePose.position,
+                        quaternion: scenePlacement.resourcePose.quaternion,
+                        materialPatch: materialPatch
+                    })
                 })
             }),
             scene.planes.map((plane)=>/*#__PURE__*/ jsx_runtime_jsx(RoomPlane, {
@@ -11116,7 +11158,53 @@ function Room() {
                     geometry: scenePlacement.planeGeometries.get(plane.id),
                     setPlaneRef: scenePlacement.setPlaneRef
                 }, plane.id)),
-            /*#__PURE__*/ jsx_runtime_jsx(RoomBackground, {})
+            /*#__PURE__*/ jsx_runtime_jsx(SceneErrorBoundary, {
+                onError: ()=>setLoadError('room-load-failed'),
+                children: /*#__PURE__*/ jsx_runtime_jsx(RoomBackground, {})
+            })
+        ]
+    });
+}
+async function layoutGetConfig(data, config = {}) {
+    const { client: request = client_client, ...requestConfig } = config;
+    const requestData = data;
+    const res = await request({
+        method: "POST",
+        url: "/layout/GetConfig",
+        data: requestData,
+        ...requestConfig
+    });
+    return res.data;
+}
+const HDR_NEUTRAL_LINK_TYPE = 'hdr_neutral';
+const ROOM_VIEWER_CONFIG_QUERY_KEY = [
+    'room-viewer',
+    'layout-config'
+];
+function getNeutralHdrUrl(config) {
+    const url = config?.internal?.links?.find((link)=>link.type === HDR_NEUTRAL_LINK_TYPE)?.url?.trim();
+    return url || void 0;
+}
+function FloorRoomEnvironment() {
+    const configQuery = react_query_useQuery({
+        queryKey: ROOM_VIEWER_CONFIG_QUERY_KEY,
+        queryFn: ()=>layoutGetConfig(),
+        staleTime: 1 / 0
+    });
+    if (configQuery.isPending) return null;
+    const hdrUrl = getNeutralHdrUrl(configQuery.data);
+    return /*#__PURE__*/ jsx_runtime_jsx(Environment, {
+        files: hdrUrl ? [
+            hdrUrl
+        ] : void 0,
+        preset: hdrUrl ? void 0 : 'warehouse'
+    });
+}
+function RoomEnvironment({ placement }) {
+    if ('floor' === placement) return /*#__PURE__*/ jsx_runtime_jsx(FloorRoomEnvironment, {});
+    return /*#__PURE__*/ jsx_runtime_jsx(Environment, {
+        files: [
+            HDR_URL
         ]
     });
 }
@@ -11249,11 +11337,8 @@ function CanvasWrapper({ className, ref, captureRef, onSizeChange, ...props }) {
                     /*#__PURE__*/ jsx_runtime_jsx(CanvasCaptureBridge, {
                         ref: captureRef
                     }),
-                    /*#__PURE__*/ jsx_runtime_jsx(Environment, {
-                        files: 'wall' === placement ? [
-                            HDR_URL
-                        ] : void 0,
-                        preset: 'floor' === placement ? 'warehouse' : void 0
+                    /*#__PURE__*/ jsx_runtime_jsx(RoomEnvironment, {
+                        placement: placement
                     }),
                     /*#__PURE__*/ jsx_runtime_jsx(Room, {})
                 ]
@@ -14001,6 +14086,10 @@ function Header({ className, ...props }) {
         })
     });
 }
+function RoomViewerErrorState_getErrorMessageKey(variant) {
+    if ('viewer-load-failed' === variant || 'artwork-load-failed' === variant || 'room-load-failed' === variant) return `loadError.${variant}`;
+    return `accessError.${variant}`;
+}
 function RoomViewerErrorState({ variant, showDialogCloseButton = false }) {
     const { t } = useTranslation();
     return /*#__PURE__*/ jsxs("div", {
@@ -14011,7 +14100,7 @@ function RoomViewerErrorState({ variant, showDialogCloseButton = false }) {
             }),
             /*#__PURE__*/ jsx_runtime_jsx("h2", {
                 className: "typo-base-16 font-medium text-text-dark",
-                children: t(`accessError.${variant}`)
+                children: t(RoomViewerErrorState_getErrorMessageKey(variant))
             }),
             showDialogCloseButton && /*#__PURE__*/ jsx_runtime_jsx(DialogClose, {
                 asChild: true,
@@ -14025,18 +14114,19 @@ function RoomViewerErrorState({ variant, showDialogCloseButton = false }) {
 }
 function RoomViewerContainer({ showDialogCloseButton = false }) {
     const { placement } = useRoomViewerMetadata();
-    const { isViewerAccessPending, accessError, hasRooms } = useRoomViewerResource();
+    const { isViewerAccessPending, accessError, loadError, setLoadError, hasRooms } = useRoomViewerResource();
     const { setContainerRef, sceneLoad, isRoomScenePending } = useRoomViewerSceneState();
     const { t } = useTranslation();
     const isSceneLoading = isViewerAccessPending || isRoomScenePending || hasRooms && !Object.values(sceneLoad).every(Boolean);
     if ('floor' === placement) return /*#__PURE__*/ jsx_runtime_jsx(FloorViewerLayout, {
         showDialogCloseButton: showDialogCloseButton
     });
-    if (accessError) return /*#__PURE__*/ jsx_runtime_jsx("div", {
+    const activeError = accessError ?? loadError;
+    if (activeError) return /*#__PURE__*/ jsx_runtime_jsx("div", {
         ref: setContainerRef,
         className: "relative size-full overflow-hidden bg-radial from-background-containers to-background-base-2 text-foreground",
         children: /*#__PURE__*/ jsx_runtime_jsx(RoomViewerErrorState, {
-            variant: accessError,
+            variant: activeError,
             showDialogCloseButton: showDialogCloseButton
         })
     });
@@ -14063,8 +14153,11 @@ function RoomViewerContainer({ showDialogCloseButton = false }) {
                     /*#__PURE__*/ jsxs("div", {
                         className: "size-full max-w-full grid grid-rows-[1fr_auto]",
                         children: [
-                            /*#__PURE__*/ jsx_runtime_jsx(Scene, {
-                                className: "size-full min-h-0"
+                            /*#__PURE__*/ jsx_runtime_jsx(SceneErrorBoundary, {
+                                onError: ()=>setLoadError('viewer-load-failed'),
+                                children: /*#__PURE__*/ jsx_runtime_jsx(Scene, {
+                                    className: "size-full min-h-0"
+                                })
                             }),
                             /*#__PURE__*/ jsx_runtime_jsx(Footer, {
                                 className: "bg-background"
@@ -14100,6 +14193,9 @@ function useFrameWidthOptions() {
         t
     ]);
 }
+function isBlankArtworkSource(src) {
+    return 'string' != typeof src || 0 === src.trim().length;
+}
 const LEGACY_RESOURCE_TYPE_TO_CANONICAL = {
     poster: 'wallart',
     carpet: 'rugs'
@@ -14308,8 +14404,9 @@ function RoomViewerProvider({ children, src, tinuuid: initialTinuuid, type, view
     const isViewerAccessPending = shouldActivatePublicApi && activationQuery.isLoading || isRoomsAccessPending;
     const activationLoadError = activationQuery.error && null === activationAccessError ? 'viewer-load-failed' : null;
     const objectLoadError = objectQuery.error && null === objectAccessError ? 'viewer-load-failed' : null;
+    const artworkLoadError = 'wall' === placement && isBlankArtworkSource(src) ? 'artwork-load-failed' : null;
     const viewerAccessError = accessError ?? activationAccessError ?? roomsAccessError ?? objectAccessError;
-    const viewerLoadError = loadError ?? activationLoadError ?? objectLoadError;
+    const viewerLoadError = loadError ?? activationLoadError ?? objectLoadError ?? artworkLoadError;
     const patchSceneLoad = useCallback((patch)=>{
         setSceneLoad((current)=>Object.assign({}, current, patch));
     }, []);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-room-viewer",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "publishConfig": {
     "access": "public"
   },
@@ -46,7 +46,7 @@
     "react-zoom-pan-pinch": "3.7.0",
     "swiper": "^12.1.0",
     "tailwind-merge": "3.4.0",
-    "three": "^0.182.0",
+    "three": "^0.185.1",
     "ua-parser-js": "^2.0.9"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@tailwindcss/postcss": "4.1.17",
     "@types/react": "^19.2.4",
     "@types/react-dom": "19.2.3",
-    "@types/three": "0.182.0",
+    "@types/three": "0.185.4",
     "eslint": "9.39.1",
     "postcss-rem-to-responsive-pixel": "^7.0.4",
     "react": "^19.2.0",
@@ -70,7 +70,8 @@
   "scripts": {
     "dev": "rsbuild dev",
     "build": "rslib build",
-    "test": "vitest run",
+    "test": "vitest run src",
+    "test:e2e": "playwright test e2e",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",