npm - holosphere - Versions diffs - 1.1.20 → 2.0.0-alpha1 - Mend

holosphere 1.1.20 → 2.0.0-alpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/.env.example +36 -0
package/.eslintrc.json +16 -0
package/.prettierrc.json +7 -0
package/LICENSE +162 -38
package/README.md +483 -367
package/bin/holosphere-activitypub.js +158 -0
package/cleanup-test-data.js +204 -0
package/examples/demo.html +1333 -0
package/examples/example-bot.js +197 -0
package/package.json +47 -87
package/scripts/check-bundle-size.js +54 -0
package/scripts/check-quest-ids.js +77 -0
package/scripts/import-holons.js +578 -0
package/scripts/publish-to-relay.js +101 -0
package/scripts/read-example.js +186 -0
package/scripts/relay-diagnostic.js +59 -0
package/scripts/relay-example.js +179 -0
package/scripts/resync-to-relay.js +245 -0
package/scripts/revert-import.js +196 -0
package/scripts/test-hybrid-mode.js +108 -0
package/scripts/test-local-storage.js +63 -0
package/scripts/test-nostr-direct.js +55 -0
package/scripts/test-read-data.js +45 -0
package/scripts/test-write-read.js +63 -0
package/scripts/verify-import.js +95 -0
package/scripts/verify-relay-data.js +139 -0
package/src/ai/aggregation.js +319 -0
package/src/ai/breakdown.js +511 -0
package/src/ai/classifier.js +217 -0
package/src/ai/council.js +228 -0
package/src/ai/embeddings.js +279 -0
package/src/ai/federation-ai.js +324 -0
package/src/ai/h3-ai.js +955 -0
package/src/ai/index.js +112 -0
package/src/ai/json-ops.js +225 -0
package/src/ai/llm-service.js +205 -0
package/src/ai/nl-query.js +223 -0
package/src/ai/relationships.js +353 -0
package/src/ai/schema-extractor.js +218 -0
package/src/ai/spatial.js +293 -0
package/src/ai/tts.js +194 -0
package/src/content/social-protocols.js +168 -0
package/src/core/holosphere.js +273 -0
package/src/crypto/secp256k1.js +259 -0
package/src/federation/discovery.js +334 -0
package/src/federation/hologram.js +1042 -0
package/src/federation/registry.js +386 -0
package/src/hierarchical/upcast.js +110 -0
package/src/index.js +2669 -0
package/src/schema/validator.js +91 -0
package/src/spatial/h3-operations.js +110 -0
package/src/storage/backend-factory.js +125 -0
package/src/storage/backend-interface.js +142 -0
package/src/storage/backends/activitypub/server.js +653 -0
package/src/storage/backends/activitypub-backend.js +272 -0
package/src/storage/backends/gundb-backend.js +233 -0
package/src/storage/backends/nostr-backend.js +136 -0
package/src/storage/filesystem-storage-browser.js +41 -0
package/src/storage/filesystem-storage.js +138 -0
package/src/storage/global-tables.js +81 -0
package/src/storage/gun-async.js +281 -0
package/src/storage/gun-wrapper.js +221 -0
package/src/storage/indexeddb-storage.js +122 -0
package/src/storage/key-storage-simple.js +76 -0
package/src/storage/key-storage.js +136 -0
package/src/storage/memory-storage.js +59 -0
package/src/storage/migration.js +338 -0
package/src/storage/nostr-async.js +811 -0
package/src/storage/nostr-client.js +939 -0
package/src/storage/nostr-wrapper.js +211 -0
package/src/storage/outbox-queue.js +208 -0
package/src/storage/persistent-storage.js +109 -0
package/src/storage/sync-service.js +164 -0
package/src/subscriptions/manager.js +142 -0
package/test-ai-real-api.js +202 -0
package/tests/unit/ai/aggregation.test.js +295 -0
package/tests/unit/ai/breakdown.test.js +446 -0
package/tests/unit/ai/classifier.test.js +294 -0
package/tests/unit/ai/council.test.js +262 -0
package/tests/unit/ai/embeddings.test.js +384 -0
package/tests/unit/ai/federation-ai.test.js +344 -0
package/tests/unit/ai/h3-ai.test.js +458 -0
package/tests/unit/ai/index.test.js +304 -0
package/tests/unit/ai/json-ops.test.js +307 -0
package/tests/unit/ai/llm-service.test.js +390 -0
package/tests/unit/ai/nl-query.test.js +383 -0
package/tests/unit/ai/relationships.test.js +311 -0
package/tests/unit/ai/schema-extractor.test.js +384 -0
package/tests/unit/ai/spatial.test.js +279 -0
package/tests/unit/ai/tts.test.js +279 -0
package/tests/unit/content.test.js +332 -0
package/tests/unit/contract/core.test.js +88 -0
package/tests/unit/contract/crypto.test.js +198 -0
package/tests/unit/contract/data.test.js +223 -0
package/tests/unit/contract/federation.test.js +181 -0
package/tests/unit/contract/hierarchical.test.js +113 -0
package/tests/unit/contract/schema.test.js +114 -0
package/tests/unit/contract/social.test.js +217 -0
package/tests/unit/contract/spatial.test.js +110 -0
package/tests/unit/contract/subscriptions.test.js +128 -0
package/tests/unit/contract/utils.test.js +159 -0
package/tests/unit/core.test.js +152 -0
package/tests/unit/crypto.test.js +328 -0
package/tests/unit/federation.test.js +234 -0
package/tests/unit/gun-async.test.js +252 -0
package/tests/unit/hierarchical.test.js +399 -0
package/tests/unit/integration/scenario-01-geographic-storage.test.js +74 -0
package/tests/unit/integration/scenario-02-federation.test.js +76 -0
package/tests/unit/integration/scenario-03-subscriptions.test.js +102 -0
package/tests/unit/integration/scenario-04-validation.test.js +129 -0
package/tests/unit/integration/scenario-05-hierarchy.test.js +125 -0
package/tests/unit/integration/scenario-06-social.test.js +135 -0
package/tests/unit/integration/scenario-07-persistence.test.js +130 -0
package/tests/unit/integration/scenario-08-authorization.test.js +161 -0
package/tests/unit/integration/scenario-09-cross-dimensional.test.js +139 -0
package/tests/unit/integration/scenario-10-cross-holosphere-capabilities.test.js +357 -0
package/tests/unit/integration/scenario-11-cross-holosphere-federation.test.js +410 -0
package/tests/unit/integration/scenario-12-capability-federated-read.test.js +719 -0
package/tests/unit/performance/benchmark.test.js +85 -0
package/tests/unit/schema.test.js +213 -0
package/tests/unit/spatial.test.js +158 -0
package/tests/unit/storage.test.js +195 -0
package/tests/unit/subscriptions.test.js +328 -0
package/tests/unit/test-data-permanence-debug.js +197 -0
package/tests/unit/test-data-permanence.js +340 -0
package/tests/unit/test-key-persistence-fixed.js +148 -0
package/tests/unit/test-key-persistence.js +172 -0
package/tests/unit/test-relay-permanence.js +376 -0
package/tests/unit/test-second-node.js +95 -0
package/tests/unit/test-simple-write.js +89 -0
package/vite.config.js +49 -0
package/vitest.config.js +20 -0
package/FEDERATION.md +0 -213
package/compute.js +0 -298
package/content.js +0 -980
package/federation.js +0 -1234
package/global.js +0 -736
package/hexlib.js +0 -335
package/hologram.js +0 -183
package/holosphere-bundle.esm.js +0 -33256
package/holosphere-bundle.js +0 -33287
package/holosphere-bundle.min.js +0 -39
package/holosphere.d.ts +0 -601
package/holosphere.js +0 -719
package/node.js +0 -246
package/schema.js +0 -139
package/utils.js +0 -302

package/examples/demo.html ADDED Viewed

@@ -0,0 +1,1333 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HoloSphere - Interactive Demo</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            line-height: 1.6;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 2.5em;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 1.1em;
+        }
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 30px;
+            border-bottom: 2px solid #e0e0e0;
+            flex-wrap: wrap;
+        }
+        .tab {
+            padding: 12px 24px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: #666;
+            font-size: 1em;
+            transition: all 0.3s;
+            border-bottom: 3px solid transparent;
+            margin-bottom: -2px;
+        }
+        .tab:hover {
+            color: #667eea;
+        }
+        .tab.active {
+            color: #667eea;
+            border-bottom-color: #667eea;
+            font-weight: 600;
+        }
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.5s;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .demo-section {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+        .demo-section h3 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 1.3em;
+        }
+        .demo-section h4 {
+            color: #555;
+            margin-top: 15px;
+            margin-bottom: 10px;
+        }
+        .input-group {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+        }
+        input[type="text"],
+        input[type="number"],
+        textarea,
+        select {
+            padding: 10px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1em;
+            transition: border-color 0.3s;
+            flex: 1;
+            min-width: 200px;
+        }
+        input[type="text"]:focus,
+        input[type="number"]:focus,
+        textarea:focus,
+        select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        textarea {
+            min-height: 100px;
+            resize: vertical;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.9em;
+        }
+        button {
+            padding: 10px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1em;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .output {
+            background: #1e1e1e;
+            color: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.9em;
+            min-height: 100px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .output pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .status {
+            padding: 8px 15px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-weight: 500;
+        }
+        .status.success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        .status.error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        .status.info {
+            background: #d1ecf1;
+            color: #0c5460;
+            border: 1px solid #bee5eb;
+        }
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .feature-card {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .feature-card h4 {
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+        .code-example {
+            background: #2d2d2d;
+            color: #f8f8f2;
+            padding: 15px;
+            border-radius: 8px;
+            margin: 10px 0;
+            overflow-x: auto;
+        }
+        .code-example code {
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.9em;
+        }
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .metric-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .metric-value {
+            font-size: 2em;
+            font-weight: bold;
+            color: #667eea;
+        }
+        .metric-label {
+            color: #666;
+            font-size: 0.9em;
+            margin-top: 5px;
+        }
+        .map-container {
+            height: 400px;
+            border-radius: 8px;
+            overflow: hidden;
+            margin-top: 15px;
+            background: #e0e0e0;
+            position: relative;
+        }
+        #map {
+            width: 100%;
+            height: 100%;
+        }
+        .connection-status {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 5px;
+        }
+        .connection-status.connected {
+            background: #28a745;
+            animation: pulse 2s infinite;
+        }
+        .connection-status.disconnected {
+            background: #dc3545;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
+        }
+        .loader {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            display: inline-block;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+</head>
+<body>
+    <div class="container">
+        <h1>HoloSphere Interactive Demo</h1>
+        <p class="subtitle">Holonic Geospatial Communication Infrastructure - Explore all features interactively</p>
+        <div class="connection-status" id="connectionStatus"></div>
+        <span id="connectionText">Initializing...</span>
+        <div style="margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 10px; display: flex; align-items: center; gap: 15px;">
+            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500;">
+                <input type="checkbox" id="useRealRelays" style="width: 20px; height: 20px; cursor: pointer;">
+                <span>Use Real Nostr Relays (Publish to actual network)</span>
+            </label>
+            <button onclick="toggleRelayMode()" style="padding: 8px 16px;">Apply & Reconnect</button>
+            <span id="relayModeStatus" style="margin-left: auto; font-size: 0.9em; color: #666;"></span>
+        </div>
+        <div class="tabs">
+            <button class="tab active" onclick="showTab('overview')">Overview</button>
+            <button class="tab" onclick="showTab('spatial')">Spatial Operations</button>
+            <button class="tab" onclick="showTab('data')">Data Operations</button>
+            <button class="tab" onclick="showTab('schema')">Schema Validation</button>
+            <button class="tab" onclick="showTab('federation')">Federation</button>
+            <button class="tab" onclick="showTab('social')">Social Protocols</button>
+            <button class="tab" onclick="showTab('crypto')">Cryptography</button>
+            <button class="tab" onclick="showTab('subscriptions')">Subscriptions</button>
+            <button class="tab" onclick="showTab('metrics')">Metrics</button>
+        </div>
+        <!-- Overview Tab -->
+        <div id="overview" class="tab-content active">
+            <div class="demo-section">
+                <h3>Welcome to HoloSphere</h3>
+                <p>HoloSphere is a powerful holonic geospatial communication infrastructure that combines H3 hexagonal indexing with distributed P2P storage.</p>
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>🗺️ Geospatial Indexing</h4>
+                        <p>Uses H3 hexagonal grid system for efficient spatial data organization and querying.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🔗 Federation</h4>
+                        <p>Connect and synchronize data across different holons with flexible federation modes.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>📱 Social Protocols</h4>
+                        <p>Native support for Nostr and ActivityPub social protocols.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🔐 Cryptography</h4>
+                        <p>Built-in secp256k1 cryptography for signing and verification.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>✅ Schema Validation</h4>
+                        <p>JSON Schema validation for ensuring data integrity.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>📊 Real-time Updates</h4>
+                        <p>Subscribe to data changes with real-time notifications.</p>
+                    </div>
+                </div>
+                <h4>Quick Start Example</h4>
+                <div class="code-example">
+                    <code>// Initialize HoloSphere
+const hs = new HoloSphere({
+    appName: 'my-app',
+    relays: ['wss://relay.example.com']
+});
+// Convert coordinates to H3 holon
+const holon = await hs.toHolon(37.7749, -122.4194, 9);
+// Write data to a holon (multiple ways!)
+await hs.write(holon, 'events', { title: 'SF Meetup' });
+await hs.put(holon, 'events', { title: 'SF Meetup' });    // REST-style
+await hs.save(holon, 'events', { title: 'SF Meetup' });   // User-friendly
+// Read data from holon (multiple ways!)
+const events = await hs.read(holon, 'events');
+const events = await hs.get(holon, 'events');             // REST-style
+const events = await hs.load(holon, 'events');            // User-friendly</code>
+                </div>
+                <div class="status info" style="margin-top: 15px;">
+                    <strong>💡 API Aliases Available!</strong><br>
+                    Use <code>put()/get()</code> for REST-style, <code>save()/load()</code> for user-friendly,
+                    or <code>write()/read()</code> for database-style. They all work the same way!
+                    <br>See <a href="API_ALIASES.md" target="_blank">API_ALIASES.md</a> for full details.
+                </div>
+            </div>
+        </div>
+        <!-- Spatial Operations Tab -->
+        <div id="spatial" class="tab-content">
+            <div class="demo-section">
+                <h3>Spatial Operations with H3</h3>
+                <p>Convert geographic coordinates to H3 hexagons and explore their hierarchy.</p>
+                <h4>Convert Coordinates to Holon</h4>
+                <div class="input-group">
+                    <input type="number" id="lat" placeholder="Latitude" value="37.7749" step="0.0001">
+                    <input type="number" id="lng" placeholder="Longitude" value="-122.4194" step="0.0001">
+                    <input type="number" id="resolution" placeholder="Resolution (0-15)" value="9" min="0" max="15">
+                    <button onclick="convertToHolon()">Convert to Holon</button>
+                </div>
+                <div id="holonResult" class="output"></div>
+                <div id="map" class="map-container"></div>
+                <h4>Holon Hierarchy</h4>
+                <div class="input-group">
+                    <input type="text" id="holonId" placeholder="Holon ID (H3 index)">
+                    <button onclick="getParents()">Get Parents</button>
+                    <button onclick="getChildren()">Get Children</button>
+                </div>
+                <div id="hierarchyResult" class="output"></div>
+            </div>
+        </div>
+        <!-- Data Operations Tab -->
+        <div id="data" class="tab-content">
+            <div class="demo-section">
+                <h3>Data Operations</h3>
+                <p>Store, retrieve, update, and delete data in holons using lens-based organization.</p>
+                <h4>Write Data</h4>
+                <div class="input-group">
+                    <input type="text" id="writeHolon" placeholder="Holon ID">
+                    <input type="text" id="writeLens" placeholder="Lens Name" value="demo">
+                </div>
+                <textarea id="writeData" placeholder='Data (JSON format, e.g., {"title": "Test", "value": 123})'>{
+  "title": "Demo Event",
+  "description": "This is a test event",
+  "timestamp": null
+}</textarea>
+                <button onclick="writeData()">Write Data</button>
+                <h4>Read Data</h4>
+                <div class="input-group">
+                    <input type="text" id="readHolon" placeholder="Holon ID">
+                    <input type="text" id="readLens" placeholder="Lens Name" value="demo">
+                    <input type="text" id="readDataId" placeholder="Data ID (optional)">
+                    <button onclick="readData()">Read Data</button>
+                </div>
+                <h4>Update Data</h4>
+                <div class="input-group">
+                    <input type="text" id="updateHolon" placeholder="Holon ID">
+                    <input type="text" id="updateLens" placeholder="Lens Name" value="demo">
+                    <input type="text" id="updateDataId" placeholder="Data ID">
+                </div>
+                <textarea id="updateData" placeholder='Updates (JSON format)'>{
+  "status": "updated"
+}</textarea>
+                <button onclick="updateData()">Update Data</button>
+                <h4>Delete Data</h4>
+                <div class="input-group">
+                    <input type="text" id="deleteHolon" placeholder="Holon ID">
+                    <input type="text" id="deleteLens" placeholder="Lens Name" value="demo">
+                    <input type="text" id="deleteDataId" placeholder="Data ID">
+                    <button onclick="deleteData()">Delete Data</button>
+                </div>
+                <div id="dataResult" class="output"></div>
+            </div>
+        </div>
+        <!-- Schema Validation Tab -->
+        <div id="schema" class="tab-content">
+            <div class="demo-section">
+                <h3>Schema Validation</h3>
+                <p>Define and enforce JSON schemas for data consistency.</p>
+                <h4>Set Schema for Lens</h4>
+                <div class="input-group">
+                    <input type="text" id="schemaLens" placeholder="Lens Name" value="validated">
+                    <label><input type="checkbox" id="strictMode"> Strict Mode</label>
+                </div>
+                <textarea id="schemaDefinition" placeholder="JSON Schema">{
+  "type": "object",
+  "properties": {
+    "title": { "type": "string" },
+    "value": { "type": "number", "minimum": 0 },
+    "tags": { "type": "array", "items": { "type": "string" } }
+  },
+  "required": ["title", "value"]
+}</textarea>
+                <button onclick="setSchema()">Set Schema</button>
+                <h4>Test Validation</h4>
+                <textarea id="testData" placeholder="Test data to validate">{
+  "title": "Test Item",
+  "value": 42,
+  "tags": ["demo", "test"]
+}</textarea>
+                <button onclick="testValidation()">Validate Data</button>
+                <div id="schemaResult" class="output"></div>
+            </div>
+        </div>
+        <!-- Federation Tab -->
+        <div id="federation" class="tab-content">
+            <div class="demo-section">
+                <h3>Federation</h3>
+                <p>Connect holons and synchronize data across them.</p>
+                <h4>Setup Federation</h4>
+                <div class="input-group">
+                    <input type="text" id="sourceHolon" placeholder="Source Holon ID">
+                    <input type="text" id="targetHolon" placeholder="Target Holon ID">
+                    <input type="text" id="federationLens" placeholder="Lens Name" value="federated">
+                </div>
+                <div class="input-group">
+                    <select id="federationDirection">
+                        <option value="bidirectional">Bidirectional</option>
+                        <option value="outbound">Outbound Only</option>
+                        <option value="inbound">Inbound Only</option>
+                    </select>
+                    <select id="federationMode">
+                        <option value="reference">Reference (Hologram)</option>
+                        <option value="copy">Copy</option>
+                    </select>
+                    <button onclick="setupFederation()">Setup Federation</button>
+                </div>
+                <h4>Get Federated Data</h4>
+                <div class="input-group">
+                    <input type="text" id="fedHolon" placeholder="Holon ID">
+                    <input type="text" id="fedLens" placeholder="Lens Name" value="federated">
+                    <label><input type="checkbox" id="resolveHolograms" checked> Resolve Holograms</label>
+                    <button onclick="getFederatedData()">Get Federated Data</button>
+                </div>
+                <div id="federationResult" class="output"></div>
+            </div>
+        </div>
+        <!-- Social Protocols Tab -->
+        <div id="social" class="tab-content">
+            <div class="demo-section">
+                <h3>Social Protocols</h3>
+                <p>Publish and query content using Nostr and ActivityPub protocols.</p>
+                <div id="socialProtocolsBanner" class="status info">
+                    <strong>🌐 Connected to Real Nostr Relays!</strong><br>
+                    Your Nostr events will be published to the real Nostr network and can be seen by others using Nostr clients.
+                </div>
+                <h4>Publish Nostr Event</h4>
+                <div class="input-group">
+                    <input type="text" id="nostrHolon" placeholder="Holon ID">
+                </div>
+                <textarea id="nostrEvent" placeholder="Nostr event (JSON)">{
+  "kind": 1,
+  "created_at": null,
+  "content": "Hello from HoloSphere!",
+  "tags": []
+}</textarea>
+                <button onclick="publishNostr()">Publish Nostr Event</button>
+                <h4>Publish ActivityPub Object</h4>
+                <div class="input-group">
+                    <input type="text" id="apHolon" placeholder="Holon ID">
+                </div>
+                <textarea id="apObject" placeholder="ActivityPub object (JSON)">{
+  "@context": "https://www.w3.org/ns/activitystreams",
+  "type": "Note",
+  "content": "Hello from the Fediverse!",
+  "to": ["https://www.w3.org/ns/activitystreams#Public"]
+}</textarea>
+                <button onclick="publishActivityPub()">Publish ActivityPub</button>
+                <h4>Query Social Data</h4>
+                <div class="input-group">
+                    <input type="text" id="socialHolon" placeholder="Holon ID">
+                    <select id="socialProtocol">
+                        <option value="">All Protocols</option>
+                        <option value="nostr">Nostr Only</option>
+                        <option value="activitypub">ActivityPub Only</option>
+                    </select>
+                    <button onclick="querySocial()">Query Social Data</button>
+                </div>
+                <div id="socialResult" class="output"></div>
+            </div>
+        </div>
+        <!-- Cryptography Tab -->
+        <div id="crypto" class="tab-content">
+            <div class="demo-section">
+                <h3>Cryptography</h3>
+                <p>Sign, verify, and manage capability tokens using secp256k1.</p>
+                <h4>Generate Keys</h4>
+                <button onclick="generateKeys()">Generate New Key Pair</button>
+                <div id="keysResult" class="output"></div>
+                <h4>Sign & Verify</h4>
+                <textarea id="signContent" placeholder="Content to sign">Hello, this is a test message!</textarea>
+                <div class="input-group">
+                    <input type="text" id="privateKey" placeholder="Private Key (hex)">
+                    <button onclick="signContent()">Sign Content</button>
+                </div>
+                <div class="input-group">
+                    <input type="text" id="signature" placeholder="Signature">
+                    <input type="text" id="publicKey" placeholder="Public Key">
+                    <button onclick="verifySignature()">Verify Signature</button>
+                </div>
+                <h4>Capability Tokens</h4>
+                <div class="input-group">
+                    <input type="text" id="capPermissions" placeholder="Permissions (comma-separated)" value="read,write">
+                    <input type="text" id="capScope" placeholder="Scope (JSON)" value='{"holonId": "*", "lensName": "demo"}'>
+                    <input type="text" id="capRecipient" placeholder="Recipient Public Key">
+                    <button onclick="issueCapability()">Issue Capability</button>
+                </div>
+                <div id="cryptoResult" class="output"></div>
+            </div>
+        </div>
+        <!-- Subscriptions Tab -->
+        <div id="subscriptions" class="tab-content">
+            <div class="demo-section">
+                <h3>Real-time Subscriptions</h3>
+                <p>Subscribe to data changes and receive real-time updates.</p>
+                <h4>Create Subscription</h4>
+                <div class="input-group">
+                    <input type="text" id="subHolon" placeholder="Holon ID">
+                    <input type="text" id="subLens" placeholder="Lens Name" value="realtime">
+                    <button onclick="createSubscription()">Subscribe</button>
+                    <button onclick="unsubscribe()" disabled id="unsubBtn">Unsubscribe</button>
+                </div>
+                <h4>Test Real-time Updates</h4>
+                <p>After subscribing, write data to see real-time updates:</p>
+                <div class="input-group">
+                    <input type="text" id="testMessage" placeholder="Test message" value="Real-time test">
+                    <button onclick="sendTestMessage()">Send Test Message</button>
+                </div>
+                <h4>Subscription Events</h4>
+                <div id="subscriptionEvents" class="output"></div>
+            </div>
+        </div>
+        <!-- Metrics Tab -->
+        <div id="metrics" class="tab-content">
+            <div class="demo-section">
+                <h3>Performance Metrics</h3>
+                <p>Monitor HoloSphere performance and usage statistics.</p>
+                <button onclick="refreshMetrics()">Refresh Metrics</button>
+                <div class="metrics-grid" id="metricsGrid">
+                    <div class="metric-card">
+                        <div class="metric-value" id="metricReads">0</div>
+                        <div class="metric-label">Total Reads</div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-value" id="metricWrites">0</div>
+                        <div class="metric-label">Total Writes</div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-value" id="metricSubs">0</div>
+                        <div class="metric-label">Active Subscriptions</div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-value" id="metricFeds">0</div>
+                        <div class="metric-label">Federations</div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-value" id="metricAvgRead">0</div>
+                        <div class="metric-label">Avg Read Time (ms)</div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-value" id="metricAvgWrite">0</div>
+                        <div class="metric-label">Avg Write Time (ms)</div>
+                    </div>
+                </div>
+                <h4>Raw Metrics Data</h4>
+                <div id="metricsResult" class="output"></div>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        // Import HoloSphere from the built ES module
+        import { HoloSphere } from './dist/esm/holosphere.js';
+        // Make it globally available for the demo functions
+        window.HoloSphere = HoloSphere;
+        // Initialize HoloSphere instance
+        let hs;
+        let currentSubscription = null;
+        let map = null;
+        let currentHexLayer = null;
+        // Real relay configuration
+        const REAL_RELAYS = [
+            'wss://relay.holons.io',
+            'wss://nos.lol',
+            'wss://relay.nostr.band',
+            'wss://nostr.wine',
+            'wss://relay.snort.social'
+        ];
+        async function initHoloSphere() {
+            try {
+                // Check if user wants real relays
+                const useRealRelays = document.getElementById('useRealRelays').checked;
+                const relays = useRealRelays ? REAL_RELAYS : [];
+                // Initialize with demo configuration
+                hs = new HoloSphere({
+                    appName: 'holosphere-demo',
+                    relays: relays
+                });
+                window.hs = hs; // Make available globally for debugging
+                // Update connection status
+                document.getElementById('connectionStatus').className = 'connection-status connected';
+                if (useRealRelays) {
+                    document.getElementById('connectionText').textContent = 'HoloSphere Initialized (Connected to 5 Nostr relays)';
+                    document.getElementById('relayModeStatus').innerHTML = '🌐 <strong>Real Network Mode</strong>';
+                    console.log('Connected to Nostr relays:', hs.config.relays);
+                } else {
+                    document.getElementById('connectionText').textContent = 'HoloSphere Initialized (Local Storage Only)';
+                    document.getElementById('relayModeStatus').innerHTML = '💾 <strong>Local Only Mode</strong>';
+                    console.log('Using local storage only');
+                }
+                console.log('HoloSphere initialized successfully');
+                // Initialize the map
+                initMap();
+                // Set some demo data
+                await setupDemoData();
+            } catch (error) {
+                console.error('Failed to initialize HoloSphere:', error);
+                document.getElementById('connectionStatus').className = 'connection-status disconnected';
+                document.getElementById('connectionText').textContent = 'Initialization Failed';
+            }
+        }
+        async function setupDemoData() {
+            try {
+                // Convert San Francisco coordinates to holon
+                const sfHolon = await hs.toHolon(37.7749, -122.4194, 9);
+                // Write some demo data
+                await hs.write(sfHolon, 'demo', {
+                    title: 'San Francisco Demo',
+                    description: 'Welcome to HoloSphere!',
+                    timestamp: Date.now()
+                });
+                console.log('Demo data setup complete');
+            } catch (error) {
+                console.error('Error setting up demo data:', error);
+            }
+        }
+        // Toggle relay mode
+        window.toggleRelayMode = async function() {
+            const checkbox = document.getElementById('useRealRelays');
+            // Save preference to localStorage
+            localStorage.setItem('holosphere-use-real-relays', checkbox.checked);
+            // Reinitialize HoloSphere
+            await initHoloSphere();
+            // Update social protocols info banner
+            updateSocialProtocolsBanner();
+            alert(`Switched to ${checkbox.checked ? 'Real Network' : 'Local Only'} mode. HoloSphere has been reinitialized.`);
+        };
+        // Update social protocols banner based on relay mode
+        function updateSocialProtocolsBanner() {
+            const useRealRelays = document.getElementById('useRealRelays').checked;
+            const banner = document.getElementById('socialProtocolsBanner');
+            if (useRealRelays) {
+                banner.className = 'status info';
+                banner.innerHTML = `<strong>🌐 Connected to Real Nostr Relays!</strong><br>
+                    Your Nostr events will be published to the real Nostr network and can be seen by others using Nostr clients.
+                    `;
+            } else {
+                banner.className = 'status success';
+                banner.innerHTML = `<strong>💾 Local Storage Mode</strong><br>
+                    Your Nostr events are stored locally only and will NOT be published to the Nostr network.
+                    Perfect for testing without broadcasting to the real network.`;
+            }
+        }
+        // Load saved preference on page load
+        function loadRelayPreference() {
+            const saved = localStorage.getItem('holosphere-use-real-relays');
+            const checkbox = document.getElementById('useRealRelays');
+            // Default to local only (unchecked) for safety
+            checkbox.checked = saved === 'true';
+        }
+        // Tab switching
+        window.showTab = function(tabName) {
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            // Remove active class from all tab buttons
+            document.querySelectorAll('.tab').forEach(button => {
+                button.classList.remove('active');
+            });
+            // Show selected tab
+            document.getElementById(tabName).classList.add('active');
+            // Add active class to clicked button
+            event.target.classList.add('active');
+        };
+        // Spatial Operations
+        window.convertToHolon = async function() {
+            try {
+                const lat = parseFloat(document.getElementById('lat').value);
+                const lng = parseFloat(document.getElementById('lng').value);
+                const resolution = parseInt(document.getElementById('resolution').value);
+                const holon = await hs.toHolon(lat, lng, resolution);
+                const output = document.getElementById('holonResult');
+                output.innerHTML = `<pre>Holon ID: ${holon}
+Resolution: ${resolution}
+Coordinates: ${lat}, ${lng}
+Valid H3 Index: ${hs.isValidH3(holon)}</pre>`;
+                // Update the holon input field for hierarchy operations
+                document.getElementById('holonId').value = holon;
+                // Show on map
+                if (map) {
+                    showHexagonOnMap(holon, lat, lng);
+                }
+            } catch (error) {
+                showError('holonResult', error);
+            }
+        };
+        window.getParents = async function() {
+            try {
+                const holonId = document.getElementById('holonId').value;
+                const parents = await hs.getParents(holonId, 0);
+                const output = document.getElementById('hierarchyResult');
+                output.innerHTML = `<pre>Parents of ${holonId}:\n${JSON.stringify(parents, null, 2)}</pre>`;
+            } catch (error) {
+                showError('hierarchyResult', error);
+            }
+        };
+        window.getChildren = async function() {
+            try {
+                const holonId = document.getElementById('holonId').value;
+                const children = await hs.getChildren(holonId);
+                const output = document.getElementById('hierarchyResult');
+                output.innerHTML = `<pre>Children of ${holonId}:\n${JSON.stringify(children, null, 2)}</pre>`;
+            } catch (error) {
+                showError('hierarchyResult', error);
+            }
+        };
+        // Data Operations
+        window.writeData = async function() {
+            try {
+                const holon = document.getElementById('writeHolon').value;
+                const lens = document.getElementById('writeLens').value;
+                const data = JSON.parse(document.getElementById('writeData').value);
+                // Add timestamp if null
+                if (data.timestamp === null) {
+                    data.timestamp = Date.now();
+                }
+                const result = await hs.write(holon, lens, data);
+                const output = document.getElementById('dataResult');
+                output.innerHTML = `<pre>Write successful: ${result}
+Data ID: ${data.id}
+Timestamp: ${new Date(data._meta?.timestamp || data.timestamp).toISOString()}</pre>`;
+            } catch (error) {
+                showError('dataResult', error);
+            }
+        };
+        window.readData = async function() {
+            try {
+                const holon = document.getElementById('readHolon').value;
+                const lens = document.getElementById('readLens').value;
+                const dataId = document.getElementById('readDataId').value || null;
+                const data = await hs.read(holon, lens, dataId);
+                const output = document.getElementById('dataResult');
+                output.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                showError('dataResult', error);
+            }
+        };
+        window.updateData = async function() {
+            try {
+                const holon = document.getElementById('updateHolon').value;
+                const lens = document.getElementById('updateLens').value;
+                const dataId = document.getElementById('updateDataId').value;
+                const updates = JSON.parse(document.getElementById('updateData').value);
+                const result = await hs.update(holon, lens, dataId, updates);
+                const output = document.getElementById('dataResult');
+                output.innerHTML = `<pre>Update successful: ${result}</pre>`;
+            } catch (error) {
+                showError('dataResult', error);
+            }
+        };
+        window.deleteData = async function() {
+            try {
+                const holon = document.getElementById('deleteHolon').value;
+                const lens = document.getElementById('deleteLens').value;
+                const dataId = document.getElementById('deleteDataId').value;
+                const result = await hs.delete(holon, lens, dataId);
+                const output = document.getElementById('dataResult');
+                output.innerHTML = `<pre>Delete successful: ${result}</pre>`;
+            } catch (error) {
+                showError('dataResult', error);
+            }
+        };
+        // Schema Operations
+        window.setSchema = async function() {
+            try {
+                const lens = document.getElementById('schemaLens').value;
+                const schema = JSON.parse(document.getElementById('schemaDefinition').value);
+                const strict = document.getElementById('strictMode').checked;
+                await hs.setSchema(lens, schema, strict);
+                const output = document.getElementById('schemaResult');
+                output.innerHTML = `<pre>Schema set successfully for lens: ${lens}
+Strict mode: ${strict}</pre>`;
+            } catch (error) {
+                showError('schemaResult', error);
+            }
+        };
+        window.testValidation = async function() {
+            try {
+                const lens = document.getElementById('schemaLens').value;
+                const data = JSON.parse(document.getElementById('testData').value);
+                // Try to write with schema validation
+                const holon = await hs.toHolon(37.7749, -122.4194, 9); // Demo holon
+                const result = await hs.write(holon, lens, data);
+                const output = document.getElementById('schemaResult');
+                output.innerHTML = `<pre>Validation passed! Data written successfully.
+Result: ${result}</pre>`;
+            } catch (error) {
+                showError('schemaResult', error);
+            }
+        };
+        // Federation Operations
+        window.setupFederation = async function() {
+            try {
+                const sourceHolon = document.getElementById('sourceHolon').value;
+                const targetHolon = document.getElementById('targetHolon').value;
+                const lens = document.getElementById('federationLens').value;
+                const direction = document.getElementById('federationDirection').value;
+                const mode = document.getElementById('federationMode').value;
+                const result = await hs.federate(sourceHolon, targetHolon, lens, {
+                    direction,
+                    mode
+                });
+                const output = document.getElementById('federationResult');
+                output.innerHTML = `<pre>Federation setup successful: ${result}
+Source: ${sourceHolon}
+Target: ${targetHolon}
+Lens: ${lens}
+Direction: ${direction}
+Mode: ${mode}</pre>`;
+            } catch (error) {
+                showError('federationResult', error);
+            }
+        };
+        window.getFederatedData = async function() {
+            try {
+                const holon = document.getElementById('fedHolon').value;
+                const lens = document.getElementById('fedLens').value;
+                const resolveHolograms = document.getElementById('resolveHolograms').checked;
+                const data = await hs.getFederatedData(holon, lens, { resolveHolograms });
+                const output = document.getElementById('federationResult');
+                output.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                showError('federationResult', error);
+            }
+        };
+        // Social Protocol Operations
+        window.publishNostr = async function() {
+            try {
+                const holon = document.getElementById('nostrHolon').value;
+                const event = JSON.parse(document.getElementById('nostrEvent').value);
+                // Add timestamp if null
+                if (event.created_at === null) {
+                    event.created_at = Math.floor(Date.now() / 1000);
+                }
+                const result = await hs.publishNostr(event, holon);
+                const output = document.getElementById('socialResult');
+                output.innerHTML = `<pre>Nostr event published: ${result}
+Event ID: ${event.id}
+Created at: ${new Date(event.created_at * 1000).toISOString()}</pre>`;
+            } catch (error) {
+                showError('socialResult', error);
+            }
+        };
+        window.publishActivityPub = async function() {
+            try {
+                const holon = document.getElementById('apHolon').value;
+                const object = JSON.parse(document.getElementById('apObject').value);
+                const result = await hs.publishActivityPub(object, holon);
+                const output = document.getElementById('socialResult');
+                output.innerHTML = `<pre>ActivityPub object published: ${result}</pre>`;
+            } catch (error) {
+                showError('socialResult', error);
+            }
+        };
+        window.querySocial = async function() {
+            try {
+                const holon = document.getElementById('socialHolon').value;
+                const protocol = document.getElementById('socialProtocol').value || undefined;
+                const data = await hs.querySocial(holon, { protocol });
+                const output = document.getElementById('socialResult');
+                output.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+            } catch (error) {
+                showError('socialResult', error);
+            }
+        };
+        // Cryptography Operations
+        window.generateKeys = async function() {
+            try {
+                // Generate a random private key
+                const privateKey = crypto.getRandomValues(new Uint8Array(32));
+                const privateKeyHex = Array.from(privateKey, b => b.toString(16).padStart(2, '0')).join('');
+                // Get public key
+                const publicKey = await hs.getPublicKey(privateKeyHex);
+                const output = document.getElementById('keysResult');
+                output.innerHTML = `<pre>Private Key: ${privateKeyHex}
+Public Key: ${publicKey}
+⚠️ Keep your private key secret!</pre>`;
+                // Auto-fill the fields
+                document.getElementById('privateKey').value = privateKeyHex;
+                document.getElementById('publicKey').value = publicKey;
+            } catch (error) {
+                showError('keysResult', error);
+            }
+        };
+        window.signContent = async function() {
+            try {
+                const content = document.getElementById('signContent').value;
+                const privateKey = document.getElementById('privateKey').value;
+                const signature = await hs.sign(content, privateKey);
+                const output = document.getElementById('cryptoResult');
+                output.innerHTML = `<pre>Content: ${content}
+Signature: ${signature}</pre>`;
+                // Auto-fill signature field
+                document.getElementById('signature').value = signature;
+            } catch (error) {
+                showError('cryptoResult', error);
+            }
+        };
+        window.verifySignature = async function() {
+            try {
+                const content = document.getElementById('signContent').value;
+                const signature = document.getElementById('signature').value;
+                const publicKey = document.getElementById('publicKey').value;
+                const valid = await hs.verify(content, signature, publicKey);
+                const output = document.getElementById('cryptoResult');
+                output.innerHTML = `<pre>Signature verification: ${valid ? '✅ Valid' : '❌ Invalid'}
+Content: ${content}
+Signature: ${signature}
+Public Key: ${publicKey}</pre>`;
+            } catch (error) {
+                showError('cryptoResult', error);
+            }
+        };
+        window.issueCapability = async function() {
+            try {
+                const permissions = document.getElementById('capPermissions').value.split(',').map(p => p.trim());
+                const scope = JSON.parse(document.getElementById('capScope').value);
+                const recipient = document.getElementById('capRecipient').value;
+                const token = await hs.issueCapability(permissions, scope, recipient, {
+                    expiresIn: 3600 // 1 hour
+                });
+                const output = document.getElementById('cryptoResult');
+                output.innerHTML = `<pre>Capability Token Issued:
+${JSON.stringify(token, null, 2)}</pre>`;
+            } catch (error) {
+                showError('cryptoResult', error);
+            }
+        };
+        // Subscription Operations
+        window.createSubscription = function() {
+            try {
+                const holon = document.getElementById('subHolon').value;
+                const lens = document.getElementById('subLens').value;
+                // Clear previous events
+                document.getElementById('subscriptionEvents').innerHTML = '<pre>Waiting for events...</pre>';
+                // Create subscription
+                currentSubscription = hs.subscribe(holon, lens, (data, key) => {
+                    const eventsDiv = document.getElementById('subscriptionEvents');
+                    const timestamp = new Date().toISOString();
+                    const event = `[${timestamp}] Data change in ${holon}/${lens}:
+${JSON.stringify(data, null, 2)}
+`;
+                    eventsDiv.innerHTML = '<pre>' + event + eventsDiv.innerText + '</pre>';
+                });
+                // Enable/disable buttons
+                document.getElementById('unsubBtn').disabled = false;
+                showSuccess('subscriptionEvents', 'Subscription created successfully');
+            } catch (error) {
+                showError('subscriptionEvents', error);
+            }
+        };
+        window.unsubscribe = function() {
+            if (currentSubscription) {
+                currentSubscription.unsubscribe();
+                currentSubscription = null;
+                document.getElementById('unsubBtn').disabled = true;
+                showSuccess('subscriptionEvents', 'Unsubscribed successfully');
+            }
+        };
+        window.sendTestMessage = async function() {
+            try {
+                const holon = document.getElementById('subHolon').value;
+                const lens = document.getElementById('subLens').value;
+                const message = document.getElementById('testMessage').value;
+                await hs.write(holon, lens, {
+                    type: 'test',
+                    message: message,
+                    timestamp: Date.now()
+                });
+                showSuccess('subscriptionEvents', 'Test message sent');
+            } catch (error) {
+                showError('subscriptionEvents', error);
+            }
+        };
+        // Metrics Operations
+        window.refreshMetrics = function() {
+            try {
+                const metrics = hs.metrics();
+                // Update metric cards
+                document.getElementById('metricReads').textContent = metrics.reads || 0;
+                document.getElementById('metricWrites').textContent = metrics.writes || 0;
+                document.getElementById('metricSubs').textContent = metrics.subscriptions || 0;
+                document.getElementById('metricFeds').textContent = metrics.federations || 0;
+                document.getElementById('metricAvgRead').textContent =
+                    metrics.avgReadTime ? metrics.avgReadTime.toFixed(2) : '0';
+                document.getElementById('metricAvgWrite').textContent =
+                    metrics.avgWriteTime ? metrics.avgWriteTime.toFixed(2) : '0';
+                // Show raw data
+                document.getElementById('metricsResult').innerHTML =
+                    `<pre>${JSON.stringify(metrics, null, 2)}</pre>`;
+            } catch (error) {
+                showError('metricsResult', error);
+            }
+        };
+        // Map initialization
+        function initMap() {
+            // Check if Leaflet is loaded
+            if (typeof L === 'undefined') {
+                console.warn('Leaflet not loaded, skipping map initialization');
+                return;
+            }
+            // Initialize the map
+            map = L.map('map').setView([37.7749, -122.4194], 10);
+            // Add tile layer
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '© OpenStreetMap contributors'
+            }).addTo(map);
+        }
+        function showHexagonOnMap(holonId, lat, lng) {
+            if (!map) return;
+            // Clear previous layer
+            if (currentHexLayer) {
+                map.removeLayer(currentHexLayer);
+            }
+            // For demo purposes, show a marker at the center
+            // In production, you'd use h3-js to get the hex boundary
+            currentHexLayer = L.marker([lat, lng])
+                .addTo(map)
+                .bindPopup(`Holon: ${holonId}`)
+                .openPopup();
+            // Center the map
+            map.setView([lat, lng], 12);
+        }
+        // Helper functions
+        function showError(elementId, error) {
+            const output = document.getElementById(elementId);
+            output.innerHTML = `<pre style="color: #ff4444;">Error: ${error.message}
+${error.stack || ''}</pre>`;
+            console.error(error);
+        }
+        function showSuccess(elementId, message) {
+            const output = document.getElementById(elementId);
+            const current = output.innerHTML;
+            output.innerHTML = `<pre style="color: #44ff44;">${message}</pre>
+${current}`;
+        }
+        // Initialize on page load
+        window.addEventListener('DOMContentLoaded', async () => {
+            loadRelayPreference();
+            await initHoloSphere();
+            updateSocialProtocolsBanner();
+        });
+    </script>
+    <!-- Load Leaflet for map visualization -->
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+</body>
+</html>