storysplat-viewer 0.1.12 → 0.2.0

package/dist/esm/index.js

@@ -41199,67 +41199,6 @@ function registerBuiltInLoaders() {
     });
 }
 
-var name$3D = "storysplat-viewer";
-var version = "0.1.12";
-var description = "A viewer component for StorySplat scenes.";
-var main = "dist/esm/index.js";
-var module = "dist/esm/index.js";
-var types = "dist/types/index.d.ts";
-var scripts = {
-	"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --project tsconfig.json",
-	build: "npm run build:types && rollup -c",
-	"build:umd": "rollup -c rollup.config.umd.js",
-	"build:simple": "rollup -c rollup.config.simple.js",
-	dev: "rollup -c -w",
-	"test:serve": "node test/server.js",
-	"test:build-watch": "npm run build && concurrently \"npm run dev\" \"npm run test:serve\"",
-	test: "npm run build && npm run test:serve",
-	"test:python": "npm run build && python3 test/simple-server.py",
-	"test:open": "npm run build && open http://localhost:8080/test/index.html && npm run test:serve"
-};
-var devDependencies = {
-	"@babylonjs/core": "^8.4.1",
-	"@babylonjs/loaders": "^8.4.1",
-	"@rollup/plugin-commonjs": "^25.0.0",
-	"@rollup/plugin-json": "^6.1.0",
-	"@rollup/plugin-node-resolve": "^15.0.0",
-	"@rollup/plugin-typescript": "^11.0.0",
-	concurrently: "^8.0.0",
-	rollup: "^4.0.0",
-	"rollup-plugin-postcss": "^4.0.2",
-	tslib: "^2.6.0",
-	typescript: "^5.0.0"
-};
-var files = [
-	"dist/esm",
-	"dist/types",
-	"dist/umd"
-];
-var publishConfig = {
-	access: "public"
-};
-var dependencies = {
-	"@babylonjs/loaders": "^8.4.1",
-	"gifuct-js": "^2.1.2"
-};
-var peerDependencies = {
-	"@babylonjs/core": "^8.4.1"
-};
-var packageJson = {
-	name: name$3D,
-	version: version,
-	description: description,
-	main: main,
-	module: module,
-	types: types,
-	scripts: scripts,
-	devDependencies: devDependencies,
-	files: files,
-	publishConfig: publishConfig,
-	dependencies: dependencies,
-	peerDependencies: peerDependencies
-};
-
 /**
  * Detect if the effect is a DrawWrapper
  * @param effect defines the entity to test
@@ -75073,7 +75012,7 @@ class CameraManager {
         }
     }
     setCameraMode(mode, immediate = false) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this._camera)
             return;
         const allowedModes = (_b = (_a = this._viewerOptions) === null || _a === void 0 ? void 0 : _a.allowedCameraModes) !== null && _b !== void 0 ? _b : ['explore', 'walk', 'tour', 'hybrid'];
@@ -75123,7 +75062,8 @@ class CameraManager {
         // Trigger callback and update UI
         if (oldMode !== mode) {
             (_e = (_d = this._viewerOptions) === null || _d === void 0 ? void 0 : _d.onCameraModeChanged) === null || _e === void 0 ? void 0 : _e.call(_d, mode);
-            (_f = this._analyticsManager) === null || _f === void 0 ? void 0 : _f.trackCameraModeChange(oldMode, mode); // Track event
+            (_f = this.onCameraModeChange) === null || _f === void 0 ? void 0 : _f.call(this, mode); // Call the new callback
+            (_g = this._analyticsManager) === null || _g === void 0 ? void 0 : _g.trackCameraModeChange(oldMode, mode); // Track event
             this._updateUIManager(); // Notify UI Manager of the change
         }
     }
@@ -108302,6 +108242,7 @@ class NavigationManager {
         this.waypointInfoElement = null; // Waypoint info popup (like HTML exports)
         this.prevButton = null;
         this.nextButton = null;
+        this.playPauseButton = null;
         this.cameraModeToggleContainer = null; // Container for general mode toggles
         this.walkExploreToggleContainer = null; // Container for Walk/Explore toggle
         this.mobileJoystickContainer = null; // Container for joystick UI
@@ -108403,7 +108344,7 @@ class NavigationManager {
                     this.onProgressUpdate(scrollPercentage / 100, currentWaypointIndex);
                 }
                 // --- Tour/Hybrid Mode Logic ---
-                if ((this.currentMode === 'hybrid' && !this.userControl) || (this.currentMode === 'tour' && !this.userControl)) {
+                if ((this.currentMode === 'hybrid') || (this.currentMode === 'tour' && !this.userControl)) {
                     this.updateCameraPositionFromPath();
                 }
                 // Update UI for tour/hybrid modes
@@ -108413,8 +108354,8 @@ class NavigationManager {
             }
             // Check waypoint triggers
             this.updateActiveWaypoint();
-            // --- Explore/Walk Mode Logic ---
-            if (this.currentMode === 'explore' || this.currentMode === 'walk') {
+            // --- Explore/Walk/Hybrid Mode Logic ---
+            if (this.currentMode === 'explore' || this.currentMode === 'walk' || (this.currentMode === 'hybrid' && this.userControl)) {
                 const deltaTime = this.scene.getEngine().getDeltaTime() / 1000.0;
                 this.updateExploreWalkMovement(deltaTime);
             }
@@ -108487,6 +108428,15 @@ class NavigationManager {
         const logicalDefault = this.waypoints.length > 0 ? 'tour' : 'explore';
         const preferredDefault = dataInitialMode || optionsDefaultMode || logicalDefault;
         this.currentMode = this.allowedModes.includes(preferredDefault) ? preferredDefault : this.allowedModes[0];
+        console.log('DEBUG NavigationManager initial mode setting:', {
+            dataInitialMode,
+            optionsDefaultMode,
+            logicalDefault,
+            preferredDefault,
+            allowedModes: this.allowedModes,
+            finalCurrentMode: this.currentMode,
+            waypointCount: this.waypoints.length
+        });
         // Set navigation parameters from options or use defaults
         this.transitionSpeed = (_a = this.options.transitionSpeed) !== null && _a !== void 0 ? _a : 1.5;
         this.cameraDampening = (_b = this.options.cameraDampening) !== null && _b !== void 0 ? _b : 0.1;
@@ -108525,7 +108475,14 @@ class NavigationManager {
                 this.targetRotation.copyFrom(this.camera.rotationQuaternion);
             }
         }
-        this.setupUI(); // Setup UI based on options
+        console.log('DEBUG NavigationManager: About to call setupUI...');
+        try {
+            this.setupUI(); // Setup UI based on options
+            console.log('DEBUG NavigationManager: setupUI completed successfully');
+        }
+        catch (error) {
+            console.error('DEBUG NavigationManager: Error in setupUI:', error);
+        }
         // Event handlers (scroll, keyboard, pointer) are attached/detached in setMode
         // Start autoplay if enabled and applicable
         if (this.autoPlayEnabled && this.waypoints.length > 0 && (this.currentMode === 'tour' || this.currentMode === 'hybrid')) {
@@ -108891,7 +108848,7 @@ class NavigationManager {
         var _a, _b;
         // Clear existing UI first
         this.removeUI();
-        console.log('NavigationManager: Setting up UI with:', {
+        console.log('DEBUG NavigationManager: Setting up UI with:', {
             waypoints: this.waypoints.length,
             allowedModes: this.allowedModes,
             currentMode: this.currentMode,
@@ -108900,10 +108857,11 @@ class NavigationManager {
             showCameraModeToggle: this.options.showCameraModeToggle,
             showWalkExploreToggle: this.options.showWalkExploreToggle,
             uiContainer: this.uiContainer ? 'found' : 'NOT FOUND',
-            uiType: ((_a = this.options.uiOptions) === null || _a === void 0 ? void 0 : _a.uiType) || 'minimal'
+            uiType: ((_a = this.options.uiOptions) === null || _a === void 0 ? void 0 : _a.uiType) || 'standard',
+            fullOptions: this.options
         });
         // Determine template type from options
-        const uiType = ((_b = this.options.uiOptions) === null || _b === void 0 ? void 0 : _b.uiType) || 'minimal';
+        const uiType = ((_b = this.options.uiOptions) === null || _b === void 0 ? void 0 : _b.uiType) || 'standard';
         // Setup UI based on template type
         switch (uiType) {
             case 'pro':
@@ -108994,6 +108952,30 @@ class NavigationManager {
                 this.prevButton.style.transition = 'all 0.2s ease';
                 this.prevButton.addEventListener('click', this.previousWaypoint);
                 buttonContainer.appendChild(this.prevButton);
+                // Play/Pause button (only if autoplay is enabled)
+                if (this.autoPlayEnabled) {
+                    this.playPauseButton = document.createElement('button');
+                    this.playPauseButton.className = 'storysplat-nav-button storysplat-play-pause-button';
+                    this.playPauseButton.innerHTML = this.isPlaying ? '⏸️' : '▶️';
+                    this.playPauseButton.style.background = 'rgba(0, 0, 0, 0.3)';
+                    this.playPauseButton.style.border = 'none';
+                    this.playPauseButton.style.color = 'white';
+                    this.playPauseButton.style.padding = '5px 10px';
+                    this.playPauseButton.style.fontSize = '14px';
+                    this.playPauseButton.style.borderRadius = '2px';
+                    this.playPauseButton.style.cursor = 'pointer';
+                    this.playPauseButton.style.transition = 'all 0.2s ease';
+                    this.playPauseButton.addEventListener('click', () => {
+                        if (this.isPlaying) {
+                            this.pause();
+                        }
+                        else {
+                            this.play();
+                        }
+                        this.updatePlayPauseButton();
+                    });
+                    buttonContainer.appendChild(this.playPauseButton);
+                }
                 this.nextButton = document.createElement('button');
                 this.nextButton.className = 'storysplat-nav-button storysplat-next-button';
                 this.nextButton.innerHTML = '→';
@@ -109017,24 +108999,8 @@ class NavigationManager {
         this.setupCommonUI(); // Add common UI elements (walk/explore toggles, etc.)
     }
     setupStandardTemplateUI() {
-        console.log('NavigationManager: Setting up STANDARD template UI');
-        // Standard template is similar to minimal but has waypoint info in scroll controls
-        // and supports inline/below button positioning
-        // --- Waypoint Info (Top of screen, like HTML exports) ---
-        this.waypointInfoElement = document.createElement('div');
-        this.waypointInfoElement.className = 'storysplat-waypoint-info';
-        this.waypointInfoElement.style.position = 'absolute';
-        this.waypointInfoElement.style.top = '0';
-        this.waypointInfoElement.style.left = '0';
-        this.waypointInfoElement.style.right = '0';
-        this.waypointInfoElement.style.background = 'rgba(0, 0, 0, 0.5)';
-        this.waypointInfoElement.style.color = 'white';
-        this.waypointInfoElement.style.textAlign = 'center';
-        this.waypointInfoElement.style.zIndex = '1000';
-        this.waypointInfoElement.style.pointerEvents = 'none';
-        this.waypointInfoElement.style.display = 'none';
-        this.waypointInfoElement.style.fontFamily = 'system-ui, -apple-system, sans-serif';
-        this.uiContainer.appendChild(this.waypointInfoElement);
+        console.log('DEBUG NavigationManager: Setting up STANDARD template UI');
+        // Standard template has waypoint info integrated into the navigator (not at top of screen)
         // --- Scroll Controls Container (Bottom center, like standard template) ---
         if (this.waypoints.length > 1) {
             this.scrollControlsContainer = document.createElement('div');
@@ -109053,6 +109019,19 @@ class NavigationManager {
             this.scrollControlsContainer.style.zIndex = '1000';
             this.scrollControlsContainer.style.background = 'rgba(0, 0, 0, 0.4)';
             this.scrollControlsContainer.style.borderRadius = '8px';
+            // --- Waypoint Info (Inside navigator for standard template) ---
+            this.waypointInfoElement = document.createElement('div');
+            this.waypointInfoElement.className = 'storysplat-waypoint-info';
+            this.waypointInfoElement.style.color = 'white';
+            this.waypointInfoElement.style.textAlign = 'center';
+            this.waypointInfoElement.style.pointerEvents = 'none';
+            this.waypointInfoElement.style.display = 'none';
+            this.waypointInfoElement.style.fontFamily = 'system-ui, -apple-system, sans-serif';
+            this.waypointInfoElement.style.fontSize = '14px';
+            this.waypointInfoElement.style.marginBottom = '5px';
+            this.waypointInfoElement.style.maxWidth = '500px';
+            this.waypointInfoElement.style.lineHeight = '1.4';
+            this.scrollControlsContainer.appendChild(this.waypointInfoElement);
             // Scroll percentage display (larger for standard) - ensure no duplicates exist
             if (!this.uiContainer.querySelector('.storysplat-scroll-percentage')) {
                 this.scrollPercentageElement = document.createElement('div');
@@ -109099,6 +109078,30 @@ class NavigationManager {
                 this.prevButton.style.transition = 'all 0.2s ease';
                 this.prevButton.addEventListener('click', this.previousWaypoint);
                 buttonContainer.appendChild(this.prevButton);
+                // Play/Pause button (only if autoplay is enabled)
+                if (this.autoPlayEnabled) {
+                    this.playPauseButton = document.createElement('button');
+                    this.playPauseButton.className = 'storysplat-nav-button storysplat-play-pause-button';
+                    this.playPauseButton.innerHTML = this.isPlaying ? '⏸️' : '▶️';
+                    this.playPauseButton.style.background = 'rgba(0, 0, 0, 0.5)';
+                    this.playPauseButton.style.border = '1px solid rgba(255, 255, 255, 0.3)';
+                    this.playPauseButton.style.color = 'white';
+                    this.playPauseButton.style.padding = '8px 16px';
+                    this.playPauseButton.style.fontSize = '14px';
+                    this.playPauseButton.style.borderRadius = '4px';
+                    this.playPauseButton.style.cursor = 'pointer';
+                    this.playPauseButton.style.transition = 'all 0.2s ease';
+                    this.playPauseButton.addEventListener('click', () => {
+                        if (this.isPlaying) {
+                            this.pause();
+                        }
+                        else {
+                            this.play();
+                        }
+                        this.updatePlayPauseButton();
+                    });
+                    buttonContainer.appendChild(this.playPauseButton);
+                }
                 this.nextButton = document.createElement('button');
                 this.nextButton.className = 'storysplat-nav-button storysplat-next-button';
                 this.nextButton.innerHTML = 'Next <span style="margin-left: 5px;">→</span>';
@@ -109117,6 +109120,8 @@ class NavigationManager {
             this.uiContainer.appendChild(this.scrollControlsContainer);
             console.log('NavigationManager: Created standard template scroll controls');
         }
+        // Add camera mode toggles to this template
+        this.createCameraModeToggles();
         this.setupCommonUI(); // Add common UI elements
     }
     setupProTemplateUI() {
@@ -109208,6 +109213,31 @@ class NavigationManager {
             this.progressIndicator.style.width = '0%';
             progressBarContainer.appendChild(this.progressIndicator);
             centerContent.appendChild(progressBarContainer);
+            // Play/Pause button (only if autoplay is enabled) - centered below progress bar
+            if (this.autoPlayEnabled) {
+                this.playPauseButton = document.createElement('button');
+                this.playPauseButton.className = 'storysplat-nav-button storysplat-play-pause-button';
+                this.playPauseButton.innerHTML = this.isPlaying ? '⏸️' : '▶️';
+                this.playPauseButton.style.background = 'rgba(0, 0, 0, 0.5)';
+                this.playPauseButton.style.border = 'none';
+                this.playPauseButton.style.color = 'white';
+                this.playPauseButton.style.padding = '6px 12px';
+                this.playPauseButton.style.fontSize = '14px';
+                this.playPauseButton.style.borderRadius = '4px';
+                this.playPauseButton.style.cursor = 'pointer';
+                this.playPauseButton.style.transition = 'background 0.2s ease';
+                this.playPauseButton.style.marginTop = '5px';
+                this.playPauseButton.addEventListener('click', () => {
+                    if (this.isPlaying) {
+                        this.pause();
+                    }
+                    else {
+                        this.play();
+                    }
+                    this.updatePlayPauseButton();
+                });
+                centerContent.appendChild(this.playPauseButton);
+            }
             this.scrollControlsContainer.appendChild(centerContent);
             // Next button (right side)
             if (this.options.showNavButtons !== false) {
@@ -109229,33 +109259,99 @@ class NavigationManager {
             this.uiContainer.appendChild(this.scrollControlsContainer);
             console.log('NavigationManager: Created pro template scroll controls');
         }
+        // For pro template, create camera mode buttons on the left side instead  
+        this.createProTemplateCameraModeToggles();
         this.setupCommonUI(); // Add common UI elements
     }
+    createProTemplateCameraModeToggles() {
+        // Show if explicitly enabled or if not explicitly disabled and we have multiple modes
+        const shouldShowCameraModeToggle = this.options.showCameraModeToggle === true || (this.options.showCameraModeToggle !== false && this.allowedModes.length > 1);
+        if (shouldShowCameraModeToggle) {
+            console.log('NavigationManager: Creating PRO template camera mode toggle container (left side)');
+            this.cameraModeToggleContainer = document.createElement('div');
+            this.cameraModeToggleContainer.className = 'storysplat-camera-mode-toggle storysplat-camera-mode-toggle-pro';
+            this.cameraModeToggleContainer.id = 'modeToggleContainer';
+            // Position on left side, vertically centered and stacked
+            this.cameraModeToggleContainer.style.position = 'absolute';
+            this.cameraModeToggleContainer.style.left = '20px';
+            this.cameraModeToggleContainer.style.top = '50%';
+            this.cameraModeToggleContainer.style.transform = 'translateY(-50%)';
+            this.cameraModeToggleContainer.style.display = 'flex';
+            this.cameraModeToggleContainer.style.flexDirection = 'column';
+            this.cameraModeToggleContainer.style.gap = '8px';
+            this.cameraModeToggleContainer.style.zIndex = '1000';
+            // Conditional button creation like HTML exports
+            const buttonsToCreate = [];
+            // Walk button only if walk allowed AND explore not allowed
+            if (this.allowedModes.includes('walk') && !this.allowedModes.includes('explore')) {
+                buttonsToCreate.push('walk');
+            }
+            // Explore button if explore is allowed
+            if (this.allowedModes.includes('explore')) {
+                buttonsToCreate.push('explore');
+            }
+            // Tour button if tour is allowed
+            if (this.allowedModes.includes('tour')) {
+                buttonsToCreate.push('tour');
+            }
+            // Hybrid button if hybrid is allowed (also check for 'auto' which maps to hybrid)
+            if (this.allowedModes.includes('hybrid') || this.allowedModes.includes('auto')) {
+                buttonsToCreate.push('hybrid');
+            }
+            buttonsToCreate.forEach((mode) => {
+                var _a;
+                const button = document.createElement('button');
+                button.className = `mode-button mode-button-pro`;
+                button.id = `mode${mode.charAt(0).toUpperCase() + mode.slice(1)}`;
+                button.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
+                button.dataset.mode = mode;
+                // Style for pro template - vertical stack on left side
+                button.style.padding = '8px 12px';
+                button.style.background = 'rgba(0, 0, 0, 0.7)';
+                button.style.border = `1px solid ${this.options.uiColor || '#4CAF50'}`;
+                button.style.color = 'white';
+                button.style.cursor = 'pointer';
+                button.style.fontSize = '14px';
+                button.style.borderRadius = '4px';
+                button.style.transition = 'all 0.2s ease';
+                button.style.minWidth = '80px';
+                button.style.textAlign = 'center';
+                button.addEventListener('click', () => this.setMode(mode));
+                (_a = this.cameraModeToggleContainer) === null || _a === void 0 ? void 0 : _a.appendChild(button);
+            });
+            // Add directly to main UI container (not scroll controls)
+            this.uiContainer.appendChild(this.cameraModeToggleContainer);
+            console.log('DEBUG NavigationManager: PRO template camera mode toggle container created and added to left side');
+        }
+    }
     createCameraModeToggles() {
         // Show if explicitly enabled or if not explicitly disabled and we have multiple modes
         const shouldShowCameraModeToggle = this.options.showCameraModeToggle === true || (this.options.showCameraModeToggle !== false && this.allowedModes.length > 1);
-        console.log('NavigationManager: Camera mode toggle check:', {
+        console.log('DEBUG NavigationManager: Camera mode toggle check:', {
             showCameraModeToggle: this.options.showCameraModeToggle,
+            allowedModes: this.allowedModes,
             allowedModesLength: this.allowedModes.length,
-            shouldShow: shouldShowCameraModeToggle
+            shouldShow: shouldShowCameraModeToggle,
+            scrollControlsContainer: this.scrollControlsContainer ? 'exists' : 'null'
         });
         if (shouldShowCameraModeToggle) {
             console.log('NavigationManager: Creating camera mode toggle container');
             this.cameraModeToggleContainer = document.createElement('div');
             this.cameraModeToggleContainer.className = 'storysplat-camera-mode-toggle';
             this.cameraModeToggleContainer.id = 'modeToggleContainer';
-            // Style the container to match HTML exports
-            this.cameraModeToggleContainer.style.margin = '10px 0';
+            // Style the container for minimal template - position at bottom
+            this.cameraModeToggleContainer.style.margin = '5px 0';
             this.cameraModeToggleContainer.style.display = 'flex';
             this.cameraModeToggleContainer.style.justifyContent = 'center';
             // Create inner toggle bar (this is the #modeToggle div in HTML exports)
             const modeToggleBar = document.createElement('div');
             modeToggleBar.id = 'modeToggle';
             modeToggleBar.style.display = 'flex';
-            modeToggleBar.style.border = `1px solid ${this.options.uiColor || '#4CAF50'}`;
-            modeToggleBar.style.borderRadius = '5px';
+            modeToggleBar.style.border = 'none';
+            modeToggleBar.style.borderRadius = '3px';
             modeToggleBar.style.overflow = 'hidden';
-            modeToggleBar.style.width = '250px';
+            modeToggleBar.style.width = 'auto';
+            modeToggleBar.style.gap = '4px';
             // Conditional button creation like HTML exports
             const buttonsToCreate = [];
             // Walk button only if walk allowed AND explore not allowed
@@ -109270,8 +109366,8 @@ class NavigationManager {
             if (this.allowedModes.includes('tour')) {
                 buttonsToCreate.push('tour');
             }
-            // Hybrid button if hybrid is allowed
-            if (this.allowedModes.includes('hybrid')) {
+            // Hybrid button if hybrid is allowed (also check for 'auto' which maps to hybrid)
+            if (this.allowedModes.includes('hybrid') || this.allowedModes.includes('auto')) {
                 buttonsToCreate.push('hybrid');
             }
             buttonsToCreate.forEach((mode) => {
@@ -109280,27 +109376,44 @@ class NavigationManager {
                 button.id = `mode${mode.charAt(0).toUpperCase() + mode.slice(1)}`;
                 button.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
                 button.dataset.mode = mode;
-                // Style exactly like HTML exports
+                // Style for minimal template - transparent until hover
                 button.style.flex = '1';
-                button.style.padding = '10px';
-                button.style.background = this.options.uiColor || '#4CAF50';
+                button.style.padding = '6px 10px';
+                button.style.background = 'transparent';
                 button.style.border = 'none';
                 button.style.color = 'white';
                 button.style.cursor = 'pointer';
-                button.style.fontSize = '16px';
-                button.style.transition = 'background-color 0.3s';
+                button.style.fontSize = '12px';
+                button.style.transition = 'background-color 0.3s, opacity 0.3s';
+                button.style.borderRadius = '3px';
+                button.style.opacity = '0.6';
+                button.style.textAlign = 'center';
+                button.style.margin = '0 2px';
+                button.style.minWidth = '60px';
                 button.style.width = `${100 / buttonsToCreate.length}%`;
+                // Add hover effects
+                button.addEventListener('mouseenter', () => {
+                    button.style.background = 'rgba(0, 0, 0, 0.7)';
+                    button.style.opacity = '1';
+                });
+                button.addEventListener('mouseleave', () => {
+                    button.style.background = 'transparent';
+                    button.style.opacity = '0.6';
+                });
                 button.addEventListener('click', () => this.setMode(mode));
                 modeToggleBar.appendChild(button);
             });
             this.cameraModeToggleContainer.appendChild(modeToggleBar);
             // Add to scroll controls if they exist (like HTML exports), otherwise to main UI  
             if (this.scrollControlsContainer) {
+                console.log('DEBUG NavigationManager: Adding camera mode toggle to scroll controls container');
                 this.scrollControlsContainer.appendChild(this.cameraModeToggleContainer);
             }
             else {
+                console.log('DEBUG NavigationManager: Adding camera mode toggle to main UI container');
                 this.uiContainer.appendChild(this.cameraModeToggleContainer);
             }
+            console.log('DEBUG NavigationManager: Camera mode toggle container created and added to DOM');
         }
     }
     setupCommonUI() {
@@ -109372,21 +109485,35 @@ class NavigationManager {
     updateUI() {
         // --- Navigation Progress/Buttons ---
         const progress = this.getProgress();
-        const showScrollControls = (this.currentMode === 'tour' || this.currentMode === 'hybrid');
+        const showNavigationControls = (this.currentMode === 'tour' || this.currentMode === 'hybrid');
+        const hasCameraModeToggles = this.cameraModeToggleContainer !== null;
         // Update progress indicator
         if (this.progressIndicator) {
             this.progressIndicator.style.width = `${progress * 100}%`;
+            this.progressIndicator.style.display = showNavigationControls ? 'block' : 'none';
         }
-        // Update scroll percentage
+        // Update scroll percentage - hide in explore/walk modes
         if (this.scrollPercentageElement) {
             this.scrollPercentageElement.textContent = `${Math.round(progress * 100)}%`;
+            this.scrollPercentageElement.style.display = showNavigationControls ? 'block' : 'none';
+        }
+        // Show/hide prev/next buttons
+        if (this.prevButton) {
+            this.prevButton.style.display = showNavigationControls ? 'block' : 'none';
         }
-        // Show/hide entire scroll controls container
+        if (this.nextButton) {
+            this.nextButton.style.display = showNavigationControls ? 'block' : 'none';
+        }
+        // Show/hide play/pause button
+        if (this.playPauseButton) {
+            this.playPauseButton.style.display = showNavigationControls ? 'block' : 'none';
+        }
+        // Keep scroll controls container visible if we have camera mode toggles OR navigation controls
         if (this.scrollControlsContainer) {
-            this.scrollControlsContainer.style.display = showScrollControls ? 'flex' : 'none';
+            this.scrollControlsContainer.style.display = (showNavigationControls || hasCameraModeToggles) ? 'flex' : 'none';
         }
-        // Update button states (only when controls are visible)
-        if (showScrollControls) {
+        // Update button states (only when navigation controls are visible)
+        if (showNavigationControls) {
             if (this.prevButton) {
                 this.prevButton.disabled = progress <= 0 && !this.loopMode;
                 this.prevButton.style.opacity = this.prevButton.disabled ? '0.4' : '1';
@@ -109458,6 +109585,12 @@ class NavigationManager {
             console.error("Failed to initialize virtual joysticks:", error);
         }
     }
+    // Update play/pause button icon based on current state
+    updatePlayPauseButton() {
+        if (this.playPauseButton) {
+            this.playPauseButton.innerHTML = this.isPlaying ? '⏸️' : '▶️';
+        }
+    }
     // Update virtual joystick visibility based on current camera mode
     updateVirtualJoystickVisibility() {
         if (!this.isMobileDevice || !VirtualJoystick.Canvas)
@@ -109712,6 +109845,7 @@ class NavigationManager {
         }
         this.isPlaying = true;
         this.userControl = false;
+        this.updatePlayPauseButton(); // Update button icon
         console.log("Autoplay started/resumed");
         // If starting from the end (e.g., after looping manually), reset
         if (this.scrollPosition >= this.path.length - 1 && this.loopMode) {
@@ -109724,6 +109858,7 @@ class NavigationManager {
     pause() {
         if (this.isPlaying) {
             this.isPlaying = false;
+            this.updatePlayPauseButton(); // Update button icon
             console.log("Autoplay paused");
         }
     }
@@ -160898,6 +161033,13 @@ class SplatSwapManager {
     }
 }
 
+var UIType;
+(function (UIType) {
+    UIType["Standard"] = "standard";
+    UIType["Minimal"] = "minimal";
+    UIType["Pro"] = "pro";
+})(UIType || (UIType = {}));
+
 /**
  * Manages the preloader UI element.
  */
@@ -161466,6 +161608,775 @@ class MuteButtonUI {
     }
 }
 
+/**
+ * Manages UI layout templates for the StorySplat viewer
+ * Renders different UI layouts based on the uiType from scene JSON
+ */
+class TemplateManager {
+    constructor(targetElement, options) {
+        var _a;
+        // UI Components
+        this.preloaderUI = null;
+        this.startButtonUI = null;
+        this.watermarkUI = null;
+        this.helpPanelUI = null;
+        this.muteButtonUI = null;
+        // UI Elements for templates
+        this.controlsContainer = null;
+        this.modeToggleContainer = null;
+        this.progressContainer = null;
+        this.navigationContainer = null;
+        this.targetElement = targetElement;
+        this.options = options;
+        this.uiType = ((_a = options.uiOptions) === null || _a === void 0 ? void 0 : _a.uiType) || 'standard';
+        console.log(`TemplateManager: Initializing with uiType: ${this.uiType}`);
+    }
+    /**
+     * Initialize UI components based on template type
+     */
+    async initializeUI(audioManager, navigationManager, cameraManager, onStartExperience) {
+        // Create base UI components that are common to all templates
+        this.createBaseComponents(audioManager, onStartExperience);
+        // Apply template-specific layout
+        switch (this.uiType) {
+            case UIType.Minimal:
+            case 'minimal':
+                await this.applyMinimalTemplate(navigationManager, cameraManager);
+                break;
+            case UIType.Pro:
+            case 'pro':
+                await this.applyProTemplate(navigationManager, cameraManager);
+                break;
+            case UIType.Standard:
+            case 'standard':
+            default:
+                await this.applyStandardTemplate(navigationManager, cameraManager);
+                break;
+        }
+    }
+    /**
+     * Create base UI components common to all templates
+     */
+    createBaseComponents(audioManager, onStartExperience) {
+        var _a, _b, _c, _d, _e, _f;
+        // Preloader (always created)
+        const defaultPreloaderConfig = {
+            enabled: true,
+            imageUrl: 'https://firebasestorage.googleapis.com/v0/b/story-splat.firebasestorage.app/o/public%2Fimages%2FStorySplat.webp?alt=media&token=953e8ab3-1865-4ac1-a98d-b548b7066bda',
+            lottieUrl: 'https://firebasestorage.googleapis.com/v0/b/story-splat.firebasestorage.app/o/public%2Flotties%2FstorySplatLottie.json?alt=media&token=d7edc19d-9cb8-4c20-96f3-d23b6d1272b4',
+            uiColor: ((_a = this.options) === null || _a === void 0 ? void 0 : _a.uiColor) || '#4CAF50'
+        };
+        const preloaderConfig = Object.assign(Object.assign({}, defaultPreloaderConfig), (_b = this.options) === null || _b === void 0 ? void 0 : _b.preloaderConfig);
+        this.preloaderUI = new PreloaderUI(this.targetElement, preloaderConfig);
+        this.preloaderUI.create();
+        // Start Button (conditional)
+        if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showStartExperience) {
+            this.startButtonUI = new StartButtonUI(this.targetElement, this.options, onStartExperience || (() => { }));
+            this.startButtonUI.create();
+        }
+        // Watermark (conditional)
+        this.watermarkUI = new WatermarkUI(this.targetElement, this.options);
+        this.watermarkUI.create();
+        // Help Panel (conditional)
+        if ((_d = this.options) === null || _d === void 0 ? void 0 : _d.showHelpButton) {
+            this.helpPanelUI = new HelpPanelUI(this.targetElement, this.options);
+            this.helpPanelUI.create();
+        }
+        // Mute Button (conditional)
+        if (((_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.audio) === null || _f === void 0 ? void 0 : _f.showMuteButton) && audioManager) {
+            this.muteButtonUI = new MuteButtonUI(this.targetElement, this.options, audioManager);
+            this.muteButtonUI.create();
+        }
+    }
+    /**
+     * Apply Minimal template layout (overlay controls)
+     */
+    async applyMinimalTemplate(navigationManager, cameraManager) {
+        console.log('TemplateManager: Applying Minimal template');
+        // Add minimal template class
+        this.targetElement.classList.add('template-minimal');
+        // Create minimal controls container (overlay style)
+        if (this.options.showProgressBar && navigationManager) {
+            this.createMinimalControls(navigationManager);
+        }
+        // Create mode toggle if multiple modes allowed
+        if (this.shouldShowModeToggle() && cameraManager) {
+            this.createMinimalModeToggle(cameraManager);
+        }
+        // Apply minimal template styles
+        this.applyMinimalStyles();
+    }
+    /**
+     * Apply Standard template layout (bottom navigation)
+     */
+    async applyStandardTemplate(navigationManager, cameraManager) {
+        console.log('TemplateManager: Applying Standard template');
+        // Add standard template class
+        this.targetElement.classList.add('template-standard');
+        // Create bottom navigation container
+        if ((this.options.showProgressBar || this.options.showNavButtons) && navigationManager) {
+            this.createStandardControls(navigationManager);
+        }
+        // Create mode toggle if multiple modes allowed
+        if (this.shouldShowModeToggle() && cameraManager) {
+            this.createStandardModeToggle(cameraManager);
+        }
+        // Apply standard template styles
+        this.applyStandardStyles();
+    }
+    /**
+     * Apply Pro template layout (enhanced bottom navigation)
+     */
+    async applyProTemplate(navigationManager, cameraManager) {
+        console.log('TemplateManager: Applying Pro template');
+        // Add pro template class
+        this.targetElement.classList.add('template-pro');
+        // Create waypoint info display at top
+        if (navigationManager) {
+            this.createProWaypointInfo();
+        }
+        // Create enhanced bottom navigation
+        if ((this.options.showProgressBar || this.options.showNavButtons) && navigationManager) {
+            this.createProControls(navigationManager);
+        }
+        // Create mode toggle on left side
+        if (this.shouldShowModeToggle() && cameraManager) {
+            this.createProModeToggle(cameraManager);
+        }
+        // Apply pro template styles
+        this.applyProStyles();
+    }
+    /**
+     * Helper to determine if mode toggle should be shown
+     */
+    shouldShowModeToggle() {
+        const allowedModes = this.options.allowedCameraModes || [];
+        return this.options.showCameraModeToggle !== false && allowedModes.length > 1;
+    }
+    /**
+     * Create minimal overlay controls
+     */
+    createMinimalControls(navigationManager) {
+        // Create overlay container
+        this.controlsContainer = document.createElement('div');
+        this.controlsContainer.id = 'scrollControls';
+        this.controlsContainer.className = 'minimal-controls';
+        // Progress bar
+        if (this.options.showProgressBar) {
+            const progressContainer = document.createElement('div');
+            progressContainer.className = 'minimal-progress-container';
+            const progressBar = document.createElement('div');
+            progressBar.className = 'minimal-progress-bar';
+            const progressFill = document.createElement('div');
+            progressFill.className = 'minimal-progress-fill';
+            progressFill.id = 'progressBar';
+            progressBar.appendChild(progressFill);
+            progressContainer.appendChild(progressBar);
+            // Add percentage display
+            const percentageDisplay = document.createElement('div');
+            percentageDisplay.className = 'minimal-percentage';
+            percentageDisplay.id = 'scrollPercentage';
+            percentageDisplay.textContent = '0%';
+            progressContainer.appendChild(percentageDisplay);
+            this.controlsContainer.appendChild(progressContainer);
+        }
+        // Navigation buttons (inline with progress)
+        if (this.options.showNavButtons) {
+            const navContainer = document.createElement('div');
+            navContainer.className = 'minimal-nav-buttons';
+            const prevButton = this.createNavButton('prev', 'minimal');
+            const nextButton = this.createNavButton('next', 'minimal');
+            navContainer.appendChild(prevButton);
+            navContainer.appendChild(nextButton);
+            this.controlsContainer.appendChild(navContainer);
+        }
+        this.targetElement.appendChild(this.controlsContainer);
+        // Connect to navigation manager
+        this.connectNavigationControls(navigationManager);
+    }
+    /**
+     * Create standard bottom controls
+     */
+    createStandardControls(navigationManager) {
+        // Create bottom controls container
+        this.controlsContainer = document.createElement('div');
+        this.controlsContainer.id = 'scrollControls';
+        this.controlsContainer.className = 'standard-controls';
+        // Create controls content container
+        const controlsContent = document.createElement('div');
+        controlsContent.className = 'standard-controls-content';
+        // Progress section
+        const progressSection = document.createElement('div');
+        progressSection.className = 'standard-progress-section';
+        // Percentage display
+        const percentageDisplay = document.createElement('div');
+        percentageDisplay.id = 'scrollPercentage';
+        percentageDisplay.className = 'standard-percentage';
+        percentageDisplay.textContent = '0%';
+        progressSection.appendChild(percentageDisplay);
+        // Progress bar container
+        const progressContainer = document.createElement('div');
+        progressContainer.className = 'standard-progress-container';
+        progressContainer.id = 'progressBarContainer';
+        const progressBar = document.createElement('div');
+        progressBar.className = 'standard-progress-bar';
+        progressBar.id = 'progressBar';
+        progressContainer.appendChild(progressBar);
+        progressSection.appendChild(progressContainer);
+        controlsContent.appendChild(progressSection);
+        // Navigation buttons
+        if (this.options.showNavButtons) {
+            const buttonsContainer = document.createElement('div');
+            buttonsContainer.className = 'standard-buttons-container';
+            buttonsContainer.id = 'scrollButtons';
+            const prevButton = this.createNavButton('prev', 'standard');
+            const nextButton = this.createNavButton('next', 'standard');
+            // Add autoplay button if enabled
+            if (this.options.autoPlayEnabled) {
+                const autoplayControls = document.createElement('div');
+                autoplayControls.id = 'autoplayControls';
+                autoplayControls.className = 'standard-autoplay';
+                const playPauseButton = document.createElement('button');
+                playPauseButton.id = 'playPauseButton';
+                playPauseButton.className = 'standard-play-pause';
+                playPauseButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
+                autoplayControls.appendChild(playPauseButton);
+                buttonsContainer.appendChild(prevButton);
+                buttonsContainer.appendChild(autoplayControls);
+                buttonsContainer.appendChild(nextButton);
+            }
+            else {
+                buttonsContainer.appendChild(prevButton);
+                buttonsContainer.appendChild(nextButton);
+            }
+            controlsContent.appendChild(buttonsContainer);
+        }
+        this.controlsContainer.appendChild(controlsContent);
+        this.targetElement.appendChild(this.controlsContainer);
+        // Connect to navigation manager
+        this.connectNavigationControls(navigationManager);
+    }
+    /**
+     * Create pro enhanced controls
+     */
+    createProControls(navigationManager) {
+        // Implementation based on pro template HTML
+        // TODO: Implement based on pro template HTML
+    }
+    /**
+     * Create minimal mode toggle
+     */
+    createMinimalModeToggle(cameraManager) {
+        const allowedModes = this.options.allowedCameraModes || [];
+        if (allowedModes.length <= 1)
+            return;
+        this.modeToggleContainer = document.createElement('div');
+        this.modeToggleContainer.id = 'modeToggleContainer';
+        this.modeToggleContainer.className = 'minimal-mode-toggle';
+        // Create mode buttons
+        if (allowedModes.includes('explore')) {
+            const exploreButton = document.createElement('button');
+            exploreButton.id = 'modeExplore';
+            exploreButton.className = 'mode-button';
+            exploreButton.textContent = 'Explore';
+            exploreButton.addEventListener('click', () => cameraManager.setCameraMode('explore'));
+            this.modeToggleContainer.appendChild(exploreButton);
+        }
+        if (allowedModes.includes('tour')) {
+            const tourButton = document.createElement('button');
+            tourButton.id = 'modeTour';
+            tourButton.className = 'mode-button';
+            tourButton.textContent = 'Tour';
+            tourButton.addEventListener('click', () => cameraManager.setCameraMode('tour'));
+            this.modeToggleContainer.appendChild(tourButton);
+        }
+        if (allowedModes.includes('hybrid')) {
+            const hybridButton = document.createElement('button');
+            hybridButton.id = 'modeHybrid';
+            hybridButton.className = 'mode-button';
+            hybridButton.textContent = 'Hybrid';
+            hybridButton.addEventListener('click', () => cameraManager.setCameraMode('hybrid'));
+            this.modeToggleContainer.appendChild(hybridButton);
+        }
+        if (allowedModes.includes('walk')) {
+            const walkButton = document.createElement('button');
+            walkButton.id = 'modeWalk';
+            walkButton.className = 'mode-button';
+            walkButton.textContent = 'Walk';
+            walkButton.addEventListener('click', () => cameraManager.setCameraMode('walk'));
+            this.modeToggleContainer.appendChild(walkButton);
+        }
+        this.targetElement.appendChild(this.modeToggleContainer);
+        // Update button states based on current mode
+        this.updateModeToggleState(cameraManager.currentMode);
+        // Listen for mode changes
+        cameraManager.onCameraModeChange = (mode) => {
+            this.updateModeToggleState(mode);
+        };
+    }
+    /**
+     * Create standard mode toggle
+     */
+    createStandardModeToggle(cameraManager) {
+        const allowedModes = this.options.allowedCameraModes || [];
+        if (allowedModes.length <= 1)
+            return;
+        this.modeToggleContainer = document.createElement('div');
+        this.modeToggleContainer.id = 'modeToggleContainer';
+        this.modeToggleContainer.className = 'standard-mode-toggle';
+        const toggleRow = document.createElement('div');
+        toggleRow.className = 'standard-mode-toggle-row';
+        // Create mode buttons
+        if (allowedModes.includes('explore')) {
+            const exploreButton = document.createElement('button');
+            exploreButton.id = 'modeExplore';
+            exploreButton.className = 'mode-button';
+            exploreButton.textContent = 'Explore';
+            exploreButton.addEventListener('click', () => cameraManager.setCameraMode('explore'));
+            toggleRow.appendChild(exploreButton);
+        }
+        if (allowedModes.includes('tour')) {
+            const tourButton = document.createElement('button');
+            tourButton.id = 'modeTour';
+            tourButton.className = 'mode-button';
+            tourButton.textContent = 'Tour';
+            tourButton.addEventListener('click', () => cameraManager.setCameraMode('tour'));
+            toggleRow.appendChild(tourButton);
+        }
+        if (allowedModes.includes('hybrid')) {
+            const hybridButton = document.createElement('button');
+            hybridButton.id = 'modeHybrid';
+            hybridButton.className = 'mode-button';
+            hybridButton.textContent = 'Hybrid';
+            hybridButton.addEventListener('click', () => cameraManager.setCameraMode('hybrid'));
+            toggleRow.appendChild(hybridButton);
+        }
+        if (allowedModes.includes('walk')) {
+            const walkButton = document.createElement('button');
+            walkButton.id = 'modeWalk';
+            walkButton.className = 'mode-button';
+            walkButton.textContent = 'Walk';
+            walkButton.addEventListener('click', () => cameraManager.setCameraMode('walk'));
+            toggleRow.appendChild(walkButton);
+        }
+        this.modeToggleContainer.appendChild(toggleRow);
+        this.targetElement.appendChild(this.modeToggleContainer);
+        // Update button states based on current mode
+        this.updateModeToggleState(cameraManager.currentMode);
+        // Listen for mode changes
+        cameraManager.onCameraModeChange = (mode) => {
+            this.updateModeToggleState(mode);
+        };
+    }
+    /**
+     * Create pro mode toggle (left side)
+     */
+    createProModeToggle(cameraManager) {
+        // Implementation for pro mode toggle
+        // TODO: Implement mode toggle UI
+    }
+    /**
+     * Create pro waypoint info display
+     */
+    createProWaypointInfo() {
+        const waypointInfo = document.createElement('div');
+        waypointInfo.id = 'waypointInfo';
+        waypointInfo.className = 'pro-waypoint-info';
+        this.targetElement.appendChild(waypointInfo);
+    }
+    /**
+     * Helper to create navigation buttons
+     */
+    createNavButton(type, style) {
+        const button = document.createElement('button');
+        button.id = type === 'prev' ? 'prevButton' : 'nextButton';
+        button.className = `${style}-nav-button ${type}`;
+        button.innerHTML = type === 'prev' ? '←' : '→';
+        button.title = type === 'prev' ? 'Previous' : 'Next';
+        return button;
+    }
+    /**
+     * Connect navigation controls to NavigationManager
+     */
+    connectNavigationControls(navigationManager) {
+        // Connect progress updates
+        if (this.options.showProgressBar) ;
+        // Connect button clicks
+        if (this.options.showNavButtons) {
+            const prevButton = document.getElementById('prevButton');
+            const nextButton = document.getElementById('nextButton');
+            prevButton === null || prevButton === void 0 ? void 0 : prevButton.addEventListener('click', () => navigationManager.previousWaypoint());
+            nextButton === null || nextButton === void 0 ? void 0 : nextButton.addEventListener('click', () => navigationManager.nextWaypoint());
+        }
+    }
+    /**
+     * Apply minimal template styles
+     */
+    applyMinimalStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            .template-minimal .minimal-controls {
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                display: flex;
+                align-items: center;
+                gap: 20px;
+                z-index: 100;
+            }
+            
+            .template-minimal .minimal-progress-container {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+            
+            .template-minimal .minimal-progress-bar {
+                width: 200px;
+                height: 2px;
+                background: rgba(255, 255, 255, 0.2);
+                border-radius: 1px;
+                overflow: hidden;
+            }
+            
+            .template-minimal .minimal-progress-fill {
+                height: 100%;
+                background: ${this.options.uiColor || '#4CAF50'};
+                transition: width 0.3s ease;
+                width: 0%;
+            }
+            
+            .template-minimal .minimal-percentage {
+                color: white;
+                font-size: 12px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                min-width: 35px;
+                text-align: right;
+            }
+            
+            .template-minimal .minimal-nav-buttons {
+                display: flex;
+                gap: 10px;
+            }
+            
+            .template-minimal .minimal-nav-button {
+                background: rgba(0, 0, 0, 0.5);
+                border: none;
+                color: white;
+                width: 32px;
+                height: 32px;
+                border-radius: 50%;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s ease;
+            }
+            
+            .template-minimal .minimal-nav-button:hover {
+                background: rgba(0, 0, 0, 0.7);
+            }
+            
+            .template-minimal .minimal-mode-toggle {
+                position: fixed;
+                bottom: 70px;
+                left: 50%;
+                transform: translateX(-50%);
+                display: flex;
+                gap: 10px;
+                z-index: 100;
+            }
+            
+            .template-minimal .mode-button {
+                background: rgba(0, 0, 0, 0.5);
+                border: none;
+                color: white;
+                padding: 6px 12px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 12px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                transition: all 0.2s ease;
+                min-width: 60px;
+            }
+            
+            .template-minimal .mode-button:hover {
+                background: rgba(0, 0, 0, 0.7);
+            }
+            
+            .template-minimal .mode-button.selected {
+                background: ${this.options.uiColor || '#4CAF50'};
+            }
+            
+            @media (max-width: 768px) {
+                .template-minimal .minimal-controls {
+                    bottom: 10px;
+                    gap: 15px;
+                }
+                
+                .template-minimal .minimal-mode-toggle {
+                    bottom: 50px;
+                }
+                
+                .template-minimal .mode-button {
+                    padding: 5px 10px;
+                    font-size: 11px;
+                    min-width: 50px;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    /**
+     * Apply standard template styles
+     */
+    applyStandardStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+            .template-standard .standard-controls {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background: rgba(0, 0, 0, 0.8);
+                backdrop-filter: blur(10px);
+                padding: 15px 20px;
+                z-index: 100;
+                display: flex;
+                justify-content: center;
+            }
+            
+            .template-standard .standard-controls-content {
+                width: 100%;
+                max-width: 800px;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+            
+            .template-standard .standard-progress-section {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+            }
+            
+            .template-standard .standard-percentage {
+                color: white;
+                font-size: 14px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            }
+            
+            .template-standard .standard-progress-container {
+                width: 100%;
+                height: 4px;
+                background: rgba(255, 255, 255, 0.2);
+                border-radius: 2px;
+                overflow: hidden;
+            }
+            
+            .template-standard .standard-progress-bar {
+                height: 100%;
+                background: ${this.options.uiColor || '#4CAF50'};
+                transition: width 0.3s ease;
+                width: 0%;
+            }
+            
+            .template-standard .standard-buttons-container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 15px;
+                margin-top: 5px;
+            }
+            
+            .template-standard .standard-nav-button {
+                background: rgba(255, 255, 255, 0.1);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                color: white;
+                padding: 8px 20px;
+                border-radius: 20px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                font-size: 14px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                transition: all 0.2s ease;
+            }
+            
+            .template-standard .standard-nav-button:hover {
+                background: rgba(255, 255, 255, 0.2);
+                transform: translateY(-1px);
+            }
+            
+            .template-standard .standard-autoplay {
+                display: flex;
+                align-items: center;
+            }
+            
+            .template-standard .standard-play-pause {
+                background: rgba(255, 255, 255, 0.1);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                color: white;
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s ease;
+            }
+            
+            .template-standard .standard-play-pause:hover {
+                background: rgba(255, 255, 255, 0.2);
+            }
+            
+            .template-standard .standard-play-pause svg {
+                width: 16px;
+                height: 16px;
+                fill: currentColor;
+            }
+            
+            .template-standard .standard-mode-toggle {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 100;
+            }
+            
+            .template-standard .standard-mode-toggle-row {
+                display: flex;
+                gap: 5px;
+                background: rgba(0, 0, 0, 0.8);
+                backdrop-filter: blur(10px);
+                padding: 5px;
+                border-radius: 8px;
+            }
+            
+            .template-standard .mode-button {
+                background: rgba(255, 255, 255, 0.1);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                color: white;
+                padding: 8px 16px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 13px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                transition: all 0.2s ease;
+                min-width: 70px;
+            }
+            
+            .template-standard .mode-button:hover {
+                background: rgba(255, 255, 255, 0.2);
+            }
+            
+            .template-standard .mode-button.selected {
+                background: ${this.options.uiColor || '#4CAF50'};
+                border-color: ${this.options.uiColor || '#4CAF50'};
+            }
+            
+            @media (max-width: 768px) {
+                .template-standard .standard-controls {
+                    padding: 10px 15px;
+                }
+                
+                .template-standard .standard-nav-button {
+                    padding: 6px 15px;
+                    font-size: 13px;
+                }
+                
+                .template-standard .standard-mode-toggle {
+                    top: 10px;
+                    right: 10px;
+                }
+                
+                .template-standard .mode-button {
+                    padding: 6px 12px;
+                    font-size: 12px;
+                    min-width: 60px;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    /**
+     * Apply pro template styles
+     */
+    applyProStyles() {
+        // TODO: Add pro template CSS
+    }
+    /**
+     * Update progress display
+     */
+    updateProgress(percentage) {
+        const progressBar = document.getElementById('progressBar');
+        const percentageDisplay = document.getElementById('scrollPercentage');
+        if (progressBar) {
+            progressBar.style.width = `${percentage}%`;
+        }
+        if (percentageDisplay) {
+            percentageDisplay.textContent = `${Math.round(percentage)}%`;
+        }
+    }
+    /**
+     * Get preloader UI instance (for direct access if needed)
+     */
+    getPreloaderUI() {
+        return this.preloaderUI;
+    }
+    /**
+     * Show/hide preloader
+     */
+    showPreloader() {
+        var _a;
+        (_a = this.preloaderUI) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    hidePreloader() {
+        var _a;
+        (_a = this.preloaderUI) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    /**
+     * Update preloader progress
+     */
+    updatePreloaderProgress(percentage, text) {
+        var _a;
+        (_a = this.preloaderUI) === null || _a === void 0 ? void 0 : _a.updateProgress(percentage, text);
+    }
+    /**
+     * Update mode toggle button states
+     */
+    updateModeToggleState(currentMode) {
+        var _a;
+        const buttons = (_a = this.modeToggleContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.mode-button');
+        buttons === null || buttons === void 0 ? void 0 : buttons.forEach(button => {
+            const mode = button.id.replace('mode', '').toLowerCase();
+            button.classList.toggle('selected', mode === currentMode);
+        });
+    }
+    /**
+     * Clean up and dispose
+     */
+    dispose() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        // Dispose UI components
+        (_a = this.preloaderUI) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.startButtonUI) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this.watermarkUI) === null || _c === void 0 ? void 0 : _c.dispose();
+        (_d = this.helpPanelUI) === null || _d === void 0 ? void 0 : _d.dispose();
+        (_e = this.muteButtonUI) === null || _e === void 0 ? void 0 : _e.dispose();
+        // Remove template classes
+        this.targetElement.classList.remove('template-minimal', 'template-standard', 'template-pro');
+        // Remove created elements
+        (_f = this.controlsContainer) === null || _f === void 0 ? void 0 : _f.remove();
+        (_g = this.modeToggleContainer) === null || _g === void 0 ? void 0 : _g.remove();
+        (_h = this.progressContainer) === null || _h === void 0 ? void 0 : _h.remove();
+        (_j = this.navigationContainer) === null || _j === void 0 ? void 0 : _j.remove();
+    }
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -161718,6 +162629,8 @@ class Viewer {
     }
 }
 
+// Define version constant (updated manually with each release)
+const VIEWER_VERSION = '0.1.21';
 /**
  * Initializes the StorySplat Viewer within a given HTML element.
  *
@@ -161730,6 +162643,7 @@ class Viewer {
  * Transforms raw JSON data into properly typed StorySplatData
  */
 function transformSceneData(rawData) {
+    var _a, _b;
     // Handle all the data casting and transformation internally
     return Object.assign({ loadedModelUrl: rawData.loadedModelUrl || rawData.modelUrl, hotspots: rawData.hotspots || [], waypoints: rawData.waypoints || [], lights: rawData.lights || [], particleSystems: rawData.particleSystems || [], customMeshes: rawData.customMeshes || [], additionalSplats: rawData.additionalSplats || [], activeSkyboxUrl: rawData.activeSkyboxUrl, 
         // Splat scaling properties
@@ -161737,7 +162651,7 @@ function transformSceneData(rawData) {
         // Required top-level properties
         fov: rawData.fov || 0.8, minClipPlane: rawData.minClipPlane || 0.1, maxClipPlane: rawData.maxClipPlane || 1000, cameraMovementSpeed: rawData.cameraMovementSpeed || 0.2, cameraRotationSensitivity: rawData.cameraRotationSensitivity || 4000, autoPlayEnabled: rawData.autoPlayEnabled || false, autoPlaySpeed: rawData.autoPlaySpeed || 1.0, 
         // Navigation properties for matching HTML export feel
-        scrollSpeed: rawData.scrollSpeed || 0.001, transitionSpeed: rawData.transitionSpeed || 1.5, cameraDampening: rawData.cameraDampening || 0.1, initialCameraMode: rawData.defaultCameraMode || rawData.initialCameraMode || 'explore', defaultCameraMode: rawData.defaultCameraMode || 'explore', allowedCameraModes: rawData.allowedCameraModes || ['explore', 'tour', 'hybrid', 'walk'], backgroundColor: rawData.backgroundColor, backgroundAudio: rawData.backgroundAudio, sceneTitle: rawData.sceneTitle, 
+        scrollSpeed: rawData.scrollSpeed || 0.001, transitionSpeed: rawData.transitionSpeed || 1.5, cameraDampening: rawData.cameraDampening || 0.1, initialCameraMode: rawData.defaultCameraMode || rawData.initialCameraMode || (((_a = rawData.waypoints) === null || _a === void 0 ? void 0 : _a.length) > 0 ? 'tour' : 'explore'), defaultCameraMode: rawData.defaultCameraMode || (((_b = rawData.waypoints) === null || _b === void 0 ? void 0 : _b.length) > 0 ? 'tour' : 'explore'), allowedCameraModes: rawData.allowedCameraModes || ['explore', 'tour', 'hybrid', 'walk'], backgroundColor: rawData.backgroundColor, backgroundAudio: rawData.backgroundAudio, sceneTitle: rawData.sceneTitle, 
         // UI configuration
         uiColor: rawData.uiColor || '#4CAF50', scrollButtonMode: rawData.scrollButtonMode || 'waypoint', scrollAmount: rawData.scrollAmount || 10, loopMode: rawData.loopMode || false, invertCameraRotation: rawData.invertCameraRotation || false, playerHeight: rawData.playerHeight || 1.8 }, rawData);
 }
@@ -161763,7 +162677,7 @@ function createViewerOptions(rawData, userOptions) {
             buttonPosition: ((_e = rawData.uiOptions) === null || _e === void 0 ? void 0 : _e.buttonPosition) || 'below',
             showStartExperience: ((_f = rawData.uiOptions) === null || _f === void 0 ? void 0 : _f.showStartExperience) || false,
             debugMode: ((_g = rawData.uiOptions) === null || _g === void 0 ? void 0 : _g.debugMode) || false,
-            uiType: ((_h = rawData.uiOptions) === null || _h === void 0 ? void 0 : _h.uiType) || rawData.uiType || 'minimal',
+            uiType: ((_h = rawData.uiOptions) === null || _h === void 0 ? void 0 : _h.uiType) || rawData.uiType || 'standard', // Default to standard instead of minimal to match HTML
             hideWatermark: ((_j = rawData.uiOptions) === null || _j === void 0 ? void 0 : _j.hideWatermark) || false,
             watermarkText: (_k = rawData.uiOptions) === null || _k === void 0 ? void 0 : _k.watermarkText,
             watermarkLink: (_l = rawData.uiOptions) === null || _l === void 0 ? void 0 : _l.watermarkLink
@@ -161776,7 +162690,7 @@ function createViewerOptions(rawData, userOptions) {
 }
 async function initializeViewer(targetElement, rawData, // Accept any JSON data
 options) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     // Register BabylonJS loaders at runtime
     try {
         registerBuiltInLoaders();
@@ -161801,7 +162715,27 @@ options) {
     }
     // Create comprehensive viewer options from the data
     const finalViewerOptions = createViewerOptions(rawData, options);
-    console.log(`StorySplat Viewer v${packageJson.version}: Initializing...`);
+    console.log(`StorySplat Viewer v${VIEWER_VERSION}: Initializing...`);
+    // Debug logging for camera mode configuration
+    console.log('DEBUG: Raw data camera modes:', {
+        defaultCameraMode: rawData.defaultCameraMode,
+        initialCameraMode: rawData.initialCameraMode,
+        allowedCameraModes: rawData.allowedCameraModes,
+        waypoints: ((_a = rawData.waypoints) === null || _a === void 0 ? void 0 : _a.length) || 0
+    });
+    console.log('DEBUG: Transformed data camera modes:', {
+        initialCameraMode: data.initialCameraMode,
+        allowedCameraModes: data.allowedCameraModes,
+        waypoints: ((_b = data.waypoints) === null || _b === void 0 ? void 0 : _b.length) || 0
+    });
+    console.log('DEBUG: Final viewer options camera modes:', {
+        defaultCameraMode: finalViewerOptions.defaultCameraMode,
+        allowedCameraModes: finalViewerOptions.allowedCameraModes,
+        showCameraModeToggle: finalViewerOptions.showCameraModeToggle,
+        showWalkExploreToggle: finalViewerOptions.showWalkExploreToggle,
+        showProgressBar: finalViewerOptions.showProgressBar,
+        showNavButtons: finalViewerOptions.showNavButtons
+    });
     // --- 1. Create Canvas ---
     const canvas = document.createElement("canvas");
     canvas.style.width = "100%";
@@ -161823,11 +162757,7 @@ options) {
     let navigationManager = null;
     let collisionManager = null;
     // let uiManager: UIManager | null = null; // REMOVED: Old monolithic UI Manager
-    let preloaderUI = null;
-    let startButtonUI = null;
-    let watermarkUI = null;
-    let helpPanelUI = null;
-    let muteButtonUI = null; // Add reference for MuteButtonUI
+    let templateManager = null; // NEW: Template-based UI system
     let audioManager = null;
     let renderLoopManager = null; // Add RenderLoopManager reference
     let xrExperience = null; // Add XR experience reference
@@ -161861,13 +162791,9 @@ options) {
         splatSwapManager = null;
         audioManager === null || audioManager === void 0 ? void 0 : audioManager.dispose();
         audioManager = null;
-        // Dispose new UI modules
-        preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.dispose();
-        startButtonUI === null || startButtonUI === void 0 ? void 0 : startButtonUI.dispose();
-        watermarkUI === null || watermarkUI === void 0 ? void 0 : watermarkUI.dispose();
-        helpPanelUI === null || helpPanelUI === void 0 ? void 0 : helpPanelUI.dispose();
-        muteButtonUI === null || muteButtonUI === void 0 ? void 0 : muteButtonUI.dispose(); // Dispose mute button UI
-        preloaderUI = startButtonUI = watermarkUI = helpPanelUI = muteButtonUI = null;
+        // Dispose template manager (handles all UI components)
+        templateManager === null || templateManager === void 0 ? void 0 : templateManager.dispose();
+        templateManager = null;
         // NavigationManager and CameraManager disposal is handled by scene dispose or specific logic within them
         // Dispose features managed outside scene graph
         if (scene && finalViewerOptions) {
@@ -161970,9 +162896,17 @@ options) {
             throw new Error("Camera not initialized before NavigationManager"); // Guard
         if (!analyticsManager)
             throw new Error("AnalyticsManager not initialized before NavigationManager"); // Guard
+        // Debug logging for NavigationManager initialization
+        console.log('DEBUG: NavigationManager initialization with camera modes:', {
+            allowedCameraModes: data.allowedCameraModes,
+            initialCameraMode: data.initialCameraMode,
+            finalViewerOptions_allowedCameraModes: finalViewerOptions.allowedCameraModes,
+            finalViewerOptions_defaultCameraMode: finalViewerOptions.defaultCameraMode,
+            waypointCount: ((_c = data.waypoints) === null || _c === void 0 ? void 0 : _c.length) || 0
+        });
         // Pass the collisionManager and analyticsManager instances to NavigationManager
         // Pass viewerOptions directly, relying on its content for allowed modes etc.
-        navigationManager = new NavigationManager(scene, camera, Object.assign(Object.assign({}, finalViewerOptions), { allowedCameraModes: data.allowedCameraModes, initialCameraMode: data.initialCameraMode, waypoints: (_a = data.waypoints) === null || _a === void 0 ? void 0 : _a.map(wp => {
+        navigationManager = new NavigationManager(scene, camera, Object.assign(Object.assign({}, finalViewerOptions), { allowedCameraModes: data.allowedCameraModes, initialCameraMode: data.initialCameraMode, waypoints: (_d = data.waypoints) === null || _d === void 0 ? void 0 : _d.map(wp => {
                 var _a;
                 return ({
                     x: wp.x,
@@ -161997,6 +162931,7 @@ options) {
                     triggerDistance: wp.triggerDistance
                 });
             }) }), targetElement, collisionManager, analyticsManager);
+        console.log('DEBUG: NavigationManager created. Current mode:', navigationManager.getCurrentMode());
         // --- No explicit sync needed - both managers use the same initial mode logic ---
         // NavigationManager determines its own initial mode in constructor based on the same data/options
         // The onCameraModeChanged callback will handle future mode changes
@@ -162010,44 +162945,23 @@ options) {
                 splatSwapManager === null || splatSwapManager === void 0 ? void 0 : splatSwapManager.updateProgress(progress, waypointIndex);
             };
         }
-        // --- 9. Initialize Modular UI Components ---
-        // Initialize AudioManager first (needed for start button callback)
-        // Note: AudioManager is initialized later now, before render loop manager.
-        // We'll pass the instance later if needed, or adjust initialization order.
-        // Preloader (always show by default, like HTML exports)
-        const defaultPreloaderConfig = {
-            enabled: true,
-            imageUrl: 'https://firebasestorage.googleapis.com/v0/b/story-splat.firebasestorage.app/o/public%2Fimages%2FStorySplat.webp?alt=media&token=953e8ab3-1865-4ac1-a98d-b548b7066bda',
-            lottieUrl: 'https://firebasestorage.googleapis.com/v0/b/story-splat.firebasestorage.app/o/public%2Flotties%2FstorySplatLottie.json?alt=media&token=d7edc19d-9cb8-4c6e-a94c-cba1d2b65d5e',
-            uiColor: (finalViewerOptions === null || finalViewerOptions === void 0 ? void 0 : finalViewerOptions.uiColor) || '#4CAF50'
-        };
-        const preloaderConfig = Object.assign(Object.assign({}, defaultPreloaderConfig), finalViewerOptions === null || finalViewerOptions === void 0 ? void 0 : finalViewerOptions.preloaderConfig);
-        preloaderUI = new PreloaderUI(targetElement, preloaderConfig);
-        preloaderUI.create();
-        // Start Button
-        if (finalViewerOptions === null || finalViewerOptions === void 0 ? void 0 : finalViewerOptions.showStartExperience) {
-            startButtonUI = new StartButtonUI(targetElement, finalViewerOptions, () => {
-                // Callback to initialize audio context on first interaction
-                audioManager === null || audioManager === void 0 ? void 0 : audioManager.initialize(); // Use the correct initialize method
-            });
-            startButtonUI.create();
-        }
-        // Watermark
-        watermarkUI = new WatermarkUI(targetElement, finalViewerOptions);
-        watermarkUI.create(); // Creates conditionally based on options inside the class
-        // Help Panel
-        helpPanelUI = new HelpPanelUI(targetElement, finalViewerOptions);
-        helpPanelUI.create(); // Creates conditionally based on options inside the class
-        // Mute Button (Needs AudioManager instance)
-        // We'll initialize this after AudioManager is created
+        // --- 9. Initialize Template Manager ---
+        // The template manager handles all UI components based on the uiType
+        templateManager = new TemplateManager(targetElement, finalViewerOptions);
+        // Initialize the template UI (but don't fully set up navigation controls yet)
+        // We'll do that after navigation manager is created
+        await templateManager.initializeUI(null, null, null, () => {
+            // Callback to initialize audio context on first interaction
+            audioManager === null || audioManager === void 0 ? void 0 : audioManager.initialize();
+        });
         // --- 10. Load Splat Data ---
         console.log("StorySplat Viewer: Starting splat asset load...");
         splatRootMeshes = await loadSplatAsset(scene, data, (percentage, text) => {
-            // Update preloader UI via PreloaderUI instance
-            preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.updateProgress(percentage, text);
+            // Update preloader UI via template manager
+            templateManager === null || templateManager === void 0 ? void 0 : templateManager.updatePreloaderProgress(percentage, text);
         });
         console.log("StorySplat Viewer: Splat asset loaded.");
-        preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.hide(); // Hide preloader after splat is loaded - Check if preloaderUI is null?
+        templateManager === null || templateManager === void 0 ? void 0 : templateManager.hidePreloader(); // Hide preloader after splat is loaded
         // --- 11. Initialize/Setup Features ---
         // Setup Particle Systems (sync)
         // Ensure setupParticleSystems is correctly imported and called
@@ -162085,11 +162999,9 @@ options) {
         if (!analyticsManager)
             throw new Error("AnalyticsManager not initialized before AudioManager"); // Guard
         audioManager = new AudioManager(scene, finalViewerOptions, analyticsManager);
-        // Now initialize Mute Button UI, passing the audioManager instance
-        if ((_b = finalViewerOptions === null || finalViewerOptions === void 0 ? void 0 : finalViewerOptions.audio) === null || _b === void 0 ? void 0 : _b.showMuteButton) {
-            muteButtonUI = new MuteButtonUI(targetElement, finalViewerOptions, audioManager);
-            muteButtonUI.create();
-        }
+        // Re-initialize template UI with audio manager now that it's available
+        // This will create the mute button if needed
+        await templateManager.initializeUI(audioManager, navigationManager, cameraManager);
         // --- 12. Initialize Render Loop Manager ---
         // Needs engine, scene, cameraManager, navigationManager
         if (engine && scene && cameraManager) { // Ensure core components exist
@@ -162119,7 +163031,7 @@ options) {
                 }
             }, 0);
         }
-        console.log(`StorySplat Viewer v${packageJson.version}: Initialized successfully.`);
+        console.log(`StorySplat Viewer v${VIEWER_VERSION}: Initialized successfully.`);
         // --- 16. Define API Methods ---
         const setCameraMode = (mode) => cameraManager === null || cameraManager === void 0 ? void 0 : cameraManager.setCameraMode(mode);
         const getCurrentCameraMode = () => { var _a; return (_a = cameraManager === null || cameraManager === void 0 ? void 0 : cameraManager.currentMode) !== null && _a !== void 0 ? _a : 'explore'; }; // Provide default
@@ -162165,8 +163077,8 @@ options) {
             console.log(`StorySplat Viewer: Starting splat swap to ${newSplatUrl}`);
             analyticsManager === null || analyticsManager === void 0 ? void 0 : analyticsManager.trackSplatSwapStarted(newSplatUrl); // Corrected method call
             // Show preloader
-            preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.show(); // Corrected method call (added in preloader.ts)
-            preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.updateProgress(0, 'Preparing to load new splat...'); // Initial message
+            templateManager === null || templateManager === void 0 ? void 0 : templateManager.showPreloader();
+            templateManager === null || templateManager === void 0 ? void 0 : templateManager.updatePreloaderProgress(0, 'Preparing to load new splat...'); // Initial message
             // Dispose existing splat meshes
             console.log("StorySplat Viewer: Disposing current splat meshes...");
             splatRootMeshes.forEach(mesh => {
@@ -162189,7 +163101,7 @@ options) {
                     // Ensure other potentially relevant fields from data are present if needed
                     waypoints: data.waypoints, hotspots: data.hotspots });
                 splatRootMeshes = await loadSplatAsset(scene, tempData, (percentage, text) => {
-                    preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.updateProgress(percentage, text);
+                    templateManager === null || templateManager === void 0 ? void 0 : templateManager.updatePreloaderProgress(percentage, text);
                 });
                 currentSplatUrl = newSplatUrl; // Update the tracked URL
                 console.log("StorySplat Viewer: New splat asset loaded successfully.");
@@ -162211,12 +163123,12 @@ options) {
                 console.error(`StorySplat Viewer: Failed to load new splat asset from ${newSplatUrl}:`, error);
                 analyticsManager === null || analyticsManager === void 0 ? void 0 : analyticsManager.trackSplatSwapFailed(error, newSplatUrl); // Corrected method call
                 // Hide preloader even on error
-                preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.hide();
+                templateManager === null || templateManager === void 0 ? void 0 : templateManager.hidePreloader();
                 // Re-throw error to signal failure to the caller
                 throw error;
             }
             // Hide preloader on success
-            preloaderUI === null || preloaderUI === void 0 ? void 0 : preloaderUI.hide();
+            templateManager === null || templateManager === void 0 ? void 0 : templateManager.hidePreloader();
             console.log("StorySplat Viewer: Splat swap complete.");
         };
         /**