senangwebs-tour 1.0.2 → 1.0.3

package/dist/swt-editor.js

@@ -913,7 +913,7 @@
               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);
@@ -921,9 +921,9 @@
         } else {
           // First load - only remove non-A-Frame elements (like empty state divs)
           const children = Array.from(this.previewContainer.children);
-          children.forEach(child => {
+          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') {
+            if (child.tagName.toLowerCase() !== "a-scene") {
               this.previewContainer.removeChild(child);
             }
           });
@@ -1132,6 +1132,7 @@
 
       /**
        * Get current camera rotation
+       * Works with A-Frame's look-controls component by reading its internal state
        */
       getCameraRotation() {
         const aframeScene = this.previewContainer?.querySelector("a-scene");
@@ -1144,7 +1145,18 @@
           return null;
         }
 
-        // Get rotation from object3D which is more reliable
+        // Try to get rotation from look-controls internal state (more reliable)
+        const lookControls = camera.components?.["look-controls"];
+        if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+          const savedRotation = {
+            x: lookControls.pitchObject.rotation.x,
+            y: lookControls.yawObject.rotation.y,
+            z: 0,
+          };
+          return savedRotation;
+        }
+
+        // Fallback to object3D rotation
         const rotation = camera.object3D.rotation;
         const savedRotation = {
           x: rotation.x,
@@ -1156,6 +1168,7 @@
 
       /**
        * Set camera rotation
+       * Works with A-Frame's look-controls component by setting its internal state
        */
       setCameraRotation(rotation) {
         if (!rotation) {
@@ -1172,17 +1185,30 @@
           return;
         }
 
-        // Set rotation on object3D directly
+        // Set rotation via look-controls internal pitchObject/yawObject
+        // This is required because look-controls overrides object3D.rotation on each tick
         const setRotation = () => {
-          if (camera.object3D) {
-            camera.object3D.rotation.set(rotation.x, rotation.y, rotation.z);
+          const cam = this.previewContainer?.querySelector("[camera]");
+          if (!cam) return;
+
+          const lookControls = cam.components?.["look-controls"];
+          if (lookControls && lookControls.pitchObject && lookControls.yawObject) {
+            // Set pitch (x rotation) on pitchObject
+            lookControls.pitchObject.rotation.x = rotation.x;
+            // Set yaw (y rotation) on yawObject
+            lookControls.yawObject.rotation.y = rotation.y;
+          } else if (cam.object3D) {
+            // Fallback to direct object3D if look-controls not ready
+            cam.object3D.rotation.set(rotation.x, rotation.y, rotation.z);
           }
         };
 
-        // Try immediately and also after a delay to ensure it sticks
+        // Try immediately and also after delays to ensure it sticks
+        // A-Frame look-controls may not be fully initialized immediately
         setRotation();
         setTimeout(setRotation, 100);
         setTimeout(setRotation, 300);
+        setTimeout(setRotation, 500);
       }
 
       /**
@@ -1191,15 +1217,8 @@
       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);
-          }
+          // loadScene with preserveCameraRotation=true handles save/restore internally
+          await this.loadScene(scene, true);
         }
       }
 
@@ -1375,670 +1394,599 @@
     // 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;
-        }
+      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;
+      /**
+       * Render scene list
+       */
+      renderSceneList() {
+        if (!this.sceneList) return;
 
-            this.sceneList.innerHTML = '';
-            const scenes = this.editor.sceneManager.getAllScenes();
-            const currentIndex = this.editor.sceneManager.currentSceneIndex;
+        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 = `
+        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);
-            });
+          this.sceneList.appendChild(empty);
+          return;
         }
 
-        /**
-         * 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);
-            };
+        scenes.forEach((scene, index) => {
+          const card = this.createSceneCard(scene, index, index === currentIndex);
+          this.sceneList.appendChild(card);
+        });
+      }
 
-            actions.appendChild(deleteBtn);
+      /**
+       * 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 =
+          '<ss-icon icon="arrow-up-down-left-right" thickness="2.2"></ss-icon>';
+
+        // 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 = '<ss-icon icon="trash" thickness="2.2"></ss-icon>';
+        deleteBtn.title = "Delete scene";
+        deleteBtn.onclick = (e) => {
+          e.stopPropagation();
+          this.editor.removeScene(index);
+        };
 
-            card.appendChild(dragHandle);
-            card.appendChild(thumbnail);
-            card.appendChild(info);
-            card.appendChild(actions);
+        actions.appendChild(deleteBtn);
 
-            // Click handler
-            card.onclick = () => {
-                this.editor.selectScene(index);
-            };
+        card.appendChild(dragHandle);
+        card.appendChild(thumbnail);
+        card.appendChild(info);
+        card.appendChild(actions);
 
-            // Drag and drop handlers
-            this.setupDragAndDrop(card);
+        // Click handler
+        card.onclick = () => {
+          this.editor.selectScene(index);
+        };
 
-            return card;
-        }
+        // Drag and drop handlers
+        this.setupDragAndDrop(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';
-            });
+        return card;
+      }
 
-            card.addEventListener('dragend', () => {
-                card.classList.remove('dragging');
-                this.draggedElement = null;
-            });
+      /**
+       * 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('dragover', (e) => {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = 'move';
+        card.addEventListener("dragend", () => {
+          card.classList.remove("dragging");
+          this.draggedElement = null;
+        });
 
-                if (this.draggedElement && this.draggedElement !== card) {
-                    const bounding = card.getBoundingClientRect();
-                    const offset = bounding.y + bounding.height / 2;
+        card.addEventListener("dragover", (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
 
-                    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 = '';
-                    }
-                }
-            });
+          if (this.draggedElement && this.draggedElement !== card) {
+            const bounding = card.getBoundingClientRect();
+            const offset = bounding.y + bounding.height / 2;
 
-            card.addEventListener('dragleave', () => {
-                card.style.borderTop = '';
-                card.style.borderBottom = '';
-            });
+            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('drop', (e) => {
-                e.preventDefault();
-                card.style.borderTop = '';
-                card.style.borderBottom = '';
+        card.addEventListener("dragleave", () => {
+          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);
-                }
-            });
+        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;
         }
 
-        /**
-         * 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);
+        });
+      }
 
-            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";
         }
 
-        /**
-         * Create hotspot list item
-         */
-        createHotspotItem(hotspot, index, isActive) {
-            const item = document.createElement('div');
-            item.className = 'hotspot-item' + (isActive ? ' active' : '');
+        info.appendChild(title);
+        info.appendChild(target);
 
-            const color = document.createElement('div');
-            color.className = 'hotspot-color';
-            color.style.backgroundColor = hotspot.color;
+        const actions = document.createElement("div");
+        actions.className = "hotspot-actions";
 
-            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);
-            };
+        const deleteBtn = document.createElement("button");
+        deleteBtn.className = "btn-delete";
+        deleteBtn.innerHTML = '<ss-icon icon="trash" thickness="2.2"></ss-icon>';
+        deleteBtn.title = "Delete";
+        deleteBtn.onclick = (e) => {
+          e.stopPropagation();
+          this.editor.removeHotspot(index);
+        };
 
-            actions.appendChild(deleteBtn);
+        actions.appendChild(deleteBtn);
 
-            item.appendChild(color);
-            item.appendChild(info);
-            item.appendChild(actions);
+        item.appendChild(color);
+        item.appendChild(info);
+        item.appendChild(actions);
 
-            item.onclick = () => {
-                this.editor.selectHotspot(index);
-            };
+        item.onclick = () => {
+          this.editor.selectHotspot(index);
+        };
 
-            return item;
-        }
+        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;
-            }
+      /**
+       * 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';
+        // 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;
+        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 target dropdown
-            this.updateTargetSceneOptions();
+        // Update color text input if it exists
+        const colorText = document.getElementById("hotspotColorText");
+        if (colorText) {
+          colorText.value = hotspot.color || "#00ff00";
         }
 
-        /**
-         * Update properties panel for scene
-         */
-        updateSceneProperties(scene) {
-            if (!scene) {
-                document.getElementById('sceneId').value = '';
-                document.getElementById('sceneName').value = '';
-                document.getElementById('sceneImageUrl').value = '';
-                return;
-            }
+        // 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;
 
-            document.getElementById('sceneId').value = scene.id || '';
-            document.getElementById('sceneName').value = scene.name || '';
-            document.getElementById('sceneImageUrl').value = scene.imageUrl || '';
+        // 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;
         }
 
-        /**
-         * 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 || '';
-            }
+        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;
+      /**
+       * 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;
+        const scenes = this.editor.sceneManager.getAllScenes();
+        const currentValue = select.value;
 
-            select.innerHTML = '<option value="">Select target scene...</option>';
+        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);
-            });
+        scenes.forEach((scene) => {
+          const option = document.createElement("option");
+          option.value = scene.id;
+          option.textContent = scene.name;
+          select.appendChild(option);
+        });
 
-            select.value = currentValue;
-        }
+        select.value = currentValue;
+      }
 
-        /**
-         * Update initial scene options in tour properties
-         */
-        updateInitialSceneOptions() {
-            const select = document.getElementById('tourInitialScene');
-            if (!select) return;
+      /**
+       * 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;
+        const scenes = this.editor.sceneManager.getAllScenes();
+        const currentValue = select.value;
 
-            select.innerHTML = '<option value="">Select initial scene...</option>';
+        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);
-            });
+        scenes.forEach((scene) => {
+          const option = document.createElement("option");
+          option.value = scene.id;
+          option.textContent = scene.name;
+          select.appendChild(option);
+        });
 
-            select.value = currentValue;
-        }
+        select.value = currentValue;
+      }
 
-        /**
-         * Show/hide loading indicator
-         */
-        setLoading(isLoading) {
-            const indicator = document.querySelector('.loading-indicator');
-            if (indicator) {
-                indicator.style.display = isLoading ? 'block' : 'none';
-            }
+      /**
+       * 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);
-            });
+      /**
+       * 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');
-            });
-        }
+        // 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;
-        }
+      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;
-            }
+      /**
+       * Generate JSON compatible with SWT library
+       * Follows the tourConfig structure from example-simple.html
+       */
+      generateJSON() {
+        const scenes = this.editor.sceneManager.getAllScenes();
+        const config = this.editor.config;
+
+        // Build scenes object (keyed by scene ID)
+        const scenesData = {};
+        scenes.forEach((scene) => {
+          scenesData[scene.id] = {
+            name: scene.name,
+            panorama: scene.imageUrl,
+            hotspots: scene.hotspots.map((hotspot) => {
+              const hotspotData = {
+                position: hotspot.position,
+              };
+
+              // Add action based on hotspot type
+              if (hotspot.type === "navigation" && hotspot.targetSceneId) {
+                hotspotData.action = {
+                  type: "navigateTo",
+                  target: hotspot.targetSceneId,
+                };
+              } else if (hotspot.type === "info") {
+                hotspotData.action = {
+                  type: "showInfo",
+                };
+              }
 
-            // 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
-                }
-            };
+              // Add appearance
+              hotspotData.appearance = {
+                color: hotspot.color || "#FF6B6B",
+                scale: "2 2 2",
+              };
+
+              // Add tooltip if title exists
+              if (hotspot.title) {
+                hotspotData.tooltip = {
+                  text: hotspot.title,
+                };
+              }
+
+              return hotspotData;
+            }),
+          };
+        });
 
-            return jsonData;
+        // Determine initial scene
+        let initialScene = config.initialSceneId;
+        if (!initialScene && scenes.length > 0) {
+          initialScene = scenes[0].id;
         }
 
-        /**
-         * 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;
-            }
+        // Build final JSON matching SWT tourConfig format
+        const jsonData = {
+          initialScene: initialScene,
+          scenes: scenesData,
+        };
+
+        return jsonData;
+      }
+
+      /**
+       * Export as JSON file
+       */
+      exportJSON() {
+        try {
+          const jsonData = this.generateJSON();
+          const json = JSON.stringify(jsonData, null, 2);
+
+          const title = this.editor.config.title || "tour";
+          const filename = sanitizeId(title) + ".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;
-            }
+      /**
+       * 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>
+      /**
+       * Generate HTML viewer code
+       */
+      generateViewerHTML() {
+        const jsonData = this.generateJSON();
+        const title = this.editor.config.title || "Virtual Tour";
+
+        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>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title}</title>
+    <script src="https://unpkg.com/senangwebs-tour@latest/dist/swt.min.js"></script>
+  </head>
+  <body>
+    <a-scene id="tour-container">
+      <a-camera>
+        <a-cursor></a-cursor>
+      </a-camera>
+    </a-scene>
 
     <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;
-            }
-        }
+      // Tour configuration
+      const tourConfig = ${JSON.stringify(jsonData, null, 8)
+        .split("\n")
+        .map((line, i) => (i === 0 ? line : "      " + line))
+        .join("\n")};
+
+      // Initialize tour when scene is loaded
+      const sceneEl = document.querySelector("#tour-container");
+      sceneEl.addEventListener("loaded", () => {
+        const tour = new SWT.Tour(sceneEl, tourConfig);
+        tour.start();
+      });
     </script>
-</body>
+  </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;
-            }
+      /**
+       * Export as standalone HTML viewer
+       */
+      exportViewerHTML() {
+        try {
+          const html = this.generateViewerHTML();
+          const title = this.editor.config.title || "tour";
+          const filename = sanitizeId(title) + "-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;
-            }
+      /**
+       * 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