senangwebs-tour 1.0.2

package/dist/swt-editor.js

@@ -0,0 +1,2853 @@
+(function () {
+    'use strict';
+
+    // Utility Functions
+
+    /**
+     * Generate a unique ID
+     */
+    function generateId(prefix = 'id') {
+        return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+
+    /**
+     * Sanitize string for use as ID
+     */
+    function sanitizeId$1(str) {
+        return str.toLowerCase()
+            .replace(/[^a-z0-9]+/g, '_')
+            .replace(/^_+|_+$/g, '');
+    }
+
+    /**
+     * Generate thumbnail from image file
+     */
+    async function generateThumbnail(file, maxWidth = 200, maxHeight = 150) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            
+            reader.onload = (e) => {
+                const img = new Image();
+                
+                img.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    
+                    let width = img.width;
+                    let height = img.height;
+                    
+                    if (width > height) {
+                        if (width > maxWidth) {
+                            height *= maxWidth / width;
+                            width = maxWidth;
+                        }
+                    } else {
+                        if (height > maxHeight) {
+                            width *= maxHeight / height;
+                            height = maxHeight;
+                        }
+                    }
+                    
+                    canvas.width = width;
+                    canvas.height = height;
+                    ctx.drawImage(img, 0, 0, width, height);
+                    
+                    resolve(canvas.toDataURL('image/jpeg', 0.7));
+                };
+                
+                img.onerror = reject;
+                img.src = e.target.result;
+            };
+            
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }
+
+    /**
+     * Load image file as data URL
+     */
+    async function loadImageAsDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => resolve(e.target.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }
+
+    /**
+     * Show toast notification
+     */
+    function showToast$1(message, type = 'info', duration = 3000) {
+        const toast = document.getElementById('toast');
+        toast.textContent = message;
+        toast.className = `toast ${type}`;
+        toast.classList.add('show');
+        
+        setTimeout(() => {
+            toast.classList.remove('show');
+        }, duration);
+    }
+
+    /**
+     * Show modal
+     */
+    function showModal(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.add('show');
+        }
+    }
+
+    /**
+     * Hide modal
+     */
+    function hideModal$1(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.remove('show');
+        }
+    }
+
+    /**
+     * Format file size
+     */
+    function formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
+
+    /**
+     * Download text as file
+     */
+    function downloadTextAsFile(text, filename) {
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    /**
+     * Debounce function
+     */
+    function debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    /**
+     * Convert position object to string
+     */
+    function positionToString(pos) {
+        return `${pos.x.toFixed(1)} ${pos.y.toFixed(1)} ${pos.z.toFixed(1)}`;
+    }
+
+    /**
+     * Parse position string to object
+     */
+    function parsePosition(str) {
+        const parts = str.split(' ').map(Number);
+        return { x: parts[0] || 0, y: parts[1] || 0, z: parts[2] || 0 };
+    }
+
+    /**
+     * Validate email
+     */
+    function isValidEmail(email) {
+        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return re.test(email);
+    }
+
+    /**
+     * Deep clone object
+     */
+    function deepClone$1(obj) {
+        return JSON.parse(JSON.stringify(obj));
+    }
+
+    var utils = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        debounce: debounce,
+        deepClone: deepClone$1,
+        downloadTextAsFile: downloadTextAsFile,
+        formatFileSize: formatFileSize,
+        generateId: generateId,
+        generateThumbnail: generateThumbnail,
+        hideModal: hideModal$1,
+        isValidEmail: isValidEmail,
+        loadImageAsDataUrl: loadImageAsDataUrl,
+        parsePosition: parsePosition,
+        positionToString: positionToString,
+        sanitizeId: sanitizeId$1,
+        showModal: showModal,
+        showToast: showToast$1
+    });
+
+    // Storage Manager - Handles LocalStorage operations
+
+    let ProjectStorageManager$1 = class ProjectStorageManager {
+      constructor() {
+        this.storageKey = "swt_project";
+        this.autoSaveInterval = null;
+        this.autoSaveDelay = 30000; // 30 seconds
+      }
+
+      /**
+       * Save project to localStorage
+       */
+      saveProject(projectData) {
+        try {
+          const json = JSON.stringify(projectData);
+          localStorage.setItem(this.storageKey, json);
+          localStorage.setItem(
+            this.storageKey + "_lastSaved",
+            new Date().toISOString()
+          );
+          return true;
+        } catch (error) {
+          console.error("Failed to save project:", error);
+          if (error.name === "QuotaExceededError") {
+            showToast$1("Storage quota exceeded. Project too large!", "error");
+          }
+          return false;
+        }
+      }
+
+      /**
+       * Load project from localStorage
+       */
+      loadProject() {
+        try {
+          const json = localStorage.getItem(this.storageKey);
+          if (json) {
+            const projectData = JSON.parse(json);
+
+            // Validate and migrate data if needed
+            if (!this.validateProjectData(projectData)) {
+              console.error("Invalid project data structure");
+              return null;
+            }
+
+            return projectData;
+          }
+          return null;
+        } catch (error) {
+          console.error("Failed to load project:", error);
+          showToast$1("Failed to load project", "error");
+          return null;
+        }
+      }
+
+      /**
+       * Validate project data structure
+       */
+      validateProjectData(projectData) {
+        if (!projectData || typeof projectData !== "object") {
+          return false;
+        }
+
+        // Check if scenes array exists and is valid
+        if (!projectData.scenes || !Array.isArray(projectData.scenes)) {
+          return false;
+        }
+
+        // Validate each scene has required properties
+        for (const scene of projectData.scenes) {
+          if (!scene || typeof scene !== "object") {
+            return false;
+          }
+
+          // Required scene properties
+          if (!scene.id || typeof scene.id !== "string") {
+            return false;
+          }
+
+          // imageUrl is required for scenes to be valid
+          if (!scene.imageUrl || typeof scene.imageUrl !== "string") {
+            return false;
+          }
+
+          // Hotspots array should exist (can be empty)
+          if (!Array.isArray(scene.hotspots)) {
+            scene.hotspots = []; // Auto-fix missing hotspots array
+          }
+        }
+
+        // Ensure config exists
+        if (!projectData.config || typeof projectData.config !== "object") {
+          projectData.config = { title: "My Virtual Tour" };
+        }
+
+        return true;
+      }
+
+      /**
+       * Clear project from localStorage
+       */
+      clearProject() {
+        try {
+          localStorage.removeItem(this.storageKey);
+          localStorage.removeItem(this.storageKey + "_lastSaved");
+          return true;
+        } catch (error) {
+          console.error("Failed to clear project:", error);
+          return false;
+        }
+      }
+
+      /**
+       * Check if project exists in localStorage
+       */
+      hasProject() {
+        return localStorage.getItem(this.storageKey) !== null;
+      }
+
+      /**
+       * Get last saved date
+       */
+      getLastSavedDate() {
+        const dateStr = localStorage.getItem(this.storageKey + "_lastSaved");
+        return dateStr ? new Date(dateStr) : null;
+      }
+
+      /**
+       * Start auto-save
+       */
+      startAutoSave(callback) {
+        this.stopAutoSave();
+        this.autoSaveInterval = setInterval(() => {
+          callback();
+        }, this.autoSaveDelay);
+      }
+
+      /**
+       * Stop auto-save
+       */
+      stopAutoSave() {
+        if (this.autoSaveInterval) {
+          clearInterval(this.autoSaveInterval);
+          this.autoSaveInterval = null;
+        }
+      }
+
+      /**
+       * Export project to file
+       */
+      exportToFile(projectData, filename = "tour.json") {
+        try {
+          const json = JSON.stringify(projectData, null, 2);
+          downloadTextAsFile(json, filename);
+          return true;
+        } catch (error) {
+          console.error("Failed to export project:", error);
+          showToast$1("Failed to export project", "error");
+          return false;
+        }
+      }
+
+      /**
+       * Import project from file
+       */
+      async importFromFile(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+
+          reader.onload = (e) => {
+            try {
+              const projectData = JSON.parse(e.target.result);
+              resolve(projectData);
+            } catch (error) {
+              console.error("Failed to parse project file:", error);
+              showToast$1("Invalid project file", "error");
+              reject(error);
+            }
+          };
+
+          reader.onerror = () => {
+            console.error("Failed to read file:", reader.error);
+            showToast$1("Failed to read file", "error");
+            reject(reader.error);
+          };
+
+          reader.readAsText(file);
+        });
+      }
+    };
+
+    // Scene Manager - Handles scene operations
+
+    let SceneManagerEditor$1 = class SceneManagerEditor {
+      constructor(editor) {
+        this.editor = editor;
+        this.scenes = [];
+        this.currentSceneIndex = -1;
+      }
+
+      /**
+       * Add new scene
+       */
+      async addScene(file) {
+        try {
+          // Generate thumbnail
+          const thumbnail = await generateThumbnail(file);
+
+          // Load full image
+          const imageDataUrl = await loadImageAsDataUrl(file);
+
+          const scene = {
+            id: sanitizeId$1(file.name.replace(/\.[^/.]+$/, "")),
+            name: file.name.replace(/\.[^/.]+$/, ""),
+            imageUrl: imageDataUrl,
+            thumbnail: thumbnail,
+            hotspots: [],
+          };
+
+          this.scenes.push(scene);
+          this.currentSceneIndex = this.scenes.length - 1;
+          showToast$1(`Scene "${scene.name}" added successfully`, "success");
+          return scene;
+        } catch (error) {
+          console.error("Failed to add scene:", error);
+          showToast$1("Failed to add scene", "error");
+          return null;
+        }
+      }
+
+      /**
+       * Remove scene by index
+       */
+      removeScene(index) {
+        if (index >= 0 && index < this.scenes.length) {
+          const scene = this.scenes[index];
+
+          // Confirm deletion
+          if (!confirm(`Are you sure you want to delete scene "${scene.name}"?`)) {
+            return false;
+          }
+
+          this.scenes.splice(index, 1);
+
+          // Update current scene index
+          if (this.currentSceneIndex === index) {
+            this.currentSceneIndex = Math.min(
+              this.currentSceneIndex,
+              this.scenes.length - 1
+            );
+          } else if (this.currentSceneIndex > index) {
+            this.currentSceneIndex--;
+          }
+
+          showToast$1(`Scene "${scene.name}" removed`, "success");
+          return true;
+        }
+        return false;
+      }
+
+      /**
+       * Get scene by index
+       */
+      getScene(index) {
+        return this.scenes[index] || null;
+      }
+
+      /**
+       * Get scene by ID
+       */
+      getSceneById(id) {
+        return this.scenes.find((s) => s.id === id) || null;
+      }
+
+      /**
+       * Update scene property
+       */
+      updateScene(index, property, value) {
+        if (index >= 0 && index < this.scenes.length) {
+          this.scenes[index][property] = value;
+
+          // If updating ID, update all hotspot target references
+          if (property === "id") {
+            this.scenes.forEach((scene) => {
+              scene.hotspots.forEach((hotspot) => {
+                if (hotspot.targetSceneId === this.scenes[index].id) {
+                  hotspot.targetSceneId = value;
+                }
+              });
+            });
+          }
+
+          return true;
+        }
+        return false;
+      }
+
+      /**
+       * Reorder scenes
+       */
+      reorderScenes(fromIndex, toIndex) {
+        if (
+          fromIndex >= 0 &&
+          fromIndex < this.scenes.length &&
+          toIndex >= 0 &&
+          toIndex < this.scenes.length
+        ) {
+          const scene = this.scenes.splice(fromIndex, 1)[0];
+          this.scenes.splice(toIndex, 0, scene);
+
+          // Update current scene index
+          if (this.currentSceneIndex === fromIndex) {
+            this.currentSceneIndex = toIndex;
+          } else if (
+            fromIndex < this.currentSceneIndex &&
+            toIndex >= this.currentSceneIndex
+          ) {
+            this.currentSceneIndex--;
+          } else if (
+            fromIndex > this.currentSceneIndex &&
+            toIndex <= this.currentSceneIndex
+          ) {
+            this.currentSceneIndex++;
+          }
+
+          return true;
+        }
+        return false;
+      }
+
+      /**
+       * Get current scene
+       */
+      getCurrentScene() {
+        return this.getScene(this.currentSceneIndex);
+      }
+
+      /**
+       * Set current scene by index
+       */
+      setCurrentScene(index) {
+        if (index >= 0 && index < this.scenes.length) {
+          this.currentSceneIndex = index;
+          return true;
+        }
+        return false;
+      }
+
+      /**
+       * Get all scenes
+       */
+      getAllScenes() {
+        return this.scenes;
+      }
+
+      /**
+       * Get all scenes (alias for getAllScenes)
+       */
+      getScenes() {
+        return this.scenes;
+      }
+
+      /**
+       * Clear all scenes
+       */
+      clearScenes() {
+        if (this.scenes.length > 0) {
+          if (!confirm("Are you sure you want to clear all scenes?")) {
+            return false;
+          }
+        }
+
+        this.scenes = [];
+        this.currentSceneIndex = -1;
+        return true;
+      }
+
+      /**
+       * Load scenes from data
+       */
+      loadScenes(scenesData) {
+        this.scenes = scenesData || [];
+        this.currentSceneIndex = this.scenes.length > 0 ? 0 : -1;
+      }
+    };
+
+    // Hotspot Editor - Handles hotspot placement and editing
+
+    let HotspotEditor$1 = class HotspotEditor {
+        constructor(editor) {
+            this.editor = editor;
+            this.currentHotspotIndex = -1;
+            this.placementMode = false;
+        }
+
+        /**
+         * Enable hotspot placement mode
+         */
+        enablePlacementMode() {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene) {
+                showToast$1('Please select a scene first', 'error');
+                return false;
+            }
+
+            this.placementMode = true;
+            
+            // Visual feedback
+            document.body.style.cursor = 'crosshair';
+            const preview = document.getElementById('preview');
+            if (preview) {
+                preview.style.border = '3px solid #4CC3D9';
+                preview.style.boxShadow = '0 0 20px rgba(76, 195, 217, 0.5)';
+            }
+            
+            // Update button state
+            const btn = document.getElementById('addHotspotBtn');
+            if (btn) {
+                btn.textContent = 'Click on Preview...';
+                btn.classList.add('btn-active');
+            }
+            
+            showToast$1('Click on the 360° preview to place hotspot', 'info', 5000);
+            return true;
+        }
+
+        /**
+         * Disable hotspot placement mode
+         */
+        disablePlacementMode() {
+            this.placementMode = false;
+            document.body.style.cursor = 'default';
+            
+            // Remove visual feedback
+            const preview = document.getElementById('preview');
+            if (preview) {
+                preview.style.border = '';
+                preview.style.boxShadow = '';
+            }
+            
+            // Reset button state
+            const btn = document.getElementById('addHotspotBtn');
+            if (btn) {
+                btn.textContent = '+ Add Hotspot';
+                btn.classList.remove('btn-active');
+            }
+    }
+
+        /**
+         * Add hotspot at position
+         */
+        addHotspot(position, targetSceneId = '') {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene) {
+                showToast$1('No scene selected', 'error');
+                return null;
+            }
+
+            const hotspot = {
+                id: generateId('hotspot'),
+                type: 'navigation',
+                position: position,
+                targetSceneId: targetSceneId,
+                title: 'New Hotspot',
+                description: '',
+                color: '#00ff00',
+                icon: ''
+            };
+
+            scene.hotspots.push(hotspot);
+            this.currentHotspotIndex = scene.hotspots.length - 1;
+            
+            this.disablePlacementMode();
+            showToast$1('Hotspot added', 'success');
+            
+            return hotspot;
+        }
+
+        /**
+         * Remove hotspot
+         */
+        removeHotspot(index) {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene || index < 0 || index >= scene.hotspots.length) {
+                return false;
+            }
+
+            if (!confirm('Are you sure you want to delete this hotspot?')) {
+                return false;
+            }
+
+            scene.hotspots.splice(index, 1);
+            
+            // Update current index
+            if (this.currentHotspotIndex === index) {
+                this.currentHotspotIndex = -1;
+            } else if (this.currentHotspotIndex > index) {
+                this.currentHotspotIndex--;
+            }
+
+            showToast$1('Hotspot removed', 'success');
+            return true;
+        }
+
+        /**
+         * Update hotspot property
+         */
+        updateHotspot(index, property, value) {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene || index < 0 || index >= scene.hotspots.length) {
+                return false;
+            }
+
+            scene.hotspots[index][property] = value;
+            return true;
+        }
+
+        /**
+         * Get hotspot by index
+         */
+        getHotspot(index) {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene || index < 0 || index >= scene.hotspots.length) {
+                return null;
+            }
+            return scene.hotspots[index];
+        }
+
+        /**
+         * Update hotspot position
+         */
+        updateHotspotPosition(index, position) {
+            return this.updateHotspot(index, 'position', position);
+        }
+
+        /**
+         * Get current hotspot
+         */
+        getCurrentHotspot() {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene || this.currentHotspotIndex < 0) {
+                return null;
+            }
+            return scene.hotspots[this.currentHotspotIndex] || null;
+        }
+
+        /**
+         * Set current hotspot
+         */
+        setCurrentHotspot(index) {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene || index < 0 || index >= scene.hotspots.length) {
+                this.currentHotspotIndex = -1;
+                return false;
+            }
+            
+            this.currentHotspotIndex = index;
+            return true;
+        }
+
+        /**
+         * Get all hotspots for current scene
+         */
+        getAllHotspots() {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            return scene ? scene.hotspots : [];
+        }
+
+        /**
+         * Duplicate hotspot
+         */
+        duplicateHotspot(index) {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene || index < 0 || index >= scene.hotspots.length) {
+                return null;
+            }
+
+            const original = scene.hotspots[index];
+            const duplicate = deepClone(original);
+            duplicate.id = generateId('hotspot');
+            duplicate.title = original.title + ' (Copy)';
+            
+            // Offset position slightly
+            duplicate.position = {
+                x: original.position.x + 0.5,
+                y: original.position.y,
+                z: original.position.z
+            };
+
+            scene.hotspots.push(duplicate);
+            this.currentHotspotIndex = scene.hotspots.length - 1;
+            
+            showToast$1('Hotspot duplicated', 'success');
+            return duplicate;
+        }
+
+        /**
+         * Clear all hotspots
+         */
+        clearAllHotspots() {
+            const scene = this.editor.sceneManager.getCurrentScene();
+            if (!scene) {
+                return false;
+            }
+
+            if (scene.hotspots.length === 0) {
+                return true;
+            }
+
+            if (!confirm('Are you sure you want to remove all hotspots from this scene?')) {
+                return false;
+            }
+
+            scene.hotspots = [];
+            this.currentHotspotIndex = -1;
+            
+            showToast$1('All hotspots removed', 'success');
+            return true;
+        }
+    };
+
+    // Preview Controller - Manages A-Frame preview integration using SWT library
+
+    let PreviewController$1 = class PreviewController {
+      constructor(editor) {
+        this.editor = editor;
+        this.tour = null;
+        this.isInitialized = false;
+        this.previewContainer = null;
+        this.hasLoadedScene = false; // Track if we've ever loaded a scene
+      }
+
+      /**
+       * Initialize A-Frame preview
+       */
+      async init() {
+        this.previewContainer = document.getElementById("preview");
+        if (!this.previewContainer) {
+          console.error("Preview element not found");
+          return false;
+        }
+
+        // Wait for A-Frame to be loaded
+        if (typeof AFRAME === "undefined") {
+          await this.waitForLibrary("AFRAME", 5000);
+        }
+
+        // Wait for SWT library to be loaded
+        if (typeof SWT === "undefined") {
+          await this.waitForLibrary("SWT", 5000);
+        }
+        this.isInitialized = true;
+        return true;
+      }
+
+      /**
+       * Wait for a global library to be available
+       */
+      async waitForLibrary(libraryName, timeout = 5000) {
+        const startTime = Date.now();
+
+        while (typeof window[libraryName] === "undefined") {
+          if (Date.now() - startTime > timeout) {
+            throw new Error(`Timeout waiting for ${libraryName} to load`);
+          }
+          await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+      }
+
+      /**
+       * Load scene into preview using SWT library
+       */
+      async loadScene(scene, preserveCameraRotation = true) {
+        if (!this.isInitialized || !scene) {
+          return;
+        }
+
+        // Validate scene has required data
+        if (!scene.imageUrl || !scene.id) {
+          console.error("Invalid scene data:", scene);
+          return;
+        }
+
+        // Show loading animation
+        this.showLoading();
+
+        // Save camera rotation before destroying scene
+        let savedRotation = null;
+        if (preserveCameraRotation && this.tour) {
+          savedRotation = this.getCameraRotation();
+        }
+
+        // Destroy existing tour if any
+        if (this.tour) {
+          try {
+            this.tour.destroy();
+          } catch (error) {
+            console.error("Error destroying tour:", error);
+          }
+          this.tour = null;
+        }
+
+        // Clear preview container carefully
+        // Only do complex cleanup if we've actually loaded a scene before
+        if (this.hasLoadedScene) {
+          const existingScene = this.previewContainer.querySelector("a-scene");
+          if (existingScene) {
+            try {
+              // Remove the scene element - A-Frame will handle cleanup if it's ready
+              this.previewContainer.removeChild(existingScene);
+            } catch (error) {
+              console.error("Error removing scene:", error);
+            }
+          }
+          
+          // Clear any remaining children (loading overlays, empty state, etc)
+          while (this.previewContainer.firstChild) {
+            this.previewContainer.removeChild(this.previewContainer.firstChild);
+          }
+        } else {
+          // First load - only remove non-A-Frame elements (like empty state divs)
+          const children = Array.from(this.previewContainer.children);
+          children.forEach(child => {
+            // Only remove if it's NOT an a-scene (shouldn't be any, but be safe)
+            if (child.tagName.toLowerCase() !== 'a-scene') {
+              this.previewContainer.removeChild(child);
+            }
+          });
+        }
+
+        // Create loading overlay (will be removed after scene loads)
+        const loadingOverlay = this.createLoadingOverlay();
+        this.previewContainer.appendChild(loadingOverlay);
+
+        // Create A-Frame scene
+        const aframeScene = document.createElement("a-scene");
+        aframeScene.id = "preview-scene";
+        aframeScene.setAttribute("embedded", "");
+        aframeScene.setAttribute("vr-mode-ui", "enabled: false;");
+        this.previewContainer.appendChild(aframeScene);
+
+        // Give A-Frame a moment to start initializing before we proceed
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        // Build tour config for this single scene
+        // Transform editor scene format to library format
+        (scene.hotspots || []).map((h) => ({
+          id: h.id,
+          position: h.position,
+          action: {
+            type: h.type === "navigation" ? "navigateTo" : h.type,
+            target: h.targetSceneId,
+          },
+          appearance: {
+            color: h.color || "#00ff00",
+            icon: h.icon || null,
+            scale: h.scale || "1 1 1",
+          },
+          tooltip: {
+            text: h.title || "Hotspot",
+          },
+        }));
+
+        ({
+          id: scene.id,
+          name: scene.name,
+          panorama: scene.imageUrl});
+
+        // Build scenes object with ALL scenes (for navigation to work)
+        const allScenes = {};
+        const editorScenes = this.editor.sceneManager.scenes || [];
+        editorScenes.forEach((s) => {
+          const sceneHotspots = (s.hotspots || []).map((h) => ({
+            id: h.id,
+            position: h.position,
+            action: {
+              type: h.type === "navigation" ? "navigateTo" : h.type,
+              target: h.targetSceneId,
+            },
+            appearance: {
+              color: h.color || "#00ff00",
+              icon: h.icon || null,
+              scale: h.scale || "1 1 1",
+            },
+            tooltip: {
+              text: h.title || "Hotspot",
+            },
+          }));
+
+          allScenes[s.id] = {
+            id: s.id,
+            name: s.name,
+            panorama: s.imageUrl,
+            hotspots: sceneHotspots,
+          };
+        });
+
+        const tourConfig = {
+          title: scene.name,
+          initialScene: scene.id,
+          scenes: allScenes,
+          settings: {
+            autoRotate: false,
+            showCompass: false,
+          },
+        };
+
+        try {
+          // Create new tour instance
+          this.tour = new SWT.Tour(aframeScene, tourConfig);
+
+          // Set up event listeners
+          this.tour.addEventListener("tour-started", (e) => {});
+
+          this.tour.addEventListener("scene-loaded", (e) => {});
+
+          this.tour.addEventListener("hotspot-activated", (e) => {
+            // Find the hotspot index by ID and select it
+            const hotspotId = e.detail?.hotspotId;
+            if (hotspotId) {
+              const scene = this.editor.sceneManager.getCurrentScene();
+              if (scene) {
+                const hotspotIndex = scene.hotspots.findIndex(
+                  (h) => h.id === hotspotId
+                );
+                if (hotspotIndex >= 0) {
+                  this.editor.selectHotspot(hotspotIndex);
+                }
+              }
+            }
+          });
+
+          // Start the tour
+          await this.tour.start();
+
+          // Mark that we've successfully loaded a scene
+          this.hasLoadedScene = true;
+
+          // Hide loading animation after scene loads
+          this.hideLoading();
+
+          // Restore camera rotation if preserved
+          if (savedRotation && preserveCameraRotation) {
+            this.setCameraRotation(savedRotation);
+          }
+
+          // Setup click handler after a short delay to ensure A-Frame is ready
+          setTimeout(() => {
+            this.setupClickHandler();
+          }, 500);
+        } catch (error) {
+          console.error("Failed to load preview:", error);
+          showToast$1("Failed to load preview: " + error.message, "error");
+          // Hide loading on error
+          this.hideLoading();
+        }
+      }
+
+      /**
+       * Setup click handler for hotspot placement
+       */
+      setupClickHandler() {
+        if (!this.tour) {
+          return;
+        }
+
+        const aframeScene = this.previewContainer.querySelector("a-scene");
+        if (!aframeScene) {
+          setTimeout(() => this.setupClickHandler(), 200); // Retry
+          return;
+        }
+
+        // Remove any existing click handler to avoid duplicates
+        if (this.clickHandler) {
+          aframeScene.removeEventListener("click", this.clickHandler);
+        }
+
+        // Create and store the click handler
+        this.clickHandler = (evt) => {
+          if (!this.editor.hotspotEditor.placementMode) {
+            return;
+          }
+
+          // Try to get intersection from event detail first
+          let intersection = evt.detail?.intersection;
+
+          // If no intersection, perform manual raycasting
+          if (!intersection) {
+            const camera = aframeScene.querySelector("[camera]");
+            const sky = aframeScene.querySelector("a-sky");
+
+            if (!camera || !sky) {
+              showToast$1("Scene not ready, please try again", "warning");
+              return;
+            }
+
+            // Get mouse position relative to canvas
+            const canvas = aframeScene.canvas;
+            const rect = canvas.getBoundingClientRect();
+            const mouse = {
+              x: ((evt.clientX - rect.left) / rect.width) * 2 - 1,
+              y: -((evt.clientY - rect.top) / rect.height) * 2 + 1,
+            };
+
+            // Perform raycasting
+            const raycaster = new THREE.Raycaster();
+            const cameraEl = camera.object3D;
+            raycaster.setFromCamera(mouse, cameraEl.children[0]); // Get the actual camera
+
+            // Raycast against the sky sphere
+            const intersects = raycaster.intersectObject(sky.object3D, true);
+
+            if (intersects.length > 0) {
+              intersection = intersects[0];
+            } else {
+              showToast$1("Click on the panorama image", "warning");
+              return;
+            }
+          }
+
+          const point = intersection.point;
+          const position = {
+            x: parseFloat(point.x.toFixed(2)),
+            y: parseFloat(point.y.toFixed(2)),
+            z: parseFloat(point.z.toFixed(2)),
+          };
+          this.editor.addHotspotAtPosition(position);
+        };
+        aframeScene.addEventListener("click", this.clickHandler);
+      }
+
+      /**
+       * Get current camera rotation
+       */
+      getCameraRotation() {
+        const aframeScene = this.previewContainer?.querySelector("a-scene");
+        if (!aframeScene) {
+          return null;
+        }
+
+        const camera = aframeScene.querySelector("[camera]");
+        if (!camera) {
+          return null;
+        }
+
+        // Get rotation from object3D which is more reliable
+        const rotation = camera.object3D.rotation;
+        const savedRotation = {
+          x: rotation.x,
+          y: rotation.y,
+          z: rotation.z,
+        };
+        return savedRotation;
+      }
+
+      /**
+       * Set camera rotation
+       */
+      setCameraRotation(rotation) {
+        if (!rotation) {
+          return;
+        }
+
+        const aframeScene = this.previewContainer?.querySelector("a-scene");
+        if (!aframeScene) {
+          return;
+        }
+
+        const camera = aframeScene.querySelector("[camera]");
+        if (!camera) {
+          return;
+        }
+
+        // Set rotation on object3D directly
+        const setRotation = () => {
+          if (camera.object3D) {
+            camera.object3D.rotation.set(rotation.x, rotation.y, rotation.z);
+          }
+        };
+
+        // Try immediately and also after a delay to ensure it sticks
+        setRotation();
+        setTimeout(setRotation, 100);
+        setTimeout(setRotation, 300);
+      }
+
+      /**
+       * Refresh preview (reload current scene while preserving camera rotation)
+       */
+      async refresh() {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (scene) {
+          // Save current camera rotation
+          const savedRotation = this.getCameraRotation();
+          // Reload scene
+          await this.loadScene(scene);
+
+          // Restore camera rotation
+          if (savedRotation) {
+            this.setCameraRotation(savedRotation);
+          }
+        }
+      }
+
+      /**
+       * Reset camera
+       */
+      resetCamera() {
+        const camera = this.previewContainer?.querySelector("[camera]");
+        if (camera) {
+          camera.setAttribute("rotation", "0 0 0");
+        }
+      }
+
+      /**
+       * Point camera to hotspot position
+       */
+      pointCameraToHotspot(hotspotPosition) {
+        if (!hotspotPosition) {
+          return;
+        }
+
+        const aframeScene = this.previewContainer?.querySelector("a-scene");
+        if (!aframeScene) {
+          return;
+        }
+
+        const camera = aframeScene.querySelector("[camera]");
+        if (!camera || !camera.object3D) {
+          return;
+        }
+
+        // Get camera position (usually at origin 0,0,0)
+        const cameraPos = camera.object3D.position;
+
+        // Calculate direction vector from camera to hotspot
+        const direction = new THREE.Vector3(
+          hotspotPosition.x - cameraPos.x,
+          hotspotPosition.y - cameraPos.y,
+          hotspotPosition.z - cameraPos.z
+        );
+
+        // Calculate spherical coordinates (yaw and pitch)
+        const distance = direction.length();
+
+        // Pitch (up/down rotation around X-axis) - in degrees
+        const pitch = Math.asin(direction.y / distance) * (180 / Math.PI);
+
+        // Yaw (left/right rotation around Y-axis) - in degrees
+        // Using atan2 to get correct quadrant
+        const yaw = Math.atan2(direction.x, direction.z) * (180 / Math.PI);
+
+        // Apply smooth rotation with animation
+        this.animateCameraRotation(camera, { x: pitch, y: yaw, z: 0 });
+      }
+
+      /**
+       * Animate camera rotation smoothly
+       */
+      animateCameraRotation(camera, targetRotation, duration = 800) {
+        if (!camera || !camera.object3D) return;
+
+        const startRotation = {
+          x: camera.object3D.rotation.x * (180 / Math.PI),
+          y: camera.object3D.rotation.y * (180 / Math.PI),
+          z: camera.object3D.rotation.z * (180 / Math.PI),
+        };
+
+        // Handle angle wrapping for smooth rotation
+        let deltaY = targetRotation.y - startRotation.y;
+
+        // Normalize to -180 to 180 range
+        while (deltaY > 180) deltaY -= 360;
+        while (deltaY < -180) deltaY += 360;
+
+        const endRotationY = startRotation.y + deltaY;
+
+        const startTime = Date.now();
+
+        const animate = () => {
+          const elapsed = Date.now() - startTime;
+          const progress = Math.min(elapsed / duration, 1);
+
+          // Ease-in-out function for smooth animation
+          const eased =
+            progress < 0.5
+              ? 2 * progress * progress
+              : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+
+          // Interpolate rotation
+          const currentRotation = {
+            x: startRotation.x + (targetRotation.x - startRotation.x) * eased,
+            y: startRotation.y + (endRotationY - startRotation.y) * eased,
+            z: startRotation.z + (targetRotation.z - startRotation.z) * eased,
+          };
+
+          // Apply rotation (convert degrees to radians)
+          camera.object3D.rotation.set(
+            currentRotation.x * (Math.PI / 180),
+            currentRotation.y * (Math.PI / 180),
+            currentRotation.z * (Math.PI / 180)
+          );
+
+          if (progress < 1) {
+            requestAnimationFrame(animate);
+          }
+        };
+
+        animate();
+      }
+
+      /**
+       * Highlight hotspot (not needed with library, but keep for compatibility)
+       */
+      highlightHotspot(index) {
+        // The library handles hotspot visualization
+        // This is kept for API compatibility
+      }
+
+      /**
+       * Update hotspot marker (refresh scene while preserving camera rotation)
+       */
+      async updateHotspotMarker(index) {
+        const scene = this.editor.sceneManager.getCurrentScene();
+        if (!scene || !this.tour) return;
+
+        const hotspot = scene.hotspots[index];
+        if (!hotspot) return;
+
+        // Refresh the preview to reflect changes, camera rotation will be preserved
+        await this.refresh();
+      }
+
+      /**
+       * Create loading overlay element
+       */
+      createLoadingOverlay() {
+        const overlay = document.createElement("div");
+        overlay.className = "preview-loading";
+        overlay.innerHTML = `
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading scene...</div>
+        `;
+        return overlay;
+      }
+
+      /**
+       * Show loading animation
+       */
+      showLoading() {
+        const existing = this.previewContainer?.querySelector(".preview-loading");
+        if (existing) {
+          existing.classList.remove("hidden");
+        }
+      }
+
+      /**
+       * Hide loading animation
+       */
+      hideLoading() {
+        const loading = this.previewContainer?.querySelector(".preview-loading");
+        if (loading) {
+          loading.classList.add("hidden");
+          // Remove after transition
+          setTimeout(() => {
+            if (loading.parentNode) {
+              loading.parentNode.removeChild(loading);
+            }
+          }, 300);
+        }
+      }
+    };
+
+    // UI Controller - Handles DOM manipulation and rendering
+
+    let UIController$1 = class UIController {
+        constructor(editor) {
+            this.editor = editor;
+            this.sceneList = document.getElementById('sceneList');
+            this.hotspotList = document.getElementById('hotspotList');
+            this.draggedElement = null;
+        }
+
+        /**
+         * Render scene list
+         */
+        renderSceneList() {
+            if (!this.sceneList) return;
+
+            this.sceneList.innerHTML = '';
+            const scenes = this.editor.sceneManager.getAllScenes();
+            const currentIndex = this.editor.sceneManager.currentSceneIndex;
+
+            if (scenes.length === 0) {
+                const empty = document.createElement('div');
+                empty.className = 'empty-state';
+                empty.innerHTML = `
+                <p>No scenes yet</p>
+                <p class="hint">Click "Add Scene" to upload a 360° panorama</p>
+            `;
+                this.sceneList.appendChild(empty);
+                return;
+            }
+
+            scenes.forEach((scene, index) => {
+                const card = this.createSceneCard(scene, index, index === currentIndex);
+                this.sceneList.appendChild(card);
+            });
+        }
+
+        /**
+         * Create scene card element
+         */
+        createSceneCard(scene, index, isActive) {
+            const card = document.createElement('div');
+            card.className = 'scene-card' + (isActive ? ' active' : '');
+            card.draggable = true;
+            card.dataset.index = index;
+
+            // Drag handle
+            const dragHandle = document.createElement('div');
+            dragHandle.className = 'drag-handle';
+            dragHandle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>';
+
+            // Thumbnail
+            const thumbnail = document.createElement('img');
+            thumbnail.src = scene.thumbnail || scene.imageUrl;
+            thumbnail.alt = scene.name;
+
+            // Info
+            const info = document.createElement('div');
+            info.className = 'scene-info';
+
+            const name = document.createElement('div');
+            name.className = 'scene-name';
+            name.textContent = scene.name;
+
+            const meta = document.createElement('div');
+            meta.className = 'scene-meta';
+            meta.textContent = `${scene.hotspots.length} hotspot${scene.hotspots.length !== 1 ? 's' : ''}`;
+
+            info.appendChild(name);
+            info.appendChild(meta);
+
+            // Actions
+            const actions = document.createElement('div');
+            actions.className = 'scene-actions';
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'btn-icon';
+            deleteBtn.innerHTML = '🗑️';
+            deleteBtn.title = 'Delete scene';
+            deleteBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.editor.removeScene(index);
+            };
+
+            actions.appendChild(deleteBtn);
+
+            card.appendChild(dragHandle);
+            card.appendChild(thumbnail);
+            card.appendChild(info);
+            card.appendChild(actions);
+
+            // Click handler
+            card.onclick = () => {
+                this.editor.selectScene(index);
+            };
+
+            // Drag and drop handlers
+            this.setupDragAndDrop(card);
+
+            return card;
+        }
+
+        /**
+         * Setup drag and drop for scene reordering
+         */
+        setupDragAndDrop(card) {
+            card.addEventListener('dragstart', (e) => {
+                this.draggedElement = card;
+                card.classList.add('dragging');
+                e.dataTransfer.effectAllowed = 'move';
+            });
+
+            card.addEventListener('dragend', () => {
+                card.classList.remove('dragging');
+                this.draggedElement = null;
+            });
+
+            card.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+
+                if (this.draggedElement && this.draggedElement !== card) {
+                    const bounding = card.getBoundingClientRect();
+                    const offset = bounding.y + bounding.height / 2;
+
+                    if (e.clientY - offset > 0) {
+                        card.style.borderBottom = '2px solid var(--accent-color)';
+                        card.style.borderTop = '';
+                    } else {
+                        card.style.borderTop = '2px solid var(--accent-color)';
+                        card.style.borderBottom = '';
+                    }
+                }
+            });
+
+            card.addEventListener('dragleave', () => {
+                card.style.borderTop = '';
+                card.style.borderBottom = '';
+            });
+
+            card.addEventListener('drop', (e) => {
+                e.preventDefault();
+                card.style.borderTop = '';
+                card.style.borderBottom = '';
+
+                if (this.draggedElement && this.draggedElement !== card) {
+                    const fromIndex = parseInt(this.draggedElement.dataset.index);
+                    const toIndex = parseInt(card.dataset.index);
+                    this.editor.reorderScenes(fromIndex, toIndex);
+                }
+            });
+        }
+
+        /**
+         * Render hotspot list
+         */
+        renderHotspotList() {
+            if (!this.hotspotList) return;
+
+            this.hotspotList.innerHTML = '';
+            const hotspots = this.editor.hotspotEditor.getAllHotspots();
+            const currentIndex = this.editor.hotspotEditor.currentHotspotIndex;
+
+            if (hotspots.length === 0) {
+                const empty = document.createElement('div');
+                empty.className = 'empty-state';
+                empty.textContent = 'No hotspots. Click "Add Hotspot" to create one.';
+                this.hotspotList.appendChild(empty);
+                return;
+            }
+
+            hotspots.forEach((hotspot, index) => {
+                const item = this.createHotspotItem(hotspot, index, index === currentIndex);
+                this.hotspotList.appendChild(item);
+            });
+        }
+
+        /**
+         * Create hotspot list item
+         */
+        createHotspotItem(hotspot, index, isActive) {
+            const item = document.createElement('div');
+            item.className = 'hotspot-item' + (isActive ? ' active' : '');
+
+            const color = document.createElement('div');
+            color.className = 'hotspot-color';
+            color.style.backgroundColor = hotspot.color;
+
+            const info = document.createElement('div');
+            info.className = 'hotspot-info';
+            
+            const title = document.createElement('div');
+            title.className = 'hotspot-title';
+            title.textContent = hotspot.title || 'Untitled Hotspot';
+            
+            const target = document.createElement('div');
+            target.className = 'hotspot-target';
+            if (hotspot.targetSceneId) {
+                const targetScene = this.editor.sceneManager.getSceneById(hotspot.targetSceneId);
+                target.textContent = targetScene ? `→ ${targetScene.name}` : `→ ${hotspot.targetSceneId}`;
+            } else {
+                target.textContent = 'No target';
+            }
+            
+            info.appendChild(title);
+            info.appendChild(target);
+
+            const actions = document.createElement('div');
+            actions.className = 'hotspot-actions';
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'btn-delete';
+            deleteBtn.innerHTML = '🗑️';
+            deleteBtn.title = 'Delete';
+            deleteBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.editor.removeHotspot(index);
+            };
+
+            actions.appendChild(deleteBtn);
+
+            item.appendChild(color);
+            item.appendChild(info);
+            item.appendChild(actions);
+
+            item.onclick = () => {
+                this.editor.selectHotspot(index);
+            };
+
+            return item;
+        }
+
+        /**
+         * Update properties panel for hotspot
+         */
+        updateHotspotProperties(hotspot) {
+            const hotspotAll = document.getElementById('hotspotAll');
+            const hotspotProperties = document.getElementById('hotspotProperties');
+            
+            if (!hotspot) {
+                // No hotspot selected - show list, hide properties
+                if (hotspotAll) hotspotAll.style.display = 'block';
+                if (hotspotProperties) hotspotProperties.style.display = 'none';
+                
+                // Clear form
+                document.getElementById('hotspotTitle').value = '';
+                document.getElementById('hotspotDescription').value = '';
+                document.getElementById('hotspotTarget').value = '';
+                document.getElementById('hotspotColor').value = '#00ff00';
+                const colorText = document.getElementById('hotspotColorText');
+                if (colorText) colorText.value = '#00ff00';
+                document.getElementById('hotspotPosX').value = '';
+                document.getElementById('hotspotPosY').value = '';
+                document.getElementById('hotspotPosZ').value = '';
+                return;
+            }
+
+            // Hotspot selected - show both list and properties
+            if (hotspotAll) hotspotAll.style.display = 'block';
+            if (hotspotProperties) hotspotProperties.style.display = 'block';
+
+            document.getElementById('hotspotTitle').value = hotspot.title || '';
+            document.getElementById('hotspotDescription').value = hotspot.description || '';
+            document.getElementById('hotspotTarget').value = hotspot.targetSceneId || '';
+            document.getElementById('hotspotColor').value = hotspot.color || '#00ff00';
+            
+            // Update color text input if it exists
+            const colorText = document.getElementById('hotspotColorText');
+            if (colorText) {
+                colorText.value = hotspot.color || '#00ff00';
+            }
+            
+            // Update position inputs
+            const pos = hotspot.position || { x: 0, y: 0, z: 0 };
+            document.getElementById('hotspotPosX').value = pos.x;
+            document.getElementById('hotspotPosY').value = pos.y;
+            document.getElementById('hotspotPosZ').value = pos.z;
+
+            // Update target dropdown
+            this.updateTargetSceneOptions();
+        }
+
+        /**
+         * Update properties panel for scene
+         */
+        updateSceneProperties(scene) {
+            if (!scene) {
+                document.getElementById('sceneId').value = '';
+                document.getElementById('sceneName').value = '';
+                document.getElementById('sceneImageUrl').value = '';
+                return;
+            }
+
+            document.getElementById('sceneId').value = scene.id || '';
+            document.getElementById('sceneName').value = scene.name || '';
+            document.getElementById('sceneImageUrl').value = scene.imageUrl || '';
+        }
+
+        /**
+         * Update properties panel for tour
+         */
+        updateTourProperties(config) {
+            document.getElementById('tourTitle').value = config.title || '';
+            document.getElementById('tourDescription').value = config.description || '';
+            document.getElementById('tourInitialScene').value = config.initialSceneId || '';
+            document.getElementById('tourAutoRotate').checked = config.autoRotate || false;
+            document.getElementById('tourShowCompass').checked = config.showCompass || false;
+            
+            // Also update project name in header if it exists
+            const projectName = document.getElementById('project-name');
+            if (projectName) {
+                projectName.value = config.title || '';
+            }
+        }
+
+        /**
+         * Update target scene options in hotspot properties
+         */
+        updateTargetSceneOptions() {
+            const select = document.getElementById('hotspotTarget');
+            if (!select) return;
+
+            const scenes = this.editor.sceneManager.getAllScenes();
+            const currentValue = select.value;
+
+            select.innerHTML = '<option value="">Select target scene...</option>';
+
+            scenes.forEach(scene => {
+                const option = document.createElement('option');
+                option.value = scene.id;
+                option.textContent = scene.name;
+                select.appendChild(option);
+            });
+
+            select.value = currentValue;
+        }
+
+        /**
+         * Update initial scene options in tour properties
+         */
+        updateInitialSceneOptions() {
+            const select = document.getElementById('tourInitialScene');
+            if (!select) return;
+
+            const scenes = this.editor.sceneManager.getAllScenes();
+            const currentValue = select.value;
+
+            select.innerHTML = '<option value="">Select initial scene...</option>';
+
+            scenes.forEach(scene => {
+                const option = document.createElement('option');
+                option.value = scene.id;
+                option.textContent = scene.name;
+                select.appendChild(option);
+            });
+
+            select.value = currentValue;
+        }
+
+        /**
+         * Show/hide loading indicator
+         */
+        setLoading(isLoading) {
+            const indicator = document.querySelector('.loading-indicator');
+            if (indicator) {
+                indicator.style.display = isLoading ? 'block' : 'none';
+            }
+        }
+
+        /**
+         * Switch properties tab
+         */
+        switchTab(tabName) {
+            // Update tab buttons
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.tab === tabName);
+            });
+
+            // Update tab content
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.toggle('active', content.id === tabName + 'Tab');
+            });
+        }
+    };
+
+    // Export Manager - Handles JSON generation for SWT library
+
+    let ExportManager$1 = class ExportManager {
+        constructor(editor) {
+            this.editor = editor;
+        }
+
+        /**
+         * Generate JSON compatible with SWT library
+         */
+        generateJSON() {
+            const scenes = this.editor.sceneManager.getAllScenes();
+            const config = this.editor.config;
+            // Build scenes array
+            const scenesData = scenes.map(scene => ({
+                id: scene.id,
+                name: scene.name,
+                imageUrl: scene.imageUrl,
+                hotspots: scene.hotspots.map(hotspot => ({
+                    id: hotspot.id,
+                    type: hotspot.type || 'navigation',
+                    position: hotspot.position,
+                    targetSceneId: hotspot.targetSceneId || '',
+                    title: hotspot.title || '',
+                    description: hotspot.description || '',
+                    color: hotspot.color || '#00ff00',
+                    icon: hotspot.icon || ''
+                }))
+            }));
+    // Determine initial scene
+            let initialSceneId = config.initialSceneId;
+            if (!initialSceneId && scenes.length > 0) {
+                initialSceneId = scenes[0].id;
+            }
+
+            // Build final JSON
+            const jsonData = {
+                title: config.title || 'Virtual Tour',
+                description: config.description || '',
+                initialSceneId: initialSceneId,
+                scenes: scenesData,
+                settings: {
+                    autoRotate: config.autoRotate || false,
+                    showCompass: config.showCompass || false
+                }
+            };
+
+            return jsonData;
+        }
+
+        /**
+         * Export as JSON file
+         */
+        exportJSON() {
+            try {
+                const jsonData = this.generateJSON();
+                const json = JSON.stringify(jsonData, null, 2);
+                
+                const filename = sanitizeId(jsonData.title || 'tour') + '.json';
+                downloadTextAsFile(json, filename);
+                
+                showToast('Tour exported successfully', 'success');
+                return true;
+            } catch (error) {
+                console.error('Export failed:', error);
+                showToast('Export failed', 'error');
+                return false;
+            }
+        }
+
+        /**
+         * Copy JSON to clipboard
+         */
+        async copyJSON() {
+            try {
+                const jsonData = this.generateJSON();
+                const json = JSON.stringify(jsonData, null, 2);
+                
+                const success = await copyToClipboard(json);
+                if (success) {
+                    showToast('JSON copied to clipboard', 'success');
+                } else {
+                    showToast('Failed to copy to clipboard', 'error');
+                }
+                return success;
+            } catch (error) {
+                console.error('Copy failed:', error);
+                showToast('Copy failed', 'error');
+                return false;
+            }
+        }
+
+        /**
+         * Generate HTML viewer code
+         */
+        generateViewerHTML() {
+            const jsonData = this.generateJSON();
+            
+            return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${jsonData.title}</title>
+    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
+    <script src="dist/swt.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+        }
+        
+        #loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            z-index: 1000;
+        }
+        
+        #loading.hidden {
+            display: none;
+        }
+        
+        .spinner {
+            border: 4px solid rgba(255,255,255,0.3);
+            border-top: 4px solid #fff;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin-right: 15px;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        #ui {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 100;
+            display: flex;
+            gap: 10px;
+        }
+        
+        .btn {
+            background: rgba(0,0,0,0.7);
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        
+        .btn:hover {
+            background: rgba(0,0,0,0.9);
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <div class="spinner"></div>
+        <span>Loading Tour...</span>
+    </div>
+    
+    <div id="tour-container"></div>
+    
+    <div id="ui" style="display: none;">
+        <button class="btn" id="resetBtn">Reset View</button>
+        <span class="btn" id="sceneInfo"></span>
+    </div>
+
+    <script>
+        // Tour configuration
+        const tourConfig = ${JSON.stringify(jsonData, null, 8)};
+        
+        // Initialize tour
+        let tour;
+        
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                // Create tour instance
+                tour = new SenangWebsTour('tour-container', tourConfig);
+                
+                // Listen to events
+                tour.on('sceneChanged', (sceneId) => {
+updateSceneInfo();
+                });
+                
+                tour.on('ready', () => {
+document.getElementById('loading').classList.add('hidden');
+                    document.getElementById('ui').style.display = 'flex';
+                    updateSceneInfo();
+                });
+                
+                tour.on('error', (error) => {
+                    console.error('Tour error:', error);
+                    alert('Failed to load tour: ' + error.message);
+                });
+                
+                // Start tour
+                await tour.start();
+                
+                // Setup UI
+                document.getElementById('resetBtn').addEventListener('click', () => {
+                    const camera = document.querySelector('[camera]');
+                    if (camera) {
+                        camera.setAttribute('rotation', '0 0 0');
+                    }
+                });
+                
+            } catch (error) {
+                console.error('Failed to initialize tour:', error);
+                alert('Failed to initialize tour: ' + error.message);
+            }
+        });
+        
+        function updateSceneInfo() {
+            const sceneId = tour.getCurrentSceneId();
+            const scene = tourConfig.scenes.find(s => s.id === sceneId);
+            if (scene) {
+                document.getElementById('sceneInfo').textContent = scene.name;
+            }
+        }
+    </script>
+</body>
+</html>`;
+        }
+
+        /**
+         * Export as standalone HTML viewer
+         */
+        exportViewerHTML() {
+            try {
+                const html = this.generateViewerHTML();
+                const jsonData = this.generateJSON();
+                const filename = sanitizeId(jsonData.title || 'tour') + '-viewer.html';
+                
+                downloadTextAsFile(html, filename);
+                
+                showToast('Viewer HTML exported successfully', 'success');
+                return true;
+            } catch (error) {
+                console.error('Export viewer failed:', error);
+                showToast('Export viewer failed', 'error');
+                return false;
+            }
+        }
+
+        /**
+         * Show export preview in modal
+         */
+        showExportPreview() {
+            try {
+                const jsonData = this.generateJSON();
+                const json = JSON.stringify(jsonData, null, 2);
+                
+                const preview = document.getElementById('exportPreview');
+                if (preview) {
+                    preview.textContent = json;
+                }
+                
+                showModal('exportModal');
+                return true;
+            } catch (error) {
+                console.error('Failed to show export preview:', error);
+                showToast('Failed to generate preview', 'error');
+                return false;
+            }
+        }
+    };
+
+    // Main Editor Controller
+
+    let TourEditor$1 = class TourEditor {
+        constructor(options = {}) {
+            this.config = {
+                title: options.projectName || 'My Virtual Tour',
+                description: '',
+                initialSceneId: '',
+                autoRotate: false,
+                showCompass: false
+            };
+            
+            // Store initialization options
+            this.options = {
+                sceneListElement: options.sceneListElement || null,
+                previewElement: options.previewElement || null,
+                propertiesElement: options.propertiesElement || null,
+                autoSave: options.autoSave !== undefined ? options.autoSave : false,
+                autoSaveInterval: options.autoSaveInterval || 30000,
+                ...options
+            };
+            
+            this.storageManager = new ProjectStorageManager();
+            this.sceneManager = new SceneManagerEditor(this);
+            this.hotspotEditor = new HotspotEditor(this);
+            this.previewController = new PreviewController(this);
+            this.uiController = new UIController(this);
+            this.exportManager = new ExportManager(this);
+            
+            this.hasUnsavedChanges = false;
+            this.lastRenderedSceneIndex = -1;
+            this.listenersSetup = false;
+        }
+
+        /**
+         * Initialize editor
+         * @param {Object} config - Optional configuration object for programmatic init
+         */
+        async init(config = {}) {
+            // Merge config with existing options
+            if (config && Object.keys(config).length > 0) {
+                Object.assign(this.options, config);
+                if (config.projectName) {
+                    this.config.title = config.projectName;
+                }
+            }
+            
+            // Initialize preview
+            const previewInit = await this.previewController.init();
+            if (!previewInit) {
+                console.error('Failed to initialize preview controller');
+                showToast('Failed to initialize preview', 'error');
+                return false;
+            }
+            
+            // Setup event listeners
+            this.setupEventListeners();
+            
+            // Load saved project if exists (but only if it has valid data)
+            if (this.storageManager.hasProject()) {
+                try {
+                    const projectData = this.storageManager.loadProject();
+                    if (projectData && projectData.scenes && projectData.scenes.length > 0) {
+                        this.loadProject();
+                    } else {
+                        // Invalid or empty project, clear it
+                        console.error('Invalid or empty project data, clearing storage');
+                        this.storageManager.clearProject();
+                    }
+                } catch (error) {
+                    console.error('Error loading saved project:', error);
+                    this.storageManager.clearProject();
+                }
+            }
+            
+            // Start auto-save if enabled
+            if (this.options.autoSave) {
+                this.storageManager.startAutoSave(() => {
+                    this.saveProject();
+                }, this.options.autoSaveInterval);
+            }
+            
+            // Initial render (only if no project was loaded)
+            if (this.sceneManager.getScenes().length === 0) {
+                this.render();
+            }
+            
+            showToast('Editor ready', 'success');
+            
+            return true;
+        }
+
+        /**
+         * Setup event listeners
+         */
+        setupEventListeners() {
+            if (this.listenersSetup) {
+                return;
+            }
+
+            const addSceneBtns = document.querySelectorAll('#addSceneBtn');
+            const sceneUploads = document.querySelectorAll('#sceneUpload');
+            const importBtns = document.querySelectorAll('#importBtn');
+            const importUploads = document.querySelectorAll('#importUpload');
+            if (addSceneBtns.length > 1 || sceneUploads.length > 1 || importBtns.length > 1 || importUploads.length > 1) {
+                console.error('Duplicate IDs found in DOM. This will cause double-trigger issues.');
+            }
+            
+            // Toolbar buttons
+            document.getElementById('newBtn')?.addEventListener('click', () => this.newProject());
+            document.getElementById('saveBtn')?.addEventListener('click', () => this.saveProject());
+            document.getElementById('exportBtn')?.addEventListener('click', () => this.exportManager.showExportPreview());
+            document.getElementById('importBtn')?.addEventListener('click', () => this.importProject());
+            document.getElementById('helpBtn')?.addEventListener('click', () => showModal('helpModal'));
+
+            document.getElementById('addSceneBtn')?.addEventListener('click', () => {
+                const sceneUpload = document.getElementById('sceneUpload');
+                if (sceneUpload) {
+                    sceneUpload.click();
+                }
+            });
+            
+            document.getElementById('sceneUpload')?.addEventListener('change', (e) => {
+                if (e.target.files && e.target.files.length > 0) {
+                    this.handleSceneUpload(e.target.files);
+                    setTimeout(() => {
+                        e.target.value = '';
+                    }, 100);
+                }
+            });
+
+            document.getElementById('addHotspotBtn')?.addEventListener('click', () => {
+                this.hotspotEditor.enablePlacementMode();
+            });
+            
+            document.getElementById('clearHotspotsBtn')?.addEventListener('click', () => {
+                if (this.hotspotEditor.clearAllHotspots()) {
+                    this.render();
+                }
+            });
+
+            // Properties tabs
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    this.uiController.switchTab(btn.dataset.tab);
+                });
+            });
+
+            document.getElementById('hotspotTitle')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentHotspot('title', e.target.value);
+            }, 300));
+            
+            document.getElementById('hotspotDescription')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentHotspot('description', e.target.value);
+            }, 300));
+            
+            document.getElementById('hotspotTarget')?.addEventListener('change', (e) => {
+                this.updateCurrentHotspot('targetSceneId', e.target.value);
+            });
+            
+            document.getElementById('hotspotColor')?.addEventListener('input', (e) => {
+                this.updateCurrentHotspot('color', e.target.value);
+            });
+
+            document.getElementById('hotspotPosX')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentHotspotPosition('x', parseFloat(e.target.value) || 0);
+            }, 300));
+            
+            document.getElementById('hotspotPosY')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentHotspotPosition('y', parseFloat(e.target.value) || 0);
+            }, 300));
+            
+            document.getElementById('hotspotPosZ')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentHotspotPosition('z', parseFloat(e.target.value) || 0);
+            }, 300));
+
+            document.getElementById('sceneId')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentScene('id', sanitizeId(e.target.value));
+            }, 300));
+            
+            document.getElementById('sceneName')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentScene('name', e.target.value);
+            }, 300));
+            
+            document.getElementById('sceneImageUrl')?.addEventListener('input', debounce((e) => {
+                this.updateCurrentSceneImage(e.target.value);
+            }, 300));
+
+            document.getElementById('tourTitle')?.addEventListener('input', debounce((e) => {
+                this.config.title = e.target.value;
+                this.markUnsavedChanges();
+                const projectName = document.getElementById('project-name');
+                if (projectName && projectName.value !== e.target.value) {
+                    projectName.value = e.target.value;
+                }
+            }, 300));
+            
+            document.getElementById('project-name')?.addEventListener('input', debounce((e) => {
+                this.config.title = e.target.value;
+                this.markUnsavedChanges();
+                const tourTitle = document.getElementById('tourTitle');
+                if (tourTitle && tourTitle.value !== e.target.value) {
+                    tourTitle.value = e.target.value;
+                }
+            }, 300));
+            
+            document.getElementById('tourDescription')?.addEventListener('input', debounce((e) => {
+                this.config.description = e.target.value;
+                this.markUnsavedChanges();
+            }, 300));
+            
+            document.getElementById('tourInitialScene')?.addEventListener('change', (e) => {
+                this.config.initialSceneId = e.target.value;
+                this.markUnsavedChanges();
+            });
+            
+            document.getElementById('tourAutoRotate')?.addEventListener('change', (e) => {
+                this.config.autoRotate = e.target.checked;
+                this.markUnsavedChanges();
+            });
+            
+            document.getElementById('tourShowCompass')?.addEventListener('change', (e) => {
+                this.config.showCompass = e.target.checked;
+                this.markUnsavedChanges();
+            });
+
+            document.getElementById('exportJsonBtn')?.addEventListener('click', () => {
+                this.exportManager.exportJSON();
+            });
+            
+            document.getElementById('copyJsonBtn')?.addEventListener('click', () => {
+                this.exportManager.copyJSON();
+            });
+            
+            document.getElementById('exportViewerBtn')?.addEventListener('click', () => {
+                this.exportManager.exportViewerHTML();
+            });
+
+            document.querySelectorAll('.modal-close').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const modal = btn.closest('.modal');
+                    if (modal) {
+                        hideModal(modal.id);
+                    }
+                });
+            });
+
+            document.getElementById('importUpload')?.addEventListener('change', (e) => {
+                if (e.target.files && e.target.files.length > 0) {
+                    this.handleImportFile(e.target.files[0]);
+                    setTimeout(() => {
+                        e.target.value = '';
+                    }, 100);
+                }
+            });
+
+            window.addEventListener('beforeunload', (e) => {
+                if (this.hasUnsavedChanges) {
+                    e.preventDefault();
+                    e.returnValue = '';
+                }
+            });
+            
+            this.listenersSetup = true;
+        }
+
+        /**
+         * Handle scene upload
+         */
+        async handleSceneUpload(files) {
+            if (!files || files.length === 0) {
+                return;
+            }
+
+            this.uiController.setLoading(true);
+
+            for (const file of files) {
+                if (!file.type.startsWith('image/')) {
+                    showToast(`${file.name} is not an image`, 'error');
+                    continue;
+                }
+
+                await this.sceneManager.addScene(file);
+            }
+            this.uiController.setLoading(false);
+            this.render();
+            this.markUnsavedChanges();
+        }
+
+        /**
+         * Add hotspot at position
+         */
+        addHotspotAtPosition(position) {
+            const distance = Math.sqrt(position.x * position.x + position.y * position.y + position.z * position.z);
+            if (distance > 5) {
+                const scale = 5 / distance;
+                position.x *= scale;
+                position.y *= scale;
+                position.z *= scale;
+                position.x = parseFloat(position.x.toFixed(2));
+                position.y = parseFloat(position.y.toFixed(2));
+                position.z = parseFloat(position.z.toFixed(2));
+            }
+            const hotspot = this.hotspotEditor.addHotspot(position);
+            if (hotspot) {
+                this.lastRenderedSceneIndex = -1;
+                this.render();
+                this.markUnsavedChanges();
+            } else {
+                console.error('Failed to add hotspot');
+            }
+        }
+
+        /**
+         * Select scene by index
+         */
+        selectScene(index) {
+            if (this.sceneManager.setCurrentScene(index)) {
+                this.lastRenderedSceneIndex = -1;
+                this.hotspotEditor.currentHotspotIndex = -1;
+                
+                const scene = this.sceneManager.getCurrentScene();
+                if (scene) {
+                    this.previewController.loadScene(scene, false);
+                    this.lastRenderedSceneIndex = index;
+                }
+                
+                this.uiController.renderSceneList();
+                this.uiController.updateSceneProperties(scene);
+                this.uiController.renderHotspotList();
+                this.uiController.updateHotspotProperties(null);
+                this.uiController.updateInitialSceneOptions();
+                this.uiController.updateTargetSceneOptions();
+            }
+        }
+
+        /**
+         * Select hotspot by index
+         */
+        selectHotspot(index) {
+            if (this.hotspotEditor.setCurrentHotspot(index)) {
+                const hotspot = this.hotspotEditor.getHotspot(index);
+                
+                this.uiController.renderHotspotList();
+                this.uiController.updateHotspotProperties(hotspot);
+                this.uiController.updateTargetSceneOptions();
+                this.uiController.switchTab('hotspot');
+                
+                if (hotspot && hotspot.position) {
+                    this.previewController.pointCameraToHotspot(hotspot.position);
+                }
+            }
+        }
+
+        /**
+         * Remove scene
+         */
+        removeScene(index) {
+            if (this.sceneManager.removeScene(index)) {
+                this.render();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Remove hotspot
+         */
+        removeHotspot(index) {
+            if (this.hotspotEditor.removeHotspot(index)) {
+                this.lastRenderedSceneIndex = -1;
+                this.render();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Duplicate hotspot
+         */
+        duplicateHotspot(index) {
+            const hotspot = this.hotspotEditor.duplicateHotspot(index);
+            if (hotspot) {
+                this.lastRenderedSceneIndex = -1;
+                this.render();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Reorder scenes
+         */
+        reorderScenes(fromIndex, toIndex) {
+            if (this.sceneManager.reorderScenes(fromIndex, toIndex)) {
+                this.render();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Update current hotspot property
+         */
+        async updateCurrentHotspot(property, value) {
+            const index = this.hotspotEditor.currentHotspotIndex;
+            if (this.hotspotEditor.updateHotspot(index, property, value)) {
+                await this.previewController.updateHotspotMarker(index);
+                this.uiController.renderHotspotList();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Update current hotspot position (X, Y, or Z)
+         */
+        async updateCurrentHotspotPosition(axis, value) {
+            const index = this.hotspotEditor.currentHotspotIndex;
+            const hotspot = this.hotspotEditor.getHotspot(index);
+            
+            if (hotspot) {
+                if (!hotspot.position) {
+                    hotspot.position = { x: 0, y: 0, z: 0 };
+                }
+                
+                hotspot.position[axis] = value;
+                
+                const pos = hotspot.position;
+                const distance = Math.sqrt(pos.x * pos.x + pos.y * pos.y + pos.z * pos.z);
+                if (distance > 10) {
+                    const scale = 10 / distance;
+                    pos.x *= scale;
+                    pos.y *= scale;
+                    pos.z *= scale;
+                    
+                    document.getElementById(`hotspotPos${axis.toUpperCase()}`).value = pos[axis].toFixed(2);
+                    showToast('Position clamped to 10-unit radius', 'info');
+                }
+                
+                await this.previewController.updateHotspotMarker(index);
+                this.uiController.renderHotspotList();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Update current scene property
+         */
+        updateCurrentScene(property, value) {
+            const index = this.sceneManager.currentSceneIndex;
+            if (this.sceneManager.updateScene(index, property, value)) {
+                this.uiController.renderSceneList();
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Update current scene image URL
+         */
+        async updateCurrentSceneImage(imageUrl) {
+            const index = this.sceneManager.currentSceneIndex;
+            if (index < 0) return;
+            
+            if (this.sceneManager.updateScene(index, 'imageUrl', imageUrl)) {
+                const scene = this.sceneManager.getCurrentScene();
+                if (scene) {
+                    scene.thumbnail = imageUrl;
+                }
+                
+                this.uiController.renderSceneList();
+                this.lastRenderedSceneIndex = -1;
+                
+                if (scene) {
+                    await this.previewController.loadScene(scene);
+                    this.lastRenderedSceneIndex = index;
+                    showToast('Scene image updated', 'success');
+                }
+                this.markUnsavedChanges();
+            }
+        }
+
+        /**
+         * Render all UI
+         */
+        render() {
+            this.uiController.renderSceneList();
+            this.uiController.renderHotspotList();
+            
+            const currentScene = this.sceneManager.getCurrentScene();
+            const currentHotspot = this.hotspotEditor.getCurrentHotspot();
+            
+            this.uiController.updateSceneProperties(currentScene);
+            this.uiController.updateHotspotProperties(currentHotspot);
+            this.uiController.updateTourProperties(this.config);
+            this.uiController.updateInitialSceneOptions();
+            this.uiController.updateTargetSceneOptions();
+            
+            if (currentScene) {
+                const emptyState = document.querySelector('.preview-empty');
+                if (emptyState) {
+                    emptyState.style.display = 'none';
+                }
+                
+                const currentSceneIndex = this.sceneManager.currentSceneIndex;
+                if (currentSceneIndex !== this.lastRenderedSceneIndex) {
+                    this.previewController.loadScene(currentScene);
+                    this.lastRenderedSceneIndex = currentSceneIndex;
+                }
+                
+                if (currentHotspot) {
+                    this.previewController.highlightHotspot(this.hotspotEditor.currentHotspotIndex);
+                }
+            } else {
+                const emptyState = document.querySelector('.preview-empty');
+                if (emptyState) {
+                    emptyState.style.display = 'flex';
+                }
+                this.lastRenderedSceneIndex = -1;
+            }
+        }
+
+        /**
+         * Save project
+         */
+        saveProject() {
+            const projectData = {
+                config: this.config,
+                scenes: this.sceneManager.getAllScenes()
+            };
+
+            if (this.storageManager.saveProject(projectData)) {
+                this.hasUnsavedChanges = false;
+                showToast('Project saved', 'success');
+                return true;
+            }
+            return false;
+        }
+
+        /**
+         * Load project
+         */
+        loadProject() {
+            const projectData = this.storageManager.loadProject();
+            if (projectData) {
+                this.config = projectData.config || this.config;
+                this.sceneManager.loadScenes(projectData.scenes || []);
+                this.hasUnsavedChanges = false;
+                this.render();
+                showToast('Project loaded', 'success');
+                return true;
+            }
+            return false;
+        }
+
+        /**
+         * New project
+         */
+        newProject() {
+            if (this.hasUnsavedChanges) {
+                if (!confirm('You have unsaved changes. Create new project?')) {
+                    return false;
+                }
+            }
+
+            this.config = {
+                title: 'My Virtual Tour',
+                description: '',
+                initialSceneId: '',
+                autoRotate: false,
+                showCompass: false
+            };
+            
+            this.sceneManager.clearScenes();
+            this.hasUnsavedChanges = false;
+            this.render();
+            
+            showToast('New project created', 'success');
+            return true;
+        }
+
+        /**
+         * Import project
+         */
+        importProject() {
+    const importUpload = document.getElementById('importUpload');
+            if (importUpload) {
+                importUpload.click();
+            }
+        }
+
+        /**
+         * Handle import file
+         */
+        async handleImportFile(file) {
+            try {
+                this.uiController.setLoading(true);
+                
+                const projectData = await this.storageManager.importFromFile(file);
+                
+                this.config = projectData.config || projectData;
+                this.sceneManager.loadScenes(projectData.scenes || []);
+                this.hasUnsavedChanges = true;
+                
+                this.render();
+                this.uiController.setLoading(false);
+                
+                showToast('Project imported successfully', 'success');
+            } catch (error) {
+                this.uiController.setLoading(false);
+                console.error('Import failed:', error);
+            }
+        }
+
+        /**
+         * Mark unsaved changes
+         */
+        markUnsavedChanges() {
+            this.hasUnsavedChanges = true;
+        }
+    };
+
+    // Initialize editor when DOM is ready
+    document.addEventListener('DOMContentLoaded', async () => {
+        if (document.querySelector('[data-swt-editor]')) {
+            // Declarative initialization will handle it
+            return;
+        }
+        window.editor = new TourEditor$1();
+        await window.editor.init();
+    });
+
+    // UI Initialization - Handles color picker sync, keyboard shortcuts, tab switching, and declarative init
+
+    /**
+     * Initialize editor from declarative HTML attributes
+     */
+    function initDeclarativeEditor() {
+      const editorElement = document.querySelector("[data-swt-editor]");
+
+      if (!editorElement) {
+        return null; // No declarative editor found
+      }
+
+      // Check if auto-init is enabled
+      const autoInit = editorElement.getAttribute("data-swt-auto-init");
+      if (autoInit !== "true") {
+        return null; // Auto-init disabled
+      }
+
+      // Find required elements by data attributes
+      const sceneListElement = editorElement.querySelector("[data-swt-scene-list]");
+      const previewElement = editorElement.querySelector("[data-swt-preview-area]");
+      const propertiesElement = editorElement.querySelector(
+        "[data-swt-properties-panel]"
+      );
+
+      // Get optional configuration from attributes
+      const projectName =
+        editorElement.getAttribute("data-swt-project-name") || "My Virtual Tour";
+      const autoSave = editorElement.getAttribute("data-swt-auto-save") === "true";
+      const autoSaveInterval =
+        parseInt(editorElement.getAttribute("data-swt-auto-save-interval")) ||
+        30000;
+
+      // Create and initialize editor
+      const editor = new TourEditor({
+        projectName,
+        autoSave,
+        autoSaveInterval,
+      });
+
+      // Store element references for controllers
+      if (sceneListElement) editor.options.sceneListElement = sceneListElement;
+      if (previewElement) editor.options.previewElement = previewElement;
+      if (propertiesElement) editor.options.propertiesElement = propertiesElement;
+
+      editor.init().catch((err) => {
+          console.error("Failed to initialize declarative editor:", err);
+        });
+
+      return editor;
+    }
+
+    window.addEventListener("DOMContentLoaded", () => {
+      // Try declarative initialization first
+      const declarativeEditor = initDeclarativeEditor();
+
+      if (declarativeEditor) {
+        // Store editor instance globally for declarative mode
+        window.editor = declarativeEditor;
+      }
+
+      // Setup color picker sync
+      const colorPicker = document.getElementById("hotspotColor");
+      const colorText = document.getElementById("hotspotColorText");
+
+      if (colorPicker && colorText) {
+        colorPicker.addEventListener("input", (e) => {
+          colorText.value = e.target.value;
+        });
+
+        colorText.addEventListener("input", (e) => {
+          if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
+            colorPicker.value = e.target.value;
+          }
+        });
+      }
+
+      // Keyboard shortcuts
+      document.addEventListener("keydown", (e) => {
+        // Ctrl/Cmd + S to save
+        if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+          e.preventDefault();
+          if (window.editor) window.editor.saveProject();
+        }
+
+        // Ctrl/Cmd + E to export
+        if ((e.ctrlKey || e.metaKey) && e.key === "e") {
+          e.preventDefault();
+          if (window.editor) window.editor.exportManager.showExportPreview();
+        }
+
+        // ESC to close modals
+        if (e.key === "Escape") {
+          document.querySelectorAll(".modal.show").forEach((modal) => {
+            modal.classList.remove("show");
+          });
+        }
+      });
+
+      // Preview button - just focuses on the preview area
+      const previewBtn = document.getElementById("previewBtn");
+      if (previewBtn) {
+        previewBtn.addEventListener("click", () => {
+          const preview = document.getElementById("preview");
+          const canvas = document.getElementById("canvasArea");
+          if (preview && canvas) {
+            canvas.classList.toggle("preview-active");
+            // refresh preview
+            if (window.editor && window.editor.previewController) {
+              window.editor.previewController.refresh();
+            }
+          }
+        });
+      }
+
+      // Modal background click to close
+      document.querySelectorAll(".modal").forEach((modal) => {
+        modal.addEventListener("click", (e) => {
+          if (e.target === modal) {
+            modal.classList.remove("show");
+          }
+        });
+      });
+
+      // Tab switching functionality
+      const tabs = document.querySelectorAll(".tab");
+      const tabContents = document.querySelectorAll(".tab-content");
+
+      tabs.forEach((tab) => {
+        tab.addEventListener("click", () => {
+          const targetTab = tab.dataset.tab;
+
+          // Update tab buttons
+          tabs.forEach((t) => t.classList.remove("active"));
+          tab.classList.add("active");
+
+          // Update tab content
+          tabContents.forEach((content) => {
+            content.style.display = "none";
+          });
+
+          const targetContent = document.getElementById(targetTab + "Tab");
+          if (targetContent) {
+            targetContent.style.display = "block";
+          }
+
+          // Update panel title (if exists)
+          const panelTitle = document.getElementById("panelTitle");
+          if (panelTitle) {
+            switch (targetTab) {
+              case "scene":
+                panelTitle.textContent = "Scene Properties";
+                break;
+              case "hotspot":
+                panelTitle.textContent = "Hotspot Properties";
+                break;
+              case "tour":
+                panelTitle.textContent = "Tour Settings";
+                break;
+            }
+          }
+        });
+      });
+    });
+
+    // SenangWebs Tour Editor - Entry Point
+    // This file bundles all editor modules for distribution
+
+    Object.assign(window, utils);
+
+    // Attach classes to window for global access
+    window.ProjectStorageManager = ProjectStorageManager$1;
+    window.SceneManagerEditor = SceneManagerEditor$1;
+    window.HotspotEditor = HotspotEditor$1;
+    window.PreviewController = PreviewController$1;
+    window.UIController = UIController$1;
+    window.ExportManager = ExportManager$1;
+    window.TourEditor = TourEditor$1;
+
+    return TourEditor$1;
+
+})();
+//# sourceMappingURL=swt-editor.js.map