holosphere 2.0.0-alpha7 → 2.0.0-alpha8

package/examples/holosphere-widget.js

@@ -0,0 +1,1242 @@
+/**
+ * HoloSphere Visual Widget
+ *
+ * A floating widget that provides:
+ * - Zoomable H3 hexagon map
+ * - Holonic data explorer
+ * - Real-time data visualization
+ *
+ * Usage:
+ *   <script src="holosphere.min.js"></script>
+ *   <script src="holosphere-widget.js"></script>
+ *   <script>
+ *     HoloSphereWidget.init({ appName: 'my-app' });
+ *   </script>
+ */
+
+(function(global) {
+    'use strict';
+
+    // Widget state
+    let hs = null;
+    let map = null;
+    let currentHolon = null;
+    let currentResolution = 9;
+    let hexagonLayers = {};
+    let selectedHexLayer = null;
+    let isOpen = false;
+    let config = {};
+
+    // H3 resolution to zoom level mapping
+    const resolutionToZoom = {
+        0: 2, 1: 3, 2: 4, 3: 5, 4: 6, 5: 7,
+        6: 8, 7: 9, 8: 10, 9: 11, 10: 12, 11: 13,
+        12: 14, 13: 15, 14: 16, 15: 17
+    };
+
+    const zoomToResolution = Object.fromEntries(
+        Object.entries(resolutionToZoom).map(([k, v]) => [v, parseInt(k)])
+    );
+
+    // Color palette for hexagons
+    const colors = {
+        empty: 'rgba(102, 126, 234, 0.2)',
+        hasData: 'rgba(102, 126, 234, 0.6)',
+        selected: 'rgba(118, 75, 162, 0.8)',
+        hover: 'rgba(102, 126, 234, 0.4)',
+        stroke: '#667eea',
+        strokeSelected: '#764ba2'
+    };
+
+    // Widget HTML template
+    const widgetHTML = `
+        <div id="hs-widget-button" class="hs-widget-button">
+            <svg viewBox="0 0 100 100" width="40" height="40">
+                <polygon points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
+                    fill="none" stroke="currentColor" stroke-width="4"/>
+                <polygon points="50,25 72.5,37.5 72.5,62.5 50,75 27.5,62.5 27.5,37.5"
+                    fill="currentColor" opacity="0.3"/>
+                <circle cx="50" cy="50" r="8" fill="currentColor"/>
+            </svg>
+        </div>
+
+        <div id="hs-widget-modal" class="hs-widget-modal">
+            <div class="hs-widget-container">
+                <div class="hs-widget-header">
+                    <h2>
+                        <svg viewBox="0 0 100 100" width="24" height="24" style="vertical-align: middle; margin-right: 8px;">
+                            <polygon points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
+                                fill="none" stroke="currentColor" stroke-width="6"/>
+                        </svg>
+                        HoloSphere Explorer
+                    </h2>
+                    <button id="hs-close-btn" class="hs-close-btn">&times;</button>
+                </div>
+
+                <div class="hs-widget-body">
+                    <div class="hs-map-panel">
+                        <div id="hs-map"></div>
+                        <div class="hs-map-controls">
+                            <div class="hs-resolution-control">
+                                <label>Resolution: <span id="hs-resolution-value">9</span></label>
+                                <input type="range" id="hs-resolution-slider" min="0" max="15" value="9">
+                            </div>
+                            <div class="hs-coords-display" id="hs-coords">
+                                Click map to select holon
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="hs-explorer-panel">
+                        <div class="hs-tabs">
+                            <button class="hs-tab active" data-tab="data">Data</button>
+                            <button class="hs-tab" data-tab="hierarchy">Hierarchy</button>
+                            <button class="hs-tab" data-tab="lenses">Lenses</button>
+                        </div>
+
+                        <div class="hs-tab-content active" id="hs-tab-data">
+                            <div class="hs-holon-info">
+                                <div class="hs-holon-id" id="hs-current-holon">No holon selected</div>
+                            </div>
+                            <div class="hs-lens-selector">
+                                <select id="hs-lens-select">
+                                    <option value="">Select lens...</option>
+                                </select>
+                                <button id="hs-add-lens-btn" class="hs-btn-small">+ Add Lens</button>
+                            </div>
+                            <div class="hs-data-list" id="hs-data-list">
+                                <div class="hs-empty-state">Select a holon on the map to view data</div>
+                            </div>
+                            <div class="hs-data-actions">
+                                <button id="hs-write-btn" class="hs-btn" disabled>Write Data</button>
+                            </div>
+                        </div>
+
+                        <div class="hs-tab-content" id="hs-tab-hierarchy">
+                            <div class="hs-hierarchy-view" id="hs-hierarchy">
+                                <div class="hs-empty-state">Select a holon to explore hierarchy</div>
+                            </div>
+                        </div>
+
+                        <div class="hs-tab-content" id="hs-tab-lenses">
+                            <div class="hs-lenses-list" id="hs-lenses-list">
+                                <div class="hs-empty-state">Select a holon to view available lenses</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="hs-widget-footer">
+                    <span class="hs-status" id="hs-status">
+                        <span class="hs-status-dot"></span>
+                        <span id="hs-status-text">Initializing...</span>
+                    </span>
+                    <span class="hs-metrics" id="hs-metrics"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Write Data Modal -->
+        <div id="hs-write-modal" class="hs-write-modal">
+            <div class="hs-write-container">
+                <h3>Write Data to Holon</h3>
+                <div class="hs-form-group">
+                    <label>Holon ID</label>
+                    <input type="text" id="hs-write-holon" readonly>
+                </div>
+                <div class="hs-form-group">
+                    <label>Lens</label>
+                    <input type="text" id="hs-write-lens" placeholder="e.g., events, notes, places">
+                </div>
+                <div class="hs-form-group">
+                    <label>Data (JSON)</label>
+                    <textarea id="hs-write-data" placeholder='{"title": "My Data", "description": "..."}'></textarea>
+                </div>
+                <div class="hs-form-actions">
+                    <button id="hs-write-cancel" class="hs-btn-secondary">Cancel</button>
+                    <button id="hs-write-submit" class="hs-btn">Write</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Widget CSS
+    const widgetCSS = `
+        .hs-widget-button {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
+            transition: transform 0.3s, box-shadow 0.3s;
+            z-index: 999998;
+        }
+        .hs-widget-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 30px rgba(102, 126, 234, 0.7);
+        }
+        .hs-widget-button.active {
+            transform: rotate(30deg);
+        }
+
+        .hs-widget-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 999999;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .hs-widget-modal.open {
+            display: flex;
+            opacity: 1;
+        }
+
+        .hs-widget-container {
+            width: 95%;
+            max-width: 1200px;
+            height: 85vh;
+            background: white;
+            border-radius: 16px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            transform: translateY(20px);
+            transition: transform 0.3s;
+        }
+        .hs-widget-modal.open .hs-widget-container {
+            transform: translateY(0);
+        }
+
+        .hs-widget-header {
+            padding: 16px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .hs-widget-header h2 {
+            margin: 0;
+            font-size: 1.3em;
+            font-weight: 600;
+        }
+        .hs-close-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 28px;
+            cursor: pointer;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            transition: background 0.2s;
+        }
+        .hs-close-btn:hover {
+            background: rgba(255,255,255,0.2);
+        }
+
+        .hs-widget-body {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .hs-map-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #e0e0e0;
+        }
+        #hs-map {
+            flex: 1;
+            min-height: 300px;
+        }
+        .hs-map-controls {
+            padding: 12px 16px;
+            background: #f8f9fa;
+            border-top: 1px solid #e0e0e0;
+        }
+        .hs-resolution-control {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 8px;
+        }
+        .hs-resolution-control label {
+            font-size: 13px;
+            color: #666;
+            min-width: 100px;
+        }
+        .hs-resolution-control input[type="range"] {
+            flex: 1;
+            accent-color: #667eea;
+        }
+        .hs-coords-display {
+            font-family: monospace;
+            font-size: 12px;
+            color: #666;
+            padding: 8px;
+            background: white;
+            border-radius: 4px;
+            border: 1px solid #e0e0e0;
+        }
+
+        .hs-explorer-panel {
+            width: 400px;
+            display: flex;
+            flex-direction: column;
+            background: #fafafa;
+        }
+        .hs-tabs {
+            display: flex;
+            background: white;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .hs-tab {
+            flex: 1;
+            padding: 12px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            color: #666;
+            border-bottom: 2px solid transparent;
+            transition: all 0.2s;
+        }
+        .hs-tab:hover {
+            color: #667eea;
+        }
+        .hs-tab.active {
+            color: #667eea;
+            border-bottom-color: #667eea;
+        }
+
+        .hs-tab-content {
+            display: none;
+            flex: 1;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .hs-tab-content.active {
+            display: flex;
+        }
+
+        .hs-holon-info {
+            padding: 12px 16px;
+            background: white;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .hs-holon-id {
+            font-family: monospace;
+            font-size: 13px;
+            color: #333;
+            word-break: break-all;
+            padding: 8px;
+            background: #f0f0f0;
+            border-radius: 4px;
+        }
+
+        .hs-lens-selector {
+            padding: 12px 16px;
+            display: flex;
+            gap: 8px;
+            background: white;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .hs-lens-selector select {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+        .hs-btn-small {
+            padding: 8px 12px;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            white-space: nowrap;
+        }
+        .hs-btn-small:hover {
+            background: #5a6fd6;
+        }
+
+        .hs-data-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 12px 16px;
+        }
+        .hs-data-item {
+            background: white;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 8px;
+            border: 1px solid #e0e0e0;
+            cursor: pointer;
+            transition: border-color 0.2s;
+        }
+        .hs-data-item:hover {
+            border-color: #667eea;
+        }
+        .hs-data-item-title {
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 4px;
+        }
+        .hs-data-item-meta {
+            font-size: 11px;
+            color: #999;
+        }
+        .hs-data-item-preview {
+            font-size: 12px;
+            color: #666;
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid #f0f0f0;
+            max-height: 60px;
+            overflow: hidden;
+        }
+
+        .hs-empty-state {
+            text-align: center;
+            color: #999;
+            padding: 40px 20px;
+            font-size: 14px;
+        }
+
+        .hs-data-actions {
+            padding: 12px 16px;
+            background: white;
+            border-top: 1px solid #e0e0e0;
+        }
+        .hs-btn {
+            width: 100%;
+            padding: 12px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: opacity 0.2s;
+        }
+        .hs-btn:hover:not(:disabled) {
+            opacity: 0.9;
+        }
+        .hs-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .hs-btn-secondary {
+            background: #6c757d;
+        }
+
+        .hs-hierarchy-view {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+        }
+        .hs-hierarchy-item {
+            padding: 10px 12px;
+            margin: 4px 0;
+            background: white;
+            border-radius: 6px;
+            border: 1px solid #e0e0e0;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .hs-hierarchy-item:hover {
+            border-color: #667eea;
+            background: #f8f9ff;
+        }
+        .hs-hierarchy-item.current {
+            border-color: #764ba2;
+            background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
+        }
+        .hs-hierarchy-item .resolution {
+            font-size: 10px;
+            background: #667eea;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 10px;
+        }
+        .hs-hierarchy-item .holon-id {
+            font-family: monospace;
+            font-size: 12px;
+            color: #666;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .hs-hierarchy-item .data-count {
+            font-size: 11px;
+            color: #999;
+        }
+        .hs-hierarchy-section {
+            margin-bottom: 16px;
+        }
+        .hs-hierarchy-section-title {
+            font-size: 11px;
+            text-transform: uppercase;
+            color: #999;
+            margin-bottom: 8px;
+            padding-left: 4px;
+        }
+
+        .hs-lenses-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+        }
+        .hs-lens-item {
+            background: white;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 8px;
+            border: 1px solid #e0e0e0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .hs-lens-name {
+            font-weight: 500;
+            color: #333;
+        }
+        .hs-lens-count {
+            font-size: 12px;
+            color: #999;
+        }
+
+        .hs-widget-footer {
+            padding: 12px 24px;
+            background: #f8f9fa;
+            border-top: 1px solid #e0e0e0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+        }
+        .hs-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .hs-status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #ffc107;
+        }
+        .hs-status-dot.connected {
+            background: #28a745;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .hs-metrics {
+            color: #666;
+        }
+
+        /* Write Modal */
+        .hs-write-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000000;
+        }
+        .hs-write-modal.open {
+            display: flex;
+        }
+        .hs-write-container {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            width: 90%;
+            max-width: 500px;
+        }
+        .hs-write-container h3 {
+            margin: 0 0 20px;
+            color: #333;
+        }
+        .hs-form-group {
+            margin-bottom: 16px;
+        }
+        .hs-form-group label {
+            display: block;
+            font-size: 13px;
+            color: #666;
+            margin-bottom: 6px;
+        }
+        .hs-form-group input,
+        .hs-form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            box-sizing: border-box;
+        }
+        .hs-form-group textarea {
+            min-height: 120px;
+            font-family: monospace;
+            resize: vertical;
+        }
+        .hs-form-group input:focus,
+        .hs-form-group textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .hs-form-actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 20px;
+        }
+        .hs-form-actions button {
+            flex: 1;
+        }
+
+        /* Responsive */
+        @media (max-width: 900px) {
+            .hs-widget-body {
+                flex-direction: column;
+            }
+            .hs-explorer-panel {
+                width: 100%;
+                height: 50%;
+            }
+            .hs-map-panel {
+                border-right: none;
+                border-bottom: 1px solid #e0e0e0;
+            }
+        }
+    `;
+
+    // Initialize widget
+    function init(options = {}) {
+        config = Object.assign({
+            appName: 'holosphere-widget',
+            relays: [],
+            position: 'bottom-right',
+            theme: 'default',
+            defaultLocation: [37.7749, -122.4194],
+            defaultResolution: 9
+        }, options);
+
+        currentResolution = config.defaultResolution;
+
+        // Inject styles
+        const style = document.createElement('style');
+        style.textContent = widgetCSS;
+        document.head.appendChild(style);
+
+        // Inject Leaflet CSS if not present
+        if (!document.querySelector('link[href*="leaflet"]')) {
+            const leafletCSS = document.createElement('link');
+            leafletCSS.rel = 'stylesheet';
+            leafletCSS.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+            document.head.appendChild(leafletCSS);
+        }
+
+        // Inject Leaflet JS if not present
+        if (!window.L) {
+            const leafletJS = document.createElement('script');
+            leafletJS.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
+            leafletJS.onload = () => setupWidget();
+            document.body.appendChild(leafletJS);
+        } else {
+            setupWidget();
+        }
+    }
+
+    function setupWidget() {
+        // Inject HTML
+        const container = document.createElement('div');
+        container.id = 'hs-widget-root';
+        container.innerHTML = widgetHTML;
+        document.body.appendChild(container);
+
+        // Initialize HoloSphere
+        if (typeof HoloSphere === 'undefined') {
+            console.error('HoloSphere not found. Include holosphere.min.js before the widget.');
+            return;
+        }
+
+        hs = new HoloSphere({
+            appName: config.appName,
+            relays: config.relays
+        });
+
+        // Store globally for debugging
+        window.hsWidget = { hs, map, config };
+
+        // Setup event listeners
+        setupEventListeners();
+
+        // Initialize map
+        initMap();
+
+        // Update status
+        updateStatus('connected', 'Ready');
+    }
+
+    function setupEventListeners() {
+        // Toggle button
+        document.getElementById('hs-widget-button').addEventListener('click', toggleModal);
+
+        // Close button
+        document.getElementById('hs-close-btn').addEventListener('click', closeModal);
+
+        // Close on backdrop click
+        document.getElementById('hs-widget-modal').addEventListener('click', (e) => {
+            if (e.target.id === 'hs-widget-modal') closeModal();
+        });
+
+        // Resolution slider
+        document.getElementById('hs-resolution-slider').addEventListener('input', (e) => {
+            currentResolution = parseInt(e.target.value);
+            document.getElementById('hs-resolution-value').textContent = currentResolution;
+            if (currentHolon) {
+                const center = map.getCenter();
+                selectHolonAt(center.lat, center.lng);
+            }
+        });
+
+        // Tabs
+        document.querySelectorAll('.hs-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.hs-tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.hs-tab-content').forEach(c => c.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(`hs-tab-${tab.dataset.tab}`).classList.add('active');
+            });
+        });
+
+        // Lens selector
+        document.getElementById('hs-lens-select').addEventListener('change', loadLensData);
+
+        // Add lens button
+        document.getElementById('hs-add-lens-btn').addEventListener('click', () => {
+            const lens = prompt('Enter new lens name:');
+            if (lens) {
+                addLensOption(lens);
+                document.getElementById('hs-lens-select').value = lens;
+                loadLensData();
+            }
+        });
+
+        // Write button
+        document.getElementById('hs-write-btn').addEventListener('click', openWriteModal);
+        document.getElementById('hs-write-cancel').addEventListener('click', closeWriteModal);
+        document.getElementById('hs-write-submit').addEventListener('click', submitWriteData);
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && isOpen) closeModal();
+        });
+    }
+
+    function initMap() {
+        map = L.map('hs-map').setView(config.defaultLocation, resolutionToZoom[currentResolution]);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Click handler
+        map.on('click', (e) => {
+            selectHolonAt(e.latlng.lat, e.latlng.lng);
+        });
+
+        // Zoom handler
+        map.on('zoomend', () => {
+            const zoom = map.getZoom();
+            const newRes = getResolutionForZoom(zoom);
+            if (newRes !== currentResolution) {
+                currentResolution = newRes;
+                document.getElementById('hs-resolution-slider').value = newRes;
+                document.getElementById('hs-resolution-value').textContent = newRes;
+                if (currentHolon) {
+                    const center = map.getCenter();
+                    selectHolonAt(center.lat, center.lng);
+                }
+            }
+        });
+
+        // Mousemove for coordinates
+        map.on('mousemove', (e) => {
+            const lat = e.latlng.lat.toFixed(6);
+            const lng = e.latlng.lng.toFixed(6);
+            document.getElementById('hs-coords').innerHTML =
+                `Lat: ${lat}, Lng: ${lng} | Resolution: ${currentResolution}`;
+        });
+    }
+
+    function getResolutionForZoom(zoom) {
+        // Find closest resolution for zoom level
+        let closest = 9;
+        let minDiff = Infinity;
+        for (const [res, z] of Object.entries(resolutionToZoom)) {
+            const diff = Math.abs(z - zoom);
+            if (diff < minDiff) {
+                minDiff = diff;
+                closest = parseInt(res);
+            }
+        }
+        return Math.min(15, Math.max(0, closest));
+    }
+
+    async function selectHolonAt(lat, lng) {
+        try {
+            const holon = await hs.toHolon(lat, lng, currentResolution);
+            currentHolon = holon;
+
+            // Update UI
+            document.getElementById('hs-current-holon').textContent = holon;
+            document.getElementById('hs-write-btn').disabled = false;
+
+            // Draw hexagon on map
+            await drawHexagon(holon);
+
+            // Load hierarchy
+            await loadHierarchy(holon);
+
+            // Load available lenses
+            await loadLenses(holon);
+
+            // Update coordinates display
+            document.getElementById('hs-coords').innerHTML =
+                `<strong>Holon:</strong> ${holon.substring(0, 12)}... | Resolution: ${currentResolution}`;
+
+        } catch (error) {
+            console.error('Error selecting holon:', error);
+            updateStatus('error', error.message);
+        }
+    }
+
+    async function drawHexagon(holon) {
+        // Remove previous selection
+        if (selectedHexLayer) {
+            map.removeLayer(selectedHexLayer);
+        }
+
+        // Get hexagon boundary using h3-js
+        // The HoloSphere CDN bundle exposes h3 as window.h3
+        try {
+            const h3 = window.h3;
+
+            if (h3 && h3.cellToBoundary) {
+                const boundary = h3.cellToBoundary(holon);
+                const latLngs = boundary.map(([lat, lng]) => [lat, lng]);
+
+                selectedHexLayer = L.polygon(latLngs, {
+                    color: colors.strokeSelected,
+                    weight: 3,
+                    fillColor: colors.selected,
+                    fillOpacity: 0.5
+                }).addTo(map);
+
+                // Add popup with holon info
+                selectedHexLayer.bindPopup(`
+                    <strong>Holon:</strong> ${holon}<br>
+                    <strong>Resolution:</strong> ${h3.getResolution(holon)}<br>
+                    <strong>Area:</strong> ${(h3.cellArea(holon, 'km2')).toFixed(2)} km&sup2;
+                `);
+
+                // Fit map to hexagon with animation
+                map.fitBounds(selectedHexLayer.getBounds(), {
+                    padding: [50, 50],
+                    animate: true,
+                    duration: 0.5
+                });
+
+                // Also draw neighboring hexagons (ring 1) for context
+                drawNeighborHexagons(holon, 1);
+            } else {
+                // Fallback: draw a circle at the location
+                const center = map.getCenter();
+                selectedHexLayer = L.circleMarker([center.lat, center.lng], {
+                    radius: 20,
+                    color: colors.strokeSelected,
+                    fillColor: colors.selected,
+                    fillOpacity: 0.5
+                }).addTo(map);
+            }
+        } catch (e) {
+            console.warn('Could not draw hexagon boundary:', e);
+        }
+    }
+
+    function drawNeighborHexagons(centerHolon, ring) {
+        // Clear previous neighbor layers
+        Object.values(hexagonLayers).forEach(layer => {
+            if (layer !== selectedHexLayer) map.removeLayer(layer);
+        });
+        hexagonLayers = {};
+
+        const h3 = window.h3;
+        if (!h3 || !h3.gridDisk) return;
+
+        try {
+            const neighbors = h3.gridDisk(centerHolon, ring);
+
+            neighbors.forEach(neighbor => {
+                if (neighbor === centerHolon) return; // Skip center
+
+                const boundary = h3.cellToBoundary(neighbor);
+                const latLngs = boundary.map(([lat, lng]) => [lat, lng]);
+
+                const layer = L.polygon(latLngs, {
+                    color: colors.stroke,
+                    weight: 1,
+                    fillColor: colors.empty,
+                    fillOpacity: 0.3,
+                    className: 'hs-neighbor-hex'
+                }).addTo(map);
+
+                // Make neighbors clickable
+                layer.on('click', () => {
+                    selectHolonAt(...h3.cellToLatLng(neighbor));
+                });
+
+                layer.on('mouseover', () => {
+                    layer.setStyle({ fillColor: colors.hover, fillOpacity: 0.5 });
+                });
+
+                layer.on('mouseout', () => {
+                    layer.setStyle({ fillColor: colors.empty, fillOpacity: 0.3 });
+                });
+
+                hexagonLayers[neighbor] = layer;
+            });
+        } catch (e) {
+            console.warn('Could not draw neighbor hexagons:', e);
+        }
+    }
+
+    async function loadHierarchy(holon) {
+        const container = document.getElementById('hs-hierarchy');
+        container.innerHTML = '<div class="hs-empty-state">Loading hierarchy...</div>';
+
+        try {
+            // Get parents
+            const parents = await hs.getParents(holon, 0);
+
+            // Get children (only if resolution allows)
+            let children = [];
+            const res = await getHolonResolution(holon);
+            if (res < 15) {
+                children = await hs.getChildren(holon);
+            }
+
+            let html = '';
+
+            // Parents section
+            if (parents && parents.length > 0) {
+                html += '<div class="hs-hierarchy-section">';
+                html += '<div class="hs-hierarchy-section-title">Parent Holons (Larger Areas)</div>';
+                for (const parent of parents.reverse()) {
+                    const pRes = await getHolonResolution(parent);
+                    html += `
+                        <div class="hs-hierarchy-item" data-holon="${parent}">
+                            <span class="resolution">${pRes}</span>
+                            <span class="holon-id">${parent}</span>
+                        </div>
+                    `;
+                }
+                html += '</div>';
+            }
+
+            // Current holon
+            html += '<div class="hs-hierarchy-section">';
+            html += '<div class="hs-hierarchy-section-title">Current Holon</div>';
+            html += `
+                <div class="hs-hierarchy-item current">
+                    <span class="resolution">${res}</span>
+                    <span class="holon-id">${holon}</span>
+                </div>
+            `;
+            html += '</div>';
+
+            // Children section
+            if (children && children.length > 0) {
+                html += '<div class="hs-hierarchy-section">';
+                html += '<div class="hs-hierarchy-section-title">Child Holons (Smaller Areas)</div>';
+                const childRes = res + 1;
+                for (const child of children.slice(0, 7)) { // Show first 7
+                    html += `
+                        <div class="hs-hierarchy-item" data-holon="${child}">
+                            <span class="resolution">${childRes}</span>
+                            <span class="holon-id">${child}</span>
+                        </div>
+                    `;
+                }
+                if (children.length > 7) {
+                    html += `<div class="hs-empty-state">+${children.length - 7} more children</div>`;
+                }
+                html += '</div>';
+            }
+
+            container.innerHTML = html;
+
+            // Add click handlers
+            container.querySelectorAll('.hs-hierarchy-item:not(.current)').forEach(item => {
+                item.addEventListener('click', async () => {
+                    const targetHolon = item.dataset.holon;
+                    const targetRes = await getHolonResolution(targetHolon);
+                    currentResolution = targetRes;
+                    document.getElementById('hs-resolution-slider').value = targetRes;
+                    document.getElementById('hs-resolution-value').textContent = targetRes;
+
+                    currentHolon = targetHolon;
+                    document.getElementById('hs-current-holon').textContent = targetHolon;
+
+                    await drawHexagon(targetHolon);
+                    await loadHierarchy(targetHolon);
+                    await loadLenses(targetHolon);
+                });
+            });
+
+        } catch (error) {
+            container.innerHTML = `<div class="hs-empty-state">Error: ${error.message}</div>`;
+        }
+    }
+
+    async function getHolonResolution(holon) {
+        // Get resolution from h3-js (exposed as window.h3 by the CDN bundle)
+        const h3 = window.h3;
+        if (h3 && h3.getResolution) {
+            return h3.getResolution(holon);
+        }
+        // Fallback: estimate from holon ID length (not accurate but works)
+        return Math.min(15, Math.max(0, holon.length - 8));
+    }
+
+    async function loadLenses(holon) {
+        const container = document.getElementById('hs-lenses-list');
+        const select = document.getElementById('hs-lens-select');
+
+        // Default lenses
+        const defaultLenses = ['notes', 'events', 'places', 'resources', 'projects'];
+
+        // Clear and populate select
+        select.innerHTML = '<option value="">Select lens...</option>';
+        defaultLenses.forEach(lens => addLensOption(lens));
+
+        // Update lenses list
+        let html = '';
+        for (const lens of defaultLenses) {
+            try {
+                const data = await hs.getAll(holon, lens);
+                const count = data ? data.length : 0;
+                html += `
+                    <div class="hs-lens-item" data-lens="${lens}">
+                        <span class="hs-lens-name">${lens}</span>
+                        <span class="hs-lens-count">${count} items</span>
+                    </div>
+                `;
+            } catch (e) {
+                html += `
+                    <div class="hs-lens-item" data-lens="${lens}">
+                        <span class="hs-lens-name">${lens}</span>
+                        <span class="hs-lens-count">0 items</span>
+                    </div>
+                `;
+            }
+        }
+
+        container.innerHTML = html || '<div class="hs-empty-state">No data in this holon</div>';
+
+        // Click handlers
+        container.querySelectorAll('.hs-lens-item').forEach(item => {
+            item.addEventListener('click', () => {
+                select.value = item.dataset.lens;
+                loadLensData();
+                document.querySelector('.hs-tab[data-tab="data"]').click();
+            });
+        });
+    }
+
+    function addLensOption(lens) {
+        const select = document.getElementById('hs-lens-select');
+        if (!select.querySelector(`option[value="${lens}"]`)) {
+            const option = document.createElement('option');
+            option.value = lens;
+            option.textContent = lens;
+            select.appendChild(option);
+        }
+    }
+
+    async function loadLensData() {
+        const lens = document.getElementById('hs-lens-select').value;
+        const container = document.getElementById('hs-data-list');
+
+        if (!lens || !currentHolon) {
+            container.innerHTML = '<div class="hs-empty-state">Select a lens to view data</div>';
+            return;
+        }
+
+        container.innerHTML = '<div class="hs-empty-state">Loading...</div>';
+
+        try {
+            const data = await hs.getAll(currentHolon, lens);
+
+            if (!data || data.length === 0) {
+                container.innerHTML = '<div class="hs-empty-state">No data in this lens</div>';
+                return;
+            }
+
+            let html = '';
+            for (const item of data) {
+                const title = item.title || item.name || item.id || 'Untitled';
+                const preview = JSON.stringify(item, null, 2).substring(0, 150);
+                const meta = item._meta ? new Date(item._meta.timestamp).toLocaleString() : '';
+
+                html += `
+                    <div class="hs-data-item" data-id="${item.id}">
+                        <div class="hs-data-item-title">${escapeHtml(title)}</div>
+                        <div class="hs-data-item-meta">${meta}</div>
+                        <div class="hs-data-item-preview"><code>${escapeHtml(preview)}...</code></div>
+                    </div>
+                `;
+            }
+
+            container.innerHTML = html;
+
+            // Click handlers
+            container.querySelectorAll('.hs-data-item').forEach(item => {
+                item.addEventListener('click', () => {
+                    const id = item.dataset.id;
+                    const dataItem = data.find(d => d.id === id);
+                    if (dataItem) {
+                        alert(JSON.stringify(dataItem, null, 2));
+                    }
+                });
+            });
+
+        } catch (error) {
+            container.innerHTML = `<div class="hs-empty-state">Error: ${error.message}</div>`;
+        }
+    }
+
+    function openWriteModal() {
+        document.getElementById('hs-write-holon').value = currentHolon;
+        document.getElementById('hs-write-lens').value = document.getElementById('hs-lens-select').value || '';
+        document.getElementById('hs-write-data').value = '{\n  "title": "",\n  "description": ""\n}';
+        document.getElementById('hs-write-modal').classList.add('open');
+    }
+
+    function closeWriteModal() {
+        document.getElementById('hs-write-modal').classList.remove('open');
+    }
+
+    async function submitWriteData() {
+        const holon = document.getElementById('hs-write-holon').value;
+        const lens = document.getElementById('hs-write-lens').value;
+        const dataStr = document.getElementById('hs-write-data').value;
+
+        if (!holon || !lens) {
+            alert('Please enter holon and lens');
+            return;
+        }
+
+        try {
+            const data = JSON.parse(dataStr);
+            await hs.write(holon, lens, data);
+
+            closeWriteModal();
+            addLensOption(lens);
+            document.getElementById('hs-lens-select').value = lens;
+            loadLensData();
+            loadLenses(holon);
+
+            updateStatus('connected', 'Data written successfully');
+        } catch (error) {
+            alert('Error: ' + error.message);
+        }
+    }
+
+    function toggleModal() {
+        if (isOpen) {
+            closeModal();
+        } else {
+            openModal();
+        }
+    }
+
+    function openModal() {
+        document.getElementById('hs-widget-modal').classList.add('open');
+        document.getElementById('hs-widget-button').classList.add('active');
+        isOpen = true;
+
+        // Trigger map resize after modal opens
+        setTimeout(() => {
+            if (map) map.invalidateSize();
+        }, 300);
+    }
+
+    function closeModal() {
+        document.getElementById('hs-widget-modal').classList.remove('open');
+        document.getElementById('hs-widget-button').classList.remove('active');
+        isOpen = false;
+    }
+
+    function updateStatus(type, message) {
+        const dot = document.querySelector('.hs-status-dot');
+        const text = document.getElementById('hs-status-text');
+
+        dot.classList.remove('connected', 'error');
+        if (type === 'connected') dot.classList.add('connected');
+        text.textContent = message;
+    }
+
+    function escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    // Public API
+    global.HoloSphereWidget = {
+        init,
+        open: openModal,
+        close: closeModal,
+        toggle: toggleModal,
+        selectHolon: selectHolonAt,
+        getHoloSphere: () => hs,
+        getMap: () => map,
+        getCurrentHolon: () => currentHolon
+    };
+
+})(typeof window !== 'undefined' ? window : this);