break out tile renderer

ui/src/App.vue

@@ -3,6 +3,13 @@
     <div ref="mapContainer" class="map-container"></div>
     <canvas ref="threeCanvas" class="three-canvas"></canvas>
     
+    <ShadingSandbox 
+      :visible="sandboxVisible"
+      ref="ShadingSandbox"
+      @close="sandboxVisible = false"
+      @renderComplete="onRenderComplete"
+      @error="onRenderError"
+    />
     <div class="layer-controls">
       <div class="control-section">
         <label>Base Map:</label>
@@ -20,6 +27,10 @@
           Show Lidar
         </label>
       </div>
+      
+      <div class="control-section">
+        <button class="sandbox-btn" @click="openSandbox">Open Shading Sandbox</button>
+      </div>
     </div>
   </div>
 </template>
@@ -29,12 +40,17 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import * as THREE from 'three';
+import ShadingSandbox from './ShadingSandbox.vue';
 
 export default {
   name: 'App',
+  components: {
+    ShadingSandbox
+  },
   setup() {
     const mapContainer = ref(null);
     const threeCanvas = ref(null);
+    const ShadingSandbox = ref(null);
     let map = null;
     let scene = null;
     let camera = null;
@@ -43,6 +59,10 @@ export default {
     const baseLayer = ref('osm');
     const showOctagon = ref(true);
     const showLidar = ref(true);
+    
+    const sandboxVisible = ref(false);
+    const currentTileData = ref(null);
+    const tileCache = ref({});
 
     // Newark Octagon coordinates (converted from DMS to decimal)
     const octagonCoords = [
@@ -275,6 +295,9 @@ export default {
           console.log(`Loading ${tileName}...`);
           const data = await parseMoundFile(`/tiles/${tileName}.mound`);
           
+          // Cache the tile data for sandbox use
+          tileCache.value[tileName] = data;
+          
           console.log(`${tileName} bounds:`, data.bounds);
           console.log(`First few positions:`, data.positions.slice(0, 15));
           
@@ -307,6 +330,34 @@ export default {
       updateThreeCamera();
     };
 
+    const openSandbox = () => {
+      // Open sandbox with first available tile
+      const firstTile = Object.keys(tileCache.value)[0];
+      if (firstTile) {
+        currentTileData.value = tileCache.value[firstTile];
+        sandboxVisible.value = true;
+        
+        // Load tile data into renderer after it mounts
+        setTimeout(() => {
+          if (ShadingSandbox.value) {
+            ShadingSandbox.value.loadTileData(currentTileData.value);
+          }
+        }, 100);
+      }
+    };
+    
+    const onRenderComplete = (data) => {
+      console.log('Render complete:', {
+        size: data.size,
+        renderTime: data.renderTime,
+        settings: data.settings
+      });
+    };
+    
+    const onRenderError = (err) => {
+      console.error('Renderer error:', err);
+    };
+
     onUnmounted(() => {
       window.removeEventListener('resize', handleResize);
       if (renderer) {
@@ -317,12 +368,18 @@ export default {
     return {
       mapContainer,
       threeCanvas,
+      ShadingSandbox,
       baseLayer,
       showOctagon,
       showLidar,
       updateBaseLayer,
       toggleOctagon,
-      toggleLidar
+      toggleLidar,
+      sandboxVisible,
+      currentTileData,
+      openSandbox,
+      onRenderComplete,
+      onRenderError
     };
   }
 };
@@ -392,4 +449,26 @@ export default {
   margin-right: 8px;
   cursor: pointer;
 }
+
+.sandbox-btn {
+  width: 100%;
+  padding: 10px;
+  margin-top: 10px;
+  background: #4A9EFF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sandbox-btn:hover {
+  background: #2E8FE3;
+}
+
+.sandbox-btn:active {
+  transform: scale(0.98);
+}
 </style>