@oasisomniverse/js 1.0.0 → 1.1.0

package/src/manage-quest.js

@@ -0,0 +1,28 @@
+class OasisManageQuest {
+  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:640px;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-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.oasis-badge-blue{background:rgba(0,200,255,.15);color:#00c8ff}.oasis-badge-green{background:rgba(0,200,100,.15);color:#00c864}.oasis-badge-yellow{background:rgba(255,200,0,.15);color:#ffc800}.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">Manage Quests</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-mq-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-mq-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/quests`);
+      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 created yet.</p></div>'; return; }
+      body.innerHTML = `<table class="oasis-table"><thead><tr><th>Quest</th><th>Difficulty</th><th>Status</th></tr></thead><tbody>${quests.map(q=>`<tr><td>${q.name||'—'}</td><td><span class="oasis-badge oasis-badge-blue">${q.difficulty||'Normal'}</span></td><td><span class="oasis-badge ${q.active?'oasis-badge-green':'oasis-badge-yellow'}">${q.active?'Active':'Draft'}</span></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.OasisManageQuest = OasisManageQuest;

package/src/manage-seeds.js

@@ -0,0 +1,26 @@
+class OasisManageSeeds {
+  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:540px;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-btn-row{display:flex;gap:8px}.oasis-btn{flex:1;border:none;border-radius:8px;padding:10px;font-size:12px;font-weight:600;cursor:pointer}.oasis-btn-green{background:linear-gradient(135deg,#00a852,#00c864);color:#fff}.oasis-btn-secondary{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#00c8ff}.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">Manage SEEDS</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body" id="oasis-ms-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-ms-body');
+    try {
+      const r = await fetch(`${this._apiUrl}/api/seeds/balance`);
+      const d = await r.json();
+      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.harvested||'0'}</div><div class="oasis-stat-lbl">Harvested</div></div></div><div class="oasis-btn-row"><button class="oasis-btn oasis-btn-green">Donate</button><button class="oasis-btn oasis-btn-secondary">Send</button><button class="oasis-btn oasis-btn-secondary">Reward</button></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.OasisManageSeeds = OasisManageSeeds;

package/src/map.js

@@ -0,0 +1,17 @@
+class OasisMap {
+  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:640px;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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:11px;color:#7a9bbf}`; 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">Our World Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid"><div class="oasis-card"><div class="oasis-card-title">🌍 Global 3D Map</div><div class="oasis-card-sub">View the world</div></div><div class="oasis-card"><div class="oasis-card-title">🔍 Search Map</div><div class="oasis-card-sub">Find locations</div></div><div class="oasis-card"><div class="oasis-card-title">📍 Manage Map</div><div class="oasis-card-sub">Edit map data</div></div><div class="oasis-card"><div class="oasis-card-title">🗺️ Plot Route</div><div class="oasis-card-sub">Navigation</div></div><div class="oasis-card"><div class="oasis-card-title">🧩 Add 2D Object</div><div class="oasis-card-sub">Place overlays</div></div><div class="oasis-card"><div class="oasis-card-title">🏗️ Add 3D Object</div><div class="oasis-card-sub">Place 3D assets</div></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'));
+  }
+  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.OasisMap = OasisMap;

package/src/menu-message.js

@@ -0,0 +1,18 @@
+class OasisMenuMessage {
+  constructor({ message = '', type = 'info', onClose = null } = {}) { this._message = message; this._type = type; 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-menu-msg{padding:16px;border-radius:10px;font-size:14px;line-height:1.6}.oasis-menu-msg.info{background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);color:#e0f7ff}.oasis-menu-msg.warn{background:rgba(255,200,0,.1);border:1px solid rgba(255,200,0,.3);color:#fff9e0}.oasis-menu-msg.error{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.3);color:#ffe0e0}.oasis-menu-msg.success{background:rgba(0,200,100,.1);border:1px solid rgba(0,200,100,.3);color:#e0ffe8}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    const icons = { info: 'ℹ️', warn: '⚠️', error: '❌', success: '✅' };
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Message</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-menu-msg ${this._type}">${icons[this._type]||'ℹ️'} ${this._message || 'No message provided.'}</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.OasisMenuMessage = OasisMenuMessage;

package/src/messaging.js

@@ -0,0 +1,27 @@
+class OasisMessaging {
+  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-msg-thread{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;max-height:300px;overflow-y:auto}.oasis-msg-bubble{padding:10px 14px;border-radius:12px;font-size:13px;max-width:80%}.oasis-msg-bubble.sent{background:rgba(0,102,204,.3);border:1px solid rgba(0,102,204,.4);color:#e0f0ff;align-self:flex-end}.oasis-msg-bubble.recv{background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);color:#fff;align-self:flex-start}.oasis-msg-meta{font-size:10px;color:#7a9bbf;margin-bottom:4px}.oasis-send-row{display:flex;gap:8px}.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,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}.oasis-btn-primary:hover{opacity:.85}.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}`; 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">Messaging</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-msg-thread" id="oasis-msg-thread"><div class="oasis-cs"><div class="oasis-cs-icon">💬</div><p>No messages yet.</p></div></div><div class="oasis-send-row"><input class="oasis-input" id="oasis-msg-input" placeholder="Type a message…"><button class="oasis-btn-primary" id="oasis-msg-send">Send</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(); });
+    this._overlay.querySelector('#oasis-msg-send').addEventListener('click', () => this._send());
+    this._overlay.querySelector('#oasis-msg-input').addEventListener('keydown', e => { if (e.key === 'Enter') this._send(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  _send() {
+    const input = this._overlay.querySelector('#oasis-msg-input');
+    const text = input.value.trim(); if (!text) return;
+    const thread = this._overlay.querySelector('#oasis-msg-thread');
+    if (thread.querySelector('.oasis-cs')) thread.innerHTML = '';
+    thread.insertAdjacentHTML('beforeend', `<div class="oasis-msg-bubble sent"><div class="oasis-msg-meta">You · just now</div>${text}</div>`);
+    input.value = ''; thread.scrollTop = thread.scrollHeight;
+  }
+  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.OasisMessaging = OasisMessaging;

package/src/mission.js

@@ -0,0 +1,17 @@
+class OasisMission {
+  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:640px;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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:11px;color:#7a9bbf}`; 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">Missions</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid"><div class="oasis-card"><div class="oasis-card-title">📋 Manage</div><div class="oasis-card-sub">Edit missions</div></div><div class="oasis-card"><div class="oasis-card-title">🔍 Search</div><div class="oasis-card-sub">Find missions</div></div><div class="oasis-card"><div class="oasis-card-title">👁️ View</div><div class="oasis-card-sub">Mission details</div></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'));
+  }
+  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.OasisMission = OasisMission;

package/src/mongo-db.js

@@ -0,0 +1,17 @@
+class OasisMongoDb {
+  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">MongoDB 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>MongoDB Provider</h3><p>MongoDB NoSQL database integration for flexible document storage within the OASIS data layer.</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.OasisMongoDb = OasisMongoDb;

package/src/neo4j.js

@@ -0,0 +1,17 @@
+class OasisNeo4j {
+  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">Neo4j 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>Neo4j Provider</h3><p>Graph database integration via Neo4j — ideal for social graphs, quest dependencies, and relationship data.</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.OasisNeo4j = OasisNeo4j;

package/src/nft.js

@@ -0,0 +1,17 @@
+class OasisNFT {
+  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:640px;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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:11px;color:#7a9bbf}`; 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">OASIS NFTs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid"><div class="oasis-card"><div class="oasis-card-title">🖼️ View NFTs</div><div class="oasis-card-sub">Browse collection</div></div><div class="oasis-card"><div class="oasis-card-title">🛒 Purchase</div><div class="oasis-card-sub">Buy NFTs</div></div><div class="oasis-card"><div class="oasis-card-title">🌍 Virtual Land</div><div class="oasis-card-sub">Land NFTs</div></div><div class="oasis-card"><div class="oasis-card-title">📋 Manage</div><div class="oasis-card-sub">Your NFTs</div></div><div class="oasis-card"><div class="oasis-card-title">🔍 Search</div><div class="oasis-card-sub">Find NFTs</div></div><div class="oasis-card"><div class="oasis-card-title">⚡ Solana</div><div class="oasis-card-sub">Solana NFTs</div></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'));
+  }
+  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.OasisNFT = OasisNFT;

package/src/oapp.js

@@ -0,0 +1,17 @@
+class OasisOApp {
+  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:640px;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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:11px;color:#7a9bbf}`; 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">OAPP Manager</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid"><div class="oasis-card"><div class="oasis-card-title">➕ Create</div><div class="oasis-card-sub">New OAPP</div></div><div class="oasis-card"><div class="oasis-card-title">✏️ Edit</div><div class="oasis-card-sub">Modify OAPP</div></div><div class="oasis-card"><div class="oasis-card-title">🚀 Deploy</div><div class="oasis-card-sub">Go live</div></div><div class="oasis-card"><div class="oasis-card-title">⬇️ Install</div><div class="oasis-card-sub">Add OAPP</div></div><div class="oasis-card"><div class="oasis-card-title">▶️ Launch</div><div class="oasis-card-sub">Run OAPP</div></div><div class="oasis-card"><div class="oasis-card-title">📋 Manage</div><div class="oasis-card-sub">All OAPPs</div></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'));
+  }
+  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.OasisOApp = OasisOApp;

package/src/onet.js

@@ -0,0 +1,17 @@
+class OasisONET {
+  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:500px;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}`; 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">ONET</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🌐</div><h3>OASIS Network (ONET)</h3><p>The decentralised network layer powering the OASIS. Connect, route, and communicate across all nodes in the Omniverse.</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'));
+  }
+  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.OasisONET = OasisONET;

package/src/onode.js

@@ -0,0 +1,17 @@
+class OasisONODE {
+  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:500px;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}`; 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">ONODE</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-cs"><div class="oasis-cs-icon">🔵</div><h3>OASIS Node (ONODE)</h3><p>A distributed node in the OASIS network. Each ONODE contributes storage, compute, and bandwidth to the decentralised Omniverse infrastructure.</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'));
+  }
+  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.OasisONODE = OasisONODE;

package/src/pay-with-seeds.js

@@ -0,0 +1,17 @@
+class OasisPayWithSeeds {
+  constructor({ amount = '', recipient = '', onClose = null } = {}) { this._amount = amount; this._recipient = recipient; 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">Pay with SEEDS</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Pay To</label><input class="oasis-input" value="${this._recipient}" placeholder="SEEDS account name…"></div><div class="oasis-form-group"><label class="oasis-label">Amount (SEEDS)</label><input class="oasis-input" type="number" value="${this._amount}" placeholder="0.00"></div><div class="oasis-form-group"><label class="oasis-label">Memo</label><input class="oasis-input" placeholder="Payment description…"></div><button class="oasis-btn-primary">🌱 Pay Now</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.OasisPayWithSeeds = OasisPayWithSeeds;

package/src/plot-route-on-map.js

@@ -0,0 +1,17 @@
+class OasisPlotRouteOnMap {
+  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,#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">Plot Route on Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Route Name</label><input class="oasis-input" placeholder="e.g. City Tour, Quest Path…"></div><div class="oasis-form-group"><label class="oasis-label">Start Location</label><input class="oasis-input" placeholder="Lat, Lng or place name…"></div><div class="oasis-form-group"><label class="oasis-label">End Location</label><input class="oasis-input" placeholder="Lat, Lng or place name…"></div><div class="oasis-form-group"><label class="oasis-label">Waypoints (optional)</label><input class="oasis-input" placeholder="Comma-separated lat,lng pairs…"></div><button class="oasis-btn-primary">Plot Route</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.OasisPlotRouteOnMap = OasisPlotRouteOnMap;

package/src/providers.js

@@ -0,0 +1,18 @@
+class OasisProviders {
+  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:640px;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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:14px;cursor:pointer;transition:all .2s;text-align:center}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:11px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:10px;color:#7a9bbf}`; document.head.appendChild(s); }
+  open() {
+    if (this._overlay) return;
+    this._overlay = document.createElement('div');
+    this._overlay.className = 'oasis-popup-overlay';
+    const providers = [['🗄️','MongoDB','NoSQL'],['🔺','Neo4j','Graph DB'],['☁️','IPFS','Decentralised'],['🌱','Holochain','P2P'],['🔷','Ethereum','Blockchain'],['🟣','Solana','Fast chain'],['🟢','EOSIO','DPOS'],['💧','Solid','Linked Data'],['🌿','Seeds','SEEDS economy'],['📡','ActivityPub','Federation'],['🔒','ThreeFold','Web4 grid'],['💾','SQLite','Local DB']];
+    this._overlay.innerHTML = `<div class="oasis-popup-modal"><div class="oasis-popup-header"><span class="oasis-popup-title">Providers</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid">${providers.map(([i,n,s])=>`<div class="oasis-card"><div style="font-size:24px;margin-bottom:6px">${i}</div><div class="oasis-card-title">${n}</div><div class="oasis-card-sub">${s}</div></div>`).join('')}</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.OasisProviders = OasisProviders;

package/src/quest.js

@@ -0,0 +1,17 @@
+class OasisQuest {
+  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:640px;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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.oasis-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.oasis-card:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.1)}.oasis-card-title{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;margin-bottom:4px}.oasis-card-sub{font-size:11px;color:#7a9bbf}`; 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</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-grid"><div class="oasis-card"><div class="oasis-card-title">📋 Manage</div><div class="oasis-card-sub">Edit quests</div></div><div class="oasis-card"><div class="oasis-card-title">🔍 Search</div><div class="oasis-card-sub">Find quests</div></div><div class="oasis-card"><div class="oasis-card-title">👁️ View</div><div class="oasis-card-sub">Quest details</div></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'));
+  }
+  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.OasisQuest = OasisQuest;

package/src/reward-seeds.js

@@ -0,0 +1,17 @@
+class OasisRewardSeeds {
+  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}textarea.oasis-input{min-height:70px;resize:vertical}.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">Reward SEEDS</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-form-group"><label class="oasis-label">Reward Recipient</label><input class="oasis-input" placeholder="Avatar username or SEEDS account…"></div><div class="oasis-form-group"><label class="oasis-label">SEEDS Amount</label><input class="oasis-input" type="number" min="0" placeholder="0.00"></div><div class="oasis-form-group"><label class="oasis-label">Reason</label><textarea class="oasis-input" placeholder="What are you rewarding them for?"></textarea></div><button class="oasis-btn-primary">🌱 Send Reward</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.OasisRewardSeeds = OasisRewardSeeds;

package/src/search-avatars.js

@@ -0,0 +1,32 @@
+class OasisSearchAvatars {
+  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-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,#0066cc,#00c8ff);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-table tr:hover td{background:rgba(0,200,255,.04)}.oasis-cs{text-align:center;padding:32px 16px}.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">Search Avatars</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-search-row"><input class="oasis-input" id="oasis-sa-q" placeholder="Search by username or ID…"><button class="oasis-btn-primary" id="oasis-sa-btn">Search</button></div><div id="oasis-sa-results"><div class="oasis-cs"><p>Enter a search term to find avatars.</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-sa-btn').addEventListener('click', () => this._search());
+    this._overlay.querySelector('#oasis-sa-q').addEventListener('keydown', e => { if (e.key === 'Enter') this._search(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  async _search() {
+    const q = this._overlay.querySelector('#oasis-sa-q').value.trim();
+    const results = this._overlay.querySelector('#oasis-sa-results');
+    if (!q) return;
+    results.innerHTML = '<div class="oasis-cs"><p>Searching…</p></div>';
+    try {
+      const r = await fetch(`${this._apiUrl}/api/avatars/search?q=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const items = Array.isArray(data) ? data : (data.result || []);
+      if (!items.length) { results.innerHTML = '<div class="oasis-cs"><p>No avatars found.</p></div>'; return; }
+      results.innerHTML = `<table class="oasis-table"><thead><tr><th>Username</th><th>Email</th><th>Karma</th></tr></thead><tbody>${items.map(a=>`<tr><td>${a.username||a.name||'—'}</td><td>${a.email||'—'}</td><td>${a.karma||0}</td></tr>`).join('')}</tbody></table>`;
+    } catch { results.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.OasisSearchAvatars = OasisSearchAvatars;

package/src/search-map.js

@@ -0,0 +1,18 @@
+class OasisSearchMap {
+  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,#0066cc,#00c8ff);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}.oasis-cs{text-align:center;padding:24px}.oasis-cs p{color:#7a9bbf;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 Map</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-search-row"><input class="oasis-input" id="oasis-sm-q" placeholder="Search locations, quests, objects…"><button class="oasis-btn-primary" id="oasis-sm-btn">Search</button></div><div id="oasis-sm-results"><div class="oasis-cs"><p>Enter a search term to find map objects.</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-sm-btn').addEventListener('click', () => { this._overlay.querySelector('#oasis-sm-results').innerHTML = '<div class="oasis-cs"><p>No results found for that location.</p></div>'; });
+    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.OasisSearchMap = OasisSearchMap;

package/src/search-oapp.js

@@ -0,0 +1,32 @@
+class OasisSearchOAPP {
+  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-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,#0066cc,#00c8ff);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 OAPPs</span><button class="oasis-popup-close">×</button></div><div class="oasis-popup-body"><div class="oasis-search-row"><input class="oasis-input" id="oasis-soapp-q" placeholder="Search by name or category…"><button class="oasis-btn-primary" id="oasis-soapp-btn">Search</button></div><div id="oasis-soapp-results"><div class="oasis-cs"><p>Enter a search term to find OAPPs.</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-soapp-btn').addEventListener('click', () => this._search());
+    this._overlay.querySelector('#oasis-soapp-q').addEventListener('keydown', e => { if (e.key === 'Enter') this._search(); });
+    document.body.appendChild(this._overlay);
+    requestAnimationFrame(() => this._overlay.classList.add('is-open'));
+  }
+  async _search() {
+    const q = this._overlay.querySelector('#oasis-soapp-q').value.trim();
+    const results = this._overlay.querySelector('#oasis-soapp-results');
+    if (!q) return;
+    results.innerHTML = '<div class="oasis-cs"><p>Searching…</p></div>';
+    try {
+      const r = await fetch(`${this._apiUrl}/api/oapp/search?q=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      const items = Array.isArray(data) ? data : (data.result || []);
+      if (!items.length) { results.innerHTML = '<div class="oasis-cs"><p>No OAPPs found.</p></div>'; return; }
+      results.innerHTML = `<table class="oasis-table"><thead><tr><th>Name</th><th>Category</th><th>Version</th></tr></thead><tbody>${items.map(o=>`<tr><td>${o.name||'—'}</td><td>${o.category||'—'}</td><td>${o.version||'—'}</td></tr>`).join('')}</tbody></table>`;
+    } catch { results.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.OasisSearchOAPP = OasisSearchOAPP;

package/src/search-providers.js

@@ -0,0 +1,17 @@
+class OasisSearchProviders {
+  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">Search 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>Search Providers</h3><p>Search the OASIS provider registry to discover and connect to new storage and compute nodes.</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.OasisSearchProviders = OasisSearchProviders;