holosphere 2.0.0-alpha7 → 2.0.0-alpha8
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.
- package/dist/cjs/holosphere.cjs +1 -1
- package/dist/esm/holosphere.js +1 -1
- package/dist/{index-d6f4RJBM.js → index-4XHHKe6S.js} +356 -58
- package/dist/index-4XHHKe6S.js.map +1 -0
- package/dist/{index-jmTHEbR2.js → index-BjP1TXGz.js} +2 -2
- package/dist/{index-jmTHEbR2.js.map → index-BjP1TXGz.js.map} +1 -1
- package/dist/{index-C-IlLYlk.cjs → index-CKffQDmQ.cjs} +2 -2
- package/dist/{index-C-IlLYlk.cjs.map → index-CKffQDmQ.cjs.map} +1 -1
- package/dist/index-Dz5kOZMI.cjs +5 -0
- package/dist/index-Dz5kOZMI.cjs.map +1 -0
- package/dist/{indexeddb-storage-a8GipaDr.cjs → indexeddb-storage-DD7EFBVc.cjs} +2 -2
- package/dist/{indexeddb-storage-a8GipaDr.cjs.map → indexeddb-storage-DD7EFBVc.cjs.map} +1 -1
- package/dist/{indexeddb-storage-D8kOl0oK.js → indexeddb-storage-lExjjFlV.js} +2 -2
- package/dist/{indexeddb-storage-D8kOl0oK.js.map → indexeddb-storage-lExjjFlV.js.map} +1 -1
- package/dist/{memory-storage-DBQK622V.js → memory-storage-C68adso2.js} +2 -2
- package/dist/{memory-storage-DBQK622V.js.map → memory-storage-C68adso2.js.map} +1 -1
- package/dist/{memory-storage-gfRovk2O.cjs → memory-storage-DD_6yyXT.cjs} +2 -2
- package/dist/{memory-storage-gfRovk2O.cjs.map → memory-storage-DD_6yyXT.cjs.map} +1 -1
- package/dist/{secp256k1-BCAPF45D.cjs → secp256k1-DYELiqgx.cjs} +2 -2
- package/dist/{secp256k1-BCAPF45D.cjs.map → secp256k1-DYELiqgx.cjs.map} +1 -1
- package/dist/{secp256k1-DYm_CMqW.js → secp256k1-OM8siPyy.js} +2 -2
- package/dist/{secp256k1-DYm_CMqW.js.map → secp256k1-OM8siPyy.js.map} +1 -1
- package/examples/holosphere-widget.js +1242 -0
- package/examples/widget-demo.html +274 -0
- package/examples/widget.html +703 -0
- package/package.json +3 -1
- package/src/cdn-entry.js +22 -0
- package/src/contracts/queries.js +16 -1
- package/src/core/holosphere.js +2 -2
- package/src/crypto/nostr-utils.js +36 -2
- package/src/federation/handshake.js +16 -4
- package/src/index.js +16 -2
- package/src/storage/backends/gundb-backend.js +293 -9
- package/src/storage/gun-wrapper.js +64 -16
- package/src/storage/nostr-async.js +40 -25
- package/src/storage/unified-storage.js +31 -1
- package/vite.config.cdn.js +60 -0
- package/dist/index-Bvwyvd0T.cjs +0 -5
- package/dist/index-Bvwyvd0T.cjs.map +0 -1
- package/dist/index-d6f4RJBM.js.map +0 -1
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>HoloSphere Widget Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
11
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
color: white;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.hero {
|
|
17
|
+
padding: 80px 20px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
max-width: 900px;
|
|
20
|
+
margin: 0 auto;
|
|
21
|
+
}
|
|
22
|
+
.hero h1 {
|
|
23
|
+
font-size: 3em;
|
|
24
|
+
margin-bottom: 20px;
|
|
25
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
26
|
+
-webkit-background-clip: text;
|
|
27
|
+
-webkit-text-fill-color: transparent;
|
|
28
|
+
}
|
|
29
|
+
.hero p {
|
|
30
|
+
font-size: 1.3em;
|
|
31
|
+
color: rgba(255,255,255,0.8);
|
|
32
|
+
margin-bottom: 40px;
|
|
33
|
+
line-height: 1.6;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.features {
|
|
37
|
+
display: grid;
|
|
38
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
39
|
+
gap: 20px;
|
|
40
|
+
padding: 40px 20px;
|
|
41
|
+
max-width: 1200px;
|
|
42
|
+
margin: 0 auto;
|
|
43
|
+
}
|
|
44
|
+
.feature {
|
|
45
|
+
background: rgba(255,255,255,0.05);
|
|
46
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
47
|
+
border-radius: 16px;
|
|
48
|
+
padding: 30px;
|
|
49
|
+
text-align: center;
|
|
50
|
+
transition: transform 0.3s, background 0.3s;
|
|
51
|
+
}
|
|
52
|
+
.feature:hover {
|
|
53
|
+
transform: translateY(-5px);
|
|
54
|
+
background: rgba(255,255,255,0.1);
|
|
55
|
+
}
|
|
56
|
+
.feature-icon {
|
|
57
|
+
font-size: 3em;
|
|
58
|
+
margin-bottom: 15px;
|
|
59
|
+
}
|
|
60
|
+
.feature h3 {
|
|
61
|
+
color: #667eea;
|
|
62
|
+
margin-bottom: 10px;
|
|
63
|
+
}
|
|
64
|
+
.feature p {
|
|
65
|
+
color: rgba(255,255,255,0.7);
|
|
66
|
+
font-size: 0.95em;
|
|
67
|
+
line-height: 1.5;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.code-section {
|
|
71
|
+
background: rgba(0,0,0,0.3);
|
|
72
|
+
padding: 60px 20px;
|
|
73
|
+
}
|
|
74
|
+
.code-container {
|
|
75
|
+
max-width: 800px;
|
|
76
|
+
margin: 0 auto;
|
|
77
|
+
}
|
|
78
|
+
.code-section h2 {
|
|
79
|
+
text-align: center;
|
|
80
|
+
margin-bottom: 30px;
|
|
81
|
+
color: #667eea;
|
|
82
|
+
}
|
|
83
|
+
.code-block {
|
|
84
|
+
background: #1e1e1e;
|
|
85
|
+
border-radius: 12px;
|
|
86
|
+
padding: 20px;
|
|
87
|
+
overflow-x: auto;
|
|
88
|
+
margin-bottom: 20px;
|
|
89
|
+
}
|
|
90
|
+
.code-block code {
|
|
91
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
color: #d4d4d4;
|
|
94
|
+
line-height: 1.6;
|
|
95
|
+
}
|
|
96
|
+
.code-block .comment { color: #6a9955; }
|
|
97
|
+
.code-block .keyword { color: #569cd6; }
|
|
98
|
+
.code-block .string { color: #ce9178; }
|
|
99
|
+
.code-block .function { color: #dcdcaa; }
|
|
100
|
+
|
|
101
|
+
.cta {
|
|
102
|
+
text-align: center;
|
|
103
|
+
padding: 60px 20px;
|
|
104
|
+
}
|
|
105
|
+
.cta-btn {
|
|
106
|
+
display: inline-block;
|
|
107
|
+
padding: 16px 40px;
|
|
108
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
109
|
+
color: white;
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
border-radius: 30px;
|
|
112
|
+
font-size: 1.1em;
|
|
113
|
+
font-weight: 600;
|
|
114
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
115
|
+
}
|
|
116
|
+
.cta-btn:hover {
|
|
117
|
+
transform: translateY(-3px);
|
|
118
|
+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.instructions {
|
|
122
|
+
background: rgba(102, 126, 234, 0.1);
|
|
123
|
+
border: 1px solid rgba(102, 126, 234, 0.3);
|
|
124
|
+
border-radius: 12px;
|
|
125
|
+
padding: 20px 30px;
|
|
126
|
+
margin: 40px auto;
|
|
127
|
+
max-width: 600px;
|
|
128
|
+
}
|
|
129
|
+
.instructions h3 {
|
|
130
|
+
color: #667eea;
|
|
131
|
+
margin-bottom: 10px;
|
|
132
|
+
}
|
|
133
|
+
.instructions p {
|
|
134
|
+
color: rgba(255,255,255,0.8);
|
|
135
|
+
line-height: 1.6;
|
|
136
|
+
}
|
|
137
|
+
.instructions .arrow {
|
|
138
|
+
display: inline-block;
|
|
139
|
+
animation: bounce 1s infinite;
|
|
140
|
+
font-size: 1.5em;
|
|
141
|
+
margin-left: 10px;
|
|
142
|
+
}
|
|
143
|
+
@keyframes bounce {
|
|
144
|
+
0%, 100% { transform: translateY(0) translateX(0); }
|
|
145
|
+
50% { transform: translateY(5px) translateX(5px); }
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
footer {
|
|
149
|
+
text-align: center;
|
|
150
|
+
padding: 40px 20px;
|
|
151
|
+
color: rgba(255,255,255,0.5);
|
|
152
|
+
font-size: 0.9em;
|
|
153
|
+
}
|
|
154
|
+
footer a {
|
|
155
|
+
color: #667eea;
|
|
156
|
+
}
|
|
157
|
+
</style>
|
|
158
|
+
</head>
|
|
159
|
+
<body>
|
|
160
|
+
|
|
161
|
+
<div class="hero">
|
|
162
|
+
<h1>HoloSphere Widget</h1>
|
|
163
|
+
<p>
|
|
164
|
+
Add decentralized geospatial storage to any website with a single line of code.
|
|
165
|
+
Click the hexagon button in the bottom-right corner to explore!
|
|
166
|
+
</p>
|
|
167
|
+
|
|
168
|
+
<div class="instructions">
|
|
169
|
+
<h3>Try it now!</h3>
|
|
170
|
+
<p>
|
|
171
|
+
Click the floating hexagon button in the bottom-right corner
|
|
172
|
+
<span class="arrow">↘</span>
|
|
173
|
+
</p>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<div class="features">
|
|
178
|
+
<div class="feature">
|
|
179
|
+
<div class="feature-icon">⬢</div>
|
|
180
|
+
<h3>H3 Hexagon Map</h3>
|
|
181
|
+
<p>Interactive zoomable map with H3 hexagonal grid visualization. Click anywhere to select a holon.</p>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="feature">
|
|
184
|
+
<div class="feature-icon">🗂</div>
|
|
185
|
+
<h3>Holonic Explorer</h3>
|
|
186
|
+
<p>Navigate the hierarchical structure of holons. View parent and child regions at different scales.</p>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="feature">
|
|
189
|
+
<div class="feature-icon">💾</div>
|
|
190
|
+
<h3>Data Storage</h3>
|
|
191
|
+
<p>Store and retrieve data in any location. Organize with lenses for different data types.</p>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="feature">
|
|
194
|
+
<div class="feature-icon">⚡</div>
|
|
195
|
+
<h3>Real-time</h3>
|
|
196
|
+
<p>Local-first architecture with P2P synchronization. Works offline, syncs when connected.</p>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<div class="code-section">
|
|
201
|
+
<div class="code-container">
|
|
202
|
+
<h2>Easy Integration</h2>
|
|
203
|
+
|
|
204
|
+
<div class="code-block">
|
|
205
|
+
<code><span class="comment"><!-- 1. Include HoloSphere CDN --></span>
|
|
206
|
+
<<span class="keyword">script</span> src=<span class="string">"https://cdn.jsdelivr.net/npm/holosphere@latest/dist/cdn/holosphere.min.js"</span>></<span class="keyword">script</span>>
|
|
207
|
+
|
|
208
|
+
<span class="comment"><!-- 2. Include the Widget --></span>
|
|
209
|
+
<<span class="keyword">script</span> src=<span class="string">"https://cdn.jsdelivr.net/npm/holosphere@latest/examples/holosphere-widget.js"</span>></<span class="keyword">script</span>>
|
|
210
|
+
|
|
211
|
+
<span class="comment"><!-- 3. Initialize --></span>
|
|
212
|
+
<<span class="keyword">script</span>>
|
|
213
|
+
<span class="function">HoloSphereWidget</span>.<span class="function">init</span>({
|
|
214
|
+
<span class="string">appName</span>: <span class="string">'my-app'</span>,
|
|
215
|
+
<span class="string">defaultLocation</span>: [<span class="string">37.7749</span>, <span class="string">-122.4194</span>],
|
|
216
|
+
<span class="string">defaultResolution</span>: <span class="string">9</span>
|
|
217
|
+
});
|
|
218
|
+
</<span class="keyword">script</span>>
|
|
219
|
+
</code>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<h2 style="margin-top: 40px;">Programmatic Control</h2>
|
|
223
|
+
|
|
224
|
+
<div class="code-block">
|
|
225
|
+
<code><span class="comment">// Open the widget</span>
|
|
226
|
+
<span class="function">HoloSphereWidget</span>.<span class="function">open</span>();
|
|
227
|
+
|
|
228
|
+
<span class="comment">// Select a specific location</span>
|
|
229
|
+
<span class="function">HoloSphereWidget</span>.<span class="function">selectHolon</span>(<span class="string">40.7128</span>, <span class="string">-74.0060</span>); <span class="comment">// NYC</span>
|
|
230
|
+
|
|
231
|
+
<span class="comment">// Get the HoloSphere instance for advanced operations</span>
|
|
232
|
+
<span class="keyword">const</span> hs = <span class="function">HoloSphereWidget</span>.<span class="function">getHoloSphere</span>();
|
|
233
|
+
<span class="keyword">await</span> hs.<span class="function">write</span>(holon, <span class="string">'events'</span>, { <span class="string">title</span>: <span class="string">'My Event'</span> });
|
|
234
|
+
|
|
235
|
+
<span class="comment">// Get current holon</span>
|
|
236
|
+
<span class="keyword">const</span> holon = <span class="function">HoloSphereWidget</span>.<span class="function">getCurrentHolon</span>();
|
|
237
|
+
</code>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<div class="cta">
|
|
243
|
+
<a href="https://github.com/anthropics/holosphere" class="cta-btn">View on GitHub</a>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<footer>
|
|
247
|
+
<p>
|
|
248
|
+
Built with <a href="https://h3geo.org">H3</a> hexagonal indexing |
|
|
249
|
+
Powered by <a href="https://nostr.com">Nostr</a> protocol |
|
|
250
|
+
<a href="widget.html">Simple Widget Example</a>
|
|
251
|
+
</p>
|
|
252
|
+
</footer>
|
|
253
|
+
|
|
254
|
+
<!-- Load HoloSphere (includes h3-js internally, exposed as window.h3) -->
|
|
255
|
+
<script src="../dist/cdn/holosphere.min.js"></script>
|
|
256
|
+
|
|
257
|
+
<!-- Load the Widget -->
|
|
258
|
+
<script src="./holosphere-widget.js"></script>
|
|
259
|
+
|
|
260
|
+
<script>
|
|
261
|
+
// Initialize the widget
|
|
262
|
+
HoloSphereWidget.init({
|
|
263
|
+
appName: 'holosphere-widget-demo',
|
|
264
|
+
relays: [], // Local only for demo
|
|
265
|
+
defaultLocation: [37.7749, -122.4194], // San Francisco
|
|
266
|
+
defaultResolution: 9
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
// Auto-open after a short delay for demo purposes
|
|
270
|
+
// setTimeout(() => HoloSphereWidget.open(), 2000);
|
|
271
|
+
</script>
|
|
272
|
+
|
|
273
|
+
</body>
|
|
274
|
+
</html>
|