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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.14.0-beta.0",
+    "version": "2.14.0-beta.3",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-animation-controller.js

@@ -45,15 +45,22 @@ export default class BabylonJSAnimationController {
     #highlightColor = Color3.FromHexString(PrefViewerStyleVariables.colorPrimary);
     #highlightLayer = null;
     #overlayLayer = null;
-    #useHighlightLayer = true; // Set to true to use HighlightLayer (better performance) and false to use overlay meshes (UtilityLayerRenderer - always on top)
-    #lastHighlightedMeshId = null; // Cache to avoid redundant highlight updates
-    #lastHighlightedNodeIds = []; // Cache to avoid redundant highlight updates
+    #useHighlightLayer = true;
+    #lastHighlightedMeshId = null;
+    #lastHighlightedNodeIds = [];
+    
+    // Static property to store global highlight enabled state
+    static #globalHighlightEnabled = true;
+    static #instanceId = 0;
+    #thisInstanceId = 0;
 
     /**
      * Creates a new BabylonJSAnimationController for a Babylon.js scene.
      * @param {AssetContainer|Scene} assetContainer - The Babylon.js asset container or scene instance.
      */
     constructor(assetContainer) {
+        BabylonJSAnimationController.#instanceId++;
+        this.#thisInstanceId = BabylonJSAnimationController.#instanceId;
         this.#scene = assetContainer.scene ? assetContainer.scene : assetContainer;
         this.#assetContainer = assetContainer;
         this.#canvas = this.#scene._engine._renderingCanvas;
@@ -459,6 +466,17 @@ export default class BabylonJSAnimationController {
      * Returns whether highlight visuals changed in this call and whether any mesh remains highlighted.
      */
     highlightMeshes(pickingInfo) {
+        // If highlight is disabled globally, just remove any existing highlight and return
+        if (!BabylonJSAnimationController.#globalHighlightEnabled) {
+            if (this.#lastHighlightedMeshId !== null) {
+                this.#removeHighlight();
+                this.#lastHighlightedMeshId = null;
+                this.#lastHighlightedNodeIds = [];
+                return { changed: true, highlighted: false };
+            }
+            return { changed: false, highlighted: false };
+        }
+        
         let changed = false;
         let highlighted = false;
 
@@ -504,6 +522,40 @@ export default class BabylonJSAnimationController {
         return { changed: changed, highlighted: highlighted };
     }
 
+    /**
+     * Configures the highlight settings for animated nodes on hover.
+     * @public
+     * @param {{enabled?: boolean, color?: string}} config - Configuration object.
+     * @param {boolean} [config.enabled] - Whether to enable highlight on hover. If false, removes highlight.
+     * @param {string} [config.color] - Hex color string for the highlight (e.g., "#FF0000"). Only used if enabled is not false.
+     * @returns {void}
+     */
+    setHighlightConfig(config = {}) {
+        // Handle enabled state
+        if (config.enabled !== undefined) {
+            BabylonJSAnimationController.#globalHighlightEnabled = config.enabled;
+            if (config.enabled === false) {
+                this.#removeHighlight();
+                this.#lastHighlightedMeshId = null;
+                this.#lastHighlightedNodeIds = [];
+            }
+        }
+
+        // Update color regardless of enabled state so it's ready when re-enabled
+        if (config.color) {
+            try {
+                this.#highlightColor = Color3.FromHexString(config.color);
+            } catch (e) {
+                console.warn("Invalid highlight color:", config.color);
+                return;
+            }
+            // Re-apply highlight with new color if meshes are currently highlighted
+            if (BabylonJSAnimationController.#globalHighlightEnabled && this.#lastHighlightedNodeIds.length > 0) {
+                this.#addHighlight(this.#lastHighlightedNodeIds);
+            }
+        }
+    }
+
     /**
      * Hides and disposes the animation control menu if it exists.
      * @public
@@ -514,6 +566,70 @@ export default class BabylonJSAnimationController {
         this.#canvas?.parentElement?.querySelectorAll("div.pref-viewer-3d.animation-menu").forEach((menu) => menu.remove());
     }
 
+    /**
+     * Returns a snapshot of all available animations and their current state.
+     * @public
+     * @returns {Array<{name: string, state: number, progress: number, loop: boolean, nodes: string[]}>}
+     */
+    getAnimations() {
+        return this.#openingAnimations.map((anim) => ({
+            name: anim.name,
+            state: anim.state,
+            progress: anim.progress,
+            loop: anim.loop,
+            nodes: anim.nodes ?? [],
+        }));
+    }
+
+    /**
+     * Controls a named animation by applying the specified action.
+     * @public
+     * @param {string} name - The name of the animation to control.
+     * @param {"open"|"close"|"pause"|"goToOpened"|"goToClosed"} action - The action to apply.
+     * @returns {boolean} True if the animation was found and the action was applied; otherwise false.
+     */
+    playAnimation(name, action) {
+        const anim = this.#openingAnimations.find((a) => a.name === name);
+        if (!anim) return false;
+        switch (action) {
+            case "open": anim.playOpen(); break;
+            case "close": anim.playClose(); break;
+            case "pause": anim.pause(); break;
+            case "goToOpened": anim.goToOpened(); break;
+            case "goToClosed": anim.goToClosed(); break;
+            default: return false;
+        }
+        return true;
+    }
+
+    /**
+     * Seeks a named animation to the given normalized progress position (0–1).
+     * @public
+     * @param {string} name - The name of the animation to seek.
+     * @param {number} progress - Progress value between 0 and 1.
+     * @returns {boolean} True if the animation was found and seeked; otherwise false.
+     */
+    setAnimationProgress(name, progress) {
+        const anim = this.#openingAnimations.find((a) => a.name === name);
+        if (!anim) return false;
+        anim.setProgress(progress);
+        return true;
+    }
+
+    /**
+     * Enables or disables loop mode for a named animation.
+     * @public
+     * @param {string} name - The name of the animation to configure.
+     * @param {boolean} loop - True to enable looping; false to disable.
+     * @returns {boolean} True if the animation was found and loop mode was set; otherwise false.
+     */
+    setAnimationLoop(name, loop) {
+        const anim = this.#openingAnimations.find((a) => a.name === name);
+        if (!anim) return false;
+        anim.setLoop(loop);
+        return true;
+    }
+
     /**
      * Displays the animation control menu for the animated node under the pointer.
      * Hides the current menu when picking info is invalid or when no animated node is found.

package/src/babylonjs-animation-opening.js

@@ -589,4 +589,63 @@ export default class OpeningAnimation {
     get state() {
         return this.#state;
     }
+
+    /**
+     * Returns the normalized progress (0–1) of the current animation.
+     * @public
+     * @returns {number}
+     */
+    get progress() {
+        return this.#getProgress();
+    }
+
+    /**
+     * Returns whether loop mode is currently enabled for this animation.
+     * @public
+     * @returns {boolean}
+     */
+    get loop() {
+        return this.#loop;
+    }
+
+    /**
+     * Returns the node IDs affected by this animation.
+     * @public
+     * @returns {string[]}
+     */
+    get nodes() {
+        return [...this.#nodes];
+    }
+
+    /**
+     * Seeks the animation to the given normalized progress position (0–1).
+     * Mirrors the same threshold/snap logic used by the animation control menu.
+     * @public
+     * @param {number} progress - Progress value between 0 and 1.
+     * @returns {void}
+     */
+    setProgress(progress) {
+        progress = this.#checkProgress(progress);
+        if (progress === 0) {
+            this.goToClosed();
+        } else if (progress === 1) {
+            this.goToOpened();
+        } else {
+            const frame = this.#getFrameFromProgress(progress);
+            this.#goToFrameAndPause(frame);
+        }
+    }
+
+    /**
+     * Enables or disables loop mode for this animation.
+     * @public
+     * @param {boolean} loop - True to enable looping; false to disable.
+     * @returns {void}
+     */
+    setLoop(loop) {
+        this.#loop = Boolean(loop);
+        if (this.#menu) {
+            this.#menu.animationLoop = this.#loop;
+        }
+    }
 }

package/src/babylonjs-controller.js

@@ -85,6 +85,9 @@ export default class BabylonJSController {
         ambientOcclusionEnabled: true,
         iblEnabled: true,
         shadowsEnabled: false,
+        // Highlight settings
+        highlightEnabled: true,
+        highlightColor: "#ff6700",
     };
 
     // Canvas HTML element
@@ -496,10 +499,16 @@ export default class BabylonJSController {
 
         let changed = false;
         Object.keys(settings).forEach((key) => {
+            // Handle boolean settings
             if (typeof settings[key] === "boolean" && this.#settings[key] !== settings[key]) {
                 this.#settings[key] = settings[key];
                 changed = true;
             }
+            // Handle string settings (like illuminationColor)
+            if (typeof settings[key] === "string" && this.#settings[key] !== settings[key]) {
+                this.#settings[key] = settings[key];
+                changed = true;
+            }
         });
 
         if (changed) {
@@ -526,9 +535,14 @@ export default class BabylonJSController {
             }
             const parsed = JSON.parse(serialized);
             Object.keys(BabylonJSController.DEFAULT_RENDER_SETTINGS).forEach((key) => {
+                // Handle boolean settings
                 if (typeof parsed?.[key] === "boolean") {
                     this.#settings[key] = parsed[key];
                 }
+                // Handle string settings (like illuminationColor)
+                if (typeof parsed?.[key] === "string") {
+                    this.#settings[key] = parsed[key];
+                }
             });
         } catch (error) {
             console.warn("PrefViewer: unable to load render settings", error);
@@ -2458,6 +2472,11 @@ export default class BabylonJSController {
                 this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
                 this.#setMaxSimultaneousLights();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
+                // Apply stored highlight settings so fresh page loads respect persisted state
+                this.#setHighlightConfig({
+                    enabled: this.#settings.highlightEnabled,
+                    color: this.#settings.highlightColor,
+                });
                 if (this.#babylonJSAnimationController?.hasAnimations?.()) {
                     this.#attachAnimationChangedListener();
                 }
@@ -3019,4 +3038,98 @@ export default class BabylonJSController {
     async reloadWithCurrentSettings() {
         return await this.#loadContainers();
     }
+
+    /**
+     * Sets highlight configuration for animation hover effects.
+     * @public
+     * @param {{showAnimationMenu?:boolean, highlightColor?:string, highlightEnabled?:boolean}} config - Highlight configuration.
+     * @returns {void}
+     */
+    setIlluminationConfig(config = {}) {
+        
+        if (config.showAnimationMenu !== undefined) {
+            // Handle show-animation-menu via the 3D component's parent
+            // This is handled in pref-viewer-3d.js attributeChangedCallback
+        }
+        
+        // Handle highlight color for animation hover
+        if (config.highlightColor !== undefined || config.highlightEnabled !== undefined) {
+            // Normalize highlightEnabled: accept boolean, string "true"/"false", or null
+            let enabled = config.highlightEnabled;
+            if (typeof enabled === "string") {
+                enabled = enabled.toLowerCase() !== "false";
+            } else if (enabled === null) {
+                enabled = undefined;
+            }
+            // Keep #settings in sync so getRenderSettings() always reflects the real state
+            if (enabled !== undefined) {
+                this.#settings.highlightEnabled = enabled;
+            }
+            if (config.highlightColor !== undefined && config.highlightColor !== null) {
+                this.#settings.highlightColor = config.highlightColor;
+            }
+            this.#setHighlightConfig({
+                color: config.highlightColor ?? undefined,
+                enabled,
+            });
+        }
+
+        // Persist settings
+        this.#storeRenderSettings();
+    }
+
+    /**
+     * Returns a snapshot of all available animations and their current state.
+     * @public
+     * @returns {Array<{name: string, state: number, progress: number, loop: boolean, nodes: string[]}>}
+     */
+    getAnimations() {
+        return this.#babylonJSAnimationController?.getAnimations() ?? [];
+    }
+
+    /**
+     * Controls a named animation by applying the specified action.
+     * @public
+     * @param {string} name - The name of the animation to control.
+     * @param {"open"|"close"|"pause"|"goToOpened"|"goToClosed"} action - The action to apply.
+     * @returns {boolean} True if the animation was found and the action was applied; otherwise false.
+     */
+    playAnimation(name, action) {
+        return this.#babylonJSAnimationController?.playAnimation(name, action) ?? false;
+    }
+
+    /**
+     * Seeks a named animation to the given normalized progress position (0–1).
+     * @public
+     * @param {string} name - The name of the animation to seek.
+     * @param {number} progress - Progress value between 0 and 1.
+     * @returns {boolean} True if the animation was found and seeked; otherwise false.
+     */
+    setAnimationProgress(name, progress) {
+        return this.#babylonJSAnimationController?.setAnimationProgress(name, progress) ?? false;
+    }
+
+    /**
+     * Enables or disables loop mode for a named animation.
+     * @public
+     * @param {string} name - The name of the animation to configure.
+     * @param {boolean} loop - True to enable looping; false to disable.
+     * @returns {boolean} True if the animation was found and loop mode was set; otherwise false.
+     */
+    setAnimationLoop(name, loop) {
+        return this.#babylonJSAnimationController?.setAnimationLoop(name, loop) ?? false;
+    }
+
+    /**
+     * Configures the highlight settings for animated nodes on hover.
+     * @private
+     * @param {{enabled?: boolean, color?: string}} config - Configuration object.
+     * @returns {void}
+     */
+    #setHighlightConfig(config = {}) {
+        if (this.#babylonJSAnimationController && typeof this.#babylonJSAnimationController.setHighlightConfig === "function") {
+            this.#babylonJSAnimationController.setHighlightConfig(config);
+            this.#requestRender({ frames: 2 });
+        }
+    }
 }

package/src/localization/translations.js

@@ -29,6 +29,14 @@ export const translations = {
                         label: "Shadows",
                         helper: "Enables shadows.",
                     },
+                    highlightEnabled: {
+                        label: "Highlight",
+                        helper: "Highlight animated elements on hover.",
+                    },
+                    highlightColor: {
+                        label: "Highlight Color",
+                        helper: "Color for hover highlight on animations.",
+                    },
                 },
             },
             downloadDialog: {
@@ -79,6 +87,14 @@ export const translations = {
                         label: "Sombras",
                         helper: "Activa sombras.",
                     },
+                    highlightEnabled: {
+                        label: "Resaltado",
+                        helper: "Resaltar elementos animados al pasar el ratón.",
+                    },
+                    highlightColor: {
+                        label: "Color de resaltado",
+                        helper: "Color del resaltado al pasar sobre animaciones.",
+                    },
                 },
             },
             downloadDialog: {

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

@@ -97,7 +97,7 @@ export default class PrefViewer3D extends HTMLElement {
      * @returns {string[]} Array of attribute names that trigger attributeChangedCallback.
      */
     static get observedAttributes() {
-        return ["show-model", "show-scene", "visible"];
+        return ["show-model", "show-scene", "visible", "show-animation-menu", "highlight-color", "highlight-enabled"];
     }
 
     /**
@@ -137,6 +137,18 @@ export default class PrefViewer3D extends HTMLElement {
                     this.hide();
                 }
                 break;
+            case "show-animation-menu":
+            case "highlight-color":
+            case "highlight-enabled":
+                // Pass these to BabylonJSController if initialized
+                if (this.#babylonJSController && typeof this.#babylonJSController.setIlluminationConfig === "function") {
+                    this.#babylonJSController.setIlluminationConfig({
+                        showAnimationMenu: this.getAttribute("show-animation-menu"),
+                        highlightColor: this.getAttribute("highlight-color"),
+                        highlightEnabled: this.getAttribute("highlight-enabled"),
+                    });
+                }
+                break;
         }
     }
 
@@ -229,6 +241,16 @@ export default class PrefViewer3D extends HTMLElement {
     #initializeBabylonJS() {
         this.#babylonJSController = new BabylonJSController(this.#canvas, this.#data.containers, this.#data.options);
         this.#babylonJSController.enable();
+
+        // Apply highlight attributes that were set before the controller was ready
+        const highlightColor = this.getAttribute("highlight-color");
+        const highlightEnabled = this.getAttribute("highlight-enabled");
+        if (highlightColor !== null || highlightEnabled !== null) {
+            this.#babylonJSController.setIlluminationConfig({
+                highlightColor: highlightColor ?? undefined,
+                highlightEnabled: highlightEnabled ?? undefined,
+            });
+        }
     }
 
     /**
@@ -594,6 +616,11 @@ export default class PrefViewer3D extends HTMLElement {
 
         const loadDetail = await this.#babylonJSController.load(forceReload);
 
+        // Apply initial render settings if provided in options
+        if (config.options?.render) {
+            await this.applyRenderSettings(config.options.render);
+        }
+
         return { ...loadDetail, load: this.#onLoaded() };
     }
 
@@ -622,6 +649,12 @@ export default class PrefViewer3D extends HTMLElement {
         if (needUpdateIBL) {
             someSetted = someSetted || (await this.#babylonJSController.setIBLOptions());
         }
+        
+        // Apply render settings if provided
+        if (options.render) {
+            await this.applyRenderSettings(options.render);
+        }
+        
         const detail = this.#onSetOptions();
         return { success: someSetted, detail: detail };
     }
@@ -794,6 +827,48 @@ export default class PrefViewer3D extends HTMLElement {
         return this.#babylonJSController.getRenderSettings();
     }
 
+    /**
+     * Returns a snapshot of all available animations and their current state.
+     * @public
+     * @returns {Array<{name: string, state: number, progress: number, loop: boolean, nodes: string[]}>}
+     */
+    getAnimations() {
+        return this.#babylonJSController?.getAnimations() ?? [];
+    }
+
+    /**
+     * Controls a named animation by applying the specified action.
+     * @public
+     * @param {string} name - The name of the animation to control.
+     * @param {"open"|"close"|"pause"|"goToOpened"|"goToClosed"} action - The action to apply.
+     * @returns {boolean} True if the animation was found and the action was applied; otherwise false.
+     */
+    playAnimation(name, action) {
+        return this.#babylonJSController?.playAnimation(name, action) ?? false;
+    }
+
+    /**
+     * Seeks a named animation to the given normalized progress position (0–1).
+     * @public
+     * @param {string} name - The name of the animation to seek.
+     * @param {number} progress - Progress value between 0 and 1.
+     * @returns {boolean} True if the animation was found and seeked; otherwise false.
+     */
+    setAnimationProgress(name, progress) {
+        return this.#babylonJSController?.setAnimationProgress(name, progress) ?? false;
+    }
+
+    /**
+     * Enables or disables loop mode for a named animation.
+     * @public
+     * @param {string} name - The name of the animation to configure.
+     * @param {boolean} loop - True to enable looping; false to disable.
+     * @returns {boolean} True if the animation was found and loop mode was set; otherwise false.
+     */
+    setAnimationLoop(name, loop) {
+        return this.#babylonJSController?.setAnimationLoop(name, loop) ?? false;
+    }
+
     /**
      * Reports whether an IBL environment map is currently available.
      * @public
@@ -821,7 +896,22 @@ export default class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return { changed: false, success: false };
         }
-        const scheduled = this.#babylonJSController.scheduleRenderSettingsReload(settings);
+
+        // Handle highlight settings separately for immediate effect without reload
+        if (settings.highlightEnabled !== undefined || settings.highlightColor !== undefined) {
+            if (typeof this.#babylonJSController.setIlluminationConfig === "function") {
+                // Convert string "false" to boolean false
+                const highlightEnabled = settings.highlightEnabled === "false" ? false : settings.highlightEnabled;
+                this.#babylonJSController.setIlluminationConfig({
+                    highlightEnabled: highlightEnabled,
+                    highlightColor: settings.highlightColor,
+                });
+            }
+        }
+
+        // Exclude highlight settings from the reload — they are handled above without requiring a scene reload
+        const { highlightEnabled: _he, highlightColor: _hc, ...reloadSettings } = settings;
+        const scheduled = this.#babylonJSController.scheduleRenderSettingsReload(reloadSettings);
         if (!scheduled.changed) {
             return { changed: false, success: true };
         }

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

@@ -31,6 +31,9 @@ import { DEFAULT_LOCALE, resolveLocale, translate } from "./localization/i18n.js
 export default class PrefViewerMenu3D extends HTMLElement {
     #elements = {
         applyButton: null,
+        colorPicker: null,
+        colorSlider: null,
+        colorPickerPreview: null,
         panel: null,
         pendingLabel: null,
         status: null,
@@ -44,6 +47,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
 
     #handles = {
         onApplyClick: null,
+        onColorSliderInput: null,
         onHostLeave: null,
         onPanelEnter: null,
         onSwitchChange: null,
@@ -51,7 +55,10 @@ export default class PrefViewerMenu3D extends HTMLElement {
     };
 
     #DEFAULT_RENDER_SETTINGS = { ...BabylonJSController.DEFAULT_RENDER_SETTINGS };
-    #MENU_SWITCHES = Object.keys(this.#DEFAULT_RENDER_SETTINGS);
+    // Only include boolean settings as switches (exclude illuminationColor which is handled by color picker)
+    #MENU_SWITCHES = Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter(key => 
+        typeof this.#DEFAULT_RENDER_SETTINGS[key] === "boolean"
+    );
     #appliedSettings = { ...this.#DEFAULT_RENDER_SETTINGS };
     #draftSettings = { ...this.#DEFAULT_RENDER_SETTINGS };
     #switchAvailability = {};
@@ -72,7 +79,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @returns {string[]} Array of attribute names to observe.
      */
     static get observedAttributes() {
-        return ["culture"];
+        return ["culture", "show-illumination", "illumination-color"];
     }
     
     /**
@@ -86,6 +93,20 @@ export default class PrefViewerMenu3D extends HTMLElement {
     attributeChangedCallback(name, _old, value) {
         if (name === "culture") {
             this.#setCultureInternal(value || DEFAULT_LOCALE);
+        } else if (name === "show-illumination" || name === "illumination-color") {
+            // Update draft settings when attributes change
+            if (name === "show-illumination") {
+                this.#draftSettings.illuminationEnabled = value === "true" || value === true;
+                // Update the corresponding switch if it exists
+                const switchEl = this.#elements.switches?.illuminationEnabled;
+                if (switchEl) {
+                    switchEl.checked = this.#draftSettings.illuminationEnabled;
+                }
+            } else if (name === "illumination-color") {
+                this.#draftSettings.illuminationColor = value;
+                // Update color picker preview if exists
+                this.#updateColorPickerPreview(value);
+            }
         }
     }
 
@@ -139,10 +160,16 @@ export default class PrefViewerMenu3D extends HTMLElement {
                 <div class="menu-switches">
                     ${this.#MENU_SWITCHES.map((key) => this.#renderSwitchRow(key, this.#texts)).join("")}
                 </div>
+                <div class="menu-color-picker" data-setting="highlightColor">
+                    <div class="color-slider-row">
+                        <span class="color-picker-label">${this.#texts.switches?.highlightColor?.label || "Highlight Color"}</span>
+                        <span class="color-preview" style="background-color: ${this.#draftSettings.highlightColor || '#ff6700'}"></span>
+                    </div>
+                    <input type="range" class="color-slider" min="0" max="359" value="${PrefViewerMenu3D.#hexToHue(this.#draftSettings.highlightColor || '#ff6700')}">
+                </div>
                 <div class="menu-footer">
                     <span class="menu-pending" aria-live="polite">${this.#texts.pendingLabel}</span>
                     <span class="menu-status" aria-live="assertive"></span>
-                    <button class="menu-apply" type="button" disabled>${this.#texts.actions.apply}</button>
                 </div>
             </div>
         `;
@@ -271,6 +298,12 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#elements.applyButton = this.querySelector(".menu-apply");
         this.#elements.pendingLabel = this.querySelector(".menu-pending");
         this.#elements.status = this.querySelector(".menu-status");
+        
+        // Cache color picker elements
+        this.#elements.colorPicker = this.querySelector(".menu-color-picker");
+        this.#elements.colorSlider = this.querySelector(".color-slider");
+        this.#elements.colorPickerPreview = this.querySelector(".color-preview");
+        
         this.#MENU_SWITCHES.forEach((key) => {
             this.#elements.switches[key] = this.querySelector(`input[data-setting="${key}"]`);
             const wrapper = this.querySelector(`.menu-switch[data-setting="${key}"]`);
@@ -301,13 +334,15 @@ 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.#elements.toggleButton.addEventListener("mouseenter", this.#handles.onToggleEnter);
         this.#elements.toggleButton.addEventListener("focus", this.#handles.onToggleEnter);
         this.#elements.panel.addEventListener("mouseenter", this.#handles.onPanelEnter);
         this.addEventListener("mouseleave", this.#handles.onHostLeave);
         Object.values(this.#elements.switches).forEach((input) => input?.addEventListener("change", this.#handles.onSwitchChange));
-        this.#elements.applyButton.addEventListener("click", this.#handles.onApplyClick);
+        this.#elements.applyButton?.addEventListener("click", this.#handles.onApplyClick);
+        this.#elements.colorSlider?.addEventListener("input", this.#handles.onColorSliderInput);
     }
 
     /**
@@ -325,6 +360,8 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.removeEventListener("mouseleave", this.#handles.onHostLeave);
         Object.values(this.#elements.switches).forEach((input) => input?.removeEventListener("change", this.#handles.onSwitchChange));
         this.#elements.applyButton?.removeEventListener("click", this.#handles.onApplyClick);
+        
+        this.#elements.colorSlider?.removeEventListener("input", this.#handles.onColorSliderInput);
     }
 
     /**
@@ -364,6 +401,77 @@ export default class PrefViewerMenu3D extends HTMLElement {
         }
         this.#draftSettings[key] = event.currentTarget.checked;
         this.#updatePendingState();
+
+        // For highlight toggle, apply immediately without waiting for user to click Apply
+        if (key === "highlightEnabled") {
+            this.#emitApply(true);
+        }
+    }
+
+    /**
+     * Handles clicks on the color picker buttons.
+     * @private
+     * @param {Event} event - Click event.
+     * @returns {void}
+     */
+    #handleColorSliderInput(event) {
+        const hue = parseInt(event.target.value, 10);
+        const color = PrefViewerMenu3D.#hueToHex(hue);
+        this.#draftSettings.highlightColor = color;
+        this.#updateColorPickerPreview(color);
+        this.#updatePendingState();
+        this.#emitApply(true);
+    }
+
+    static #hueToHex(hue) {
+        const h = ((hue % 360) + 360) % 360;
+        const a = Math.min(0.5, 1 - 0.5);
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            return 0.5 - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        };
+        return '#' + [f(0), f(8), f(4)].map((v) => Math.round(v * 255).toString(16).padStart(2, '0')).join('');
+    }
+
+    static #hexToHue(hex) {
+        if (!hex || hex.length < 7) return 24;
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        if (max === min) return 0;
+        const d = max - min;
+        const h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+        return Math.round(h * 60);
+    }
+
+    /**
+     * Updates the color picker UI (input value, preview, selected button).
+     * @private
+     * @param {string} color - Selected color.
+     * @returns {void}
+     */
+    #updateColorPickerUI(color) {
+        this.#updateColorPickerPreview(color);
+        if (this.#elements.colorSlider) {
+            const hue = PrefViewerMenu3D.#hexToHue(color);
+            // Only update slider position if not actively focused (user dragging)
+            if (document.activeElement !== this.#elements.colorSlider) {
+                this.#elements.colorSlider.value = hue;
+            }
+        }
+    }
+
+    /**
+     * Updates the color preview element.
+     * @private
+     * @param {string} color - Color to preview.
+     * @returns {void}
+     */
+    #updateColorPickerPreview(color) {
+        if (this.#elements.colorPickerPreview) {
+            this.#elements.colorPickerPreview.style.backgroundColor = color;
+        }
     }
 
     /**
@@ -371,8 +479,9 @@ export default class PrefViewerMenu3D extends HTMLElement {
      * @private
      * @returns {void}
      */
-    #emitApply() {
-        if (this.#isApplying || !this.#hasPendingChanges()) {
+    #emitApply(force = false) {
+        // For illumination/color changes, we apply immediately regardless of pending state
+        if (!force && this.#isApplying) {
             return;
         }
 
@@ -554,6 +663,16 @@ export default class PrefViewerMenu3D extends HTMLElement {
         this.#draftSettings = { ...this.#appliedSettings };
         this.#updateSwitches();
         this.#updatePendingState();
+        
+        // Sync color slider with current highlightColor
+        if (this.#draftSettings.highlightColor) {
+            this.#updateColorPickerUI(this.#draftSettings.highlightColor);
+        }
+        // Update illumination color picker if present
+        if (this.#draftSettings.illuminationColor) {
+            this.#updateColorPickerUI(this.#draftSettings.illuminationColor);
+        }
+        
         this.setApplying(false);
         this.#setStatusMessage("");
     }

package/src/pref-viewer.js

@@ -106,7 +106,7 @@ export default class PrefViewer extends HTMLElement {
      * @returns {string[]} Array of attribute names to observe.
      */
     static get observedAttributes() {
-        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene"];
+        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene", "show-menu", "accent-color", "show-animation-menu", "highlight-color", "highlight-enabled"];
     }
 
     /**
@@ -174,6 +174,17 @@ export default class PrefViewer extends HTMLElement {
                 const showScene = value.toLowerCase() === "true";
                 showScene ? this.showScene() : this.hideScene();
                 break;
+            case "show-menu":
+                // Recreate menu to apply show/hide setting
+                this.#createMenu3D();
+                break;
+            case "accent-color":
+            case "show-animation-menu":
+            case "highlight-color":
+            case "highlight-enabled":
+                // Pass these attributes to the 3D component and menu
+                this.#updateComponentAttributes(name, value);
+                break;
         }
     }
 
@@ -256,6 +267,15 @@ export default class PrefViewer extends HTMLElement {
     #createComponent3D() {
         this.#component3D = document.createElement("pref-viewer-3d");
         this.#component3D.setAttribute("visible", "false");
+        
+        // Pass new configuration attributes to 3D component
+        const newAttrs = ["show-animation-menu", "highlight-color", "highlight-enabled"];
+        for (const attr of newAttrs) {
+            if (this.hasAttribute(attr)) {
+                this.#component3D.setAttribute(attr, this.getAttribute(attr));
+            }
+        }
+        
         this.#handlers.on3DSceneLoaded = () => {
             this.#menu3DSyncSettings();
             this.#menu3D?.setApplying(false);
@@ -271,6 +291,7 @@ export default class PrefViewer extends HTMLElement {
     /**
      * Creates (or recreates) the PrefViewerMenu3D element, wires hover/apply handlers, and syncs it with the 3D component.
      * When a menu already exists it is removed so the DOM stays clean.
+     * Respects the "show-menu" attribute to determine if menu should be visible.
      * @private
      * @returns {void}
      */
@@ -282,6 +303,16 @@ export default class PrefViewer extends HTMLElement {
             this.#menu3D.removeEventListener("pref-viewer-menu-3d-apply", this.#handlers.onMenuApply);
             this.#menu3D.remove();
         }
+        
+        // Check if menu should be shown (default: true if not specified)
+        const showMenuAttr = this.getAttribute("show-menu");
+        const showMenu = showMenuAttr === null || showMenuAttr === "true";
+        
+        if (!showMenu) {
+            this.#menu3D = null;
+            return;
+        }
+        
         this.#menu3D = document.createElement("pref-viewer-menu-3d");
         if (typeof this.#menu3D.setCulture === "function") {
             this.#menu3D.setCulture(this.#culture);
@@ -289,6 +320,14 @@ export default class PrefViewer extends HTMLElement {
             this.#menu3D.setAttribute("culture", this.#culture);
         }
 
+        // Pass illumination-related attributes to menu
+        const illumAttrs = ["show-illumination", "illumination-color"];
+        for (const attr of illumAttrs) {
+            if (this.hasAttribute(attr)) {
+                this.#menu3D.setAttribute(attr, this.getAttribute(attr));
+            }
+        }
+
         if (!this.#handlers.onMenuApply) {
             this.#handlers.onMenuApply = this.#onMenuApply.bind(this);
         }
@@ -305,6 +344,33 @@ export default class PrefViewer extends HTMLElement {
         this.#menu3DUpdateAvailability();
     }
 
+    /**
+     * Updates attributes on child components (3D viewer and menu) based on parent attributes.
+     * @private
+     * @param {string} name - Attribute name.
+     * @param {*} value - Attribute value.
+     * @returns {void}
+     */
+    #updateComponentAttributes(name, value) {
+        // Pass to 3D component
+        if (this.#component3D) {
+            if (value === null) {
+                this.#component3D.removeAttribute(name);
+            } else {
+                this.#component3D.setAttribute(name, value);
+            }
+        }
+        
+        // Pass to menu
+        if (this.#menu3D) {
+            if (value === null) {
+                this.#menu3D.removeAttribute(name);
+            } else {
+                this.#menu3D.setAttribute(name, value);
+            }
+        }
+    }
+
     /**
      * Reads the last persisted locale from localStorage so the viewer restores user preference.
      * @private
@@ -1243,6 +1309,48 @@ export default class PrefViewer extends HTMLElement {
         this.#component2D.zoomOut();
     }
 
+    /**
+     * Returns a snapshot of all available animations and their current state.
+     * @public
+     * @returns {Array<{name: string, state: number, progress: number, loop: boolean, nodes: string[]}>}
+     */
+    getAnimations() {
+        return this.#component3D?.getAnimations() ?? [];
+    }
+
+    /**
+     * Controls a named animation by applying the specified action.
+     * @public
+     * @param {string} name - The name of the animation to control.
+     * @param {"open"|"close"|"pause"|"goToOpened"|"goToClosed"} action - The action to apply.
+     * @returns {boolean} True if the animation was found and the action was applied; otherwise false.
+     */
+    playAnimation(name, action) {
+        return this.#component3D?.playAnimation(name, action) ?? false;
+    }
+
+    /**
+     * Seeks a named animation to the given normalized progress position (0–1).
+     * @public
+     * @param {string} name - The name of the animation to seek.
+     * @param {number} progress - Progress value between 0 and 1.
+     * @returns {boolean} True if the animation was found and seeked; otherwise false.
+     */
+    setAnimationProgress(name, progress) {
+        return this.#component3D?.setAnimationProgress(name, progress) ?? false;
+    }
+
+    /**
+     * Enables or disables loop mode for a named animation.
+     * @public
+     * @param {string} name - The name of the animation to configure.
+     * @param {boolean} loop - True to enable looping; false to disable.
+     * @returns {boolean} True if the animation was found and loop mode was set; otherwise false.
+     */
+    setAnimationLoop(name, loop) {
+        return this.#component3D?.setAnimationLoop(name, loop) ?? false;
+    }
+
     /**
      * ---------------------------
      * Public properties (setters)
@@ -1321,6 +1429,25 @@ export default class PrefViewer extends HTMLElement {
         this.loadScene(value);
     }
 
+    /**
+     * Enables or disables the hover highlight effect at runtime.
+     * Accepts boolean or string "true"/"false".
+     * @public
+     * @param {boolean|string} value
+     */
+    set highlightEnabled(value) {
+        this.setAttribute("highlight-enabled", String(value));
+    }
+
+    /**
+     * Sets the hover highlight color at runtime.
+     * @public
+     * @param {string} value - Hex color string, e.g. "#ff6700".
+     */
+    set highlightColor(value) {
+        this.setAttribute("highlight-color", value);
+    }
+
     /**
      * ---------------------------
      * Public properties (getters)

package/src/styles.js

@@ -1,8 +1,24 @@
 export const PrefViewerStyleVariables = {
-    colorPrimary: "#ff6700", // Always specify in hexadecimal
+    colorPrimary: "#ff6700", // Default accent color - can be overridden via attribute
     fontFamily: "'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
 };
 
+// Default palette colors for illumination color picker
+export const DEFAULT_ILLUMINATION_PALETTE = [
+    "#ffffff", // White
+    "#ff6700", // Orange (default)
+    "#ff0000", // Red
+    "#00ff00", // Green
+    "#0000ff", // Blue
+    "#ffff00", // Yellow
+    "#ff00ff", // Magenta
+    "#00ffff", // Cyan
+    "#ffb6c1", // Light Pink
+    "#98fb98", // Light Green
+    "#87ceeb", // Light Blue
+    "#dda0dd", // Plum
+];
+
 export const PrefViewerStyles = `
     :host .pref-viewer-wrapper {
         display: grid !important;
@@ -67,6 +83,10 @@ export const PrefViewer3DStyles = `
         display: none;
     }
 
+    pref-viewer-3d[show-animation-menu="false"] > div.animation-menu {
+        display: none;
+    }
+
     pref-viewer-3d {
         grid-column: 1;
         grid-row: 1;
@@ -181,6 +201,8 @@ export const PrefViewerMenu3DStyles = `
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel {
         width: var(--panel-width);
+        max-height: 70vh;
+        overflow-y: auto;
         border-radius: var(--panel-radius);
         background: var(--panel-bg-color);
         border: 1px solid var(--panel-border-color);
@@ -386,6 +408,80 @@ export const PrefViewerMenu3DStyles = `
     pref-viewer-menu-3d[data-applying]>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
         opacity: 0.75;
     }
+
+    /* Color Slider Styles */
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker {
+        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-color-picker:last-child {
+        border-bottom: none;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-picker-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-color-picker>.color-slider-row>.color-preview {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        flex-shrink: 0;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        background: linear-gradient(to right,
+            hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
+            hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
+            hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
+            hsl(360,100%,50%));
+        outline: none;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: white;
+        border: 2px solid rgba(0, 0, 0, 0.25);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: white;
+        border: 2px solid rgba(0, 0, 0, 0.25);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+    }
+
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker[data-disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
 `;
 
 export const PrefViewer3DAnimationMenuStyles = `