storysplat-viewer 0.1.0

package/README.md

@@ -0,0 +1,659 @@
+# StorySplat Viewer
+
+A powerful npm package for embedding and interacting with 3D Gaussian Splatting scenes in web applications. StorySplat Viewer provides a complete solution for displaying, navigating, and interacting with .splat files with built-in support for waypoints, hotspots, and multiple camera modes.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [API Reference](#api-reference)
+- [Configuration Options](#configuration-options)
+- [Examples](#examples)
+- [Events and Callbacks](#events-and-callbacks)
+- [Styling](#styling)
+- [Migration Guide](#migration-guide)
+- [Troubleshooting](#troubleshooting)
+
+## Overview
+
+StorySplat Viewer is a TypeScript/JavaScript library that enables seamless integration of 3D Gaussian Splatting scenes into web applications. It provides:
+
+- 🎥 Multiple camera modes (orbit, free, first-person)
+- 🎯 Interactive hotspots with rich content
+- 🚶 Waypoint-based navigation system
+- 📱 Mobile-friendly touch controls
+- 🎨 Customizable UI and styling
+- 🔧 Comprehensive API for programmatic control
+- ⚡ Optimized performance with BabylonJS engine
+
+## Installation
+
+```bash
+npm install @storysplat/viewer
+```
+
+Or using yarn:
+
+```bash
+yarn add @storysplat/viewer
+```
+
+## Quick Start
+
+```javascript
+import { initializeViewer } from '@storysplat/viewer';
+import '@storysplat/viewer/dist/styles/viewer.css';
+
+// Initialize the viewer
+const viewerElement = document.getElementById('storysplat-viewer');
+const viewer = initializeViewer(viewerElement, {
+  splatUrl: 'https://example.com/scene.splat',
+  targetFps: 60,
+  fov: 60,
+  cameraMode: 'orbit'
+});
+
+// Load additional splats
+await viewer.loadSplat('https://example.com/another.splat');
+
+// Switch camera mode
+viewer.setCameraMode('free');
+```
+
+## API Reference
+
+### initializeViewer
+
+Creates and initializes a new StorySplat viewer instance.
+
+```typescript
+function initializeViewer(
+  element: HTMLElement,
+  data: StorySplatData,
+  options?: Partial<ViewerOptions>
+): ViewerInstance
+```
+
+**Parameters:**
+- `element` (HTMLElement): The DOM element to render the viewer into
+- `data` (StorySplatData): Scene data including splat URL and configuration
+- `options` (Partial<ViewerOptions>): Optional viewer configuration
+
+**Returns:** ViewerInstance object for controlling the viewer
+
+### ViewerInstance Interface
+
+The main interface for interacting with the viewer after initialization.
+
+```typescript
+interface ViewerInstance {
+  // Scene Management
+  loadSplat(url: string, options?: LoadOptions): Promise<void>;
+  clearScene(): void;
+  destroy(): void;
+  
+  // Camera Controls
+  setCameraMode(mode: 'orbit' | 'free' | 'firstPerson'): void;
+  getCameraMode(): string;
+  setCameraPosition(x: number, y: number, z: number): void;
+  getCameraPosition(): { x: number; y: number; z: number };
+  setCameraTarget(x: number, y: number, z: number): void;
+  getCameraTarget(): { x: number; y: number; z: number };
+  
+  // Navigation
+  navigateToWaypoint(waypointId: string): Promise<void>;
+  getWaypoints(): Waypoint[];
+  startWaypointTour(waypointIds?: string[]): void;
+  stopWaypointTour(): void;
+  
+  // Hotspots
+  getHotspots(): Hotspot[];
+  showHotspot(hotspotId: string): void;
+  hideHotspot(hotspotId: string): void;
+  updateHotspot(hotspotId: string, data: Partial<Hotspot>): void;
+  
+  // Rendering
+  setRenderingEnabled(enabled: boolean): void;
+  takeScreenshot(options?: ScreenshotOptions): Promise<Blob>;
+  
+  // Scene Properties
+  setBackgroundColor(color: string): void;
+  setSkybox(skyboxUrl: string): void;
+  setFog(enabled: boolean, density?: number): void;
+  
+  // Events
+  on(event: string, callback: Function): void;
+  off(event: string, callback: Function): void;
+}
+```
+
+### Data Types
+
+#### StorySplatData
+
+```typescript
+interface StorySplatData {
+  splatUrl: string;
+  waypoints?: Waypoint[];
+  hotspots?: Hotspot[];
+  cameraSettings?: CameraSettings;
+  environmentSettings?: EnvironmentSettings;
+  meshes?: CustomMesh[];
+  particleSystems?: ParticleSystemConfig[];
+}
+```
+
+#### ViewerOptions
+
+```typescript
+interface ViewerOptions {
+  // Camera settings
+  cameraMode?: 'orbit' | 'free' | 'firstPerson';
+  fov?: number;
+  initialCameraPosition?: { x: number; y: number; z: number };
+  initialCameraTarget?: { x: number; y: number; z: number };
+  
+  // Rendering
+  targetFps?: number;
+  backgroundColor?: string;
+  skyboxUrl?: string;
+  
+  // UI Options
+  showToolbar?: boolean;
+  showMobileControls?: boolean;
+  showLoadingIndicator?: boolean;
+  watermarkText?: string;
+  
+  // Interaction
+  enableHotspots?: boolean;
+  enableWaypoints?: boolean;
+  enableCollisions?: boolean;
+  
+  // Callbacks
+  onReady?: () => void;
+  onError?: (error: Error) => void;
+  onProgress?: (progress: number) => void;
+  onHotspotClick?: (hotspot: Hotspot) => void;
+  onWaypointReached?: (waypoint: Waypoint) => void;
+}
+```
+
+#### Waypoint
+
+```typescript
+interface Waypoint {
+  id: string;
+  name: string;
+  position: { x: number; y: number; z: number };
+  lookAt?: { x: number; y: number; z: number };
+  duration?: number; // Animation duration in ms
+  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+}
+```
+
+#### Hotspot
+
+```typescript
+interface Hotspot {
+  id: string;
+  position: { x: number; y: number; z: number };
+  type: 'info' | 'link' | 'media' | 'custom';
+  title?: string;
+  content?: string;
+  mediaUrl?: string;
+  linkUrl?: string;
+  icon?: string;
+  color?: string;
+  size?: number;
+  alwaysVisible?: boolean;
+}
+```
+
+## Configuration Options
+
+### Camera Settings
+
+```javascript
+const viewer = initializeViewer(element, {
+  splatUrl: 'scene.splat'
+}, {
+  cameraMode: 'orbit',        // 'orbit' | 'free' | 'firstPerson'
+  fov: 60,                    // Field of view in degrees
+  initialCameraPosition: { x: 0, y: 5, z: 10 },
+  initialCameraTarget: { x: 0, y: 0, z: 0 }
+});
+```
+
+### Rendering Options
+
+```javascript
+const viewer = initializeViewer(element, data, {
+  targetFps: 60,              // Target frame rate
+  backgroundColor: '#000000',  // Background color
+  skyboxUrl: '/assets/skybox.dds',  // Optional skybox
+  showLoadingIndicator: true   // Show loading progress
+});
+```
+
+### UI Options
+
+```javascript
+const viewer = initializeViewer(element, data, {
+  showToolbar: true,          // Show control toolbar
+  showMobileControls: true,   // Auto-detect and show mobile controls
+  watermarkText: 'My Scene'   // Custom watermark
+});
+```
+
+## Examples
+
+### Basic Setup
+
+```javascript
+import { initializeViewer } from '@storysplat/viewer';
+import '@storysplat/viewer/dist/styles/viewer.css';
+
+function setupViewer() {
+  const element = document.getElementById('storysplat-viewer');
+  
+  const viewer = initializeViewer(element, {
+    splatUrl: '/models/scene.splat'
+  }, {
+    onReady: () => console.log('Viewer ready!'),
+    onError: (error) => console.error('Viewer error:', error)
+  });
+  
+  return viewer;
+}
+```
+
+### Camera Mode Switching
+
+```javascript
+// Create camera mode buttons
+const viewer = initializeViewer(element, { splatUrl: 'scene.splat' });
+
+document.getElementById('orbit-btn').onclick = () => {
+  viewer.setCameraMode('orbit');
+};
+
+document.getElementById('free-btn').onclick = () => {
+  viewer.setCameraMode('free');
+};
+
+document.getElementById('fps-btn').onclick = () => {
+  viewer.setCameraMode('firstPerson');
+};
+```
+
+### Waypoint Navigation
+
+```javascript
+const viewer = initializeViewer(element, {
+  splatUrl: '/models/scene.splat',
+  waypoints: [
+    { id: 'entrance', name: 'Entrance', position: { x: 0, y: 0, z: 5 } },
+    { id: 'center', name: 'Center', position: { x: 0, y: 0, z: 0 } },
+    { id: 'exit', name: 'Exit', position: { x: 0, y: 0, z: -5 } }
+  ]
+});
+
+// Navigate to specific waypoint
+await viewer.navigateToWaypoint('center');
+
+// Start automated tour
+viewer.startWaypointTour(['entrance', 'center', 'exit']);
+```
+
+### Hotspot Interaction
+
+```javascript
+const viewer = initializeViewer(element, {
+  splatUrl: 'scene.splat',
+  hotspots: [
+    {
+      id: 'info-1',
+      position: { x: 2, y: 1, z: 0 },
+      type: 'info',
+      title: 'Information',
+      content: 'This is an information hotspot'
+    }
+  ]
+}, {
+  onHotspotClick: (hotspot) => {
+    console.log('Hotspot clicked:', hotspot);
+    // Custom hotspot handling
+    if (hotspot.type === 'link') {
+      window.open(hotspot.linkUrl, '_blank');
+    }
+  }
+});
+
+// Add custom hotspot dynamically
+viewer.updateHotspot('custom-1', {
+  position: { x: -2, y: 1, z: 0 },
+  type: 'info',
+  title: 'Dynamic Hotspot',
+  content: 'Added at runtime',
+  color: '#ff0000'
+});
+```
+
+### Dynamic Splat Loading
+
+```javascript
+const viewer = initializeViewer(element, {
+  splatUrl: '/models/base.splat'
+});
+
+// Load additional splats
+async function loadScenes() {
+  await viewer.loadSplat('/models/building.splat');
+  await viewer.loadSplat('/models/furniture.splat', {
+    position: { x: 0, y: 0, z: 0 },
+    scale: 1.5,
+    rotation: { x: 0, y: 90, z: 0 }
+  });
+}
+
+// Clear and load new scene
+async function switchScene() {
+  viewer.clearScene();
+  await viewer.loadSplat('/models/new-scene.splat');
+}
+```
+
+### Custom UI Integration
+
+```javascript
+const viewer = initializeViewer(element, data, {
+  showToolbar: false  // Hide default toolbar
+});
+
+// Create custom controls
+const customUI = {
+  updateCameraInfo() {
+    const pos = viewer.getCameraPosition();
+    document.getElementById('camera-info').textContent = 
+      `Camera: ${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)}`;
+  },
+  
+  takePhoto() {
+    viewer.takeScreenshot({ width: 1920, height: 1080 })
+      .then(blob => {
+        const url = URL.createObjectURL(blob);
+        window.open(url, '_blank');
+      });
+  }
+};
+
+// Update camera info on render
+viewer.on('render', customUI.updateCameraInfo);
+```
+
+## Events and Callbacks
+
+### Available Events
+
+```javascript
+viewer.on('ready', () => {
+  console.log('Viewer initialized and ready');
+});
+
+viewer.on('loadStart', (url) => {
+  console.log('Started loading:', url);
+});
+
+viewer.on('loadProgress', (progress) => {
+  console.log('Loading progress:', progress + '%');
+});
+
+viewer.on('loadComplete', () => {
+  console.log('Loading complete');
+});
+
+viewer.on('error', (error) => {
+  console.error('Viewer error:', error);
+});
+
+viewer.on('cameraMove', (position) => {
+  console.log('Camera moved to:', position);
+});
+
+viewer.on('hotspotClick', (hotspot) => {
+  console.log('Hotspot clicked:', hotspot);
+});
+
+viewer.on('waypointReached', (waypoint) => {
+  console.log('Reached waypoint:', waypoint);
+});
+
+viewer.on('render', (deltaTime) => {
+  // Called every frame
+});
+```
+
+### Removing Event Listeners
+
+```javascript
+const handler = (position) => console.log(position);
+viewer.on('cameraMove', handler);
+
+// Later...
+viewer.off('cameraMove', handler);
+```
+
+## Styling
+
+### CSS Variables
+
+The viewer uses CSS variables for theming:
+
+```css
+#storysplat-viewer {
+  --storysplat-primary-color: #007bff;
+  --storysplat-background-color: #000000;
+  --storysplat-text-color: #ffffff;
+  --storysplat-toolbar-bg: rgba(0, 0, 0, 0.8);
+  --storysplat-button-hover: #0056b3;
+  --storysplat-hotspot-color: #ffc107;
+}
+```
+
+### Custom Styling
+
+```css
+/* Override toolbar styles */
+.storysplat-toolbar {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
+  border-radius: 8px;
+  margin: 10px;
+}
+
+/* Custom hotspot appearance */
+.storysplat-hotspot {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+/* Mobile controls */
+.storysplat-mobile-controls {
+  opacity: 0.8;
+}
+```
+
+### Required CSS
+
+Make sure to import the viewer CSS:
+
+```javascript
+import '@storysplat/viewer/dist/styles/viewer.css';
+```
+
+Or include it in your HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@storysplat/viewer/dist/styles/viewer.css">
+```
+
+## Migration Guide
+
+### From Exported HTML to NPM Package
+
+If you're migrating from StorySplat's exported HTML files to the npm package:
+
+1. **Extract Scene Data**
+   ```javascript
+   // From your exported HTML's scene configuration
+   const sceneData = {
+     splatUrl: 'path/to/your.splat',
+     waypoints: [...],  // Copy waypoints array
+     hotspots: [...],   // Copy hotspots array
+     cameraSettings: {
+       position: { x: 0, y: 5, z: 10 },
+       target: { x: 0, y: 0, z: 0 }
+     }
+   };
+   ```
+
+2. **Initialize Viewer**
+   ```javascript
+   const element = document.getElementById('viewer-container');
+   const viewer = initializeViewer(element, sceneData, {
+     // Match your export settings
+     backgroundColor: '#000000',
+     targetFps: 60,
+     cameraMode: 'orbit'
+   });
+   ```
+
+3. **Update Event Handlers**
+   ```javascript
+   // Old: onclick handlers in HTML
+   // New: Event listeners
+   viewer.on('hotspotClick', handleHotspotClick);
+   viewer.on('waypointReached', handleWaypointReached);
+   ```
+
+4. **Handle Assets**
+   ```javascript
+   // Ensure all assets use absolute URLs or are properly bundled
+   const sceneData = {
+     splatUrl: '/assets/scene.splat',
+     skyboxUrl: '/assets/skybox.dds'
+   };
+   ```
+
+## Troubleshooting
+
+### Common Issues
+
+#### Viewer Not Rendering
+
+```javascript
+// Check container exists and has dimensions
+const container = document.getElementById('storysplat-viewer');
+if (!container) {
+  console.error('Container element not found');
+}
+
+// Ensure container has explicit dimensions
+#storysplat-viewer {
+  width: 100%;
+  height: 500px; /* Must have explicit height */
+}
+```
+
+#### CORS Errors
+
+```javascript
+// For cross-origin splat files, ensure proper CORS headers
+// Or use a proxy:
+const viewer = initializeViewer(element, {
+  splatUrl: '/api/proxy?url=' + encodeURIComponent(splatUrl)
+});
+```
+
+#### Performance Issues
+
+```javascript
+// Reduce target FPS for better performance
+const viewer = initializeViewer(element, data, {
+  targetFps: 30,  // Lower FPS
+  // Disable expensive features
+  skyboxUrl: null,
+  showLoadingIndicator: false
+});
+
+// Optimize rendering
+viewer.setRenderingEnabled(false); // Pause when not visible
+```
+
+#### Mobile Touch Controls Not Working
+
+```javascript
+// Ensure mobile controls are enabled
+const viewer = initializeViewer(element, data, {
+  showMobileControls: true,
+  // Force mobile controls for testing
+  forceMobileControls: true
+});
+
+// Check viewport meta tag
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+```
+
+#### Memory Leaks
+
+```javascript
+// Always cleanup when done
+window.addEventListener('beforeunload', () => {
+  viewer.destroy();
+});
+
+// In React/Vue/Angular components
+componentWillUnmount() {
+  if (this.viewer) {
+    this.viewer.destroy();
+  }
+}
+```
+
+### Debug Mode
+
+Enable debug logging:
+
+```javascript
+const viewer = initializeViewer(element, data, {
+  debug: true,  // Enable debug logging
+  onDebug: (message) => console.log('[Debug]', message)
+});
+```
+
+### Browser Compatibility
+
+StorySplat Viewer requires:
+- WebGL 2.0 support
+- Modern JavaScript (ES2015+)
+- Recommended browsers:
+  - Chrome 80+
+  - Firefox 75+
+  - Safari 13+
+  - Edge 80+
+
+### Support
+
+For issues, feature requests, or questions:
+- GitHub Issues: [github.com/storysplat/viewer/issues](https://github.com/storysplat/viewer/issues)
+- Documentation: [docs.storysplat.com](https://docs.storysplat.com)
+- Discord: [discord.gg/storysplat](https://discord.gg/storysplat)
+
+## License
+
+MIT License - see LICENSE file for details

package/dist/esm/dist/styles/viewer.css

@@ -0,0 +1,2 @@
+body,html{font-family:Arial,sans-serif;height:100%;margin:0;overflow:hidden;padding:0;width:100%}#renderCanvas{display:block;height:100%;touch-action:none;width:100%}@keyframes storysplat-viewer-fadeOut{0%{opacity:1}to{opacity:0}}#preloader{align-items:center;background-color:#1e1e1e;display:flex;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100%;justify-content:center;left:0;position:fixed;top:0;transition:opacity .5s ease-out;width:100%;z-index:100000}#preloader.hidden{opacity:0;pointer-events:none}#preloader-content{align-items:center;display:flex;flex-direction:column;gap:20px;padding:40px}#preloader-media{align-items:center;display:flex;gap:40px}#preloader-image,#preloader-image-inverted{height:200px;object-fit:contain;width:auto}#preloader-image-inverted{filter:invert(1);margin-right:-100px}#preloader-lottie{height:200px;width:200px}@media (max-width:768px){#preloader-image{height:100px}#preloader-image-inverted{height:100px;margin-right:-50px}#preloader-lottie{height:100px;width:100px}}#preloader-progress{background:#ffffff1a;border-radius:2px;height:4px;margin-top:20px;overflow:hidden;width:200px}#preloader-progress-bar{background:var(--storysplat-viewer-accent-color,#4caf50);border-radius:2px;height:100%;position:relative;transition:width .3s ease-out;width:0}#preloader-progress-text{color:#fff;font-size:14px;left:50%;position:absolute;top:-25px;transform:translateX(-50%)}#hotspotContent{background-color:#000c;border-radius:10px;box-shadow:0 0 10px #00000080;color:#fff;display:none;flex-direction:column;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;max-width:300px;padding:20px;position:fixed;z-index:100001}#hotspotContent img{border-radius:5px;height:auto;margin-top:10px;max-width:100%}#hotspotContent.fullscreen{align-items:center!important;border-radius:0!important;bottom:0!important;display:flex!important;flex-direction:column!important;height:100%!important;justify-content:center!important;left:0!important;margin:0!important;max-width:none!important;right:0!important;top:0!important;width:100%!important}#hotspotContent.fullscreen img{height:80vh!important;margin-top:0!important;object-fit:contain!important;width:80%!important}#infoPopup{background-color:#000c;border-radius:10px;box-shadow:0 0 10px #00000080;font-size:16px;left:50%;max-width:80%;padding:20px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:100002}#infoPopup,.storysplat-hotspot-popup{color:#fff;display:none;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.storysplat-hotspot-popup{background-color:#000000bf;border:1px solid #444;border-radius:6px;box-shadow:0 4px 12px #0006;font-size:14px;line-height:1.5;max-height:450px;max-width:320px;overflow-y:auto;padding:15px;pointer-events:auto;position:absolute;z-index:100}.storysplat-hotspot-popup h3{border-bottom:1px solid #fff3;font-size:1.1em;margin-bottom:10px;margin-top:0;padding-bottom:5px}.storysplat-hotspot-popup p{margin-bottom:10px;margin-top:0;white-space:pre-wrap}.storysplat-hotspot-popup img{border-radius:4px;display:block;height:auto;margin-bottom:10px;margin-top:5px;max-width:100%}.storysplat-hotspot-popup iframe{border:none;height:250px;margin-bottom:10px;margin-top:5px;width:100%}.storysplat-hotspot-popup a{background-color:#007bff;border-radius:4px;color:#fff;display:inline-block;margin-top:10px;padding:8px 15px;text-decoration:none;transition:background-color .2s ease}.storysplat-hotspot-popup a:hover{background-color:#0056b3}.storysplat-hotspot-popup button{background:#323232cc;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;line-height:1;padding:3px 7px;position:absolute;right:8px;top:8px;transition:background-color .2s ease}.storysplat-hotspot-popup button:hover{background:#505050e6}.storysplat-hotspot-popup::-webkit-scrollbar{width:6px}.storysplat-hotspot-popup::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.storysplat-hotspot-popup::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.storysplat-hotspot-popup::-webkit-scrollbar-thumb:hover{background:#ffffff80}.storysplat-progress-bar{background-color:#fff3;border-radius:3px;bottom:20px;height:6px;left:50%;max-width:600px;overflow:hidden;pointer-events:none;position:absolute;transform:translateX(-50%);width:80%;z-index:100}.storysplat-progress-indicator{background-color:var(--storysplat-viewer-accent-color,#fff);border-radius:3px;height:100%;transition:width .1s linear;width:0}.storysplat-scroll-controls{align-items:center;background:#000000b3;border-radius:8px;bottom:0;display:flex;flex-direction:column;gap:5px;left:50%;padding:10px;position:absolute;transform:translateX(-50%);width:150px;z-index:1000}.storysplat-scroll-percentage{color:#fff;font-size:18px}.storysplat-waypoint-info{background:#00000080;color:#fff;display:none;font-family:system-ui,-apple-system,sans-serif;left:0;pointer-events:none;position:absolute;right:0;text-align:center;top:0;z-index:1000}.storysplat-waypoint-info.hasContent{padding:50px 30px 30px}.storysplat-nav-buttons{bottom:40px;display:flex;gap:15px;left:50%;position:absolute;transform:translateX(-50%);z-index:101}.storysplat-nav-button{align-items:center;background-color:#0009;border:1px solid #ffffff4d;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:5px;justify-content:center;padding:8px 16px;transition:background-color .2s ease,border-color .2s ease;user-select:none}.storysplat-nav-button:hover:not(:disabled){background-color:#000c;border-color:#fff9}.storysplat-nav-button:disabled{cursor:not-allowed;opacity:.4}.storysplat-camera-mode-toggle,.storysplat-walk-explore-toggle{background-color:#0009;border-radius:8px;display:flex;gap:8px;padding:8px;position:absolute;right:15px;top:15px;z-index:1001}.storysplat-mode-button{background-color:#0009;border:1px solid #ffffff4d;border-radius:4px;color:#fff;cursor:pointer;font-size:13px;padding:6px 12px;transition:background-color .2s ease,border-color .2s ease;user-select:none}.storysplat-mode-button:hover:not(.active){background-color:#fff3;border-color:#ffffff80}.storysplat-mode-button.active{background-color:var(--storysplat-viewer-accent-color,#fff);border-color:var(--storysplat-viewer-accent-color,#fff);color:#1e1e1e;cursor:default}.storysplat-camera-mode-toggle+.storysplat-walk-explore-toggle{top:60px}.storysplat-mobile-joystick{background-color:#0000004d;border-radius:50%;bottom:20px;display:none;height:100px;left:20px;position:absolute;width:100px;z-index:101}.storysplat-mobile-joystick .back{background-color:#0000004d!important;border:1px solid #fff3}.storysplat-mobile-joystick .front{background-color:#ffffff80!important}#storysplat-preloader{align-items:center;background-color:#000000d9;color:#fff;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100%;justify-content:center;left:0;opacity:1;position:absolute;top:0;transition:opacity .5s ease-out;width:100%;z-index:2000}#storysplat-preloader.hidden{opacity:0;pointer-events:none}#storysplat-preloader-logo{display:block;margin-bottom:20px;max-height:100px;max-width:150px}#storysplat-preloader-logo.empty{display:none}#storysplat-preloader-logo img{display:block;max-height:100%;max-width:100%}#storysplat-preloader-logo>div{align-items:center;background:#333;border-radius:5px;box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;padding:5px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}#storysplat-preloader-progress-container{background-color:#555;border-radius:5px;height:10px;margin-bottom:10px;max-width:300px;overflow:hidden;width:80%}#storysplat-preloader-progress-bar{background-color:var(--storysplat-viewer-preloader-color,var(--storysplat-viewer-accent-color,#4caf50));height:100%;transition:width .3s ease;width:0}#storysplat-progress-text{font-size:14px;margin-top:5px}#startButtonContainer,#storysplat-start-overlay{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:#fff3;display:flex;height:100%;justify-content:center;left:0;opacity:1;position:absolute;top:0;transition:opacity .5s ease-out;width:100%;z-index:5000}#startButtonContainer.hidden,#storysplat-start-overlay.hidden{opacity:0;pointer-events:none}#startButton,#storysplat-start-button{background-color:#ffffff40;border:none;border-radius:5px;box-shadow:0 4px 8px #0000004d;color:#fff;cursor:pointer;font-size:24px;padding:20px 40px;transition:background-color .3s ease}#startButton:hover,#storysplat-start-button:hover{background-color:#ffffff59}#storysplat-watermark,.watermark{background-color:#00000080;border-radius:4px;bottom:10px;color:#ffffffb3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:11px;padding:3px 8px;position:fixed;right:10px;text-decoration:none;transition:color .2s ease;z-index:1001}#storysplat-watermark:hover,.watermark:hover{color:#fff}#storysplat-help-button{align-items:center;background-color:#0009;border:1px solid #fff3;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;font-weight:700;height:36px;justify-content:center;left:10px;position:absolute;top:10px;transform:scale(1);transition:transform .1s ease-out;width:36px;z-index:1002}#storysplat-help-button:hover{transform:scale(1.1)}#storysplat-help-panel{background-color:#141414e6;border:1px solid #ffffff1a;border-radius:8px;box-shadow:0 5px 15px #0006;color:#eee;display:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;left:10px;line-height:1.6;max-height:calc(100vh - 70px);max-width:350px;opacity:0;overflow-y:auto;padding:15px 20px;position:absolute;top:55px;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;z-index:1001}#storysplat-help-panel.visible{display:block;opacity:1;transform:translateY(0)}#storysplat-help-panel h3{border-bottom:1px solid #fff3;color:#fff;margin-bottom:15px;margin-top:0;padding-bottom:8px}#storysplat-help-panel p{margin-bottom:10px}#storysplat-help-panel ul{list-style:disc;margin:0 0 15px 20px;padding:0}#storysplat-help-panel::-webkit-scrollbar{width:6px}#storysplat-help-panel::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}#storysplat-help-panel::-webkit-scrollbar-thumb{background:#fff6;border-radius:3px}#storysplat-help-panel::-webkit-scrollbar-thumb:hover{background:#fff9}#muteButton,.storysplat-mute-button{background:#0000004d;border:none;border-radius:3px;bottom:10px;color:#fff;cursor:pointer;font-size:12px;left:10px;padding:5px 8px;position:fixed;transition:background-color .2s ease;z-index:1000}#muteButton:hover,.storysplat-mute-button:hover{background:#00000080}#fullscreenButton{align-items:center;background-color:#00000080;border:none;border-radius:8px;cursor:pointer;display:flex;height:40px;justify-content:center;position:fixed;right:20px;top:20px;transition:background-color .3s ease;width:40px;z-index:1000}#fullscreenButton:hover{background-color:#000c}#fullscreenButton svg{fill:#fff;height:24px;width:24px}#waypointInfo{border-radius:4px;display:none;font-size:14px;margin-bottom:10px}#scrollControls{background-color:#000000b3;border-radius:10px;bottom:45px;box-shadow:0 4px 6px #0000001a;color:#fff;left:50%;max-width:350px;padding:15px;position:absolute;transform:translateX(-50%);z-index:1000}#scrollControls,#scrollControlsContent{align-items:center;display:flex;flex-direction:column}#scrollControlsContent{justify-content:center;transition:opacity .3s ease-in-out;width:100%}#scrollControlsContent.hidden{opacity:0;pointer-events:none;position:absolute}#scrollPercentage{font-size:18px;margin-bottom:10px}#progressBarContainer{background-color:#ffffff4d;border-radius:5px;height:10px;margin-bottom:10px;overflow:hidden;width:200px}#progressBar{height:100%;transition:width .3s ease;width:0}#progressBar,.button{background-color:var(--storysplat-viewer-accent-color,#4caf50)}.button{border:none;border-radius:5px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s}#scrollButtons{display:flex;justify-content:space-between;margin-bottom:0;width:100%;z-index:1000}#toggleCameraMode{background-color:var(--storysplat-viewer-accent-color,#4caf50);border:none;border-radius:5px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s}#toggleCameraMode:hover,.button:hover{filter:brightness(.9)}#walkToggleButton{background-color:#00000080;border:none;border-radius:5px;bottom:60px;color:#fff;cursor:pointer;display:none;font-size:14px;padding:10px 20px;position:fixed;right:10px;transition:all .3s ease;z-index:1000}#walkToggleButton.selected{background-color:var(--storysplat-viewer-accent-color,#4caf50)}#walkToggleButton:hover{filter:brightness(.9)}@media (max-width:768px){#scrollControls{bottom:20px;max-width:90%;padding:10px}#progressBarContainer{width:150px}#toggleCameraMode,.button{font-size:14px;padding:8px 15px}#scrollPercentage{font-size:16px}#storysplat-help-panel{max-height:calc(100vh - 100px);max-width:calc(100vw - 40px)}.storysplat-hotspot-popup{max-height:60vh;max-width:calc(100vw - 40px)}}.hidden{display:none!important}.fade-out{animation:storysplat-viewer-fadeOut .5s ease-out forwards}
+/*# sourceMappingURL=viewer.css.map */