@preference-sl/pref-viewer 2.14.0 → 2.16.0-beta.0

package/src/localization/translations.js

@@ -8,6 +8,8 @@ export const translations = {
                 actions: {
                     apply: "Apply",
                     applying: "Applying...",
+                    play: "Play",
+                    pause: "Pause",
                 },
                 status: {
                     error: "Couldn't apply the changes.",
@@ -37,6 +39,13 @@ export const translations = {
                         label: "Highlight Color",
                         helper: "Color for hover highlight on animations.",
                     },
+                    lightingTimeOfDay: {
+                        label: "Time of day",
+                        helper: "Slide from night to day and back to night with a smooth sun and moon cycle.",
+                        startLabel: "Night",
+                        midLabel: "Day",
+                        endLabel: "Night",
+                    },
                 },
             },
             downloadDialog: {
@@ -66,6 +75,8 @@ export const translations = {
                 actions: {
                     apply: "Aplicar",
                     applying: "Aplicando...",
+                    play: "Reproducir",
+                    pause: "Pausar",
                 },
                 status: {
                     error: "No se pudo aplicar los cambios.",
@@ -95,6 +106,13 @@ export const translations = {
                         label: "Color de resaltado",
                         helper: "Color del resaltado al pasar sobre animaciones.",
                     },
+                    lightingTimeOfDay: {
+                        label: "Hora del día",
+                        helper: "Desliza de noche a día y vuelve a noche con un ciclo suave de sol y luna.",
+                        startLabel: "Noche",
+                        midLabel: "Día",
+                        endLabel: "Noche",
+                    },
                 },
             },
             downloadDialog: {

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

@@ -229,6 +229,9 @@ export default class PrefViewer3D extends HTMLElement {
                     outerFloor: new MaterialData("outerFloor", undefined, undefined, ["outerFloor"]),
                 },
                 ibl: new IBLData(),
+                lighting: {
+                    timeOfDay: 0.5,
+                },
             },
         };
     }
@@ -426,6 +429,38 @@ export default class PrefViewer3D extends HTMLElement {
         return needUpdate;
     }
 
+    /**
+     * Resolves incoming lighting settings (time-of-day slider) and marks the option as pending when changed.
+     * Supports both nested `options.lighting.timeOfDay` and flat `options.lightingTimeOfDay` payloads so the menu
+     * and external API can share the same controller path.
+     * @private
+     * @param {object} options - Options payload containing lighting state.
+     * @returns {boolean} True when lighting differs from the cached state, otherwise false.
+     */
+    #checkNeedToUpdateLighting(options) {
+        if (!options) {
+            return false;
+        }
+
+        const lightingState = this.#data.options.lighting;
+        const incomingTime = typeof options.lightingTimeOfDay === "number"
+            ? options.lightingTimeOfDay
+            : typeof options.lighting?.timeOfDay === "number"
+                ? options.lighting.timeOfDay
+                : undefined;
+
+        if (!Number.isFinite(incomingTime)) {
+            return false;
+        }
+
+        const normalizedTime = Math.min(1, Math.max(0, incomingTime));
+        const controllerTime = this.#babylonJSController?.getRenderSettings?.()?.lightingTimeOfDay;
+        const currentTime = Number.isFinite(controllerTime) ? controllerTime : lightingState.timeOfDay;
+        const needUpdate = normalizedTime !== currentTime;
+        lightingState.timeOfDay = normalizedTime;
+        return needUpdate;
+    }
+
     /**
      * Dispatches a "prefviewer3d-loading" event and updates loading state attributes.
      * Used internally when a loading operation starts.
@@ -608,14 +643,29 @@ export default class PrefViewer3D extends HTMLElement {
         this.#checkNeedToUpdateContainers(config);
 
         // Options
+        let needUpdateLighting = false;
+        const iblOptions = config.scene?.ibl
+            ? { ...(config.options ?? {}), ibl: { ...(config.options?.ibl ?? {}), ...config.scene.ibl } }
+            : config.options;
+
         if (config.options) {
             this.#checkNeedToUpdateCamera(config.options);
             this.#checkNeedToUpdateMaterials(config.options);
-            await this.#checkNeedToUpdateIBL(config.options);
+            needUpdateLighting = this.#checkNeedToUpdateLighting(config.options);
+        }
+
+        if (iblOptions) {
+            await this.#checkNeedToUpdateIBL(iblOptions);
         }
 
         const loadDetail = await this.#babylonJSController.load(forceReload);
 
+        if (needUpdateLighting && typeof this.#babylonJSController.setIlluminationConfig === "function") {
+            this.#babylonJSController.setIlluminationConfig({
+                lightingTimeOfDay: this.#data.options.lighting.timeOfDay,
+            });
+        }
+
         // Apply initial render settings if provided in options
         if (config.options?.render) {
             await this.applyRenderSettings(config.options.render);
@@ -649,6 +699,13 @@ export default class PrefViewer3D extends HTMLElement {
         if (needUpdateIBL) {
             someSetted = someSetted || (await this.#babylonJSController.setIBLOptions());
         }
+        const needUpdateLighting = this.#checkNeedToUpdateLighting(options);
+        if (needUpdateLighting && typeof this.#babylonJSController.setIlluminationConfig === "function") {
+            this.#babylonJSController.setIlluminationConfig({
+                lightingTimeOfDay: this.#data.options.lighting.timeOfDay,
+            });
+            someSetted = true;
+        }
         
         // Apply render settings if provided
         if (options.render) {
@@ -910,7 +967,17 @@ export default class PrefViewer3D extends HTMLElement {
         }
 
         // Exclude highlight settings from the reload — they are handled above without requiring a scene reload
-        const { highlightEnabled: _he, highlightColor: _hc, ...reloadSettings } = settings;
+        if (settings.lightingTimeOfDay !== undefined && typeof this.#babylonJSController.setIlluminationConfig === "function") {
+            const lightingTimeOfDay = Number(settings.lightingTimeOfDay);
+            if (Number.isFinite(lightingTimeOfDay)) {
+                this.#babylonJSController.setIlluminationConfig({
+                    lightingTimeOfDay,
+                    persist: settings.persist !== false,
+                });
+            }
+        }
+
+        const { highlightEnabled: _he, highlightColor: _hc, lightingTimeOfDay: _lt, lighting: _lighting, persist: _persist, ...reloadSettings } = settings;
         const scheduled = this.#babylonJSController.scheduleRenderSettingsReload(reloadSettings);
         if (!scheduled.changed) {
             return { changed: false, success: true };

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

@@ -34,6 +34,14 @@ export default class PrefViewerMenu3D extends HTMLElement {
         colorPicker: null,
         colorSlider: null,
         colorPickerPreview: null,
+        lightingPlayButton: null,
+        lightingSliderWrapper: null,
+        lightingSliderLabel: null,
+        lightingSliderStart: null,
+        lightingSliderMid: null,
+        lightingSliderEnd: null,
+        lightingSlider: null,
+        lightingValue: null,
         panel: null,
         pendingLabel: null,
         status: null,
@@ -48,6 +56,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
     #handles = {
         onApplyClick: null,
         onColorSliderInput: null,
+        onLightingSliderInput: null,
+        onLightingPlayClick: null,
         onHostLeave: null,
         onPanelEnter: null,
         onSwitchChange: null,
@@ -65,6 +75,11 @@ export default class PrefViewerMenu3D extends HTMLElement {
     #statusTimeout = null;
     #isApplying = false;
     #isEnabled = true;
+    #isLightingPlaying = false;
+    #lightingAnimationFrame = null;
+    #lightingPlaybackStart = 0;
+    #lightingPlaybackBase = 0.5;
+    #lightingPlaybackDurationMs = 28000;
 
     #culture = DEFAULT_LOCALE;
     #texts = {};
@@ -79,7 +94,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @returns {string[]} Array of attribute names to observe.
      */
     static get observedAttributes() {
-        return ["culture", "show-illumination", "illumination-color"];
+        return ["culture", "show-illumination", "illumination-color", "lighting-time-of-day"];
     }
     
     /**
@@ -107,6 +122,12 @@ export default class PrefViewerMenu3D extends HTMLElement {
                 // Update color picker preview if exists
                 this.#updateColorPickerPreview(value);
             }
+        } else if (name === "lighting-time-of-day") {
+            const parsed = Number(value);
+            if (Number.isFinite(parsed)) {
+                this.#draftSettings.lightingTimeOfDay = this.#clampLightingTime(parsed);
+                this.#updateLightingSliderUI(this.#draftSettings.lightingTimeOfDay);
+            }
         }
     }
 
@@ -134,6 +155,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
      */
     disconnectedCallback() {
         this.#detachEvents();
+        this.#stopLightingPlayback();
         if (this.#statusTimeout) {
             clearTimeout(this.#statusTimeout);
             this.#statusTimeout = null;
@@ -167,6 +189,21 @@ export default class PrefViewerMenu3D extends HTMLElement {
                     </div>
                     <input type="range" class="color-slider" min="0" max="359" value="${PrefViewerMenu3D.#hexToHue(this.#draftSettings.highlightColor || '#ff6700')}">
                 </div>
+                <div class="menu-lighting-slider" data-setting="lightingTimeOfDay">
+                    <div class="lighting-slider-row">
+                        <span class="lighting-slider-label">${this.#texts.switches?.lightingTimeOfDay?.label || "Time of day"}</span>
+                        <span class="lighting-slider-value">${PrefViewerMenu3D.#formatLightingTime(this.#draftSettings.lightingTimeOfDay ?? 0.5)}</span>
+                    </div>
+                    <input type="range" class="lighting-slider" min="0" max="1000" step="1" value="${Math.round((this.#draftSettings.lightingTimeOfDay ?? 0.5) * 1000)}">
+                    <div class="lighting-slider-markers" aria-hidden="true">
+                        <span class="lighting-slider-start">${this.#texts.switches?.lightingTimeOfDay?.startLabel || "Night"}</span>
+                        <span class="lighting-slider-mid">${this.#texts.switches?.lightingTimeOfDay?.midLabel || "Day"}</span>
+                        <span class="lighting-slider-end">${this.#texts.switches?.lightingTimeOfDay?.endLabel || "Night"}</span>
+                    </div>
+                    <div class="lighting-slider-actions">
+                        <button type="button" class="lighting-play-button">${this.#texts.actions?.play || "Play"}</button>
+                    </div>
+                </div>
                 <div class="menu-footer">
                     <span class="menu-pending" aria-live="polite">${this.#texts.pendingLabel}</span>
                     <span class="menu-status" aria-live="assertive"></span>
@@ -227,6 +264,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
             actions: {
                 apply: data.actions?.apply || "",
                 applying: data.actions?.applying || "",
+                play: data.actions?.play || "",
+                pause: data.actions?.pause || "",
             },
             status: {
                 error: data.status?.error || "",
@@ -258,6 +297,23 @@ export default class PrefViewerMenu3D extends HTMLElement {
         if (this.#elements.applyButton) {
             this.#elements.applyButton.textContent = this.#isApplying ? this.#texts.actions.applying : this.#texts.actions.apply;
         }
+        if (this.#elements.lightingPlayButton) {
+            this.#elements.lightingPlayButton.textContent = this.#isLightingPlaying ? (this.#texts.actions.pause || "Pause") : (this.#texts.actions.play || "Play");
+            this.#elements.lightingPlayButton.setAttribute("aria-pressed", this.#isLightingPlaying ? "true" : "false");
+        }
+        if (this.#elements.lightingSliderLabel) {
+            this.#elements.lightingSliderLabel.textContent = this.#texts.switches?.lightingTimeOfDay?.label || "Time of day";
+        }
+        if (this.#elements.lightingSliderStart) {
+            this.#elements.lightingSliderStart.textContent = this.#texts.switches?.lightingTimeOfDay?.startLabel || "Night";
+        }
+        if (this.#elements.lightingSliderMid) {
+            this.#elements.lightingSliderMid.textContent = this.#texts.switches?.lightingTimeOfDay?.midLabel || "Day";
+        }
+        if (this.#elements.lightingSliderEnd) {
+            this.#elements.lightingSliderEnd.textContent = this.#texts.switches?.lightingTimeOfDay?.endLabel || "Night";
+        }
+        this.#updateLightingPlayButtonUI();
         Object.entries(this.#elements.switchCopyNodes).forEach(([key, nodes]) => {
             if (!nodes) {
                 return;
@@ -303,6 +359,14 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#elements.colorPicker = this.querySelector(".menu-color-picker");
         this.#elements.colorSlider = this.querySelector(".color-slider");
         this.#elements.colorPickerPreview = this.querySelector(".color-preview");
+        this.#elements.lightingPlayButton = this.querySelector(".lighting-play-button");
+        this.#elements.lightingSliderWrapper = this.querySelector(".menu-lighting-slider");
+        this.#elements.lightingSliderLabel = this.querySelector(".lighting-slider-label");
+        this.#elements.lightingSliderStart = this.querySelector(".lighting-slider-start");
+        this.#elements.lightingSliderMid = this.querySelector(".lighting-slider-mid");
+        this.#elements.lightingSliderEnd = this.querySelector(".lighting-slider-end");
+        this.#elements.lightingSlider = this.querySelector(".lighting-slider");
+        this.#elements.lightingValue = this.querySelector(".lighting-slider-value");
         
         this.#MENU_SWITCHES.forEach((key) => {
             this.#elements.switches[key] = this.querySelector(`input[data-setting="${key}"]`);
@@ -335,6 +399,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#handles.onSwitchChange = (event) => this.#handleSwitchChange(event);
         this.#handles.onApplyClick = () => this.#emitApply();
         this.#handles.onColorSliderInput = (event) => this.#handleColorSliderInput(event);
+        this.#handles.onLightingSliderInput = (event) => this.#handleLightingSliderInput(event);
+        this.#handles.onLightingPlayClick = () => this.#toggleLightingPlayback();
 
         this.#elements.toggleButton.addEventListener("mouseenter", this.#handles.onToggleEnter);
         this.#elements.toggleButton.addEventListener("focus", this.#handles.onToggleEnter);
@@ -343,6 +409,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         Object.values(this.#elements.switches).forEach((input) => input?.addEventListener("change", this.#handles.onSwitchChange));
         this.#elements.applyButton?.addEventListener("click", this.#handles.onApplyClick);
         this.#elements.colorSlider?.addEventListener("input", this.#handles.onColorSliderInput);
+        this.#elements.lightingSlider?.addEventListener("input", this.#handles.onLightingSliderInput);
+        this.#elements.lightingPlayButton?.addEventListener("click", this.#handles.onLightingPlayClick);
     }
 
     /**
@@ -362,6 +430,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#elements.applyButton?.removeEventListener("click", this.#handles.onApplyClick);
         
         this.#elements.colorSlider?.removeEventListener("input", this.#handles.onColorSliderInput);
+        this.#elements.lightingSlider?.removeEventListener("input", this.#handles.onLightingSliderInput);
+        this.#elements.lightingPlayButton?.removeEventListener("click", this.#handles.onLightingPlayClick);
     }
 
     /**
@@ -423,6 +493,100 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#emitApply(true);
     }
 
+    /**
+     * Handles lighting cycle slider input by updating the draft state and applying it immediately.
+     * @private
+     * @param {Event} event - Input event from the time-of-day slider.
+     * @returns {void}
+     */
+    #handleLightingSliderInput(event) {
+        const rawValue = parseInt(event.target.value, 10);
+        if (!Number.isFinite(rawValue)) {
+            return;
+        }
+        const normalized = this.#clampLightingTime(rawValue / 1000);
+        this.#draftSettings.lightingTimeOfDay = normalized;
+        if (this.#isLightingPlaying) {
+            this.#lightingPlaybackBase = normalized;
+            this.#lightingPlaybackStart = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        }
+        this.#updateLightingSliderUI(normalized);
+        this.#updatePendingState();
+        this.#emitApply(true);
+    }
+
+    /**
+     * Toggles the continuous lighting playback loop.
+     * @private
+     * @returns {void}
+     */
+    #toggleLightingPlayback() {
+        if (this.#isLightingPlaying) {
+            this.#stopLightingPlayback(true);
+            return;
+        }
+        this.#startLightingPlayback();
+    }
+
+    /**
+     * Starts the continuous day/night playback loop.
+     * @private
+     * @returns {void}
+     */
+    #startLightingPlayback() {
+        if (this.#isLightingPlaying) {
+            return;
+        }
+        this.#isLightingPlaying = true;
+        this.#lightingPlaybackBase = this.#draftSettings.lightingTimeOfDay ?? 0.5;
+        this.#lightingPlaybackStart = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        this.#updateLightingPlayButtonUI();
+        const tick = () => {
+            if (!this.#isLightingPlaying) {
+                return;
+            }
+            const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+            const elapsed = now - this.#lightingPlaybackStart;
+            const cycle = (this.#lightingPlaybackBase + (elapsed / this.#lightingPlaybackDurationMs)) % 1;
+            this.#draftSettings.lightingTimeOfDay = cycle;
+            this.#updateLightingSliderUI(cycle);
+            this.#emitApply(true, { persist: false });
+            this.#lightingAnimationFrame = requestAnimationFrame(tick);
+        };
+        this.#lightingAnimationFrame = requestAnimationFrame(tick);
+    }
+
+    /**
+     * Stops the continuous day/night playback loop.
+     * @private
+     * @returns {void}
+     */
+    #stopLightingPlayback(persist = false) {
+        this.#isLightingPlaying = false;
+        if (this.#lightingAnimationFrame !== null) {
+            cancelAnimationFrame(this.#lightingAnimationFrame);
+            this.#lightingAnimationFrame = null;
+        }
+        if (persist) {
+            this.#emitApply(true, { persist: true });
+        }
+        this.#updateLightingPlayButtonUI();
+    }
+
+    /**
+     * Refreshes the play button label and pressed state.
+     * @private
+     * @returns {void}
+     */
+    #updateLightingPlayButtonUI() {
+        if (!this.#elements.lightingPlayButton) {
+            return;
+        }
+        this.#elements.lightingSliderWrapper?.toggleAttribute("data-playing", this.#isLightingPlaying);
+        this.#elements.lightingPlayButton.textContent = this.#isLightingPlaying ? (this.#texts.actions.pause || "Pause") : (this.#texts.actions.play || "Play");
+        this.#elements.lightingPlayButton.setAttribute("aria-pressed", this.#isLightingPlaying ? "true" : "false");
+    }
+
     static #hueToHex(hue) {
         const h = ((hue % 360) + 360) % 360;
         const a = Math.min(0.5, 1 - 0.5);
@@ -445,6 +609,21 @@ export default class PrefViewerMenu3D extends HTMLElement {
         return Math.round(h * 60);
     }
 
+    static #formatLightingTime(value) {
+        const normalized = Math.min(1, Math.max(0, Number(value) || 0));
+        const minutes = Math.round(normalized * 24 * 60) % (24 * 60);
+        const hours = Math.floor(minutes / 60);
+        const mins = minutes % 60;
+        return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
+    }
+
+    #clampLightingTime(value) {
+        if (!Number.isFinite(value)) {
+            return 0.5;
+        }
+        return Math.min(1, Math.max(0, value));
+    }
+
     /**
      * Updates the color picker UI (input value, preview, selected button).
      * @private
@@ -474,18 +653,33 @@ export default class PrefViewerMenu3D extends HTMLElement {
         }
     }
 
+    /**
+     * Updates the lighting slider value and formatted time label.
+     * @private
+     * @param {number} value - Normalized 0..1 lighting cycle value.
+     * @returns {void}
+     */
+    #updateLightingSliderUI(value) {
+        if (this.#elements.lightingSlider) {
+            this.#elements.lightingSlider.value = Math.round(this.#clampLightingTime(value) * 1000);
+        }
+        if (this.#elements.lightingValue) {
+            this.#elements.lightingValue.textContent = PrefViewerMenu3D.#formatLightingTime(value);
+        }
+    }
+
     /**
      * Emits the apply event with the current draft settings when changes are pending.
      * @private
      * @returns {void}
      */
-    #emitApply(force = false) {
+    #emitApply(force = false, extraSettings = {}) {
         // For illumination/color changes, we apply immediately regardless of pending state
         if (!force && this.#isApplying) {
             return;
         }
 
-        const detail = { settings: { ...this.#draftSettings } };
+        const detail = { settings: { ...this.#draftSettings, ...extraSettings } };
         const customEventOptions = {
             bubbles: true,
             cancelable: true,
@@ -535,6 +729,9 @@ export default class PrefViewerMenu3D extends HTMLElement {
      */
     #getPendingKeys() {
         return Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter((key) => {
+            if (key === "lightingTimeOfDay") {
+                return false;
+            }
             if (this.#elements.switches[key]?.disabled) {
                 return false;
             }
@@ -564,6 +761,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
             }
             wrapper.toggleAttribute("data-pending", pendingKeys.includes(key));
         });
+        this.#elements.lightingSliderWrapper?.toggleAttribute("data-pending", pendingKeys.includes("lightingTimeOfDay"));
     }
 
     /**
@@ -649,6 +847,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
         if (!this.#isEnabled) {
             this.removeAttribute("data-viewer-hover");
             this.#closeMenu();
+            this.#stopLightingPlayback();
         }
     }
 
@@ -668,10 +867,14 @@ export default class PrefViewerMenu3D extends HTMLElement {
         if (this.#draftSettings.highlightColor) {
             this.#updateColorPickerUI(this.#draftSettings.highlightColor);
         }
+        if (this.#draftSettings.lightingTimeOfDay !== undefined) {
+            this.#updateLightingSliderUI(this.#draftSettings.lightingTimeOfDay);
+        }
         // Update illumination color picker if present
         if (this.#draftSettings.illuminationColor) {
             this.#updateColorPickerUI(this.#draftSettings.illuminationColor);
         }
+        this.#updateLightingPlayButtonUI();
         
         this.setApplying(false);
         this.#setStatusMessage("");

package/src/pref-viewer.js

@@ -486,7 +486,11 @@ export default class PrefViewer extends HTMLElement {
         if (!this.#component3D) {
             return;
         }
-        this.#menu3D?.setApplying(true);
+        const { highlightEnabled: _he, highlightColor: _hc, lightingTimeOfDay: _lt, lighting: _lighting, persist: _persist, ...reloadSettings } = settings ?? {};
+        const hasReloadSettings = Object.keys(reloadSettings).length > 0;
+        if (hasReloadSettings) {
+            this.#menu3D?.setApplying(true);
+        }
         try {
             const result = await this.#component3D.applyRenderSettings(settings);
             if (!result?.changed) {

package/src/styles.js

@@ -482,6 +482,123 @@ export const PrefViewerMenu3DStyles = `
         opacity: 0.5;
         pointer-events: none;
     }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: var(--panel-spacing) 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-pending] .lighting-slider-label::after {
+        content: "•";
+        margin-left: 8px;
+        color: var(--accent-color);
+        font-size: 1.1em;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row>.lighting-slider-label {
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-medium);
+        color: var(--text-color);
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row>.lighting-slider-value {
+        font-size: var(--font-size-small);
+        color: var(--muted-color);
+        font-variant-numeric: tabular-nums;
+        letter-spacing: 0.06em;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 10px;
+        border-radius: 999px;
+        cursor: pointer;
+        background:
+            linear-gradient(to right,
+                rgba(255, 214, 120, 0.95) 0%,
+                rgba(255, 179, 71, 0.98) 20%,
+                rgba(255, 244, 214, 0.95) 50%,
+                rgba(118, 165, 255, 0.92) 80%,
+                rgba(56, 66, 115, 0.95) 100%);
+        outline: none;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #ffffff;
+        border: 2px solid rgba(0, 0, 0, 0.24);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        cursor: pointer;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #ffffff;
+        border: 2px solid rgba(0, 0, 0, 0.24);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        cursor: pointer;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-markers {
+        display: flex;
+        justify-content: space-between;
+        font-size: var(--font-size-small);
+        color: var(--muted-color);
+        letter-spacing: 0.02em;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button {
+        appearance: none;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.08);
+        color: var(--text-color);
+        padding: 6px 12px;
+        font-size: var(--font-size-small);
+        font-weight: var(--font-weight-medium);
+        cursor: pointer;
+        transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:hover,
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:focus-visible {
+        background: rgba(255, 255, 255, 0.14);
+        border-color: rgba(255, 255, 255, 0.28);
+        transform: translateY(-1px);
+        outline: none;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-playing] .lighting-slider {
+        background:
+            linear-gradient(to right,
+                rgba(255, 220, 132, 0.96) 0%,
+                rgba(255, 187, 88, 0.98) 18%,
+                rgba(255, 247, 226, 0.96) 50%,
+                rgba(112, 154, 255, 0.92) 82%,
+                rgba(45, 55, 102, 0.98) 100%);
+    }
 `;
 
 export const PrefViewer3DAnimationMenuStyles = `