@preference-sl/pref-viewer 2.13.0-beta.2 → 2.13.0-beta.21

package/src/pref-viewer-3d.js

@@ -1,7 +1,7 @@
 import { CameraData, ContainerData, MaterialData, IBLData } from "./pref-viewer-3d-data.js";
 import BabylonJSController from "./babylonjs-controller.js";
 import { PrefViewer3DStyles } from "./styles.js";
-import { FileStorage } from "./file-storage.js";
+import FileStorage from "./file-storage.js";
 
 /**
  * PrefViewer3D - Custom Web Component for interactive 3D visualization and configuration.
@@ -75,6 +75,7 @@ export default class PrefViewer3D extends HTMLElement {
     #isInitialized = false;
     #isLoaded = false;
     #isVisible = false;
+    #lastLoadTimestamp = undefined;
 
     #wrapper = null;
     #canvas = null;
@@ -162,7 +163,7 @@ export default class PrefViewer3D extends HTMLElement {
      */
     disconnectedCallback() {
         if (this.#babylonJSController) {
-            this.#babylonJSController.disable();
+            void this.#babylonJSController.disable();
         }
     }
 
@@ -230,6 +231,27 @@ export default class PrefViewer3D extends HTMLElement {
         this.#babylonJSController.enable();
     }
 
+    /**
+     * Determines whether the next 3D load should bypass cache checks.
+     * @private
+     * @param {object} config - Incoming config payload.
+     * @returns {boolean} True when force reload should be enabled.
+     */
+    #shouldForceReload(config) {
+        if (!config || typeof config !== "object") {
+            return false;
+        }
+        if (config.forceReload === true) {
+            return true;
+        }
+        if (config.timestamp === undefined || config.timestamp === null) {
+            return false;
+        }
+        const changed = config.timestamp !== this.#lastLoadTimestamp;
+        this.#lastLoadTimestamp = config.timestamp;
+        return changed;
+    }
+
     /**
      * Resets update flags for all containers and material/camera options after loading or setting options.
      * @private
@@ -239,7 +261,6 @@ export default class PrefViewer3D extends HTMLElement {
         Object.values(this.#data.containers).forEach((container) => container.reset());
         Object.values(this.#data.options.materials).forEach((material) => material.reset());
         this.#data.options.camera.reset();
-        this.#data.options.ibl.reset();
     }
 
     /**
@@ -324,6 +345,10 @@ export default class PrefViewer3D extends HTMLElement {
     /**
      * Resolves incoming IBL settings (HDR URL, timestamp, intensity, shadows) and marks the option as pending when changed.
      * Fetches signed URLs/time stamps when storage keys are provided so the Babylon controller can reload the environment map.
+     * If `options.ibl` exists but `options.ibl.url` is undefined (missing), the current IBL URL is kept and not marked as pending.
+     * This allows updating other IBL properties (such as intensity or shadows) without requiring a new URL.
+     * If `options.ibl.url` is explicitly provided as `null` (or resolves to an unavailable URL), it is treated as a request to
+     * clear the current IBL environment, and the IBL state is reset so Babylon can remove the environment map.
      * @private
      * @param {object} options - Options payload that may contain an `ibl` block with url, intensity, or shadow flags.
      * @returns {Promise<boolean>} Resolves to true when any IBL property differs from the cached state, otherwise false.
@@ -335,18 +360,25 @@ export default class PrefViewer3D extends HTMLElement {
         const iblState = this.#data.options.ibl;
 
         let url = undefined;
+        let cachedUrl = undefined;
         let timeStamp = undefined;
         let shadows = undefined;
         let intensity = undefined;
 
-        if (options.ibl.url) {
-            url = options.ibl.url;
+        if (typeof options.ibl.url === "string" && options.ibl.url.length > 0) {
             const fileStorage = new FileStorage("PrefViewer", "Files");
             const newURL = await fileStorage.getURL(options.ibl.url);
             if (newURL) {
-                url = newURL;
+                url = options.ibl.url;
+                cachedUrl = newURL;
                 timeStamp = await fileStorage.getTimeStamp(options.ibl.url);
+            } else {
+                url = null;
+                cachedUrl = null;
             }
+        } else if (options.ibl.url === null) {
+            url = null;
+            cachedUrl = null;
         }
         if (options.ibl.shadows !== undefined) {
             shadows = options.ibl.shadows;
@@ -358,10 +390,15 @@ export default class PrefViewer3D extends HTMLElement {
         const needUpdate = url !== undefined && url !== iblState.url ||
             timeStamp !== undefined && timeStamp !== iblState.timeStamp ||
             shadows !== undefined && shadows !== iblState.shadows ||
-            intensity !== undefined && intensity !== iblState.intensity;
+            shadows === undefined && iblState.shadows !== iblState.defaultShadows ||
+            intensity !== undefined && intensity !== iblState.intensity ||
+            intensity === undefined && iblState.intensity !== iblState.defaultIntensity;
         if (needUpdate) {
-            iblState.setValues(url, intensity, shadows, timeStamp);
-            iblState.setPending(true);
+            if (url === null || cachedUrl === null) {
+                iblState.reset();
+            } else {
+                iblState.setValues(url, cachedUrl, intensity, shadows, timeStamp);
+            }
         }
         
         return needUpdate;
@@ -543,6 +580,7 @@ export default class PrefViewer3D extends HTMLElement {
         }
 
         this.#onLoading();
+        const forceReload = this.#shouldForceReload(config);
 
         // Containers
         this.#checkNeedToUpdateContainers(config);
@@ -551,10 +589,10 @@ export default class PrefViewer3D extends HTMLElement {
         if (config.options) {
             this.#checkNeedToUpdateCamera(config.options);
             this.#checkNeedToUpdateMaterials(config.options);
-            this.#checkNeedToUpdateIBL(config.options);
+            await this.#checkNeedToUpdateIBL(config.options);
         }
 
-        const loadDetail = await this.#babylonJSController.load();
+        const loadDetail = await this.#babylonJSController.load(forceReload);
 
         return { ...loadDetail, load: this.#onLoaded() };
     }
@@ -564,9 +602,9 @@ export default class PrefViewer3D extends HTMLElement {
      * Updates internal states, triggers option setting events, and returns the result.
      * @public
      * @param {object} options - Options object containing camera and material settings.
-     * @returns {object} Object containing success status and details of set options.
+     * @returns {Promise<object>} Object containing success status and details of set options.
      */
-    setOptions(options) {
+    async setOptions(options) {
         if (!this.#babylonJSController) {
             return;
         }
@@ -580,8 +618,9 @@ export default class PrefViewer3D extends HTMLElement {
         if (this.#checkNeedToUpdateMaterials(options)) {
             someSetted = someSetted || this.#babylonJSController.setMaterialOptions();
         }
-        if (this.#checkNeedToUpdateIBL(options)) {
-            someSetted = someSetted || this.#babylonJSController.setIBLOptions();
+        const needUpdateIBL = await this.#checkNeedToUpdateIBL(options);
+        if (needUpdateIBL) {
+            someSetted = someSetted || (await this.#babylonJSController.setIBLOptions());
         }
         const detail = this.#onSetOptions();
         return { success: someSetted, detail: detail };
@@ -755,6 +794,23 @@ export default class PrefViewer3D extends HTMLElement {
         return this.#babylonJSController.getRenderSettings();
     }
 
+    /**
+     * Reports whether an IBL environment map is currently available.
+     * @public
+     * @returns {boolean} True when a validated IBL texture exists or a pending cached URL is available.
+     */
+    isIBLAvailable() {
+        const ibl = this.#data?.options?.ibl;
+        if (!ibl) {
+            return false;
+        }
+        if (ibl.valid === true) {
+            return true;
+        }
+        const cachedUrl = ibl.cachedUrl;
+        return typeof cachedUrl === "string" ? cachedUrl.length > 0 : Boolean(cachedUrl);
+    }
+
     /**
      * Applies render settings that require reloading the Babylon.js scene.
      * @public

package/src/pref-viewer-menu-3d.js

@@ -9,7 +9,8 @@ import { DEFAULT_LOCALE, resolveLocale, translate } from "./localization/i18n.js
  *  - Builds an accessible hover/focus-activated panel with switches for AA, SSAO, IBL, and dynamic shadows.
  *  - Caches translated copy in `#texts` and listens for culture changes via the `culture` attribute or `setCulture()`.
  *  - Tracks applied vs. draft render settings so pending diffs, button enablement, and status text stay in sync.
- *  - Emits `pref-viewer-menu-apply` whenever the user confirms toggles, allowing PrefViewer/BabylonJSController to persist.
+ *  - Supports per-switch availability (enabled/disabled), preventing interaction and pending diffs for unavailable toggles.
+ *  - Emits `pref-viewer-menu-3d-apply` whenever the user confirms toggles, allowing PrefViewer/BabylonJSController to persist.
  *  - Shows transient status/error messages and per-switch pending states while operations complete.
  *
  * Public API:
@@ -17,6 +18,7 @@ import { DEFAULT_LOCALE, resolveLocale, translate } from "./localization/i18n.js
  *  - `setApplying(isApplying, hasError?)`: locks the UI and optionally displays errors while async updates run.
  *  - `setViewerHover(isHovering)`: opens/closes the panel based on viewer hover state.
  *  - `setEnabled(isEnabled)`: hides the menu in 2D mode and clears hover data.
+ *  - `setSwitchEnabled(settingKey, isEnabled)`: enables/disables a concrete toggle (e.g. IBL) based on runtime availability.
  *  - `setCulture(cultureId)`: forces a locale change and re-renders copy from the i18n layer.
  *
  * Lifecycle & Integration:
@@ -52,6 +54,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
     #MENU_SWITCHES = Object.keys(this.#DEFAULT_RENDER_SETTINGS);
     #appliedSettings = { ...this.#DEFAULT_RENDER_SETTINGS };
     #draftSettings = { ...this.#DEFAULT_RENDER_SETTINGS };
+    #switchAvailability = {};
     #statusTimeout = null;
     #isApplying = false;
     #isEnabled = true;
@@ -352,6 +355,9 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @returns {void}
      */
     #handleSwitchChange(event) {
+        if (event.currentTarget?.disabled) {
+            return;
+        }
         const key = event.currentTarget?.dataset?.setting;
         if (!key) {
             return;
@@ -369,8 +375,15 @@ export default class PrefViewerMenu3D extends HTMLElement {
         if (this.#isApplying || !this.#hasPendingChanges()) {
             return;
         }
+
         const detail = { settings: { ...this.#draftSettings } };
-        this.dispatchEvent(new CustomEvent("pref-viewer-menu-apply", { detail, bubbles: true, composed: true }));
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: detail,
+        };
+        this.dispatchEvent(new CustomEvent("pref-viewer-menu-3d-apply", customEventOptions));
     }
 
     /**
@@ -381,7 +394,10 @@ export default class PrefViewerMenu3D extends HTMLElement {
     #updateSwitches() {
         Object.entries(this.#elements.switches).forEach(([key, input]) => {
             if (input) {
+                const isEnabled = this.#switchAvailability[key] !== false;
                 input.checked = Boolean(this.#draftSettings[key]);
+                input.disabled = !isEnabled;
+                this.#elements.switchWrappers[key]?.toggleAttribute("data-disabled", !isEnabled);
             }
         });
     }
@@ -409,7 +425,12 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @returns {string[]} Keys currently pending application.
      */
     #getPendingKeys() {
-        return Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter((key) => this.#draftSettings[key] !== this.#appliedSettings[key]);
+        return Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter((key) => {
+            if (this.#elements.switches[key]?.disabled) {
+                return false;
+            }
+            return this.#draftSettings[key] !== this.#appliedSettings[key];
+        });
     }
 
     /**
@@ -554,4 +575,24 @@ export default class PrefViewerMenu3D extends HTMLElement {
             this.#closeMenu();
         }
     }
+
+    /**
+     * Enables or disables a specific render-setting switch in the menu.
+     * @public
+     * @param {string} settingKey - Switch key (e.g. "iblEnabled").
+     * @param {boolean} [isEnabled=true] - True to allow interaction, false to disable it.
+     * @returns {void}
+     */
+    setSwitchEnabled(settingKey, isEnabled = true) {
+        if (!settingKey || !this.#MENU_SWITCHES.includes(settingKey)) {
+            return;
+        }
+        const enabled = Boolean(isEnabled);
+        this.#switchAvailability[settingKey] = enabled;
+        if (!enabled) {
+            this.#draftSettings[settingKey] = this.#appliedSettings[settingKey];
+        }
+        this.#updateSwitches();
+        this.#updatePendingState();
+    }
 }

package/src/pref-viewer.js

@@ -81,6 +81,7 @@ export default class PrefViewer extends HTMLElement {
         onViewerHoverStart: null,
         onViewerHoverEnd: null,
         on3DSceneLoaded: null,
+        on3DSceneError: null,
     };
 
     /**
@@ -136,6 +137,9 @@ export default class PrefViewer extends HTMLElement {
                 this.loadMaterials(value);
                 break;
             case "mode":
+                if (typeof value !== "string") {
+                    return;
+                }
                 if (_old === value || value.toLowerCase() === this.#mode) {
                     return;
                 }
@@ -151,6 +155,9 @@ export default class PrefViewer extends HTMLElement {
                 this.setOptions(value);
                 break;
             case "show-model":
+                if (typeof value !== "string") {
+                    return;
+                }
                 if (_old === value) {
                     return;
                 }
@@ -158,6 +165,9 @@ export default class PrefViewer extends HTMLElement {
                 showModel ? this.showModel() : this.hideModel();
                 break;
             case "show-scene":
+                if (typeof value !== "string") {
+                    return;
+                }
                 if (_old === value) {
                     return;
                 }
@@ -213,10 +223,11 @@ export default class PrefViewer extends HTMLElement {
         }
         if (this.#component3D) {
             this.#component3D.removeEventListener("scene-loaded", this.#handlers.on3DSceneLoaded);
+            this.#component3D.removeEventListener("scene-error", this.#handlers.on3DSceneError);
             this.#component3D.remove();
         }
         if (this.#menu3D) {
-            this.#menu3D.removeEventListener("pref-viewer-menu-apply", this.#handlers.onMenuApply);
+            this.#menu3D.removeEventListener("pref-viewer-menu-3d-apply", this.#handlers.onMenuApply);
             this.#menu3D.remove();
             this.#menu3D = null;
         }
@@ -249,7 +260,11 @@ export default class PrefViewer extends HTMLElement {
             this.#menu3DSyncSettings();
             this.#menu3D?.setApplying(false);
         };
+        this.#handlers.on3DSceneError = () => {
+            this.#menu3D?.setApplying(false, true);
+        };
         this.#component3D.addEventListener("scene-loaded", this.#handlers.on3DSceneLoaded);
+        this.#component3D.addEventListener("scene-error", this.#handlers.on3DSceneError);
         this.#wrapper.appendChild(this.#component3D);
     }
 
@@ -264,7 +279,7 @@ export default class PrefViewer extends HTMLElement {
             return;
         }
         if (this.#menu3D) {
-            this.#menu3D.removeEventListener("pref-viewer-menu-apply", this.#handlers.onMenuApply);
+            this.#menu3D.removeEventListener("pref-viewer-menu-3d-apply", this.#handlers.onMenuApply);
             this.#menu3D.remove();
         }
         this.#menu3D = document.createElement("pref-viewer-menu-3d");
@@ -280,12 +295,13 @@ export default class PrefViewer extends HTMLElement {
         this.#handlers.onViewerHoverStart = () => this.#menu3D.setViewerHover(true);
         this.#handlers.onViewerHoverEnd = () => this.#menu3D.setViewerHover(false);
 
-        this.#menu3D.addEventListener("pref-viewer-menu-apply", this.#handlers.onMenuApply);
+        this.#menu3D.addEventListener("pref-viewer-menu-3d-apply", this.#handlers.onMenuApply);
         this.#wrapper.addEventListener("mouseenter", this.#handlers.onViewerHoverStart);
         this.#wrapper.addEventListener("mouseleave", this.#handlers.onViewerHoverEnd);
 
         this.#wrapper.appendChild(this.#menu3D);
         this.#menu3DSyncSettings();
+        this.#menu3DUpdateSwitchAvailability();
         this.#menu3DUpdateAvailability();
     }
 
@@ -372,6 +388,19 @@ export default class PrefViewer extends HTMLElement {
         this.#menu3D.setEnabled?.(isMode3D);
     }
 
+    /**
+     * Enables/disables menu switches according to current 3D option availability.
+     * @private
+     * @returns {void}
+     */
+    #menu3DUpdateSwitchAvailability() {
+        if (!this.#menu3D) {
+            return;
+        }
+        const iblAvailable = this.#component3D?.isIBLAvailable?.() === true;
+        this.#menu3D.setSwitchEnabled?.("iblEnabled", iblAvailable);
+    }
+
     /**
      * Applies render toggles via PrefViewer3D, showing progress in the menu and resyncing on completion.
      * When no changes occur, the menu is simply refreshed to match the controller snapshot.
@@ -440,7 +469,14 @@ export default class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     #addTaskToQueue(value, type) {
-        this.#taskQueue.push(new PrefViewerTask(value, type));
+        const task = new PrefViewerTask(value, type);
+        if (
+            task.type === PrefViewerTask.Types.Options ||
+            task.type === PrefViewerTask.Types.Drawing
+        ) {
+            this.#taskQueue = this.#taskQueue.filter((queuedTask) => queuedTask.type !== task.type);
+        }
+        this.#taskQueue.push(task);
         if (this.#isInitialized && !this.#isLoading) {
             this.#processNextTask();
         }
@@ -520,6 +556,9 @@ export default class PrefViewer extends HTMLElement {
     #on3DLoaded(detail) {
         this.#isLoaded = true;
         this.#isLoading = false;
+        
+        this.#menu3DSyncSettings();
+        this.#menu3DUpdateSwitchAvailability();
 
         this.removeAttribute("loading-3d");
         this.setAttribute("loaded-3d", "");
@@ -535,6 +574,32 @@ export default class PrefViewer extends HTMLElement {
         this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
     }
 
+    /**
+     * Handles 3D load errors.
+     * Clears loading state and dispatches a "scene-error" event.
+     * @private
+     * @param {object} [detail] - Optional details about the failure.
+     * @returns {void}
+     */
+    #on3DError(detail) {
+        this.#isLoaded = false;
+        this.#isLoading = false;
+        this.#menu3D?.setApplying(false, true);
+
+        this.removeAttribute("loading-3d");
+        this.removeAttribute("loaded-3d");
+
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
+        }
+        this.dispatchEvent(new CustomEvent("scene-error", customEventOptions));
+    }
+
     /**
      * Handles the start of a 2D loading operation.
      * Updates loading state, sets attributes, and dispatches a "drawing-loading" event.
@@ -581,6 +646,31 @@ export default class PrefViewer extends HTMLElement {
         this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
     }
 
+    /**
+     * Handles 2D load errors.
+     * Clears loading state and dispatches a "drawing-error" event.
+     * @private
+     * @param {object} [detail] - Optional details about the failure.
+     * @returns {void}
+     */
+    #on2DError(detail) {
+        this.#isLoaded = false;
+        this.#isLoading = false;
+
+        this.removeAttribute("loading-2d");
+        this.removeAttribute("loaded-2d");
+
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
+        }
+        this.dispatchEvent(new CustomEvent("drawing-error", customEventOptions));
+    }
+
     /**
      * Handles the "drawing-zoom-changed" event from the 2D viewer component.
      * Dispatches a custom "drawing-zoom-changed" event from the PrefViewer element, forwarding the event detail to external listeners.
@@ -601,7 +691,7 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Handles the custom "pref-viewer-menu-apply" event emitted by the menu component.
+     * Handles the custom "pref-viewer-menu-3d-apply" event emitted by the menu component.
      * Forwards the requested settings to the render-application pipeline.
      * @private
      * @param {CustomEvent} event - Menu event containing the `settings` payload.
@@ -623,16 +713,27 @@ export default class PrefViewer extends HTMLElement {
      * @param {object} config - The configuration object to process.
      * @returns {void}
      */
-    #processConfig(config) {
+    async #processConfig(config) {
         if (!this.#component3D) {
+            this.#processNextTask();
             return;
         }
 
         this.#on3DLoading();
-        this.#component3D.load(config).then((detail) => {
-            this.#on3DLoaded(detail);
+        try {
+            const detail = await this.#component3D.load(config);
+            if (detail?.success === false) {
+                this.#on3DError(detail);
+            } else {
+                this.#on3DLoaded(detail);
+            }
+        } catch (error) {
+            this.#on3DError({
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        } finally {
             this.#processNextTask();
-        });
+        }
     }
 
     /**
@@ -653,16 +754,23 @@ export default class PrefViewer extends HTMLElement {
      * @param {object} drawing - The drawing object to process.
      * @returns {void}
      */
-    #processDrawing(drawing) {
+    async #processDrawing(drawing) {
         if (!this.#component2D) {
+            this.#processNextTask();
             return;
         }
 
         this.#on2DLoading();
-        this.#component2D.load(drawing).then((detail) => {
+        try {
+            const detail = await this.#component2D.load(drawing);
             this.#on2DLoaded(detail);
+        } catch (error) {
+            this.#on2DError({
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        } finally {
             this.#processNextTask();
-        });
+        }
     }
 
     /**
@@ -708,15 +816,23 @@ export default class PrefViewer extends HTMLElement {
      * @param {object} options - The options object to process.
      * @returns {void}
      */
-    #processOptions(options) {
+    async #processOptions(options) {
         if (!this.#component3D) {
+            this.#processNextTask();
             return;
         }
 
         this.#on3DLoading();
-        const detail = this.#component3D.setOptions(options);
-        this.#on3DLoaded(detail);
-        this.#processNextTask();
+        try {
+            const detail = await this.#component3D.setOptions(options);
+            this.#on3DLoaded(detail);
+        } catch (error) {
+            this.#on3DError({
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        } finally {
+            this.#processNextTask();
+        }
     }
 
     /**
@@ -728,6 +844,7 @@ export default class PrefViewer extends HTMLElement {
      */
     #processVisibility(config) {
         if (!this.#component3D) {
+            this.#processNextTask();
             return;
         }
         const showModel = config.model?.visible;
@@ -957,7 +1074,7 @@ export default class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     setMode(mode = this.#mode) {
-        mode = mode.toLowerCase();
+        mode = typeof mode === "string" ? mode.toLowerCase() : this.#mode;
         if (mode !== "2d" && mode !== "3d") {
             console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
             mode = this.#mode;

package/src/styles.js

@@ -234,7 +234,7 @@ export const PrefViewerMenu3DStyles = `
         border-bottom: none;
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-copy {
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-copy {
         display: flex;
         flex-direction: column;
         gap: calc(var(--panel-spacing) / 4);
@@ -262,14 +262,14 @@ export const PrefViewerMenu3DStyles = `
         font-size: var(--font-size-small);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-control {
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-control {
         position: relative;
         width: var(--switch-control-width);
         min-width: var(--switch-control-width);
         height: var(--switch-control-height);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-control input {
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-control input {
         position: absolute;
         inset: 0;
         margin: 0;
@@ -277,6 +277,18 @@ export const PrefViewerMenu3DStyles = `
         cursor: pointer;
     }
 
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-disabled]>.menu-switch-copy {
+        opacity: 0.6;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-disabled]>.menu-switch-control {
+        opacity: 0.4;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-control input:disabled {
+        cursor: not-allowed;
+    }
+
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-visual {
         position: absolute;
         inset: 0;
@@ -286,6 +298,10 @@ export const PrefViewerMenu3DStyles = `
         cursor: pointer;
     }
 
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-control input:disabled + .menu-switch-visual {
+        cursor: not-allowed;
+    }
+
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-visual::after {
         content: "";
         position: absolute;
@@ -299,11 +315,11 @@ export const PrefViewerMenu3DStyles = `
         transition: transform 0.2s ease;
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-control input:checked + .menu-switch-visual {
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-control input:checked + .menu-switch-visual {
         background: var(--switch-control-bar-checked-color);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-control input:checked + .menu-switch-visual::after {
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-control input:checked + .menu-switch-visual::after {
         transform: translateX(var(--switch-control-thumb-size));
     }