@liveroom-tech/react-immersive 5.1.0 → 5.3.0

package/dist/{objectCatalog-BIeXURoq.d.mts → rendererBackend-C_Jb4_Jy.d.ts}

@@ -105,10 +105,11 @@ type SceneModelConfig = {
     autoRotate?: boolean;
     autoRotateSpeed?: number;
     /**
-     * The glTF material variant (KHR_materials_variants) to show, by name, or
-     * null for the model's default materials.
+     * The glTF material variants (KHR_materials_variants) to show, by name: at
+     * most one from each option group (see `MaterialVariantGroup`). Empty, or
+     * left out, for the model's default materials.
      */
-    materialVariant?: string | null;
+    activeVariants?: string[];
 };
 type SceneCameraConfig = {
     fieldOfView: number;
@@ -360,6 +361,22 @@ type ScenePostProcessingConfig = {
         rampInvert: boolean;
     };
 };
+type SceneAnnotationCameraView = {
+    position: [number, number, number];
+    target: [number, number, number];
+    azimuthAngle?: number;
+    polarAngle?: number;
+    fov?: number | null;
+    zoom?: number;
+};
+type SceneAnnotationImage = {
+    src: string;
+    alt?: string;
+};
+type SceneAnnotationLink = {
+    href: string;
+    label: string;
+};
 type SceneAnnotationMarker = {
     id: number;
     worldPosition: [number, number, number];
@@ -369,6 +386,14 @@ type SceneAnnotationMarker = {
     anchorLocalPosition?: [number, number, number];
     title: string;
     description: string;
+    /** World-space camera framing restored on selection and during tours. */
+    cameraView?: SceneAnnotationCameraView;
+    images?: SceneAnnotationImage[];
+    links?: SceneAnnotationLink[];
+    category?: string;
+    /** Inclusive camera-to-marker distance bounds, in scene units. */
+    minDistance?: number;
+    maxDistance?: number;
 };
 type SceneCinematicWaypoint = {
     position: [number, number, number];
@@ -568,6 +593,8 @@ type ViewerAnimationsProps = {
     setSpeed: (speed: number, clipName?: string) => void;
     seek: (time: number, clipName?: string) => void;
     handleAnimationsReady: (controls: AnimationControls) => void;
+    /** Disconnect the previous model while the next one is loading. */
+    clearAnimations: () => void;
 };
 declare function useViewerAnimations(): ViewerAnimationsProps;
 
@@ -709,12 +736,23 @@ type ObjectBindingTextureSlot = {
 };
 type ObjectBindingTextureChannel = "baseColor" | "metalness" | "roughness" | "emissive" | "alpha" | "normal" | "bump" | "ao" | "displacement" | "clearcoat" | "clearcoatRoughness" | "clearcoatNormal" | "anisotropy" | "transmission" | "thickness" | "sheenColor" | "sheenRoughness" | "specularIntensity" | "specularColor";
 type ObjectBindingTransform = {
-    /** Local-space position in model units. */
+    /** Local xy/xz/yz shear, applied between rotation and scale. Preserves rigid world edits under non-uniform parents. */
+    shear?: [number, number, number];
+    /** Local-space node-origin position, or the reference-pose position when pivot is set. */
     position?: [number, number, number];
     /** Local-space Euler rotation in radians. */
     rotation?: [number, number, number];
     /** Local-space scale. */
     scale?: [number, number, number];
+    /**
+     * Opt-in centered editing. Legacy transforms without this field remain direct
+     * local P/R/S. The reference offset keeps position independent of later
+     * rotation/scale edits: rendered origin = position + offset - R * H * S * point (H is shear).
+     */
+    pivot?: {
+        point: [number, number, number];
+        offset: [number, number, number];
+    };
 };
 declare const MATERIAL_SIDES: readonly ["front", "back", "double"];
 type ObjectBindingMaterialSide = (typeof MATERIAL_SIDES)[number];
@@ -819,6 +857,7 @@ type ObjectBinding = {
     group?: string;
     tags?: string[];
     status?: ObjectBindingStatus;
+    removed?: boolean;
     visible?: boolean;
     selectable?: boolean;
     hoverable?: boolean;
@@ -872,4 +911,7 @@ type ViewerObjectInfo = {
     maximum: [number, number, number];
 };
 
-export { type SceneConfigPatch as $, type AnimationAction as A, type BindingEdit as B, type CameraAction as C, DEFAULT_SCENE_CONFIG as D, type EnvironmentPreset as E, type ObjectBindingTextureChannel as F, type GlitchModeName as G, type ObjectBindingTextureSlot as H, type IsolatedObjectBindings as I, type ObjectBindingTransform as J, type KernelSizeName as K, type ObjectBindingType as L, MATERIAL_BLENDING_MODES as M, type ObjectBindingsActionEffect as N, type ObjectActionEffect as O, type ObjectPointerEvent as P, type ObjectSurfacePoint as Q, type RampTypeName as R, type SceneAnimationClipConfig as S, type SceneAnimationConfig as T, type SceneAnnotationMarker as U, type SceneBackgroundConfig as V, type SceneCameraConfig as W, type SceneCinematicConfig as X, type SceneCinematicWaypoint as Y, type SceneConfig as Z, type SceneConfigActionEffect as _, type AnimationActionEffect as a, type SceneEnvironmentConfig as a0, type SceneGroundShadowConfig as a1, type SceneLight as a2, type SceneLightAttachment as a3, type SceneLightType as a4, type SceneLightingConfig as a5, type SceneModelConfig as a6, type SceneModelRenderer as a7, type ScenePostProcessingConfig as a8, type SceneSectionAxis as a9, type SceneSectionConfig as aa, type SceneShadowConfig as ab, type SceneStyleColorScale as ac, type SceneStyleCondition as ad, type SceneStylePulse as ae, type SceneStyleRule as af, type SceneWireframeConfig as ag, type StyledObjectBindings as ah, type StyledObjectPulse as ai, type ViewerAnimationsProps as aj, type ViewerCameraConfig as ak, type ViewerCameraState as al, type ViewerIsolation as am, type ViewerObjectInfo as an, type VisibilityActionEffect as ao, applyIsolation as ap, applyStyleRules as aq, colorScaleValue as ar, isolatedBindingKeys as as, material as at, patchBindings as au, patchSceneConfig as av, selectBindingKeys as aw, selectBindings as ax, useViewerAnimations as ay, type AnimationClipInfo as b, type AnimationClipState as c, type AnimationClipStatus as d, type AnimationControls as e, type AnimationLoopMode as f, type AnimationPlayOptions as g, type AnimationPlaybackState as h, type CameraActionEffect as i, DEFAULT_SECTION_CONFIG as j, type DeepPartial as k, type IsolationActionEffect as l, MATERIAL_SIDES as m, type ObjectActionEvent as n, type ObjectBinding as o, type ObjectBindingAction as p, type ObjectBindingCameraState as q, type ObjectBindingDecal as r, type ObjectBindingMaterial as s, type ObjectBindingMaterialBlendingMode as t, type ObjectBindingMaterialSide as u, type ObjectBindingPatch as v, type ObjectBindingSelector as w, type ObjectBindingStatus as x, type ObjectBindingStyle as y, type ObjectBindingTarget as z };
+/** Which three.js renderer draws a viewer. */
+type RendererBackend = "webgl" | "webgpu";
+
+export { type SceneCinematicConfig as $, type AnimationAction as A, type BindingEdit as B, type CameraAction as C, DEFAULT_SCENE_CONFIG as D, type EnvironmentPreset as E, type ObjectBindingTextureChannel as F, type GlitchModeName as G, type ObjectBindingTextureSlot as H, type IsolatedObjectBindings as I, type ObjectBindingTransform as J, type KernelSizeName as K, type ObjectBindingType as L, MATERIAL_BLENDING_MODES as M, type ObjectBindingsActionEffect as N, type ObjectActionEffect as O, type ObjectPointerEvent as P, type ObjectSurfacePoint as Q, type RampTypeName as R, type RendererBackend as S, type SceneAnimationClipConfig as T, type SceneAnimationConfig as U, type SceneAnnotationCameraView as V, type SceneAnnotationImage as W, type SceneAnnotationLink as X, type SceneAnnotationMarker as Y, type SceneBackgroundConfig as Z, type SceneCameraConfig as _, type AnimationActionEffect as a, type SceneCinematicWaypoint as a0, type SceneConfig as a1, type SceneConfigActionEffect as a2, type SceneConfigPatch as a3, type SceneEnvironmentConfig as a4, type SceneGroundShadowConfig as a5, type SceneLight as a6, type SceneLightAttachment as a7, type SceneLightType as a8, type SceneLightingConfig as a9, selectBindingKeys as aA, selectBindings as aB, useViewerAnimations as aC, type SceneModelConfig as aa, type SceneModelRenderer as ab, type ScenePostProcessingConfig as ac, type SceneSectionAxis as ad, type SceneSectionConfig as ae, type SceneShadowConfig as af, type SceneStyleColorScale as ag, type SceneStyleCondition as ah, type SceneStylePulse as ai, type SceneStyleRule as aj, type SceneWireframeConfig as ak, type StyledObjectBindings as al, type StyledObjectPulse as am, type ViewerAnimationsProps as an, type ViewerCameraConfig as ao, type ViewerCameraState as ap, type ViewerIsolation as aq, type ViewerObjectInfo as ar, type VisibilityActionEffect as as, applyIsolation as at, applyStyleRules as au, colorScaleValue as av, isolatedBindingKeys as aw, material as ax, patchBindings as ay, patchSceneConfig as az, type AnimationClipInfo as b, type AnimationClipState as c, type AnimationClipStatus as d, type AnimationControls as e, type AnimationLoopMode as f, type AnimationPlayOptions as g, type AnimationPlaybackState as h, type CameraActionEffect as i, DEFAULT_SECTION_CONFIG as j, type DeepPartial as k, type IsolationActionEffect as l, MATERIAL_SIDES as m, type ObjectActionEvent as n, type ObjectBinding as o, type ObjectBindingAction as p, type ObjectBindingCameraState as q, type ObjectBindingDecal as r, type ObjectBindingMaterial as s, type ObjectBindingMaterialBlendingMode as t, type ObjectBindingMaterialSide as u, type ObjectBindingPatch as v, type ObjectBindingSelector as w, type ObjectBindingStatus as x, type ObjectBindingStyle as y, type ObjectBindingTarget as z };

package/dist/simple-model-viewer.css

@@ -1 +1 @@
-.bb-loadingOverlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;border-radius:14px;background:#f8fafcd1;backdrop-filter:blur(2px)}.bb-loadingSpinner{width:40px;height:40px;border-radius:999px;border:3px solid rgba(148,163,184,.3);border-top-color:#2563eb;animation:bb-spin .8s linear infinite}.bb-loadingProgressRow{display:flex;align-items:center;gap:8px;width:100%;max-width:240px}.bb-loadingProgress{flex:1;height:6px;border-radius:999px;background:#94a3b84d;overflow:hidden}.bb-loadingProgress__bar{height:100%;border-radius:inherit;background:#2563eb;transition:width .15s ease-out}.bb-loadingProgress__label{flex-shrink:0;min-width:34px;text-align:right;color:#475569;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.bb-loadingMessage{max-width:320px;color:#475569;font-size:13px;font-weight:600;line-height:1.5}:root{--ri-styles-simple-model-viewer: 1}.smv-root{--smv-panel-font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif;--smv-panel-bg: #141824;--smv-panel-bg-strong: #1a1f2e;--smv-panel-bg-strong-hover: #252b3b;--smv-panel-border: rgba(255, 255, 255, .06);--smv-panel-border-strong: rgba(255, 255, 255, .08);--smv-panel-border-active: rgba(255, 255, 255, .18);--smv-panel-shadow-left: 4px 0 24px rgba(0, 0, 0, .35);--smv-panel-shadow-right: -4px 0 24px rgba(0, 0, 0, .35);--smv-panel-text: #f1f5f9;--smv-panel-text-emphasis: #ffffff;--smv-panel-text-muted: #94a3b8;--smv-panel-text-subtle: #64748b;--smv-panel-surface: rgba(255, 255, 255, .05);--smv-panel-surface-hover: rgba(255, 255, 255, .1);--smv-panel-surface-soft: rgba(255, 255, 255, .04);--smv-panel-accent: #3b82f6;--smv-panel-accent-contrast: #ffffff;position:relative;width:100%;height:100%;min-height:0;overflow:hidden;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}.smv-canvasArea{flex:1;position:relative;min-width:0}.smv-upload-input{display:none}.smv-upload-toolbar{position:absolute;top:12px;left:50%;z-index:120;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:5px 6px;border:1px solid var(--smv-panel-border-strong);border-radius:10px;background:#141824e0;color:var(--smv-panel-text);box-shadow:0 16px 30px #00000047;backdrop-filter:blur(14px);transform:translate(-50%)}.smv-upload-toolbar__name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--smv-panel-text-muted);font-size:12px;font-weight:500}.smv-upload-toolbar__button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#3b82f62e;color:var(--smv-panel-text-emphasis);font-size:12px;font-weight:600;cursor:pointer}.smv-upload-toolbar__button--ghost{background:var(--smv-panel-surface);color:var(--smv-panel-text-muted)}.smv-upload-empty-state{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:24px}.smv-upload-empty-state__card{width:min(440px,100%);padding:28px;border:1px dashed rgba(255,255,255,.2);border-radius:8px;color:var(--smv-panel-text);text-align:center;box-shadow:0 24px 40px #00000047;backdrop-filter:blur(14px)}.smv-upload-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:18px;border-radius:10px;background:#3b82f62e;color:#bfdbfe}.smv-upload-empty-state__title{margin:0 0 10px;color:var(--smv-panel-text-emphasis);font-size:24px;line-height:1.15}.smv-upload-empty-state__body{margin:0 0 18px;color:var(--smv-panel-text-muted);font-size:14px;font-weight:700;line-height:1.6}.smv-upload-empty-state__body code{color:var(--smv-panel-text-emphasis);font-family:var(--smv-panel-font-family)}.smv-upload-empty-state__button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:none;border-radius:8px;background:#3b82f6;color:#eff6ff;font-size:13px;font-weight:700;cursor:pointer}.smv-upload-drop-overlay{position:absolute;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px;background:#080c147a;backdrop-filter:blur(4px)}.smv-upload-drop-overlay__card{display:inline-flex;align-items:center;gap:10px;padding:16px 20px;border:1px dashed rgba(191,219,254,.75);border-radius:10px;background:#1e293beb;color:#dbeafe;font-size:14px;font-weight:700;box-shadow:0 18px 36px #00000047}.smv-canvasArea .bb-loadingOverlay{position:absolute;inset:0;z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;border-radius:14px;background:#0f172a75;backdrop-filter:blur(1px)}.smv-canvasArea .bb-loadingSpinner{width:40px;height:40px;border-radius:999px;border:3px solid rgba(226,232,240,.24);border-top-color:#93c5fd;animation:bb-spin .8s linear infinite}.smv-canvasArea .bb-loadingProgressRow{display:flex;align-items:center;gap:8px;width:100%;max-width:240px}.smv-canvasArea .bb-loadingProgress{flex:1;height:6px;border-radius:999px;background:#e2e8f03d;overflow:hidden}.smv-canvasArea .bb-loadingProgress__bar{height:100%;border-radius:inherit;background:#93c5fd;transition:width .15s ease-out}.smv-canvasArea .bb-loadingProgress__label{flex-shrink:0;min-width:34px;text-align:right;color:#f7f8fa;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.smv-canvasArea .bb-loadingMessage{max-width:320px;color:#f7f8fa;font-size:13px;font-weight:600;line-height:1.5}@keyframes bb-spin{to{transform:rotate(360deg)}}.right-panel-wrapper{height:100%;transition:width .45s cubic-bezier(.4,0,.2,1);overflow:visible}.right-panel-wrapper--open{width:300px;flex-shrink:0}.right-panel-wrapper--closed{width:0;flex-shrink:0}.left-panel-wrapper{height:100%;transition:width .45s cubic-bezier(.4,0,.2,1);overflow:visible;order:-1}.left-panel-wrapper--open{width:280px;flex-shrink:0}.left-panel-wrapper--closed{width:0;flex-shrink:0}.side-panel__open-btn.side-panel__open-btn--left{left:12px;right:auto}.side-panel.side-panel--left{left:0;right:auto;width:280px;transform:translate(-100%);border-left:none;border-right:1px solid var(--smv-panel-border);box-shadow:var(--smv-panel-shadow-left)}.side-panel.side-panel--open-left{transform:translate(0)}.side-panel.side-panel--closed-left{transform:translate(-100%)}.env-controls{display:flex;flex-direction:column;overflow-y:auto;flex:1}.env-section{border-bottom:1px solid var(--smv-panel-border-strong)}.env-section__header{display:flex;align-items:center;gap:6px;width:100%;padding:9px 14px;border:none;background:var(--smv-panel-surface-soft);color:var(--smv-panel-text-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.env-section__chevron{transition:transform .15s}.env-section__chevron--collapsed{transform:rotate(-90deg)}.env-section__body{display:flex;flex-direction:column}.env-row{display:flex;gap:6px;align-items:center;min-height:32px;border-bottom:1px solid var(--smv-panel-surface)}.env-row__label{flex:0 0 42%;padding:0 0 0 14px;font-size:11.5px;font-weight:500;color:var(--smv-panel-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.env-row__value{flex:1;display:flex;align-items:center;padding:5px 10px 5px 8px;min-width:0}.env-row__value--slider{gap:6px}.env-checkbox-btn{display:flex;align-items:center;cursor:pointer;background:none;border:none;padding:0}.env-checkbox{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--smv-panel-border-active);background:var(--smv-panel-surface-soft);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.env-checkbox--checked{background:var(--smv-panel-accent);border-color:var(--smv-panel-accent)}.env-select{width:100%;padding:5px 8px;border-radius:4px;border:none;background:var(--smv-panel-surface-hover);color:var(--smv-panel-text);font-size:11.5px;outline:none;box-sizing:border-box;text-transform:capitalize}.env-color-swatch{position:relative;width:100%;height:22px;border-radius:4px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.env-color-swatch__hex{font-size:10.5px;font-weight:700;color:#0f172a;text-shadow:0 1px 1px rgba(255,255,255,.35);pointer-events:none;text-transform:uppercase}.env-color-swatch__input{position:absolute;inset:0;width:100%;height:100%;border:none;padding:0;opacity:0;cursor:pointer}.env-slider{flex:1;accent-color:var(--smv-panel-accent);cursor:pointer;min-width:0}.env-slider__value{flex-shrink:0;min-width:32px;padding:2px 5px;border-radius:4px;background:var(--smv-panel-surface-hover);color:var(--smv-panel-accent);font-size:10.5px;font-weight:600;text-align:center}.side-panel__open-btn{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:7px;border:1px solid var(--smv-panel-border-strong);background:var(--smv-panel-bg-strong);cursor:pointer;font-size:13px;font-weight:500;color:var(--smv-panel-text);z-index:190;transition:background .15s}.side-panel__open-btn:hover{background:var(--smv-panel-bg-strong-hover)}.side-panel{position:absolute;top:0;right:0;width:300px;height:100%;background:var(--smv-panel-bg);display:flex;flex-direction:column;font-family:var(--smv-panel-font-family);transform:translate(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);z-index:200;border-left:1px solid var(--smv-panel-border);box-shadow:var(--smv-panel-shadow-right)}.side-panel--open{transform:translate(0)}.side-panel--closed{transform:translate(100%)}.side-panel__header{padding:24px 20px 16px;border-bottom:1px solid var(--smv-panel-border-strong)}.side-panel__header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.side-panel__eyebrow{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--smv-panel-text-subtle);text-transform:uppercase}.side-panel__title{font-size:22px;font-weight:700;color:var(--smv-panel-text);margin:0;line-height:1.2}.side-panel__close-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--smv-panel-border-strong);background:var(--smv-panel-surface);cursor:pointer;color:var(--smv-panel-text-muted);transition:background .15s,color .15s;flex-shrink:0}.side-panel__close-btn:hover{background:var(--smv-panel-surface-hover);color:var(--smv-panel-text)}.side-panel__search-wrap{padding:14px 16px;border-bottom:1px solid var(--smv-panel-border-strong)}.side-panel__search{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--smv-panel-border-strong);background:var(--smv-panel-surface);color:var(--smv-panel-text);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,background .15s}.side-panel__search::placeholder{color:var(--smv-panel-text-subtle)}.side-panel__search:focus{border-color:var(--smv-panel-border-active);background:var(--smv-panel-surface-hover)}.side-panel__list{display:flex;flex-direction:column;padding:10px 0;overflow-y:auto;flex:1}.side-panel__list::-webkit-scrollbar{width:4px}.side-panel__list::-webkit-scrollbar-track{background:transparent}.side-panel__list::-webkit-scrollbar-thumb{background:var(--smv-panel-surface-hover);border-radius:4px}.side-panel__row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--smv-panel-surface-soft)}.side-panel__row:hover,.side-panel__row--hovered{background:var(--smv-panel-surface)}.side-panel__label{font-size:14px;font-weight:600;color:var(--smv-panel-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.side-panel__label--hovered{color:var(--smv-panel-text-emphasis)}.side-panel__vis-btn{display:flex;align-items:center;flex-shrink:0;cursor:pointer;background:none;border:none;padding:0;margin-left:10px}.side-panel__checkbox{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--smv-panel-border-active);background:transparent;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.side-panel__checkbox--checked{background:var(--smv-panel-accent);border-color:var(--smv-panel-accent)}@media(max-width:900px){.smv-upload-toolbar{top:56px;gap:8px;max-width:calc(100% - 24px);padding:8px 10px}.smv-upload-toolbar__name{max-width:140px}.right-panel-wrapper--open,.left-panel-wrapper--open{width:0}.side-panel,.side-panel.side-panel--left{width:min(300px,85vw)}}.smv-largeModelBanner{position:absolute;bottom:12px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:8px;background:#1e1400e0;border:1px solid rgba(251,191,36,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fbbf24;font-size:12px;font-weight:500;line-height:1.4;pointer-events:auto;max-width:calc(100% - 32px);text-align:center}.smv-largeModelBanner__icon{flex-shrink:0}.smv-largeModelBanner__dismiss{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:4px;padding:2px;background:none;border:none;border-radius:4px;color:#fbbf24b3;cursor:pointer;transition:color .15s ease,background .15s ease}.smv-largeModelBanner__dismiss:hover{color:#fbbf24;background:#fbbf241f}
+.bb-loadingOverlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;border-radius:14px;background:#f8fafcd1;backdrop-filter:blur(2px)}.bb-loadingSpinner{width:40px;height:40px;border-radius:999px;border:3px solid rgba(148,163,184,.3);border-top-color:#2563eb;animation:bb-spin .8s linear infinite}.bb-loadingProgressRow{display:flex;align-items:center;gap:8px;width:100%;max-width:240px}.bb-loadingProgress{flex:1;height:6px;border-radius:999px;background:#94a3b84d;overflow:hidden}.bb-loadingProgress__bar{height:100%;border-radius:inherit;background:#2563eb;transition:width .15s ease-out}.bb-loadingProgress__label{flex-shrink:0;min-width:34px;text-align:right;color:#475569;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.bb-loadingMessage{max-width:320px;color:#475569;font-size:13px;font-weight:600;line-height:1.5}.ri-viewerSlot{position:relative;width:100%;height:100%;min-width:0;min-height:0}.ri-viewerPlaceholder{position:relative;overflow:hidden}.ri-viewerPlaceholder--inset{position:absolute;inset:0}.ri-poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:var(--ri-poster-fit, contain);pointer-events:none;user-select:none;transition:opacity .3s ease}.ri-poster--hidden{opacity:0}[data-reduced-motion] .ri-poster{transition:none}@media(prefers-reduced-motion:reduce){.ri-poster{transition:none}}.ri-revealButton{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:999px;background:#111827d1;color:#f9fafb;font:600 14px/1.2 Inter,Segoe UI,Helvetica,Arial,sans-serif;white-space:nowrap;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 6px 20px #00000040}.ri-revealButton:hover{background:#111827f0}.ri-revealButton:focus-visible{outline:2px solid #93c5fd;outline-offset:3px}:root{--ri-styles-simple-model-viewer: 1}.smv-root{--smv-panel-font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif;--smv-panel-bg: #141824;--smv-panel-bg-strong: #1a1f2e;--smv-panel-bg-strong-hover: #252b3b;--smv-panel-border: rgba(255, 255, 255, .06);--smv-panel-border-strong: rgba(255, 255, 255, .08);--smv-panel-border-active: rgba(255, 255, 255, .18);--smv-panel-shadow-left: 4px 0 24px rgba(0, 0, 0, .35);--smv-panel-shadow-right: -4px 0 24px rgba(0, 0, 0, .35);--smv-panel-text: #f1f5f9;--smv-panel-text-emphasis: #ffffff;--smv-panel-text-muted: #94a3b8;--smv-panel-text-subtle: #64748b;--smv-panel-surface: rgba(255, 255, 255, .05);--smv-panel-surface-hover: rgba(255, 255, 255, .1);--smv-panel-surface-soft: rgba(255, 255, 255, .04);--smv-panel-accent: #3b82f6;--smv-panel-accent-contrast: #ffffff;position:relative;width:100%;height:100%;min-height:0;overflow:hidden;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}.smv-canvasArea{flex:1;position:relative;min-width:0}.smv-upload-input{display:none}.smv-upload-toolbar{position:absolute;top:12px;left:50%;z-index:120;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:5px 6px;border:1px solid var(--smv-panel-border-strong);border-radius:10px;background:#141824e0;color:var(--smv-panel-text);box-shadow:0 16px 30px #00000047;backdrop-filter:blur(14px);transform:translate(-50%)}.smv-upload-toolbar__name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--smv-panel-text-muted);font-size:12px;font-weight:500}.smv-upload-toolbar__button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#3b82f62e;color:var(--smv-panel-text-emphasis);font-size:12px;font-weight:600;cursor:pointer}.smv-upload-toolbar__button--ghost{background:var(--smv-panel-surface);color:var(--smv-panel-text-muted)}.smv-upload-empty-state{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:24px}.smv-upload-empty-state__card{width:min(440px,100%);padding:28px;border:1px dashed rgba(255,255,255,.2);border-radius:8px;color:var(--smv-panel-text);text-align:center;box-shadow:0 24px 40px #00000047;backdrop-filter:blur(14px)}.smv-upload-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:18px;border-radius:10px;background:#3b82f62e;color:#bfdbfe}.smv-upload-empty-state__title{margin:0 0 10px;color:var(--smv-panel-text-emphasis);font-size:24px;line-height:1.15}.smv-upload-empty-state__body{margin:0 0 18px;color:var(--smv-panel-text-muted);font-size:14px;font-weight:700;line-height:1.6}.smv-upload-empty-state__body code{color:var(--smv-panel-text-emphasis);font-family:var(--smv-panel-font-family)}.smv-upload-empty-state__button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:none;border-radius:8px;background:#3b82f6;color:#eff6ff;font-size:13px;font-weight:700;cursor:pointer}.smv-upload-drop-overlay{position:absolute;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px;background:#080c147a;backdrop-filter:blur(4px)}.smv-upload-drop-overlay__card{display:inline-flex;align-items:center;gap:10px;padding:16px 20px;border:1px dashed rgba(191,219,254,.75);border-radius:10px;background:#1e293beb;color:#dbeafe;font-size:14px;font-weight:700;box-shadow:0 18px 36px #00000047}.smv-canvasArea .bb-loadingOverlay{position:absolute;inset:0;z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;border-radius:14px;background:#0f172a75;backdrop-filter:blur(1px)}.smv-canvasArea .bb-loadingSpinner{width:40px;height:40px;border-radius:999px;border:3px solid rgba(226,232,240,.24);border-top-color:#93c5fd;animation:bb-spin .8s linear infinite}.smv-canvasArea .bb-loadingProgressRow{display:flex;align-items:center;gap:8px;width:100%;max-width:240px}.smv-canvasArea .bb-loadingProgress{flex:1;height:6px;border-radius:999px;background:#e2e8f03d;overflow:hidden}.smv-canvasArea .bb-loadingProgress__bar{height:100%;border-radius:inherit;background:#93c5fd;transition:width .15s ease-out}.smv-canvasArea .bb-loadingProgress__label{flex-shrink:0;min-width:34px;text-align:right;color:#f7f8fa;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.smv-canvasArea .bb-loadingMessage{max-width:320px;color:#f7f8fa;font-size:13px;font-weight:600;line-height:1.5}@keyframes bb-spin{to{transform:rotate(360deg)}}.right-panel-wrapper{height:100%;transition:width .45s cubic-bezier(.4,0,.2,1);overflow:visible}.right-panel-wrapper--open{width:300px;flex-shrink:0}.right-panel-wrapper--closed{width:0;flex-shrink:0}.left-panel-wrapper{height:100%;transition:width .45s cubic-bezier(.4,0,.2,1);overflow:visible;order:-1}.left-panel-wrapper--open{width:280px;flex-shrink:0}.left-panel-wrapper--closed{width:0;flex-shrink:0}.side-panel__open-btn.side-panel__open-btn--left{left:12px;right:auto}.side-panel.side-panel--left{left:0;right:auto;width:280px;transform:translate(-100%);border-left:none;border-right:1px solid var(--smv-panel-border);box-shadow:var(--smv-panel-shadow-left)}.side-panel.side-panel--open-left{transform:translate(0)}.side-panel.side-panel--closed-left{transform:translate(-100%)}.env-controls{display:flex;flex-direction:column;overflow-y:auto;flex:1}.env-section{border-bottom:1px solid var(--smv-panel-border-strong)}.env-section__header{display:flex;align-items:center;gap:6px;width:100%;padding:9px 14px;border:none;background:var(--smv-panel-surface-soft);color:var(--smv-panel-text-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.env-section__chevron{transition:transform .15s}.env-section__chevron--collapsed{transform:rotate(-90deg)}.env-section__body{display:flex;flex-direction:column}.env-row{display:flex;gap:6px;align-items:center;min-height:32px;border-bottom:1px solid var(--smv-panel-surface)}.env-row__label{flex:0 0 42%;padding:0 0 0 14px;font-size:11.5px;font-weight:500;color:var(--smv-panel-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.env-row__value{flex:1;display:flex;align-items:center;padding:5px 10px 5px 8px;min-width:0}.env-row__value--slider{gap:6px}.env-checkbox-btn{display:flex;align-items:center;cursor:pointer;background:none;border:none;padding:0}.env-checkbox{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--smv-panel-border-active);background:var(--smv-panel-surface-soft);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.env-checkbox--checked{background:var(--smv-panel-accent);border-color:var(--smv-panel-accent)}.env-select{width:100%;padding:5px 8px;border-radius:4px;border:none;background:var(--smv-panel-surface-hover);color:var(--smv-panel-text);font-size:11.5px;outline:none;box-sizing:border-box;text-transform:capitalize}.env-color-swatch{position:relative;width:100%;height:22px;border-radius:4px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.env-color-swatch__hex{font-size:10.5px;font-weight:700;color:#0f172a;text-shadow:0 1px 1px rgba(255,255,255,.35);pointer-events:none;text-transform:uppercase}.env-color-swatch__input{position:absolute;inset:0;width:100%;height:100%;border:none;padding:0;opacity:0;cursor:pointer}.env-slider{flex:1;accent-color:var(--smv-panel-accent);cursor:pointer;min-width:0}.env-slider__value{flex-shrink:0;min-width:32px;padding:2px 5px;border-radius:4px;background:var(--smv-panel-surface-hover);color:var(--smv-panel-accent);font-size:10.5px;font-weight:600;text-align:center}.side-panel__open-btn{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:7px;border:1px solid var(--smv-panel-border-strong);background:var(--smv-panel-bg-strong);cursor:pointer;font-size:13px;font-weight:500;color:var(--smv-panel-text);z-index:190;transition:background .15s}.side-panel__open-btn:hover{background:var(--smv-panel-bg-strong-hover)}.side-panel{position:absolute;top:0;right:0;width:300px;height:100%;background:var(--smv-panel-bg);display:flex;flex-direction:column;font-family:var(--smv-panel-font-family);transform:translate(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);z-index:200;border-left:1px solid var(--smv-panel-border);box-shadow:var(--smv-panel-shadow-right)}.side-panel--open{transform:translate(0)}.side-panel--closed{transform:translate(100%)}.side-panel__header{padding:24px 20px 16px;border-bottom:1px solid var(--smv-panel-border-strong)}.side-panel__header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.side-panel__eyebrow{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--smv-panel-text-subtle);text-transform:uppercase}.side-panel__title{font-size:22px;font-weight:700;color:var(--smv-panel-text);margin:0;line-height:1.2}.side-panel__close-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--smv-panel-border-strong);background:var(--smv-panel-surface);cursor:pointer;color:var(--smv-panel-text-muted);transition:background .15s,color .15s;flex-shrink:0}.side-panel__close-btn:hover{background:var(--smv-panel-surface-hover);color:var(--smv-panel-text)}.side-panel__search-wrap{padding:14px 16px;border-bottom:1px solid var(--smv-panel-border-strong)}.side-panel__search{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--smv-panel-border-strong);background:var(--smv-panel-surface);color:var(--smv-panel-text);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,background .15s}.side-panel__search::placeholder{color:var(--smv-panel-text-subtle)}.side-panel__search:focus{border-color:var(--smv-panel-border-active);background:var(--smv-panel-surface-hover)}.side-panel__list{display:flex;flex-direction:column;padding:10px 0;overflow-y:auto;flex:1}.side-panel__list::-webkit-scrollbar{width:4px}.side-panel__list::-webkit-scrollbar-track{background:transparent}.side-panel__list::-webkit-scrollbar-thumb{background:var(--smv-panel-surface-hover);border-radius:4px}.side-panel__row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--smv-panel-surface-soft)}.side-panel__row:hover,.side-panel__row--hovered{background:var(--smv-panel-surface)}.side-panel__label{font-size:14px;font-weight:600;color:var(--smv-panel-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.side-panel__labelButton{min-width:0;padding:0;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer}.side-panel__labelButton:focus-visible{outline:2px solid var(--smv-panel-text);outline-offset:2px;border-radius:4px}.side-panel__label--hovered{color:var(--smv-panel-text-emphasis)}.side-panel__vis-btn{display:flex;align-items:center;flex-shrink:0;cursor:pointer;background:none;border:none;padding:0;margin-left:10px}.side-panel__checkbox{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--smv-panel-border-active);background:transparent;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.side-panel__checkbox--checked{background:var(--smv-panel-accent);border-color:var(--smv-panel-accent)}@media(max-width:900px){.smv-upload-toolbar{top:56px;gap:8px;max-width:calc(100% - 24px);padding:8px 10px}.smv-upload-toolbar__name{max-width:140px}.right-panel-wrapper--open,.left-panel-wrapper--open{width:0}.side-panel,.side-panel.side-panel--left{width:min(300px,85vw)}}.smv-largeModelBanner{position:absolute;bottom:12px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:8px;background:#1e1400e0;border:1px solid rgba(251,191,36,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fbbf24;font-size:12px;font-weight:500;line-height:1.4;pointer-events:auto;max-width:calc(100% - 32px);text-align:center}.smv-largeModelBanner__icon{flex-shrink:0}.smv-largeModelBanner__dismiss{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:4px;padding:2px;background:none;border:none;border-radius:4px;color:#fbbf24b3;cursor:pointer;transition:color .15s ease,background .15s ease}.smv-largeModelBanner__dismiss:hover{color:#fbbf24;background:#fbbf241f}.smv-root[data-reduced-motion] *,.smv-root[data-reduced-motion] *:before,.smv-root[data-reduced-motion] *:after{transition-duration:0s!important;transition-delay:0s!important}

package/dist/simple-model-viewer.d.mts

@@ -1,10 +1,31 @@
 import * as react from 'react';
-import { M as ModelFormat, a as ViewerModelInfo } from './modelInfo-DnkmTGMd.mjs';
-export { V as ViewerModelBounds } from './modelInfo-DnkmTGMd.mjs';
+import { c as ModelViewerLabels, R as ReducedMotionSetting } from './materialVariants-DjTuiWmN.mjs';
+export { D as DEFAULT_MODEL_VIEWER_LABELS, M as MaterialVariantGroup, a as MaterialVariantOption, b as ModelViewerLabelKey } from './materialVariants-DjTuiWmN.mjs';
+import { V as ViewerLoading, c as ViewerReveal, M as ModelFormat, b as ViewerModelInfo } from './modelInfo-CcYpydB7.mjs';
+export { a as ViewerModelBounds } from './modelInfo-CcYpydB7.mjs';
 import { PresetsType } from '@react-three/drei/helpers/environment-assets';
 
 type SimpleModelViewerProps = {
+    /** Plain-text overrides for built-in viewer text. */
+    labels?: ModelViewerLabels;
     modelUrl: string;
+    /**
+     * An image shown in the viewer's place until its 3D view is drawn: a render
+     * or photo of the model, best framed as the viewer frames it.
+     */
+    poster?: string;
+    /**
+     * `"lazy"` (default) starts the 3D view when the viewer is on or near the
+     * screen. When the page needs room for viewers in view, one scrolled away
+     * from goes back to a picture of itself, and comes back as it was. `"eager"`
+     * starts at once and keeps its view.
+     */
+    loading?: ViewerLoading;
+    /**
+     * `"interaction"` keeps the poster, with a "View in 3D" button, until the
+     * visitor asks for the 3D view. Default `"auto"`.
+     */
+    reveal?: ViewerReveal;
     /** Explicit format for extensionless or signed model URLs. */
     modelFormat?: ModelFormat;
     /** Directory containing the DRACO decoder files, or false. */
@@ -21,6 +42,13 @@ type SimpleModelViewerProps = {
     highlightOnHover?: boolean;
     showLoadingOverlay?: boolean;
     refitOnResize?: boolean;
+    /**
+     * Cuts motion the viewer starts on its own: auto-rotate doesn't start, and
+     * camera moves jump instead of gliding. `"user"` (default) follows the
+     * visitor's `prefers-reduced-motion` setting; `"always"` and `"never"`
+     * override it.
+     */
+    reducedMotion?: ReducedMotionSetting;
     backgroundEnabled?: boolean;
     autoRotate?: boolean;
     envPreset?: PresetsType;
@@ -33,6 +61,6 @@ type SimpleModelViewerProps = {
     onModelLoaded?: (model: ViewerModelInfo) => void;
     onLoadError?: (error: unknown) => void;
 };
-declare function SimpleModelViewer({ modelUrl, modelFormat, dracoDecoderPath, ktx2TranscoderPath, meshopt, backgroundColor, showSceneObjectsPanel, showSceneSettingsPanel, enableModelUpload, zoomOnSelected, highlightOnHover, showLoadingOverlay, refitOnResize, backgroundEnabled, autoRotate, envPreset, exposure, ambientIntensity, ambientColor, directionalIntensity, directionalColor, onModelLoaded, onLoadError, }: SimpleModelViewerProps): react.JSX.Element;
+declare function SimpleModelViewer(props: SimpleModelViewerProps): react.JSX.Element;
 
-export { ModelFormat, SimpleModelViewer, type SimpleModelViewerProps, ViewerModelInfo };
+export { ModelFormat, ModelViewerLabels, ReducedMotionSetting, SimpleModelViewer, type SimpleModelViewerProps, ViewerLoading, ViewerModelInfo, ViewerReveal };

package/dist/simple-model-viewer.d.ts

@@ -1,10 +1,31 @@
 import * as react from 'react';
-import { M as ModelFormat, a as ViewerModelInfo } from './modelInfo-DnkmTGMd.js';
-export { V as ViewerModelBounds } from './modelInfo-DnkmTGMd.js';
+import { c as ModelViewerLabels, R as ReducedMotionSetting } from './materialVariants-DjTuiWmN.js';
+export { D as DEFAULT_MODEL_VIEWER_LABELS, M as MaterialVariantGroup, a as MaterialVariantOption, b as ModelViewerLabelKey } from './materialVariants-DjTuiWmN.js';
+import { V as ViewerLoading, c as ViewerReveal, M as ModelFormat, b as ViewerModelInfo } from './modelInfo-BQ5UZu95.js';
+export { a as ViewerModelBounds } from './modelInfo-BQ5UZu95.js';
 import { PresetsType } from '@react-three/drei/helpers/environment-assets';
 
 type SimpleModelViewerProps = {
+    /** Plain-text overrides for built-in viewer text. */
+    labels?: ModelViewerLabels;
     modelUrl: string;
+    /**
+     * An image shown in the viewer's place until its 3D view is drawn: a render
+     * or photo of the model, best framed as the viewer frames it.
+     */
+    poster?: string;
+    /**
+     * `"lazy"` (default) starts the 3D view when the viewer is on or near the
+     * screen. When the page needs room for viewers in view, one scrolled away
+     * from goes back to a picture of itself, and comes back as it was. `"eager"`
+     * starts at once and keeps its view.
+     */
+    loading?: ViewerLoading;
+    /**
+     * `"interaction"` keeps the poster, with a "View in 3D" button, until the
+     * visitor asks for the 3D view. Default `"auto"`.
+     */
+    reveal?: ViewerReveal;
     /** Explicit format for extensionless or signed model URLs. */
     modelFormat?: ModelFormat;
     /** Directory containing the DRACO decoder files, or false. */
@@ -21,6 +42,13 @@ type SimpleModelViewerProps = {
     highlightOnHover?: boolean;
     showLoadingOverlay?: boolean;
     refitOnResize?: boolean;
+    /**
+     * Cuts motion the viewer starts on its own: auto-rotate doesn't start, and
+     * camera moves jump instead of gliding. `"user"` (default) follows the
+     * visitor's `prefers-reduced-motion` setting; `"always"` and `"never"`
+     * override it.
+     */
+    reducedMotion?: ReducedMotionSetting;
     backgroundEnabled?: boolean;
     autoRotate?: boolean;
     envPreset?: PresetsType;
@@ -33,6 +61,6 @@ type SimpleModelViewerProps = {
     onModelLoaded?: (model: ViewerModelInfo) => void;
     onLoadError?: (error: unknown) => void;
 };
-declare function SimpleModelViewer({ modelUrl, modelFormat, dracoDecoderPath, ktx2TranscoderPath, meshopt, backgroundColor, showSceneObjectsPanel, showSceneSettingsPanel, enableModelUpload, zoomOnSelected, highlightOnHover, showLoadingOverlay, refitOnResize, backgroundEnabled, autoRotate, envPreset, exposure, ambientIntensity, ambientColor, directionalIntensity, directionalColor, onModelLoaded, onLoadError, }: SimpleModelViewerProps): react.JSX.Element;
+declare function SimpleModelViewer(props: SimpleModelViewerProps): react.JSX.Element;
 
-export { ModelFormat, SimpleModelViewer, type SimpleModelViewerProps, ViewerModelInfo };
+export { ModelFormat, ModelViewerLabels, ReducedMotionSetting, SimpleModelViewer, type SimpleModelViewerProps, ViewerLoading, ViewerModelInfo, ViewerReveal };