From 095a458d809c3b3f02f187906f6dc391e7d0b7a8 Mon Sep 17 00:00:00 2001
From: Jennings Anderson <jennings.anderson@gmail.com>
Date: Thu, 5 Mar 2026 10:30:46 -0800
Subject: [PATCH] Adding DuckDB-Wasm sandbox

Signed-off-by: Jennings <jenningsa@meta.com>
---
 .github/workflows/staging_deploy.yml |  93 +++
 js/explorer.js                       | 510 ++++++++++++++++
 js/sandbox.js                        | 433 +++++++++++++
 sandbox.html                         | 871 +++++++++++++++++++++++++++
 4 files changed, 1907 insertions(+)
 create mode 100644 .github/workflows/staging_deploy.yml
 create mode 100644 js/explorer.js
 create mode 100644 js/sandbox.js
 create mode 100644 sandbox.html

diff --git a/.github/workflows/staging_deploy.yml b/.github/workflows/staging_deploy.yml
new file mode 100644
index 0000000..8317a5c
--- /dev/null
+++ b/.github/workflows/staging_deploy.yml
@@ -0,0 +1,93 @@
+---
+name: Staging Deploy
+run-name: Publish workshop to staging website (for PR)
+
+on:
+  pull_request:
+    branches: [main]
+
+permissions:
+  id-token: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.3'
+          bundler-cache: true
+
+      - name: Install Jekyll
+        run: |
+          gem install jekyll bundler
+          if [ -f Gemfile ]; then
+            bundle install
+          fi
+
+      - name: Build Jekyll site
+        run: |
+          if [ -f Gemfile ]; then
+            bundle exec jekyll build --baseurl "/${{ github.event.repository.name }}/pr/${{ github.event.number }}"
+          else
+            jekyll build --baseurl "/${{ github.event.repository.name }}/pr/${{ github.event.number }}"
+          fi
+        env:
+          JEKYLL_ENV: production
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-artifact
+          path: _site
+          if-no-files-found: error
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: staging
+      url: https://staging.overturemaps.org/${{ github.event.repository.name }}/pr/${{ github.event.number }}/index.html
+
+    steps:
+      - name: Configure AWS credentials 🔐
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: arn:aws:iam::763944545891:role/pages-staging-oidc-overturemaps
+          aws-region: us-west-2
+
+      - name: Download artifacts 📥
+        uses: actions/download-artifact@v4
+        with:
+          name: build-artifact
+          path: build
+
+      - name: Copy to S3
+        run: |
+          aws s3 sync --delete build s3://overture-managed-staging-usw2/gh-pages/${{ github.event.repository.name }}/pr/${{ github.event.number }}/
+
+      - name: Bust the Cache
+        run: aws cloudfront create-invalidation --distribution-id E1KP2IN0H2RGGT --paths "/${{ github.event.repository.name }}/pr/${{ github.event.number }}/*"
+
+      - name: Get deploy timestamp
+        id: timestamp
+        run: echo "time=$(date -u +'%Y-%m-%dT%H:%M:%SZ')" >> $GITHUB_OUTPUT
+
+      - name: Comment on PR
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          message: |
+            ## 🚀 Workshop branch preview deployed!
+
+            You can review your changes at https://staging.overturemaps.org/${{ github.event.repository.name }}/pr/${{ github.event.number }}/index.html
+
+            ---
+            <sub>♻️ Last refreshed: ${{ steps.timestamp.outputs.time }}</sub>
diff --git a/js/explorer.js b/js/explorer.js
new file mode 100644
index 0000000..a403776
--- /dev/null
+++ b/js/explorer.js
@@ -0,0 +1,510 @@
+// ============================================================
+// Overture Maps DuckDB Sandbox — Explorer
+// Interactive file partition visualizer using Leaflet
+// Loaded as a classic <script> after Leaflet.
+// ============================================================
+
+(function () {
+  'use strict';
+
+  // ============================================================
+  // Type → Theme Mapping (for STAC URLs)
+  // ============================================================
+  const TYPE_TO_THEME = {
+    place: 'places',
+    building: 'buildings',
+    building_part: 'buildings',
+    address: 'addresses',
+    segment: 'transportation',
+    connector: 'transportation',
+    division: 'divisions',
+    division_area: 'divisions',
+    division_boundary: 'divisions',
+    bathymetry: 'base',
+    infrastructure: 'base',
+    land: 'base',
+    land_cover: 'base',
+    land_use: 'base',
+    water: 'base'
+  };
+
+  // ============================================================
+  // Preset Cities
+  // ============================================================
+  const PRESETS = {
+    'salt-lake-city': { label: 'Salt Lake City', west: -112.101, south: 40.699, east: -111.740, north: 40.853 },
+    'new-york':       { label: 'New York',       west: -74.260,  south: 40.477, east: -73.700,  north: 40.917 },
+    'london':         { label: 'London',         west: -0.510,   south: 51.286, east: 0.334,    north: 51.692 },
+    'tokyo':          { label: 'Tokyo',          west: 139.560,  south: 35.523, east: 139.920,  north: 35.817 },
+    'sao-paulo':      { label: 'São Paulo',      west: -46.826,  south: -23.733, east: -46.365, north: -23.357 },
+    'sydney':         { label: 'Sydney',         west: 150.920,  south: -33.980, east: 151.340, north: -33.720 }
+  };
+
+  // ============================================================
+  // State
+  // ============================================================
+  let map = null;
+  let fileRectangles = [];
+  let queryRectangle = null;
+  let allFiles = [];
+  let initialized = false;
+  let drawHandler = null;
+
+  // ============================================================
+  // Coordinate clamping helpers
+  // ============================================================
+  function clampLat(v) { return Math.max(-90, Math.min(90, v)); }
+  function clampLon(v) { return Math.max(-180, Math.min(180, v)); }
+  function clampBbox(bbox) {
+    return {
+      west: clampLon(bbox.west),
+      south: clampLat(bbox.south),
+      east: clampLon(bbox.east),
+      north: clampLat(bbox.north)
+    };
+  }
+
+  // ============================================================
+  // Initialize Explorer (called after setup completes)
+  // ============================================================
+  window.initExplorer = function () {
+    if (initialized) {
+      var types = getSelectedTypes();
+      if (types.length > 0) loadTypeBboxes(types);
+      return;
+    }
+    initialized = true;
+
+    map = L.map('explorer-map').setView([20, 0], 2);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      maxZoom: 19
+    }).addTo(map);
+
+    // Re-render map when explorer section is toggled open
+    var explorerDetails = document.querySelector('#explorer-section details');
+    if (explorerDetails) {
+      explorerDetails.addEventListener('toggle', function () {
+        if (this.open) {
+          setTimeout(function () { map.invalidateSize(); }, 150);
+        }
+      });
+    }
+
+    document.getElementById('type-checkboxes').addEventListener('change', function () {
+      var types = getSelectedTypes();
+      if (types.length > 0) loadTypeBboxes(types);
+    });
+
+    document.getElementById('bbox-select').addEventListener('change', function () {
+      const val = this.value;
+      if (drawHandler) {
+        drawHandler.disable();
+        drawHandler = null;
+      }
+      if (val === 'custom') {
+        drawHandler = new L.Draw.Rectangle(map, {
+          shapeOptions: {
+            color: '#e65100',
+            weight: 3,
+            opacity: 0.9,
+            fillColor: '#ff6d00',
+            fillOpacity: 0.15,
+            dashArray: '6 4'
+          }
+        });
+        drawHandler.enable();
+        return;
+      }
+      if (val === '') {
+        document.getElementById('bbox-west').value = '';
+        document.getElementById('bbox-south').value = '';
+        document.getElementById('bbox-east').value = '';
+        document.getElementById('bbox-north').value = '';
+        clearQueryBbox();
+        return;
+      }
+      const preset = PRESETS[val];
+      if (preset) {
+        document.getElementById('bbox-west').value = preset.west;
+        document.getElementById('bbox-south').value = preset.south;
+        document.getElementById('bbox-east').value = preset.east;
+        document.getElementById('bbox-north').value = preset.north;
+        applyQueryBbox(preset);
+      }
+    });
+
+    map.on(L.Draw.Event.CREATED, function (e) {
+      const bounds = e.layer.getBounds();
+      const west = clampLon(parseFloat(bounds.getWest().toFixed(3)));
+      const south = clampLat(parseFloat(bounds.getSouth().toFixed(3)));
+      const east = clampLon(parseFloat(bounds.getEast().toFixed(3)));
+      const north = clampLat(parseFloat(bounds.getNorth().toFixed(3)));
+
+      document.getElementById('bbox-west').value = west;
+      document.getElementById('bbox-south').value = south;
+      document.getElementById('bbox-east').value = east;
+      document.getElementById('bbox-north').value = north;
+
+      applyQueryBbox({ west, south, east, north });
+      drawHandler = null;
+    });
+
+    document.getElementById('btn-apply-custom-bbox').addEventListener('click', function () {
+      var west = parseFloat(document.getElementById('bbox-west').value);
+      var south = parseFloat(document.getElementById('bbox-south').value);
+      var east = parseFloat(document.getElementById('bbox-east').value);
+      var north = parseFloat(document.getElementById('bbox-north').value);
+      if (isNaN(west) || isNaN(south) || isNaN(east) || isNaN(north)) {
+        alert('Please enter valid numeric coordinates for all four bbox fields.');
+        return;
+      }
+      west = clampLon(west);
+      east = clampLon(east);
+      south = clampLat(south);
+      north = clampLat(north);
+      document.getElementById('bbox-west').value = west;
+      document.getElementById('bbox-south').value = south;
+      document.getElementById('bbox-east').value = east;
+      document.getElementById('bbox-north').value = north;
+      applyQueryBbox({ west, south, east, north });
+    });
+
+    // Clear button for custom bbox mode
+    document.getElementById('btn-clear-custom-bbox').addEventListener('click', function () {
+      document.getElementById('bbox-west').value = '';
+      document.getElementById('bbox-south').value = '';
+      document.getElementById('bbox-east').value = '';
+      document.getElementById('bbox-north').value = '';
+      clearQueryBbox();
+      if (drawHandler) { drawHandler.disable(); }
+      drawHandler = new L.Draw.Rectangle(map, {
+        shapeOptions: {
+          color: '#e65100',
+          weight: 3,
+          opacity: 0.9,
+          fillColor: '#ff6d00',
+          fillOpacity: 0.15,
+          dashArray: '6 4'
+        }
+      });
+      drawHandler.enable();
+    });
+
+    loadTypeBboxes(getSelectedTypes());
+  };
+
+  // ============================================================
+  // Get selected types from checkboxes
+  // ============================================================
+  function getSelectedTypes() {
+    return Array.from(document.querySelectorAll('#type-checkboxes input:checked')).map(function (cb) { return cb.value; });
+  }
+
+  // ============================================================
+  // Load file bboxes for one or more collection types
+  // ============================================================
+  async function loadTypeBboxes(types) {
+    const conn = window.duckdbConn;
+    if (!conn || !window.setupComplete) return;
+    if (!Array.isArray(types) || types.length === 0) return;
+
+    const fileListEl = document.getElementById('file-list');
+
+    clearFileRectangles();
+    clearQueryBbox();
+    fileListEl.innerHTML = '';
+
+    try {
+      const t0 = performance.now();
+      const inList = types.map(function (t) { return "'" + t + "'"; }).join(', ');
+      const result = await conn.query(`
+        SELECT
+          id,
+          collection,
+          assets.aws.alternate.s3.href AS href,
+          bbox.xmin AS xmin,
+          bbox.ymin AS ymin,
+          bbox.xmax AS xmax,
+          bbox.ymax AS ymax
+        FROM overture_collections
+        WHERE collection IN (${inList})
+        ORDER BY collection, id
+      `);
+
+      allFiles = result.toArray().map(r => {
+        const obj = r.toJSON();
+        const href = String(obj.href);
+        return {
+          id: String(obj.id),
+          collection: String(obj.collection),
+          filename: href.split('/').pop() || String(obj.id),
+          href: href,
+          xmin: Number(obj.xmin),
+          ymin: Number(obj.ymin),
+          xmax: Number(obj.xmax),
+          ymax: Number(obj.ymax)
+        };
+      });
+
+      const elapsed = Math.round(performance.now() - t0);
+      console.log(`[explorer] Loaded ${allFiles.length} files for types [${types.join(', ')}] (${elapsed} ms)`);
+
+      renderFileBboxes(allFiles);
+    } catch (err) {
+      console.error('[explorer] Failed to load file bboxes:', err);
+    }
+  }
+
+  // ============================================================
+  // Render file bounding boxes on the map
+  // ============================================================
+  function renderFileBboxes(files) {
+    clearFileRectangles();
+
+    const bounds = L.latLngBounds();
+
+    for (const file of files) {
+      const shortName = file.filename.match(/^(part-\d+)/)?.[1] || file.filename;
+      const rect = L.rectangle(
+        [[file.ymin, file.xmin], [file.ymax, file.xmax]],
+        {
+          color: '#3366cc',
+          weight: 1,
+          opacity: 0.6,
+          fillColor: '#3366cc',
+          fillOpacity: 0.08,
+          className: 'file-bbox'
+        }
+      );
+
+      rect.bindTooltip(
+        `<strong>${shortName}</strong>`,
+        { sticky: true }
+      );
+
+      rect.fileData = file;
+      rect.addTo(map);
+      fileRectangles.push(rect);
+
+      bounds.extend([[file.ymin, file.xmin], [file.ymax, file.xmax]]);
+    }
+
+    if (files.length > 0) {
+      map.fitBounds(bounds, { padding: [20, 20] });
+    }
+  }
+
+  // ============================================================
+  // Apply a query bounding box
+  // ============================================================
+  async function applyQueryBbox(bbox) {
+    const { west, south, east, north } = bbox;
+
+    if (queryRectangle) {
+      map.removeLayer(queryRectangle);
+    }
+    queryRectangle = L.rectangle(
+      [[south, west], [north, east]],
+      {
+        color: '#e65100',
+        weight: 3,
+        opacity: 0.9,
+        fillColor: '#ff6d00',
+        fillOpacity: 0.15,
+        dashArray: '6 4'
+      }
+    );
+    queryRectangle.bindTooltip('Query bounding box', { sticky: true });
+    queryRectangle.addTo(map);
+
+    const intersecting = [];
+    const nonIntersecting = [];
+
+    for (const rect of fileRectangles) {
+      const f = rect.fileData;
+      const overlaps = f.xmax >= west && f.xmin <= east && f.ymax >= south && f.ymin <= north;
+      if (overlaps) {
+        intersecting.push(rect);
+        rect.setStyle({
+          color: '#1a47b8',
+          weight: 2,
+          opacity: 0.9,
+          fillColor: '#3366cc',
+          fillOpacity: 0.2
+        });
+      } else {
+        nonIntersecting.push(rect);
+        rect.setStyle({
+          color: '#999999',
+          weight: 1,
+          opacity: 0.3,
+          fillColor: '#999999',
+          fillOpacity: 0.03
+        });
+      }
+    }
+
+    map.fitBounds([[south, west], [north, east]], { padding: [50, 50] });
+
+    const fileListEl = document.getElementById('file-list');
+    const intersectingFiles = intersecting.map(r => r.fileData);
+
+    if (intersectingFiles.length === 0) {
+      fileListEl.innerHTML = '<p class="placeholder" style="padding:1rem;">No files intersect this bounding box.</p>';
+      document.getElementById('query-from-where').value = '-- No files intersect this bounding box';
+      if (window.sandboxAutoResize) window.sandboxAutoResize(document.getElementById('query-from-where'));
+      return;
+    }
+
+    // Build STAC link info — group by collection for multi-type support
+    const types = getSelectedTypes();
+    const release = window.latestVersion;
+
+    // Render table with cache buttons
+    renderFileTable(fileListEl, intersectingFiles, release);
+
+    // Show FROM/WHERE SQL fragment in the locked query zone
+    const urlList = intersectingFiles.map(f => `    '${f.href}'`).join(',\n');
+    const fromWhereFragment =
+      `FROM read_parquet([\n${urlList}\n])\nWHERE bbox.xmin <= ${east}\n  AND bbox.xmax >= ${west}\n  AND bbox.ymin <= ${north}\n  AND bbox.ymax >= ${south}`;
+    document.getElementById('query-from-where').value = fromWhereFragment;
+    if (window.sandboxAutoResize) window.sandboxAutoResize(document.getElementById('query-from-where'));
+  }
+
+  // ============================================================
+  // Render file table
+  // ============================================================
+  function renderFileTable(fileListEl, files, release) {
+    let html = `<p style="padding:0.5rem 0;font-size:0.85rem;color:var(--om-color-text-muted);">
+      <strong>${files.length}</strong> of ${fileRectangles.length} files intersect this bounding box
+    </p>`;
+    html += '<div class="table-wrapper" style="max-height:none;"><table><thead><tr>';
+    html += '<th>Type</th><th>Partition</th><th>Bbox</th><th>Cache</th>';
+    html += '</tr></thead><tbody>';
+
+    for (const f of files) {
+      const shortName = f.filename.match(/^(part-\d+)/)?.[1] || f.filename;
+      const theme = TYPE_TO_THEME[f.collection] || f.collection;
+      const stacUrl = `https://stac.overturemaps.org/${release}/${theme}/${f.collection}/${f.id}/${f.id}.json`;
+      html += '<tr>';
+      html += `<td>${escapeHtml(f.collection)}</td>`;
+      html += `<td title="${escapeHtml(f.href)}"><a href="${escapeHtml(stacUrl)}" target="_blank" style="color:var(--om-link-color);">${escapeHtml(shortName)}</a></td>`;
+      html += `<td style="font-size:0.7rem;">${f.xmin.toFixed(1)}, ${f.ymin.toFixed(1)}, ${f.xmax.toFixed(1)}, ${f.ymax.toFixed(1)}</td>`;
+      html += `<td><button class="btn btn-primary cache-run-btn" data-href="${escapeHtml(f.href)}" style="font-size:0.7rem;padding:0.15rem 0.5rem;">Cache</button></td>`;
+      html += '</tr>';
+    }
+
+    html += '</tbody><tfoot><tr>';
+    html += '<td colspan="3"></td>';
+    html += '<td><button id="btn-cache-all" class="btn btn-primary" style="font-size:0.7rem;padding:0.15rem 0.5rem;">Cache All</button></td>';
+    html += '</tr></tfoot></table></div>';
+    fileListEl.innerHTML = html;
+
+    // Wire up individual Cache buttons
+    fileListEl.querySelectorAll('.cache-run-btn').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        runCacheQuery(this);
+      });
+    });
+
+    // Wire up Cache All button
+    var btnAll = document.getElementById('btn-cache-all');
+    if (btnAll) {
+      btnAll.addEventListener('click', async function () {
+        this.disabled = true;
+        this.innerHTML = '<span class="btn-spinner"></span>';
+        var buttons = Array.from(fileListEl.querySelectorAll('.cache-run-btn:not(:disabled):not(#btn-cache-all)'));
+        var batchSize = 6;
+        var tAll = performance.now();
+        console.log(`[cache] Starting Cache All: ${buttons.length} files in batches of ${batchSize}`);
+        for (var i = 0; i < buttons.length; i += batchSize) {
+          var batch = buttons.slice(i, i + batchSize);
+          var batchNum = Math.floor(i / batchSize) + 1;
+          var totalBatches = Math.ceil(buttons.length / batchSize);
+          console.log(`[cache] Batch ${batchNum}/${totalBatches} (${batch.length} files)...`);
+          var tBatch = performance.now();
+          await Promise.all(batch.map(function (b) { return runCacheQuery(b); }));
+          console.log(`[cache] Batch ${batchNum} done (${Math.round(performance.now() - tBatch)} ms)`);
+        }
+        var totalElapsed = Math.round(performance.now() - tAll);
+        console.log(`[cache] Cache All complete: ${buttons.length} files cached in ${totalElapsed} ms`);
+        this.textContent = 'Done';
+      });
+    }
+  }
+
+  // ============================================================
+  // Clear query bbox overlay
+  // ============================================================
+  function clearQueryBbox() {
+    if (queryRectangle) {
+      map.removeLayer(queryRectangle);
+      queryRectangle = null;
+    }
+
+    for (const rect of fileRectangles) {
+      rect.setStyle({
+        color: '#3366cc',
+        weight: 1,
+        opacity: 0.6,
+        fillColor: '#3366cc',
+        fillOpacity: 0.08
+      });
+    }
+
+    document.getElementById('query-from-where').value = '-- Select a type and bounding box in the Explorer above';
+    if (window.sandboxAutoResize) window.sandboxAutoResize(document.getElementById('query-from-where'));
+    document.getElementById('file-list').innerHTML = '';
+  }
+
+  async function runCacheQuery(btn) {
+    var href = btn.dataset.href;
+    var localName = href.split('/').pop();
+
+    btn.disabled = true;
+    btn.innerHTML = '<span class="btn-spinner"></span>';
+
+    try {
+      var tQuery = performance.now();
+      console.log(`[cache] Fetching parquet footer for ${localName}...`);
+      // Query the full URL directly — DuckDB-WASM auto-detects HTTPS and
+      // uses HEAD + range requests to read only the parquet footer.
+      // registerFileURL is not needed and can interfere with this behavior.
+      await window.duckdbConn.query("SELECT 1 FROM read_parquet('" + href + "') LIMIT 0");
+      var elapsed = Math.round(performance.now() - tQuery);
+      console.log(`[cache] \u2713 Cached ${localName} (${elapsed} ms)`);
+
+      btn.textContent = '\u2713';
+      btn.style.opacity = '0.5';
+      btn.style.cursor = 'default';
+    } catch (err) {
+      var elapsed = Math.round(performance.now() - (tQuery || performance.now()));
+      console.error(`[cache] \u2717 Failed ${localName} after ${elapsed} ms:`, err.message);
+      btn.textContent = '\u2717';
+      btn.style.background = 'var(--om-color-error)';
+      btn.title = err.message;
+    }
+  }
+
+  // ============================================================
+  // Clear file rectangles
+  // ============================================================
+  function clearFileRectangles() {
+    for (const rect of fileRectangles) {
+      map.removeLayer(rect);
+    }
+    fileRectangles = [];
+    allFiles = [];
+  }
+
+  // ============================================================
+  // HTML Escaping (local copy to avoid dependency)
+  // ============================================================
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+})();
diff --git a/js/sandbox.js b/js/sandbox.js
new file mode 100644
index 0000000..7c91030
--- /dev/null
+++ b/js/sandbox.js
@@ -0,0 +1,433 @@
+// ============================================================
+// Overture Maps DuckDB Sandbox — Core Logic
+// Loaded as a classic <script> before the module script.
+// The module script sets window.duckdbConn / window.duckdbDB
+// after DuckDB-WASM is initialized.
+// ============================================================
+
+(function () {
+  'use strict';
+
+  // ============================================================
+  // State (set by the module script after DuckDB init)
+  // ============================================================
+  window.duckdbDB = null;
+  window.duckdbConn = null;
+  window.setupComplete = false;
+  window.latestVersion = null;
+
+  // ============================================================
+  // DOM References
+  // ============================================================
+  const loadingOverlay = document.getElementById('loading-overlay');
+  const loadingError = document.getElementById('loading-error');
+  const duckdbDot = document.getElementById('duckdb-dot');
+  const duckdbStatus = document.getElementById('duckdb-status');
+  const releaseItem = document.getElementById('release-item');
+  const releaseDot = document.getElementById('release-dot');
+  const releaseStatus = document.getElementById('release-status');
+
+  const setupEditor = document.getElementById('setup-editor');
+  const btnSetup = document.getElementById('btn-setup');
+  const setupError = document.getElementById('setup-error');
+
+  const btnQuery = document.getElementById('btn-query');
+  const queryError = document.getElementById('query-error');
+
+  const resultsMeta = document.getElementById('results-meta');
+  const resultsContainer = document.getElementById('results-container');
+
+  // ============================================================
+  // HTML Escaping
+  // ============================================================
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  // ============================================================
+  // Cell Value Formatting
+  // ============================================================
+  function formatCellValue(val) {
+    if (val === null || val === undefined) {
+      return '<span class="cell-null">NULL</span>';
+    }
+    if (typeof val === 'bigint') {
+      return escapeHtml(String(val));
+    }
+    if (val instanceof Uint8Array || val instanceof ArrayBuffer) {
+      const bytes = val instanceof Uint8Array ? val : new Uint8Array(val);
+      const hex = Array.from(bytes.slice(0, 20), b => b.toString(16).padStart(2, '0')).join('');
+      return `<span class="cell-object" title="Binary data (${bytes.length} bytes)">${hex}${bytes.length > 20 ? '...' : ''}</span>`;
+    }
+    if (typeof val === 'object') {
+      let json;
+      try {
+        json = JSON.stringify(val, (_, v) => typeof v === 'bigint' ? String(v) : v);
+      } catch {
+        json = String(val);
+      }
+      const truncated = json.length > 120 ? json.substring(0, 120) + '...' : json;
+      return `<span class="cell-object" title="${escapeHtml(json)}">${escapeHtml(truncated)}</span>`;
+    }
+    const str = String(val);
+    if (str.length > 200) {
+      return `<span title="${escapeHtml(str)}">${escapeHtml(str.substring(0, 200))}...</span>`;
+    }
+    return escapeHtml(str);
+  }
+
+  // ============================================================
+  // Results Rendering
+  // ============================================================
+  function renderResults(rows, timingMs) {
+    if (!rows || rows.length === 0) {
+      resultsMeta.textContent = '';
+      resultsContainer.innerHTML = '<p class="placeholder">Query returned no results.</p>';
+      return;
+    }
+
+    const columns = Object.keys(rows[0]);
+    resultsMeta.textContent = `${rows.length} row${rows.length !== 1 ? 's' : ''} \u00b7 ${timingMs} ms`;
+
+    let html = '<div class="table-wrapper"><table><thead><tr>';
+    for (const col of columns) {
+      html += `<th>${escapeHtml(col)}</th>`;
+    }
+    html += '</tr></thead><tbody>';
+
+    for (const row of rows) {
+      html += '<tr>';
+      for (const col of columns) {
+        html += `<td>${formatCellValue(row[col])}</td>`;
+      }
+      html += '</tr>';
+    }
+    html += '</tbody></table></div>';
+    resultsContainer.innerHTML = html;
+  }
+
+  function showError(errorEl, message) {
+    errorEl.textContent = message;
+    errorEl.classList.remove('hidden');
+  }
+
+  function hideError(errorEl) {
+    errorEl.classList.add('hidden');
+    errorEl.textContent = '';
+  }
+
+  // ============================================================
+  // SQL Preparation
+  // ============================================================
+  function prepareSQL(raw) {
+    let sql = raw.trim();
+    if (!sql) return sql;
+
+    if (sql.endsWith(';')) {
+      sql = sql.slice(0, -1).trim();
+    }
+
+    return sql;
+  }
+
+  // ============================================================
+  // SQL Statement Splitting
+  // ============================================================
+  function splitStatements(sql) {
+    const statements = [];
+    let current = '';
+    let inString = false;
+
+    for (let i = 0; i < sql.length; i++) {
+      const ch = sql[i];
+      if (ch === "'" && !inString) {
+        inString = true;
+        current += ch;
+      } else if (ch === "'" && inString) {
+        if (i + 1 < sql.length && sql[i + 1] === "'") {
+          current += "''";
+          i++;
+        } else {
+          inString = false;
+          current += ch;
+        }
+      } else if (ch === ';' && !inString) {
+        const trimmed = current.trim();
+        if (trimmed) {
+          statements.push(trimmed);
+        }
+        current = '';
+      } else {
+        current += ch;
+      }
+    }
+    const trimmed = current.trim();
+    if (trimmed) {
+      statements.push(trimmed);
+    }
+
+    return statements.filter(s => {
+      const lines = s.split('\n').filter(l => !l.trim().startsWith('--') && l.trim() !== '');
+      return lines.length > 0;
+    });
+  }
+
+  // ============================================================
+  // STAC Catalog Fetch
+  // ============================================================
+  async function fetchCatalog() {
+    const resp = await fetch('https://stac.overturemaps.org/catalog.json');
+    if (!resp.ok) throw new Error(`STAC catalog returned ${resp.status}`);
+    const catalog = await resp.json();
+    if (!catalog.latest) {
+      throw new Error('Could not determine latest release from STAC catalog');
+    }
+    return catalog;
+  }
+
+  // ============================================================
+  // Setup Execution
+  // ============================================================
+  async function runSetup() {
+    const db = window.duckdbDB;
+
+    btnSetup.disabled = true;
+    btnSetup.innerHTML = '<span class="btn-spinner"></span>Running...';
+    hideError(setupError);
+
+    releaseItem.style.display = 'flex';
+    releaseDot.className = 'status-dot loading';
+    releaseStatus.textContent = 'Running setup...';
+
+    const t0 = performance.now();
+
+    try {
+      // Create a fresh connection
+      if (window.duckdbConn) await window.duckdbConn.close();
+      window.duckdbConn = await db.connect();
+      const freshConn = window.duckdbConn;
+      console.log(`[setup] Connection created (${Math.round(performance.now() - t0)} ms)`);
+
+      // Fetch catalog (release version + registry manifest) via JS
+      const tFetch = performance.now();
+      const catalog = await fetchCatalog();
+      window.latestVersion = catalog.latest;
+      window.registryManifest = catalog.registry?.manifest || [];
+      window.registryPath = catalog.registry?.path || '';
+      console.log(`[setup] STAC catalog fetched → ${window.latestVersion} (${Math.round(performance.now() - tFetch)} ms)`);
+      console.log(`[setup] Registry manifest: ${window.registryManifest.length} entries`);
+
+      // Split and execute each statement from the editor
+      const sql = setupEditor.value;
+      const statements = splitStatements(sql);
+
+      for (let i = 0; i < statements.length; i++) {
+        let stmt = statements[i];
+        // Replace the read_json_auto subquery with the JS-resolved value
+        stmt = stmt.replace(
+          /\(\s*SELECT\s+latest\s+FROM\s+read_json_auto\s*\(\s*'https:\/\/stac\.overturemaps\.org\/catalog\.json'\s*\)\s*\)/is,
+          `'${window.latestVersion}'`
+        );
+        // Replace getvariable('overture_release') in URLs with the literal value
+        stmt = stmt.replace(
+          /getvariable\s*\(\s*'overture_release'\s*\)/gi,
+          `'${window.latestVersion}'`
+        );
+        const tStmt = performance.now();
+        const preview = stmt.replace(/\s+/g, ' ').substring(0, 80);
+        console.log(`[setup] Executing statement ${i + 1}/${statements.length}: ${preview}...`);
+        await freshConn.query(stmt);
+        console.log(`[setup] Statement ${i + 1} done (${Math.round(performance.now() - tStmt)} ms)`);
+      }
+
+      window.setupComplete = true;
+
+      console.log(`[setup] Total setup time: ${Math.round(performance.now() - t0)} ms`);
+
+      // Update UI
+      releaseDot.className = 'status-dot ready';
+      releaseStatus.textContent = `Release: ${window.latestVersion}`;
+      btnSetup.textContent = 'Run Setup';
+      btnSetup.disabled = false;
+      btnQuery.disabled = false;
+
+      // Notify explorer
+      if (typeof window.initExplorer === 'function') {
+        window.initExplorer();
+      }
+    } catch (err) {
+      releaseDot.className = 'status-dot error';
+      releaseStatus.textContent = 'Error';
+      showError(setupError, err.message);
+      btnSetup.textContent = 'Run Setup';
+      btnSetup.disabled = false;
+    }
+  }
+
+  // ============================================================
+  // Query Execution
+  // ============================================================
+  async function runQuery() {
+    if (!window.setupComplete) {
+      showError(queryError, 'Please run Setup first (Box 1).');
+      return;
+    }
+
+    const selectPart = document.getElementById('query-select').value.trim();
+    const fromWhereEl = document.getElementById('query-from-where');
+    const fromWherePart = fromWhereEl.value.trim();
+    const fromWhereDisabled = !document.getElementById('from-where-enabled').checked;
+    const extrasPart = document.getElementById('query-extras').value.trim();
+
+    if (!fromWhereDisabled && fromWherePart.startsWith('--')) {
+      showError(queryError, 'Select a type and bounding box in the Explorer first.');
+      return;
+    }
+
+    let parts = [selectPart];
+    if (!fromWhereDisabled) parts.push(fromWherePart);
+    if (extrasPart) parts.push(extrasPart);
+    const rawSQL = parts.join('\n');
+
+    if (!rawSQL.trim()) {
+      showError(queryError, 'Please enter a SQL query.');
+      return;
+    }
+
+    btnQuery.disabled = true;
+    btnQuery.innerHTML = '<span class="btn-spinner"></span>Running...';
+    hideError(queryError);
+    resultsContainer.innerHTML = '<p class="placeholder">Running query...</p>';
+    resultsMeta.textContent = '';
+
+    try {
+      const tQuery = performance.now();
+
+      let sql = prepareSQL(rawSQL);
+      console.log('[query] Prepared SQL');
+      console.log('[query] Final SQL:', sql.substring(0, 500) + (sql.length > 500 ? '...' : ''));
+
+      const start = performance.now();
+
+      console.log('[query] Executing...');
+      const result = await Promise.race([
+        window.duckdbConn.query(sql),
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error(
+            'Query timed out after 120 seconds. Try a tighter bounding box or more restrictive WHERE clause.'
+          )), 120000)
+        )
+      ]);
+
+      const elapsed = Math.round(performance.now() - start);
+      console.log(`[query] Execution done (${elapsed} ms)`);
+
+      const tConvert = performance.now();
+      const rows = result.toArray().map(row => {
+        const obj = row.toJSON();
+        for (const key of Object.keys(obj)) {
+          if (typeof obj[key] === 'bigint') {
+            obj[key] = Number(obj[key]);
+          }
+        }
+        return obj;
+      });
+      console.log(`[query] Converted ${rows.length} rows to JSON (${Math.round(performance.now() - tConvert)} ms)`);
+
+      renderResults(rows, elapsed);
+    } catch (err) {
+      resultsContainer.innerHTML = '<p class="placeholder">Query failed. See error above.</p>';
+      resultsMeta.textContent = '';
+      showError(queryError, err.message || String(err));
+    } finally {
+      btnQuery.textContent = 'Run Query';
+      btnQuery.disabled = false;
+    }
+  }
+
+  // ============================================================
+  // Tab Key Support
+  // ============================================================
+  function handleTabKey(e) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const ta = e.target;
+      const start = ta.selectionStart;
+      const end = ta.selectionEnd;
+      ta.value = ta.value.substring(0, start) + '  ' + ta.value.substring(end);
+      ta.selectionStart = ta.selectionEnd = start + 2;
+    }
+  }
+
+  function autoResizeTextarea(el) {
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+  }
+
+  // ============================================================
+  // Event Handlers
+  // ============================================================
+  btnSetup.addEventListener('click', runSetup);
+  btnQuery.addEventListener('click', runQuery);
+
+  document.getElementById('from-where-enabled').addEventListener('change', function () {
+    var el = document.getElementById('query-from-where');
+    if (this.checked) {
+      el.classList.remove('disabled');
+      el.disabled = false;
+    } else {
+      el.classList.add('disabled');
+      el.disabled = true;
+    }
+  });
+
+  document.getElementById('query-from-where').addEventListener('keydown', (e) => {
+    handleTabKey(e);
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      runQuery();
+    }
+  });
+
+  var fromWhereTextarea = document.getElementById('query-from-where');
+  fromWhereTextarea.addEventListener('input', function () {
+    autoResizeTextarea(this);
+  });
+  autoResizeTextarea(fromWhereTextarea);
+
+  document.getElementById('query-select').addEventListener('keydown', (e) => {
+    handleTabKey(e);
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      runQuery();
+    }
+  });
+
+  document.getElementById('query-extras').addEventListener('keydown', (e) => {
+    handleTabKey(e);
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      runQuery();
+    }
+  });
+
+  setupEditor.addEventListener('keydown', (e) => {
+    handleTabKey(e);
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      runSetup();
+    }
+  });
+
+  // ============================================================
+  // Expose to window for module script and explorer
+  // ============================================================
+  window.sandboxRunSetup = runSetup;
+  window.sandboxRunQuery = runQuery;
+  window.sandboxShowError = showError;
+  window.sandboxHideError = hideError;
+  window.sandboxAutoResize = autoResizeTextarea;
+
+})();
diff --git a/sandbox.html b/sandbox.html
new file mode 100644
index 0000000..b3209cc
--- /dev/null
+++ b/sandbox.html
@@ -0,0 +1,871 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Overture Maps DuckDB Sandbox</title>
+  <link rel="icon" href="img/omf_logo.png">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
+
+  <style>
+    :root {
+      --om-color-primary: #2c2e7f;
+      --om-color-primary-light: #5362d1;
+      --om-color-primary-lighter: #6673d6;
+      --om-color-primary-lightest: #7985db;
+      --om-link-color: #4051cc;
+      --om-color-bg: #ffffff;
+      --om-color-surface: #f8f8fc;
+      --om-color-text: #333333;
+      --om-color-text-muted: #666666;
+      --om-color-border: #e0e0e0;
+      --om-color-error: #d32f2f;
+      --om-color-success: #2e7d32;
+      --om-color-editor-bg: #1e1e2e;
+      --om-color-editor-text: #cdd6f4;
+      --om-font-body: 'Noto Sans', 'Segoe UI', Roboto, sans-serif;
+      --om-font-heading: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
+      --om-font-mono: 'Menlo', 'Consolas', 'Courier New', monospace;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: var(--om-font-body);
+      color: var(--om-color-text);
+      background: var(--om-color-surface);
+      line-height: 1.6;
+    }
+
+    /* Loading Overlay */
+    #loading-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.95);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      font-family: var(--om-font-heading);
+    }
+    #loading-overlay.hidden { display: none; }
+    #loading-overlay .spinner {
+      width: 48px;
+      height: 48px;
+      border: 4px solid var(--om-color-border);
+      border-top-color: var(--om-color-primary);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-bottom: 1.5rem;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    #loading-overlay p {
+      font-size: 1.1rem;
+      color: var(--om-color-text-muted);
+    }
+    #loading-overlay .error-msg {
+      color: var(--om-color-error);
+      margin-top: 1rem;
+      max-width: 500px;
+      text-align: center;
+    }
+
+    /* Container */
+    .container {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 1.5rem 1rem 3rem;
+    }
+
+    /* Header */
+    header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+      border-bottom: 2px solid var(--om-color-primary);
+    }
+    header .logo {
+      height: 48px;
+      width: auto;
+    }
+    header h1 {
+      font-family: var(--om-font-heading);
+      font-weight: 700;
+      font-size: 1.5rem;
+      color: var(--om-color-primary);
+      margin: 0;
+    }
+    header .subtitle {
+      font-size: 0.9rem;
+      color: var(--om-color-text-muted);
+      margin: 0;
+    }
+
+    /* Status Bar */
+    #status-bar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      padding: 0.5rem 1rem;
+      background: var(--om-color-bg);
+      border: 1px solid var(--om-color-border);
+      border-radius: 6px;
+      font-size: 0.85rem;
+      margin-bottom: 1.5rem;
+    }
+    #status-bar .status-item {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+    .status-dot.loading { background: #f59e0b; animation: pulse 1s ease-in-out infinite; }
+    .status-dot.ready { background: var(--om-color-success); }
+    .status-dot.error { background: var(--om-color-error); }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+    /* Query Section */
+    .query-section {
+      background: var(--om-color-bg);
+      border: 1px solid var(--om-color-border);
+      border-radius: 8px;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+    }
+    .query-section .section-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      background: var(--om-color-primary);
+      color: white;
+      font-family: var(--om-font-heading);
+      font-weight: 600;
+      font-size: 0.95rem;
+    }
+    .query-section .section-desc {
+      padding: 0.75rem 1rem 0;
+      font-size: 0.85rem;
+      color: var(--om-color-text-muted);
+    }
+
+    /* SQL Editor */
+    .editor-wrapper {
+      padding: 0.75rem 1rem;
+    }
+    .sql-editor {
+      width: 100%;
+      min-height: 160px;
+      padding: 0.75rem 1rem;
+      background: var(--om-color-editor-bg);
+      color: var(--om-color-editor-text);
+      border: 2px solid transparent;
+      border-left: 4px solid var(--om-color-primary-light);
+      border-radius: 6px;
+      font-family: var(--om-font-mono);
+      font-size: 0.85rem;
+      line-height: 1.7;
+      resize: vertical;
+      outline: none;
+      tab-size: 2;
+    }
+    .sql-editor:focus {
+      border-color: var(--om-color-primary-light);
+    }
+    #setup-editor {
+      min-height: 30lh;
+      overflow-y: hidden;
+      resize: none;
+    }
+
+    /* Three-zone query editor */
+    .query-zones {
+      display: flex;
+      flex-direction: column;
+    }
+    .sql-zone-editable {
+      min-height: 3lh;
+      resize: vertical;
+    }
+    #query-select {
+      border-radius: 6px 6px 0 0;
+      border-bottom: none;
+      min-height: 8lh;
+    }
+    .sql-zone-locked {
+      background: #2a2a3e;
+      color: #cdd6f4;
+      padding: 0.75rem 1rem;
+      font-family: var(--om-font-mono);
+      font-size: 0.85rem;
+      line-height: 1.7;
+      border-left: 4px solid #e65100;
+      border: 2px solid transparent;
+      border-radius: 0;
+      width: 100%;
+      resize: none;
+      outline: none;
+      tab-size: 2;
+      white-space: pre;
+      overflow: hidden;
+      transition: opacity 0.15s ease;
+    }
+    .sql-zone-locked:focus {
+      border-color: #e65100;
+    }
+    .sql-zone-locked.disabled {
+      opacity: 0.4;
+      border-left-color: #666;
+    }
+    #query-extras {
+      border-radius: 0 0 6px 6px;
+      border-top: none;
+    }
+
+    /* Collapsible sections */
+    .section-header::-webkit-details-marker,
+    .section-header::marker {
+      display: none;
+      content: '';
+    }
+    .section-chevron {
+      display: inline-block;
+      transition: transform 0.2s ease;
+      font-size: 0.7rem;
+    }
+    details[open] > .section-header .section-chevron {
+      transform: rotate(90deg);
+    }
+
+    /* Controls */
+    .controls-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0 1rem 0.75rem;
+    }
+    .btn {
+      padding: 0.5rem 1.25rem;
+      font-family: var(--om-font-heading);
+      font-weight: 600;
+      font-size: 0.85rem;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.15s ease, opacity 0.15s ease;
+    }
+    .btn-primary {
+      background: var(--om-color-primary);
+      color: white;
+    }
+    .btn-primary:hover:not(:disabled) {
+      background: var(--om-color-primary-light);
+    }
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .btn .btn-spinner {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(255,255,255,0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      margin-right: 0.4rem;
+      vertical-align: middle;
+    }
+
+    .controls-row label {
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .controls-row select {
+      font-family: var(--om-font-body);
+      font-size: 0.8rem;
+      padding: 0.35rem 0.5rem;
+      border: 1px solid var(--om-color-border);
+      border-radius: 4px;
+      background: white;
+    }
+
+    .controls-row .hint {
+      font-size: 0.75rem;
+      color: var(--om-color-text-muted);
+      margin-left: auto;
+    }
+
+    .status-msg {
+      font-size: 0.8rem;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+    }
+    .status-msg.success {
+      color: var(--om-color-success);
+      background: rgba(46, 125, 50, 0.08);
+    }
+    .status-msg.running {
+      color: #f59e0b;
+    }
+
+    /* Error Box */
+    .error-box {
+      margin: 0 1rem 0.75rem;
+      padding: 0.75rem 1rem;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-left: 4px solid var(--om-color-error);
+      border-radius: 6px;
+      font-size: 0.8rem;
+      color: var(--om-color-error);
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-family: var(--om-font-mono);
+    }
+    .error-box.hidden { display: none; }
+
+    /* Results Section */
+    #results-section {
+      background: var(--om-color-bg);
+      border: 1px solid var(--om-color-border);
+      border-radius: 8px;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+    }
+    #results-section .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
+      background: var(--om-color-primary);
+      color: white;
+      font-family: var(--om-font-heading);
+      font-weight: 600;
+      font-size: 0.95rem;
+    }
+    .results-meta {
+      font-size: 0.8rem;
+      font-weight: 400;
+      opacity: 0.9;
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+      max-height: 500px;
+      overflow-y: auto;
+    }
+    .table-wrapper table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.8rem;
+    }
+    .table-wrapper thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .table-wrapper th {
+      background: #3a3d8f;
+      color: white;
+      font-weight: 600;
+      padding: 0.5rem 0.75rem;
+      text-align: left;
+      white-space: nowrap;
+      border-bottom: 2px solid var(--om-color-primary);
+    }
+    .table-wrapper td {
+      padding: 0.4rem 0.75rem;
+      border-bottom: 1px solid #eee;
+      max-width: 300px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .table-wrapper tr:nth-child(even) { background: var(--om-color-surface); }
+    .table-wrapper tr:hover { background: #eef0ff; }
+
+    .cell-null {
+      color: #999;
+      font-style: italic;
+    }
+    .cell-object {
+      color: var(--om-color-primary-light);
+      font-family: var(--om-font-mono);
+      font-size: 0.75rem;
+    }
+
+    .placeholder {
+      padding: 3rem 1rem;
+      text-align: center;
+      color: var(--om-color-text-muted);
+      font-size: 0.9rem;
+    }
+
+    /* Explorer Section */
+    .explorer-top {
+      display: flex;
+      gap: 1rem;
+      padding: 0.75rem 1rem;
+    }
+    .explorer-controls-col {
+      width: 240px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    .explorer-control-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+    .explorer-control-group label {
+      font-size: 0.8rem;
+      font-weight: 500;
+      color: var(--om-color-text-muted);
+    }
+    .explorer-control-group select {
+      font-family: var(--om-font-body);
+      font-size: 0.8rem;
+      padding: 0.35rem 0.5rem;
+      border: 1px solid var(--om-color-border);
+      border-radius: 4px;
+      background: white;
+      width: 100%;
+    }
+    .type-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      font-size: 0.8rem;
+      border: 1px solid var(--om-color-border);
+      border-radius: 4px;
+      padding: 0.35rem 0.5rem;
+      background: white;
+    }
+    .type-theme-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.15rem 0.5rem;
+      padding: 0.1rem 0;
+      border-bottom: 1px solid #f0f0f0;
+    }
+    .type-theme-row:last-child {
+      border-bottom: none;
+    }
+    .type-theme-label {
+      font-size: 0.65rem;
+      font-weight: 600;
+      color: var(--om-color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      width: 100%;
+    }
+    .type-checkbox-group label {
+      display: flex;
+      align-items: center;
+      gap: 0.2rem;
+      cursor: pointer;
+      font-weight: 400;
+      padding-left: 0.25rem;
+    }
+    .explorer-bbox-inputs {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+    .bbox-compact {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.25rem;
+    }
+    .bbox-field {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    .bbox-field label {
+      font-size: 0.7rem;
+      font-weight: 600;
+      color: var(--om-color-text-muted);
+      width: 1rem;
+      text-align: right;
+      flex-shrink: 0;
+    }
+    .bbox-field input {
+      width: 100%;
+      font-family: var(--om-font-mono);
+      font-size: 0.7rem;
+      padding: 0.2rem 0.3rem;
+      border: 1px solid var(--om-color-border);
+      border-radius: 4px;
+      text-align: center;
+    }
+    .bbox-buttons {
+      display: flex;
+      gap: 0.35rem;
+    }
+    .bbox-buttons .btn {
+      flex: 1;
+      font-size: 0.75rem;
+      padding: 0.2rem 0.5rem;
+    }
+    #explorer-map {
+      flex: 1;
+      min-height: 350px;
+      border: 1px solid var(--om-color-border);
+      border-radius: 6px;
+      z-index: 1;
+    }
+    #file-list {
+      overflow-y: auto;
+      max-height: 400px;
+    }
+    .cache-run-btn {
+      flex-shrink: 0;
+      font-size: 0.75rem !important;
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 1rem;
+      font-size: 0.8rem;
+      color: var(--om-color-text-muted);
+    }
+    footer a {
+      color: var(--om-link-color);
+      text-decoration: none;
+    }
+    footer a:hover { text-decoration: underline; }
+
+    /* Responsive */
+    @media (max-width: 640px) {
+      header { flex-direction: column; text-align: center; }
+      header .logo { height: 36px; }
+      header h1 { font-size: 1.2rem; }
+      .controls-row { flex-direction: column; align-items: stretch; }
+      .controls-row .hint { margin-left: 0; text-align: center; }
+      .explorer-top { flex-direction: column; }
+      .explorer-controls-col { width: 100%; }
+      #explorer-map { min-height: 300px; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Loading Overlay -->
+  <div id="loading-overlay">
+    <div class="spinner"></div>
+    <p>Initializing DuckDB-WASM...</p>
+    <p style="font-size: 0.85rem; margin-top: 0.5rem; color: #999;">This may download ~30 MB on first visit</p>
+    <div id="loading-error" class="error-msg" style="display:none;"></div>
+  </div>
+
+  <div class="container">
+    <!-- Header -->
+    <header>
+      <img src="img/omf_logo.png" alt="Overture Maps Foundation" class="logo">
+      <div>
+        <h1>Overture Maps DuckDB Sandbox</h1>
+        <p class="subtitle">Query Overture Maps GeoParquet data directly in your browser</p>
+      </div>
+    </header>
+
+    <!-- Status Bar -->
+    <div id="status-bar">
+      <div class="status-item">
+        <span id="duckdb-dot" class="status-dot loading"></span>
+        <span id="duckdb-status">Initializing...</span>
+      </div>
+      <div class="status-item" id="release-item" style="display:none;">
+        <span id="release-dot" class="status-dot loading"></span>
+        <span id="release-status">Fetching release...</span>
+      </div>
+    </div>
+
+    <!-- Box 1: Setup (collapsed by default, auto-runs on load) -->
+    <div class="query-section" id="setup-section">
+      <details>
+        <summary class="section-header" style="cursor: pointer; list-style: none;">
+          <span class="section-chevron">&#9654;</span>
+          <span>1. Setup</span>
+        </summary>
+        <div class="editor-wrapper">
+          <textarea id="setup-editor" class="sql-editor" spellcheck="false">-- Install and load extensions
+INSTALL spatial;
+LOAD spatial;
+INSTALL httpfs;
+LOAD httpfs;
+
+-- Configure S3 access (public, unsigned requests)
+SET s3_region = 'us-west-2';
+
+-- Cache parquet footers and HTTP metadata between queries
+SET parquet_metadata_cache = true;
+SET enable_http_metadata_cache = true;
+SET enable_object_cache = true;
+SET http_keep_alive = true;
+SET unsafe_disable_etag_checks = true;
+
+-- Get the latest Overture release version from the STAC catalog
+SET VARIABLE overture_release = (
+    SELECT latest
+    FROM read_json_auto('https://stac.overturemaps.org/catalog.json')
+);
+
+-- Load the STAC collections index (file locations + bounding boxes)
+CREATE TABLE IF NOT EXISTS overture_collections AS
+SELECT * FROM read_parquet(
+    'https://stac.overturemaps.org/' || getvariable('overture_release') || '/collections.parquet'
+);</textarea>
+        </div>
+        <div class="controls-row">
+          <button id="btn-setup" class="btn btn-primary" disabled>Run Setup</button>
+        </div>
+        <div id="setup-error" class="error-box hidden"></div>
+      </details>
+    </div>
+
+    <!-- Box 2: Explorer -->
+    <div class="query-section" id="explorer-section">
+      <details open>
+        <summary class="section-header" style="cursor:pointer;list-style:none;">
+          <span class="section-chevron">&#9654;</span>
+          <span>2. Spatial Extent</span>
+        </summary>
+      <!-- Top row: controls left, map right -->
+      <div class="explorer-top">
+        <!-- Left column: selectors + bbox inputs -->
+        <div class="explorer-controls-col">
+          <div class="explorer-control-group">
+            <label>Types:</label>
+            <div id="type-checkboxes" class="type-checkbox-group">
+              <div class="type-theme-row">
+                <span class="type-theme-label">places</span>
+                <label><input type="checkbox" value="place" checked> place</label>
+              </div>
+              <div class="type-theme-row">
+                <span class="type-theme-label">buildings</span>
+                <label><input type="checkbox" value="building"> building</label>
+                <label><input type="checkbox" value="building_part"> building_part</label>
+              </div>
+              <div class="type-theme-row">
+                <span class="type-theme-label">addresses</span>
+                <label><input type="checkbox" value="address"> address</label>
+              </div>
+              <div class="type-theme-row">
+                <span class="type-theme-label">transport</span>
+                <label><input type="checkbox" value="segment"> segment</label>
+                <label><input type="checkbox" value="connector"> connector</label>
+              </div>
+              <div class="type-theme-row">
+                <span class="type-theme-label">divisions</span>
+                <label><input type="checkbox" value="division"> division</label>
+                <label><input type="checkbox" value="division_area"> division_area</label>
+                <label><input type="checkbox" value="division_boundary"> division_boundary</label>
+              </div>
+              <div class="type-theme-row">
+                <span class="type-theme-label">base</span>
+                <label><input type="checkbox" value="bathymetry"> bathymetry</label>
+                <label><input type="checkbox" value="infrastructure"> infrastructure</label>
+                <label><input type="checkbox" value="land"> land</label>
+                <label><input type="checkbox" value="land_cover"> land_cover</label>
+                <label><input type="checkbox" value="land_use"> land_use</label>
+                <label><input type="checkbox" value="water"> water</label>
+              </div>
+            </div>
+          </div>
+          <div class="explorer-control-group">
+            <label for="bbox-select">Bbox:</label>
+            <select id="bbox-select">
+              <option value="">No filter (show all files)</option>
+              <option value="salt-lake-city">Salt Lake City</option>
+              <option value="new-york">New York</option>
+              <option value="london">London</option>
+              <option value="tokyo">Tokyo</option>
+              <option value="sao-paulo">São Paulo</option>
+              <option value="sydney">Sydney</option>
+              <option value="custom">Custom...</option>
+            </select>
+          </div>
+          <div class="explorer-bbox-inputs">
+            <div class="bbox-compact">
+              <div class="bbox-field"><label>N</label><input type="number" id="bbox-north" placeholder="lat" min="-90" max="90" step="any"></div>
+              <div class="bbox-field"><label>S</label><input type="number" id="bbox-south" placeholder="lat" min="-90" max="90" step="any"></div>
+              <div class="bbox-field"><label>W</label><input type="number" id="bbox-west" placeholder="lon" min="-180" max="180" step="any"></div>
+              <div class="bbox-field"><label>E</label><input type="number" id="bbox-east" placeholder="lon" min="-180" max="180" step="any"></div>
+            </div>
+            <div class="bbox-buttons">
+              <button id="btn-apply-custom-bbox" class="btn btn-primary">Apply</button>
+              <button id="btn-clear-custom-bbox" class="btn btn-primary">Clear</button>
+            </div>
+          </div>
+        </div>
+        <!-- Right column: map -->
+        <div id="explorer-map"></div>
+      </div>
+
+      <!-- Partition table (full width, below) -->
+      <div id="file-list" style="padding: 0 1rem 0.75rem;"></div>
+
+      </details>
+    </div>
+
+    <!-- Box 3: Query -->
+    <div class="query-section" id="query-section">
+      <details open>
+        <summary class="section-header" style="cursor:pointer;list-style:none;">
+          <span class="section-chevron">&#9654;</span>
+          <span>3. Query Overture Data</span>
+        </summary>
+      <p class="section-desc">
+        The <span style="border-left:3px solid #e65100;padding-left:0.3em;">FROM/WHERE</span> clause is generated by the Explorer. Uncheck "Include FROM/WHERE" to write your own query from scratch.
+      </p>
+      <div class="editor-wrapper">
+        <div class="query-zones">
+          <textarea id="query-select" class="sql-editor sql-zone-editable"
+                    spellcheck="false" rows="1">SELECT *</textarea>
+          <textarea id="query-from-where" class="sql-zone-locked"
+                    spellcheck="false">-- Select a type and bounding box in the Explorer above</textarea>
+          <textarea id="query-extras" class="sql-editor sql-zone-editable"
+                    spellcheck="false" rows="1">LIMIT 100</textarea>
+        </div>
+      </div>
+      <div class="controls-row">
+        <button id="btn-query" class="btn btn-primary" disabled>Run Query</button>
+        <label><input type="checkbox" id="from-where-enabled" checked> Include FROM/WHERE</label>
+        <span class="hint">Ctrl+Enter to run</span>
+      </div>
+      <div id="query-error" class="error-box hidden"></div>
+      </details>
+    </div>
+
+    <!-- Results -->
+    <div id="results-section">
+      <details open>
+        <summary class="section-header" style="cursor:pointer;list-style:none;">
+          <span class="section-chevron">&#9654;</span>
+          <span>Results</span>
+          <span class="results-meta" id="results-meta"></span>
+        </summary>
+      <div id="results-container">
+        <p class="placeholder">Run a query to see results here.</p>
+      </div>
+      </details>
+    </div>
+
+    <!-- Footer -->
+    <footer>
+      <a href="https://docs.overturemaps.org" target="_blank">Overture Maps Docs</a>
+      &middot;
+      <a href="https://duckdb.org/docs" target="_blank">DuckDB Docs</a>
+      &middot;
+      <a href="https://github.com/OvertureMaps" target="_blank">GitHub</a>
+    </footer>
+  </div>
+
+  <!-- JavaScript -->
+  <!-- Leaflet (must load before explorer.js) -->
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+
+  <!-- Sandbox core logic (classic script, sets up event handlers and exposes globals) -->
+  <script src="js/sandbox.js"></script>
+
+  <!-- Explorer (classic script, uses Leaflet and window.duckdbConn) -->
+  <script src="js/explorer.js"></script>
+
+  <!-- DuckDB-WASM initialization (module script for importmap support) -->
+  <script type="importmap">
+    {
+      "imports": {
+        "@duckdb/duckdb-wasm": "https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm/+esm",
+        "apache-arrow": "https://cdn.jsdelivr.net/npm/apache-arrow/+esm"
+      }
+    }
+  </script>
+  <script type="module">
+    import * as duckdb from '@duckdb/duckdb-wasm';
+
+    const loadingOverlay = document.getElementById('loading-overlay');
+    const loadingError = document.getElementById('loading-error');
+    const duckdbDot = document.getElementById('duckdb-dot');
+    const duckdbStatus = document.getElementById('duckdb-status');
+    const btnSetup = document.getElementById('btn-setup');
+
+    async function initDuckDB() {
+      try {
+        const tInit = performance.now();
+        console.log('[init] Selecting DuckDB-WASM bundle...');
+        const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+        const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+        console.log(`[init] Bundle selected (${Math.round(performance.now() - tInit)} ms)`);
+
+        const workerUrl = URL.createObjectURL(
+          new Blob([`importScripts("${bundle.mainWorker}");`], { type: 'text/javascript' })
+        );
+
+        const worker = new Worker(workerUrl);
+        const logger = new duckdb.ConsoleLogger();
+        const db = new duckdb.AsyncDuckDB(logger, worker);
+
+        const tInstantiate = performance.now();
+        console.log('[init] Instantiating DuckDB-WASM...');
+        await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+        console.log(`[init] DuckDB ready (${Math.round(performance.now() - tInstantiate)} ms)`);
+        URL.revokeObjectURL(workerUrl);
+
+        // Configure filesystem to enable range request probing via GET
+        // (HEAD returns 200 on S3/CloudFront, so the HEAD probe fails;
+        //  this enables the GET fallback with Range: bytes=0-0 which returns 206)
+        await db.open({
+          path: ':memory:',
+          filesystem: {
+            allowFullHTTPReads: true,
+          },
+        });
+
+        // Expose to window for sandbox.js and explorer.js
+        window.duckdbDB = db;
+
+        // DuckDB is ready
+        duckdbDot.className = 'status-dot ready';
+        duckdbStatus.textContent = 'DuckDB Ready';
+        btnSetup.disabled = false;
+        loadingOverlay.classList.add('hidden');
+
+        // Auto-run setup (defined in sandbox.js)
+        await window.sandboxRunSetup();
+      } catch (err) {
+        duckdbDot.className = 'status-dot error';
+        duckdbStatus.textContent = 'Init failed';
+        loadingError.style.display = 'block';
+        loadingError.textContent = `Failed to initialize DuckDB-WASM: ${err.message}`;
+      }
+    }
+
+    initDuckDB();
+  </script>
+</body>
+</html>