@preference-sl/pref-viewer 2.10.0-beta.7 → 2.10.0-beta.9

package/package.json

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

package/src/gltf-storage.js

@@ -1,4 +1,4 @@
-// wwwroot/js/gltf-storage.js
+// wwwroot/js/gltf-storage.js 
 
 // Public, inspectable namespace
 const PC = (globalThis.PrefConfigurator ??= {});

package/src/index.js

@@ -47,7 +47,13 @@ import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompre
 import { initDb, loadModel } from "./gltf-storage.js";
 
 class PrefViewer extends HTMLElement {
+    static LOG_PREFIX = "[PrefViewer]";
+    static LOG_LEVELS = { none: 0, error: 1, warn: 2, info: 3, debug: 4 };
+    // Por defecto NO loggear: control únicamente vía atributo `log-level`
+    static DEFAULT_LOG_LEVEL = "none";
+
     #initialized = false;
+    #logLevel = PrefViewer.DEFAULT_LOG_LEVEL;
 
     #data = {
         containers: {
@@ -113,6 +119,67 @@ class PrefViewer extends HTMLElement {
         },
     };
 
+    #log(level, message, context) {
+        const levels = PrefViewer.LOG_LEVELS;
+        const current = levels[this.#logLevel] ?? levels[PrefViewer.DEFAULT_LOG_LEVEL];
+        const incoming = levels[level] ?? levels.info;
+        if (incoming > current || current === levels.none) return;
+
+        const logger = console[level] ?? console.log;
+        if (context !== undefined) {
+            logger(`${PrefViewer.LOG_PREFIX}: ${message}`, context);
+        } else {
+            logger(`${PrefViewer.LOG_PREFIX}: ${message}`);
+        }
+    }
+
+    #setLogLevel(level) {
+        const value = String(level || "").toLowerCase();
+        this.#logLevel = (value in PrefViewer.LOG_LEVELS) ? value : PrefViewer.DEFAULT_LOG_LEVEL;
+        this.#logInfo("Log level set", { level: this.#logLevel });
+    }
+
+    #logDebug(message, context) {
+        this.#log("debug", message, context);
+    }
+
+    #logInfo(message, context) {
+        this.#log("info", message, context);
+    }
+
+    #logWarn(message, context) {
+        this.#log("warn", message, context);
+    }
+
+    #logError(message, context) {
+        this.#log("error", message, context);
+    }
+
+    #summarizeValue(value) {
+        if (typeof value === "string" && value.length > 150) {
+            return `${value.slice(0, 150)}… (${value.length} chars)`;
+        }
+        return value;
+    }
+
+    #describeStorage(storage) {
+        if (!storage) {
+            return "none";
+        }
+        if (storage.db && storage.table && storage.id) {
+            return `IndexedDB(${storage.db}/${storage.table}#${storage.id})`;
+        }
+        if (typeof storage.url === "string") {
+            return storage.url.startsWith("data:") ? "data-url" : storage.url;
+        }
+        return "unknown";
+    }
+
+    static get observedAttributes() {
+        // Añadimos "log-level" para controlar logs fuera del objeto config
+        return ["config", "model", "scene", "show-model", "show-scene", "log-level"];
+    }
+
     // DOM elements
     #wrapper = null;
     #canvas = null;
@@ -129,6 +196,7 @@ class PrefViewer extends HTMLElement {
 
     constructor() {
         super();
+        this.#logDebug("Constructing PrefViewer instance");
         this.attachShadow({ mode: "open" });
         this.#createCanvas();
         this.#wrapCanvas();
@@ -144,11 +212,13 @@ class PrefViewer extends HTMLElement {
         };
     }
 
-    static get observedAttributes() {
-        return ["config", "model", "scene", "show-model", "show-scene"];
-    }
-
     attributeChangedCallback(name, _old, value) {
+        if (name === "log-level") {
+            this.#setLogLevel(value);
+            return;
+        }
+
+        this.#logDebug("Attribute change detected", { name, value: this.#summarizeValue(value) });
         let data = null;
         switch (name) {
             case "config":
@@ -162,6 +232,7 @@ class PrefViewer extends HTMLElement {
                 break;
             case "show-model":
                 data = value.toLowerCase?.() === "true";
+                this.#logDebug("Toggling model visibility from attribute", { visible: data, initialized: this.#initialized });
                 if (this.#initialized) {
                     data ? this.showModel() : this.hideModel();
                 } else {
@@ -170,6 +241,7 @@ class PrefViewer extends HTMLElement {
                 break;
             case "show-scene":
                 data = value.toLowerCase?.() === "true";
+                this.#logDebug("Toggling scene visibility from attribute", { visible: data, initialized: this.#initialized });
                 if (this.#initialized) {
                     data ? this.showScene() : this.hideScene();
                 } else {
@@ -182,7 +254,7 @@ class PrefViewer extends HTMLElement {
     connectedCallback() {
         if (!this.hasAttribute("config")) {
             const error = 'PrefViewer: provide "models" as array of model and environment';
-            console.error(error);
+            this.#logError("Missing required config attribute", { error });
             this.dispatchEvent(
                 new CustomEvent("model-error", {
                     detail: { error: new Error(error) },
@@ -193,18 +265,22 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
+        this.#logDebug("Connected to DOM, initializing Babylon");
         this.#initializeBabylon();
         this.#loadContainers(true, true, true);
         this.#initialized = true;
+        this.#logInfo("Initialization completed", { initialized: this.#initialized });
     }
 
     disconnectedCallback() {
+        this.#logDebug("Disconnected from DOM, disposing resources");
         this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
     }
 
     // Web Component
     #createCanvas() {
+        this.#logDebug("Creating rendering canvas");
         this.#canvas = document.createElement("canvas");
         Object.assign(this.#canvas.style, {
             width: "100%",
@@ -212,9 +288,11 @@ class PrefViewer extends HTMLElement {
             display: "block",
             outline: "none",
         });
+        this.#logDebug("Canvas element created and styled");
     }
 
     #wrapCanvas() {
+        this.#logDebug("Wrapping canvas inside container div");
         this.#wrapper = document.createElement("div");
         Object.assign(this.#wrapper.style, {
             width: "100%",
@@ -223,20 +301,24 @@ class PrefViewer extends HTMLElement {
         });
         this.#wrapper.appendChild(this.#canvas);
         this.shadowRoot.append(this.#wrapper);
+        this.#logDebug("Canvas wrapper appended to shadow DOM");
     }
 
     // Data
     #checkCameraChanged(options) {
         if (!options || !options.camera) {
+            this.#logDebug("Camera options not provided or unchanged");
             return false;
         }
         this.#data.options.camera.changed = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
         this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : this.#data.options.camera.value;
+        this.#logDebug("Camera option processed", { changed: this.#data.options.camera.changed, value: this.#data.options.camera.value });
         return this.#data.options.camera.changed;
     }
 
     #checkMaterialsChanged(options) {
         if (!options) {
+            this.#logDebug("Material options not provided");
             return false;
         }
         let someChanged = false;
@@ -246,22 +328,32 @@ class PrefViewer extends HTMLElement {
             this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
             someChanged = someChanged || this.#data.options.materials[material].changed;
         });
+        this.#logDebug("Material options processed", {
+            changed: someChanged,
+            values: Object.entries(this.#data.options.materials).reduce((acc, [key, entry]) => {
+                acc[key] = { value: entry.value, changed: entry.changed };
+                return acc;
+            }, {}),
+        });
         return someChanged;
     }
 
     #storeChangedFlagsForContainer(container) {
         container.timestamp = container.changed.timestamp;
         container.size = container.changed.size;
+        this.#logDebug("Stored change flags for container", { name: container.name, timestamp: container.timestamp, size: container.size });
     }
 
     #resetChangedFlags() {
         Object.values(this.#data.containers).forEach((container) => (container.changed = false));
         Object.values(this.#data.options.materials).forEach((material) => (material.changed = false));
         this.#data.options.camera.changed = false;
+        this.#logDebug("Reset change flags across containers and options");
     }
 
     // Babylon.js
     async #initializeBabylon() {
+        this.#logInfo("Initializing Babylon engine and scene");
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
@@ -271,26 +363,32 @@ class PrefViewer extends HTMLElement {
 
         this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
         this.#canvasResizeObserver.observe(this.#canvas);
+        this.#logDebug("Engine render loop started and resize observer attached");
 
         await this.#createXRExperience();
+        this.#logInfo("Babylon initialization finished", { xrEnabled: !!this.#XRExperience });
     }
 
     addStylesToARButton() {
+        this.#logDebug("Adding styles to AR button");
         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);
+        this.#logDebug("AR button styles applied");
     }
 
     async #createXRExperience() {
         if (this.#XRExperience) {
+            this.#logDebug("XR experience already created, skipping");
             return true;
         }
 
+        this.#logDebug("Attempting to create XR experience");
         const sessionMode = "immersive-ar";
         const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
         if (!sessionSupported) {
-            console.info("PrefViewer: WebXR in mode AR is not supported");
+            this.#logInfo("WebXR session mode not supported", { sessionMode });
             return false;
         }
 
@@ -309,6 +407,7 @@ class PrefViewer extends HTMLElement {
             };
 
             this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
+            this.#logInfo("XR experience created successfully", { sessionMode });
 
             const featuresManager = this.#XRExperience.baseExperience.featuresManager;
             featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
@@ -316,24 +415,32 @@ class PrefViewer extends HTMLElement {
                 floorMeshes: [ground],
                 timeToTeleport: 1500,
             });
+            this.#logDebug("XR teleportation feature enabled");
 
             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.#logDebug("XR session ready and camera transformed");
             });
 
             this.addStylesToARButton();
         } catch (error) {
-            console.warn("PrefViewer: failed to create WebXR experience", error);
+            this.#logWarn("Failed to create XR experience", { error });
             this.#XRExperience = null;
         }
     }
 
-    #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
+    #canvasResizeObserver = new ResizeObserver(() => {
+        if (this.#engine) {
+            this.#logDebug("Resize observer triggered");
+            this.#engine.resize();
+        }
+    });
 
     #createCamera() {
+        this.#logDebug("Creating default camera");
         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;
@@ -342,9 +449,16 @@ class PrefViewer extends HTMLElement {
         this.#camera.metadata = { locked: false }
         this.#camera = this.#camera;
         this.#camera.attachControl(this.#canvas, true);
+        this.#logDebug("Camera created", {
+            upperBetaLimit: this.#camera.upperBetaLimit,
+            lowerBetaLimit: this.#camera.lowerBetaLimit,
+            lowerRadiusLimit: this.#camera.lowerRadiusLimit,
+            upperRadiusLimit: this.#camera.upperRadiusLimit,
+        });
     }
 
     #createLights() {
+        this.#logDebug("Creating scene lights");
         // 1) Stronger ambient fill
         this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
         this.#hemiLight.intensity = 0.6;
@@ -364,32 +478,52 @@ class PrefViewer extends HTMLElement {
         this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
         this.#cameraLight.parent = this.#camera;
         this.#cameraLight.intensity = 0.3;
+        this.#logDebug("Scene lights configured", {
+            hemiIntensity: this.#hemiLight.intensity,
+            dirIntensity: this.#dirLight.intensity,
+            pointIntensity: this.#cameraLight.intensity,
+            shadowKernel: this.#shadowGen.blurKernel,
+        });
     }
 
     #setupInteraction() {
+        this.#logDebug("Setting up canvas interaction listeners");
         this.#canvas.addEventListener("wheel", (event) => {
             if (!this.#scene || !this.#camera) {
+                this.#logWarn("Wheel interaction ignored; scene or camera missing");
                 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;
+                this.#logDebug("Processed wheel interaction", {
+                    deltaY: event.deltaY,
+                    inertialRadiusOffset: this.#scene.activeCamera.inertialRadiusOffset,
+                });
+            } else {
+                this.#logDebug("Wheel interaction ignored because camera is locked");
             }
             event.preventDefault();
         });
     }
 
     #disposeEngine() {
-        if (!this.#engine) return;
+        if (!this.#engine) {
+            this.#logDebug("Dispose engine called but engine already null");
+            return;
+        }
+        this.#logDebug("Disposing Babylon resources");
         this.#engine.dispose();
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
         this.#shadowGen = null;
+        this.#logDebug("Babylon resources disposed");
     }
 
     // Utility methods for loading gltf/glb
     async #getServerFileDataHeader(uri) {
+        this.#logDebug("Requesting server file header", { uri });
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
             xhr.open("HEAD", uri, true);
@@ -398,12 +532,15 @@ class PrefViewer extends HTMLElement {
                 if (xhr.status === 200) {
                     const size = parseInt(xhr.getResponseHeader("Content-Length"));
                     const timestamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    this.#logDebug("Received server file header", { uri, size, timestamp });
                     resolve(size, timestamp);
                 } else {
+                    this.#logWarn("Failed to retrieve server file header", { uri, status: xhr.status });
                     resolve(0, null);
                 }
             };
             xhr.onerror = () => {
+                this.#logError("Error requesting server file header", { uri });
                 resolve(0, null);
             };
             xhr.send();
@@ -412,11 +549,14 @@ class PrefViewer extends HTMLElement {
 
     #transformUrl(url) {
         return new Promise((resolve) => {
-            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
+            const transformed = url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/");
+            this.#logDebug("Transformed URL", { original: url, transformed });
+            resolve(transformed);
         });
     }
 
     #decodeBase64(base64) {
+        this.#logDebug("Decoding Base64 payload", { length: base64 ? base64.length : 0 });
         const [, payload] = base64.split(",");
         const raw = payload || base64;
         let decoded = "";
@@ -426,44 +566,62 @@ class PrefViewer extends HTMLElement {
         try {
             decoded = atob(raw);
         } catch {
+            this.#logWarn("Failed to decode Base64 string");
             return { blob, extension, size };
         }
         let isJson = false;
         try {
             JSON.parse(decoded);
             isJson = true;
-        } catch {}
+        } 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 });
+        this.#logDebug("Decoded Base64 payload", { isJson, size, extension });
         return { blob, extension, size };
     }
 
     async #initStorage(db, table) {
+        this.#logDebug("Initializing storage access", { db, table });
         if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
+            this.#logDebug("Reusing existing IndexedDB connection", { db, table });
             return true;
         }
         await initDb(db, table);
+        this.#logDebug("IndexedDB initialized", { db, table });
     }
 
     // Methods for managing Asset Containers
     #setVisibilityOfWallAndFloorInModel(show) {
         if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
+            this.#logDebug("Skipping wall/floor visibility update", {
+                hasModel: !!this.#data.containers.model.assetContainer,
+                modelVisible: this.#data.containers.model.visible,
+            });
             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));
+        this.#logDebug("Updated wall and floor visibility", { show });
     }
 
     #setOptionsMaterial(optionMaterial) {
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
+            this.#logWarn("Material option invalid", { optionMaterial });
             return false;
         }
 
+        this.#logDebug("Applying material option", {
+            prefix: optionMaterial.prefix,
+            value: optionMaterial.value,
+            changed: optionMaterial.changed,
+        });
+
         const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
         if (!material) {
+            this.#logWarn("Requested material not found", { value: optionMaterial.value });
             return false;
         }
 
@@ -475,6 +633,7 @@ class PrefViewer extends HTMLElement {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
+            this.#logDebug("No containers required material update", { prefix: optionMaterial.prefix });
             return false;
         }
 
@@ -485,36 +644,61 @@ class PrefViewer extends HTMLElement {
                 .forEach((mesh) => {
                     mesh.material = material;
                     someSetted = true;
+                    this.#logDebug("Assigned material to mesh", { mesh: mesh.name, material: material.name });
                 })
         );
 
+        this.#logDebug("Material option applied", {
+            prefix: optionMaterial.prefix,
+            value: optionMaterial.value,
+            applied: someSetted,
+            containers: containers.map((container) => container.name),
+        });
+
         return someSetted;
     }
 
     #setOptionsMaterials() {
+        if (!this.#data.containers.materials.assetContainer) {
+            this.#logDebug("Skipping materials update; materials container is missing");
+            return false;
+        }
+
+        this.#logDebug("Applying material options batch");
         let someSetted = false;
         Object.values(this.#data.options.materials).forEach((material) => {
             let settedMaterial = this.#setOptionsMaterial(material);
             someSetted = someSetted || settedMaterial;
         });
+        this.#logDebug("Material batch processing finished", { appliedAny: someSetted });
         return someSetted;
     }
 
     #setOptionsCamera() {
         if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
+            this.#logDebug("No camera option update necessary", {
+                value: this.#data.options.camera.value,
+                changed: this.#data.options.camera.changed,
+                modelChanged: this.#data.containers.model.assetContainer?.changed,
+            });
             return false;
         }
 
         let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
         if (!camera) {
+            this.#logWarn("Requested camera not found", { name: this.#data.options.camera.value });
             return false;
         }
 
         camera.metadata = { locked: this.#data.options.camera.locked };
         if (!this.#data.options.camera.locked) {
             camera.attachControl(this.#canvas, true);
+            this.#logDebug("Attached unlocked camera control", { camera: camera.name });
+        } else {
+            this.#logDebug("Using locked camera configuration", { camera: camera.name });
         }
         this.#scene.activeCamera = camera;
+        this.#logDebug("Active camera set", { camera: camera.name });
 
         return true;
     }
@@ -523,6 +707,14 @@ class PrefViewer extends HTMLElement {
         if (container.assetContainer && !container.visible && container.show) {
             container.assetContainer.addAllToScene();
             container.visible = true;
+            this.#logDebug("Added container to scene", { name: container.name });
+        } else {
+            this.#logDebug("Skipped adding container", {
+                name: container?.name,
+                hasAssetContainer: !!container?.assetContainer,
+                visible: container?.visible,
+                show: container?.show,
+            });
         }
     }
 
@@ -530,40 +722,67 @@ class PrefViewer extends HTMLElement {
         if (container.assetContainer && container.visible) {
             container.assetContainer.removeAllFromScene();
             container.visible = false;
+            this.#logDebug("Removed container from scene", { name: container.name });
+        } else {
+            this.#logDebug("Skipped removing container", {
+                name: container?.name,
+                hasAssetContainer: !!container?.assetContainer,
+                visible: container?.visible,
+            });
         }
     }
 
     #replaceContainer(container, newAssetContainer) {
+        this.#logDebug("Replacing container asset", { name: container.name });
         this.#removeContainer(container);
         container.assetContainer = newAssetContainer;
         container.assetContainer.meshes.forEach((mesh) => {
             mesh.receiveShadows = true;
             this.#shadowGen.addShadowCaster(mesh, true);
+            this.#logDebug("Configured mesh for shadows", { container: container.name, mesh: mesh.name });
         });
         this.#addContainer(container);
+        this.#logDebug("Container replacement complete", {
+            name: container.name,
+            meshCount: container.assetContainer.meshes.length,
+        });
     }
 
     async #loadAssetContainer(container) {
-        let storage = container?.storage;
+        const storage = container?.storage;
+        this.#logDebug("Requested asset container load", {
+            container: container?.name,
+            storage: this.#describeStorage(storage),
+        });
 
         if (!storage) {
+            this.#logWarn("No storage configuration provided for container", { container: container?.name });
             return false;
         }
 
         let source = storage.url || null;
 
         if (storage.db && storage.table && storage.id) {
+            this.#logDebug("Loading container from IndexedDB", {
+                container: container.name,
+                db: storage.db,
+                table: storage.table,
+                id: 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) {
+                this.#logDebug("IndexedDB model unchanged; skipping reload", { container: container.name });
                 return false;
             } else {
                 container.changed = { timestamp: object.timestamp, size: object.size };
+                this.#logDebug("IndexedDB model marked as changed", { container: container.name, metadata: container.changed });
             }
         }
 
         if (!source) {
+            this.#logWarn("No source resolved for container", { container: container.name });
             return false;
         }
 
@@ -571,14 +790,17 @@ class PrefViewer extends HTMLElement {
 
         let { blob, extension, size } = this.#decodeBase64(source);
         if (blob && extension) {
+            this.#logDebug("Source detected as Base64", { container: container.name, extension });
             file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
             if (!container.changed) {
                 if (container.timestamp === null && container.size === size) {
+                    this.#logDebug("Base64 model unchanged; skipping reload", { container: container.name, size });
                     return false;
                 } else {
                     container.changed = { timestamp: null, size: size };
+                    this.#logDebug("Base64 model marked as changed", { container: container.name, size });
                 }
             }
         } else {
@@ -586,9 +808,15 @@ class PrefViewer extends HTMLElement {
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
             if (container.timestamp === fileTimestamp && container.size === fileSize) {
+                this.#logDebug("Remote model unchanged; skipping reload", {
+                    container: container.name,
+                    fileTimestamp,
+                    fileSize,
+                });
                 return false;
             } else {
                 container.changed = { timestamp: fileTimestamp, size: fileSize };
+                this.#logDebug("Remote model marked as changed", { container: container.name, metadata: container.changed });
             }
         }
 
@@ -602,10 +830,12 @@ class PrefViewer extends HTMLElement {
             },
         };
 
+        this.#logInfo("Loading asset container", { container: container.name, extension });
         return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
+        this.#logInfo("Starting container load", { loadModel, loadEnvironment, loadMaterials });
         const promiseArray = [];
         promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
         promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
@@ -620,20 +850,27 @@ class PrefViewer extends HTMLElement {
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.model);
+                    this.#logInfo("Model container loaded successfully");
                 } else {
                     this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    this.#logDebug("Model container load skipped or failed", { status: modelContainer.status });
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.environment);
+                    this.#logInfo("Environment container loaded successfully");
                 } else {
                     this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    this.#logDebug("Environment container load skipped or failed", { status: environmentContainer.status });
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
                     this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials);
+                    this.#logInfo("Materials container loaded successfully");
+                } else {
+                    this.#logDebug("Materials container load skipped or failed", { status: materialsContainer.status });
                 }
 
                 this.#setOptionsMaterials();
@@ -642,6 +879,7 @@ class PrefViewer extends HTMLElement {
 
                 this.#resetChangedFlags();
 
+                this.#logInfo("Containers load routine completed");
                 this.dispatchEvent(
                     new CustomEvent("model-loaded", {
                         detail: { success: "" },
@@ -649,9 +887,10 @@ class PrefViewer extends HTMLElement {
                         composed: true,
                     })
                 );
+                this.#logDebug("Dispatched model-loaded event");
             })
             .catch((error) => {
-                console.error("PrefViewer: failed to load model", error);
+                this.#logError("Failed to load containers", { error });
                 this.dispatchEvent(
                     new CustomEvent("model-error", {
                         detail: { error: error },
@@ -664,8 +903,17 @@ class PrefViewer extends HTMLElement {
 
     // Public Methods
     loadConfig(config) {
-        config = typeof config === "string" ? JSON.parse(config) : config;
+        this.#logInfo("loadConfig called", { initialized: this.#initialized, inputType: typeof config });
+        if (typeof config === "string") {
+            try {
+                config = JSON.parse(config);
+            } catch (error) {
+                this.#logError("Failed to parse config JSON", { error });
+                throw error;
+            }
+        }
         if (!config) {
+            this.#logWarn("No config provided");
             return false;
         }
 
@@ -682,93 +930,145 @@ class PrefViewer extends HTMLElement {
             this.#checkMaterialsChanged(config.options);
         }
 
+        this.#logDebug("Config applied", {
+            modelStorage: this.#describeStorage(this.#data.containers.model.storage),
+            environmentStorage: this.#describeStorage(this.#data.containers.environment.storage),
+        });
+
         this.#initialized && this.#loadContainers(true, true, true);
     }
 
     setOptions(options) {
+        this.#logInfo("setOptions called", { optionsProvided: !!options });
         if (!options) {
+            this.#logWarn("setOptions called without options");
             return false;
         }
         let someSetted = false;
         if (this.#checkCameraChanged(options)) {
+            this.#logDebug("Camera options changed via setOptions");
             someSetted = someSetted || this.#setOptionsCamera();
         }
         if (this.#checkMaterialsChanged(options)) {
+            this.#logDebug("Material options changed via setOptions");
             someSetted = someSetted || this.#setOptionsMaterials();
         }
         this.#resetChangedFlags();
+        this.#logDebug("setOptions completed", { appliedAny: someSetted });
         debugger;
         return someSetted;
     }
 
     loadModel(model) {
-        model = typeof model === "string" ? JSON.parse(model) : model;
+        this.#logInfo("loadModel called", { initialized: this.#initialized, inputType: typeof model });
+        if (typeof model === "string") {
+            try {
+                model = JSON.parse(model);
+            } catch (error) {
+                this.#logError("Failed to parse model JSON", { error });
+                throw error;
+            }
+        }
         if (!model) {
+            this.#logWarn("No model payload provided");
             return false;
         }
         this.#data.containers.model.storage = model.storage || null;
         this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
+        this.#logDebug("Model configuration updated", {
+            storage: this.#describeStorage(this.#data.containers.model.storage),
+            show: this.#data.containers.model.show,
+        });
         this.#initialized && this.#loadContainers(true, false, false);
     }
 
     loadScene(scene) {
-        scene = typeof scene === "string" ? JSON.parse(scene) : scene;
+        this.#logInfo("loadScene called", { initialized: this.#initialized, inputType: typeof scene });
+        if (typeof scene === "string") {
+            try {
+                scene = JSON.parse(scene);
+            } catch (error) {
+                this.#logError("Failed to parse scene JSON", { error });
+                throw error;
+            }
+        }
         if (!scene) {
+            this.#logWarn("No scene payload provided");
             return false;
         }
         this.#data.containers.environment.storage = scene.storage || null;
         this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
+        this.#logDebug("Scene configuration updated", {
+            storage: this.#describeStorage(this.#data.containers.environment.storage),
+            show: this.#data.containers.environment.show,
+        });
         this.#initialized && this.#loadContainers(false, true, false);
     }
 
     showModel() {
         this.#data.containers.model.show = true;
         this.#addContainer(this.#data.containers.model);
+        this.#logInfo("Model visibility set to true");
     }
 
     hideModel() {
         this.#data.containers.model.show = false;
         this.#removeContainer(this.#data.containers.model);
+        this.#logInfo("Model visibility set to false");
     }
 
     showScene() {
         this.#data.containers.environment.show = true;
         this.#addContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
+        this.#logInfo("Scene visibility set to true");
     }
 
     hideScene() {
         this.#data.containers.environment.show = false;
         this.#removeContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
+        this.#logInfo("Scene visibility set to false");
     }
 
     downloadModelGLB() {
         const fileName = "model";
-        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        this.#logInfo("Initiating GLB download for model", { fileName });
+        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            this.#logDebug("Model GLB export ready", { fileName });
+            glb.downloadFiles();
+        });
     }
 
     downloadModelUSDZ() {
         const fileName = "model";
+        this.#logInfo("Initiating USDZ download for model", { fileName });
         USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+                this.#logDebug("Model USDZ export ready", { fileName });
             }
         });
     }
 
     downloadModelAndSceneUSDZ() {
         const fileName = "scene";
+        this.#logInfo("Initiating USDZ download for scene", { fileName });
         USDZExportAsync(this.#scene).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+                this.#logDebug("Scene USDZ export ready", { fileName });
             }
         });
     }
 
     downloadModelAndSceneGLB() {
         const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        this.#logInfo("Initiating GLB download for scene", { fileName });
+        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            this.#logDebug("Scene GLB export ready", { fileName });
+            glb.downloadFiles();
+        });
     }
 }