@liveroom-tech/react-immersive 5.0.2 → 5.2.0

package/dist/{objectCatalog-5W8n5xNQ.d.mts → rendererBackend-QwMzISTn.d.ts}

@@ -104,6 +104,12 @@ type SceneModelConfig = {
     shading: "lit" | "unlit" | "normals";
     autoRotate?: boolean;
     autoRotateSpeed?: number;
+    /**
+     * 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.
+     */
+    activeVariants?: string[];
 };
 type SceneCameraConfig = {
     fieldOfView: number;
@@ -149,7 +155,7 @@ type SceneGroundShadowConfig = {
     height: number;
     size: number;
 };
-declare const ANIMATION_LOOP_MODES: readonly ["repeat", "once"];
+declare const ANIMATION_LOOP_MODES: readonly ["repeat", "once", "ping-pong"];
 type AnimationLoopMode = (typeof ANIMATION_LOOP_MODES)[number];
 type SceneAnimationClipConfig = {
     sourceName: string;
@@ -355,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];
@@ -364,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];
@@ -384,6 +414,73 @@ type SceneCinematicConfig = {
     loop: boolean;
     autoPlay: boolean;
 };
+declare const SECTION_AXES: readonly ["x", "y", "z"];
+type SceneSectionAxis = (typeof SECTION_AXES)[number];
+type SceneSectionConfig = {
+    enabled: boolean;
+    /** The world axis the cut runs across; `"y"` gives a floor-plan cut. */
+    axis: SceneSectionAxis;
+    /**
+     * Where the cut is along the axis, as a share of the model's size: 0 at
+     * its minimum, 1 at its maximum.
+     */
+    position: number;
+    /**
+     * Keep the part above the cut (the higher side along the axis) instead of
+     * the part below it.
+     */
+    flip: boolean;
+};
+declare const DEFAULT_SECTION_CONFIG: SceneSectionConfig;
+/**
+ * What an object's data must look like for a rule to apply to it. A list
+ * applies when every condition in it matches.
+ */
+type SceneStyleCondition = {
+    /** A key of `binding.metrics`. */
+    metric: string;
+    /** Applies when the value is greater than this. */
+    above?: number;
+    /** Applies when the value is less than this. */
+    below?: number;
+} | {
+    status: ObjectBindingStatus | ObjectBindingStatus[];
+} | {
+    /** A key of `binding.metadata`; dots reach into nested objects. */
+    metadata: string;
+    equals: string | number | boolean | null;
+};
+type SceneStyleColorScale = {
+    /** A key of `binding.metrics`. */
+    metric: string;
+    /**
+     * `[value, "#rrggbb"]` pairs. Values between two stops blend their colours;
+     * values outside the stops take the nearest one.
+     */
+    stops: [number, string][];
+    /** The material colour it sets. Default `"baseColor"`. */
+    channel?: "baseColor" | "emissive";
+};
+type SceneStylePulse = {
+    /** The glow colour at the pulse's peak. Default `"#ff3b30"`. */
+    color?: string;
+    /** Pulses per second. Default `1`. */
+    speed?: number;
+};
+type SceneStyleRule = {
+    id: string;
+    label?: string;
+    /** The objects the rule considers; every bound object when left out. */
+    target?: ObjectBindingTarget;
+    /** When the rule applies; always, when left out. */
+    when?: SceneStyleCondition | SceneStyleCondition[];
+    /** Material overrides, over the object's own `style.material`. */
+    material?: ObjectBindingMaterial;
+    /** A colour taken from a metric's value. */
+    colorScale?: SceneStyleColorScale;
+    /** A glow that fades in and out, to draw attention. */
+    pulse?: boolean | SceneStylePulse;
+};
 type SceneConfig = {
     model: SceneModelConfig;
     camera: SceneCameraConfig;
@@ -397,6 +494,13 @@ type SceneConfig = {
     animations: SceneAnimationConfig;
     annotations: SceneAnnotationMarker[];
     cinematic?: SceneCinematicConfig;
+    /**
+     * Data-driven looks for bound objects, applied in order, so a later rule
+     * wins over an earlier one where both set something.
+     */
+    styleRules?: SceneStyleRule[];
+    /** A cut-away view across the model. Off when left out. */
+    section?: SceneSectionConfig;
 };
 declare const DEFAULT_SCENE_CONFIG: SceneConfig;
 
@@ -407,6 +511,146 @@ type SceneConfigPatch = DeepPartial<SceneConfig>;
  */
 declare function patchSceneConfig(sceneConfig: SceneConfig, patch: SceneConfigPatch): SceneConfig;
 
+type AnimationClipInfo = {
+    sourceName: string;
+    duration: number;
+};
+/** How `play` starts a clip. */
+type AnimationPlayOptions = {
+    /**
+     * Keep the clips already playing, instead of stopping them, so several
+     * clips run at once (a left and a right door, say). Default `false`.
+     */
+    alongside?: boolean;
+    /**
+     * Seconds to fade the clip in, and to fade out the clips it replaces, for a
+     * smooth blend between them. Default `0`.
+     */
+    fade?: number;
+    /**
+     * Play backwards, from wherever the clip is, or from its end. Plays a
+     * "door opens" clip as the door closing. Default `false`.
+     */
+    reverse?: boolean;
+};
+/**
+ * `"finished"`: a play-once clip that reached its end and holds its last pose
+ * until it's stopped or played again.
+ */
+type AnimationClipStatus = "playing" | "paused" | "finished";
+/** One clip that is playing, paused, or holding its finished pose. */
+type AnimationClipState = {
+    clip: string;
+    status: AnimationClipStatus;
+    /** Position in the clip, in seconds. */
+    time: number;
+    /** Length of the clip, in seconds. */
+    duration: number;
+    speed: number;
+    reverse: boolean;
+};
+type AnimationPlaybackState = {
+    /** The clip played most recently, while it's active. */
+    currentClip: string | null;
+    /** Whether any clip is playing. */
+    isPlaying: boolean;
+    speed: number;
+    time: number;
+    duration: number;
+    /** Every active clip, most recently played last. */
+    active: AnimationClipState[];
+};
+/**
+ * Leave out `clip` to act on every active clip; pass one to act on that clip
+ * alone.
+ */
+type AnimationControls = {
+    clips: string[];
+    clipDetails?: AnimationClipInfo[];
+    play: (clipName: string, options?: AnimationPlayOptions) => void;
+    pause: (clipName?: string) => void;
+    /** Stops and resets the pose. */
+    stop: (clipName?: string) => void;
+    /** Without a clip, also the speed of clips played later without their own. */
+    setSpeed: (speed: number, clipName?: string) => void;
+    seek?: (time: number, clipName?: string) => void;
+    getState?: () => AnimationPlaybackState;
+    subscribe?: (listener: (state: AnimationPlaybackState) => void) => () => void;
+};
+type ViewerAnimationsProps = {
+    clips: string[];
+    clipDetails: AnimationClipInfo[];
+    currentClip: string | null;
+    isPlaying: boolean;
+    speed: number;
+    time: number;
+    duration: number;
+    /** Every active clip, most recently played last. */
+    active: AnimationClipState[];
+    play: (clipName: string, options?: AnimationPlayOptions) => void;
+    pause: (clipName?: string) => void;
+    stop: (clipName?: string) => void;
+    setSpeed: (speed: number, clipName?: string) => void;
+    seek: (time: number, clipName?: string) => void;
+    handleAnimationsReady: (controls: AnimationControls) => void;
+};
+declare function useViewerAnimations(): ViewerAnimationsProps;
+
+/** A glow cycling on one object, from its style rules. */
+type StyledObjectPulse = {
+    color: string;
+    /** Pulses per second. */
+    speed: number;
+};
+type StyledObjectBindings = {
+    /**
+     * The bindings as the rules style them. A binding no rule changed is the
+     * same object as the one passed in.
+     */
+    bindings: Record<string, ObjectBinding>;
+    /** Pulsing objects, by binding key. */
+    pulses: Record<string, StyledObjectPulse>;
+    /** The binding a styled one came from (itself when no rule changed it). */
+    sourceOf: (binding: ObjectBinding) => ObjectBinding;
+};
+/**
+ * The colour a colour scale gives a value: a blend of the two stops around it,
+ * or the nearest stop outside them. Null when there's no usable stop.
+ */
+declare function colorScaleValue(stops: SceneStyleColorScale["stops"], value: number): string | null;
+/**
+ * Styles bindings with scene style rules, for rendering. Rules apply in order
+ * over each object's own `style.material`, so a later rule wins where two set
+ * the same thing. The bindings passed in are never changed.
+ */
+declare function applyStyleRules(bindings: Record<string, ObjectBinding>, rules: readonly SceneStyleRule[] | undefined): StyledObjectBindings;
+
+/**
+ * Objects to focus on. Everything else is ghosted (drawn faintly) or hidden
+ * until the isolation is cleared, without changing any binding.
+ */
+type ViewerIsolation = {
+    /** The objects that stay: an id, a list of ids, `{ group }`, `{ tag }`, or `{ type }`. */
+    target: ObjectBindingTarget;
+    /** What happens to everything else. Default `"ghost"`. */
+    mode?: "ghost" | "hide";
+    /** How visible ghosted objects are, 0–1. Default `0.12`. */
+    ghostOpacity?: number;
+};
+type IsolatedObjectBindings = StyledObjectBindings & {
+    /** Binding keys that are ghosted or hidden. Pointer picking ignores them. */
+    setAside: Set<string>;
+};
+/** The binding keys an isolation keeps; empty when it keeps nothing. */
+declare function isolatedBindingKeys(bindings: Record<string, ObjectBinding>, isolation: ViewerIsolation | null | undefined): Set<string>;
+/**
+ * Ghosts or hides every object an isolation doesn't keep, for rendering. The
+ * bindings passed in are never changed. An isolation that keeps nothing (a
+ * target matching no object) changes nothing either, rather than fading out
+ * the whole model.
+ */
+declare function applyIsolation(styled: StyledObjectBindings, isolation: ViewerIsolation | null | undefined): IsolatedObjectBindings;
+
 type ObjectBindingsActionEffect = {
     target: ObjectBindingTarget;
     objectBindings: ObjectBindingPatch;
@@ -437,24 +681,36 @@ type CameraAction = {
 type CameraActionEffect = {
     camera: CameraAction;
 };
-type AnimationAction = {
+/**
+ * `play` replaces the clips already playing unless `alongside` is set. The
+ * others act on `clip`, or on every active clip when it's left out.
+ */
+type AnimationAction = ({
     type: "play";
     clip: string;
-} | {
+} & AnimationPlayOptions) | {
     type: "pause";
+    clip?: string;
 } | {
     type: "stop";
+    clip?: string;
 } | {
     type: "set-speed";
     speed: number;
+    clip?: string;
 } | {
     type: "seek";
     time: number;
+    clip?: string;
 };
 type AnimationActionEffect = {
     animation: AnimationAction;
 };
-type ObjectActionEffect = ObjectBindingsActionEffect | SceneConfigActionEffect | VisibilityActionEffect | CameraActionEffect | AnimationActionEffect;
+/** Isolates objects, or with `null` shows everything again. */
+type IsolationActionEffect = {
+    isolation: ViewerIsolation | null;
+};
+type ObjectActionEffect = IsolationActionEffect | ObjectBindingsActionEffect | SceneConfigActionEffect | VisibilityActionEffect | CameraActionEffect | AnimationActionEffect;
 
 type ObjectBindingAction = {
     id: "change-color" | "apply-texture" | "toggle-visibility" | string;
@@ -549,6 +805,33 @@ type ObjectBindingCameraState = {
     fov?: number;
     zoom?: number;
 };
+/**
+ * An image or a line of text printed onto the object's surface: a logo, a
+ * label, a personalisation.
+ */
+type ObjectBindingDecal = {
+    id: string;
+    /** The image to show: a URL or public path. */
+    image?: string;
+    /** Text to show, when there's no image. */
+    text?: string;
+    /** Text colour. Default `"#ffffff"`. */
+    color?: string;
+    /** CSS font family for the text. Default `"sans-serif"`. */
+    fontFamily?: string;
+    /** Default `"bold"`. */
+    fontWeight?: "normal" | "bold";
+    /** Where it sits on the object, in the object's own (local) space. */
+    position: [number, number, number];
+    /** The way the surface faces there, in the object's own space. */
+    normal: [number, number, number];
+    /** Width, in model units; the height follows the image or text's shape. */
+    size: number;
+    /** A turn around the surface normal, in radians. Default `0`. */
+    rotation?: number;
+    /** 0–1. Default `1`. */
+    opacity?: number;
+};
 type ObjectBindingStyle = {
     material?: ObjectBindingMaterial;
 };
@@ -566,6 +849,8 @@ type ObjectBinding = {
     hoverable?: boolean;
     transform?: ObjectBindingTransform;
     style?: ObjectBindingStyle;
+    /** Images and text printed on the object's surface. */
+    decals?: ObjectBindingDecal[];
     actions?: ObjectBindingAction[];
     metrics?: Record<string, number>;
     metadata?: Record<string, unknown>;
@@ -578,6 +863,12 @@ type ObjectActionEvent = {
     screenX?: number;
     screenY?: number;
 };
+/** A point on an object's surface, in the object's own (local) space. */
+type ObjectSurfacePoint = {
+    position: [number, number, number];
+    /** The way the surface faces at that point. */
+    normal: [number, number, number];
+};
 /** A double-click, right-click, or long-press on a model object. */
 type ObjectPointerEvent = {
     binding: ObjectBinding;
@@ -586,6 +877,11 @@ type ObjectPointerEvent = {
     clientY: number;
     /** `"mouse"`, `"pen"`, or `"touch"`. */
     pointerType: string;
+    /**
+     * Where on the object the pointer was, e.g. to place a decal there. Not
+     * reported for streamed (3D Tiles) models.
+     */
+    surface?: ObjectSurfacePoint;
 };
 
 /** One bindable object in a model, as reported by `onObjectCatalog`. */
@@ -601,4 +897,7 @@ type ViewerObjectInfo = {
     maximum: [number, number, number];
 };
 
-export { type SceneWireframeConfig as $, type AnimationAction as A, type BindingEdit as B, type CameraAction as C, DEFAULT_SCENE_CONFIG as D, type EnvironmentPreset as E, type SceneCameraConfig as F, type GlitchModeName as G, type SceneCinematicConfig as H, type SceneCinematicWaypoint as I, type SceneConfig as J, type KernelSizeName as K, type SceneConfigActionEffect as L, MATERIAL_BLENDING_MODES as M, type SceneConfigPatch as N, type ObjectActionEffect as O, type SceneEnvironmentConfig as P, type SceneGroundShadowConfig as Q, type RampTypeName as R, type SceneAnimationClipConfig as S, type SceneLight as T, type SceneLightAttachment as U, type SceneLightType as V, type SceneLightingConfig as W, type SceneModelConfig as X, type SceneModelRenderer as Y, type ScenePostProcessingConfig as Z, type SceneShadowConfig as _, type AnimationActionEffect as a, type ViewerCameraConfig as a0, type ViewerCameraState as a1, type ViewerObjectInfo as a2, type VisibilityActionEffect as a3, material as a4, patchBindings as a5, patchSceneConfig as a6, selectBindingKeys as a7, selectBindings as a8, type AnimationLoopMode as b, type CameraActionEffect as c, type DeepPartial as d, MATERIAL_SIDES as e, type ObjectActionEvent as f, type ObjectBinding as g, type ObjectBindingAction as h, type ObjectBindingCameraState as i, type ObjectBindingMaterial as j, type ObjectBindingMaterialBlendingMode as k, type ObjectBindingMaterialSide as l, type ObjectBindingPatch as m, type ObjectBindingSelector as n, type ObjectBindingStatus as o, type ObjectBindingStyle as p, type ObjectBindingTarget as q, type ObjectBindingTextureChannel as r, type ObjectBindingTextureSlot as s, type ObjectBindingTransform as t, type ObjectBindingType as u, type ObjectBindingsActionEffect as v, type ObjectPointerEvent as w, type SceneAnimationConfig as x, type SceneAnnotationMarker as y, type SceneBackgroundConfig 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-CEmmvVCH.mjs';
-export { V as ViewerModelBounds } from './modelInfo-CEmmvVCH.mjs';
+import { c as ModelViewerLabels, R as ReducedMotionSetting } from './materialVariants-DnZe9eMC.mjs';
+export { D as DEFAULT_MODEL_VIEWER_LABELS, M as MaterialVariantGroup, a as MaterialVariantOption, b as ModelViewerLabelKey } from './materialVariants-DnZe9eMC.mjs';
+import { V as ViewerLoading, c as ViewerReveal, M as ModelFormat, b as ViewerModelInfo } from './modelInfo-BYebMPdZ.mjs';
+export { a as ViewerModelBounds } from './modelInfo-BYebMPdZ.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-CEmmvVCH.js';
-export { V as ViewerModelBounds } from './modelInfo-CEmmvVCH.js';
+import { c as ModelViewerLabels, R as ReducedMotionSetting } from './materialVariants-DnZe9eMC.js';
+export { D as DEFAULT_MODEL_VIEWER_LABELS, M as MaterialVariantGroup, a as MaterialVariantOption, b as ModelViewerLabelKey } from './materialVariants-DnZe9eMC.js';
+import { V as ViewerLoading, c as ViewerReveal, M as ModelFormat, b as ViewerModelInfo } from './modelInfo-XfUQO7C_.js';
+export { a as ViewerModelBounds } from './modelInfo-XfUQO7C_.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 };