storysplat-viewer 0.1.21 → 0.2.0

package/dist/esm/index.js

@@ -75012,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'];
@@ -75062,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
         }
     }
@@ -108343,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
@@ -108353,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);
             }
@@ -161032,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.
  */
@@ -161600,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.
 
@@ -161913,7 +162690,7 @@ function createViewerOptions(rawData, userOptions) {
 }
 async function initializeViewer(targetElement, rawData, // Accept any JSON data
 options) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     // Register BabylonJS loaders at runtime
     try {
         registerBuiltInLoaders();
@@ -161980,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
@@ -162018,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) {
@@ -162176,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
@@ -162251,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 ((_e = finalViewerOptions === null || finalViewerOptions === void 0 ? void 0 : finalViewerOptions.audio) === null || _e === void 0 ? void 0 : _e.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
@@ -162331,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 => {
@@ -162355,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.");
@@ -162377,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.");
         };
         /**