@preference-sl/pref-viewer 2.16.2-beta.1 → 2.17.0-beta.0

package/src/localization/translations.js

@@ -1,6 +1,15 @@
 export const translations = {
     "en-EN": {
         prefViewer: {
+            viewCube: {
+                title: "View orientation",
+                front: "Inner",
+                back: "Outer",
+                top: "Top",
+                bottom: "Bottom",
+                left: "Left",
+                right: "Right"
+            },
             menu3d: {
                 title: "3D render settings",
                 subtitle: "Modify the visual effects.",
@@ -62,6 +71,15 @@ export const translations = {
     },
     "es-ES": {
         prefViewer: {
+            viewCube: {
+                title: "Orientación de vista",
+                front: "Interior",
+                back: "Exterior",
+                top: "Arriba",
+                bottom: "Abajo",
+                left: "Izquierda",
+                right: "Derecha"
+            },
             menu3d: {
                 title: "Ajustes de render 3D",
                 subtitle: "Modifica los efectos visuales.",

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

@@ -25,6 +25,7 @@ import FileStorage from "./file-storage.js";
  *  - show-model: Show or hide the 3D model ("true"/"false").
  *  - show-scene: Show or hide the 3D environment ("true"/"false").
  *  - visible: Show or hide the entire viewer ("true"/"false").
+ *  - show-view-cube: Enable the orientation overlay while visible; only "false" disables it (default: enabled).
  *
  * Public Methods:
  *  - show(): Shows the 3D viewer component.
@@ -39,6 +40,7 @@ import FileStorage from "./file-storage.js";
  *  - hideEnvironment(): Hides the 3D environment/scene.
  *  - isIBLAvailable(): Reports whether a valid IBL environment map is currently available.
  *  - isAnimationMenuEnabled(): Reports whether the animation control menu is currently enabled.
+ *  - refreshViewCube(): Internally synchronizes an existing cube after a host culture change.
  *  - getDebugInfo(): Returns a diagnostic snapshot of the underlying Babylon.js runtime.
  *  - getAnimations(): Returns a snapshot of all available animations and their current state.
  *  - playAnimation(name, action): Controls a named animation by applying the specified action.
@@ -69,6 +71,7 @@ import FileStorage from "./file-storage.js";
  *  - #onLoading/#onLoaded/#onSettingOptions/#onSetOptions(): Dispatch lifecycle events and synchronize attributes.
  *
  * Events:
+ *  - "view-cube-layout": Internal, non-bubbling event with {offset, height} in CSS pixels for host menu layout; disposal clears both.
  *  - "pref-viewer-3d-loading": Dispatched when a loading operation starts. Legacy alias: "scene-loading".
  *  - "pref-viewer-3d-loaded": Dispatched when a loading operation completes. Legacy alias: "scene-loaded".
  *  - "pref-viewer-3d-options-applying": Dispatched when viewer options are being set. Legacy alias: "scene-setting-options".
@@ -107,7 +110,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-view-cube"];
     }
 
     /**
@@ -120,9 +123,13 @@ export default class PrefViewer3D extends HTMLElement {
      * - "show-model": shows or hides the model according to the attribute value ("true"/"false").
      * - "show-scene": shows or hides the scene according to the attribute value ("true"/"false").
      * - "visible": shows or hides the component according to the attribute value ("true"/"false").
+     * - "show-view-cube": activates the cube only while visible and the attribute is not "false".
      */
     attributeChangedCallback(name, _old, value) {
         switch (name) {
+            case "show-view-cube":
+                this.#babylonJSController?.setViewCubeEnabled(this.#isVisible && value !== "false");
+                break;
             case "show-model":
                 if (_old === value) {
                     return;
@@ -237,12 +244,18 @@ export default class PrefViewer3D extends HTMLElement {
     }
 
     /**
-     * Initializes the BabylonJSController and enables the Babylon.js engine for rendering.
+     * Initializes the Babylon controller with asset/option state and the visibility-aware cube contract.
+     * Supplies current host culture and dispatches measured view-cube-layout events for render-menu positioning.
+     * Starts asynchronous engine initialization without waiting for asset loading.
      * @private
      * @returns {void}
      */
     #initializeBabylonJS() {
-        this.#babylonJSController = new BabylonJSController(this.#canvas, this.#data.containers, this.#data.options);
+        this.#babylonJSController = new BabylonJSController(this.#canvas, this.#data.containers, this.#data.options, {
+            enabled: this.#isVisible && this.getAttribute("show-view-cube") !== "false",
+            getCulture: () => this.getRootNode().host?.culture,
+            onLayout: (offset, height) => this.dispatchEvent(new CustomEvent("view-cube-layout", { detail: { offset, height } })),
+        });
         this.#babylonJSController.enable();
 
     }
@@ -608,22 +621,24 @@ export default class PrefViewer3D extends HTMLElement {
      */
 
     /**
-     * Hides the 3D viewer component by updating its visibility state and DOM attribute.
+     * Hides the 3D viewer and releases its cube resources while retaining the requested show-view-cube attribute.
      * @public
      * @returns {void}
      */
     hide() {
         this.#isVisible = false;
+        this.#babylonJSController?.setViewCubeEnabled(false);
         this.setAttribute("visible", "false");
     }
 
     /**
-     * Shows the 3D viewer component by updating its visibility state and DOM attribute.
+     * Shows/focuses the 3D viewer and lazily recreates its cube when show-view-cube is not "false".
      * @public
      * @returns {void}
      */
     show() {
         this.#isVisible = true;
+        this.#babylonJSController?.setViewCubeEnabled(this.getAttribute("show-view-cube") !== "false");
         this.setAttribute("visible", "true");
         this.#canvas.focus();
     }
@@ -900,6 +915,15 @@ export default class PrefViewer3D extends HTMLElement {
         return this.#babylonJSController.getRenderSettings();
     }
 
+    /**
+     * Forwards an internal culture/camera refresh to the existing overlay without activating a disabled cube.
+     * @public
+     * @returns {void}
+     */
+    refreshViewCube() {
+        this.#babylonJSController?.refreshViewCube();
+    }
+
     /**
      * Returns a snapshot of all available animations and their current state.
      * @public

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

@@ -61,7 +61,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
         onToggleEnter: null,
     };
 
-    #DEFAULT_RENDER_SETTINGS = { ...BabylonJSController.DEFAULT_RENDER_SETTINGS };
+    #DEFAULT_RENDER_SETTINGS = { ...BabylonJSController.config.render.defaultSettings };
     // Only include boolean settings as switches; scalar settings are handled by sliders.
     #MENU_SWITCHES = Object.keys(this.#DEFAULT_RENDER_SETTINGS).filter(key => 
         typeof this.#DEFAULT_RENDER_SETTINGS[key] === "boolean"
@@ -194,7 +194,7 @@ export default class PrefViewerMenu3D extends HTMLElement {
     /**
      * Generates the HTML fragment for a single boolean render-setting switch.
      * @private
-     * @param {string} key - Render setting key from BabylonJSController.DEFAULT_RENDER_SETTINGS.
+     * @param {string} key - Render setting key from BabylonJSController.config.render.defaultSettings.
      * @param {Record<string, {label?: string, helper?: string}>} copy - Locale-aware feature copy used for labels.
      * @returns {string} HTML string representing the switch row.
      */

package/src/pref-viewer.js

@@ -23,13 +23,14 @@ import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./l
  *  - Listen for `pref-viewer-initialized`, `pref-viewer-loading`, `pref-viewer-loaded`, `pref-viewer-error`, `pref-viewer-3d-loaded`, `pref-viewer-2d-loaded`, and `pref-viewer-2d-viewport-changed` to integrate with surrounding UX.
  *
  * Reactive Attributes:
- *  - config: Configuration descriptor that can bundle model/scene/materials/drawing/culture hints.
+ *  - config: Configuration descriptor with assets, culture/styles and optional boolean showRenderMenu/showViewCube flags.
  *  - model / scene / materials / drawing: Independent asset entry points (URLs, Base64, indexed data) for each subsystem.
  *  - options: JSON describing render toggles (AA, SSAO, IBL, shadows), animation menu, highlight, lighting, and misc viewer knobs.
  *  - culture: Locale identifier (RFC-5646 style) that resolves against `SUPPORTED_LOCALES` before applying.
  *  - mode: Switches between `2d` and `3d`, automatically hiding/showing the relevant subcomponents and menu states.
  *  - show-model / show-scene: Boolean flags to toggle visibility without reloading the underlying resources.
  *  - show-render-menu: Boolean flag to show or hide the render-settings menu (default: true).
+ *  - show-view-cube: Enables the 3D orientation overlay unless "false"; visible cubes position the render menu below their measured height.
  *  - styles: JSON style overrides. Currently supports `colorPrimary`, persisted in localStorage and exposed as `--pref-viewer-color-primary`.
  *
  * Public Methods (selection):
@@ -66,6 +67,7 @@ import { DEFAULT_LOCALE, resolveLocale, setLocale, SUPPORTED_LOCALES } from "./l
  *  - Legacy `scene-*` and `drawing-*` aliases are still emitted alongside their modern equivalents for backward compatibility.
  *
  * Notes:
+ *  - Stores the cube layout handler and subscribes only for active 3D cube layout; open dialogs render above viewer overlays.
  *  - Internally wires PrefViewerMenu3D hover/apply events to PrefViewer3D render settings, ensuring persisted toggles stay in sync with BabylonJSController.
  *  - Cleans up dialogs, listeners, and subcomponents on disconnect to prevent leaks when frameworks mount/unmount the custom element.
  *  - Uses localStorage-backed culture persistence and attribute reflection safeguards to keep templates, menu, and global i18n aligned.
@@ -120,6 +122,7 @@ export default class PrefViewer extends HTMLElement {
         onViewerHoverEnd: null,
         on3DSceneLoaded: null,
         on3DSceneError: null,
+        onViewCubeLayout: null,
     };
 
     /**
@@ -146,21 +149,26 @@ 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", "show-render-menu", "styles"];
+        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene", "show-render-menu", "show-view-cube", "styles"];
     }
 
     /**
      * Observes changes to specific attributes and triggers corresponding actions.
      * Loads configuration, drawing, model, scene, materials, or options when their attributes change.
      * Toggles model or scene visibility when "show-model" or "show-scene" attributes change, recreates the 3D menu when "show-render-menu" changes, and queues style overrides when "styles" changes.
+     * "show-view-cube" synchronizes lazy cube activation and conditional layout subscription before forwarding the attribute.
      * @public
      * @param {string} name - The name of the changed attribute.
-     * @param {*} _old - The previous value of the attribute (unused).
-     * @param {*} value - The new value of the attribute.
+     * @param {string|null} _old - The previous attribute value.
+     * @param {string|null} value - The new attribute value; null when removed.
      * @returns {void}
      */
     attributeChangedCallback(name, _old, value) {
         switch (name) {
+            case "show-view-cube":
+                this.#setViewCubeLayoutSubscription(this.#mode === "3d" && value !== "false");
+                this.#component3D?.setAttribute("show-view-cube", value === "false" ? "false" : "true");
+                break;
             case "config":
                 this.loadConfig(value);
                 break;
@@ -227,6 +235,7 @@ export default class PrefViewer extends HTMLElement {
     /**
      * Called when the element is inserted into the DOM.
      * Initializes the 3D and 2D viewer components and starts processing tasks.
+     * Restores the primary animation-highlight color after creating the 3D component and menu.
      * @public
      * @returns {void|boolean} Returns false if initialization fails; otherwise void.
      */
@@ -236,6 +245,7 @@ export default class PrefViewer extends HTMLElement {
         this.#createComponent3D();
         this.#createComponent2D();
         this.#createMenu3D();
+        this.#applyRenderSettings({ highlightColor: this.#styles.colorPrimary, persist: false });
 
         this.setMode(this.getAttribute("mode") ?? this.#mode);
 
@@ -252,7 +262,8 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Called when the element is removed from the DOM.
+     * Removes stored child/menu/dialog listeners and subcomponents when detached.
+     * Unsubscribes the cube layout handler before the 3D component and its overlay are torn down.
      * @public
      * @returns {void}
      */
@@ -272,6 +283,7 @@ export default class PrefViewer extends HTMLElement {
         if (this.#component3D) {
             this.#component3D.removeEventListener("pref-viewer-3d-loaded", this.#handlers.on3DSceneLoaded);
             this.#component3D.removeEventListener("pref-viewer-3d-error", this.#handlers.on3DSceneError);
+            this.#component3D.removeEventListener("view-cube-layout", this.#handlers.onViewCubeLayout);
             this.#component3D.remove();
         }
         if (this.#menu3D) {
@@ -302,8 +314,7 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Creates and appends the 2D viewer component to the shadow DOM.
-     * Sets the "visible" attribute to true by default.
+     * Creates and appends the 2D viewer component, initially hidden, to the shadow DOM.
      * @private
      * @returns {void}
      */
@@ -318,14 +329,44 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Creates and appends the 3D viewer component to the shadow DOM.
-     * Sets the "visible" attribute to true by default.
+     * Subscribes before cube activation so its first layout is received.
+     * Removes the subscription and menu overrides when the cube is inactive or the mode is 2D.
+     * @private
+     * @param {boolean} enabled - Whether cube layout updates are needed.
+     * @returns {void}
+     */
+    #setViewCubeLayoutSubscription(enabled) {
+        if (!this.#component3D || !this.#handlers.onViewCubeLayout) {
+            return;
+        }
+        this.#component3D.removeEventListener("view-cube-layout", this.#handlers.onViewCubeLayout);
+        if (enabled) {
+            this.#component3D.addEventListener("view-cube-layout", this.#handlers.onViewCubeLayout);
+        } else {
+            this.#wrapper?.style.removeProperty("--pref-viewer-render-menu-top");
+            this.#wrapper?.style.removeProperty("--pref-viewer-viewport-height");
+        }
+    }
+    /**
+     * Creates and appends the 3D viewer component to the shadow DOM, initially hidden.
+     * Forwards show-view-cube, stores its layout handler in #handlers and subscribes before activation
+     * so the first measured layout positions the render menu correctly.
      * @private
      * @returns {void}
      */
     #createComponent3D() {
         this.#component3D = document.createElement("pref-viewer-3d");
         this.#component3D.setAttribute("visible", "false");
+        this.#component3D.setAttribute("show-view-cube", this.getAttribute("show-view-cube") === "false" ? "false" : "true");
+        this.#handlers.onViewCubeLayout = (event) => {
+            if (event.detail.offset > 0) {
+                this.#wrapper.style.setProperty("--pref-viewer-render-menu-top", `${event.detail.offset}px`);
+            } else {
+                this.#wrapper.style.removeProperty("--pref-viewer-render-menu-top");
+            }
+            this.#wrapper.style.setProperty("--pref-viewer-viewport-height", `${event.detail.height}px`);
+        };
+        this.#setViewCubeLayoutSubscription(this.getAttribute("show-view-cube") !== "false" && (this.getAttribute("mode") ?? this.#mode) === "3d");
 
         this.#handlers.on3DSceneLoaded = () => {
             this.#menu3DSyncSettings();
@@ -609,7 +650,8 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Resolves the requested culture, updates internal/global state, and persists the selection.
+     * Resolves culture, updates internal/global state and menu/cube labels, and persists the selection.
+     * Refreshes only an existing cube; a culture change does not activate an inactive overlay.
      * @private
      * @param {string} [cultureId] - Desired locale to activate.
      * @param {object} [options] - Extra flags for the update.
@@ -635,6 +677,7 @@ export default class PrefViewer extends HTMLElement {
             this.#culture = resolved;
             setLocale(resolved);
             this.#menu3D?.setCulture?.(resolved);
+            this.#component3D?.refreshViewCube?.();
             this.#culturePersist(resolved);
         }
         return changed;
@@ -867,13 +910,24 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Processes a configuration object by loading it into the 3D component.
+     * Applies optional boolean overlay flags through their attributes, then loads the queued 3D configuration.
+     * Explicit flags override the current attributes; omitted/non-boolean values preserve their state.
      * Dispatches loading events and processes the next task when finished.
      * @private
      * @param {object} config - The configuration object to process.
-     * @returns {void}
+     * @param {boolean} [config.showRenderMenu] - Reflects render-menu visibility before loading assets; non-booleans are ignored.
+     * @param {boolean} [config.showViewCube] - Reflects cube activation before loading assets; non-booleans are ignored.
+     * @returns {Promise<void>} Resolves after the load attempt and advances the task queue.
      */
     async #processConfig(config) {
+        for (const [property, attribute] of [["showRenderMenu", "show-render-menu"], ["showViewCube", "show-view-cube"]]) {
+            if (typeof config[property] === "boolean") {
+                const value = String(config[property]);
+                if (this.getAttribute(attribute) !== value) {
+                    this.setAttribute(attribute, value);
+                }
+            }
+        }
         if (!this.#component3D) {
             this.#processNextTask();
             return;
@@ -996,14 +1050,20 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Processes queued style overrides and advances the task queue.
+     * Applies queued styles and synchronizes animation-opening highlight color without reloading assets.
+     * Waits for render settings/menu synchronization before advancing the task queue.
      * @private
      * @param {object} styles - Style overrides to apply.
-     * @returns {void}
+     * @returns {Promise<void>} Resolves after style/highlight synchronization and queue advancement.
      */
-    #processStyles(styles) {
-        this.#applyStyles(styles);
-        this.#processNextTask();
+    async #processStyles(styles) {
+        try {
+            if (this.#applyStyles(styles)) {
+                await this.#applyRenderSettings({ highlightColor: this.#styles.colorPrimary });
+            }
+        } finally {
+            this.#processNextTask();
+        }
     }
 
     /**
@@ -1259,10 +1319,15 @@ export default class PrefViewer extends HTMLElement {
 
     /**
      * Loads a configuration object or JSON string and adds it to the task queue.
-     * If the config contains a drawing, adds a drawing task as well.
+     * Queues supplied styles/culture before the configuration and a supplied drawing afterward.
+     * Boolean showRenderMenu/showViewCube flags apply when that config task is processed, before its 3D load.
+     * Omitted/non-boolean flags preserve current attributes; equal values do not recreate the menu.
      * @public
-     * @param {object|string} config - Configuration object or JSON string.
-     * @returns {boolean|void} Returns false if config is invalid; otherwise void.
+     * @param {object|string} config - Configuration object or JSON string; overlay flags apply in queue order.
+     * @param {boolean} [config.showRenderMenu] - Sets show-render-menu when explicitly boolean.
+     * @param {boolean} [config.showViewCube] - Sets show-view-cube when explicitly boolean.
+     * @returns {false|void} Returns false for an absent/falsy payload; otherwise queues the configuration.
+     * @throws {SyntaxError} If a supplied JSON string cannot be parsed.
      */
     loadConfig(config) {
         config = typeof config === "string" ? JSON.parse(config) : config;
@@ -1357,7 +1422,8 @@ export default class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Sets the viewer mode to "2d" or "3d" and updates component visibility accordingly.
+     * Sets the viewer mode and component/menu visibility; updates the conditional cube layout subscription
+     * before showing 3D or releasing its overlay in 2D.
      * @public
      * @param {string} [mode=this.#mode] - The mode to set ("2d" or "3d").
      * @returns {void}
@@ -1369,6 +1435,7 @@ export default class PrefViewer extends HTMLElement {
             mode = this.#mode;
         }
         this.#mode = mode;
+        this.#setViewCubeLayoutSubscription(mode === "3d" && this.getAttribute("show-view-cube") !== "false");
         if (mode === "2d") {
             this.#component3D?.hide();
             this.#component2D?.show();
@@ -1401,7 +1468,8 @@ export default class PrefViewer extends HTMLElement {
 
     /**
      * Sets supported PrefViewer style variables from an object or JSON string and adds them to the task queue.
-     * Currently supports `colorPrimary`, which updates `PrefViewerStyleVariables.colorPrimary`, applies the host CSS custom property, and persists the value in localStorage.
+     * Currently supports `colorPrimary`, which updates `PrefViewerStyleVariables.colorPrimary`, applies the host CSS custom property,
+     * synchronizes animation-opening highlight color (including active highlights), and persists the value in localStorage.
      * @public
      * @param {object|string} styles - Style overrides object or JSON string.
      * @returns {boolean|void} Returns false if styles are invalid; otherwise void.
@@ -1635,10 +1703,12 @@ export default class PrefViewer extends HTMLElement {
      * @param {string} title - The dialog title to display in the header.
      * @param {string} content - The HTML content to display in the dialog body.
      * @param {string} footer - The HTML content to display in the dialog footer (e.g., action buttons).
-     * @returns {HTMLElement} The created dialog element.
+     * @returns {HTMLElement|null} The dialog element if opening succeeds; otherwise null.
      * @description
      * If a dialog is already open, it is closed before opening the new one.
      * The dialog is appended to the viewer's shadow DOM and returned for further manipulation.
+     * Shared dialog styles place its modal backdrop above the render menu and ViewCube.
+     * Background pointer input is intercepted; backdrop dismissal does not also activate a covered control.
      */
     openDialog(title, content, footer) {
         if (this.#dialog && this.#dialog.hasAttribute("open")) {
@@ -1811,9 +1881,14 @@ export default class PrefViewer extends HTMLElement {
      */
 
     /**
-     * Accepts a config object or JSON string and forwards it to `loadConfig()`.
+     * Accepts a config object or JSON string and forwards it to `loadConfig()` in the existing task queue.
+     * Includes optional boolean showRenderMenu/showViewCube flags with the same precedence and omission rules.
+     * Supplied styles/culture and drawing retain the loadConfig ordering.
      * @public
      * @param {object|string} value - Configuration payload or serialized JSON.
+     * @param {boolean} [value.showRenderMenu] - Optional render-menu visibility for an object payload.
+     * @param {boolean} [value.showViewCube] - Optional cube visibility for an object payload.
+     * @throws {SyntaxError} If a supplied JSON string cannot be parsed.
      */
     set config(value) {
         this.loadConfig(value);

package/src/styles.js

@@ -150,6 +150,94 @@ export const PrefViewer3DStyles = `
     }
 `;
 
+export const PrefViewerViewCubeStyles = `
+    .pref-viewer-view-cube {
+        --cube-fill-color: #eef0f3;
+        --cube-border-color: #78838f;
+        --cube-border-width: 1.0px;
+        --cube-hover-color: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
+        --cube-hover-opacity: 0.50;
+        --cube-active-color: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
+        --cube-active-opacity: 0.15;
+        --cube-text-font-family: ${PrefViewerStyleVariables.fontFamily};
+        --cube-text-font-size: 9px;
+        --cube-text-color: #29323b;
+        --cube-text-font-weight: 600;
+        --cube-text-letter-spacing: 1.0px;
+    }
+
+    .pref-viewer-view-cube[hidden] {
+        display: none;
+    }
+
+    .pref-viewer-view-cube svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube polygon {
+        stroke-width: var(--cube-border-width);
+    }
+
+    .pref-viewer-view-cube .cube-shell {
+        fill: var(--cube-fill-color);
+        stroke: var(--cube-border-color);
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube polygon[data-region] {
+        fill: transparent;
+        stroke: transparent;
+        pointer-events: visiblePainted;
+        cursor: pointer;
+    }
+
+    .pref-viewer-view-cube[data-locked="true"] polygon {
+        cursor: default;
+    }
+
+    .pref-viewer-view-cube polygon[data-current] {
+        fill: var(--cube-active-color);
+        fill-opacity: var(--cube-active-opacity);
+        stroke: transparent;
+    }
+
+    .pref-viewer-view-cube polygon[data-hover] {
+        fill: var(--cube-hover-color);
+        fill-opacity: var(--cube-hover-opacity);
+        stroke: transparent;
+    }
+
+    .pref-viewer-view-cube .hover-outline {
+        display: none;
+        fill: none;
+        stroke: var(--cube-hover-color);
+        stroke-opacity: 1;
+        stroke-width: var(--cube-border-width);
+        pointer-events: none;
+    }
+
+    .pref-viewer-view-cube .hover-outline[data-hover] {
+        display: inline;
+    }
+
+    .pref-viewer-view-cube text {
+        -webkit-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        fill: var(--cube-text-color);
+        font-family: var(--cube-text-font-family);
+        font-size: var(--cube-text-font-size);
+        font-weight: var(--cube-text-font-weight);
+        letter-spacing: var(--cube-text-letter-spacing);
+        text-transform: uppercase;
+        text-anchor: middle;
+        dominant-baseline: middle;
+    }
+`;
+
 export const PrefViewerMenu3DStyles = `
     pref-viewer-menu-3d {
         --font-family: ${PrefViewerStyleVariables.fontFamily};
@@ -203,7 +291,7 @@ export const PrefViewerMenu3DStyles = `
         --slider-bar-border: 1px solid rgba(255, 255, 255, 0.5);
 
         position: absolute;
-        top: var(--toggle-margin);
+        top: var(--pref-viewer-render-menu-top, var(--toggle-margin));
         right: var(--toggle-margin);
         z-index: 1200;
         /* The closed panel keeps its place in the flex column (opacity:0, not display:none), so
@@ -214,6 +302,8 @@ export const PrefViewerMenu3DStyles = `
         pointer-events: none;
 
         font-family: var(--font-family);
+        -webkit-user-select: none;
+        user-select: none;
     }
 
     pref-viewer-menu-3d>.menu-wrapper {
@@ -256,7 +346,7 @@ export const PrefViewerMenu3DStyles = `
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel {
         width: var(--panel-width);
-        max-height: 70vh;
+        max-height: min(70vh, calc(var(--pref-viewer-viewport-height, 100vh) - var(--pref-viewer-render-menu-top, var(--toggle-margin)) - 84px));
         overflow-y: auto;
         border-radius: var(--panel-radius);
         background: var(--panel-bg-color);
@@ -820,7 +910,8 @@ export const PrefViewerDialogStyles = `
         justify-content: center;
         background-color: var(--dialog-backdrop-color);
         position: relative;
-        z-index: 1000;
+        /* Cover all viewer overlays, including the 3D render menu (1200). */
+        z-index: 1300;
     }
 
     pref-viewer-dialog>.dialog-wrapper {