@neurodyn/react-model-viewer 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -21,7 +21,7 @@ declare type DialogProps = React_3.ComponentProps<typeof DialogPrimitive.Root>
  */
 export declare type LaunchArOverride = (target: ArLaunchTarget) => boolean | Promise<boolean>;
 
-export declare function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, layout, background, viewerSurface, className, ...props }: ModelViewerProps & React_2.ComponentProps<'div'>): JSX.Element;
+export declare function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, lang, handoffUrl, launchAr, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, layout, background, viewerSurface, className, ...props }: ModelViewerProps & React_2.ComponentProps<'div'>): JSX.Element;
 
 export declare type ModelViewerArExperience = 'advanced' | 'standard';
 
@@ -32,6 +32,8 @@ export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyA
 declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'dimensionAxes' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'legacyApiBaseUrl' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children'> {
 }
 
+export declare type ModelViewerLanguage = 'en' | 'ru';
+
 declare type ModelViewerLayout = 'default' | 'model';
 
 export declare interface ModelViewerProps extends Omit<ModelViewerRootProps, 'showDialogCloseButton'> {
@@ -56,6 +58,8 @@ declare interface ModelViewerRootProps {
     mode?: ModelViewerWidgetMode;
     /** Existing token used to preserve the same widget session across a handoff. */
     initialWidgetSessionToken?: string;
+    /** UI language. Defaults to English. */
+    lang?: ModelViewerLanguage;
     /** Hosted viewer URL encoded into the desktop-to-mobile QR handoff. */
     handoffUrl?: string;
     /** Lets the host open its own AR experience instead of the native handoff. */

package/dist/index.js

@@ -1859,6 +1859,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   padding-bottom: 5px;
 }
 
+.pl-2 {
+  padding-left: calc(var(--spacing) * 2);
+}
+
 .pl-3 {
   padding-left: calc(var(--spacing) * 3);
 }
@@ -4262,6 +4266,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   color: var(--v-text-dark);
 }
 
+.data-\\[variant\\=destructive\\]\\:\\[\\&_svg\\:not\\(\\[class\\*\\=text-\\]\\)\\]\\:text-inherit[data-variant="destructive"] svg:not([class*="text-"]) {
+  color: inherit;
+}
+
 .\\[\\&_tr\\]\\:border-b tr {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
@@ -5731,6 +5739,7 @@ const PROPERTY_BLOCK_RE = /@property\s+(--[^{\s]+)\s*\{([^}]*)\}/g;
 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;
+const SHADOW_HOST_VISIBILITY_CSS = ':host{display:block!important;visibility:visible!important}';
 function createShadowRootCssText(cssText) {
     const cssForHost = cssText.replace(ROOT_TO_HOST_SELECTOR_RE, ':host');
     const propertyBlocks = Array.from(cssText.matchAll(PROPERTY_BLOCK_RE));
@@ -6148,7 +6157,10 @@ function QRCode({ data, foreground, background, robustness = 'M', className, ...
     });
 }
 const MODEL_VIEWER_URL = "https://integrations.vizbl.com/model-viewer";
-const AR_DEVICE_REQUIREMENTS_DISCLAIMER = '*Requires AR-supported device and browser. We recommend iOS 12 or later with Safari, or Android 7.0 or later with Chrome.';
+const AR_DEVICE_REQUIREMENTS_DISCLAIMER = {
+    en: '*Requires AR-supported device and browser. We recommend iOS 12 or later with Safari, or Android 7.0 or later with Chrome.',
+    ru: '*Требуется устройство и браузер с поддержкой AR. Рекомендуем iOS 12 или новее с Safari либо Android 7.0 или новее с Chrome.'
+};
 const DEFAULT_API_TIMEOUT = 30000;
 function createDefaultClient(defaultBaseURL) {
     return axios.create({
@@ -6842,7 +6854,7 @@ function isCanvasBlank(modelViewerEl) {
     return true;
 }
 const ModelViewerContext = /*#__PURE__*/ createContext(null);
-function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExperience, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, hid, launchAr, layout, background, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, viewerSurface }) {
+function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExperience, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, lang, handoffUrl, hid, launchAr, layout, background, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, viewerSurface }) {
     const { object, material, error, isLoading, setMaterialHid: setObjectMaterialHid, widgetSession } = useObjectData(tinuuid, hid, {
         apiBaseUrl,
         apiKey,
@@ -6967,6 +6979,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
             layout,
             background,
             mode,
+            lang,
             sizeType,
             dimensionAxes,
             cameraOrbit,
@@ -6997,6 +7010,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
         layout,
         background,
         mode,
+        lang,
         sizeType,
         dimensionAxes,
         cameraOrbit,
@@ -7120,7 +7134,7 @@ async function flushWidgetEvent(eventRequest) {
     });
 }
 function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
-    const { apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
+    const { apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, lang, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
     const [handoffSession, setHandoffSession] = useState(null);
     const [open, setOpen] = useState(false);
     const autoLaunchKeyRef = useRef(null);
@@ -7247,7 +7261,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                 size: size,
                 disabled: disabled || isDisabled,
                 onClick: handleButtonClick,
-                children: "View in place"
+                children: 'ru' === lang ? 'Смотреть в интерьере' : 'View in place'
             }),
             url && /*#__PURE__*/ jsx(Dialog, {
                 open: open,
@@ -7266,17 +7280,17 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                         }),
                         /*#__PURE__*/ jsx("p", {
                             className: "text-center text-lg font-medium text-text-sub",
-                            children: "Scan the QR code with your phone or tablet to view the object in your interior."
+                            children: 'ru' === lang ? 'Отсканируйте QR-код телефоном или планшетом, чтобы посмотреть объект в своём интерьере.' : 'Scan the QR code with your phone or tablet to view the object in your interior.'
                         }),
                         /*#__PURE__*/ jsx("p", {
                             className: "text-center text-xs text-text-light",
-                            children: AR_DEVICE_REQUIREMENTS_DISCLAIMER
+                            children: AR_DEVICE_REQUIREMENTS_DISCLAIMER[lang]
                         }),
                         /*#__PURE__*/ jsx(DialogClose, {
                             asChild: true,
                             children: /*#__PURE__*/ jsx(button_Button, {
                                 size: "lg",
-                                children: "Close"
+                                children: 'ru' === lang ? 'Закрыть' : 'Close'
                             })
                         })
                     ]
@@ -7478,6 +7492,7 @@ const Hotspots = /*#__PURE__*/ memo(({ hiddenHotspots, isVisible, labels })=>{
     });
 });
 function LogoSign({ className, ...props }) {
+    const { lang } = useModelViewer();
     return /*#__PURE__*/ jsxs("div", {
         className: utils_cn('group inline-flex gap-2 text-sm text-muted-foreground transition-colors duration-200 ease-in-out hover:text-text-dark', className),
         ...props,
@@ -7488,7 +7503,7 @@ function LogoSign({ className, ...props }) {
                     className: "size-4.25 text-icons-white"
                 })
             }),
-            "Powered by Vizbl"
+            `Powered by ${'ru' === lang ? 'Arizo' : 'Vizbl'}`
         ]
     });
 }
@@ -7620,7 +7635,7 @@ function RadioGroupItem({ className, variant = 'default', ...props }) {
     });
 }
 function MaterialVariants() {
-    const { object, material, setMaterialHid } = useModelViewer();
+    const { object, material, lang, setMaterialHid } = useModelViewer();
     const materials = object?.materials ?? [];
     if (!object || materials.length < 2) return null;
     return /*#__PURE__*/ jsx(Card, {
@@ -7643,7 +7658,7 @@ function MaterialVariants() {
                                         src: option.previews?.[0]?.subRes?.small ?? option.previews?.[0]?.url,
                                         width: 80,
                                         height: 80,
-                                        alt: option.name ?? object.name ?? 'Material preview',
+                                        alt: option.name ?? object.name ?? ('ru' === lang ? 'Превью материала' : 'Material preview'),
                                         className: "size-20 object-cover @max-xl:size-12"
                                     })
                                 }),
@@ -7660,12 +7675,21 @@ function MaterialVariants() {
     });
 }
 const viewerErrorTitle = {
-    forbidden: 'Viewer unavailable for this domain',
-    'not-found': 'Object not found',
-    unauthorized: 'Invalid API key',
-    'payment-required': 'Viewer temporarily unavailable'
+    en: {
+        forbidden: 'Viewer unavailable for this domain',
+        'not-found': 'Object not found',
+        unauthorized: 'Invalid API key',
+        'payment-required': 'Viewer temporarily unavailable'
+    },
+    ru: {
+        forbidden: 'Просмотр недоступен для этого домена',
+        'not-found': 'Объект не найден',
+        unauthorized: 'Неверный API-ключ',
+        'payment-required': 'Просмотр временно недоступен'
+    }
 };
 function ViewerErrorState({ variant, showDialogCloseButton = false }) {
+    const { lang } = useModelViewer();
     return /*#__PURE__*/ jsxs("div", {
         className: "relative z-30 flex size-full flex-col items-center justify-center gap-4 bg-radial from-background-containers to-background-base-2 p-4 text-center",
         children: [
@@ -7674,13 +7698,13 @@ function ViewerErrorState({ variant, showDialogCloseButton = false }) {
             }),
             /*#__PURE__*/ jsx("h2", {
                 className: "typo-base-16 font-medium text-text-dark",
-                children: viewerErrorTitle[variant]
+                children: viewerErrorTitle[lang][variant]
             }),
             showDialogCloseButton && /*#__PURE__*/ jsx(DialogClose, {
                 asChild: true,
                 children: /*#__PURE__*/ jsx(button_Button, {
                     variant: "secondary",
-                    children: "Close"
+                    children: 'ru' === lang ? 'Закрыть' : 'Close'
                 })
             })
         ]
@@ -7851,7 +7875,7 @@ function useDimensions({ isVisible, axes }) {
     };
 }
 function ModelViewerContainer({ showDialogCloseButton = false }) {
-    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, trackEvent } = useModelViewer();
+    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, lang, trackEvent } = useModelViewer();
     const [isDimensionsVisible, setDimensionsVisible] = useState(false);
     const isModelLayout = 'model' === layout;
     const showViewerLoader = 'loading' === state || 'ready' === state && isModelLoading;
@@ -7938,7 +7962,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
                                 size: "lg",
                                 variant: "secondary",
                                 disabled: !canToggleDimensions,
-                                "aria-label": "Toggle dimensions",
+                                "aria-label": 'ru' === lang ? 'Показать размеры' : 'Toggle dimensions',
                                 "aria-pressed": isDimensionsVisible,
                                 onClick: ()=>{
                                     setDimensionsVisible((current)=>!current);
@@ -7951,7 +7975,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
                                         className: "size-6"
                                     }),
                                     /*#__PURE__*/ jsx("span", {
-                                        children: "Dimensions"
+                                        children: 'ru' === lang ? 'Размеры' : 'Dimensions'
                                     })
                                 ]
                             }),
@@ -7990,7 +8014,7 @@ const root_queryClient = new QueryClient({
         }
     }
 });
-function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip', arExperience, hid, apiBaseUrl = "https://api.vizbl.com", legacyApiBaseUrl = "https://api.vizbl.com/v1", mode = 'embedded-3d-viewer', initialWidgetSessionToken, handoffUrl = "https://integrations.vizbl.com/model-viewer", launchAr, sizeType = 'cm', dimensionAxes = ALL_DIMENSION_AXES, cameraOrbit, minCameraOrbit, maxCameraOrbit, layout = 'default', background = 'default', showDialogCloseButton = false, viewerSurface = 'inline' }) {
+function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip', arExperience, hid, apiBaseUrl = "https://api.vizbl.com", legacyApiBaseUrl = "https://api.vizbl.com/v1", mode = 'embedded-3d-viewer', initialWidgetSessionToken, lang = 'en', handoffUrl = "https://integrations.vizbl.com/model-viewer", launchAr, sizeType = 'cm', dimensionAxes = ALL_DIMENSION_AXES, cameraOrbit, minCameraOrbit, maxCameraOrbit, layout = 'default', background = 'default', showDialogCloseButton = false, viewerSurface = 'inline' }) {
     const normalizedApiKey = normalizeApiKey(apiKey);
     return /*#__PURE__*/ jsx(QueryClientProvider, {
         client: root_queryClient,
@@ -8003,6 +8027,7 @@ function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip
             legacyApiBaseUrl: legacyApiBaseUrl,
             mode: mode,
             initialWidgetSessionToken: initialWidgetSessionToken,
+            lang: lang,
             handoffUrl: handoffUrl,
             hid: hid,
             launchAr: launchAr,
@@ -8076,6 +8101,9 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, init
                     zIndex: 2147483647
                 },
                 children: [
+                    /*#__PURE__*/ jsx("style", {
+                        children: SHADOW_HOST_VISIBILITY_CSS
+                    }),
                     /*#__PURE__*/ jsx("style", {
                         children: shadowRootCssText
                     }),
@@ -8087,7 +8115,7 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, init
         ]
     });
 }
-function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, layout, background, viewerSurface, className, ...props }) {
+function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, lang, handoffUrl, launchAr, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, layout, background, viewerSurface, className, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -8124,6 +8152,7 @@ function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiB
                                 legacyApiBaseUrl: legacyApiBaseUrl,
                                 mode: mode,
                                 initialWidgetSessionToken: initialWidgetSessionToken,
+                                lang: lang,
                                 handoffUrl: handoffUrl,
                                 hid: hid,
                                 launchAr: launchAr,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-model-viewer",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "publishConfig": {
     "access": "public"
   },