@preference-sl/pref-viewer 2.11.0-beta.0 → 2.11.0-beta.10

package/src/index.js

@@ -1,1253 +1,917 @@
+import { PrefViewer2D } from "./pref-viewer-2d.js";
+import { PrefViewer3D } from "./pref-viewer-3d.js";
+import { PrefViewerDialog } from "./pref-viewer-dialog.js";
+import { PrefViewerTask } from "./pref-viewer-task.js";
+
 /**
- * =============================================================================
- * PrefViewer Web Component (JavaScript)
- * =============================================================================
+ * PrefViewer - Custom Web Component for advanced 2D and 3D product visualization and configuration.
+ *
+ * Overview:
+ *  - Encapsulates both 2D (SVG) and 3D (Babylon.js) viewers, supporting glTF/GLB models, environments, and drawings.
+ *  - Loads assets from remote URLs, Base64 data URIs, and IndexedDB sources.
+ *  - Provides a unified API for loading models, scenes, drawings, materials, and configuration via attributes or methods.
+ *  - Manages an internal task queue for sequential processing of viewer operations.
+ *  - Emits custom events for loading, errors, and state changes to facilitate integration.
+ *  - Supports downloading models and scenes in GLB and USDZ formats.
+ *  - Automatically updates the viewer when reactive attributes change.
+ *
+ * Usage:
+ *  - Use as a custom HTML element: <pref-viewer ...>
+ *  - Configure via attributes (config, model, scene, materials, drawing, options, mode).
+ *  - Control viewer mode, visibility, and downloads via public methods.
+ *
+ * Reactive Attributes:
+ *  - config: URL or Base64 for configuration file.
+ *  - model: URL or Base64 for 3D model (glTF/GLB).
+ *  - scene: URL or Base64 for environment/scene (glTF/GLB).
+ *  - materials: URL or Base64 for materials definition.
+ *  - drawing: URL or Base64 for SVG drawing.
+ *  - options: JSON string for viewer options.
+ *  - mode: Viewer mode ("2d" or "3d").
  *
- * Overview
- * --------
- * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Renders the glTF or GLB model of the product ('model') and merges it with the glTF or GLB model of environment ('scene') into a <canvas> inside its shadow DOM.
- *   • Supports loading via remote URL (storage.url), Base64 data URI (storage.url), or from a Base64 stored entry in IndexedDB (storage.db, storage.table, storage.id).
- *   • The data for loading both models is provided via the 'config' (both model and scene), 'model' and 'scene' attributes. The 'config' attribute can carry more initial configurations than just the models.
- *   • Exposes methods for making changes to the scene that replicate what the attribute observables do: 'loadConfig', 'loadModel', 'loadScene'.
- *   • Automatically handles scene creation (engine, camera, lighting) and resource cleanup.
- *   • Emits 'model-loaded' and 'model-error' events for integration.
+ * Public Methods:
+ *  - loadConfig(config): Loads a configuration object or JSON string.
+ *  - loadModel(model): Loads a model object or JSON string.
+ *  - loadScene(scene): Loads a scene/environment object or JSON string.
+ *  - loadMaterials(materials): Loads materials object or JSON string.
+ *  - loadDrawing(drawing): Loads a drawing object or JSON string.
+ *  - setOptions(options): Sets viewer options from an object or JSON string.
+ *  - setMode(mode): Sets the viewer mode to "2d" or "3d" and updates component visibility.
+ *  - showModel(): Shows the 3D model.
+ *  - hideModel(): Hides the 3D model.
+ *  - showScene(): Shows the 3D environment/scene.
+ *  - hideScene(): Hides the 3D environment/scene.
+ *  - zoomCenter(): Centers the 2D drawing view.
+ *  - zoomExtentsAll(): Zooms the 2D drawing to fit all content.
+ *  - zoomIn(): Zooms in on the 2D drawing.
+ *  - zoomOut(): Zooms out of the 2D drawing.
+ *  - downloadModelGLB(): Downloads the current 3D model as a GLB file.
+ *  - downloadModelGLTF(): Downloads the current 3D model as a glTF ZIP file.
+ *  - downloadModelUSDZ(): Downloads the current 3D model as a USDZ file.
+ *  - downloadModelAndSceneGLB(): Downloads both the model and scene as a GLB file.
+ *  - downloadModelAndSceneGLTF(): Downloads both the model and scene as a glTF ZIP file.
+ *  - downloadModelAndSceneUSDZ(): Downloads both the model and scene as a USDZ file.
+ *  - downloadSceneGLB(): Downloads the environment as a GLB file.
+ *  - downloadSceneGLTF(): Downloads the environment as a glTF ZIP file.
+ *  - downloadSceneUSDZ(): Downloads the environment as a USDZ file.
+ *  - openDialog(title, content, footer): Opens a modal dialog with the specified title, content, and footer.
+ *  - closeDialog(): Closes the currently open dialog, if any, and removes it from the DOM.
  *
- * Usage
- * -----
- * Load model from IndexedDB:
- * ```html
- * <pref-viewer
- *     model='{ "storage": { "db": "PrefConfiguratorDB", "table": "gltfModels", "id": "1234-1234-1234-1234-1234" }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Public Properties:
+ *  - isInitialized: Indicates if the viewer is initialized.
+ *  - isLoaded: Indicates if the viewer has finished loading.
+ *  - isLoading: Indicates if the viewer is currently loading.
+ *  - isMode2D: Indicates if the viewer is in 2D mode.
+ *  - isMode3D: Indicates if the viewer is in 3D mode.
  *
- * Load scene a URL:
- * ```html
- * <pref-viewer
- *     scene='{ "storage": { "url" : "https://example.com/scenes/scene1.gltf" }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Events:
+ *  - "scene-loading": Dispatched when a 3D loading operation starts.
+ *  - "scene-loaded": Dispatched when a 3D loading operation completes.
+ *  - "drawing-loading": Dispatched when a 2D drawing loading operation starts.
+ *  - "drawing-loaded": Dispatched when a 2D drawing loading operation completes.
+ *  - "drawing-zoom-changed": Dispatched when the 2D drawing zoom/pan state changes.
  *
- * Load model from Base64 data:
- * ```html
- * <pref-viewer
- *     model='{ "storage": { "url" : "data:model/gltf+json;base64,UEsDB..." }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Notes:
+ *  - Automatically creates and manages 2D and 3D viewer components in its shadow DOM.
+ *  - Processes tasks sequentially to ensure consistent state.
+ *  - Designed for extensibility and integration in product configurators and visualization tools.
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName, HDRCubeTexture, IblShadowsRenderPipeline } from "@babylonjs/core";
-import "@babylonjs/loaders";
-import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
-import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
-import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
-import { initDb, loadModel } from "./gltf-storage.js";
-import { FileStorage } from "./file-storage.js";
-
-class PrefViewerTask {
-    static Types = Object.freeze({
-        Config: "config",
-        Environment: "environment",
-        Materials: "materials",
-        Model: "model",
-        Options: "options",
-    });
-
-    /**
-     * value: any payload for the task
-     * type: must match one of PrefViewerTask.Types values (case-insensitive)
-     */
-    constructor(value, type) {
-        this.value = value;
-
-        const t = typeof type === "string" ? type.toLowerCase() : String(type).toLowerCase();
-        const allowed = Object.values(PrefViewerTask.Types);
-        if (!allowed.includes(t)) {
-            throw new TypeError(`PrefViewerTask: invalid type "${type}". Allowed types: ${allowed.join(", ")}`);
-        }
-        this.type = t;
-
-        Object.freeze(this);
-    }
-}
-
 class PrefViewer extends HTMLElement {
-    initialized = false;
-    loaded = false;
-    loading = false;
+    #isInitialized = false;
+    #isLoaded = false;
+    #isLoading = false;
+    #mode = "3d";
+
     #taskQueue = [];
-    #fileStorage = new FileStorage("PrefViewer", "Files");
-
-    #data = {
-        containers: {
-            model: {
-                name: "model",
-                assetContainer: null,
-                show: true,
-                storage: null,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-            environment: {
-                name: "environment",
-                assetContainer: null,
-                show: true,
-                storage: null,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-            materials: {
-                name: "materials",
-                assetContainer: null,
-                storage: null,
-                show: true,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-        },
-        options: {
-            camera: {
-                value: null,
-                locked: true,
-                changed: { pending: false, success: false },
-            },
-            materials: {
-                innerWall: {
-                    value: null,
-                    prefix: "innerWall",
-                    changed: { pending: false, success: false },
-                },
-                outerWall: {
-                    value: null,
-                    prefix: "outerWall",
-                    changed: { pending: false, success: false },
-                },
-                innerFloor: {
-                    value: null,
-                    prefix: "innerFloor",
-                    changed: { pending: false, success: false },
-                },
-                outerFloor: {
-                    value: null,
-                    prefix: "outerFloor",
-                    changed: { pending: false, success: false },
-                },
-            },
-        },
-    };
-
-    // DOM elements
+
     #wrapper = null;
-    #canvas = null;
-
-    // Babylon.js core objects
-    #engine = null;
-    #scene = null;
-    #camera = null;
-    #hemiLight = null;
-    #dirLight = null;
-    #cameraLight = null;
-    #shadowGen = null;
-    #XRExperience = null;
+    #component2D = null;
+    #component3D = null;
+    #dialog = null;
 
+    /**
+     * Creates a new PrefViewer instance and attaches a shadow DOM.
+     * Initializes internal state and component references.
+     * @public
+     */
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.#createCanvas();
-        this.#wrapCanvas();
-        // Point to whichever version you packaged or want to use:
-        const DRACO_BASE = "https://www.gstatic.com/draco/versioned/decoders/1.5.7";
-        DracoCompression.Configuration.decoder = {
-            // loader for the “wrapper” that pulls in the real WASM
-            wasmUrl: `${DRACO_BASE}/draco_wasm_wrapper_gltf.js`,
-            // the raw WebAssembly binary
-            wasmBinaryUrl: `${DRACO_BASE}/draco_decoder_gltf.wasm`,
-            // JS fallback if WASM isn’t available
-            fallbackUrl: `${DRACO_BASE}/draco_decoder_gltf.js`,
-        };
     }
 
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @public
+     * @returns {string[]} Array of attribute names to observe.
+     */
     static get observedAttributes() {
-        return ["config", "model", "scene", "show-model", "show-scene"];
+        return ["config", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene"];
     }
 
+    /**
+     * 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.
+     * @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.
+     * @returns {void}
+     */
     attributeChangedCallback(name, _old, value) {
-        let data = null;
         switch (name) {
             case "config":
                 this.loadConfig(value);
                 break;
+            case "drawing":
+                this.loadDrawing(value);
+                break;
+            case "materials":
+                this.loadMaterials(value);
+                break;
+            case "mode":
+                if (_old === value || value.toLowerCase() === this.#mode) {
+                    return;
+                }
+                this.setMode(value.toLowerCase());
+                break;
             case "model":
                 this.loadModel(value);
                 break;
             case "scene":
                 this.loadScene(value);
                 break;
-            case "materials":
-                this.loadMaterials(value);
-                break;
             case "options":
                 this.setOptions(value);
                 break;
             case "show-model":
-                data = value.toLowerCase?.() === "true";
-                if (this.initialized) {
-                    data ? this.showModel() : this.hideModel();
-                } else {
-                    this.#data.containers.model.show = data;
+                if (_old === value) {
+                    return;
                 }
+                const showModel = value.toLowerCase() === "true";
+                showModel ? this.showModel() : this.hideModel();
                 break;
             case "show-scene":
-                data = value.toLowerCase?.() === "true";
-                if (this.initialized) {
-                    data ? this.showScene() : this.hideScene();
-                } else {
-                    this.#data.containers.environment.show = data;
+                if (_old === value) {
+                    return;
                 }
+                const showScene = value.toLowerCase() === "true";
+                showScene ? this.showScene() : this.hideScene();
                 break;
         }
     }
 
+    /**
+     * Called when the element is inserted into the DOM.
+     * Initializes the 3D and 2D viewer components and starts processing tasks.
+     * @public
+     * @returns {void|boolean} Returns false if initialization fails; otherwise void.
+     */
     connectedCallback() {
-        if (!this.hasAttribute("config")) {
-            const error = 'PrefViewer: provide "models" as array of model and environment';
-            console.error(error);
-            this.dispatchEvent(
-                new CustomEvent("scene-error", {
-                    bubbles: true,
-                    cancelable: false,
-                    composed: true,
-                    detail: { error: new Error(error) },
-                })
-            );
-            return false;
-        }
+        this.#wrapper = document.createElement("div");
+        this.#wrapper.classList.add("pref-viewer-wrapper");
+        this.shadowRoot.append(this.#wrapper);
 
-        this.#initializeBabylon();
-        this.initialized = true;
-        this.#processNextTask();
-    }
+        const style = document.createElement("style");
+        style.textContent = `@import "/dist/css/pref-viewer.css";`;
+        this.shadowRoot.append(style);
 
-    disconnectedCallback() {
-        this.#disposeEngine();
-        this.#canvasResizeObserver.disconnect();
-    }
+        this.#createComponent3D();
+        this.#createComponent2D();
 
-    // Web Component
-    #createCanvas() {
-        this.#canvas = document.createElement("canvas");
-        Object.assign(this.#canvas.style, {
-            width: "100%",
-            height: "100%",
-            display: "block",
-            outline: "none",
-        });
-    }
+        if (!this.hasAttribute("mode")) {
+            this.setMode();
+        }
 
-    #wrapCanvas() {
-        this.#wrapper = document.createElement("div");
-        Object.assign(this.#wrapper.style, {
-            width: "100%",
-            height: "100%",
-            position: "relative",
-        });
-        this.#wrapper.appendChild(this.#canvas);
-        this.shadowRoot.append(this.#wrapper);
+        this.#isInitialized = true;
+        this.#processNextTask();
     }
 
-    #setStatusLoading() {
-        this.loaded = false;
-        this.loading = true;
-        if (this.hasAttribute("loaded")) {
-            this.removeAttribute("loaded");
-        }
-        this.setAttribute("loading", "");
-        this.dispatchEvent(
-            new CustomEvent("scene-loading", {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-            })
-        );
-        this.#engine.stopRenderLoop(this.#renderLoop);
+    /**
+     * Creates and appends the 2D viewer component to the shadow DOM.
+     * Sets the "visible" attribute to true by default.
+     * @private
+     * @returns {void}
+     */
+    #createComponent2D() {
+        this.#component2D = document.createElement("pref-viewer-2d");
+        this.#component2D.setAttribute("visible", "false");
+        this.#component2D.addEventListener("drawing-zoom-changed", this.#on2DZoomChanged.bind(this));
+        this.#wrapper.appendChild(this.#component2D);
     }
 
-    async #setStatusLoaded() {
-        const toLoadDetail = {
-            container_model: !!this.#data.containers.model.changed.pending,
-            container_environment: !!this.#data.containers.environment.changed.pending,
-            container_materials: !!this.#data.containers.materials.changed.pending,
-            options_camera: !!this.#data.options.camera.changed.pending,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
-        };
-        const loadedDetail = {
-            container_model: !!this.#data.containers.model.changed.success,
-            container_environment: !!this.#data.containers.environment.changed.success,
-            container_materials: !!this.#data.containers.materials.changed.success,
-            options_camera: !!this.#data.options.camera.changed.success,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.success,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.success,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.success,
-        };
-        const detail = {
-            tried: toLoadDetail,
-            success: loadedDetail,
-        };
-
-        this.dispatchEvent(
-            new CustomEvent("scene-loaded", {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-                detail: detail,
-            })
-        );
-
-        await this.#scene.whenReadyAsync();
-        this.#engine.runRenderLoop(this.#renderLoop);
-
-        this.#resetChangedFlags();
+    /**
+     * Creates and appends the 3D viewer component to the shadow DOM.
+     * Sets the "visible" attribute to true by default.
+     * @private
+     * @returns {void}
+     */
+    #createComponent3D() {
+        this.#component3D = document.createElement("pref-viewer-3d");
+        this.#component3D.setAttribute("visible", "false");
+        this.#wrapper.appendChild(this.#component3D);
+    }
 
-        if (this.hasAttribute("loading")) {
-            this.removeAttribute("loading");
+    /**
+     * Adds a new task to the internal queue for processing.
+     * If the viewer is initialized and not currently loading, immediately processes the next task.
+     * @private
+     * @param {*} value - The payload or data for the task.
+     * @param {string} type - The type of task (see PrefViewerTask.Types).
+     * @returns {void}
+     */
+    #addTaskToQueue(value, type) {
+        this.#taskQueue.push(new PrefViewerTask(value, type));
+        if (this.#isInitialized && !this.#isLoading) {
+            this.#processNextTask();
         }
-        this.setAttribute("loaded", "");
-
-        this.loaded = true;
-        this.loading = false;
-
-        this.#processNextTask();
     }
 
-    // Data
-    #checkCameraChanged(options) {
-        if (!options || !options.camera) {
+    /**
+     * Processes the next task in the queue, if any.
+     * Dispatches the task to the appropriate handler based on its type.
+     * @private
+     * @returns {boolean|void} Returns false if the queue is empty; otherwise void.
+     */
+    #processNextTask() {
+        if (!this.#taskQueue.length) {
             return false;
         }
-        const prev = this.#data.options.camera.value;
-        const changed = options.camera !== prev;
-
-        this.#data.options.camera.changed.pending = changed;
-        this.#data.options.camera.changed.success = false;
-        if (changed) {
-            this.#data.options.camera.changed.value = prev;
-            this.#data.options.camera.changed.locked = this.#data.options.camera.locked;
-            this.#data.options.camera.value = options.camera;
+        const task = this.#taskQueue[0];
+        this.#taskQueue.shift();
+        switch (task.type) {
+            case PrefViewerTask.Types.Config:
+                this.#processConfig(task.value);
+                break;
+            case PrefViewerTask.Types.Drawing:
+                this.#processDrawing(task.value);
+                break;
+            case PrefViewerTask.Types.Environment:
+                this.#processEnvironment(task.value);
+                break;
+            case PrefViewerTask.Types.Materials:
+                this.#processMaterials(task.value);
+                break;
+            case PrefViewerTask.Types.Model:
+                this.#processModel(task.value);
+                break;
+            case PrefViewerTask.Types.Options:
+                this.#processOptions(task.value);
+                break;
+            case PrefViewerTask.Types.Visibility:
+                this.#processVisibility(task.value);
+                break;
         }
-        return changed;
     }
 
-    #checkMaterialsChanged(options) {
-        if (!options) {
-            return false;
-        }
-        let someChanged = false;
-        Object.keys(this.#data.options.materials).forEach((material) => {
-            const key = `${material}Material`;
-            const state = this.#data.options.materials[material];
-            const prev = state.value;
-            const incoming = options[key];
-            const changed = !!incoming && incoming !== prev;
-
-            state.changed.pending = changed;
-            state.changed.success = false;
-            if (changed) {
-                state.changed.value = prev;
-                state.value = incoming;
-            }
-            someChanged = someChanged || changed;
-        });
-        return someChanged;
-    }
+    /**
+     * Handles the start of a 3D loading operation.
+     * Updates loading state, sets attributes, and dispatches a "scene-loading" event.
+     * @private
+     * @returns {void}
+     */
+    #on3DLoading() {
+        this.#isLoaded = false;
+        this.#isLoading = true;
 
-    #storeChangedFlagsForContainer(container, success) {
-        if (success) {
-            container.timeStamp = container.changed.timeStamp;
-            container.size = container.changed.size;
-            container.changed.success = true;
-        } else {
-            container.changed.success = false;
-        }
-    }
+        this.removeAttribute("loaded-3d");
+        this.setAttribute("loading-3d", "");
 
-    #resetChangedFlags() {
-        const reset = (node) => {
-            node.changed = { pending: false, success: false };
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
         };
-        Object.values(this.#data.containers).forEach(reset);
-        Object.values(this.#data.options.materials).forEach(reset);
-        reset(this.#data.options.camera);
+        this.dispatchEvent(new CustomEvent("scene-loading", customEventOptions));
     }
 
-    // Babylon.js
-    async #initializeBabylon() {
-        this.#engine = new Engine(this.#canvas, true, { alpha: true });
-        this.#engine.disableUniformBuffers = true;
-        this.#scene = new Scene(this.#engine);
-        this.#scene.clearColor = new Color4(1, 1, 1, 1);
-        this.#createCamera();
-        this.#createLights();
-        this.#setupInteraction();
-        await this.#createXRExperience();
-        this.#engine.runRenderLoop(this.#renderLoop);
-        this.#canvasResizeObserver.observe(this.#canvas);
-    }
+    /**
+     * Handles the completion of a 3D loading operation.
+     * Updates loading state, sets attributes, dispatches a "scene-loaded" event, and processes the next task.
+     * @private
+     * @param {object} [detail] - Optional details to include in the event.
+     * @returns {void}
+     */
+    #on3DLoaded(detail) {
+        this.#isLoaded = true;
+        this.#isLoading = false;
 
-    // If this function is defined as '#renderLoop() {}' it is not executed in 'this.#engine.runRenderLoop(this.#renderLoop)'
-    #renderLoop = () => {
-        this.#scene && this.#scene.render();
-    };
+        this.removeAttribute("loading-3d");
+        this.setAttribute("loaded-3d", "");
 
-    #addStylesToARButton() {
-        const css = '.babylonVRicon { color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%222048%22%20height%3D%221152%22%20viewBox%3D%220%200%202048%201152%22%20version%3D%221.1%22%3E%3Cpath%20transform%3D%22rotate%28180%201024%2C576.0000000000001%29%22%20d%3D%22m1109%2C896q17%2C0%2030%2C-12t13%2C-30t-12.5%2C-30.5t-30.5%2C-12.5l-170%2C0q-18%2C0%20-30.5%2C12.5t-12.5%2C30.5t13%2C30t30%2C12l170%2C0zm-85%2C256q59%2C0%20132.5%2C-1.5t154.5%2C-5.5t164.5%2C-11.5t163%2C-20t150%2C-30t124.5%2C-41.5q23%2C-11%2042%2C-24t38%2C-30q27%2C-25%2041%2C-61.5t14%2C-72.5l0%2C-257q0%2C-123%20-47%2C-232t-128%2C-190t-190%2C-128t-232%2C-47l-81%2C0q-37%2C0%20-68.5%2C14t-60.5%2C34.5t-55.5%2C45t-53%2C45t-53%2C34.5t-55.5%2C14t-55.5%2C-14t-53%2C-34.5t-53%2C-45t-55.5%2C-45t-60.5%2C-34.5t-68.5%2C-14l-81%2C0q-123%2C0%20-232%2C47t-190%2C128t-128%2C190t-47%2C232l0%2C257q0%2C68%2038%2C115t97%2C73q54%2C24%20124.5%2C41.5t150%2C30t163%2C20t164.5%2C11.5t154.5%2C5.5t132.5%2C1.5zm939%2C-298q0%2C39%20-24.5%2C67t-58.5%2C42q-54%2C23%20-122%2C39.5t-143.5%2C28t-155.5%2C19t-157%2C11t-148.5%2C5t-129.5%2C1.5q-59%2C0%20-130%2C-1.5t-148%2C-5t-157%2C-11t-155.5%2C-19t-143.5%2C-28t-122%2C-39.5q-34%2C-14%20-58.5%2C-42t-24.5%2C-67l0%2C-257q0%2C-106%2040.5%2C-199t110%2C-162.5t162.5%2C-109.5t199%2C-40l81%2C0q27%2C0%2052%2C14t50%2C34.5t51%2C44.5t55.5%2C44.5t63.5%2C34.5t74%2C14t74%2C-14t63.5%2C-34.5t55.5%2C-44.5t51%2C-44.5t50%2C-34.5t52%2C-14l14%2C0q37%2C0%2070%2C0.5t64.5%2C4.5t63.5%2C12t68%2C23q71%2C30%20128.5%2C78.5t98.5%2C110t63.5%2C133.5t22.5%2C149l0%2C257z%22%20fill%3D%22white%22%20/%3E%3C/svg%3E%0A); background-size: 80%; background-repeat:no-repeat; background-position: center; border: none; outline: none; transition: transform 0.125s ease-out } .babylonVRicon:hover { transform: scale(1.05) } .babylonVRicon:active {background-color: rgba(51,51,51,1) } .babylonVRicon:focus {background-color: rgba(51,51,51,1) }.babylonVRicon.vrdisplaypresenting { background-image: none;} .vrdisplaypresenting::after { content: "EXIT"} .xr-error::after { content: "ERROR"}';
-        const style = document.createElement("style");
-        style.appendChild(document.createTextNode(css));
-        this.#wrapper.appendChild(style);
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
+        }
+        this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
     }
 
-    async #createXRExperience() {
-        if (this.#XRExperience) {
-            return true;
-        }
+    /**
+     * Handles the start of a 2D loading operation.
+     * Updates loading state, sets attributes, and dispatches a "drawing-loading" event.
+     * @private
+     * @returns {void}
+     */
+    #on2DLoading() {
+        this.#isLoaded = false;
+        this.#isLoading = true;
 
-        const sessionMode = "immersive-ar";
-        const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
-        if (!sessionSupported) {
-            console.info("PrefViewer: WebXR in mode AR is not supported");
-            return false;
-        }
+        this.removeAttribute("loaded-2d");
+        this.setAttribute("loading-2d", "");
 
-        try {
-            const ground = MeshBuilder.CreateGround("ground", { width: 1000, height: 1000 }, this.#scene);
-            ground.isVisible = false;
-
-            const options = {
-                floorMeshes: [ground],
-                uiOptions: {
-                    sessionMode: sessionMode,
-                    renderTarget: "xrLayer",
-                    referenceSpaceType: "local",
-                },
-                optionalFeatures: true,
-            };
-
-            this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
-
-            const featuresManager = this.#XRExperience.baseExperience.featuresManager;
-            featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
-                xrInput: this.#XRExperience.input,
-                floorMeshes: [ground],
-                timeToTeleport: 1500,
-            });
-
-            this.#XRExperience.baseExperience.sessionManager.onXRReady.add(() => {
-                // Set the initial position of xrCamera: use nonVRCamera, which contains a copy of the original this.#scene.activeCamera before entering XR
-                this.#XRExperience.baseExperience.camera.setTransformationFromNonVRCamera(this.#XRExperience.baseExperience._nonVRCamera);
-                this.#XRExperience.baseExperience.camera.setTarget(Vector3.Zero());
-                this.#XRExperience.baseExperience.onInitialXRPoseSetObservable.notifyObservers(this.#XRExperience.baseExperience.camera);
-            });
-
-            this.#addStylesToARButton();
-        } catch (error) {
-            console.warn("PrefViewer: failed to create WebXR experience", error);
-            this.#XRExperience = null;
-        }
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
     }
 
-    #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
-
-    #createCamera() {
-        this.#camera = new ArcRotateCamera("camera", (3 * Math.PI) / 2, Math.PI * 0.47, 10, Vector3.Zero(), this.#scene);
-        this.#camera.upperBetaLimit = Math.PI * 0.48;
-        this.#camera.lowerBetaLimit = Math.PI * 0.25;
-        this.#camera.lowerRadiusLimit = 5;
-        this.#camera.upperRadiusLimit = 20;
-        this.#camera.metadata = { locked: false };
-        this.#camera.attachControl(this.#canvas, true);
-        this.#scene.activeCamera = this.#camera;
-    }
+    /**
+     * Handles the completion of a 2D loading operation.
+     * Updates loading state, sets attributes, dispatches a "drawing-loaded" event, and processes the next task.
+     * @private
+     * @param {object} [detail] - Optional details to include in the event.
+     * @returns {void}
+     */
+    #on2DLoaded(detail) {
+        this.#isLoaded = true;
+        this.#isLoading = false;
 
-    #createLights() {
-        this.#initEnvironmentTexture();
+        this.removeAttribute("loading-2d");
+        this.setAttribute("loaded-2d", "");
 
-        if (this.#scene.environmentTexture) {
-            return true;
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (detail) {
+            customEventOptions.detail = detail;
         }
-
-        // 1) Stronger ambient fill
-        this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#hemiLight.intensity = 0.6;
-
-        // 2) Directional light from the front-right, angled slightly down
-        this.#dirLight = new DirectionalLight("dirLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
-        this.#dirLight.intensity = 0.6;
-
-        // // 3) Soft shadows
-        this.#shadowGen = new ShadowGenerator(1024, this.#dirLight);
-        this.#shadowGen.useBlurExponentialShadowMap = true;
-        this.#shadowGen.blurKernel = 16;
-        this.#shadowGen.darkness = 0.5;
-
-        // 4) Camera‐attached headlight
-        this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
-        this.#cameraLight.parent = this.#camera;
-        this.#cameraLight.intensity = 0.3;
+        this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
     }
 
-    #initEnvironmentTexture() {
-        return false;
-        if (this.#scene.environmentTexture) {
-            return true;
-        }
-        const hdrTextureURI = "../src/environments/noon_grass.hdr";
-        const hdrTexture = new HDRCubeTexture(hdrTextureURI, this.#scene, 128);
-        hdrTexture.gammaSpace = true;
-        hdrTexture._noMipmap = false;
-        hdrTexture.level = 2.0;
-        this.#scene.environmentTexture = hdrTexture;
+    /**
+     * Handles the "drawing-zoom-changed" event from the 2D viewer component.
+     * Dispatches a custom "drawing-zoom-changed" event from the PrefViewer element, forwarding the event detail to external listeners.
+     * @private
+     * @param {CustomEvent} event - The original zoom change event from the 2D viewer.
+     * @returns {void}
+     */
+    #on2DZoomChanged(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const customEventOptions = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: event.detail,
+        };
+        this.dispatchEvent(new CustomEvent("drawing-zoom-changed", customEventOptions));
     }
 
-    #initIBLShadows() {
-        if (!this.#scene.environmentTexture) {
-            return false;
+    /**
+     * Processes a configuration object by loading it into the 3D component.
+     * Dispatches loading events and processes the next task when finished.
+     * @private
+     * @param {object} config - The configuration object to process.
+     * @returns {void}
+     */
+    #processConfig(config) {
+        if (!this.#component3D) {
+            return;
         }
 
-        let createIBLShadowPipeline = function (scene) {
-            const pipeline = new IblShadowsRenderPipeline(
-                "iblShadowsPipeline",
-                scene,
-                {
-                    resolutionExp: 7,
-                    sampleDirections: 2,
-                    ssShadowsEnabled: true,
-                    shadowRemanence: 0.8,
-                    triPlanarVoxelization: true,
-                    shadowOpacity: 0.8,
-                },
-                [scene.activeCamera]
-            );
-            pipeline.allowDebugPasses = false;
-            pipeline.gbufferDebugEnabled = true;
-            pipeline.importanceSamplingDebugEnabled = false;
-            pipeline.voxelDebugEnabled = false;
-            pipeline.voxelDebugDisplayMip = 1;
-            pipeline.voxelDebugAxis = 2;
-            pipeline.voxelTracingDebugEnabled = false;
-            pipeline.spatialBlurPassDebugEnabled = false;
-            pipeline.accumulationPassDebugEnabled = false;
-            return pipeline;
-        };
-
-        let iblShadowsPipeline = createIBLShadowPipeline(this.#scene);
-
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__") || mesh.name === "hdri") {
-                return false;
-            }
-            iblShadowsPipeline.addShadowCastingMesh(mesh);
-            iblShadowsPipeline.updateSceneBounds();
-        });
-
-        this.#scene.materials.forEach((material) => {
-            iblShadowsPipeline.addShadowReceivingMaterial(material);
+        this.#on3DLoading();
+        this.#component3D.load(config).then((detail) => {
+            this.#on3DLoaded(detail);
+            this.#processNextTask();
         });
     }
 
-    #initShadows() {
-        if (!this.#scene.environmentTexture) {
-            this.#initIBLShadows();
-            return true;
+    /**
+     * Processes a drawing object by loading it into the 2D component.
+     * Processes the next task when finished.
+     * @private
+     * @param {object} drawing - The drawing object to process.
+     * @returns {void}
+     */
+    #processDrawing(drawing) {
+        if (!this.#component2D) {
+            return;
         }
 
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__")) {
-                return false;
-            }
-            mesh.receiveShadows = true;
-            if (!mesh.name === "hdri") {
-                this.#shadowGen.addShadowCaster(mesh, true);
-            }
+        this.#on2DLoading();
+        this.#component2D.load(drawing).then((detail) => {
+            this.#on2DLoaded(detail);
+            this.#processNextTask();
         });
     }
 
-    #setMaxSimultaneousLights() {
-        let lightsNumber = 1; // Como mínimo una luz correspondiente a la textura de environmentTexture
-        this.#scene.lights.forEach((light) => {
-            if (light.isEnabled()) {
-                ++lightsNumber;
-            }
-        });
-        if (this.#scene.materials) {
-            this.#scene.materials.forEach((material) => (material.maxSimultaneousLights = lightsNumber));
-        }
+    /**
+     * Processes an environment (scene) object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} environment - The environment/scene object to process.
+     * @returns {void}
+     */
+    #processEnvironment(environment) {
+        const config = {};
+        config.scene = environment;
+        this.#processConfig(config);
     }
 
-    #setupInteraction() {
-        this.#canvas.addEventListener("wheel", (event) => {
-            if (!this.#scene || !this.#camera) {
-                return false;
-            }
-            //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
-            //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
-            if (!this.#scene.activeCamera.metadata?.locked) {
-                this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
-            }
-            event.preventDefault();
-        });
+    /**
+     * Processes a materials object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} materials - The materials object to process.
+     * @returns {void}
+     */
+    #processMaterials(materials) {
+        const config = {};
+        config.materials = materials;
+        this.#processConfig(config);
     }
 
-    #disposeEngine() {
-        if (!this.#engine) return;
-        this.#engine.dispose();
-        this.#engine = this.#scene = this.#camera = null;
-        this.#hemiLight = this.#dirLight = this.#cameraLight = null;
-        this.#shadowGen = null;
+    /**
+     * Processes a model object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} model - The model object to process.
+     * @returns {void}
+     */
+    #processModel(model) {
+        const config = {};
+        config.model = model;
+        this.#processConfig(config);
     }
 
-    // Utility methods for loading gltf/glb
-    async #getServerFileDataHeader(uri) {
-        return new Promise((resolve) => {
-            const xhr = new XMLHttpRequest();
-            xhr.open("HEAD", uri, true);
-            xhr.responseType = "blob";
-            xhr.onload = () => {
-                if (xhr.status === 200) {
-                    const size = parseInt(xhr.getResponseHeader("Content-Length"));
-                    const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
-                    resolve([size, timeStamp]);
-                } else {
-                    resolve([0, null]);
-                }
-            };
-            xhr.onerror = () => {
-                resolve([0, null]);
-            };
-            xhr.send();
-        });
-    }
+    /**
+     * Processes viewer options by loading them into the 3D component.
+     * Dispatches loading events and processes the next task.
+     * @private
+     * @param {object} options - The options object to process.
+     * @returns {void}
+     */
+    #processOptions(options) {
+        if (!this.#component3D) {
+            return;
+        }
 
-    #transformUrl(url) {
-        return new Promise((resolve) => {
-            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
-        });
+        this.#on3DLoading();
+        const detail = this.#component3D.setOptions(options);
+        this.#on3DLoaded(detail);
+        this.#processNextTask();
     }
 
-    #decodeBase64(base64) {
-        const [, payload] = base64.split(",");
-        const raw = payload || base64;
-        let decoded = "";
-        let blob = null;
-        let extension = null;
-        let size = raw.length;
-        try {
-            decoded = atob(raw);
-        } catch {
-            return { blob, extension, size };
+    /**
+     * Processes visibility configuration for the model and scene.
+     * Shows or hides the model and/or scene based on the config, then processes the next task.
+     * @private
+     * @param {object} config - The visibility configuration object.
+     * @returns {void}
+     */
+    #processVisibility(config) {
+        if (!this.#component3D) {
+            return;
+        }
+        const showModel = config.model?.visible;
+        const showScene = config.scene?.visible;
+        if (showModel !== undefined) {
+            showModel ? this.#component3D.showModel() : this.#component3D.hideModel();
         }
-        let isJson = false;
-        try {
-            JSON.parse(decoded);
-            isJson = true;
-        } catch { }
-        extension = isJson ? ".gltf" : ".glb";
-        const type = isJson ? "model/gltf+json" : "model/gltf-binary";
-        const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
-        blob = new Blob([array], { type });
-        return { blob, extension, size };
+        if (showScene !== undefined) {
+            showScene ? this.#component3D.showEnvironment() : this.#component3D.hideEnvironment();
+        }
+        this.#processNextTask();
     }
 
-    async #initStorage(db, table) {
-        if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
-            return true;
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Sets the viewer mode to "2d" or "3d" and updates component visibility accordingly.
+     * @public
+     * @param {string} [mode=this.#mode] - The mode to set ("2d" or "3d").
+     * @returns {void}
+     */
+    setMode(mode = this.#mode) {
+        if (mode !== "2d" && mode !== "3d") {
+            console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
+            mode = this.#mode;
+        }
+        this.#mode = mode;
+        if (mode === "2d") {
+            this.#component3D?.hide();
+            this.#component2D?.show();
+        } else {
+            this.#component2D?.hide();
+            this.#component3D?.show();
+        }
+        if (this.getAttribute("mode") !== mode) {
+            this.setAttribute("mode", mode);
+            if (this.#dialog) {
+                this.closeDialog();
+            }
         }
-        await initDb(db, table);
     }
 
-    // Methods for managing Asset Containers
-    #setVisibilityOfWallAndFloorInModel(show) {
-        if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
+    /**
+     * 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.
+     * @public
+     * @param {object|string} config - Configuration object or JSON string.
+     * @returns {boolean|void} Returns false if config is invalid; otherwise void.
+     */
+    loadConfig(config) {
+        config = typeof config === "string" ? JSON.parse(config) : config;
+        if (!config) {
             return false;
         }
-        show = show !== undefined ? show : this.#data.containers.environment.visible;
-        const prefixes = Object.values(this.#data.options.materials).map((material) => material.prefix);
-        this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))).forEach((mesh) => mesh.setEnabled(show));
+        if (config.drawing) {
+            this.#addTaskToQueue(config.drawing, "drawing");
+        }
+        this.#addTaskToQueue(config, "config");
     }
 
-    #setOptionsMaterial(optionMaterial) {
-        if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
+    /**
+     * Loads a model object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} model - Model object or JSON string.
+     * @returns {boolean|void} Returns false if model is invalid; otherwise void.
+     */
+    loadModel(model) {
+        model = typeof model === "string" ? JSON.parse(model) : model;
+        if (!model) {
             return false;
         }
+        this.#addTaskToQueue(model, "model");
+    }
 
-        const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
-        if (!material) {
+    /**
+     * Loads a scene/environment object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} scene - Scene object or JSON string.
+     * @returns {boolean|void} Returns false if scene is invalid; otherwise void.
+     */
+    loadScene(scene) {
+        scene = typeof scene === "string" ? JSON.parse(scene) : scene;
+        if (!scene) {
             return false;
         }
+        this.#addTaskToQueue(scene, "environment");
+    }
 
-        const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
-            containers.push(this.#data.containers.model.assetContainer);
-        }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
-            containers.push(this.#data.containers.environment.assetContainer);
-        }
-        if (containers.length === 0) {
+    /**
+     * Loads materials object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} materials - Materials object or JSON string.
+     * @returns {boolean|void} Returns false if materials are invalid; otherwise void.
+     */
+    loadMaterials(materials) {
+        materials = typeof materials === "string" ? JSON.parse(materials) : materials;
+        if (!materials) {
             return false;
         }
-
-        let someSetted = false;
-        containers.forEach((container) =>
-            container.meshes
-                .filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix))
-                .forEach((mesh) => {
-                    mesh.material = material;
-                    someSetted = true;
-                })
-        );
-
-        if (someSetted) {
-            optionMaterial.changed.success = true;
-        } else if (optionMaterial.changed.pending) {
-            optionMaterial.value = optionMaterial.changed.value;
-            optionMaterial.changed.success = false;
-        }
-
-        return someSetted;
-    }
-
-    #setOptionsMaterials() {
-        let someSetted = false;
-        Object.values(this.#data.options.materials).forEach((material) => {
-            let settedMaterial = this.#setOptionsMaterial(material);
-            someSetted = someSetted || settedMaterial;
-        });
-        return someSetted;
+        this.#addTaskToQueue(materials, "materials");
     }
 
-    #setOptionsCamera() {
-        if (!this.#data.options.camera.value && !this.#data.options.camera.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
+    /**
+     * Loads a drawing object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} drawing - Drawing object or JSON string.
+     * @returns {boolean|void} Returns false if drawing is invalid; otherwise void.
+     */
+    loadDrawing(drawing) {
+        drawing = typeof drawing === "string" ? JSON.parse(drawing) : drawing;
+        if (!drawing) {
             return false;
         }
-
-        let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
-        if (!camera) {
-            if (this.#data.options.camera.changed.value && this.#data.options.camera.changed.value !== this.#data.options.camera.value) {
-                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || null;
-            }
-            if (camera) {
-                camera.metadata = { locked: this.#data.options.camera.changed.locked };
-                this.#data.options.camera.value = this.#data.options.camera.changed.value;
-                this.#data.options.camera.locked = this.#data.options.camera.changed.locked;
-                this.#data.options.camera.changed.success = false;
-            } else {
-                camera = this.#camera;
-                this.#data.options.camera.value = null;
-                this.#data.options.camera.locked = this.#camera.metadata.locked;
-                this.#data.options.camera.changed.success = false;
-            }
-        } else {
-            camera.metadata = { locked: this.#data.options.camera.locked };
-            if (this.#data.options.camera.changed.pending) {
-                this.#data.options.camera.changed.success = true;
-            }
-        }
-        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
-            camera.attachControl(this.#canvas, true);
-        }
-        this.#scene.activeCamera = camera;
-        return true;
+        this.#addTaskToQueue(drawing, "drawing");
     }
 
-    #addContainer(container) {
-        if (!container.assetContainer || container.visible || !container.show) {
+    /**
+     * Sets viewer options from an object or JSON string and adds them to the task queue.
+     * @public
+     * @param {object|string} options - Options object or JSON string.
+     * @returns {boolean|void} Returns false if options are invalid; otherwise void.
+     */
+    setOptions(options) {
+        options = typeof options === "string" ? JSON.parse(options) : options;
+        if (!options) {
             return false;
         }
+        this.#addTaskToQueue(options, "options");
+    }
 
-        container.assetContainer.addAllToScene();
-        container.visible = true;
-        return true;
+    /**
+     * Shows the 3D model by setting its visibility to true.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
+    showModel() {
+        const config = { model: { visible: true } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
-    #removeContainer(container) {
-        if (!container.assetContainer || !container.visible) {
-            return false;
-        }
+    /**
+     * Hides the 3D model by setting its visibility to false.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
+    hideModel() {
+        const config = { model: { visible: false } };
+        this.#addTaskToQueue(config, "visibility");
+    }
 
-        container.assetContainer.removeAllFromScene();
-        container.visible = false;
-        return true;
+    /**
+     * Shows the scene/environment by setting its visibility to true.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
+    showScene() {
+        const config = { scene: { visible: true } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
-    #replaceContainer(container, newAssetContainer) {
-        if (container.assetContainer) {
-            this.#removeContainer(container);
-            container.assetContainer.dispose();
-            container.assetContainer = null;
-        }
-        this.#scene.getEngine().releaseEffects();
-        container.assetContainer = newAssetContainer;
-        this.#addContainer(container);
-        return true;
+    /**
+     * Hides the scene/environment by setting its visibility to false.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
+    hideScene() {
+        const config = { scene: { visible: false } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
     /**
-     * Replace internal URIs in a glTF AssetContainer JSON with URLs pointing to files stored in IndexedDB.
-     * @param {JSON} assetContainerJSON AssetContainer in glTF (JSON) (modified in-place).
-     * @param {URL} [assetContainerURL] Optional URL of the AssetContainer. Used as the base path to resolve relative URIs.
-     * @returns {Promise<void>} Resolves when all applicable URIs have been resolved/replaced.
+     * Centers the 2D drawing view in the viewer.
+     * @public
+     * @returns {void}
      * @description
-     * - When provided, assetContainerURL is used as the base path for other scene files (binary buffers and all images).
-     *   If not provided (null/undefined), it is because it is the assetContainer of the model or materials whose URIs are absolute.
-     * - According to the glTF 2.0 spec, only items inside the "buffers" and "images" arrays may have a "uri" property.
-     * - Data URIs (embedded base64) are ignored and left unchanged.
-     * - Matching asset URIs are normalized (backslashes converted to forward slashes) and passed to the FileStorage layer
-     *   to obtain a usable URL (object URL or cached URL).
-     * - The function performs replacements in parallel and waits for all lookups to complete.
-     * - The JSON is updated in-place with the resolved URLs.
-     * @see {@link https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#uris|glTF™ 2.0 Specification - URIs}
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
      */
-    async #replaceSceneURIAsync(assetContainerJSON, assetContainerURL) {
-        if (!assetContainerJSON) {
+    zoomCenter() {
+        if (!this.#component2D || this.#mode !== "2d") {
             return;
         }
-
-        let sceneURLBase = assetContainerURL;
-
-        if (typeof assetContainerURL === "string") {
-            const lastIndexOfSlash = assetContainerURL.lastIndexOf("/");
-            if (lastIndexOfSlash !== -1) {
-                sceneURLBase = assetContainerURL.substring(0, lastIndexOfSlash + 1);
-            }
-        }
-
-        const arrayOfAssetsWithURI = [];
-
-        /**
-         * Check whether a value is a syntactically absolute URL.
-         * @param {string} url Value to test.
-         * @returns {boolean} True when `url` is a string that can be parsed by the global URL constructor (i.e. a syntactically absolute URL); false otherwise.
-         * @description
-         *  - Returns false for non-string inputs.
-         *  - Uses the browser's URL parser, so protocol-relative URLs ("//host/...") and relative paths are considered non-absolute.
-         *  - This is a syntactic check only — it does not perform network requests or validate reachability/CORS.
-         */
-        var isURLAbsolute = function (url) {
-            if (typeof url !== "string") {
-                return false;
-            }
-            try {
-                new URL(url);
-                return true;
-            } catch {
-                return false;
-            }
-        };
-
-        /**
-         * Collect asset entries that have an external URI (non-data URI) and store a normalized absolute/relative-resolved URI for later replacement.
-         * @param {Object} asset glTF asset entry (an element of buffers[] or images[]).
-         * @param {number} index Index of the asset within its parent array.
-         * @param {Array}  array Reference to the parent array (buffers or images).
-         * @returns {void} Side-effect: pushes a record into arrayOfAssetsWithURI when applicable { parent: <array>, index: <number>, uri: <string> }.
-         */
-        var saveAssetData = function (asset, index, array) {
-            if (asset.uri && !asset.uri.startsWith("data:")) {
-                const assetData = {
-                    parent: array,
-                    index: index,
-                    uri: `${!isURLAbsolute(asset.uri) && sceneURLBase ? sceneURLBase : ""}${asset.uri}`.replace(/\\\\|\\|\/\\/g, "/"),
-                };
-                arrayOfAssetsWithURI.push(assetData);
-            }
-        };
-
-        if (assetContainerJSON.buffers) {
-            assetContainerJSON.buffers.forEach((asset, index, array) => saveAssetData(asset, index, array));
-        }
-        if (assetContainerJSON.images) {
-            assetContainerJSON.images.forEach((asset, index, array) => saveAssetData(asset, index, array));
-        }
-
-        // Replace parallel URIs so that if files are not stored yet, they are downloaded in parallel
-        const promisesArray = arrayOfAssetsWithURI.map(async (asset) => {
-            const uri = await this.#fileStorage.getURL(asset.uri);
-            if (uri) {
-                asset.parent[asset.index].uri = uri;
-            }
-        });
-        await Promise.all(promisesArray);
+        this.#component2D.zoomCenter();
     }
 
-    async #loadAssetContainer(container) {
-        let storage = container?.storage;
-
-        if (!storage) {
-            return false;
-        }
-
-        let source = storage.url || null;
-
-        if (storage.db && storage.table && storage.id) {
-            await this.#initStorage(storage.db, storage.table);
-            const object = await loadModel(storage.id, storage.table);
-            source = object.data;
-            if (object.timeStamp === container.timeStamp) {
-                container.changed = { pending: false, success: false };
-                return false;
-            } else {
-                container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
-            }
+    /**
+     * Zooms the 2D drawing to fit all content within the viewer.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomExtentsAll() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
         }
+        this.#component2D.zoomExtentsAll();
+    }
 
-        if (!source) {
-            return false;
+    /**
+     * Zooms in on the 2D drawing.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomIn() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
         }
+        this.#component2D.zoomIn();
+    }
 
-        let file = null;
-
-        let { blob, extension, size } = this.#decodeBase64(source);
-        if (blob && extension) {
-            if ((container.name === "model" || container.name === "materials") && extension === ".gltf") {
-                const assetContainerJSON = JSON.parse(await blob.text());
-                await this.#replaceSceneURIAsync(assetContainerJSON, source);
-                source = `data:${JSON.stringify(assetContainerJSON)}`;
-            } else {
-                file = new File([blob], `${container.name}${extension}`, {
-                    type: blob.type,
-                });
-            }
-            if (!container.changed.pending) {
-                if (container.timeStamp === null && container.size === size) {
-                    container.changed = { pending: false, success: false };
-                    return false;
-                } else {
-                    container.changed = { pending: true, size: size, success: false, timeStamp: null };
-                }
-            }
-        } else {
-            const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
-            extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-            let [fileSize, fileTimeStamp] = [await this.#fileStorage.getSize(source), await this.#fileStorage.getTimeStamp(source)];
-            if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
-                container.changed = { pending: false, success: false };
-                return false;
-            } else {
-                container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
-                if (extension === ".gltf") {
-                    const assetContainerBlob = await this.#fileStorage.getBlob(source);
-                    const assetContainerJSON = JSON.parse(await assetContainerBlob.text());
-                    await this.#replaceSceneURIAsync(assetContainerJSON, source);
-                    source = `data:${JSON.stringify(assetContainerJSON)}`;
-                } else {
-                    source = await this.#fileStorage.getURL(source);
-                }
-            }
+    /**
+     * Zooms out of the 2D drawing.
+     * @public
+     * @returns {void}
+     * @description
+     * Only works when the viewer is in 2D mode. Pending implementation for 3D mode when active camera is not blocked.
+     */
+    zoomOut() {
+        if (!this.#component2D || this.#mode !== "2d") {
+            return;
         }
-
-        // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
-        let options = {
-            pluginExtension: extension,
-            pluginOptions: {
-                gltf: {
-                    compileMaterials: true,
-                    loadAllMaterials: true,
-                    loadOnlyMaterials: container.name === "materials",
-                    //preprocessUrlAsync: this.#transformUrl,
-                },
-            },
-        };
-
-        return LoadAssetContainerAsync(file || source, this.#scene, options);
+        this.#component2D.zoomOut();
     }
 
-    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        this.#engine.stopRenderLoop(this.#renderLoop);
-
-        const promiseArray = [];
-        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
-        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
-        promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
-
-        Promise.allSettled(promiseArray)
-            .then((values) => {
-                const modelContainer = values[0];
-                const environmentContainer = values[1];
-                const materialsContainer = values[2];
-
-                if (modelContainer.status === "fulfilled" && modelContainer.value) {
-                    modelContainer.value.lights = [];
-                    this.#replaceContainer(this.#data.containers.model, modelContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
-                } else {
-                    if (this.#data.containers.model.assetContainer && this.#data.containers.model.show !== this.#data.containers.model.visible) {
-                        this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
-                    }
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
-                }
-
-                if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
-                    this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
-                } else {
-                    if (this.#data.containers.environment.assetContainer && this.#data.containers.environment.show !== this.#data.containers.environment.visible) {
-                        this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
-                    }
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
-                }
-
-                if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
-                    this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
-                } else {
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
-                }
+    /**
+     * Initiates download of the current 3D model in GLB format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelGLB() {
+        if (!this.#component3D) {
+            return;
+        }
 
-                this.#setOptionsMaterials();
-                this.#setOptionsCamera();
-                this.#setVisibilityOfWallAndFloorInModel();
-            })
-            .catch((error) => {
-                this.loaded = true;
-                console.error("PrefViewer: failed to load model", error);
-                this.dispatchEvent(
-                    new CustomEvent("scene-error", {
-                        bubbles: true,
-                        cancelable: false,
-                        composed: true,
-                        detail: { error: error },
-                    })
-                );
-            })
-            .finally(async () => {
-                this.#setMaxSimultaneousLights();
-                this.#initShadows();
-                await this.#setStatusLoaded();
-            });
+        this.#component3D.downloadModelGLB();
     }
 
-    // Tasks
-    #addTaskToQueue(value, type) {
-        this.#taskQueue.push(new PrefViewerTask(value, type));
-        if (this.initialized && !this.loading) {
-            this.#processNextTask();
+    /**
+     * Initiates download of the current 3D model in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelGLTF() {
+        if (!this.#component3D) {
+            return;
         }
-    }
 
-    #processNextTask() {
-        if (!this.#taskQueue.length) {
-            return false;
-        }
-        const task = this.#taskQueue[0];
-        this.#taskQueue.shift();
-        switch (task.type) {
-            case PrefViewerTask.Types.Config:
-                this.#processConfig(task.value);
-                break;
-            case PrefViewerTask.Types.Model:
-                this.#processModel(task.value);
-                break;
-            case PrefViewerTask.Types.Environment:
-                this.#processEnvironment(task.value);
-                break;
-            case PrefViewerTask.Types.Materials:
-                this.#processMaterials(task.value);
-                break;
-            case PrefViewerTask.Types.Options:
-                this.#processOptions(task.value);
-                break;
-        }
+        this.#component3D.downloadModelGLTF();
     }
 
-    #processConfig(config) {
-        this.#setStatusLoading();
-
-        // Containers
-        const loadModel = !!config.model?.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? config.model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
-
-        const loadEnvironment = !!config.scene?.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? config.scene.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
-
-        const loadMaterials = !!config.materials?.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? config.materials.storage : this.#data.containers.materials.storage;
-
-        // Options
-        if (config.options) {
-            this.#checkCameraChanged(config.options);
-            this.#checkMaterialsChanged(config.options);
+    /**
+     * Initiates download of the current 3D model in USDZ format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelUSDZ() {
+        if (!this.#component3D) {
+            return;
         }
 
-        this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
+        this.#component3D.downloadModelUSDZ();
     }
 
-    #processModel(model) {
-        this.#setStatusLoading();
-
-        const loadModel = !!model.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in GLB format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLB() {
+        if (!this.#component3D) {
+            return;
+        }
 
-        this.initialized && this.#loadContainers(loadModel, false, false);
+        this.#component3D.downloadModelAndSceneGLB();
     }
 
-    #processEnvironment(environment) {
-        this.#setStatusLoading();
-
-        const loadEnvironment = !!environment.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? environment.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = environment.visible !== undefined ? environment.visible : this.#data.containers.environment.show;
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
 
-        this.#loadContainers(false, loadEnvironment, false);
+        this.#component3D.downloadModelAndSceneGLTF();
     }
 
-    #processMaterials(materials) {
-        this.#setStatusLoading();
-
-        const loadMaterials = !!materials.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in USDZ format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneUSDZ() {
+        if (!this.#component3D) {
+            return;
+        }
 
-        this.#loadContainers(false, false, loadMaterials);
+        this.#component3D.downloadModelAndSceneUSDZ();
     }
 
-    async #processOptions(options) {
-        this.#setStatusLoading();
-
-        let someSetted = false;
-        if (this.#checkCameraChanged(options)) {
-            someSetted = someSetted || this.#setOptionsCamera();
-        }
-        if (this.#checkMaterialsChanged(options)) {
-            someSetted = someSetted || this.#setOptionsMaterials();
+    /**
+     * Initiates download of the current 3D environment in GLB format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneGLB() {
+        if (!this.#component3D) {
+            return;
         }
 
-        await this.#setStatusLoaded();
-
-        return someSetted;
+        this.#component3D.downloadSceneGLB();
     }
 
-    // Public Methods
-    loadConfig(config) {
-        config = typeof config === "string" ? JSON.parse(config) : config;
-        if (!config) {
-            return false;
+    /**
+     * Initiates download of the current 3D environment in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneGLTF() {
+        if (!this.#component3D) {
+            return;
         }
-        this.#addTaskToQueue(config, "config");
-    }
 
-    loadModel(model) {
-        model = typeof model === "string" ? JSON.parse(model) : model;
-        if (!model) {
-            return false;
-        }
-        this.#addTaskToQueue(model, "model");
+        this.#component3D.downloadSceneGLTF();
     }
 
-    loadScene(scene) {
-        scene = typeof scene === "string" ? JSON.parse(scene) : scene;
-        if (!scene) {
-            return false;
+    /**
+     * Initiates download of the current 3D environment in USDZ format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneUSDZ() {
+        if (!this.#component3D) {
+            return;
         }
-        this.#addTaskToQueue(scene, "environment");
+        this.#component3D.downloadSceneUSDZ();
     }
 
-    loadMaterials(materials) {
-        materials = typeof materials === "string" ? JSON.parse(materials) : materials;
-        if (!materials) {
-            return false;
+    /**
+     * Opens a modal dialog with the specified title, content, and footer.
+     * @public
+     * @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.
+     * @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.
+     */
+    openDialog(title, content, footer) {
+        if (this.#dialog && this.#dialog.hasAttribute("open")) {
+            this.#dialog.close();
         }
-        this.#addTaskToQueue(materials, "materials");
+        this.#dialog = document.createElement("pref-viewer-dialog");
+        this.shadowRoot.querySelector(".pref-viewer-wrapper").appendChild(this.#dialog);
+        const opened = this.#dialog.open(title, content, footer);
+        return opened ? this.#dialog : null;
     }
 
-    setOptions(options) {
-        options = typeof options === "string" ? JSON.parse(options) : options;
-        if (!options) {
-            return false;
+    /**
+     * Closes the currently open dialog, if any, and removes it from the DOM.
+     * @public
+     * @returns {void}
+     */
+    closeDialog() {
+        if (this.#dialog) {
+            this.#dialog.close();
+            this.#dialog = null;
         }
-        this.#addTaskToQueue(options, "options");
-    }
-
-    showModel() {
-        this.#data.containers.model.show = true;
-        this.#addContainer(this.#data.containers.model);
-    }
-
-    hideModel() {
-        this.#data.containers.model.show = false;
-        this.#removeContainer(this.#data.containers.model);
     }
 
-    showScene() {
-        this.#data.containers.environment.show = true;
-        this.#addContainer(this.#data.containers.environment);
-        this.#setVisibilityOfWallAndFloorInModel();
-    }
+    /**
+     * ---------------------------
+     * Public properties
+     * ---------------------------
+     */
 
-    hideScene() {
-        this.#data.containers.environment.show = false;
-        this.#removeContainer(this.#data.containers.environment);
-        this.#setVisibilityOfWallAndFloorInModel();
+    /**
+     * Indicates whether the viewer has been initialized.
+     * @public
+     * @returns {boolean} True if initialized; otherwise, false.
+     */
+    get isInitialized() {
+        return this.#isInitialized;
     }
 
-    downloadModelGLB() {
-        const fileName = "model";
-        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+    /**
+     * Indicates whether the viewer has finished loading.
+     * @public
+     * @returns {boolean} True if loaded; otherwise, false.
+     */
+    get isLoaded() {
+        return this.#isLoaded;
     }
 
-    downloadModelUSDZ() {
-        const fileName = "model";
-        USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
-            }
-        });
+    /**
+     * Indicates whether the viewer is currently loading.
+     * @public
+     * @returns {boolean} True if loading; otherwise, false.
+     */
+    get isLoading() {
+        return this.#isLoading;
     }
 
-    downloadModelAndSceneUSDZ() {
-        const fileName = "scene";
-        USDZExportAsync(this.#scene).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
-            }
-        });
+    /**
+     * Indicates whether the viewer is currently in 2D mode.
+     * @public
+     * @returns {boolean} True if the viewer is in 2D mode; otherwise, false.
+     */
+    get isMode2D() {
+        return this.#mode === "2d";
     }
 
-    downloadModelAndSceneGLB() {
-        const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+    /**
+     * Indicates whether the viewer is currently in 3D mode.
+     * @public
+     * @returns {boolean} True if the viewer is in 3D mode; otherwise, false.
+     */
+    get isMode3D() {
+        return this.#mode === "3d";
     }
 }
 
+customElements.define("pref-viewer-2d", PrefViewer2D);
+customElements.define("pref-viewer-3d", PrefViewer3D);
+customElements.define("pref-viewer-dialog", PrefViewerDialog);
 customElements.define("pref-viewer", PrefViewer);