@oasisomniverse/js 1.0.0 → 1.1.0

package/src/search-quest.js

@@ -0,0 +1,28 @@
+class OasisSearchQuest {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:24px}.oasis-cs p{color:#7a9bbf;font-size:13px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Search Quests</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Search</label><input class="oasis-input" id="oasis-sq-q" placeholder="Quest name or keyword…"></div><button class="oasis-btn-primary" id="oasis-sq-btn">Search</button><div id="oasis-sq-results" style="margin-top:16px"></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    this._overlay.querySelector('#oasis-sq-btn').addEventListener('click', () => this._search());
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  async _search() {
+    const q = this._overlay.querySelector('#oasis-sq-q').value.trim(); if (!q) return;
+    const res = this._overlay.querySelector('#oasis-sq-results');
+    res.innerHTML = '<div class="oasis-cs"><p>Searching…</p></div>';
+    try {
+      const r = await fetch(`${this._apiUrl}/api/quests/search?q=${encodeURIComponent(q)}`);
+      const data = await r.json(); const items = Array.isArray(data) ? data : (data.result || []);
+      res.innerHTML = items.length ? `<table class="oasis-table"><thead><tr><th>Quest</th><th>Difficulty</th><th>Reward</th></tr></thead><tbody>${items.map(i=>`<tr><td>${i.name||'—'}</td><td>${i.difficulty||'—'}</td><td>${i.reward||'—'}</td></tr>`).join('')}</tbody></table>` : '<div class="oasis-cs"><p>No quests found.</p></div>';
+    } catch { res.innerHTML = '<div class="oasis-msg-error">Search failed.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSearchQuest = OasisSearchQuest;

package/src/search-seeds.js

@@ -0,0 +1,28 @@
+class OasisSearchSeeds {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-search-row{display:flex;gap:8px;margin-bottom:16px}.oasis-input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#00a852,#00c864);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:24px}.oasis-cs p{color:#7a9bbf;font-size:13px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Search SEEDS Accounts</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-search-row"><input class="oasis-input" id="oasis-ss-q" placeholder="Account name…"><button class="oasis-btn-primary" id="oasis-ss-btn">Search</button></div><div id="oasis-ss-results"><div class="oasis-cs"><p>Enter an account name to search.</p></div></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    this._overlay.querySelector('#oasis-ss-btn').addEventListener('click', () => this._search());
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  async _search() {
+    const q = this._overlay.querySelector('#oasis-ss-q').value.trim(); if (!q) return;
+    const res = this._overlay.querySelector('#oasis-ss-results');
+    res.innerHTML = '<div class="oasis-cs"><p>Searching…</p></div>';
+    try {
+      const r = await fetch(`${this._apiUrl}/api/seeds/search?q=${encodeURIComponent(q)}`);
+      const data = await r.json(); const items = Array.isArray(data) ? data : (data.result || []);
+      res.innerHTML = items.length ? `<table class="oasis-table"><thead><tr><th>Account</th><th>Balance</th><th>Reputation</th></tr></thead><tbody>${items.map(a=>`<tr><td>${a.account||'—'}</td><td>${a.balance||'0'}</td><td>${a.reputation||'—'}</td></tr>`).join('')}</tbody></table>` : '<div class="oasis-cs"><p>No accounts found.</p></div>';
+    } catch { res.innerHTML = '<div class="oasis-msg-error">Search failed.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSearchSeeds = OasisSearchSeeds;

package/src/seeds-provider.js

@@ -0,0 +1,17 @@
+class OasisSeedsProvider {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">SEEDS Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌱</div><h3>SEEDS Provider</h3><p>SEEDS regenerative economy integration — use SEEDS tokens for payments, donations, and rewards in the OASIS.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSeedsProvider = OasisSeedsProvider;

package/src/send-invite.js

@@ -0,0 +1,17 @@
+class OasisSendInvite {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:480px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#00a852,#00c864);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Send SEEDS Invite</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><p style="color:#7a9bbf;font-size:13px;margin:0 0 20px">Invite someone to join the SEEDS regenerative economy. They'll receive a welcome bonus when they accept.</p><div class="oasis-form-group"><label class="oasis-label">Recipient Name</label><input class="oasis-input" placeholder="Their name…"></div><div class="oasis-form-group"><label class="oasis-label">Email or Account</label><input class="oasis-input" placeholder="email@example.com or @username"></div><button class="oasis-btn-primary">🌱 Send Invite</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSendInvite = OasisSendInvite;

package/src/settings.js

@@ -0,0 +1,18 @@
+class OasisSettings {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-setting-row:last-child{border-bottom:none}.oasis-setting-label{font-size:13px;color:#fff}.oasis-setting-sub{font-size:11px;color:#7a9bbf;margin-top:2px}.oasis-toggle{position:relative;width:40px;height:22px;background:rgba(0,200,255,.15);border:1px solid rgba(0,200,255,.3);border-radius:999px;cursor:pointer;transition:background .2s}.oasis-toggle.on{background:rgba(0,200,255,.4)}.oasis-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#7a9bbf;border-radius:50%;transition:transform .2s}.oasis-toggle.on::after{transform:translateX(18px);background:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;margin-top:20px;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Settings</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-setting-row"><div><div class="oasis-setting-label">Notifications</div><div class="oasis-setting-sub">Push alerts for activity</div></div><div class="oasis-toggle on" id="s-notif"></div></div><div class="oasis-setting-row"><div><div class="oasis-setting-label">Dark Mode</div><div class="oasis-setting-sub">Reduce eye strain</div></div><div class="oasis-toggle on" id="s-dark"></div></div><div class="oasis-setting-row"><div><div class="oasis-setting-label">Auto-Failover</div><div class="oasis-setting-sub">Switch providers automatically</div></div><div class="oasis-toggle" id="s-failover"></div></div><div class="oasis-setting-row"><div><div class="oasis-setting-label">Analytics</div><div class="oasis-setting-sub">Share usage data</div></div><div class="oasis-toggle" id="s-analytics"></div></div><button class="oasis-btn-primary">Save Settings</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    this._overlay.querySelectorAll('.oasis-toggle').forEach(t => t.addEventListener('click', () => t.classList.toggle('on')));
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSettings = OasisSettings;

package/src/solana.js

@@ -0,0 +1,17 @@
+class OasisSolana {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-form-group{margin-bottom:16px}.oasis-label{display:block;font-size:11px;font-weight:700;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.oasis-input{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.oasis-input:focus{border-color:#00c8ff}.oasis-btn-primary{background:linear-gradient(135deg,#9945ff,#14f195);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}.oasis-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;background:rgba(153,69,255,.2);color:#9945ff;margin-bottom:16px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Solana NFTs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><span class="oasis-badge">⚡ Solana Chain</span><div class="oasis-form-group"><label class="oasis-label">Wallet Address</label><input class="oasis-input" placeholder="Solana wallet address (base58)…"></div><div class="oasis-form-group"><label class="oasis-label">Collection Address (optional)</label><input class="oasis-input" placeholder="Filter by collection…"></div><button class="oasis-btn-primary">Load Solana NFTs</button></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSolana = OasisSolana;

package/src/solid.js

@@ -0,0 +1,17 @@
+class OasisSolid {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Solid Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">💧</div><h3>Solid Provider</h3><p>Linked Data integration via the Solid protocol. Give users ownership of their data with personal pods.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSolid = OasisSolid;

package/src/sql-lite.js

@@ -0,0 +1,17 @@
+class OasisSqlLite {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">SQLite Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">💾</div><h3>SQLite Provider</h3><p>Lightweight local SQLite database provider for offline-capable OASIS applications.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisSqlLite = OasisSqlLite;

package/src/three-fold.js

@@ -0,0 +1,17 @@
+class OasisThreeFold {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">ThreeFold Provider</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌐</div><h3>ThreeFold Provider</h3><p>ThreeFold decentralised Internet infrastructure — sovereign compute and storage on the ThreeFold Grid.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisThreeFold = OasisThreeFold;

package/src/view-global-3d-map.js

@@ -0,0 +1,17 @@
+class OasisViewGlobal3dMap {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:24px 16px}.oasis-cs-icon{font-size:64px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:13px;font-weight:600;cursor:pointer}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Global 3D Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌐</div><h3>Our World Global Map</h3><p>Explore the entire OASIS Omniverse in real-time 3D. Navigate continents, find quests, locate avatars, and discover OAPP hotspots.</p><button class="oasis-btn-primary" onclick="window.open('https://www.ourworldthegame.com','_blank')">Launch 3D Map</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewGlobal3dMap = OasisViewGlobal3dMap;

package/src/view-halons-on-map.js

@@ -0,0 +1,28 @@
+class OasisViewHalonsOnMap {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:32px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Halons on Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-halons-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading halons…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-halons-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/halons`);
+      const data = await r.json();
+      const halons = Array.isArray(data) ? data : (data.result || []);
+      if (!halons.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🔮</div><h3>No Halons</h3><p>No halons placed on the map yet.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>Name</th><th>Latitude</th><th>Longitude</th><th>Type</th></tr></thead><tbody>${halons.map(h=>`<tr><td>${h.name||'—'}</td><td>${h.lat||'—'}</td><td>${h.lng||'—'}</td><td>${h.type||'—'}</td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load halons.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewHalonsOnMap = OasisViewHalonsOnMap;

package/src/view-oapp-on-map.js

@@ -0,0 +1,28 @@
+class OasisViewOappOnMap {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:32px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">OAPPs on Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-oapp-map-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading OAPPs…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-oapp-map-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/oapp/map`);
+      const data = await r.json();
+      const oapps = Array.isArray(data) ? data : (data.result || []);
+      if (!oapps.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">📦</div><h3>No OAPPs</h3><p>No OAPPs pinned on the map yet.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>OAPP</th><th>Category</th><th>Lat</th><th>Lng</th></tr></thead><tbody>${oapps.map(o=>`<tr><td>${o.name||'—'}</td><td>${o.category||'—'}</td><td>${o.lat||'—'}</td><td>${o.lng||'—'}</td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load OAPPs.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewOappOnMap = OasisViewOappOnMap;

package/src/view-organizations.js

@@ -0,0 +1,27 @@
+class OasisViewOrganizations {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-btn-sm{background:linear-gradient(135deg,#00a852,#00c864);color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:11px;cursor:pointer}.oasis-cs{text-align:center;padding:32px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">SEEDS Organisations</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-orgs-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading organisations…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-orgs-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/seeds/organisations`);
+      const data = await r.json(); const orgs = Array.isArray(data) ? data : (data.result || []);
+      if (!orgs.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🌿</div><h3>No Organisations</h3><p>No SEEDS organisations found.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>Organisation</th><th>Members</th><th>Action</th></tr></thead><tbody>${orgs.map(o=>`<tr><td>${o.name||'—'}</td><td>${o.members||'0'}</td><td><button class="oasis-btn-sm">Join</button></td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load organisations.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewOrganizations = OasisViewOrganizations;

package/src/view-provider-stats.js

@@ -0,0 +1,17 @@
+class OasisViewProviderStats {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Provider Stats</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">📊</div><h3>Provider Stats</h3><p>Detailed statistics for each connected provider — read/write speeds, uptime, data volume, and health scores.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewProviderStats = OasisViewProviderStats;

package/src/view-providers.js

@@ -0,0 +1,17 @@
+class OasisViewProviders {
+  constructor({ onClose = null } = {}) { this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:Orbitron,sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0 0 20px}.oasis-btn-primary{background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">View Providers</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">👁️</div><h3>View Providers</h3><p>View all currently connected providers with their status, latency, and storage statistics.</p><button class="oasis-btn-primary">Configure Provider</button></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewProviders = OasisViewProviders;

package/src/view-quest-on-map.js

@@ -0,0 +1,28 @@
+class OasisViewQuestOnMap {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:32px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Quests on Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-quest-map-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading quests…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-quest-map-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/quests/map`);
+      const data = await r.json();
+      const quests = Array.isArray(data) ? data : (data.result || []);
+      if (!quests.length) { body.innerHTML = '<div class="oasis-cs"><div class="oasis-cs-icon">🗺️</div><h3>No Quests</h3><p>No quests pinned on the map yet.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>Quest</th><th>Difficulty</th><th>Lat</th><th>Lng</th></tr></thead><tbody>${quests.map(q=>`<tr><td>${q.name||'—'}</td><td>${q.difficulty||'—'}</td><td>${q.lat||'—'}</td><td>${q.lng||'—'}</td></tr>`).join('')}</tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load quests.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewQuestOnMap = OasisViewQuestOnMap;

package/src/view-quest.js

@@ -0,0 +1,26 @@
+class OasisViewQuest {
+  constructor({ questId = '', apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._questId = questId; this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:32px 16px}.oasis-cs-icon{font-size:48px;margin-bottom:12px}.oasis-cs h3{font-family:'Orbitron',sans-serif;font-size:15px;color:#00c8ff;margin:0 0 8px}.oasis-cs p{color:#7a9bbf;font-size:13px;margin:0}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">View Quest</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vq-body"><div class="oasis-cs"><div class="oasis-cs-icon">⏳</div><p>Loading quest…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-vq-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/quests/${this._questId}`);
+      const q = await r.json();
+      body.innerHTML = `<h2 style="font-family:'Orbitron',sans-serif;font-size:16px;color:#fff;margin:0 0 8px">${q.name||'Quest'}</h2><p style="color:#7a9bbf;font-size:13px;margin:0 0 16px">${q.description||'No description.'}</p><table class="oasis-table"><tbody><tr><td style="color:#7a9bbf;width:120px">Difficulty</td><td>${q.difficulty||'—'}</td></tr><tr><td style="color:#7a9bbf">Reward</td><td>${q.reward||'—'}</td></tr><tr><td style="color:#7a9bbf">Status</td><td>${q.status||'—'}</td></tr><tr><td style="color:#7a9bbf">Location</td><td>${q.location||'—'}</td></tr></tbody></table>`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load quest.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewQuest = OasisViewQuest;

package/src/view-seeds.js

@@ -0,0 +1,27 @@
+class OasisViewSeeds {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-stat-row{display:flex;gap:12px;margin-bottom:20px}.oasis-stat{flex:1;background:rgba(0,200,100,.05);border:1px solid rgba(0,200,100,.2);border-radius:10px;padding:14px;text-align:center}.oasis-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#00c864}.oasis-stat-lbl{font-size:10px;color:#7a9bbf;margin-top:4px}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:32px}.oasis-cs p{color:#7a9bbf;font-size:13px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">My SEEDS</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-vs-body"><div class="oasis-cs"><p>Loading…</p></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    const body = this._overlay.querySelector('#oasis-vs-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/seeds/account`);
+      const d = await r.json();
+      const txs = d.transactions || [];
+      body.innerHTML = `<div class="oasis-stat-row"><div class="oasis-stat"><div class="oasis-stat-val">${d.balance||'0'}</div><div class="oasis-stat-lbl">Balance</div></div><div class="oasis-stat"><div class="oasis-stat-val">${d.planted||'0'}</div><div class="oasis-stat-lbl">Planted</div></div><div class="oasis-stat"><div class="oasis-stat-val">${d.reputation||'—'}</div><div class="oasis-stat-lbl">Reputation</div></div></div>${txs.length ? `<table class="oasis-table"><thead><tr><th>Date</th><th>Type</th><th>Amount</th></tr></thead><tbody>${txs.map(t=>`<tr><td>${t.date||'—'}</td><td>${t.type||'—'}</td><td style="color:${t.amount>0?'#00c864':'#ff6b6b'}">${t.amount>0?'+':''}${t.amount}</td></tr>`).join('')}</tbody></table>` : '<div class="oasis-cs"><p>No transactions yet.</p></div>'}`;
+    } catch { body.innerHTML = '<div class="oasis-msg-error">Failed to load SEEDS data.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisViewSeeds = OasisViewSeeds;

package/src/wallet.js

@@ -0,0 +1,28 @@
+class OasisWallet {
+  constructor({ apiUrl = 'https://api.web4.oasisomniverse.one', onClose = null } = {}) { this._apiUrl = apiUrl; this._onClose = onClose; this._overlay = null; this._injectStyles(); }
+  _injectStyles() { if (document.getElementById('oasis-popup-styles')) return; const s = document.createElement('style'); s.id = 'oasis-popup-styles'; s.textContent = `.oasis-popup-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.oasis-popup-overlay.is-open{opacity:1}.oasis-popup-modal{background:#0a1628;border:1px solid rgba(0,200,255,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.6);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}.oasis-popup-overlay.is-open .oasis-popup-modal{transform:none}.oasis-popup-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-popup-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#00c8ff;letter-spacing:.08em}.oasis-popup-close{background:none;border:none;color:#7a9bbf;font-size:22px;cursor:pointer;padding:0;line-height:1}.oasis-popup-close:hover{color:#fff}.oasis-popup-body{padding:24px}.oasis-wallet-hero{background:linear-gradient(135deg,rgba(0,102,204,.3),rgba(0,200,255,.15));border:1px solid rgba(0,200,255,.3);border-radius:14px;padding:24px;text-align:center;margin-bottom:20px}.oasis-wallet-bal{font-family:'Orbitron',sans-serif;font-size:32px;font-weight:700;color:#00c8ff}.oasis-wallet-lbl{font-size:11px;color:#7a9bbf;margin-top:4px}.oasis-btn-row{display:flex;gap:10px;margin-bottom:20px}.oasis-btn-primary{flex:1;background:linear-gradient(135deg,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:11px;font-size:13px;font-weight:600;cursor:pointer}.oasis-btn-secondary{flex:1;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#00c8ff;border-radius:8px;padding:11px;font-size:13px;font-weight:600;cursor:pointer}.oasis-table{width:100%;border-collapse:collapse;font-size:13px}.oasis-table th{text-align:left;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#7a9bbf;text-transform:uppercase;border-bottom:1px solid rgba(0,200,255,.1)}.oasis-table td{padding:10px 12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.05)}.oasis-cs{text-align:center;padding:20px}.oasis-cs p{color:#7a9bbf;font-size:13px}.oasis-msg-error{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);color:#ff6b6b;border-radius:8px;padding:10px 14px;font-size:13px}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Wallet</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-wallet-hero"><div class="oasis-wallet-bal" id="oasis-wal-bal">—</div><div class="oasis-wallet-lbl">OASIS Balance</div></div><div class="oasis-btn-row"><button class="oasis-btn-primary">Send</button><button class="oasis-btn-secondary">Receive</button><button class="oasis-btn-secondary">History</button></div><div id="oasis-wal-tx"><div class="oasis-cs"><p>Loading transactions…</p></div></div></div></div>`;
+    this._overlay.querySelector('.oasis-popup-close').addEventListener('click', () => this.close());
+    this._overlay.addEventListener('click', e => { if (e.target === this._overlay) this.close(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+    this._load();
+  }
+  async _load() {
+    try {
+      const r = await fetch(`${this._apiUrl}/api/wallet`);
+      const d = await r.json();
+      this._overlay.querySelector('#oasis-wal-bal').textContent = d.balance ?? '0';
+      const txs = d.transactions || [];
+      const tx = this._overlay.querySelector('#oasis-wal-tx');
+      tx.innerHTML = txs.length ? `<table class="oasis-table"><thead><tr><th>Date</th><th>Description</th><th>Amount</th></tr></thead><tbody>${txs.map(t=>`<tr><td>${t.date||'—'}</td><td>${t.desc||'—'}</td><td style="color:${t.amount>0?'#00c864':'#ff6b6b'}">${t.amount>0?'+':''}${t.amount}</td></tr>`).join('')}</tbody></table>` : '<div class="oasis-cs"><p>No transactions yet.</p></div>';
+    } catch { this._overlay.querySelector('#oasis-wal-bal').textContent = '0'; this._overlay.querySelector('#oasis-wal-tx').innerHTML = '<div class="oasis-msg-error">Could not load wallet data.</div>'; }
+  }
+  close() { if (!this._overlay) return; const el = this._overlay; this._overlay = null; el.classList.remove('is-open'); el.addEventListener('transitionend', () => el.remove(), { once: true }); if (this._onClose) this._onClose(); }
+  destroy() { this.close(); }
+}
+window.OasisWallet = OasisWallet;